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

@@ -38,11 +38,30 @@
 			@close="cancel"
 			@cancel="cancel"
 			@confirm="submitForm">
-			<DialogForm
+			<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
-				v-if="open"
+		</base-dialog>
-				ref="form"
+	</div>
-				:dataForm="form"
+</template>
-				:rows="[
+
+<script>
+import {
+	createQualityInspectionBoxBtn,
+	updateQualityInspectionBoxBtn,
+	deleteQualityInspectionBoxBtn,
+	getQualityInspectionBoxBtn,
+	getQualityInspectionBoxBtnPage,
+	exportQualityInspectionBoxBtnExcel,
+} from '@/api/base/qualityInspectionBoxBtn';
+import basicPageMixin from '../../mixin/basicPageMixin';
+import moment from 'moment';
+
+export default {
+	name: 'QualityInspectionBoxBtn',
+	mixins: [basicPageMixin],
+	components: {},
+	data() {
+		return {
+			rows: [
 				[
 					{
 						select: true,
@@ -63,13 +82,6 @@
 						prop: 'sectionId',
 						rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
 					},
-						// {
-						// 	select: true,
-						//   url: '', //
-						// 	label: '检测内容',
-						// 	prop: 'inspectionDetContent',
-						// 	rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
-						// },
 				],
 				[
 					{
@@ -111,29 +123,7 @@
 						rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
 					},
 				],
-				]" />
+			],
-		</base-dialog>
-	</div>
-</template>
-
-<script>
-import {
-	createQualityInspectionBoxBtn,
-	updateQualityInspectionBoxBtn,
-	deleteQualityInspectionBoxBtn,
-	getQualityInspectionBoxBtn,
-	getQualityInspectionBoxBtnPage,
-	exportQualityInspectionBoxBtnExcel,
-} from '@/api/base/qualityInspectionBoxBtn';
-import basicPageMixin from '../../mixin/basicPageMixin';
-import moment from 'moment';
-
-export default {
-	name: 'QualityInspectionBoxBtn',
-	mixins: [basicPageMixin],
-	components: {},
-	data() {
-		return {
 			searchBarFormConfig: [
 				{
 					type: 'input',

src/views/quality/components/dialogForm.vue

@@ -108,6 +108,18 @@ export default {
 			},
 		},
 	},
+	watch: {
+		rows: {
+			handler() {
+				console.log('watch triggered!');
+				this.$nextTick(() => {
+					this.handleOptions('watch');
+				});
+			},
+			deep: true,
+			immediate: false,
+		},
+	},
 	mounted() {
 		// 处理 options
 		this.handleOptions();
@@ -125,32 +137,18 @@ export default {
 			const response = await this.$axios(url);
 			return response.data;
 		},
-		handleOptions() {
+		async handleOptions(trigger = 'monuted') {
 			// console.log("[dialogForm:handleOptions]")
 			const promiseList = [];
 			this.rows.forEach((cols) => {
-				cols.forEach(async (opt) => {
+				cols.forEach((opt) => {
-					if (opt.onChange) {
+					if (opt.value && !this.form[opt.prop]) {
-						this.$watch(`form.${opt.prop}`, {
-							handler: (val) => {
-								this.$emit(opt.onChange.emit, val);
-							},
-							immediate: true,
-						});
-					}
-					if (opt.listen) {
-						// 注册监听时间
-						this.$on(opt.listen, (val) => {
-							alert(val);
-						});
-					}
-					if (opt.value) {
 						// 默认值
 						this.form[opt.prop] = opt.value;
 					}
 
 					if (opt.options) {
-						this.optionListOf[opt.prop] = opt.options;
+						this.$set(this.optionListOf, opt.prop, opt.options);
 					} else if (opt.url) {
 						// 如果是下拉框，或者新增模式下的输入框，才去请求
 						if (opt.select || (opt.input && !this.form?.id)) {
@@ -179,9 +177,16 @@ export default {
 								}
 							});
 						}
+					}
+				});
+			});
+
+			// 如果是 watch 触发的，不需要执行进一步的请求
+			if (trigger == 'watch') {
+				this.formLoading = false;
+				return;
+			}
 			try {
-							// this.formLoading = true;
-							// console.log("[dialogForm:handleOptions:promiseList]", promiseList)
 				await Promise.all(promiseList.map((fn) => fn()));
 				this.formLoading = false;
 				// console.log("[dialogForm:handleOptions:optionListOf]", this.optionListOf)
@@ -189,9 +194,6 @@ export default {
 				console.log('[dialogForm:handleOptions:error]', error);
 				this.formLoading = false;
 			}
-					}
-				});
-			});
 			if (!promiseList.length) this.formLoading = false;
 		},
 	},

src/views/quality/monitoring/qualityInspectionRecord/index.vue

@@ -38,107 +38,7 @@
 			@close="cancel"
 			@cancel="cancel"
 			@confirm="submitForm">
-			<DialogForm
+			<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
-				v-if="open"
-				ref="form"
-				:dataForm="form"
-				:rows="[
-					[
-						{
-							select: true,
-							label: '检测内容ID',
-							url: '/base/quality-inspection-det/listAll',
-							prop: 'inspectionDetId',
-							labelKey: 'content',
-							rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
-							bind: {
-								filterable: true,
-							},
-						},
-						{
-							select: true,
-							label: '来源',
-							prop: 'source',
-							value: 1, // 默认手动
-							options: [
-								{ label: '手动', value: 1 },
-								{ label: '自动', value: 2 },
-							],
-							bind: {
-								filterable: true,
-							},
-						},
-						// {
-						// 	input: true,
-						// 	label: '',
-						// 	prop: 'buttonId',
-						// 	rules: [
-						// 		{
-						// 			type: 'number',
-						// 			message: '请输入数字',
-						// 			trigger: 'blur',
-						// 			transform: (val) => Number(val),
-						// 		},
-						// 	],
-						// },
-					],
-					[
-						// 此方案必须，工段（含listen）字段必须在产线字段（含onChange）之前
-						{
-							select: true,
-							label: '工段',
-							url: '/base/workshop-section/listAll',
-							prop: 'sectionId',
-							listen: 'productionLineChange', // 对应上面 emit
-							rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
-						},
-						{
-							select: true,
-							label: '产线',
-							url: '/base/production-line/listAll',
-							prop: 'productionLineId',
-							onChange: { emit: 'productionLineChange' },
-							rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
-						},
-					],
-					[
-						{
-							input: true,
-							label: '检测人员',
-							prop: 'checkPerson',
-							rules: [
-								// {
-								// 	type: 'number',
-								// 	message: '请输入数字',
-								// 	trigger: 'blur',
-								// 	transform: (val) => Number(val),
-								// },
-							],
-						},
-						{
-							datetime: true,
-							label: '检测时间',
-							prop: 'checkTime',
-							bind: {
-								format: 'yyyy-MM-dd HH:mm:ss',
-								'value-format': 'timestamp',
-								// 'value-format': 'yyyy-MM-dd HH:mm:ss',
-								clearable: true,
-							},
-						},
-					],
-					[
-						{
-							textarea: true,
-							label: '检测内容',
-							prop: 'inspectionDetContent',
-							value: '',
-							rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
-						},
-					],
-					[{ textarea: true, label: '描述', prop: 'explainText' }],
-					[{ input: true, label: '备注', prop: 'remark' }],
-				]" />
 		</base-dialog>
 	</div>
 </template>
@@ -164,6 +64,80 @@ export default {
 	mixins: [basicPageMixin],
 	data() {
 		return {
+			rows: [
+				[
+					{
+						select: true,
+						label: '检测内容ID',
+						url: '/base/quality-inspection-det/listAll',
+						prop: 'inspectionDetId',
+						labelKey: 'content',
+						rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+						bind: {
+							filterable: true,
+						},
+					},
+					{
+						select: true,
+						label: '来源',
+						prop: 'source',
+						value: 1, // 默认手动
+						options: [
+							{ label: '手动', value: 1 },
+							{ label: '自动', value: 2 },
+						],
+						bind: {
+							filterable: true,
+						},
+					},
+				],
+				[
+					{
+						select: true,
+						label: '产线',
+						url: '/base/production-line/listAll',
+						prop: 'productionLineId',
+						rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+					},
+					{
+						select: true,
+						label: '工段',
+						url: '/base/workshop-section/listAll', // 这个 url 其实可加可不加，因为下面会更新 options
+						options: [], // 这个options也可加可不加, 因为下面会更新 options
+						prop: 'sectionId',
+						rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+					},
+				],
+				[
+					{
+						input: true,
+						label: '检测人员',
+						prop: 'checkPerson',
+					},
+					{
+						datetime: true,
+						label: '检测时间',
+						prop: 'checkTime',
+						bind: {
+							format: 'yyyy-MM-dd HH:mm:ss',
+							'value-format': 'timestamp',
+							// 'value-format': 'yyyy-MM-dd HH:mm:ss',
+							clearable: true,
+						},
+					},
+				],
+				[
+					{
+						textarea: true,
+						label: '检测内容',
+						prop: 'inspectionDetContent',
+						value: '',
+						rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+					},
+				],
+				[{ textarea: true, label: '描述', prop: 'explainText' }],
+				[{ input: true, label: '备注', prop: 'remark' }],
+			],
 			searchBarFormConfig: [
 				{
 					type: 'select',
@@ -296,6 +270,31 @@ export default {
 		this.getList();
 		this.getProductLineList();
 	},
+	watch: {
+		// 注册弹窗里产线改变时的监听事件
+		'form.productionLineId': {
+			handler: function (val) {
+				if (val == null) return;
+				this.$axios('/base/workshop-section/listByParentId', {
+					params: {
+						id: val,
+					},
+				}).then((response) => {
+					this.$set(
+						this.rows[1][1], // 这里索引是硬编码，所以当 this.rows 里数据顺序改变时，此处也要改
+						'options',
+						response.data.map((item) => {
+							return {
+								label: item.name,
+								value: item.id,
+							};
+						})
+					);
+				});
+			},
+			immediate: true,
+		},
+	},
 	methods: {
 		/** 获取搜索栏的产线列表 */
 		getProductLineList() {