update 设备类型，父类选择

src/components/DialogJustForm.vue

@@ -3,7 +3,7 @@
     class="dialog-just-form"
     :visible.sync="selfVisible"
     @closed="resetForm"
-    :distory-on-close="true"
+    :destroy-on-close="true"
     :close-on-click-modal="configs.clickModalToClose ?? true"
   >
     <!-- title  -->
@@ -20,6 +20,13 @@
           <!-- 通过多个 col === null 可以控制更灵活的 span 大小 -->
           <el-form-item v-if="col !== null" :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-cascader
+              v-if="col.cascader"
+              v-model="dataForm[col.prop]"
+              :options="col.options"
+              :disabled="detailMode"
+              v-bind="col.elparams"
+            ></el-cascader>
             <el-select
               v-if="col.select"
               v-model="dataForm[col.prop]"
@@ -71,32 +78,22 @@
 import { pick as __pick } from "@/utils/filters";
 
 function reConstructTreeData(listObj) {
-  // O(2n)
+  const entry = [];
-
-  // 数据重排
   Object.keys(listObj).map((key) => {
     const currentNode = listObj[key];
-    if (currentNode.parentId === "0") return // return { label: currentNode.name, value: currentNode.id, children: currentNode.children ?? [] };
+    currentNode.label = currentNode.name;
-
+    currentNode.value = currentNode.id;
+    if (currentNode.parentId === "0") {
+      entry.push(listObj[key]);
+      return; // return { label: currentNode.name, value: currentNode.id, children: currentNode.children ?? [] };
+    }
     const parentNode = listObj[currentNode.parentId];
     if (!parentNode.children) {
       parentNode.children = [];
     }
     parentNode.children.push(currentNode);
   });
-
+  return entry;
-  // 数据整理
-  function recursive(list) {
-    // TODO: 2023.2.2
-    list.forEach(item => {
-      if (item.children) recursive(item.children)
-    })
-  }
-
-  return Object.keys(listObj).map(key => {
-    const currentNode = listObj[key];
-    if (currentNode.children) recursive(currentNode.children)
-  })
 }
 
 export default {
@@ -132,7 +129,7 @@ export default {
             }
             // dataForm[col.prop] = col.default ?? null; // not perfect!
           });
-        else if (col.fetchTreeData)
+        else if (col.fetchTreeData) {
           // 获取设备类型时触发的，用于前端构建属性结构，约定，parentId 为0时是顶级节点
           col.fetchTreeData().then(({ data: res }) => {
             console.log("[Fetch Tree Data]", res.data.list);
@@ -144,12 +141,16 @@ export default {
               });
               // 再过滤这个对象
               let filteredList = reConstructTreeData(obj);
+              console.log("** filteredList **", filteredList);
               // 最后设置 options
               this.$set(col, "options", filteredList);
             } else {
               col.options.splice(0);
             }
+
+            return col
           });
+        }
       });
     });
     return {
@@ -184,6 +185,7 @@ export default {
           });
           console.log("[Dialog Just Form] cleared form...", this.dataForm);
           this.$refs.dataForm.clearValidate();
+          this.$emit("dialog-closed"); // 触发父组件销毁自己
         },
         immediate ? 0 : 100
       );
@@ -211,6 +213,7 @@ export default {
             if (res && res.code === 0) {
               const dataFormKeys = Object.keys(this.dataForm);
               console.log("keys ===> ", dataFormKeys);
+  
               // console.log('data form keys: ', dataFormKeys, pick(res.data, dataFormKeys))
               this.dataForm = __pick(res.data, dataFormKeys);
               console.log("pick(res.data, dataFormKeys) ===> ", __pick(res.data, dataFormKeys));
@@ -252,6 +255,12 @@ export default {
             break;
           case "add":
           case "update": {
+            if ("parentId" in this.dataForm) {
+              // 对特殊的键做特殊处理，如 parentId 是一个 cascader，获取的值是 ["xxx"]，后端只需要xxx
+              const lastItem = this.dataForm.parentId.length - 1;
+              this.dataForm.parentId = this.dataForm.parentId[lastItem];
+            }
+
             this.$refs.dataForm.validate((passed, result) => {
               if (passed) {
                 // 如果通过验证
@@ -304,7 +313,8 @@ export default {
   padding-bottom: 0 !important;
 }
 
-.el-select {
+.el-select,
+.el-cascader {
   width: 100% !important;
 }
 

src/views/atomViews/ListViewWithHead.vue

@@ -26,7 +26,13 @@
 			:page-size.sync="pageSize" -->
 
     <DialogWithMenu ref="edit-dialog" v-if="dialogType === DIALOG_WITH_MENU && dialogVisible" :configs="dialogConfigs" @refreshDataList="getList" />
-    <DialogJustForm ref="edit-dialog" v-if="dialogType === DIALOG_JUST_FORM && dialogVisible" :configs="dialogConfigs" @refreshDataList="getList" />
+    <DialogJustForm
+      ref="edit-dialog"
+      v-if="dialogType === DIALOG_JUST_FORM && dialogVisible"
+      :configs="dialogConfigs"
+      @refreshDataList="getList"
+      @dialog-closed="destroyDialog"
+    />
   </div>
 </template>
 
@@ -89,6 +95,12 @@ export default {
     this.initDataWhenLoad && this.getList();
   },
   methods: {
+    /* 从dom移除对话框 */
+    destroyDialog() {
+      // console.log('[ListViewWithHead] destroyDialog')
+      this.dialogVisible = false
+    },
+
     /**
      * 转换服务器数据的中间层
      * 为了抹平真实服务器数据和我本地的测试服务器数据的差异

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

@@ -74,7 +74,7 @@ export default function () {
           },
           {
             prop: "parentId",
-            select: true,
+            cascader: true,
             options: [
               // {label: '父类1', value: '1'},
               // {label: '父类2', value: '2'},
@@ -88,8 +88,8 @@ export default function () {
               })
             },
             label: "父类",
-            rules: { required: true, message: "not empty", trigger: "change" },
+            rules: { required: false, message: "not empty", trigger: "change" },
-            elparams: { placeholder: "请输选择父类" },
+            elparams: { placeholder: "请输选择父类", 'show-all-levels': false, props: { checkStrictly: true } },
           },
         ],
         // [{ textarea: true, label: "描述信息", prop: "description", elparams: { placeholder: "描述信息" } }],