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>
@@ -124,6 +130,10 @@ export default {
 			const promiseList = [];
 			this.rows.forEach((cols) => {
 				cols.forEach(async (opt) => {
+					if (opt.value) {
+						// 默认值
+						this.form[opt.prop] = opt.value;
+					}
 					if (opt.options) {
 						this.optionListOf[opt.prop] = opt.options;
 					} else if (opt.url) {
@@ -174,6 +184,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,112 @@
 			@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
-					<el-input
+				v-if="open"
-						v-model="form.inspectionDetId"
+				ref="form"
-						placeholder="请输入检测内容id" />
+				:dataForm="form"
-				</el-form-item>
+				:rows="[
-				<el-form-item
+					[
-					label="检测内容（设备推送消息时，可能无对应id，只填这个字段）">
+						{
-					<editor v-model="form.inspectionDetContent" :min-height="192" />
+							select: true,
-				</el-form-item>
+							label: '检测内容ID',
-				<el-form-item label="工段id" prop="sectionId">
+							url: '/base/quality-inspection-det/listAll',
-					<el-input v-model="form.sectionId" placeholder="请输入工段id" />
+							prop: 'inspectionDetId',
-				</el-form-item>
+							labelKey: 'content',
-				<el-form-item label="检测人员，可以多个" prop="checkPerson">
+							rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
-					<el-input
+							bind: {
-						v-model="form.checkPerson"
+								filterable: true,
-						placeholder="请输入检测人员，可以多个" />
+							},
-				</el-form-item>
+						},
-				<el-form-item label="检测时间" prop="checkTime">
+						{
-					<el-date-picker
+							select: true,
-						clearable
+							label: '来源',
-						v-model="form.checkTime"
+							prop: 'source',
-						type="date"
+							value: 1, // 默认手动
-						value-format="timestamp"
+							options: [
-						placeholder="选择检测时间" />
+								{ label: '手动', value: 1 },
-				</el-form-item>
+								{ label: '自动', value: 2 },
-				<el-form-item label="来源 1，手动（默认） 2，自动" prop="source">
+							],
-					<el-input
+							bind: {
-						v-model="form.source"
+								filterable: true,
-						placeholder="请输入来源 1，手动（默认） 2，自动" />
+							},
-				</el-form-item>
+						},
-				<el-form-item label="描述" prop="explainText">
+						// {
-					<el-input v-model="form.explainText" placeholder="请输入描述" />
+						// 	input: true,
-				</el-form-item>
+						// 	label: '',
-				<el-form-item label="备注" prop="remark">
+						// 	prop: 'buttonId',
-					<el-input v-model="form.remark" placeholder="请输入备注" />
+						// 	rules: [
-				</el-form-item>
+						// 		{
-				<el-form-item label="产线id" prop="productionLineId">
+						// 			type: 'number',
-					<el-input
+						// 			message: '请输入数字',
-						v-model="form.productionLineId"
+						// 			trigger: 'blur',
-						placeholder="请输入产线id" />
+						// 			transform: (val) => Number(val),
-				</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>
+							select: true,
+							label: '产线',
+							url: '/base/production-line/listAll',
+							prop: 'productionLineId',
+							rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+						},
+						{
+							select: true,
+							label: '工段',
+							url: '/base/workshop-section/listAll',
+							prop: 'sectionId',
+							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>
 
@@ -205,28 +150,135 @@ 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 {
-			// 遮罩层
+			searchBarFormConfig: [
-			loading: true,
+				{
-			// 导出遮罩层
+					type: 'select',
-			exportLoading: false,
+					label: '产线',
-			// 显示搜索条件
+					placeholder: '请选择产线',
-			showSearch: true,
+					param: 'productionLineId',
-			// 总条数
+					selectOptions: [],
-			total: 0,
+				},
-			// 质量检查信息记录表列表
+				{
-			list: [],
+					type: 'input',
-			// 弹出层标题
+					label: '检测内容',
-			title: '',
+					placeholder: '请输入检测内容',
-			// 是否显示弹出层
+					param: 'inspectionDetContent',
-			open: false,
+				},
+				{
+					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 +287,26 @@ export default {
 				checkTime: [],
 				productionLineId: null,
 			},
-			// 表单参数
-			form: {},
-			// 表单校验
-			rules: {},
 		};
 	},
 	created() {
 		this.getList();
+		this.getProductLineList();
 	},
 	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 +359,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 = '修改质量检查信息记录表';
 			});