11

src/components/tradePavilion/brandClassification.vue

 <template>
   <div class="brandClassification">
-    <template v-if="!isShowAdd">
     <div class="head-title">
-        品牌分类管理
-        <el-button
-          style="float: right; margin-top: -5px"
-          size="small"
-          type="primary"
-          @click="(isShowAdd = true), clearMsg()"
-        >
-          新增</el-button
-        >
+      <span>品牌分类管理</span>
+      <el-button style="float: right; margin-top: -5px" size="small" type="primary" @click="goAdd">
+        新增分类
+      </el-button>
     </div>
-      <div class="content">
-        <div>
-          <div class="searchInput" style="width: 250px">
-            <el-input
-              @keyup.enter.native="(msg.pageIndex = 1), getList()"
-              @clear="(msg.pageIndex = 1), getList()"
-              style="display: inline-block; width: 225px; height: 30px"
-              placeholder="请输入品牌分类名称"
-              v-model="msg.ClassName"
-              size="small"
-              clearable
-            >
-            </el-input>
-            <span
-              @click="(msg.pageIndex = 1), getList()"
-              class="el-icon-search"
-              style="
-                color: #979dad;
-                font-size: 14px;
-                position: relative;
-                top: 1px;
-              "
-            ></span>
+    <div style="margin-top: 10px; background: #fff; padding: 20px">
+      <div v-loading="loading" class="cat-container">
+        <el-card class="card-item-box" shadow="never">
+          <div slot="header" class="card-header">
+            <span class="header-title">一级分类</span>
+            <span class="header-count">{{ tableData.length }} 条</span>
+          </div>
+          <div class="card-body">
+            <div class="list-item" :class="{ active: activeIndex == item.ID }" @click="getChild(item, index)"
+              v-for="(item, index) in tableData" :key="index">
+              <div class="item-left">
+                <div v-if="!item.Logo" class="item-logo noIcon"></div>
+                <div v-else class="item-logo" :style="{ backgroundImage: 'url(' + item.Logo + ')' }"></div>
+                <div class="item-info">
+                  <el-tooltip class="item" effect="dark" :content="item.ClassName" placement="top">
+                    <span class="item-name">{{ item.ClassName }}</span>
+                  </el-tooltip>
+                  <span class="item-id">ID: {{ item.ID }}</span>
                 </div>
               </div>
-        <el-table
-          :data="tableData"
-          v-loading="loading"
-          border
-          style="width: 100%; margin: 20px 0"
-        >
-          <el-table-column prop="ID" label="编号" width="100">
-          </el-table-column>
-          <el-table-column prop="ClassName" label="品牌分类名称">
-          </el-table-column>
-          <el-table-column prop="Logo" width="150" label="封面图">
-            <template slot-scope="scope">
-              <div
-                class="app-image"
-                :style="{
-                  backgroundImage: 'url(' + scope.row.Logo + ')',
-                  backgroundSize: 'cover',
-                }"
-              ></div>
-            </template>
-          </el-table-column>
-          <el-table-column prop="CreateDate" width="200" label="创建时间">
-          </el-table-column>
+              <div class="item-actions">
+                <el-button @click.stop="editNews(item)" type="text" size="small" class="action-btn edit">编辑</el-button>
+                <el-button @click.stop="delNews(item)" type="text" size="small" class="action-btn delete">删除</el-button>
+              </div>
+            </div>
+            <div v-if="tableData.length == 0" class="empty-state">
+              <i class="el-icon-folder-opened" style="font-size: 48px; color: #c0c4cc"></i>
+              <p>暂无数据</p>
+            </div>
+          </div>
+        </el-card>
 
-          <el-table-column prop="address" width="200" label="操作">
-            <template slot-scope="scope">
-              <el-tooltip
-                class="item"
-                effect="dark"
-                content="编辑"
-                placement="top"
-              >
-                <img
-                  @click="editNews(scope.row)"
-                  style="width: 32px; height: 32px"
-                  src="../../assets/img/userman/edit.png"
-                  alt=""
-                />
-              </el-tooltip>
-              <el-tooltip
-                class="item"
-                effect="dark"
-                content="删除"
-                placement="top-start"
-              >
-                <img
-                  @click="delNews(scope.row)"
-                  style="width: 32px; height: 32px; margin: 0 10px"
-                  src="../../assets/img/userman/del.png"
-                  alt=""
-                />
+        <el-card class="card-item-box" shadow="never">
+          <div slot="header" class="card-header">
+            <span class="header-title">二级分类</span>
+            <span class="header-count">{{ childTableData.length }} 条</span>
+          </div>
+          <div class="card-body">
+            <div class="list-item" v-for="(item, index) in childTableData" :key="index">
+              <div class="item-left">
+                <div v-if="!item.Logo" class="item-logo noIcon"></div>
+                <div v-else class="item-logo" :style="{ backgroundImage: 'url(' + item.Logo + ')' }"></div>
+                <div class="item-info">
+                  <el-tooltip class="item" effect="dark" :content="item.ClassName" placement="top">
+                    <span class="item-name">{{ item.ClassName }}</span>
                   </el-tooltip>
-            </template>
-          </el-table-column>
-        </el-table>
-        <el-pagination
-          style="text-align: right"
-          background
-          @current-change="handleCurrentChange"
-          :page-size="msg.pageSize"
-          :current-page.sync="msg.pageIndex"
-          layout="total,prev, pager, next"
-          :total="total"
-        >
-        </el-pagination>
+                  <span class="item-id">ID: {{ item.ID }}</span>
                 </div>
-    </template>
-    <template v-else>
-      <div class="head-title">
-        <span
-          @click="isShowAdd = false"
-          style="color: rgb(64, 158, 255); cursor: pointer"
-          >品牌分类管理</span
-        ><span style="margin: 0 9px; color: #c0c4cc">/</span
-        ><span>品牌分类信息</span>
               </div>
-      <div class="content">
-        <el-form
-          label-width="120px"
-          :model="addMsg"
-          :rules="rules"
-          ref="addMsg"
-        >
-          <el-form-item
-            label="品牌分类名称"
-            class="is-required"
-            prop="ClassName"
-          >
-            <el-input
-              type="text"
-              class="w400"
-              v-model="addMsg.ClassName"
-              size="small"
-              placeholder="品牌分类名称"
-              maxlength="100"
-            >
-            </el-input>
-          </el-form-item>
-
-          <el-form-item
-            label="Logo"
-            size="small"
-            class="is-required"
-            prop="Logo"
-          >
-            <el-button @click="isShowImage = true" size="small"
-              >选择文件</el-button
-            >
-            <div
-              class="app-gallery-item"
-              style="
-                position: relative;
-                width: 100px;
-                margin-top: 10px;
-                border: none;
-              "
-            >
-              <img
-                v-if="!addMsg.Logo || addMsg.Logo == ''"
-                src="../../assets/img/default.png"
-                style="width: 80px; height: 80px"
-                alt=""
-              />
-              <img
-                v-else
-                style="width: 80px; height: 80px"
-                :src="addMsg.Logo"
-                alt=""
-              />
+              <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>
               </div>
-          </el-form-item>
-        </el-form>
             </div>
-      <el-button
-        size="small"
-        style="margin-top: 20px; padding: 9px 25px"
-        type="primary"
-        @click="submitform('addMsg')"
-        >保存
-      </el-button>
-    </template>
+            <div v-if="childTableData.length == 0" class="empty-state">
+              <i class="el-icon-folder-opened" style="font-size: 48px; color: #c0c4cc"></i>
+              <p>请先选择一级分类</p>
+            </div>
+          </div>
+        </el-card>
+      </div>
+    </div>
+
     <!-- 选择文件 -->
     <el-dialog title="选择文件" :visible.sync="isShowImage" width="1240px">
       <ChooseImg @SelectId="SelectId"></ChooseImg>
     </el-dialog>
+
+    <!-- 新增/编辑弹窗 -->
+    <el-dialog :title="addMsg.ID > 0 ? '编辑品牌分类' : '新增品牌分类'" :visible.sync="dialogVisible" width="500px">
+      <el-form label-width="100px" :model="addMsg" :rules="rules" ref="addMsgForm">
+        <el-form-item label="分类级别" label-width="100px" class="is-required">
+          <el-radio-group v-model="addLevel" @change="onLevelChange">
+            <el-radio :label="1">一级分类</el-radio>
+            <el-radio :label="2">二级分类</el-radio>
+          </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-option v-for="item in tableData" :key="item.ID" :label="item.ClassName" :value="item.ID"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="分类名称" class="is-required" prop="ClassName">
+          <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">
+          <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"
+              style="width: 80px; height: 80px" alt="" />
+            <img v-else style="width: 80px; height: 80px" :src="addMsg.Logo" alt="" />
+          </div>
+        </el-form-item>
+        <el-form-item label="排序">
+          <el-input-number v-model="addMsg.SortNum" :min="0" :max="9999" size="small"></el-input-number>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false" size="small">取消</el-button>
+        <el-button type="primary" @click="submitform('addMsgForm')" size="small">保存</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
+
 <script>
-import ChooseImg from "@/components/global/ChooseImg.vue";
-import UE from "@/components/global/UE.vue";
-export default {
+  import ChooseImg from "@/components/global/ChooseImg.vue";
+  import draggable from "vuedraggable";
+  export default {
+    name: "brandClassification",
     components: {
       ChooseImg,
-    UE,
+      draggable,
     },
     data() {
       return {
-      defaultMsg: "",
-      config: {
-        initialFrameWidth: null,
-        initialFrameHeight: 350,
-      },
+        val: "",
+        dragState: false,
+        checkAll1: false,
+        checkAll2: false,
+        loading: false,
         msg: {
-        pageIndex: 1,
-        pageSize: 10,
           ClassName: "",
+          BrandCategory: 3,
+          ParentId: 0,
         },
         total: 0,
-      tableData: [], //数据列表
-      isShowImage: false, //是否显示选择图片弹窗
-      isShowAdd: false, //是否显示新增
+        tableData: [],
+        childTableData: [],
+        activeIndex: 0,
+        currentParentId: null,
+        currentParentName: "",
+        addLevel: 1,
+        isShowImage: false,
+        dialogVisible: false,
         addMsg: {
-        ID: 0, //主键编号
-        Logo: "", //封面图
-        ClassName: "", //品牌分类标题
+          ID: 0,
+          Logo: "",
+          ClassName: "",
+          ParentId: 0,
+          BrandCategory: 3,
+          SortNum:0,
         },
         rules: {
-        ClassName: [
-          {
+          ClassName: [{
             required: true,
             message: "请输入品牌分类名称",
             trigger: "blur",
-          },
-        ],
-        Logo: [
-          {
+          }, ],
+          Logo: [{
             required: true,
-            message: "请输入品牌Logo",
+            message: "请选择Logo",
             trigger: "blur",
-          },
-        ],
+          }, ],
+          ParentId: [{
+            required: true,
+            message: "请选择上级分类",
+            trigger: "change",
+          }, ],
         },
       };
     },
@@ -235,40 +173,103 @@ export default {
       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 = "";
+        this.addMsg.ClassName = "";
+        this.addMsg.ParentId = 0;
+        this.addMsg.SortNum = 0;
+        this.addLevel = 1;
+        this.dialogVisible = true;
+      },
+      onLevelChange(val) {
+        if (val === 1) {
+          this.addMsg.ParentId = 0;
+        } else {
+          if (this.tableData.length > 0) {
+            this.addMsg.ParentId = this.tableData[0].ID;
+          }
+        }
+      },
+      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;
         this.isShowImage = false;
       },
-    clearMsg() {
-      this.addMsg.ID = 0;
-      this.addMsg.Logo = "";
-      this.addMsg.ClassName = "";
+      getChild(item, index) {
+        this.activeIndex = item.ID;
+        this.currentParentId = item.ID;
+        this.currentParentName = item.ClassName;
+        this.getChildList();
       },
       getList() {
         this.loading = true;
-      this.apipost("/api/Trade/GetBrandClassPageList", this.msg, (res) => {
+        this.apipost("/api/Trade/GetBrandClassList", this.msg, (res) => {
           this.loading = false;
           if (res.data.resultCode == 1) {
-          this.total = res.data.data.count;
-          let pageData = res.data.data.pageData;
+            let pageData = res.data.data || [];
+            pageData.forEach((item) => {
+              item.checked = false;
+            });
             this.tableData = pageData;
+            if (pageData.length > 0 && !this.activeIndex) {
+              this.getChild(pageData[0], 0);
+            }
           }
         });
       },
-    handleCurrentChange(val) {
-      this.msg.pageIndex = val;
-      this.getList();
+      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 () {
+        that.Confirm("删除一级分类会对应删除相应的二级分类,是否继续?", function () {
           that.apipost(
-          "/api/Trade/RemoveBrandClass",
-          {
+            "/api/Trade/RemoveBrandClass", {
               Id: item.ID,
-            Status: 1,
+              Status: 1
             },
             (res) => {
               if (res.data.resultCode == 1) {
@@ -281,34 +282,78 @@ export default {
           );
         });
       },
-    //修改品牌分类
       editNews(item) {
         this.apipost(
-        "/api/Trade/GetBrandClassDetails",
-        {
-          ID: item.ID,
+          "/api/Trade/GetBrandClassDetails", {
+            ID: item.ID
           },
           (res) => {
             if (res.data.resultCode == 1) {
-            this.isShowAdd = true;
+              this.dialogVisible = true;
+              this.addLevel = 1;
               var tempData = res.data.data;
               this.addMsg.ID = tempData.ID;
               this.addMsg.Logo = tempData.Logo;
               this.addMsg.ClassName = tempData.ClassName;
+              this.addMsg.ParentId = tempData.ParentId || 0;
+              this.addMsg.SortNum = tempData.SortNum || 0;
             } else {
               this.Error(res.data.message);
             }
           }
         );
-    }, //新增修改
+      },
+      delChildNews(item) {
+        let that = this;
+        that.Confirm("是否删除?", function () {
+          that.apipost(
+            "/api/Trade/RemoveBrandClass", {
+              Id: item.ID,
+              Status: 1
+            },
+            (res) => {
+              if (res.data.resultCode == 1) {
+                that.Success(res.data.message);
+                that.getChildList();
+              } else {
+                that.Error(res.data.message);
+              }
+            }
+          );
+        });
+      },
+      editChildNews(item) {
+        this.apipost(
+          "/api/Trade/GetBrandClassDetails", {
+            ID: item.ID
+          },
+          (res) => {
+            if (res.data.resultCode == 1) {
+              this.dialogVisible = true;
+              this.addLevel = 2;
+              var tempData = res.data.data;
+              this.addMsg.ID = tempData.ID;
+              this.addMsg.Logo = tempData.Logo;
+              this.addMsg.ClassName = tempData.ClassName;
+              this.addMsg.ParentId = tempData.ParentId || 0;
+              this.addMsg.SortNum = tempData.SortNum || 0;
+            } else {
+              this.Error(res.data.message);
+            }
+          }
+        );
+      },
       submitform(formName) {
         this.$refs[formName].validate((valid) => {
           if (valid) {
             this.apipost("/api/Trade/GetSetBrandClass", this.addMsg, (res) => {
               if (res.data.resultCode == 1) {
-              this.isShowAdd = false;
+                this.dialogVisible = false;
+                if (this.addLevel === 1) {
                   this.getList();
-              this.clearMsg();
+                } else {
+                  this.getChildList();
+                }
                 this.Success(res.data.message);
               } else {
                 this.Error(res.data.message);
@@ -320,60 +365,160 @@ export default {
         });
       },
     },
-  mounted() {},
-};
+  };
+
 </script>
+
 <style>
-.brandClassification .remark_name {
-  color: #888888;
+.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 .card-item-box {
+  flex: 1;
+  min-width: 0;
+}
+
+.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-count {
   font-size: 12px;
-  margin-left: 10px;
-  float: right;
+  color: #909399;
+  background: #f4f4f5;
+  padding: 2px 8px;
+  border-radius: 10px;
 }
 
-.brandClassification .app-image {
-  background-position: center center;
-  width: 50px;
-  height: 50px;
-  border-radius: 0%;
-  float: left;
-  margin-right: 8px;
+.brandClassification .card-body {
+  max-height: 500px;
+  overflow-y: auto;
 }
 
-.brandClassification .blue {
-  color: #409eff;
+.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.active {
+  background-color: #ecf5ff;
+}
+
+.brandClassification .list-item:last-child {
+  border-bottom: none;
+}
+
+.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 .content .searchInput {
-  border: 1px solid #dcdfe6;
+.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-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-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 .content .searchInput .el-input__inner {
-  border: none;
-  outline: none;
-  height: 30px;
-  line-height: 30px;
+.brandClassification .action-btn.edit {
+  color: #409eff;
 }
 
-.brandClassification .content .searchInput {
-  line-height: normal;
-  display: inline-table;
-  width: 100%;
-  border-collapse: separate;
-  border-spacing: 0;
-  width: 250px;
-  margin-right: 20px;
+.brandClassification .action-btn.edit:hover {
+  background-color: #ecf5ff;
 }
 
-.brandClassification .content {
-  background: #fff;
-  margin-top: 10px;
-  padding: 20px;
-  box-sizing: border-box;
+.brandClassification .action-btn.delete {
+  color: #f56c6c;
 }
 
-.brandClassification .el-form-item__content {
-  line-height: 0;
+.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 p {
+  margin-top: 12px;
+  font-size: 14px;
 }
 </style>
\ No newline at end of file