src/api/monitoring/qualityInspectionRecord.js

@@ -0,0 +1,54 @@
+import request from '@/utils/request'
+
+// 创建质量检查信息记录表
+export function createQualityInspectionRecord(data) {
+  return request({
+    url: '/monitoring/quality-inspection-record/create',
+    method: 'post',
+    data: data
+  })
+}
+
+// 更新质量检查信息记录表
+export function updateQualityInspectionRecord(data) {
+  return request({
+    url: '/monitoring/quality-inspection-record/update',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除质量检查信息记录表
+export function deleteQualityInspectionRecord(id) {
+  return request({
+    url: '/monitoring/quality-inspection-record/delete?id=' + id,
+    method: 'delete'
+  })
+}
+
+// 获得质量检查信息记录表
+export function getQualityInspectionRecord(id) {
+  return request({
+    url: '/monitoring/quality-inspection-record/get?id=' + id,
+    method: 'get'
+  })
+}
+
+// 获得质量检查信息记录表分页
+export function getQualityInspectionRecordPage(query) {
+  return request({
+    url: '/monitoring/quality-inspection-record/page',
+    method: 'get',
+    params: query
+  })
+}
+
+// 导出质量检查信息记录表 Excel
+export function exportQualityInspectionRecordExcel(query) {
+  return request({
+    url: '/monitoring/quality-inspection-record/export-excel',
+    method: 'get',
+    params: query,
+    responseType: 'blob'
+  })
+}

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

@@ -38,80 +38,7 @@
 			@close="cancel"
 			@cancel="cancel"
 			@confirm="submitForm">
-			<DialogForm
-				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' }],
-						},
-					],
-				]" />
+			<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
 		</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

@@ -0,0 +1,427 @@
+<template>
+	<div class="app-container">
+		<!-- 搜索工作栏 -->
+		<SearchBar
+			:formConfigs="searchBarFormConfig"
+			ref="search-bar"
+			@headBtnClick="handleSearchBarBtnClick" />
+
+		<!-- 列表 -->
+		<base-table
+			:table-props="tableProps"
+			:page="queryParams.pageNo"
+			:limit="queryParams.pageSize"
+			:table-data="list"
+			@emit-fun="handleEmitFun">
+			<method-btn
+				v-if="tableBtn.length"
+				slot="handleBtn"
+				label="操作"
+				fixed="right"
+				:method-list="tableBtn"
+				@clickBtn="handleTableBtnClick" />
+		</base-table>
+
+		<!-- 分页组件 -->
+		<pagination
+			v-show="total > 0"
+			:total="total"
+			:page.sync="queryParams.pageNo"
+			:limit.sync="queryParams.pageSize"
+			@pagination="getList" />
+
+		<!-- 对话框(添加 / 修改) -->
+		<base-dialog
+			:dialogTitle="title"
+			:dialogVisible="open"
+			width="50%"
+			@close="cancel"
+			@cancel="cancel"
+			@confirm="submitForm">
+			<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
+		</base-dialog>
+	</div>
+</template>
+
+<script>
+import {
+	createQualityInspectionRecord,
+	updateQualityInspectionRecord,
+	deleteQualityInspectionRecord,
+	getQualityInspectionRecord,
+	getQualityInspectionRecordPage,
+	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: [
+				[
+					{
+						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',
+					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,
+				pageSize: 10,
+				inspectionDetContent: null,
+				checkTime: [],
+				productionLineId: null,
+			},
+		};
+	},
+	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;
+			// 执行查询
+			getQualityInspectionRecordPage(this.queryParams).then((response) => {
+				this.list = response.data.list;
+				this.total = response.data.total;
+				this.loading = false;
+			});
+		},
+		/** 取消按钮 */
+		cancel() {
+			this.open = false;
+			this.reset();
+		},
+		/** 表单重置 */
+		reset() {
+			this.form = {
+				id: undefined,
+				inspectionDetId: undefined,
+				inspectionDetContent: undefined,
+				sectionId: undefined,
+				checkPerson: undefined,
+				checkTime: undefined,
+				source: undefined,
+				explainText: undefined,
+				remark: undefined,
+				productionLineId: undefined,
+			};
+			this.resetForm('form');
+		},
+		/** 搜索按钮操作 */
+		handleQuery() {
+			this.queryParams.pageNo = 1;
+			this.getList();
+		},
+		/** 重置按钮操作 */
+		resetQuery() {
+			this.resetForm('queryForm');
+			this.handleQuery();
+		},
+		/** 新增按钮操作 */
+		handleAdd() {
+			this.reset();
+			this.open = true;
+			this.title = '添加质量检查信息记录表';
+		},
+		/** 修改按钮操作 */
+		handleUpdate(row) {
+			this.reset();
+			const id = row.id;
+			getQualityInspectionRecord(id).then((response) => {
+				/** 因为后端返回的时间是时间戳格式，需转换 */
+				this.form = this.filterData(response.data, Object.keys(this.form));
+				this.open = true;
+				this.title = '修改质量检查信息记录表';
+			});
+		},
+		/** 提交按钮 */
+		submitForm() {
+			this.$refs['form'].validate((valid) => {
+				if (!valid) {
+					return;
+				}
+				// 修改的提交
+				if (this.form.id != null) {
+					updateQualityInspectionRecord(this.form).then((response) => {
+						this.$modal.msgSuccess('修改成功');
+						this.open = false;
+						this.getList();
+					});
+					return;
+				}
+				// 添加的提交
+				createQualityInspectionRecord(this.form).then((response) => {
+					this.$modal.msgSuccess('新增成功');
+					this.open = false;
+					this.getList();
+				});
+			});
+		},
+		/** 删除按钮操作 */
+		handleDelete(row) {
+			const id = row.id;
+			this.$modal
+				.confirm('是否确认删除质量检查信息记录表编号为"' + id + '"的数据项?')
+				.then(function () {
+					return deleteQualityInspectionRecord(id);
+				})
+				.then(() => {
+					this.getList();
+					this.$modal.msgSuccess('删除成功');
+				})
+				.catch(() => {});
+		},
+		/** 导出按钮操作 */
+		handleExport() {
+			// 处理查询参数
+			let params = { ...this.queryParams };
+			params.pageNo = undefined;
+			params.pageSize = undefined;
+			this.$modal
+				.confirm('是否确认导出所有质量检查信息记录表数据项?')
+				.then(() => {
+					this.exportLoading = true;
+					return exportQualityInspectionRecordExcel(params);
+				})
+				.then((response) => {
+					this.$download.excel(response, '质量检查信息记录表.xls');
+					this.exportLoading = false;
+				})
+				.catch(() => {});
+		},
+	},
+};
+</script>