From f568f2056a994f24b202110145489c7f08a792c4 Mon Sep 17 00:00:00 2001
From: lb <liubin_9396@163.com>
Date: Mon, 6 Feb 2023 14:24:12 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E7=89=A9=E6=96=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DialogWithMenu.vue             |  66 +++++++--
 .../pms/material/components/BaseListTable.vue | 138 ++++++++++++++++++
 .../material/components/ListViewWithHead.vue  |  68 +++++----
 src/views/modules/pms/material/config.js      |  77 +++++-----
 4 files changed, 267 insertions(+), 82 deletions(-)
 create mode 100644 src/views/modules/pms/material/components/BaseListTable.vue

diff --git a/src/components/DialogWithMenu.vue b/src/components/DialogWithMenu.vue
index 3db8de0..f4031ab 100644
--- a/src/components/DialogWithMenu.vue
+++ b/src/components/DialogWithMenu.vue
@@ -46,8 +46,8 @@
                 'el-icon-s-data': tab.key === 'attr',
                 'el-icon-folder-opened': tab.key === 'attachment',
               }"
-            ></i
-            > {{ tab.name }} 
+            ></i>
+            {{ tab.name }}
           </span>
 
           <div v-if="tab.key === 'info'">
@@ -56,12 +56,12 @@
               <el-row v-for="(row, rowIndex) in configs.form.rows" :key="'row_' + rowIndex" :gutter="20">
                 <el-col v-for="(col, colIndex) in row" :key="colIndex" :span="24 / row.length">
                   <el-form-item :label="col.label" :prop="col.prop" :rules="col.rules || null">
-                    <el-input v-if="col.input" v-model="dataForm[col.prop]" clearable :disabled="detailMode" v-bind="col.elparams" />
+                    <el-input v-if="col.input" v-model="dataForm[col.prop]" clearable :disabled="disableCondition(col.prop)" v-bind="col.elparams" />
                     <el-select
                       v-if="col.select"
                       v-model="dataForm[col.prop]"
                       clearable
-                      :disabled="detailMode"
+                      :disabled="disableCondition(col.prop)"
                       v-bind="col.elparams"
                       @change="handleSelectChange(col, $event)"
                     >
@@ -73,9 +73,15 @@
                       :active-value="1"
                       :inactive-value="0"
                       @change="handleSwitchChange"
-                      :disabled="detailMode"
+                      :disabled="disableCondition(col.prop)"
+                    />
+                    <el-input
+                      v-if="col.textarea"
+                      type="textarea"
+                      v-model="dataForm[col.prop]"
+                      :disabled="disableCondition(col.prop)"
+                      v-bind="col.elparams"
                     />
-                    <el-input v-if="col.textarea" type="textarea" v-model="dataForm[col.prop]" :disabled="detailMode" v-bind="col.elparams" />
                     <!-- add more...  -->
                   </el-form-item>
                 </el-col>
@@ -134,22 +140,33 @@ export default {
   inject: ["urls"],
   data() {
     const dataForm = {};
-
+    const autoDisabledList = [];
     this.configs.form.rows.forEach((row) => {
       row.forEach((col) => {
         if (col.upload) dataForm[col.prop] = col.default ?? [];
         else dataForm[col.prop] = col.default ?? null;
 
+        if (col.autoDisabled) autoDisabledList.push(col.prop);
+
         if (col.fetchData)
           col.fetchData().then(({ data: res }) => {
             console.log("[Fetch Data]", res.data.list);
             if (res.code === 0 && res.data.list) {
-              this.$set(
-                col,
-                "options",
-                res.data.list.map((i) => ({ label: i.name, value: i.id }))
-              );
+              if (!col.options || !col.options.length)
+                this.$set(
+                  col,
+                  "options",
+                  res.data.list.map((i) => ({ label: i.name, value: i.id }))
+                );
               // col.options = res.data.list;
+              else if (col.options.length) {
+                res.data.list.unshift(...col.options);
+                this.$set(
+                  col,
+                  "options",
+                  res.data.list.map((i) => ({ label: i.name, value: i.id }))
+                );
+              }
             } else {
               col.options.splice(0);
             }
@@ -184,11 +201,12 @@ export default {
       activeMenu: this.configs.menu[0].name,
       dataForm,
       detailMode: false,
-
+      autoDisabledList,
       showBaseDialog: false,
       baseDialogConfig: null,
       subList: [],
       showSubDialog: false,
+      disableXXX: false,
     };
   },
   computed: {
@@ -204,7 +222,29 @@ export default {
       return this.detailMode ? this.configs.table.props.filter((v) => v.prop !== "operations") : this.configs.table.props;
     },
   },
+  watch: {
+    // "dataForm.parentId": function (val, old) {
+    //   if (val && val !== "0") {
+    //     // 如果不是 '无' 选项，就锁定 typeDictValue(物料类别)，和 typeId(物料类型)
+    //     this.$http.get(`/pms/material/${val}`).then(({ data: res }) => {
+    //       if (res.code === 0) {
+    //         const { typeDictValue, typeId } = res.data;
+    //         this.dataForm.typeDictValue = typeDictValue;
+    //         this.dataForm.typeId = typeId;
+    //         this.disableXXX = true;
+    //       }
+    //     });
+    //   } else {
+    //     this.dataForm.typeDictValue = null;
+    //     this.dataForm.typeId = null;
+    //     this.disableXXX = false;
+    //   }
+    // },
+  },
   methods: {
+    disableCondition(prop) {
+      return this.detailMode || (this.disableXXX && this.autoDisabledList.indexOf(prop) !== -1);
+    },
     /** utitilities */
     showButton(operate) {
       const notDetailMode = !this.detailMode;
diff --git a/src/views/modules/pms/material/components/BaseListTable.vue b/src/views/modules/pms/material/components/BaseListTable.vue
new file mode 100644
index 0000000..b9238df
--- /dev/null
+++ b/src/views/modules/pms/material/components/BaseListTable.vue
@@ -0,0 +1,138 @@
+<!-- 这里单纯的配置表格就好了-->
+<template>
+	<div class="base-list-table w-full">
+		<el-table
+			:data="tableData"
+			v-bind="tableConfig"
+			ref="base-list-table"
+			:cell-style="{ padding: 0 }"
+			:header-cell-style="/** 重写表格样式 **/ {
+				padding: '8px 0',
+			}"
+			row-key="id"
+			:lazy="true"
+			:load="loadSubClassFn"
+		>
+			<!-- @cell-mouse-enter="(row, col, cell, event) => $emit('cell-mouse-enter', row, col, cell, event)"> -->
+			<!-- @cell-mouse-leave="(row, col, cell, event) => $emit('cell-mouse-leave', row, col, cell, event)"> -->
+			<!-- 表格头定义 -->
+			<template v-for="(head, idx) in columnConfig">
+				<!-- 索引列 -->
+				<el-table-column
+					:key="idx"
+					v-if="head.type"
+					:type="head.type"
+					:label="head.label || head.name || ''"
+					:header-align="head.align || 'center'"
+					:align="head.align || 'center'"
+					:width="head.width || 50"
+					:index="
+						head.type === 'index'
+							? (val) => {
+									return val + 1 + (page - 1) * size;
+							  }
+							: null
+					"
+					v-bind="head.more"
+				></el-table-column>
+				<!-- 普通的表头 -->
+				<el-table-column
+					v-else
+					:key="idx + 'else'"
+					:label="head.label ? head.label : head.name"
+					:prop="head.prop || null"
+					:width="head.width || null"
+					:min-width="head.minWidth || null"
+					:fixed="head.fixed || null"
+					:show-overflow-tooltip="head.showOverflowTooltip || true"
+					:tooltip-effect="head.tooltipEffect || 'light'"
+					filter-placement="top"
+					:align="head.align || null"
+					v-bind="head.more"
+				>
+					<!-- 子组件 -->
+					<template v-if="head.prop" slot-scope="scope">
+						<component
+							v-if="head.subcomponent"
+							:is="head.subcomponent"
+							:key="idx + 'sub'"
+							:inject-data="{ ...scope.row, head }"
+							@emit-data="handleSubEmitData"
+						/>
+						<!-- 直接展示数据或应用过滤器 -->
+						<span v-else>{{
+							scope.row[head.prop] | commonFilter(head.filter)
+						}}</span>
+					</template>
+
+					<!-- 多级表头 -->
+					<template v-if="!head.prop && head.children">
+						<TableHead
+							v-for="(subhead, subindex) in head.children"
+							:key="'subhead-' + idx + '-subindex-' + subindex"
+							:opt="subhead"
+						/>
+					</template>
+				</el-table-column>
+			</template>
+		</el-table>
+	</div>
+</template>
+
+<script>
+import TableHead from "@/components/TableHead.vue";
+// 1. 表格拖拽开启/关闭
+// 2. 表格的样式'
+// 3. more...
+
+export default {
+	name: "BaseListTable",
+	components: { TableHead },
+	filters: {
+		commonFilter: (source, filterType = (a) => a) => {
+			return filterType(source);
+		},
+	},
+	props: {
+		tableConfig: {
+			type: Object,
+			default: () => ({}),
+		},
+		columnConfig: {
+			type: Array,
+			default: () => [],
+		},
+		tableData: {
+			type: Array,
+			default: () => [],
+		},
+	},
+	inject: ["urls"],
+	data() {
+		return {
+			page: 1,
+			size: 20, // 默认20
+			dataList: [],
+		};
+	},
+	watch: {
+		// 'props.tableData': {
+		// 	handler: () => {
+		// 		this.$refs['base-list-table'].doLayout();
+		// 	},
+		// 	immediate: true,
+		// },
+	},
+	methods: {
+		handleSubEmitData(payload) {
+			console.log("[component] BaseListTable handleSubEmitData(): ", payload);
+			this.$emit("operate-event", payload);
+		},
+		loadSubClassFn(tree, treeNode, resolve) {
+			this.$emit('load-sub', { tree, treeNode, resolve })
+		}
+	},
+};
+</script>
+
+<style scoped></style>
diff --git a/src/views/modules/pms/material/components/ListViewWithHead.vue b/src/views/modules/pms/material/components/ListViewWithHead.vue
index 427480a..c8b2250 100644
--- a/src/views/modules/pms/material/components/ListViewWithHead.vue
+++ b/src/views/modules/pms/material/components/ListViewWithHead.vue
@@ -15,6 +15,7 @@
       :column-config="tableConfig.column"
       :table-data="dataList"
       @operate-event="handleOperate"
+      @load-sub="handleLoadSub"
     />
 
     <el-pagination
@@ -35,20 +36,20 @@
       v-if="dialogType === DIALOG_WITH_MENU"
       :dialog-visible.sync="dialogVisible"
       :configs="dialogConfigs"
-      @refreshDataList="getList"
+      @refreshDataList="handleRefreshDatalist"
     />
     <DialogJustForm
       ref="edit-dialog"
       v-if="dialogType === DIALOG_JUST_FORM"
       :dialog-visible.sync="dialogVisible"
       :configs="dialogConfigs"
-      @refreshDataList="getList"
+      @refreshDataList="handleRefreshDatalist"
     />
   </div>
 </template>
 
 <script>
-import BaseListTable from "@/components/BaseListTable.vue";
+import BaseListTable from "./BaseListTable.vue";
 import BaseSearchForm from "@/components/BaseSearchForm.vue";
 import DialogWithMenu from "@/components/DialogWithMenu.vue";
 import DialogJustForm from "@/components/DialogJustForm.vue";
@@ -56,10 +57,6 @@ import DialogJustForm from "@/components/DialogJustForm.vue";
 const DIALOG_WITH_MENU = "DialogWithMenu";
 const DIALOG_JUST_FORM = "DialogJustForm";
 
-function constructToTree(list) {
-  return list;
-}
-
 export default {
   name: "ListViewWithHead",
   components: { BaseSearchForm, BaseListTable, DialogWithMenu, DialogJustForm },
@@ -110,17 +107,21 @@ export default {
     this.initDataWhenLoad && this.getList();
   },
   methods: {
-    /**
-     * 转换服务器数据的中间层
-     * 为了抹平真实服务器数据和我本地的测试服务器数据的差异
-     **/
-    prehandle_data(list) {
-      /** 根据具体情况修改 */
-      list.forEach((data) => {
-        data.id = data._id;
-        delete data._id;
+    handleLoadSub({ tree, treeNode, resolve }) {
+      console.log("tree, treeNOde, resovle is:", tree, treeNode, resolve);
+      this.$http.get(`${this.urls.tree}?rootId=${tree.id}`).then(({ data: res }) => {
+        if (res.code === 0 && res.data) {
+          resolve(
+            res.data.map((item) => {
+              if (item.children) item.hasChildren = true;
+
+              /** TODO: 合并物料类型 和 类别 */
+
+              return item;
+            })
+          );
+        }
       });
-      return list;
     },
 
     /** 获取 列表数据 */
@@ -142,7 +143,10 @@ export default {
 
       this.$http
         .get(this.urls.page, {
-          params,
+          params: {
+            ...params,
+            parentId: "0",
+          },
         })
         .then(({ data: res }) => {
           console.log("[http response] res is: ", res);
@@ -150,20 +154,8 @@ export default {
           // page 场景:
           if ("list" in res.data) {
             // real env:
-            this.dataList = constructToTree(
-              res.data.list.map((item) => ({
-                ...item,
-                id: item._id ?? item.id,
-              }))
-            );
-            // this.dataList = res.data.records;
-            this.totalPage = res.data.total;
-          } else if ("records" in res.data) {
-            // dev env:
-            this.dataList = res.data.records.map((item) => ({
-              ...item,
-              id: item._id ?? item.id,
-            }));
+            this.dataList = res.data.list.map((_) => ({ ..._, hasChildren: true }));
+
             // this.dataList = res.data.records;
             this.totalPage = res.data.total;
           } else {
@@ -171,6 +163,8 @@ export default {
             this.totalPage = 0;
           }
           this.tableLoading = false;
+
+          // location.reload()
         });
     },
 
@@ -221,12 +215,12 @@ export default {
           break;
         }
         case "status": {
-          console.log('status', data)
+          console.log("status", data);
           // TODO: 类似于这种字符串，可以统一集中到一个文件里
           const { id, code } = data;
           const queryCondition = { id, code };
-          if ("enabled" in data) queryCondition.enabled = data['enabled'];
-          if ("status" in data) queryCondition.status = data['status'];
+          if ("enabled" in data) queryCondition.enabled = data["enabled"];
+          if ("status" in data) queryCondition.status = data["status"];
           // 更改状态，更改状态需要 id 和 code 然后是 状态 enabled
           this.$http.put(this.urls.base, queryCondition).then(({ data: res }) => {
             if (res.code === 0) {
@@ -238,6 +232,10 @@ export default {
       }
     },
 
+    handleRefreshDatalist() {
+      location.reload()
+    },
+
     handleBtnClick({ btnName, payload }) {
       console.log("[search] form handleBtnClick", btnName, payload);
       switch (btnName) {
diff --git a/src/views/modules/pms/material/config.js b/src/views/modules/pms/material/config.js
index 3eb0262..19fafd7 100644
--- a/src/views/modules/pms/material/config.js
+++ b/src/views/modules/pms/material/config.js
@@ -5,7 +5,8 @@ import { timeFilter, dictFilter } from "@/utils/filters";
 
 export default function () {
   const tableProps = [
-    { prop: "createTime", label: "添加时间", filter: timeFilter },
+    { type: 'index', label: '序号' },
+    // { prop: "createTime", label: "添加时间", filter: timeFilter },
     { prop: "name", label: "物料名称" },
     { prop: "code", label: "物料编码" },
     { prop: "typeDictValue", label: "类别", filter: dictFilter("material_category") }, // subcomponent: {/** TODO: create a new component for this option */} },
@@ -61,7 +62,7 @@ export default function () {
     menu: [
       { name: "物料信息", key: "info" },
       { name: "物料属性信息", key: "attr", onlyEditMode: true },
-      { name: "添加子类", key: "add-sub", onlyEditMode: true },
+      // { name: "添加子类", key: "add-sub", onlyEditMode: true },
     ],
     form: {
       rows: [
@@ -80,6 +81,20 @@ export default function () {
             rules: { required: true, message: "not empty", trigger: "blur" },
             elparams: { placeholder: "请输入物料编码" },
           },
+          { input: true, label: "规格", prop: "description", elparams: { placeholder: "规格" } },
+        ],
+        [
+          {
+            select: true,
+            label: "父级物料",
+            prop: "parentId",
+            // TODO: 待解决：DialogWithMenu 中设置default只在初始化的时候有效，一旦清空过就无效了
+            // default: '0',
+            // rules: { required: true, message: "not empty", trigger: "blur" },
+            options: [{ id: '0', name: '无' }], // 手动注入额外选项，用到的场景不多...
+            fetchData: () => this.$http.get('/pms/material/page', { params: { page: 1, limit: 999, key: '' } }),
+            elparams: { placeholder: "请选择父级物料" },
+          },
           {
             select: true,
             label: "物料类型",
@@ -88,17 +103,33 @@ export default function () {
             options: [],
             fetchData: () => this.$http.get('/pms/materialType/page', { params: { page: 1, limit: 999 } }),
             elparams: { placeholder: "请输入物料类型" },
+            // autoDisabled: true, // 有某个条件触发后，自动变成 disabled 状态
           },
-        ],
-        [
           {
             select: true,
-            label: "父级物料",
-            prop: "parentId",
-            rules: { required: true, message: "not empty", trigger: "blur" },
-            options: [],
-            fetchData: () => this.$http.get('/pms/material/page', { params: { page: 1, limit: 999, key: '' } }),
-            elparams: { placeholder: "请选择父级物料" },
+            label: "物料类别",
+            prop: "typeDictValue",
+            options: dictList["material_category"].map((u) => ({ label: u.dictLabel, value: u.dictValue })),
+            elparams: { placeholder: "物料类别" },
+            // autoDisabled: true
+          },
+
+          // {
+          //   input: true,
+          //   label: "设备类型",
+          //   prop: "eqTypeId",
+          //   rules: { required: true, message: "not empty", trigger: "blur" },
+          //   elparams: { placeholder: "请输入设备类型" },
+          // },
+        ],
+        [
+
+          {
+            select: true,
+            label: "单位",
+            prop: "unitDictValue",
+            options: dictList["unit"].map((u) => ({ label: u.dictLabel, value: u.dictValue })),
+            elparams: { placeholder: "单位" },
           },
           {
             input: true,
@@ -112,30 +143,7 @@ export default function () {
             prop: "enAb",
             elparams: { placeholder: "请输入缩写" },
           },
-          // {
-          //   input: true,
-          //   label: "设备类型",
-          //   prop: "eqTypeId",
-          //   rules: { required: true, message: "not empty", trigger: "blur" },
-          //   elparams: { placeholder: "请输入设备类型" },
-          // },
-        ],
-        [
-          {
-            select: true,
-            label: "物料类别",
-            prop: "typeDictValue",
-            options: dictList["material_category"].map((u) => ({ label: u.dictLabel, value: u.dictValue })),
-            elparams: { placeholder: "物料类别" },
-          },
-          {
-            select: true,
-            label: "单位",
-            prop: "unitDictValue",
-            options: dictList["unit"].map((u) => ({ label: u.dictLabel, value: u.dictValue })),
-            elparams: { placeholder: "单位" },
-          },
-          { input: true, label: "规格", prop: "description", elparams: { placeholder: "规格" } },
+
         ],
         [{ textarea: true, label: "备注", prop: "remark", elparams: { placeholder: "备注" } }],
       ],
@@ -206,6 +214,7 @@ export default function () {
     urls: {
       base: "/pms/material",
       page: "/pms/material/page",
+      tree: "/pms/material/tree",
       subase: "/pms/materialArrt",
       subpage: "/pms/materialArrt/page",
       // more...