update 完成dialogForm的字段监听更新逻辑

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

@@ -38,80 +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: '产线',
-							url: '/base/production-line/listAll',
-							prop: 'productionId',
-							rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
-							bind: {
-								filterable: true,
-							},
-						},
-					],
-					[
-						{
-							select: true,
-							label: '工段',
-							url: '/base/workshop-section/listAll',
-							prop: 'sectionId',
-							rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
-						},
-						// {
-						// 	select: true,
-						//   url: '', //
-						// 	label: '检测内容',
-						// 	prop: 'inspectionDetContent',
-						// 	rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
-						// },
-					],
-					[
-						{
-							input: true,
-							label: '按钮盒识别码',
-							prop: 'buttonId',
-							rules: [
-								{
-									type: 'number',
-									message: '请输入数字',
-									trigger: 'blur',
-									transform: (val) => Number(val),
-								},
-							],
-						},
-					],
-					[{ input: true, label: '按钮盒模式', prop: 'model' }],
-					[
-						{
-							input: true,
-							label: '按钮值',
-							prop: 'keyValue',
-							rules: [
-								{
-									type: 'number',
-									message: '请输入100以内的数字',
-									trigger: 'blur',
-									transform: (val) => Number(val) <= 100 && Number(val),
-								},
-							],
-							bind: { type: 'number', min: 0, max: 100 },
-						},
-					],
-					[
-						{
-							textarea: true,
-							label: '检测内容',
-							prop: 'inspectionDetContent',
-							rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
-						},
-					],
-				]" />
 		</base-dialog>
 	</div>
 </template>
@@ -134,6 +61,69 @@ export default {
 	components: {},
 	data() {
 		return {
+			rows: [
+				[
+					{
+						select: true,
+						label: '产线',
+						url: '/base/production-line/listAll',
+						prop: 'productionId',
+						rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+						bind: {
+							filterable: true,
+						},
+					},
+				],
+				[
+					{
+						select: true,
+						label: '工段',
+						url: '/base/workshop-section/listAll',
+						prop: 'sectionId',
+						rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+					},
+				],
+				[
+					{
+						input: true,
+						label: '按钮盒识别码',
+						prop: 'buttonId',
+						rules: [
+							{
+								type: 'number',
+								message: '请输入数字',
+								trigger: 'blur',
+								transform: (val) => Number(val),
+							},
+						],
+					},
+				],
+				[{ input: true, label: '按钮盒模式', prop: 'model' }],
+				[
+					{
+						input: true,
+						label: '按钮值',
+						prop: 'keyValue',
+						rules: [
+							{
+								type: 'number',
+								message: '请输入100以内的数字',
+								trigger: 'blur',
+								transform: (val) => Number(val) <= 100 && Number(val),
+							},
+						],
+						bind: { type: 'number', min: 0, max: 100 },
+					},
+				],
+				[
+					{
+						textarea: true,
+						label: '检测内容',
+						prop: 'inspectionDetContent',
+						rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+					},
+				],
+			],
 			searchBarFormConfig: [
 				{
 					type: 'input',

src/views/quality/components/dialogForm.vue

@@ -39,6 +39,12 @@
 							:label="opt.label"
 							:value="opt.value" />
 					</el-select>
+					<el-date-picker
+						v-if="col.datetime"
+						v-model="form[col.prop]"
+						type="datetime"
+						:placeholder="`请选择${col.label}`"
+						v-bind="col.bind"></el-date-picker>
 				</el-form-item>
 			</el-col>
 		</el-row>
@@ -102,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();
@@ -119,13 +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.value && !this.form[opt.prop]) {
+						// 默认值
+						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)) {
@@ -154,19 +177,23 @@ export default {
 								}
 							});
 						}
-						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)
-						} catch (error) {
-							console.log('[dialogForm:handleOptions:error]', error);
-							this.formLoading = false;
-						}
 					}
 				});
 			});
+
+			// 如果是 watch 触发的，不需要执行进一步的请求
+			if (trigger == 'watch') {
+				this.formLoading = false;
+				return;
+			}
+			try {
+				await Promise.all(promiseList.map((fn) => fn()));
+				this.formLoading = false;
+				// console.log("[dialogForm:handleOptions:optionListOf]", this.optionListOf)
+			} catch (error) {
+				console.log('[dialogForm:handleOptions:error]', error);
+				this.formLoading = false;
+			}
 			if (!promiseList.length) this.formLoading = false;
 		},
 	},
@@ -174,6 +201,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.el-date-editor,
 .el-select {
 	width: 100%;
 }

src/views/quality/mixin/basicPageMixin.js

@@ -33,6 +33,18 @@ export default {
 	},
 	mounted() {},
 	methods: {
+		// 过滤后端传回的详情数据
+		filterData(data, keys) {
+			const obj = {};
+			keys.forEach((key) => {
+				if (/time/i.test(key)) {
+					obj[key] = new Date(data[key]);
+				} else {
+					obj[key] = data[key];
+				}
+			});
+			return obj;
+		},
 		// 处理搜索条件
 		handleSearchBarBtnClick() {},
 		// 处理表格按钮

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

@@ -1,134 +1,27 @@
 <template>
 	<div class="app-container">
 		<!-- 搜索工作栏 -->
-		<el-form
+		<SearchBar
-			:model="queryParams"
+			:formConfigs="searchBarFormConfig"
-			ref="queryForm"
+			ref="search-bar"
-			size="small"
+			@headBtnClick="handleSearchBarBtnClick" />
-			:inline="true"
-			v-show="showSearch"
-			label-width="68px">
-			<el-form-item label="检测时间" prop="checkTime">
-				<el-date-picker
-					v-model="queryParams.checkTime"
-					style="width: 240px"
-					value-format="yyyy-MM-dd HH:mm:ss"
-					type="daterange"
-					range-separator="-"
-					start-placeholder="开始日期"
-					end-placeholder="结束日期"
-					:default-time="['00:00:00', '23:59:59']" />
-			</el-form-item>
-			<el-form-item label="产线id" prop="productionLineId">
-				<el-input
-					v-model="queryParams.productionLineId"
-					placeholder="请输入产线id"
-					clearable
-					@keyup.enter.native="handleQuery" />
-			</el-form-item>
-			<el-form-item>
-				<el-button type="primary" icon="el-icon-search" @click="handleQuery">
-					搜索
-				</el-button>
-				<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
-			</el-form-item>
-		</el-form>
-
-		<!-- 操作工具栏 -->
-		<el-row :gutter="10" class="mb8">
-			<el-col :span="1.5">
-				<el-button
-					type="primary"
-					plain
-					icon="el-icon-plus"
-					size="mini"
-					@click="handleAdd"
-					v-hasPermi="['monitoring:quality-inspection-record:create']">
-					新增
-				</el-button>
-			</el-col>
-			<el-col :span="1.5">
-				<el-button
-					type="warning"
-					plain
-					icon="el-icon-download"
-					size="mini"
-					@click="handleExport"
-					:loading="exportLoading"
-					v-hasPermi="['monitoring:quality-inspection-record:export']">
-					导出
-				</el-button>
-			</el-col>
-			<right-toolbar
-				:showSearch.sync="showSearch"
-				@queryTable="getList"></right-toolbar>
-		</el-row>
 
 		<!-- 列表 -->
-		<el-table v-loading="loading" :data="list">
+		<base-table
-			<el-table-column label="ID" align="center" prop="id" />
+			:table-props="tableProps"
-			<el-table-column
+			:page="queryParams.pageNo"
-				label="检测内容id"
+			:limit="queryParams.pageSize"
-				align="center"
+			:table-data="list"
-				prop="inspectionDetId" />
+			@emit-fun="handleEmitFun">
-			<el-table-column
+			<method-btn
-				label="检测内容（设备推送消息时，可能无对应id，只填这个字段）"
+				v-if="tableBtn.length"
-				align="center"
+				slot="handleBtn"
-				prop="inspectionDetContent" />
-			<el-table-column label="工段id" align="center" prop="sectionId" />
-			<el-table-column
-				label="检测人员，可以多个"
-				align="center"
-				prop="checkPerson" />
-			<el-table-column
-				label="检测时间"
-				align="center"
-				prop="checkTime"
-				width="180">
-				<template v-slot="scope">
-					<span>{{ parseTime(scope.row.checkTime) }}</span>
-				</template>
-			</el-table-column>
-			<el-table-column
-				label="来源 1，手动（默认） 2，自动"
-				align="center"
-				prop="source" />
-			<el-table-column label="描述" align="center" prop="explainText" />
-			<el-table-column label="备注" align="center" prop="remark" />
-			<el-table-column
-				label="创建时间"
-				align="center"
-				prop="createTime"
-				width="180">
-				<template v-slot="scope">
-					<span>{{ parseTime(scope.row.createTime) }}</span>
-				</template>
-			</el-table-column>
-			<el-table-column label="产线id" align="center" prop="productionLineId" />
-			<el-table-column
 				label="操作"
-				align="center"
+				fixed="right"
-				class-name="small-padding fixed-width">
+				:method-list="tableBtn"
-				<template v-slot="scope">
+				@clickBtn="handleTableBtnClick" />
-					<el-button
+		</base-table>
-						size="mini"
+
-						type="text"
-						icon="el-icon-edit"
-						@click="handleUpdate(scope.row)"
-						v-hasPermi="['monitoring:quality-inspection-record:update']">
-						修改
-					</el-button>
-					<el-button
-						size="mini"
-						type="text"
-						icon="el-icon-delete"
-						@click="handleDelete(scope.row)"
-						v-hasPermi="['monitoring:quality-inspection-record:delete']">
-						删除
-					</el-button>
-				</template>
-			</el-table-column>
-		</el-table>
 		<!-- 分页组件 -->
 		<pagination
 			v-show="total > 0"
@@ -138,60 +31,15 @@
 			@pagination="getList" />
 
 		<!-- 对话框(添加 / 修改) -->
-		<el-dialog
+		<base-dialog
-			:title="title"
+			:dialogTitle="title"
-			:visible.sync="open"
+			:dialogVisible="open"
-			width="500px"
+			width="50%"
-			v-dialogDrag
+			@close="cancel"
-			append-to-body>
+			@cancel="cancel"
-			<el-form ref="form" :model="form" :rules="rules" label-width="80px">
+			@confirm="submitForm">
-				<el-form-item label="检测内容id" prop="inspectionDetId">
+			<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
-					<el-input
+		</base-dialog>
-						v-model="form.inspectionDetId"
-						placeholder="请输入检测内容id" />
-				</el-form-item>
-				<el-form-item
-					label="检测内容（设备推送消息时，可能无对应id，只填这个字段）">
-					<editor v-model="form.inspectionDetContent" :min-height="192" />
-				</el-form-item>
-				<el-form-item label="工段id" prop="sectionId">
-					<el-input v-model="form.sectionId" placeholder="请输入工段id" />
-				</el-form-item>
-				<el-form-item label="检测人员，可以多个" prop="checkPerson">
-					<el-input
-						v-model="form.checkPerson"
-						placeholder="请输入检测人员，可以多个" />
-				</el-form-item>
-				<el-form-item label="检测时间" prop="checkTime">
-					<el-date-picker
-						clearable
-						v-model="form.checkTime"
-						type="date"
-						value-format="timestamp"
-						placeholder="选择检测时间" />
-				</el-form-item>
-				<el-form-item label="来源 1，手动（默认） 2，自动" prop="source">
-					<el-input
-						v-model="form.source"
-						placeholder="请输入来源 1，手动（默认） 2，自动" />
-				</el-form-item>
-				<el-form-item label="描述" prop="explainText">
-					<el-input v-model="form.explainText" placeholder="请输入描述" />
-				</el-form-item>
-				<el-form-item label="备注" prop="remark">
-					<el-input v-model="form.remark" placeholder="请输入备注" />
-				</el-form-item>
-				<el-form-item label="产线id" prop="productionLineId">
-					<el-input
-						v-model="form.productionLineId"
-						placeholder="请输入产线id" />
-				</el-form-item>
-			</el-form>
-			<div slot="footer" class="dialog-footer">
-				<el-button type="primary" @click="submitForm">确 定</el-button>
-				<el-button @click="cancel">取 消</el-button>
-			</div>
-		</el-dialog>
 	</div>
 </template>
 
@@ -205,28 +53,209 @@ import {
 	exportQualityInspectionRecordExcel,
 } from '@/api/monitoring/qualityInspectionRecord';
 import Editor from '@/components/Editor';
+import moment from 'moment';
 
+import basicPageMixin from '../../mixin/basicPageMixin';
 export default {
 	name: 'QualityInspectionRecord',
 	components: {
 		Editor,
 	},
+	mixins: [basicPageMixin],
 	data() {
 		return {
-			// 遮罩层
+			rows: [
-			loading: true,
+				[
-			// 导出遮罩层
+					{
-			exportLoading: false,
+						select: true,
-			// 显示搜索条件
+						label: '检测内容ID',
-			showSearch: true,
+						url: '/base/quality-inspection-det/listAll',
-			// 总条数
+						prop: 'inspectionDetId',
-			total: 0,
+						labelKey: 'content',
-			// 质量检查信息记录表列表
+						rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
-			list: [],
+						bind: {
-			// 弹出层标题
+							filterable: true,
-			title: '',
+						},
-			// 是否显示弹出层
+					},
-			open: false,
+					{
+						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',
+					label: '产线',
+					placeholder: '请选择产线',
+					param: 'productionLineId',
+					selectOptions: [],
+				},
+				{
+					type: 'input',
+					label: '检测内容',
+					placeholder: '请输入检测内容',
+					param: 'inspectionDetContent',
+				},
+				{
+					type: 'datePicker',
+					label: '时间段',
+					dateType: 'daterange', // datetimerange
+					// format: 'yyyy-MM-dd HH:mm:ss',
+					format: 'yyyy-MM-dd',
+					valueFormat: 'yyyy-MM-dd HH:mm:ss',
+					rangeSeparator: '-',
+					startPlaceholder: '开始日期',
+					endPlaceholder: '结束日期',
+					defaultTime: ['00:00:00', '23:59:59'],
+					param: 'checkTime',
+					// width: 350,
+				},
+				{
+					type: 'button',
+					btnName: '查询',
+					name: 'search',
+					color: 'primary',
+				},
+				{
+					type: 'separate',
+				},
+				{
+					type: this.$auth.hasPermi(
+						'monitoring:quality-inspection-record:create'
+					)
+						? 'button'
+						: '',
+					btnName: '新增',
+					name: 'add',
+					plain: true,
+					color: 'success',
+				},
+			],
+			tableBtn: [
+				this.$auth.hasPermi('monitoring:quality-inspection-record:update')
+					? {
+							type: 'edit',
+							btnName: '修改',
+					  }
+					: undefined,
+				this.$auth.hasPermi('monitoring:quality-inspection-record:delete')
+					? {
+							type: 'delete',
+							btnName: '删除',
+					  }
+					: undefined,
+			].filter((v) => v),
+			tableProps: [
+				{
+					prop: 'createTime',
+					label: '添加时间',
+					fixed: true,
+					width: 180,
+					filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
+				},
+				{
+					width: 128,
+					prop: 'inspectionDetContent',
+					label: '检测内容',
+					align: 'center',
+				},
+				{
+					// width: 128,
+					prop: 'lineName',
+					label: '产线',
+					align: 'center',
+				},
+				{
+					// width: 128,
+					prop: 'checkPerson',
+					label: '检测人员',
+					align: 'center',
+				},
+				{
+					// width: 160,
+					prop: 'checkTime',
+					label: '检测时间',
+					align: 'center',
+					filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
+				},
+				{
+					width: 90,
+					prop: 'source',
+					label: '来源',
+					align: 'center',
+					filter: (val) => ['未知', '手动', '自动'][val],
+				},
+			],
+			// 搜索框需要的 keys, 与上面 queryParams 的除 pageNo, pageSize 之外的 key 一一对应
+			searchBarKeys: ['inspectionDetContent', 'checkTime', 'productionLineId'],
+			form: {
+				id: undefined,
+				inspectionDetId: undefined,
+				inspectionDetContent: undefined,
+				productionLineId: undefined,
+				sectionId: undefined,
+				checkPerson: undefined,
+				checkTime: undefined,
+				source: undefined,
+				explainText: undefined,
+				remark: undefined,
+			},
 			// 查询参数
 			queryParams: {
 				pageNo: 1,
@@ -235,16 +264,51 @@ export default {
 				checkTime: [],
 				productionLineId: null,
 			},
-			// 表单参数
-			form: {},
-			// 表单校验
-			rules: {},
 		};
 	},
 	created() {
 		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() {
+			this.$axios('/base/production-line/listAll').then((response) => {
+				this.searchBarFormConfig[0].selectOptions = response.data.map(
+					(item) => {
+						return {
+							name: item.name,
+							id: item.id,
+						};
+					}
+				);
+			});
+		},
 		/** 查询列表 */
 		getList() {
 			this.loading = true;
@@ -297,7 +361,8 @@ export default {
 			this.reset();
 			const id = row.id;
 			getQualityInspectionRecord(id).then((response) => {
-				this.form = response.data;
+				/** 因为后端返回的时间是时间戳格式，需转换 */
+				this.form = this.filterData(response.data, Object.keys(this.form));
 				this.open = true;
 				this.title = '修改质量检查信息记录表';
 			});