11

src/components/tradePavilion/brandClassification.vue

 <template>
   <div class="brandClassification">
     <div class="head-title">
-      <span>品牌分类管理</span>
-      <el-button style="float: right; margin-top: -5px" size="small" type="primary" @click="goAdd">
+      品牌分类管理
+      <div>
+        <el-button style="float: right; margin-top: -25px" size="small" type="primary" @click="goAdd">
           新增分类
         </el-button>
       </div>
+    </div>
     <div style="margin-top: 10px; background: #fff; padding: 20px">
       <div v-loading="loading" class="cat-container">
         <el-card class="card-item-box" shadow="never">
@@ -56,8 +58,10 @@
                 </div>
               </div>
               <div class="item-actions">
-                <el-button @click.stop="editChildNews(item)" type="text" size="small" class="action-btn edit">编辑</el-button>
-                <el-button @click.stop="delChildNews(item)" type="text" size="small" class="action-btn delete">删除</el-button>
+                <el-button @click.stop="editChildNews(item)" type="text" size="small" class="action-btn edit">编辑
+                </el-button>
+                <el-button @click.stop="delChildNews(item)" type="text" size="small" class="action-btn delete">删除
+                </el-button>
               </div>
             </div>
             <div v-if="childTableData.length == 0" class="empty-state">
@@ -84,7 +88,7 @@
           </el-radio-group>
         </el-form-item>
         <el-form-item label="上级分类" v-if="addLevel === 2" class="is-required" prop="ParentId">
-          <el-select v-model="addMsg.ParentId" placeholder="请选择上级分类" size="small" style="width: 100%">
+          <el-select v-model="addMsg.ParentId" placeholder="请选择上级分类" size="small" style="width: 100%" filterable>
             <el-option v-for="item in tableData" :key="item.ID" :label="item.ClassName" :value="item.ID"></el-option>
           </el-select>
         </el-form-item>
@@ -92,7 +96,8 @@
           <el-input type="text" v-model="addMsg.ClassName" size="small" placeholder="品牌分类名称" maxlength="100">
           </el-input>
         </el-form-item>
-        <el-form-item label="Logo" class="is-required" prop="Logo">
+        <!--class="is-required" prop="Logo"-->
+        <el-form-item label="Logo" >
           <el-button @click="isShowImage = true" size="small">选择文件</el-button>
           <div style="position: relative; width: 100px; margin-top: 10px; border: none">
             <img v-if="!addMsg.Logo || addMsg.Logo == ''" src="../../assets/img/default.png"
@@ -114,19 +119,14 @@
 
 <script>
   import ChooseImg from "@/components/global/ChooseImg.vue";
-  import draggable from "vuedraggable";
   export default {
     name: "brandClassification",
     components: {
       ChooseImg,
-      draggable,
     },
     data() {
       return {
         val: "",
-        dragState: false,
-        checkAll1: false,
-        checkAll2: false,
         loading: false,
         msg: {
           ClassName: "",
@@ -148,7 +148,7 @@
           ClassName: "",
           ParentId: 0,
           BrandCategory: 3,
-          SortNum:0,
+          SortNum: 0,
         },
         rules: {
           ClassName: [{
@@ -173,16 +173,6 @@
       this.getList();
     },
     methods: {
-      handleCheckAll1(val) {
-        this.tableData.forEach((item) => {
-          item.checked = val;
-        });
-      },
-      handleCheckAll2(val) {
-        this.childTableData.forEach((item) => {
-          item.checked = val;
-        });
-      },
       goAdd() {
         this.addMsg.ID = 0;
         this.addMsg.Logo = "";
@@ -201,18 +191,6 @@
           }
         }
       },
-      goAddChild() {
-        if (!this.currentParentId) {
-          this.Error("请先选择一级分类");
-          return;
-        }
-        this.addMsg.ID = 0;
-        this.addMsg.Logo = "";
-        this.addMsg.ClassName = "";
-        this.addMsg.ParentId = this.currentParentId;
-        this.addLevel = 2;
-        this.dialogVisible = true;
-      },
       SelectId(msg) {
         let url = this.getIconLink(msg.url);
         this.addMsg.Logo = url;
@@ -222,46 +200,43 @@
         this.activeIndex = item.ID;
         this.currentParentId = item.ID;
         this.currentParentName = item.ClassName;
-        this.getChildList();
+        // 从树形数据的 subList 获取二级分类
+        this.childTableData = item.subList || [];
       },
       getList() {
         this.loading = true;
-        this.apipost("/api/Trade/GetBrandClassList", this.msg, (res) => {
+        this.apipost("/api/Trade/GetBrandClassTreeEdit", this.msg, (res) => {
           this.loading = false;
           if (res.data.resultCode == 1) {
             let pageData = res.data.data || [];
             pageData.forEach((item) => {
               item.checked = false;
+              if (item.subList && item.subList.length > 0) {
+                item.subList.forEach((child) => {
+                  child.checked = false;
                 });
-            this.tableData = pageData;
-            if (pageData.length > 0 && !this.activeIndex) {
-              this.getChild(pageData[0], 0);
-            }
               }
             });
-      },
-      getChildList() {
-        if (!this.currentParentId) {
+            this.tableData = pageData;
+            // 刷新后保持之前选中的分类
+            if (this.currentParentId) {
+              // 找到之前选中的一级分类
+              const selectedItem = pageData.find((item) => item.ID === this.currentParentId);
+              if (selectedItem) {
+                this.getChild(selectedItem, 0);
+              } else if (pageData.length > 0) {
+                // 之前选中的被删了，选中第一个
+                this.getChild(pageData[0], 0);
+              } else {
                 this.childTableData = [];
-          return;
+                this.activeIndex = 0;
               }
-        this.loading = true;
-        this.apipost(
-          "/api/Trade/GetBrandClassList", {
-            BrandCategory:this.msg.BrandCategory,
-            ParentId: this.currentParentId
-          },
-          (res) => {
-            this.loading = false;
-            if (res.data.resultCode == 1) {
-              let pageData = res.data.data || [];
-              pageData.forEach((item) => {
-                item.checked = false;
-              });
-              this.childTableData = pageData;
+            } else if (pageData.length > 0) {
+              // 首次加载默认选中第一大类
+              this.getChild(pageData[0], 0);
             }
           }
-        );
+        });
       },
       delNews(item) {
         let that = this;
@@ -314,7 +289,7 @@
             (res) => {
               if (res.data.resultCode == 1) {
                 that.Success(res.data.message);
-                that.getChildList();
+                that.getList();
               } else {
                 that.Error(res.data.message);
               }
@@ -349,11 +324,7 @@
             this.apipost("/api/Trade/GetSetBrandClass", this.addMsg, (res) => {
               if (res.data.resultCode == 1) {
                 this.dialogVisible = false;
-                if (this.addLevel === 1) {
                 this.getList();
-                } else {
-                  this.getChildList();
-                }
                 this.Success(res.data.message);
               } else {
                 this.Error(res.data.message);
@@ -370,50 +341,44 @@
 </script>
 
 <style>
-.brandClassification .head-title {
-  font-size: 16px;
-  color: #303133;
-  padding: 0 0 15px 0;
-  font-weight: 600;
-}
  
-.brandClassification .cat-container {
+  .brandClassification .cat-container {
     display: flex;
     gap: 16px;
     min-height: 400px;
-}
+  }
 
-.brandClassification .card-item-box {
+  .brandClassification .card-item-box {
     flex: 1;
     min-width: 0;
-}
+  }
 
-.brandClassification .card-header {
+  .brandClassification .card-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-}
+  }
 
-.brandClassification .header-title {
+  .brandClassification .header-title {
     font-size: 15px;
     font-weight: 600;
     color: #303133;
-}
+  }
 
-.brandClassification .header-count {
+  .brandClassification .header-count {
     font-size: 12px;
     color: #909399;
     background: #f4f4f5;
     padding: 2px 8px;
     border-radius: 10px;
-}
+  }
 
-.brandClassification .card-body {
+  .brandClassification .card-body {
     max-height: 500px;
     overflow-y: auto;
-}
+  }
 
-.brandClassification .list-item {
+  .brandClassification .list-item {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -421,28 +386,28 @@
     border-bottom: 1px solid #f0f2f5;
     transition: background-color 0.2s;
     cursor: pointer;
-}
+  }
 
-.brandClassification .list-item:hover {
+  .brandClassification .list-item:hover {
     background-color: #f5f7fa;
-}
+  }
 
-.brandClassification .list-item.active {
+  .brandClassification .list-item.active {
     background-color: #ecf5ff;
-}
+  }
 
-.brandClassification .list-item:last-child {
+  .brandClassification .list-item:last-child {
     border-bottom: none;
-}
+  }
 
-.brandClassification .item-left {
+  .brandClassification .item-left {
     display: flex;
     align-items: center;
     flex: 1;
     min-width: 0;
-}
+  }
 
-.brandClassification .item-logo {
+  .brandClassification .item-logo {
     width: 36px;
     height: 36px;
     border-radius: 6px;
@@ -451,74 +416,75 @@
     margin-right: 12px;
     flex-shrink: 0;
     border: 1px solid #ebeef5;
-}
+  }
 
-.brandClassification .item-logo.noIcon {
+  .brandClassification .item-logo.noIcon {
     background-image: url("../../assets/img/default.png");
     background-size: 100% 100%;
-}
+  }
 
-.brandClassification .item-info {
+  .brandClassification .item-info {
     display: flex;
     flex-direction: column;
     min-width: 0;
-}
+  }
 
-.brandClassification .item-name {
+  .brandClassification .item-name {
     font-size: 14px;
     color: #303133;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     max-width: 150px;
-}
+  }
 
-.brandClassification .item-id {
+  .brandClassification .item-id {
     font-size: 12px;
     color: #909399;
     margin-top: 2px;
-}
+  }
 
-.brandClassification .item-actions {
+  .brandClassification .item-actions {
     display: flex;
     gap: 8px;
     flex-shrink: 0;
-}
+  }
 
-.brandClassification .action-btn {
+  .brandClassification .action-btn {
     padding: 4px 8px;
     font-size: 13px;
     border-radius: 4px;
     transition: all 0.2s;
-}
+  }
 
-.brandClassification .action-btn.edit {
+  .brandClassification .action-btn.edit {
     color: #409eff;
-}
+  }
 
-.brandClassification .action-btn.edit:hover {
+  .brandClassification .action-btn.edit:hover {
     background-color: #ecf5ff;
-}
+  }
 
-.brandClassification .action-btn.delete {
+  .brandClassification .action-btn.delete {
     color: #f56c6c;
-}
+  }
 
-.brandClassification .action-btn.delete:hover {
+  .brandClassification .action-btn.delete:hover {
     background-color: #fef0f0;
-}
+  }
 
-.brandClassification .empty-state {
+  .brandClassification .empty-state {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 60px 0;
     color: #909399;
-}
+  }
 
-.brandClassification .empty-state p {
+  .brandClassification .empty-state p {
     margin-top: 12px;
     font-size: 14px;
-}
+  }
+
 </style>