From e0d2dc189e5c0dca2c7b0d2c19b218b2ded05047 Mon Sep 17 00:00:00 2001
From: lb <liubin_9396@163.com>
Date: Sun, 29 Jan 2023 16:52:37 +0800
Subject: [PATCH] update BaseSearchForm

---
 src/components/BaseSearchForm copy.vue        | 181 +++++++++++
 src/components/BaseSearchForm.vue             | 302 ++++++++----------
 .../noTemplateComponents/statusComponent.js   |  64 ++--
 src/utils/request.js                          |   2 +-
 src/views/atomViews/ListViewWithHead.vue      |  25 +-
 .../modules/pms/productionLine/config.js      |   1 +
 .../modules/pms/productionLine/index.vue      |  19 +-
 7 files changed, 375 insertions(+), 219 deletions(-)
 create mode 100644 src/components/BaseSearchForm copy.vue

diff --git a/src/components/BaseSearchForm copy.vue b/src/components/BaseSearchForm copy.vue
new file mode 100644
index 0000000..81e7835
--- /dev/null
+++ b/src/components/BaseSearchForm copy.vue	
@@ -0,0 +1,181 @@
+<template>
+	<el-row class="base-search-form">
+		<div class="brand-color-line"></div>
+		<el-form :inline="true" :model="searchForm" :rules="headConfig.rules">
+			<!-- <el-col :span="opt.span ? +opt.span : 4" v-for="opt in options" :key="opt.id"> -->
+			<el-form-item
+				v-for="(opt, index) in headConfig.fields"
+				:key="opt.prop"
+				:label="opt.label ? opt.label : null"
+				:prop="'' + index"
+				:rules="opt.bind?.rules ? opt.bind.rules : undefined"
+			>
+				<el-input
+					v-if="opt.input"
+					v-model="searchForm[index]"
+					v-bind="opt.bind"
+				/>
+				<el-select
+					v-if="opt.select"
+					v-model="searchForm[index]"
+					v-bind="opt.bind"
+				>
+					<el-option
+						v-for="item in opt.select"
+						:key="item.value"
+						:label="item.label"
+						:value="item.value"
+					/>
+				</el-select>
+				<el-date-picker
+					v-if="opt.timerange"
+					v-model="searchForm[index]"
+					v-bind="opt.bind"
+				/>
+				<el-upload
+					v-if="opt.upload"
+					:key="'upload_' + Math.random().toString()"
+					class="inline-block pl-3"
+					action="https://jsonplaceholder.typicode.com/posts/"
+				>
+					<el-button type="primary">上传文件</el-button>
+				</el-upload>
+				<el-button
+					v-if="
+						opt.button &&
+							(!opt.button.permission || $hasPermission(opt.button.permission))
+					"
+					:key="'button' + Math.random().toString()"
+					:type="opt.button.type"
+					@click="handleBtnClick(opt.button.name)"
+					>{{ opt.button.name }}</el-button
+				>
+			</el-form-item>
+		</el-form>
+	</el-row>
+</template>
+
+<script>
+export default {
+	name: "",
+	props: {
+		headConfig: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
+	data() {
+		return {
+			searchForm: {
+				// 最大参数个数：10个，不够则在这里加
+				0: null, // 参数一
+				1: null,
+				2: null,
+				3: null,
+				4: null,
+				5: null,
+				6: null,
+				7: null,
+				8: null,
+				9: null,
+			},
+		};
+	},
+
+	watch: {
+		searchForm: {
+			handler: (val) => {
+				console.log("new val", val);
+			},
+			deep: true,
+		},
+	},
+	created() {},
+	mounted() {
+		console.log(
+			"head form config",
+			JSON.parse(JSON.stringify(this.headConfig))
+		);
+		this.headConfig.fields.forEach((field, index) => {
+			if (field.default) {
+				// default 必须有个 value 属性！哪怕是 input 输入框
+				this.searchForm[index] = field.default.value;
+			}
+
+			// 更新选项列表
+			if (!field.watch && field.fn && typeof field.fn === "function") {
+				// 设置自身的选项列表
+				field.fn().then((res) => {
+					field.select = res.map((_) => {
+						// 找到默认项
+						if (_.default) {
+							this.searchForm[index] = _.value;
+						}
+						return _;
+					});
+					console.log("[update] 更新选项列表", res, field.select);
+				});
+			}
+
+			// 如果需要监听关联字段
+			if (field.watch) {
+				const { index: innerIdx, condition } = field.watch;
+				console.log(
+					"=====field.watch=====",
+					innerIdx,
+					this.searchForm[innerIdx],
+					this.headConfig.fields[innerIdx].default
+				);
+				// 设置监听器
+				this.$watch(
+					() => this.searchForm[innerIdx],
+					(val) => {
+						const queryParams = { [condition]: val };
+						// field.watch.condition.forEach(c => {
+						// 	queryParams
+						// })
+						this.$http(field.url, queryParams).then((res) => {
+							console.log("[==>] 更新有前置条件的字段!!!", queryParams, res);
+							// 此处是外部的 index
+							this.searchForm[index] = Math.floor(Math.random() * 10);
+						});
+					}
+				);
+
+				console.log("[BaseSearchForm] mounted(): ", this.searchForm);
+				// 如果此时已经有默认值了，就立马根据这个默认值来发起请求
+				if (this.searchForm[innerIdx]) {
+					// TODO: 这个判断好像不太需要...
+					console.log("TODO: 这个判断好像不太需要...");
+				} else {
+					console.log("TODO: 监听的字段还没来得及设置值呢...");
+				}
+			}
+		});
+	},
+	methods: {
+		handleBtnClick(name) {
+			this.$emit("btn-click", { btnName: name, payload: this.searchForm });
+		},
+	},
+};
+</script>
+
+<style scoped>
+.base-search-form {
+	display: flex;
+	/* align-items: center; */
+	/* position: relative; */
+}
+
+.brand-color-line {
+	display: inline-block;
+	height: 20px;
+	width: 6px;
+	margin-right: 8px;
+	margin-top: 10px;
+	border-radius: 2px;
+	background: #0b58ff;
+	/* position: absolute; */
+}
+</style>
diff --git a/src/components/BaseSearchForm.vue b/src/components/BaseSearchForm.vue
index 4d83eff..e5eb507 100644
--- a/src/components/BaseSearchForm.vue
+++ b/src/components/BaseSearchForm.vue
@@ -1,188 +1,154 @@
 <template>
-	<el-row class="base-search-form">
-		<div class="brand-color-line"></div>
-		<el-form :inline="true" :model="searchForm" :rules="headConfig.rules">
-			<!-- <el-col :span="opt.span ? +opt.span : 4" v-for="opt in options" :key="opt.id"> -->
-			<el-form-item
-				v-for="(opt, index) in headConfig.fields"
-				:key="opt.prop"
-				:label="opt.label ? opt.label : null"
-				:prop="'' + index"
-				:rules="opt.bind?.rules ? opt.bind.rules : undefined"
-			>
-				<el-input
-					v-if="opt.input"
-					v-model="searchForm[index]"
-					v-bind="opt.bind"
-				/>
-				<el-select
-					v-if="opt.select"
-					v-model="searchForm[index]"
-					v-bind="opt.bind"
-				>
-					<el-option
-						v-for="item in opt.select"
-						:key="item.value"
-						:label="item.label"
-						:value="item.value"
-					/>
-				</el-select>
-				<el-date-picker
-					v-if="opt.timerange"
-					v-model="searchForm[index]"
-					v-bind="opt.bind"
-				/>
-				<el-upload
-					v-if="opt.upload"
-					:key="'upload_' + Math.random().toString()"
-					class="inline-block pl-3"
-					action="https://jsonplaceholder.typicode.com/posts/"
-				>
-					<el-button type="primary">上传文件</el-button>
-				</el-upload>
-				<el-button
-					v-if="
-						opt.button &&
-							(!opt.button.permission || $hasPermission(opt.button.permission))
-					"
-					:key="'button' + Math.random().toString()"
-					:type="opt.button.type"
-					@click="handleBtnClick(opt.button.name)"
-					>{{ opt.button.name }}</el-button
-				>
-			</el-form-item>
-		</el-form>
-	</el-row>
+  <el-row class="base-search-form">
+    <div class="brand-color-line"></div>
+    <el-form :inline="true" :model="dataForm" :rules="headConfig.rules">
+      <!-- <el-col :span="opt.span ? +opt.span : 4" v-for="opt in options" :key="opt.id"> -->
+      <el-form-item
+        v-for="(opt, index) in headConfig.fields"
+        :key="opt.prop"
+        :label="opt.label ? opt.label : null"
+        :prop="opt.prop ?? '' + index"
+        :rules="opt.bind?.rules ? opt.bind.rules : undefined"
+      >
+        <el-input v-if="opt.input" v-model="dataForm[opt.prop]" v-bind="opt.bind" clearable />
+        <el-select v-if="opt.select" v-model="dataForm[opt.prop]" v-bind="opt.bind" clearable>
+          <el-option v-for="item in opt.select" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+        <el-date-picker v-if="opt.timerange" v-model="dataForm[opt.prop]" v-bind="opt.bind" clearable />
+        <el-upload
+          v-if="opt.upload"
+          :key="'upload_' + Math.random().toString()"
+          class="inline-block pl-3"
+          action="https://jsonplaceholder.typicode.com/posts/"
+        >
+          <el-button type="primary">上传文件</el-button>
+        </el-upload>
+        <el-button
+          v-if="opt.button && (!opt.button.permission || $hasPermission(opt.button.permission))"
+          :key="'button' + Math.random().toString()"
+          :type="opt.button.type"
+          @click="handleBtnClick(opt.button.name)"
+          >{{ opt.button.name }}</el-button
+        >
+      </el-form-item>
+    </el-form>
+  </el-row>
 </template>
 
 <script>
 export default {
-	name: "",
-	props: {
-		headConfig: {
-			type: Object,
-			default: () => ({}),
-		},
-	},
-	data() {
-		return {
-			searchForm: {
-				// 最大参数个数：10个，不够则在这里加
-				0: null, // 参数一
-				1: null,
-				2: null,
-				3: null,
-				4: null,
-				5: null,
-				6: null,
-				7: null,
-				8: null,
-				9: null,
-			},
-		};
-	},
+  name: "",
+  props: {
+    headConfig: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      dataForm: {},
+    };
+  },
 
-	watch: {
-		searchForm: {
-			handler: (val) => {
-				console.log("new val", val);
-			},
-			deep: true,
-		},
-	},
-	created() {},
-	mounted() {
-		console.log(
-			"head form config",
-			JSON.parse(JSON.stringify(this.headConfig))
-		);
-		this.headConfig.fields.forEach((field, index) => {
-			if (field.default) {
-				// default 必须有个 value 属性！哪怕是 input 输入框
-				this.searchForm[index] = field.default.value;
-			}
+  // 这个 watch 出现得没啥必要......
+  // watch: {
+  //   dataForm: {
+  //     handler: (val) => {
+  //       console.log("[BaseSearchForm::watcher::dataForm]", val);
+  //     },
+  //     deep: true,
+  //   },
+  // },
 
-			// 更新选项列表
-			if (!field.watch && field.fn && typeof field.fn === "function") {
-				// 设置自身的选项列表
-				field.fn().then((res) => {
-					field.select = res.map((_) => {
-						// 找到默认项
-						if (_.default) {
-							this.searchForm[index] = _.value;
-						}
-						return _;
-					});
-					console.log("[update] 更新选项列表", res, field.select);
-				});
-			}
+  created() {},
+  mounted() {
+    console.log("[BaseSearchForm] configs:", JSON.parse(JSON.stringify(this.headConfig)));
 
-			// 模拟请求:
-			const axios = function(url, data) {
-				return new Promise((resolve) => {
-					resolve("success");
-				});
-			};
+    this.headConfig.fields.forEach((field, index) => {
+			// 没有 field.prop ，则为按钮之类的
+      if (!field.prop) return;
 
-			// 如果需要监听关联字段
-			if (field.watch) {
-				const { index: innerIdx, condition } = field.watch;
-				console.log(
-					"=====field.watch=====",
-					innerIdx,
-					this.searchForm[innerIdx],
-					this.headConfig.fields[innerIdx].default
-				);
-				// 设置监听器
-				this.$watch(
-					() => this.searchForm[innerIdx],
-					(val) => {
-						const queryParams = { [condition]: val };
-						// field.watch.condition.forEach(c => {
-						// 	queryParams
-						// })
-						axios(field.url, queryParams).then((res) => {
-							console.log("[==>] 更新有前置条件的字段!!!", queryParams, res);
-							// 此处是外部的 index
-							this.searchForm[index] = Math.floor(Math.random() * 10);
-						});
-					}
-				);
+      if (!this.dataForm[field.prop]) {
+        this.$set(this.dataForm, field.prop, null);
+      }
 
-				console.log("xxxxxxxxxx", this.searchForm);
-				// 如果此时已经有默认值了，就立马根据这个默认值来发起请求
-				if (this.searchForm[innerIdx]) {
-					// TODO: 这个判断好像不太需要...
-					console.log("TODO: 这个判断好像不太需要...");
-				} else {
-					console.log("TODO: 监听的字段还没来得及设置值呢...");
-				}
-			}
-		});
-	},
-	methods: {
-		handleBtnClick(name) {
-			this.$emit("btn-click", { btnName: name, payload: null });
-		},
-	},
+      if (field.default) {
+        // default 必须有个 value 属性！哪怕是 input 输入框
+        this.dataForm[field.prop] = field.default.value;
+      }
+
+      // 更新选项列表
+      if (!field.watch && field.fn && typeof field.fn === "function") {
+        // 设置自身的选项列表
+        field.fn().then(({ data: res }) => {
+          if (res.code === 0 && res.data) {
+            // TODO: 此处需要随具体情况再做更新
+            field.select = res.map((_) => {
+              // 找到默认项
+              if (_.default) {
+                this.searchForm[index] = _.value;
+              }
+              return _;
+            });
+            console.log("[update] 更新选项列表", res, field.select);
+          }
+        });
+      }
+
+      // 如果需要监听关联字段， field.watch ===> 需要watch的那个字段的 prop
+      // TODO: 此处也需要修改，碰到具体业务需求才更新...
+      if (field.watch) {
+        // const { index: innerIdx, condition } = field.watch;
+        // console.log("=====field.watch=====", innerIdx, this.searchForm[innerIdx], this.headConfig.fields[innerIdx].default);
+        // // 设置监听器
+        // this.$watch(
+        //   () => this.searchForm[innerIdx],
+        //   (val) => {
+        //     const queryParams = { [condition]: val };
+        //     // field.watch.condition.forEach(c => {
+        //     // 	queryParams
+        //     // })
+        //     this.$http(field.url, queryParams).then((res) => {
+        //       console.log("[==>] 更新有前置条件的字段!!!", queryParams, res);
+        //       // 此处是外部的 index
+        //       this.searchForm[index] = Math.floor(Math.random() * 10);
+        //     });
+        //   }
+        // );
+        // console.log("[BaseSearchForm] mounted(): ", this.searchForm);
+        // // 如果此时已经有默认值了，就立马根据这个默认值来发起请求
+        // if (this.searchForm[innerIdx]) {
+        //   // TODO: 这个判断好像不太需要...
+        //   console.log("TODO: 这个判断好像不太需要...");
+        // } else {
+        //   console.log("TODO: 监听的字段还没来得及设置值呢...");
+        // }
+      }
+    });
+  },
+  methods: {
+    handleBtnClick(name) {
+      this.$emit("btn-click", { btnName: name, payload: this.dataForm });
+    },
+  },
 };
 </script>
 
 <style scoped>
 .base-search-form {
-	display: flex;
-	/* align-items: center; */
-	/* position: relative; */
+  display: flex;
+  /* align-items: center; */
+  /* position: relative; */
 }
 
 .brand-color-line {
-	display: inline-block;
-	height: 20px;
-	width: 6px;
-	margin-right: 8px;
-	margin-top: 10px;
-	border-radius: 2px;
-	background: #0b58ff;
-	/* position: absolute; */
+  display: inline-block;
+  height: 20px;
+  width: 6px;
+  margin-right: 8px;
+  margin-top: 10px;
+  border-radius: 2px;
+  background: #0b58ff;
+  /* position: absolute; */
 }
 </style>
diff --git a/src/components/noTemplateComponents/statusComponent.js b/src/components/noTemplateComponents/statusComponent.js
index 4f4d656..bf40851 100644
--- a/src/components/noTemplateComponents/statusComponent.js
+++ b/src/components/noTemplateComponents/statusComponent.js
@@ -1,47 +1,69 @@
 // import i18n from '@/i18n'
 
 export default {
-  name: 'StatusComponent',
+  name: "StatusComponent",
   props: {
     injectData: {
       type: Object,
-      default: () => ({})
-    }
+      default: () => ({}),
+    },
   },
   data() {
     return {
       statusText: [
-        '正常',
-        '异常',
-        '损坏',
+        "正常",
+        "异常",
+        "损坏",
         // more...
       ],
       statusType: [
-        'success',
-        'warning',
-        'danger',
+        "success",
+        "warning",
+        "danger",
         // more...
-      ]
-    }
+      ],
+    };
   },
   computed: {
-    isEnabled() {
-      return this.injectData && (this.injectData.enabled === 1 || this.injectData.enabled.toString() === '1')
+    // isEnabled() {
+    //   return (
+    //     this.injectData &&
+    //     (this.injectData[this.injectData.head.prop ?? "enabled"] === 1 ||
+    //       this.injectData[this.injectData.head.prop ?? "enabled"].toString() === "1")
+    //   );
+    // },
+    propValue() {
+      return this.injectData[this.injectData.head.prop ?? "enabled"] ?? 9527
+    },
+    type() {
+      if (this.propValue === 9527) {
+        return 'danger'
+      }
+      return this.statusType[this.propValue]
+    },
+    text() {
+      if (this.propValue === 9527) {
+        return '未知状态'
+      }
+      return this.statusText[this.propValue]
     }
   },
   mounted() {
-    console.log('[component] StatusComponent: ', this.injectData)
+    // console.log("[component] StatusComponent: ", this.injectData);
   },
   methods: {
     // 发射事件
-    emit(opt) { }
+    emit(opt) { },
   },
   render: function (h) {
-    return h('el-tag',
+    return h(
+      "el-tag",
       {
-        props:
-          { size: 'small', type: this.isEnabled ? this.statusType[0] : this.statusType[1] }
+        // props: { size: "small", type: this.isEnabled ? this.statusType[0] : this.statusType[1] },
+        props: { size: "small", type: this.type },
       },
-      this.isEnabled ? this.statusText[0] : this.statusText[1])
-  }
-}
\ No newline at end of file
+      // this.isEnabled ? this.statusText[0] : this.statusText[1]
+      this.text
+    );
+  },
+};
diff --git a/src/utils/request.js b/src/utils/request.js
index 324cdcc..d2880d9 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -17,7 +17,7 @@ const http = axios.create({
 http.interceptors.request.use(config => {
   config.headers['Accept-Language'] = Cookies.get('language') || 'zh-CN'
   config.headers['token'] = Cookies.get('token') || ''
-  console.log('[request interceptor] token is:', config.headers['token'])
+  // console.log('[request interceptor] token is:', config.headers['token'])
   // 默认参数
   var defaults = {}
   // 防止缓存，GET请求默认带_t参数
diff --git a/src/views/atomViews/ListViewWithHead.vue b/src/views/atomViews/ListViewWithHead.vue
index 9b3cbf3..2e80e40 100644
--- a/src/views/atomViews/ListViewWithHead.vue
+++ b/src/views/atomViews/ListViewWithHead.vue
@@ -103,23 +103,22 @@ export default {
     },
 
     /** 获取 列表数据 */
-    getList(listQuery = null) {
+    getList(queryParams) {
       this.tableLoading = true;
-      if (!listQuery) {
-        listQuery = {};
-        listQuery.page = this.page;
-        listQuery.size = this.size;
-      }
 
-      const params = {
-        page: listQuery.page,
-        limit: listQuery.size,
-      };
-      if (this.listQueryExtra.length) {
+      const params = queryParams
+        ? { ...queryParams, page: this.page, limit: this.size }
+        : {
+            page: this.page,
+            limit: this.size,
+          };
+
+      if (!queryParams && this.listQueryExtra.length) {
         this.listQueryExtra.map((name) => {
           params[name] = "";
         });
       }
+
       this.$http
         .get(this.urls.page, {
           params,
@@ -207,8 +206,10 @@ export default {
         case "新增":
           this.openDialog();
           break;
-        case "查询":
+        case "查询": {
+          this.getList(payload);
           break;
+        }
       }
     },
 
diff --git a/src/views/modules/pms/productionLine/config.js b/src/views/modules/pms/productionLine/config.js
index aa6e8d2..9455f5e 100644
--- a/src/views/modules/pms/productionLine/config.js
+++ b/src/views/modules/pms/productionLine/config.js
@@ -24,6 +24,7 @@ export default function () {
 
   const headFormFields = [
     {
+      prop: 'key',
       label: "产线名称/编码",
       input: true,
       default: { value: "" },
diff --git a/src/views/modules/pms/productionLine/index.vue b/src/views/modules/pms/productionLine/index.vue
index 532ae7b..7ccdd8e 100644
--- a/src/views/modules/pms/productionLine/index.vue
+++ b/src/views/modules/pms/productionLine/index.vue
@@ -7,28 +7,13 @@ import initConfig from './config';
 import ListViewWithHead from '@/views/atomViews/ListViewWithHead.vue';
 
 export default {
-	name: 'BlenderView',
+	name: 'ProductionLineView',
 	components: { ListViewWithHead },
 	provide() {
 		return {
 			urls: this.allUrls
 		}
-	}
-		// urls: {
-		// 	type: Object,
-		// 	required: true,
-		// 	default: () => ({
-		// 		/** 列表 url **/ list: null,
-		// 		/** 分页 url **/ page: null,
-		// 		/** 编辑保存 url **/ edit: null,
-		// 		/** 删除条目 url **/ delete: null,
-		// 		/** 详情 url **/ detail: null,
-		// 		/** 导出 url **/ export: null,
-		// 		/** 导入 url **/ import: null,
-		// 		/** 其他 url **/ other: null,
-		// 	}),
-		// },
-	,
+	},
 	data() {
 		const { tableConfig, headFormConfigs, urls, dialogConfigs } = initConfig.call(this);
 		return {