yudao-dev/src/views/quality/qualityScrapLog/add-or-updata.vue

<template>
	<el-form
		:model="dataForm"
		:rules="dataRule"
		ref="dataForm"
		@keyup.enter.native="dataFormSubmit()"
		label-width="auto">
		<el-row :gutter="20">
			<el-col :span="12">
				<el-form-item label="工单名称" prop="workOrderId">
					<el-select
						v-model="dataForm.workOrderId"
						placeholder="请选择工单名称"
						style="width: 100%"
						:disabled="showDetail">
						<el-option
							v-for="dict in workOrderList"
							:key="dict.id"
							:label="dict.name"
							:value="dict.id" />
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="班组" prop="teamId" :disabled="showDetail">
					<el-select
						v-model="dataForm.teamId"
						placeholder="请选择班组"
						style="width: 100%"
						:disabled="showDetail">
						<el-option
							v-for="dict in teamList"
							:key="dict.id"
							:label="dict.name"
							:value="dict.id" />
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="数量" prop="num" style="width: 100%">
					<el-input
						v-model="dataForm.num"
						placeholder="请输入数量"
						:disabled="showDetail" />
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="产线" prop="lineId">
					<el-select
						v-model="dataForm.lineId"
						placeholder="请选择产线"
						style="width: 100%"
						:disabled="showDetail">
						<el-option
							v-for="dict in lineList"
							:key="dict.id"
							:label="dict.name"
							:value="dict.id" />
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="报废原因" prop="detId">
					<el-select
						v-model="dataForm.detId"
						placeholder="请选择报废原因"
						style="width: 100%"
						:disabled="showDetail">
						<el-option
							v-for="dict in detList"
							:key="dict.id"
							:label="dict.name"
							:value="dict.id" />
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="报废时间" prop="logTime">
					<el-date-picker
						v-model="dataForm.logTime"
						type="datetime"
						label-format="yyyy-MM-dd HH:mm:ss"
						value-format="timestamp"
						style="width: 100%"
						placeholder="选择日期"
						:disabled="showDetail"></el-date-picker>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="来源" prop="source">
					<el-select
						v-model="dataForm.source"
						placeholder="请选择来源"
						style="width: 100%"
						:disabled="showDetail">
						<el-option
							v-for="dict in sourceList"
							:key="dict.id"
							:label="dict.name"
							:value="dict.id" />
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="24">
				<el-form-item label="描述" prop="description">
					<el-input
						v-model="dataForm.description"
						placeholder="请输入描述"
						type="textarea"
						:autosize="{ minRows: 2, maxRows: 4 }"
						:disabled="showDetail" />
				</el-form-item>
			</el-col>
			<el-col :span="24">
				<el-form-item label="备注" prop="remark">
					<el-input
						v-model="dataForm.remark"
						placeholder="备注"
						:disabled="showDetail" />
				</el-form-item>
			</el-col>
		</el-row>
	</el-form>
</template>

<script>
import {
	createQualityScrapLog,
	updateQualityScrapLog,
	getQualityScrapLog,
	getWorkOrderList,
	getTeamList,
	getDetList,
	getLineList,
} from '@/api/base/qualityScrapLog';
export default {
	data() {
		return {
			lineList: [],
			workOrderList: [],
			detList: [],
			teamList: [],
			sourceList: [
				{
					id: 1,
					name: '手动',
				},
				{
					id: 2,
					name: '自动',
				},
			],
			dataForm: {
				id: undefined,
				logTime: undefined,
				source: 1,
				detId: undefined,
				workOrderId: null,
				teamId: undefined,
				num: null,
				lineId: undefined,
				description: undefined,
				remark: undefined,
			},
			dataRule: {
				workOrderId: [
					{ required: true, message: '工单名称不能为空', trigger: 'change' },
				],
				num: [{ required: true, message: '数量不能为空', trigger: 'blur' }],
				detId: [
					{ required: true, message: '报废原因不能为空', trigger: 'change' },
				],

				logTime: [{ required: true, message: '报废时间不能为空', trigger: 'change' }],
			},
			showDetail: false,
		};
	},
	mounted() {
		this.getList();
	},
	methods: {
		init(id, show) {
			this.showDetail = show ? true : false;
			this.dataForm.id = id || undefined;
			if (id) {
				// 编辑
				getQualityScrapLog(id).then((res) => {
					console.log(res);
					this.dataForm = res.data;
					this.dataForm.logTime = res.data.logTime || null;
				});
			} else {
				this.dataForm.logTime = Date.now();
			}
		},
		// 表单提交
		dataFormSubmit() {
			this.$refs['dataForm'].validate((valid) => {
				if (!valid) {
					return false;
				}
				// 修改的提交
				if (this.dataForm.id) {
					updateQualityScrapLog(this.dataForm).then((response) => {
						this.$modal.msgSuccess('修改成功');
						this.visible = false;
						this.$emit('refreshDataList');
					});
					return;
				}
				// 添加的提交
				createQualityScrapLog(this.dataForm).then((response) => {
					this.$modal.msgSuccess('新增成功');
					this.visible = false;
					this.$emit('refreshDataList');
				});
			});
		},
		getList() {
			// 物料列表
			getWorkOrderList().then((res) => {
				console.log(res);
				this.workOrderList = res.data.map((item) => {
					return {
						name: item.name,
						id: item.id,
					};
				});
			});
			getLineList().then((res) => {
				console.log(res);
				this.lineList = res.data.map((item) => {
					return {
						name: item.name,
						id: item.id,
					};
				});
			});
			getDetList().then((res) => {
				console.log(res);
				this.detList = res.data.map((item) => {
					return {
						name: item.content,
						id: item.id,
					};
				});
			});
			getTeamList().then((res) => {
				console.log(res);
				this.teamList = res.data.map((item) => {
					return {
						name: item.name,
						id: item.id,
					};
				});
			});
		},
		formClear() {
			this.$refs.dataForm.resetFields();
		},
	},
};
</script>