update quality type

src/views/quality/base/mixin.js

@@ -1,5 +0,0 @@
-export default {
-    data() {
-        
-    }
-}

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

@@ -1,109 +1,26 @@
 <template>
 	<div class="app-container">
 		<!-- 搜索工作栏 -->
-		<el-form
-			:model="queryParams"
-			ref="queryForm"
-			size="small"
-			:inline="true"
-			v-show="showSearch"
-			label-width="68px">
-			<el-form-item label="检测内容" prop="content">
-				<el-input
-					v-model="queryParams.content"
-					placeholder="请输入检测内容"
-					clearable
-					@keyup.enter.native="handleQuery" />
-			</el-form-item>
-			<el-form-item label="创建时间" prop="createTime">
-				<el-date-picker
-					v-model="queryParams.createTime"
-					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>
-				<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="['base:quality-inspection-det: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="['base:quality-inspection-det:export']">
-					导出
-				</el-button>
-			</el-col>
-			<right-toolbar
-				:showSearch.sync="showSearch"
-				@queryTable="getList"></right-toolbar>
-		</el-row>
+		<SearchBar
+			:formConfigs="searchBarFormConfig"
+			ref="search-bar"
+			@headBtnClick="handleSearchBarBtnClick" />
 
 		<!-- 列表 -->
-		<el-table v-loading="loading" :data="list">
-			<el-table-column label="ID" align="center" prop="id" />
-			<el-table-column label="检测类型id" align="center" prop="typeId" />
-			<el-table-column label="检测内容" align="center" prop="content" />
-			<el-table-column label="检测编码" align="center" prop="code" />
-			<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
+		<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="操作"
-				align="center"
-				class-name="small-padding fixed-width">
-				<template v-slot="scope">
-					<el-button
-						size="mini"
-						type="text"
-						icon="el-icon-edit"
-						@click="handleUpdate(scope.row)"
-						v-hasPermi="['base:quality-inspection-det:update']">
-						修改
-					</el-button>
-					<el-button
-						size="mini"
-						type="text"
-						icon="el-icon-delete"
-						@click="handleDelete(scope.row)"
-						v-hasPermi="['base:quality-inspection-det:delete']">
-						删除
-					</el-button>
-				</template>
-			</el-table-column>
-		</el-table>
+				:method-list="tableBtn"
+				@clickBtn="handleTableBtnClick" />
+		</base-table>
+
 		<!-- 分页组件 -->
 		<pagination
 			v-show="total > 0"
@@ -113,16 +30,19 @@
 			@pagination="getList" />
 
 		<!-- 对话框(添加 / 修改) -->
-		<el-dialog
-			:title="title"
-			:visible.sync="open"
-			width="500px"
-			v-dialogDrag
-			append-to-body>
-			<el-form ref="form" :model="form" :rules="rules" label-width="80px">
+		<base-dialog
+			:dialogTitle="title"
+			:dialogVisible="open"
+			@cancel="cancel"
+			@confirm="submitForm">
+			<el-form ref="form" :model="form" :rules="rules" label-width="100px">
 				<el-form-item label="检测类型id" prop="typeId">
-					<el-select v-model="form.typeId" placeholder="请选择检测类型id">
-						<el-option label="请选择字典生成" value="" />
+					<el-select v-model="form.typeId" placeholder="请选择检测类型">
+						<el-option
+							v-for="opt in typeList"
+							:key="opt.value"
+							:label="opt.label"
+							:value="opt.value" />
 					</el-select>
 				</el-form-item>
 				<el-form-item label="检测内容" prop="content">
@@ -135,11 +55,7 @@
 					<el-input v-model="form.remark" placeholder="请输入备注" />
 				</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>
+		</base-dialog>
 	</div>
 </template>
 
@@ -153,11 +69,94 @@ import {
 	exportQualityInspectionDetExcel,
 } from '@/api/base/qualityInspectionDet';
 
+import moment from 'moment';
+
 export default {
 	name: 'QualityInspectionDet',
 	components: {},
 	data() {
 		return {
+			typeList: [], // 检测类型列表
+			searchBarFormConfig: [
+				{
+					type: 'input',
+					label: '检测内容',
+					placeholder: '请输入检测内容',
+					param: 'content',
+				},
+				{
+					type: 'datePicker',
+					label: '创建时间',
+					dateType: 'daterange', // datetimerange
+					format: 'yyyy-MM-dd HH:mm:ss',
+					valueFormat: 'yyyy-MM-ddTHH:mm:ss',
+					rangeSeparator: '-',
+					startPlaceholder: '开始日期',
+					endPlaceholder: '结束日期',
+					defaultTime: ['00:00:00', '23:59:59'],
+					param: 'createTime',
+					width: 350,
+				},
+				{
+					type: 'button',
+					btnName: '查询',
+					name: 'search',
+					color: 'primary',
+				},
+				// {
+				// 	type: 'button',
+				// 	btnName: '重置',
+				// 	name: 'reset',
+				// },
+				{
+					type: 'separate',
+				},
+				{
+					type: this.$auth.hasPermi('base:quality-inspection-det:create')
+						? 'button'
+						: '',
+					btnName: '新增',
+					name: 'add',
+					plain: true,
+					color: 'success',
+				},
+				// {
+				// 	type: this.$auth.hasPermi('base:quality-inspection-type:export')
+				// 		? 'button'
+				// 		: '',
+				// 	btnName: '导出',
+				// 	name: 'export',
+				// 	color: 'warning',
+				// },
+			],
+			tableBtn: [
+				this.$auth.hasPermi('base:quality-inspection-det:update')
+					? {
+							type: 'edit',
+							btnName: '修改',
+					  }
+					: undefined,
+				this.$auth.hasPermi('base:quality-inspection-det:delete')
+					? {
+							type: 'delete',
+							btnName: '删除',
+					  }
+					: undefined,
+			].filter((v) => v),
+			tableData: [],
+			tableProps: [
+				{
+					prop: 'createTime',
+					label: '添加时间',
+					fixed: true,
+					width: 180,
+					filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
+				},
+				{ prop: 'typeId', label: '检测类型ID', align: 'center' },
+				{ prop: 'content', label: '检测类型内容', align: 'center' },
+				{ prop: 'code', label: '检测编码', align: 'center' },
+				{ prop: 'remark', label: '备注', align: 'center' },
+			],
 			// 遮罩层
 			loading: true,
 			// 导出遮罩层
@@ -194,8 +193,63 @@ export default {
 	},
 	created() {
 		this.getList();
+		this.getTypeList();
 	},
 	methods: {
+		/** base table related */
+		handleTableBtnClick({ data, type }) {
+			switch (type) {
+				case 'edit':
+					this.handleUpdate(data);
+					break;
+				case 'delete':
+					this.handleDelete(data);
+					break;
+			}
+		},
+		/** search bar related */
+		handleSearchBarBtnClick(btn) {
+			const keys = ['name', 'createTime']; // timeVal
+			switch (btn.btnName) {
+				case 'search':
+					keys.forEach((key) => {
+						if (key == 'timeVal') {
+							this.queryParams['startTime'] = btn.timeVal[0];
+							this.queryParams['endTime'] = btn.timeVal[1];
+							return;
+						}
+						this.queryParams[key] = btn[key] || null;
+					});
+					this.handleQuery();
+					break;
+				case 'add':
+					this.handleAdd();
+					break;
+				case 'export':
+					this.handleExport();
+					break;
+				case 'reset':
+					this.$refs['search-bar'].resetForm();
+					this.resetQuery();
+					break;
+			}
+		},
+		handleEmitFun(val) {
+			console.log('emit unf', val);
+		},
+		/** 获取检测类型id */
+		getTypeList() {
+			this.$axios('/base/quality-inspection-type/listAll').then(
+				(response) => {
+					this.typeList = response.data.map((item) => {
+						return {
+							label: item.name,
+							value: item.id,
+						};
+					});
+				}
+			);
+		},
 		/** 查询列表 */
 		getList() {
 			this.loading = true;
@@ -236,7 +290,7 @@ export default {
 		handleAdd() {
 			this.reset();
 			this.open = true;
-			this.title = '添加质量检测信息基础';
+			this.title = '添加质量检测信息';
 		},
 		/** 修改按钮操作 */
 		handleUpdate(row) {
@@ -245,7 +299,7 @@ export default {
 			getQualityInspectionDet(id).then((response) => {
 				this.form = response.data;
 				this.open = true;
-				this.title = '修改质量检测信息基础';
+				this.title = '修改质量检测信息';
 			});
 		},
 		/** 提交按钮 */
@@ -306,3 +360,9 @@ export default {
 	},
 };
 </script>
+
+<style>
+.el-select {
+	width: 100% !important;
+}
+</style>

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

@@ -33,26 +33,35 @@
 		<base-dialog
 			:dialogTitle="title"
 			:dialogVisible="open"
+			@close="cancel"
 			@cancel="cancel"
 			@confirm="submitForm">
-			<el-form ref="form" :model="form" :rules="rules" label-width="128px">
-				<el-form-item label="检测类型名称" prop="name">
-					<el-input v-model="form.name" placeholder="请输入检测类型名称" />
-				</el-form-item>
-				<el-form-item label="检测类型编码" prop="code">
-					<el-input v-model="form.code" placeholder="请输入检测类型编码" />
-				</el-form-item>
-				<el-form-item label="备注" prop="remark">
-					<el-input v-model="form.remark" placeholder="请输入备注" />
-				</el-form-item>
-			</el-form>
+			<DialogForm
+				v-if="open"
+				ref="form"
+				:dataForm="form"
+				:rows="[
+					[
+						{
+							input: true,
+							label: '检测类型名称',
+							prop: 'name',
+							rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+							// bind: {
+							// 	disabled: true, // some condition, like detail mode...
+							// }
+						},
+					],
+					[{ input: true, label: '检测类型编码', prop: 'code' }],
+					[{ input: true, label: '备注', prop: 'remark' }],
+				]" />
 		</base-dialog>
-		
 	</div>
 </template>
 
 <script>
 import moment from 'moment';
+import DialogForm from '../../components/dialogForm.vue';
 
 import {
 	createQualityInspectionType,
@@ -65,19 +74,23 @@ import {
 
 export default {
 	name: 'QualityInspectionType',
-	components: {},
+	components: { DialogForm },
 	data() {
 		return {
 			tableBtn: [
-				{
-					type: 'edit',
-					btnName: '修改',
-				},
-				{
-					type: 'delete',
-					btnName: '删除',
-				},
-			],
+				this.$auth.hasPermi('base:quality-inspection-type:update')
+					? {
+							type: 'edit',
+							btnName: '修改',
+					  }
+					: undefined,
+				this.$auth.hasPermi('base:quality-inspection-type:delete')
+					? {
+							type: 'delete',
+							btnName: '删除',
+					  }
+					: undefined,
+			].filter((v) => v),
 			tableData: [],
 			tableProps: [
 				{
@@ -123,6 +136,62 @@ export default {
 				// 	},
 				// },
 			],
+			//
+			searchBarFormConfig: [
+				{
+					type: 'input',
+					label: '检测类型',
+					placeholder: '请输入检测类型',
+					param: 'name',
+				},
+				{
+					type: 'button',
+					btnName: '查询',
+					name: 'search',
+					color: 'primary',
+				},
+				// {
+				// 	type: 'button',
+				// 	btnName: '重置',
+				// 	name: 'reset',
+				// },
+				{
+					type: 'separate',
+				},
+				{
+					type: this.$auth.hasPermi('base:quality-inspection-type:create')
+						? 'button'
+						: '',
+					btnName: '新增',
+					name: 'add',
+					plain: true,
+					color: 'success',
+				},
+				// {
+				// 	type: this.$auth.hasPermi('base:quality-inspection-type:export')
+				// 		? 'button'
+				// 		: '',
+				// 	btnName: '导出',
+				// 	name: 'export',
+				// 	color: 'warning',
+				// },
+			],
+			// 表单配置
+			// formRows: [
+			// 	[
+			// 		{
+			// 			input: true,
+			// 			label: '检测类型名称',
+			// 			prop: 'name',
+			// 			rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+			// 			// bind: {
+			// 			// 	disabled: true, // some condition, like detail mode...
+			// 			// }
+			// 		},
+			// 	],
+			// 	[{ input: true, label: '检测类型编码', prop: 'code' }],
+			// 	[{ input: true, label: '备注', prop: 'remark' }],
+			// ],
 			// 遮罩层
 			loading: true,
 			// 导出遮罩层
@@ -145,56 +214,16 @@ export default {
 			},
 			// 表单参数
 			form: {},
-			// 表单校验
-			rules: {
-				name: [
-					{ required: true, message: '检测类型名称不能为空', trigger: 'blur' },
-				],
-			},
-			//
-			//
-			//
-			searchBarFormConfig: [
-				{
-					type: 'input',
-					label: '检测类型',
-					placeholder: '请输入检测类型',
-					param: 'name',
-				},
-				{
-					type: 'button',
-					btnName: '查询',
-					name: 'search',
-					color: 'primary',
-				},
-				// {
-				// 	type: 'button',
-				// 	btnName: '重置',
-				// 	name: 'reset',
-				// },
-				{
-					type: 'separate'
-				},
-				{
-					type: this.$auth.hasPermi('base:quality-inspection-type:create')
-						? 'button'
-						: '',
-					btnName: '新增',
-					name: 'add',
-					plain: true,
-					color: 'success',
-				},
-				// {
-				// 	type: this.$auth.hasPermi('base:quality-inspection-type:export')
-				// 		? 'button'
-				// 		: '',
-				// 	btnName: '导出',
-				// 	name: 'export',
-				// 	color: 'warning',
-				// },
-			],
 		};
 	},
+	// watch: {
+	// 	form: {
+	// 		handler: (val) => {
+	// 			console.log('form changed', val);
+	// 		},
+	// 		deep: true
+	// 	},
+	// },
 	created() {
 		this.getList();
 	},
@@ -289,10 +318,13 @@ export default {
 		},
 		/** 提交按钮 */
 		submitForm() {
+			// console.log('this.$refs.form', this.$refs.form);
+			// return;
 			this.$refs['form'].validate((valid) => {
 				if (!valid) {
 					return;
 				}
+				console.log('final form', JSON.stringify(this.form));
 				// 修改的提交
 				if (this.form.id != null) {
 					updateQualityInspectionType(this.form).then((response) => {

src/views/quality/components/dialogForm.vue

@@ -0,0 +1,150 @@
+<!-- 
+    filename: dialogForm.vue
+    author: liubin
+    date: 2023-08-02 10:32:36
+    description: 弹窗的表单组件
+-->
+
+<template>
+	<el-form
+		ref="form"
+		:model="form"
+		:label-width="`${labelWidth}px`"
+		v-loading="formLoading">
+		<el-row :gutter="20" v-for="(row, rindex) in rows" :key="rindex">
+			<el-col v-for="col in row" :key="col.label" :span="24 / row.length">
+				<el-form-item :label="col.label" :prop="col.prop" :rules="col.rules">
+					<el-input
+						v-if="col.input"
+						v-model="form[col.prop]"
+						@change="$emit('update', form)"
+						v-bind="col.bind" />
+					<el-select
+						v-if="col.select"
+						v-model="form[col.prop]"
+						@change="$emit('update', form)"
+						v-bind="col.bind">
+						<el-option
+							v-for="opt in optionListOf[col.prop]"
+							:key="opt.value"
+							:label="opt.label"
+							:value="opt.value" />
+					</el-select>
+				</el-form-item>
+			</el-col>
+		</el-row>
+	</el-form>
+</template>
+
+<script>
+/**
+ * 找到最长的label
+ * @param {*} options
+ */
+function findMaxLabelWidth(rows) {
+	let max = 0;
+	rows.forEach((row) => {
+		row.forEach((opt) => {
+			if (opt.label.length > max) {
+				max = opt.label.length;
+			}
+		});
+	});
+	return max;
+}
+
+export default {
+	name: 'DialogForm',
+	model: {
+		prop: 'dataForm',
+		event: 'update',
+	},
+	emits: ['update'],
+	components: {},
+	props: {
+		rows: {
+			type: Array,
+			default: () => [],
+		},
+		dataForm: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
+	data() {
+		return {
+			formLoading: false,
+			optionListOf: {},
+		};
+	},
+	computed: {
+		labelWidth() {
+			let max = findMaxLabelWidth(this.rows);
+			// 每个汉字占20px
+			return max * 20;
+			// return max * 20 + 'px';
+		},
+		form: {
+			get() {
+				return this.dataForm;
+			},
+			set(val) {
+				console.log('set form', val);
+				// this.$emit('update', val);
+			},
+		},
+	},
+	mounted() {
+		// 处理 options
+		this.handleOptions();
+	},
+	methods: {
+        /** 模拟透传 ref  */
+        validate(cb) {
+            return this.$refs.form.validate(cb);
+        },
+        resetFields(args) {
+            return this.$refs.form.resetFields(args);
+        },
+
+		handleOptions() {
+			const promiseList = [];
+			this.rows.forEach((cols) => {
+				cols.forEach(async (opt) => {
+					if (opt.options) {
+						this.optionListOf[opt.prop] = opt.options;
+					} else if (opt.url) {
+						promiseList.push(async () => {
+							const response = await this.$axios(opt.url, {
+								method: opt.method ?? 'get',
+							});
+							console.log('[dialogForm:handleOptions:response]', response);
+							const list =
+								'list' in response.data ? response.data.list : response.data;
+							this.$set(
+								this.optionListOf,
+								opt.prop,
+								list.map((item) => ({
+									label: item[opt.labelKey ?? 'name'],
+									value: item[opt.valueKey ?? 'id'],
+								}))
+							);
+						});
+						try {
+							this.formLoading = true;
+							await Promise.all(promiseList);
+							this.formLoading = false;
+						} catch (error) {
+							console.log('[dialogForm:handleOptions:error]', error);
+							this.formLoading = false;
+						}
+					}
+				});
+			});
+			// this.formLoading = false;
+		},
+	},
+};
+</script>
+
+<style scoped lang="scss"></style>

src/views/quality/mixin/basicPageMixin.js

@@ -0,0 +1,87 @@
+export default {
+	data() {
+		return {
+			// 遮罩层
+			loading: true,
+			// 导出遮罩层
+			exportLoading: false,
+			// 显示搜索条件
+			showSearch: true,
+			// 总条数
+			total: 0,
+			// 质量检测信息基础列表
+			list: [],
+			// 弹出层标题
+			title: '',
+			// 是否显示弹出层
+			open: false,
+			// 查询参数
+			queryParams: {
+				pageNo: 1,
+				pageSize: 10,
+			},
+			
+			// 列表数据
+			tableData: [],
+			tableProps: [], // 占位
+			tableBtn: [], // 占位
+			searchBarFormConfig: [], // 占位
+            // 弹窗表单配置
+            dialogFormConfig: [], // 占位
+		};
+	},
+	mounted() {
+		if (this.prepareSelectOptions) {
+			// 准备列表的options
+			// TODO: 也许需要挪到 dialogForm.vue 里
+			this.prepareSelectOptions();
+		}
+	},
+	methods: {
+		// 处理搜索条件
+		handleSearchBarBtnClick() {},
+        // 处理表格按钮
+		handleTableBtnClick({ data, type }) {
+			switch (type) {
+				case 'edit':
+					this.handleUpdate(data);
+					break;
+				case 'delete':
+					this.handleDelete(data);
+					break;
+			}
+		},
+		// 处理搜索栏按钮
+		handleSearchBarBtnClick(btn) {
+			const keys = ['name', 'createTime']; // timeVal
+			switch (btn.btnName) {
+				case 'search':
+					keys.forEach((key) => {
+						if (key == 'timeVal') {
+							this.queryParams['startTime'] = btn.timeVal[0];
+							this.queryParams['endTime'] = btn.timeVal[1];
+							return;
+						}
+						this.queryParams[key] = btn[key] || null;
+					});
+					this.handleQuery();
+					break;
+				case 'add':
+					this.handleAdd();
+					break;
+				case 'export':
+					this.handleExport();
+					break;
+				case 'reset':
+					this.$refs['search-bar'].resetForm();
+					this.resetQuery();
+					break;
+			}
+		},
+		handleEmitFun(val) {
+			console.log('emit unf', val);
+		},
+		// 获取列表数据
+		getList() {},
+	},
+};