解决【物料申请单】物料申请单新增编辑四级分类需要显示编号

src/components/PopDialog/fourClass.vue

@@ -12,23 +12,30 @@
       <el-container style="height: 500px">
         <el-container>
           <el-main>
-            <el-row :gutter="10" class="content">
-              <el-col :span="12">
+            <el-row :gutter="24" class="content">
+              <el-col :span="24">
                 <el-input
                   placeholder="输入关键字进行过滤"
                   size="small"
-                  v-model="filterText">
+                  v-model="filterText"
+                  style="margin-bottom: 16px"
+                >
                 </el-input>
 
                 <el-tree
                   class="filter-tree"
                   :data="threedata"
                   :props="defaultProps"
+                  accordion
                   node-key="id"
                   highlight-current
                   @node-click="clickTree"
                   :filter-node-method="filterNode"
-                  ref="tree">
+                  ref="tree"
+                >
+                  <span slot-scope="{ node, data }">
+                    {{ data.code }}{{ data.materialType }}
+                  </span>
                 </el-tree>
               </el-col>
             </el-row>
@@ -55,75 +62,81 @@
 </template>
 
 <script>
-import { getTree } from '@/api/classify/basic';
+import { getTree } from "@/api/classify/basic";
 export default {
   data() {
     return {
       loading: false,
       visible: false,
-      filterText: '',
+      filterText: "",
       threedata: [],
       defaultProps: {
-        children: 'childrens',
-        label: 'materialType'
+        children: "childrens",
+        label: "materialType",
       },
       // 判断是否为最末级节点
       isLast: false,
       // 选中的节点
-      choosePoint: {}
+      choosePoint: {},
     };
   },
   props: {},
   watch: {
-      filterText(val) {
-        this.$refs.tree.filter(val);
-      }
+    filterText(val) {
+      this.$refs.tree.filter(val);
+    },
   },
   methods: {
     init() {
       this.visible = true;
       this.$nextTick(() => {
-        this.refreshList()
+        this.refreshList();
       });
     },
     // 获取数据列表
     refreshList(data) {
       this.loading = true;
-      getTree({isEnable: '0'}).then(res => {
-        console.log('res',res)
-        if(res.code === 200) {
-          this.threedata = res.rows
+      getTree({ isEnable: "0" }).then((res) => {
+        console.log("res", res);
+        if (res.code === 200) {
+          this.threedata = res.rows.sort((a, b) => a.code - b.code);
         }
         this.loading = false;
       });
     },
     clickTree(data) {
-      console.log('树形节点信息：',data)
+      console.log("树形节点信息：", data);
       if (data.childrens.length == 0) {
-        this.isLast = true
+        this.isLast = true;
       } else {
-        this.isLast = false
+        this.isLast = false;
       }
-      this.choosePoint = data
+      this.choosePoint = data;
     },
     filterNode(value, data) {
-      console.log('value', value)
-      console.log('data', data)
-        if (!value) return true;
-        return data.materialType.indexOf(value) !== -1;
+      console.log("value", value);
+      console.log("data", data);
+      if (!value) return true;
+      return data.materialType.indexOf(value) !== -1;
     },
     doSubmit() {
-      if(this.isLast == false) {
+      if (this.isLast == false) {
         this.$message({
-          message: '请选择最末级节点',
-          type: 'warning'
+          message: "请选择最末级节点",
+          type: "warning",
         });
       } else {
-        console.log('子组件选择的数据',this.choosePoint)
+        console.log("子组件选择的数据", this.choosePoint);
         this.$emit("doSubmit", this.choosePoint);
         this.visible = false;
       }
     },
+    loadNode(node, resolve) {
+      console.log("node, resolve", node, resolve);
+      // if (!node.data.length)
+      //   resolve(node.data.childrens.sort((a, b) => a.code - b.code));
+      // else resolve(this.threedata);
+    },
   },
 };
 </script>
@@ -142,4 +155,4 @@ export default {
     }
   }
 }
-</style>
+</style>

src/views/material/classify/index.vue

@@ -16,12 +16,6 @@
           >删除</el-button
         >
       </el-col>
-      <!-- <el-col :span="1.5">
-        <el-button type="primary" size="small" plain>启用</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="primary" size="small" plain>停用</el-button>
-      </el-col> -->
     </el-row>
 
     <el-card v-loading="loading">
@@ -46,7 +40,7 @@
             ref="tree"
           >
             <span slot-scope="{ node, data }">
-              {{ data.materialType }} {{ data.code }}
+              {{ data.code }}{{ data.materialType }}
             </span>
           </el-tree>
         </el-col>
@@ -221,7 +215,7 @@ export default {
   watch: {
     filterText(val) {
       this.$refs.tree.filter(val);
-    }
+    },
   },
   created() {
     this.getTreeData();