yudao-dev/src/views/oldBase/material/add-or-updata.vue

<!--
 * @Author: zwq
 * @Date: 2021-11-18 14:16:25
 * @LastEditors: zwq
 * @LastEditTime: 2024-07-08 16:52:34
 * @Description:
-->
<template>
	<el-form
		:model="dataForm"
		:rules="dataRule"
		ref="dataForm"
		@keyup.enter.native="dataFormSubmit()"
		label-width="100px"
		label-position="top">
		<el-row :gutter="20">
			<el-col :span="8">
				<el-form-item label="物料产品名称" prop="name">
					<el-input
						v-model="dataForm.name"
						clearable
						placeholder="请输入物料产品名称" />
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item label="物料产品编码" prop="code">
					<el-input
						v-model="dataForm.code"
						clearable
						placeholder="请输入物料产品编码" />
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item label="物料产品类型" prop="typeId">
					<treeselect
						v-model="dataForm.typeId"
						:options="deptOptions"
						:normalizer="normalizer"
						@select="setShowTime"
						:show-count="true"
						:appendToBody="true"
						z-index="99999"
						placeholder="选择物料产品类型" />
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item label="单位" prop="unit">
					<el-select
						v-model="dataForm.unit"
						filterable
						style="width: 100%"
						placeholder="请选择单位">
						<el-option
							v-for="dict in getDictDatas(DICT_TYPE.UNIT_DICT)"
							:key="dict.value"
							:label="dict.label"
							:value="dict.value" />
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item label="规格" prop="specifications">
					<el-input
						v-model="dataForm.specifications"
						clearable
						placeholder="请输入规格" />
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item label="供应商" prop="supplierId">
					<el-select
						v-model="dataForm.supplierId"
						filterable
						clearable
						:style="{ width: '100%' }"
						placeholder="请选择供应商">
						<el-option
							v-for="item in supplierArr"
							:key="item.id"
							:label="item.name"
							:value="item.id"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="8" v-if="showTime">
				<el-form-item label="生产单位用时" prop="processTime">
					<el-input
						v-model.number="dataForm.processTime"
						type="number"
						clearable
						placeholder="请输入产线生产单位用时" />
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item label="备注" prop="remark">
					<el-input
						v-model="dataForm.remark"
						clearable
						placeholder="请输入备注" />
				</el-form-item>
			</el-col>
		</el-row>
	</el-form>
</template>

<script>
import basicAdd from '../../core/mixins/basic-add';
import { getTreeArr } from '../mixins/code-filter';
import {
	createProductMaterial,
	updateProductMaterial,
	getProductMaterial,
	getProductMaterialCode,
	getSupplierList,
	getMaterialTree,
} from '@/api/base/material';
import Treeselect from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';

export default {
	mixins: [basicAdd],
	components: {
		Treeselect,
	},
	data() {
		return {
			urlOptions: {
				isGetCode: true,
				codeURL: getProductMaterialCode,
				createURL: createProductMaterial,
				updateURL: updateProductMaterial,
				infoURL: getProductMaterial,
			},
			deptOptions: undefined,
			showTime: false,
			dataForm: {
				id: undefined,
				code: undefined,
				name: '',
				typeId: undefined,
				unit: undefined,
				specifications: undefined,
				supplierId: undefined,
				processTime: 0,
				remark: undefined,
			},
			supplierArr: [],
			treeArr: [],
			dataRule: {
				code: [{ required: true, message: '编号不能为空', trigger: 'blur' }],
				name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
				typeId: [
					{
						required: true,
						message: '物料产品类型不能为空',
						trigger: 'blur',
					},
				],
			},
		};
	},
	mounted() {},
	methods: {
		init(id) {
			this.dataForm.id = id || '';
			this.visible = true;
			this.$nextTick(() => {
				this.$refs['dataForm'].resetFields();
				if (this.dataForm.id) {
					this.urlOptions.infoURL(id).then((response) => {
						this.dataForm = response.data;
						this.setDataForm();
					});
				} else {
					if (this.urlOptions.isGetCode) {
						this.getCode();
						this.setDataForm();
					}
				}
			});
		},
		typeId(typeId, product) {
			this.$nextTick(() => {
				this.dataForm.typeId = typeId || undefined;
				this.showTime = product || false;
			});
		},
		setDataForm() {
			getSupplierList().then((res) => {
				this.supplierArr = res.data;
			});
			// 下拉树结构
			getMaterialTree().then((response) => {
				this.deptOptions = [];
				this.deptOptions.push(...this.handleTree(response.data, 'id'));
				this.$nextTick(() => {
					if (this.dataForm.id) {
						this.treeArr = [];
						this.treeArr = getTreeArr(response.data);//解构，树结构变为普通数组
						this.showTime = this.treeArr.find(
							(item) => item.id == this.dataForm.typeId
						).product;
					}
				});
			});
		},
		/** 转换菜单数据结构 */
		normalizer(node) {
			if (node.children && !node.children.length) {
				delete node.children;
			}
			return {
				id: node.id,
				label: node.name,
				children: node.children,
			};
		},
		setShowTime(node) {
			this.showTime = node.product || false;
		},
	},
};
</script>