修改

src/views/system/goodsCategory/index.vue

@@ -1,5 +1,29 @@
 <template>
   <div class="app-container">
+    <el-row :gutter="20">
+      <!--部门数据-->
+      <el-col :span="4" :xs="24">
+        <!-- <div class="head-container">
+          <el-input
+            v-model="goodsCategoryName"
+            placeholder="请输入区域名称"
+            clearable
+            size="small"
+            prefix-icon="el-icon-search"
+            style="margin-bottom: 20px"
+          />
+        </div> -->
+        <div class="head-container" style="height: 580px; overflow-y: auto">
+          <el-tree
+            :data="deptOptions"
+            :props="defaultProps"
+            @node-click="handleNodeClick"
+            @node-expand="handleNodeClick"
+          ></el-tree>
+        </div>
+      </el-col>
+      <!--用户数据-->
+      <el-col :span="20" :xs="24">
         <el-form
           :model="queryParams"
           ref="queryForm"
@@ -45,7 +69,6 @@
             >
           </el-form-item>
         </el-form>
-
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
             <el-button
@@ -157,10 +180,25 @@
           :limit.sync="queryParams.pageSize"
           @pagination="getList"
         />
+      </el-col>
+    </el-row>
 
     <!-- 添加或修改商品分类信息对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+        <el-form-item
+          label="父级分类名称"
+          prop="parentName"
+          :required="true"
+          v-if="form.parentId"
+        >
+          <el-input
+            v-model="form.parentName"
+            placeholder="请输入商品分类名称"
+            maxlength="10"
+            disabled
+          />
+        </el-form-item>
         <el-form-item label="商品分类名称" prop="goodsCategoryName">
           <el-input
             v-model="form.goodsCategoryName"
@@ -215,6 +253,7 @@ import {
   updatePicture,
   addGoodsCategory,
   updateGoodsCategory,
+  getStationCategoryList,
 } from "@/api/system/goodsCategory";
 import stationAcatar from "../stationAvatar/index.vue";
 import baseurl from "@/api/baseurl";
@@ -252,6 +291,8 @@ export default {
         goodsCategoryPicture: null,
         categoryRemark: null,
         sort: null,
+        parentId: "",
+        parentName: "",
       },
       // 表单参数
       form: {},
@@ -273,14 +314,65 @@ export default {
           { required: true, message: "显示顺序不能为空", trigger: "blur" },
         ],
       },
+      // 树选项
+      deptOptions: undefined,
+      categoryLevel: null,
+      defaultProps: {
+        children: "children",
+        label: "goodsCategoryName",
+      },
     };
   },
+
+  watch: {},
+
   created() {
     this.baseurl = baseurl;
-    this.getList();
+    // this.getList();
+    this.info();
   },
   methods: {
+    // 节点单击事件
+    handleNodeClick(data) {
+      this.loading = true;
+      this.queryParams.parentId = data.id;
+      this.queryParams.parentName = data.goodsCategoryName;
+      this.categoryLevel = data.categoryLevel;
+      this.handleQuery();
+      getStationCategoryList(data.id).then((res) => {
+        res.data.forEach((e) => {
+          e.children = [
+            {
+              goodsCategoryName: "",
+            },
+          ];
+        });
+        this.loading = false;
+        data.children = res.data;
+      });
+    },
     /** 查询商品分类信息列表 */
+    info() {
+      this.loading = true;
+      getStationCategoryList(0).then((res) => {
+        res.data.forEach((e) => {
+          e.children = [
+            {
+              goodsCategoryName: "",
+            },
+          ];
+        });
+        var obj = [
+          {
+            goodsCategoryName: "商品分类名称",
+            children: res.data,
+            id: 0,
+          },
+        ];
+        this.deptOptions = obj;
+        this.loading = false;
+      });
+    },
     getList() {
       this.loading = true;
       listGoodsCategory(this.queryParams).then((response) => {
@@ -297,9 +389,7 @@ export default {
         obj.pictureUrlList.push(this.form.goodsCategoryPicture);
       }
       if (obj.pictureUrlList.length > 0) {
-        updatePicture(obj).then((res) => {
+        updatePicture(obj).then((res) => {});
-          console.log(res);
-        });
       }
       this.open = false;
       this.reset();
@@ -317,6 +407,8 @@ export default {
         createTime: null,
         updateBy: null,
         updateTime: null,
+        parentId: null,
+        parentName: null,
       };
       this.resetForm("form");
     },
@@ -341,6 +433,13 @@ export default {
       this.reset();
       this.open = true;
       this.title = "添加商品分类信息";
+      console.log(this.queryParams);
+      // if (this.queryParams.parentId != 0) {
+      this.form.parentId = this.queryParams.parentId;
+      // }
+      this.form.parentName = this.queryParams.parentName;
+      this.form.categoryLevel = this.categoryLevel;
+      console.log(this.form);
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
@@ -356,8 +455,6 @@ export default {
     },
     /** 提交按钮 */
     submitForm() {
-      console.log(this.form);
-
       this.$refs["form"].validate((valid) => {
         if (valid) {
           if (this.form.id != null) {
@@ -367,19 +464,19 @@ export default {
                 obj.pictureUrlList.push(this.imgone);
               }
               if (obj.pictureUrlList.length > 0) {
-                updatePicture(obj).then((res) => {
+                updatePicture(obj).then((res) => {});
-                  console.log(res);
-                });
               }
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
+              this.info();
             });
           } else {
             addGoodsCategory(this.form).then((response) => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
               this.getList();
+              this.info();
             });
           }
         }
@@ -389,7 +486,9 @@ export default {
     handleDelete(row) {
       const ids = row.id || this.ids;
       this.$modal
-        .confirm('是否确认删除商品分类信息编号为"' + ids + '"的数据项？')
+        .confirm(
+          '是否确认删除商品分类名称为"' + row.goodsCategoryName + '"的数据？'
+        )
         .then(function () {
           return delGoodsCategory(ids);
         })