修改

src/views/system/goodsCategory/index.vue

@@ -2,7 +2,7 @@
   <div class="app-container">
     <el-row :gutter="20">
       <!--部门数据-->
-      <el-col :span="6" :xs="24">
+      <el-col :span="4" :xs="24">
         <!-- <div class="head-container">
           <el-input
             v-model="goodsCategoryName"
@@ -13,8 +13,9 @@
             style="margin-bottom: 20px"
           />
         </div> -->
-        <div class="head-container" style="height: 580px; overflow-y: auto">
+        <div class="head-container" style="height: 580px; width: 100%">
           <el-tree
+            class="flow-tree"
             :data="deptOptions"
             :props="defaultProps"
             @node-click="handleNodeClick"
@@ -192,18 +193,14 @@
       :before-close="cancel"
     >
       <el-form ref="form" :model="form" :rules="rules" label-width="120px">
-        <el-form-item
+        <el-form-item label="父级分类名称" prop="parentName">
-          label="父级分类名称"
-          prop="parentName"
-          v-show="form.parentId"
-        >
           <el-cascader
             :props="treeOption"
             @change="change"
             style="width: 340px"
             :show-all-levels="false"
             ref="cascader"
-            :placeholder="form.parentName ? form.parentName : ''"
+            :placeholder="form.parentName ? form.parentName : '商品主分类'"
             :key="isResouceShow"
           >
           </el-cascader>
@@ -285,20 +282,46 @@ export default {
         lazyLoad(node, resolve) {
           const id = node.level === 0 ? 0 : node.data.id;
           setTimeout(() => {
-            getStationCategoryList(id).then((res) => {
+            var data = [
-              // 接口请求
+              {
-              res.data.forEach((e) => {
+                label: "商品主分类",
-                e.value = e.id;
+                children: [],
-                e.label = e.goodsCategoryName;
+                value: 0,
+                id: 0,
+              },
+            ];
+            if (id == 0) {
+              getStationCategoryList(id).then((res) => {
+                // 接口请求
+                res.data.forEach((e) => {
+                  e.value = e.id;
+                  e.label = e.goodsCategoryName;
+                  data[0].children.push(e);
+                });
+                resolve(
+                  data.map((item) => {
+                    return {
+                      ...item,
+                    };
+                  })
+                );
               });
-              resolve(
+            } else {
-                res.data.map((item) => {
+              getStationCategoryList(id).then((res) => {
-                  return {
+                // 接口请求
-                    ...item,
+                res.data.forEach((e) => {
-                  };
+                  e.value = e.id;
-                })
+                  e.label = e.goodsCategoryName;
-              );
+                });
-            });
+                resolve(
+                  res.data.map((item) => {
+                    return {
+                      ...item,
+                    };
+                  })
+                );
+              });
+            }
           }, 300);
         },
       },
@@ -385,8 +408,13 @@ export default {
       this.loading = true;
       this.queryParams.parentId = data.id;
       this.queryParams.parentName = data.goodsCategoryName;
-      this.form.parentId = data.id;
+      if (data.id != 0) {
-      this.form.parentName = data.goodsCategoryName;
+        this.form.parentId = data.id;
+        this.form.parentName = data.goodsCategoryName;
+      } else {
+        this.form.parentId = 0;
+        this.form.parentName = "";
+      }
       // this.categoryLevel = data.categoryLevel;
       this.queryParams.pageNum = 1;
       this.getList();
@@ -415,7 +443,7 @@ export default {
         });
         var obj = [
           {
-            goodsCategoryName: "商品分类名称",
+            goodsCategoryName: "商品主分类",
             children: res.data,
             id: 0,
           },
@@ -587,5 +615,15 @@ export default {
 ::v-deep .el-cascader .el-input input::-webkit-input-placeholder {
   color: black;
 }
+::v-deep .el-tree {
+  height: 100%;
+  width: 100%;
+  overflow: scroll;
+}
+
+::v-deep .el-tree > .el-tree-node {
+  display: inline-block;
+  min-width: 100%;
+}
 </style>