apply DialogForm & debug

src/views/quality/base/qualityInspectionType/index.vue

@@ -33,9 +33,27 @@
 		<base-dialog
 			:dialogTitle="title"
 			:dialogVisible="open"
+			@close="cancel"
 			@cancel="cancel"
 			@confirm="submitForm">
-			<el-form ref="form" :model="form" :rules="rules" label-width="128px">
+			<DialogForm
+				v-if="open"
+				ref="form"
+				:dataForm="form"
+				:rows="[
+					[
+						{
+							input: true,
+							label: '检测类型名称',
+							prop: 'name',
+							rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+						},
+					],
+					[{ input: true, label: '检测类型编码', prop: 'code' }],
+					[{ input: true, label: '备注', prop: 'remark' }],
+				]" />
+
+			<!-- <el-form ref="form" :model="form" :rules="rules" label-width="128px">
 				<el-form-item label="检测类型名称" prop="name">
 					<el-input v-model="form.name" placeholder="请输入检测类型名称" />
 				</el-form-item>
@@ -45,14 +63,14 @@
 				<el-form-item label="备注" prop="remark">
 					<el-input v-model="form.remark" placeholder="请输入备注" />
 				</el-form-item>
-			</el-form>
+			</el-form> -->
 		</base-dialog>
-		
 	</div>
 </template>
 
 <script>
 import moment from 'moment';
+import DialogForm from '../../components/dialogForm.vue';
 
 import {
 	createQualityInspectionType,
@@ -65,19 +83,23 @@ import {
 
 export default {
 	name: 'QualityInspectionType',
-	components: {},
+	components: { DialogForm },
 	data() {
 		return {
 			tableBtn: [
-				this.$auth.hasPermi('base:quality-inspection-type:update') ? {
-					type: 'edit',
-					btnName: '修改',
-				} : undefined,
-				this.$auth.hasPermi('base:quality-inspection-type:delete') ? {
-					type: 'delete',
-					btnName: '删除',
-				} : undefined,
-			].filter(v=>v),
+				this.$auth.hasPermi('base:quality-inspection-type:update')
+					? {
+							type: 'edit',
+							btnName: '修改',
+					  }
+					: undefined,
+				this.$auth.hasPermi('base:quality-inspection-type:delete')
+					? {
+							type: 'delete',
+							btnName: '删除',
+					  }
+					: undefined,
+			].filter((v) => v),
 			tableData: [],
 			tableProps: [
 				{
@@ -173,7 +195,7 @@ export default {
 				// 	name: 'reset',
 				// },
 				{
-					type: 'separate'
+					type: 'separate',
 				},
 				{
 					type: this.$auth.hasPermi('base:quality-inspection-type:create')
@@ -195,6 +217,14 @@ export default {
 			],
 		};
 	},
+	// watch: {
+	// 	form: {
+	// 		handler: (val) => {
+	// 			console.log('form changed', val);
+	// 		},
+	// 		deep: true
+	// 	},
+	// },
 	created() {
 		this.getList();
 	},
@@ -289,10 +319,13 @@ export default {
 		},
 		/** 提交按钮 */
 		submitForm() {
+			// console.log('this.$refs.form', this.$refs.form);
+			// return;
 			this.$refs['form'].validate((valid) => {
 				if (!valid) {
 					return;
 				}
+				console.log('final form', JSON.stringify(this.form));
 				// 修改的提交
 				if (this.form.id != null) {
 					updateQualityInspectionType(this.form).then((response) => {

src/views/quality/components/dialogForm.vue

@@ -9,21 +9,20 @@
 	<el-form
 		ref="form"
 		:model="form"
-		:rules="rules"
-		label-width="`${labelWidth}px`"
+		:label-width="`${labelWidth}px`"
 		v-loading="formLoading">
 		<el-row :gutter="20" v-for="(row, rindex) in rows" :key="rindex">
 			<el-col v-for="col in row" :key="col.label" :span="24 / row.length">
-				<el-form-item :label="col.label" :prop="col.prop">
+				<el-form-item :label="col.label" :prop="col.prop" :rules="col.rules">
 					<el-input
 						v-if="col.input"
 						v-model="form[col.prop]"
 						@change="$emit('update', form)"
-						rules="col.rules"
 						v-bind="col.bind" />
 					<el-select
 						v-if="col.select"
 						v-model="form[col.prop]"
+						@change="$emit('update', form)"
 						v-bind="col.bind">
 						<el-option
 							v-for="opt in optionListOf[col.prop]"
@@ -42,12 +41,14 @@
  * 找到最长的label
  * @param {*} options
  */
-function findMaxLabelWidth(options) {
+function findMaxLabelWidth(rows) {
 	let max = 0;
-	options.forEach((opt) => {
-		if (opt.label.length > max) {
-			max = opt.label.length;
-		}
+	rows.forEach((row) => {
+		row.forEach((opt) => {
+			if (opt.label.length > max) {
+				max = opt.label.length;
+			}
+		});
 	});
 	return max;
 }
@@ -61,7 +62,7 @@ export default {
 	emits: ['update'],
 	components: {},
 	props: {
-		options: {
+		rows: {
 			type: Array,
 			default: () => [],
 		},
@@ -78,9 +79,10 @@ export default {
 	},
 	computed: {
 		labelWidth() {
-			let max = findMaxLabelWidth(this.options);
+			let max = findMaxLabelWidth(this.rows);
 			// 每个汉字占20px
 			return max * 20;
+			// return max * 20 + 'px';
 		},
 		form: {
 			get() {
@@ -97,38 +99,49 @@ export default {
 		this.handleOptions();
 	},
 	methods: {
+        /** 模拟透传 ref  */
+        validate(cb) {
+            return this.$refs.form.validate(cb);
+        },
+        resetFields(args) {
+            return this.$refs.form.resetFields(args);
+        },
+
 		handleOptions() {
-			this.formLoading = true;
 			const promiseList = [];
-			this.options.forEach(async (opt) => {
-				if (opt.options) {
-					this.optionListOf[opt.prop] = opt.options;
-				} else if (opt.url) {
-					promiseList.push(async () => {
-						const response = await this.$axios(opt.url, {
-							method: opt.method ?? 'get',
+			this.rows.forEach((cols) => {
+				cols.forEach(async (opt) => {
+					if (opt.options) {
+						this.optionListOf[opt.prop] = opt.options;
+					} else if (opt.url) {
+						promiseList.push(async () => {
+							const response = await this.$axios(opt.url, {
+								method: opt.method ?? 'get',
+							});
+							console.log('[dialogForm:handleOptions:response]', response);
+							const list =
+								'list' in response.data ? response.data.list : response.data;
+							this.$set(
+								this.optionListOf,
+								opt.prop,
+								list.map((item) => ({
+									label: item[opt.labelKey ?? 'name'],
+									value: item[opt.valueKey ?? 'id'],
+								}))
+							);
 						});
-						console.log('[dialogForm:handleOptions:response]', response);
-						const list =
-							'list' in response.data ? response.data.list : response.data;
-						this.$set(
-							this.optionListOf,
-							opt.prop,
-							list.map((item) => ({
-								label: item[opt.labelKey ?? 'name'],
-								value: item[opt.valueKey ?? 'id'],
-							}))
-						);
-					});
-					try {
-						await Promise.all(promiseList);
-						this.formLoading = false;
-					} catch (error) {
-						console.log('[dialogForm:handleOptions:error]', error);
-						this.formLoading = false;
+						try {
+							this.formLoading = true;
+							await Promise.all(promiseList);
+							this.formLoading = false;
+						} catch (error) {
+							console.log('[dialogForm:handleOptions:error]', error);
+							this.formLoading = false;
+						}
 					}
-				}
+				});
 			});
+			// this.formLoading = false;
 		},
 	},
 };