From b6e47673460528a10647f939704f2764f7ae4733 Mon Sep 17 00:00:00 2001
From: lb <liubin_9396@163.com>
Date: Wed, 2 Aug 2023 11:27:33 +0800
Subject: [PATCH] add mixin & dialog

---
 src/views/quality/base/mixin.js               |   5 -
 .../base/qualityInspectionDet/index.vue       |  58 ++++++--
 src/views/quality/components/dialogForm.vue   | 137 ++++++++++++++++++
 src/views/quality/mixin/basicPageMixin.js     |  87 +++++++++++
 4 files changed, 268 insertions(+), 19 deletions(-)
 delete mode 100644 src/views/quality/base/mixin.js
 create mode 100644 src/views/quality/components/dialogForm.vue
 create mode 100644 src/views/quality/mixin/basicPageMixin.js

diff --git a/src/views/quality/base/mixin.js b/src/views/quality/base/mixin.js
deleted file mode 100644
index 91b329b7..00000000
--- a/src/views/quality/base/mixin.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export default {
-    data() {
-        
-    }
-}
\ No newline at end of file
diff --git a/src/views/quality/base/qualityInspectionDet/index.vue b/src/views/quality/base/qualityInspectionDet/index.vue
index 6ec4534b..9bca5dc5 100644
--- a/src/views/quality/base/qualityInspectionDet/index.vue
+++ b/src/views/quality/base/qualityInspectionDet/index.vue
@@ -37,8 +37,12 @@
 			@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">
@@ -52,7 +56,6 @@
 				</el-form-item>
 			</el-form>
 		</base-dialog>
-
 	</div>
 </template>
 
@@ -66,11 +69,14 @@ import {
 	exportQualityInspectionDetExcel,
 } from '@/api/base/qualityInspectionDet';
 
+import moment from 'moment';
+
 export default {
 	name: 'QualityInspectionDet',
 	components: {},
 	data() {
 		return {
+			typeList: [], // 检测类型列表
 			searchBarFormConfig: [
 				{
 					type: 'input',
@@ -124,15 +130,19 @@ export default {
 				// },
 			],
 			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),
+				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: [
 				{
@@ -183,6 +193,7 @@ export default {
 	},
 	created() {
 		this.getList();
+		this.getTypeList();
 	},
 	methods: {
 		/** base table related */
@@ -226,6 +237,19 @@ export default {
 		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;
@@ -266,7 +290,7 @@ export default {
 		handleAdd() {
 			this.reset();
 			this.open = true;
-			this.title = '添加质量检测信息基础';
+			this.title = '添加质量检测信息';
 		},
 		/** 修改按钮操作 */
 		handleUpdate(row) {
@@ -275,7 +299,7 @@ export default {
 			getQualityInspectionDet(id).then((response) => {
 				this.form = response.data;
 				this.open = true;
-				this.title = '修改质量检测信息基础';
+				this.title = '修改质量检测信息';
 			});
 		},
 		/** 提交按钮 */
@@ -336,3 +360,9 @@ export default {
 	},
 };
 </script>
+
+<style>
+.el-select {
+	width: 100% !important;
+}
+</style>
diff --git a/src/views/quality/components/dialogForm.vue b/src/views/quality/components/dialogForm.vue
new file mode 100644
index 00000000..aac1d33d
--- /dev/null
+++ b/src/views/quality/components/dialogForm.vue
@@ -0,0 +1,137 @@
+<!-- 
+    filename: dialogForm.vue
+    author: liubin
+    date: 2023-08-02 10:32:36
+    description: 弹窗的表单组件
+-->
+
+<template>
+	<el-form
+		ref="form"
+		:model="form"
+		:rules="rules"
+		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">
+					<el-input
+						v-if="col.input"
+						v-model="form[col.prop]"
+						@change="$emit('update', form)"
+						rules="col.rules"
+						v-bind="col.bind" />
+					<el-select
+						v-if="col.select"
+						v-model="form[col.prop]"
+						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(options) {
+	let max = 0;
+	options.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: {
+		options: {
+			type: Array,
+			default: () => [],
+		},
+		dataForm: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
+	data() {
+		return {
+			formLoading: false,
+			optionListOf: {},
+		};
+	},
+	computed: {
+		labelWidth() {
+			let max = findMaxLabelWidth(this.options);
+			// 每个汉字占20px
+			return max * 20;
+		},
+		form: {
+			get() {
+				return this.dataForm;
+			},
+			set(val) {
+				console.log('set form', val);
+				// this.$emit('update', val);
+			},
+		},
+	},
+	mounted() {
+		// 处理 options
+		this.handleOptions();
+	},
+	methods: {
+		handleOptions() {
+			this.formLoading = true;
+			const promiseList = [];
+			this.options.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 {
+						await Promise.all(promiseList);
+						this.formLoading = false;
+					} catch (error) {
+						console.log('[dialogForm:handleOptions:error]', error);
+						this.formLoading = false;
+					}
+				}
+			});
+		},
+	},
+};
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/views/quality/mixin/basicPageMixin.js b/src/views/quality/mixin/basicPageMixin.js
new file mode 100644
index 00000000..b4005a91
--- /dev/null
+++ b/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() {},
+	},
+};