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

@@ -38,30 +38,11 @@
 			@close="cancel"
 			@cancel="cancel"
 			@confirm="submitForm">
-			<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
+			<DialogForm
-		</base-dialog>
+				v-if="open"
-	</div>
+				ref="form"
-</template>
+				:dataForm="form"
-
+				: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,
@@ -82,6 +63,13 @@ export default {
 							prop: 'sectionId',
 							rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
 						},
+						// {
+						// 	select: true,
+						//   url: '', //
+						// 	label: '检测内容',
+						// 	prop: 'inspectionDetContent',
+						// 	rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+						// },
 					],
 					[
 						{
@@ -123,7 +111,29 @@ export default {
 							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

@@ -39,12 +39,6 @@
 							: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>
@@ -108,18 +102,6 @@ export default {
 			},
 		},
 	},
-	watch: {
-		rows: {
-			handler() {
-				console.log('watch triggered!');
-				this.$nextTick(() => {
-					this.handleOptions('watch');
-				});
-			},
-			deep: true,
-			immediate: false,
-		},
-	},
 	mounted() {
 		// 处理 options
 		this.handleOptions();
@@ -137,18 +119,13 @@ export default {
 			const response = await this.$axios(url);
 			return response.data;
 		},
-		async handleOptions(trigger = 'monuted') {
+		handleOptions() {
 			// console.log("[dialogForm:handleOptions]")
 			const promiseList = [];
 			this.rows.forEach((cols) => {
-				cols.forEach((opt) => {
+				cols.forEach(async (opt) => {
-					if (opt.value && !this.form[opt.prop]) {
-						// 默认值
-						this.form[opt.prop] = opt.value;
-					}
-
 					if (opt.options) {
-						this.$set(this.optionListOf, opt.prop, opt.options);
+						this.optionListOf[opt.prop] = opt.options;
 					} else if (opt.url) {
 						// 如果是下拉框，或者新增模式下的输入框，才去请求
 						if (opt.select || (opt.input && !this.form?.id)) {
@@ -177,16 +154,9 @@ 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)
@@ -194,6 +164,9 @@ export default {
 							console.log('[dialogForm:handleOptions:error]', error);
 							this.formLoading = false;
 						}
+					}
+				});
+			});
 			if (!promiseList.length) this.formLoading = false;
 		},
 	},
@@ -201,7 +174,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.el-date-editor,
 .el-select {
 	width: 100%;
 }

src/views/quality/mixin/basicPageMixin.js

@@ -33,18 +33,6 @@ 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,27 +1,134 @@
 <template>
 	<div class="app-container">
 		<!-- 搜索工作栏 -->
-		<SearchBar
+		<el-form
-			:formConfigs="searchBarFormConfig"
+			:model="queryParams"
-			ref="search-bar"
+			ref="queryForm"
-			@headBtnClick="handleSearchBarBtnClick" />
+			size="small"
+			: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>
 
 		<!-- 列表 -->
-		<base-table
+		<el-table v-loading="loading" :data="list">
-			:table-props="tableProps"
+			<el-table-column label="ID" align="center" prop="id" />
-			:page="queryParams.pageNo"
+			<el-table-column
-			:limit="queryParams.pageSize"
+				label="检测内容id"
-			:table-data="list"
+				align="center"
-			@emit-fun="handleEmitFun">
+				prop="inspectionDetId" />
-			<method-btn
+			<el-table-column
-				v-if="tableBtn.length"
+				label="检测内容（设备推送消息时，可能无对应id，只填这个字段）"
-				slot="handleBtn"
+				align="center"
+				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="操作"
-				fixed="right"
+				align="center"
-				:method-list="tableBtn"
+				class-name="small-padding fixed-width">
-				@clickBtn="handleTableBtnClick" />
+				<template v-slot="scope">
-		</base-table>
+					<el-button
-
+						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"
@@ -31,15 +138,60 @@
 			@pagination="getList" />
 
 		<!-- 对话框(添加 / 修改) -->
-		<base-dialog
+		<el-dialog
-			:dialogTitle="title"
+			:title="title"
-			:dialogVisible="open"
+			:visible.sync="open"
-			width="50%"
+			width="500px"
-			@close="cancel"
+			v-dialogDrag
-			@cancel="cancel"
+			append-to-body>
-			@confirm="submitForm">
+			<el-form ref="form" :model="form" :rules="rules" label-width="80px">
-			<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
+				<el-form-item label="检测内容id" prop="inspectionDetId">
-		</base-dialog>
+					<el-input
+						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>
 
@@ -53,209 +205,28 @@ 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,
-					{
+			// 导出遮罩层
-						select: true,
+			exportLoading: false,
-						label: '检测内容ID',
+			// 显示搜索条件
-						url: '/base/quality-inspection-det/listAll',
+			showSearch: true,
-						prop: 'inspectionDetId',
+			// 总条数
-						labelKey: 'content',
+			total: 0,
-						rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+			// 质量检查信息记录表列表
-						bind: {
+			list: [],
-							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,
@@ -264,51 +235,16 @@ 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;
@@ -361,8 +297,7 @@ 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 = '修改质量检查信息记录表';
 			});