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">
-        新增分类
-      </el-button>
+      品牌分类管理
+      <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">
@@ -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,47 +200,44 @@
         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) {
+            // 刷新后保持之前选中的分类
+            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 = [];
+                this.activeIndex = 0;
+              }
+            } else if (pageData.length > 0) {
+              // 首次加载默认选中第一大类
               this.getChild(pageData[0], 0);
             }
           }
         });
       },
-      getChildList() {
-        if (!this.currentParentId) {
-          this.childTableData = [];
-          return;
-        }
-        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;
-            }
-          }
-        );
-      },
       delNews(item) {
         let that = this;
         that.Confirm("删除一级分类会对应删除相应的二级分类,是否继续?", function () {
@@ -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.getList();
                 this.Success(res.data.message);
               } else {
                 this.Error(res.data.message);
@@ -370,155 +341,150 @@
 </script>
 
 <style>
-.brandClassification .head-title {
-  font-size: 16px;
-  color: #303133;
-  padding: 0 0 15px 0;
-  font-weight: 600;
-}
+ 
+  .brandClassification .cat-container {
+    display: flex;
+    gap: 16px;
+    min-height: 400px;
+  }
 
-.brandClassification .cat-container {
-  display: flex;
-  gap: 16px;
-  min-height: 400px;
-}
+  .brandClassification .card-item-box {
+    flex: 1;
+    min-width: 0;
+  }
 
-.brandClassification .card-item-box {
-  flex: 1;
-  min-width: 0;
-}
+  .brandClassification .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
 
-.brandClassification .card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
+  .brandClassification .header-title {
+    font-size: 15px;
+    font-weight: 600;
+    color: #303133;
+  }
 
-.brandClassification .header-title {
-  font-size: 15px;
-  font-weight: 600;
-  color: #303133;
-}
+  .brandClassification .header-count {
+    font-size: 12px;
+    color: #909399;
+    background: #f4f4f5;
+    padding: 2px 8px;
+    border-radius: 10px;
+  }
 
-.brandClassification .header-count {
-  font-size: 12px;
-  color: #909399;
-  background: #f4f4f5;
-  padding: 2px 8px;
-  border-radius: 10px;
-}
+  .brandClassification .card-body {
+    max-height: 500px;
+    overflow-y: auto;
+  }
 
-.brandClassification .card-body {
-  max-height: 500px;
-  overflow-y: auto;
-}
+  .brandClassification .list-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 8px;
+    border-bottom: 1px solid #f0f2f5;
+    transition: background-color 0.2s;
+    cursor: pointer;
+  }
 
-.brandClassification .list-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 8px;
-  border-bottom: 1px solid #f0f2f5;
-  transition: background-color 0.2s;
-  cursor: pointer;
-}
+  .brandClassification .list-item:hover {
+    background-color: #f5f7fa;
+  }
 
-.brandClassification .list-item:hover {
-  background-color: #f5f7fa;
-}
+  .brandClassification .list-item.active {
+    background-color: #ecf5ff;
+  }
 
-.brandClassification .list-item.active {
-  background-color: #ecf5ff;
-}
+  .brandClassification .list-item:last-child {
+    border-bottom: none;
+  }
 
-.brandClassification .list-item:last-child {
-  border-bottom: none;
-}
+  .brandClassification .item-left {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    min-width: 0;
+  }
 
-.brandClassification .item-left {
-  display: flex;
-  align-items: center;
-  flex: 1;
-  min-width: 0;
-}
+  .brandClassification .item-logo {
+    width: 36px;
+    height: 36px;
+    border-radius: 6px;
+    background-size: cover;
+    background-position: center;
+    margin-right: 12px;
+    flex-shrink: 0;
+    border: 1px solid #ebeef5;
+  }
 
-.brandClassification .item-logo {
-  width: 36px;
-  height: 36px;
-  border-radius: 6px;
-  background-size: cover;
-  background-position: center;
-  margin-right: 12px;
-  flex-shrink: 0;
-  border: 1px solid #ebeef5;
-}
+  .brandClassification .item-logo.noIcon {
+    background-image: url("../../assets/img/default.png");
+    background-size: 100% 100%;
+  }
 
-.brandClassification .item-logo.noIcon {
-  background-image: url("../../assets/img/default.png");
-  background-size: 100% 100%;
-}
+  .brandClassification .item-info {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
 
-.brandClassification .item-info {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-}
+  .brandClassification .item-name {
+    font-size: 14px;
+    color: #303133;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 150px;
+  }
 
-.brandClassification .item-name {
-  font-size: 14px;
-  color: #303133;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 150px;
-}
+  .brandClassification .item-id {
+    font-size: 12px;
+    color: #909399;
+    margin-top: 2px;
+  }
 
-.brandClassification .item-id {
-  font-size: 12px;
-  color: #909399;
-  margin-top: 2px;
-}
+  .brandClassification .item-actions {
+    display: flex;
+    gap: 8px;
+    flex-shrink: 0;
+  }
 
-.brandClassification .item-actions {
-  display: flex;
-  gap: 8px;
-  flex-shrink: 0;
-}
+  .brandClassification .action-btn {
+    padding: 4px 8px;
+    font-size: 13px;
+    border-radius: 4px;
+    transition: all 0.2s;
+  }
 
-.brandClassification .action-btn {
-  padding: 4px 8px;
-  font-size: 13px;
-  border-radius: 4px;
-  transition: all 0.2s;
-}
+  .brandClassification .action-btn.edit {
+    color: #409eff;
+  }
 
-.brandClassification .action-btn.edit {
-  color: #409eff;
-}
+  .brandClassification .action-btn.edit:hover {
+    background-color: #ecf5ff;
+  }
 
-.brandClassification .action-btn.edit:hover {
-  background-color: #ecf5ff;
-}
+  .brandClassification .action-btn.delete {
+    color: #f56c6c;
+  }
 
-.brandClassification .action-btn.delete {
-  color: #f56c6c;
-}
+  .brandClassification .action-btn.delete:hover {
+    background-color: #fef0f0;
+  }
 
-.brandClassification .action-btn.delete:hover {
-  background-color: #fef0f0;
-}
+  .brandClassification .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 60px 0;
+    color: #909399;
+  }
 
-.brandClassification .empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 60px 0;
-  color: #909399;
-}
+  .brandClassification .empty-state p {
+    margin-top: 12px;
+    font-size: 14px;
+  }
 
-.brandClassification .empty-state p {
-  margin-top: 12px;
-  font-size: 14px;
-}
-</style>
\ No newline at end of file
+</style>