update BaseSearchForm

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>

src/components/BaseSearchForm.vue

@@ -1,37 +1,20 @@
 <template>
   <el-row class="base-search-form">
     <div class="brand-color-line"></div>
-		<el-form :inline="true" :model="searchForm" :rules="headConfig.rules">
+    <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="'' + index"
+        :prop="opt.prop ?? '' + index"
         :rules="opt.bind?.rules ? opt.bind.rules : undefined"
       >
-				<el-input
+        <el-input v-if="opt.input" v-model="dataForm[opt.prop]" v-bind="opt.bind" clearable />
-					v-if="opt.input"
+        <el-select v-if="opt.select" v-model="dataForm[opt.prop]" v-bind="opt.bind" clearable>
-					v-model="searchForm[index]"
+          <el-option v-for="item in opt.select" :key="item.value" :label="item.label" :value="item.value" />
-					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
+        <el-date-picker v-if="opt.timerange" v-model="dataForm[opt.prop]" v-bind="opt.bind" clearable />
-					v-if="opt.timerange"
-					v-model="searchForm[index]"
-					v-bind="opt.bind"
-				/>
         <el-upload
           v-if="opt.upload"
           :key="'upload_' + Math.random().toString()"
@@ -41,10 +24,7 @@
           <el-button type="primary">上传文件</el-button>
         </el-upload>
         <el-button
-					v-if="
+          v-if="opt.button && (!opt.button.permission || $hasPermission(opt.button.permission))"
-						opt.button &&
-							(!opt.button.permission || $hasPermission(opt.button.permission))
-					"
           :key="'button' + Math.random().toString()"
           :type="opt.button.type"
           @click="handleBtnClick(opt.button.name)"
@@ -66,46 +46,43 @@ export default {
   },
   data() {
     return {
-			searchForm: {
+      dataForm: {},
-				// 最大参数个数：10个，不够则在这里加
-				0: null, // 参数一
-				1: null,
-				2: null,
-				3: null,
-				4: null,
-				5: null,
-				6: null,
-				7: null,
-				8: null,
-				9: null,
-			},
     };
   },
 
-	watch: {
+  // 这个 watch 出现得没啥必要......
-		searchForm: {
+  // watch: {
-			handler: (val) => {
+  //   dataForm: {
-				console.log("new val", val);
+  //     handler: (val) => {
-			},
+  //       console.log("[BaseSearchForm::watcher::dataForm]", val);
-			deep: true,
+  //     },
-		},
+  //     deep: true,
-	},
+  //   },
+  // },
+
   created() {},
   mounted() {
-		console.log(
+    console.log("[BaseSearchForm] configs:", JSON.parse(JSON.stringify(this.headConfig)));
-			"head form config",
+
-			JSON.parse(JSON.stringify(this.headConfig))
-		);
     this.headConfig.fields.forEach((field, index) => {
+			// 没有 field.prop ，则为按钮之类的
+      if (!field.prop) return;
+
+      if (!this.dataForm[field.prop]) {
+        this.$set(this.dataForm, field.prop, null);
+      }
+
       if (field.default) {
         // default 必须有个 value 属性！哪怕是 input 输入框
-				this.searchForm[index] = field.default.value;
+        this.dataForm[field.prop] = field.default.value;
       }
 
       // 更新选项列表
       if (!field.watch && field.fn && typeof field.fn === "function") {
         // 设置自身的选项列表
-				field.fn().then((res) => {
+        field.fn().then(({ data: res }) => {
+          if (res.code === 0 && res.data) {
+            // TODO: 此处需要随具体情况再做更新
             field.select = res.map((_) => {
               // 找到默认项
               if (_.default) {
@@ -114,55 +91,44 @@ export default {
               return _;
             });
             console.log("[update] 更新选项列表", res, field.select);
+          }
         });
       }
 
-			// 模拟请求:
+      // 如果需要监听关联字段， field.watch ===> 需要watch的那个字段的 prop
-			const axios = function(url, data) {
+      // TODO: 此处也需要修改，碰到具体业务需求才更新...
-				return new Promise((resolve) => {
-					resolve("success");
-				});
-			};
-
-			// 如果需要监听关联字段
       if (field.watch) {
-				const { index: innerIdx, condition } = field.watch;
+        // const { index: innerIdx, condition } = field.watch;
-				console.log(
+        // console.log("=====field.watch=====", innerIdx, this.searchForm[innerIdx], this.headConfig.fields[innerIdx].default);
-					"=====field.watch=====",
+        // // 设置监听器
-					innerIdx,
+        // this.$watch(
-					this.searchForm[innerIdx],
+        //   () => this.searchForm[innerIdx],
-					this.headConfig.fields[innerIdx].default
+        //   (val) => {
-				);
+        //     const queryParams = { [condition]: val };
-				// 设置监听器
+        //     // field.watch.condition.forEach(c => {
-				this.$watch(
+        //     // 	queryParams
-					() => this.searchForm[innerIdx],
+        //     // })
-					(val) => {
+        //     this.$http(field.url, queryParams).then((res) => {
-						const queryParams = { [condition]: val };
+        //       console.log("[==>] 更新有前置条件的字段!!!", queryParams, res);
-						// field.watch.condition.forEach(c => {
+        //       // 此处是外部的 index
-						// 	queryParams
+        //       this.searchForm[index] = Math.floor(Math.random() * 10);
-						// })
+        //     });
-						axios(field.url, queryParams).then((res) => {
+        //   }
-							console.log("[==>] 更新有前置条件的字段!!!", queryParams, res);
+        // );
-							// 此处是外部的 index
+        // console.log("[BaseSearchForm] mounted(): ", this.searchForm);
-							this.searchForm[index] = Math.floor(Math.random() * 10);
+        // // 如果此时已经有默认值了，就立马根据这个默认值来发起请求
-						});
+        // if (this.searchForm[innerIdx]) {
-					}
+        //   // TODO: 这个判断好像不太需要...
-				);
+        //   console.log("TODO: 这个判断好像不太需要...");
-
+        // } else {
-				console.log("xxxxxxxxxx", this.searchForm);
+        //   console.log("TODO: 监听的字段还没来得及设置值呢...");
-				// 如果此时已经有默认值了，就立马根据这个默认值来发起请求
+        // }
-				if (this.searchForm[innerIdx]) {
-					// TODO: 这个判断好像不太需要...
-					console.log("TODO: 这个判断好像不太需要...");
-				} else {
-					console.log("TODO: 监听的字段还没来得及设置值呢...");
-				}
       }
     });
   },
   methods: {
     handleBtnClick(name) {
-			this.$emit("btn-click", { btnName: name, payload: null });
+      this.$emit("btn-click", { btnName: name, payload: this.dataForm });
     },
   },
 };

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',
+        "success",
-        'warning',
+        "warning",
-        'danger',
+        "danger",
         // more...
-      ]
+      ],
-    }
+    };
   },
   computed: {
-    isEnabled() {
+    // isEnabled() {
-      return this.injectData && (this.injectData.enabled === 1 || this.injectData.enabled.toString() === '1')
+    //   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:
+        // props: { size: "small", type: this.isEnabled ? this.statusType[0] : this.statusType[1] },
-          { 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])
+      // this.isEnabled ? this.statusText[0] : this.statusText[1]
-  }
+      this.text
-}
+    );
+  },
+};

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参数

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 = {
+      const params = queryParams
-        page: listQuery.page,
+        ? { ...queryParams, page: this.page, limit: this.size }
-        limit: listQuery.size,
+        : {
+            page: this.page,
+            limit: this.size,
           };
-      if (this.listQueryExtra.length) {
+
+      if (!queryParams && this.listQueryExtra.length) {
         this.listQueryExtra.map((name) => {
           params[name] = "";
         });
       }
+
       this.$http
         .get(this.urls.page, {
           params,
@@ -207,9 +206,11 @@ export default {
         case "新增":
           this.openDialog();
           break;
-        case "查询":
+        case "查询": {
+          this.getList(payload);
           break;
         }
+      }
     },
 
     /** 导航器的操作 */

src/views/modules/pms/productionLine/config.js

@@ -24,6 +24,7 @@ export default function () {
 
   const headFormFields = [
     {
+      prop: 'key',
       label: "产线名称/编码",
       input: true,
       default: { value: "" },

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 {