分区前端页面修改

src/views/bst/part/components/PartTree.vue

@@ -0,0 +1,180 @@
+<template>
+  <div v-loading="loading">
+    <div style="margin-bottom: 10px;">
+      <el-input v-model="searchValue" placeholder="请输入分类名称" @input="handleSearch" size="small" />
+    </div>
+    <el-tree
+      :data="treeData"
+      :props="defaultProps"
+      node-key="partId"
+      default-expand-all
+      :filter-node-method="filterNode"
+      v-on="$listeners"
+      ref="tree"
+    >
+      <span class="custom-tree-node" slot-scope="{ node, data }">
+        <span>{{ node.label }}</span>
+        <span class="operation-group">
+          <el-button type="text" size="mini" icon="el-icon-plus" @click.stop="handleAdd(data)"></el-button>
+          <el-button type="text" size="mini" icon="el-icon-edit" @click.stop="handleEdit(data)"></el-button>
+          <el-button type="text" size="mini" icon="el-icon-delete" @click.stop="handleDelete(data)"></el-button>
+        </span>
+      </span>
+    </el-tree>
+
+
+  </div>
+</template>
+
+<script>
+import { listPart ,delPart } from "@/api/bst/part";
+import {delStore, listStore} from "@/api/bst/store";
+
+export default {
+  name: 'PartTree',
+  components: {
+  },
+  data() {
+    return {
+      classifyList: [],
+      loading: false,
+      treeData: [],
+      defaultProps: {
+        children: 'children',
+        label: 'name'
+      },
+      // 弹窗相关
+      dialogVisible: false,
+      row: {},
+      parentId: null,
+      searchValue: null,
+    }
+  },
+  mounted() {
+    this.getList()
+  },
+  methods: {
+    handleSearch() {
+      this.$refs.tree.filter(this.searchValue)
+    },
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) {
+        return true;
+      }
+      return data.name.indexOf(value) !== -1;
+    },
+    // 获取数据列表
+    async getList() {
+      this.loading = true;
+      try {
+        // 同时获取店铺和区域数据
+        const [stores, parts] = await Promise.all([
+          listStore(),
+          listPart()
+        ]);
+
+        // 构建复合树结构
+        this.treeData = stores.rows.map(store => ({
+          id: `store_${store.storeId}`,
+          name: store.storeName,
+          type: 'store',
+          children: this.buildStoreTree(parts.data, store.storeId)
+        })).filter(store => store.children.length > 0);
+
+      } finally {
+        this.loading = false;
+      }
+    },
+    buildStoreTree(parts, storeId) {
+      const storeParts = parts.filter(p => p.storeId === storeId);
+      return this.handleTree(
+        storeParts.map(p => ({
+          ...p,
+          id: `part_${p.partId}`,
+          name: p.partName,
+          type: 'part',
+          parentId: p.parentId ? `part_${p.parentId}` : `store_${storeId}`
+        })),
+        'id',
+        'parentId',
+        'children'
+      );
+    },
+    // 新增按钮操作
+    handleAdd(row) {
+      this.row = {};
+      this.parentId = row ? row.id : '0';
+      this.dialogVisible = true
+    },
+    // 修改按钮操作
+    handleEdit(row) {
+      this.row = row;
+      this.parentId = row.parentId;
+      this.dialogVisible = true
+    },
+    // 删除按钮操作
+    handleDelete(row) {
+      if (row.type === 'store') {
+        if (row.children?.length > 0) {
+          this.$modal.msgError('店铺下存在区域，不能删除');
+          return;
+        }
+      } else {
+        if (row.children?.length > 0) {
+          this.$modal.msgError('存在子区域不能删除');
+          return;
+        }
+      }
+      const confirmMsg = row.type === 'store'
+        ? `是否确认删除店铺【${row.name}】`
+        : `是否确认删除区域【${row.name}】`;
+
+      this.$modal.confirm(confirmMsg).then(() => {
+        const api = row.type === 'store'
+          ? delStore(row.id.replace('store_', ''))
+          : delPart(row.id.replace('part_', ''));
+
+        return api.then(() => {
+          this.getList();
+          this.$modal.msgSuccess('删除成功');
+        });
+      }).catch(() => {});
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 8px;
+
+  .operation-group {
+    .el-button {
+      opacity: 0;
+      margin-left: 8px;
+
+      &:first-child {
+        margin-left: 0;
+      }
+
+      &[class*="el-icon-delete"] {
+        color: #f56c6c;
+      }
+    }
+  }
+
+  &:hover {
+    .operation-group {
+      .el-button {
+        opacity: 1;
+      }
+    }
+  }
+}
+</style>

src/views/bst/part/index.vue

@@ -1,26 +1,16 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="所属店铺" prop="storeName">
+    <el-row :gutter="40">
+      <el-col :lg="4" :md="8" :xs="24" style="border-right: 1px solid #ebeef5;">
+        <part-tree @node-click="handlePartNodeClick"/>
+      </el-col>
+      <el-col :lg="20" :md="16" :xs="24">
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
+                 label-width="68px">
+          <el-form-item label="店铺名称" prop="storeName">
             <el-input
               v-model="queryParams.storeName"
-          placeholder="请输入所属店铺名称"
-          clearable
-          @input="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="所属区域" prop="parentName">
-        <el-input
-          v-model="queryParams.parentName"
-          placeholder="请输入所属区域名称(楼层)"
-          clearable
-          @input="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="区域名称" prop="partName">
-        <el-input
-          v-model="queryParams.partName"
-          placeholder="请输入区域名称"
+              placeholder="请输入店铺名称"
               clearable
               @input="handleQuery"
             />
@@ -69,36 +59,38 @@
           <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
         </el-row>
 
-    <el-table v-loading="loading" :data="partList" @selection-change="handleSelectionChange" :default-sort="defaultSort"
-              @sort-change="onSortChange">
-      <el-table-column type="selection" width="55" align="center"/>
-      <el-table-column label="ID" align="center" prop="partId" width="80"/>
-      <el-table-column label="所属店铺" align="center">
-        <template slot-scope="scope">
-          <i class="el-icon-takeaway-box"/>
-          <store-link
-            :id="scope.row.storeId"
-            :name="scope.row.storeName || '--'"
-            size="mini"
-          />
-        </template>
-      </el-table-column>
-      <el-table-column label="区域名称" prop="partName" align="center" min-width="50">
-        <template slot-scope="{row}">
-            <span
-              v-if="row.parentName"
+        <el-table
+          v-if="refreshTable"
+          v-loading="loading"
+          :data="parentOptions"
+          row-key="id"
+          :default-expand-all="isExpandAll"
+          :tree-props="{children: 'children'}"
         >
-        {{ row.parentName }}/
+          <el-table-column label="区域名称" prop="partName" align="left">
+            <template slot-scope="{row}">
+    <span v-if="row.isStore">
+      <i class="el-icon-shop"/>
+      <store-link :id="row.storeId" :name="row.storeName"/>
     </span>
+              <span v-else>
       {{ row.partName }}
+    </span>
             </template>
           </el-table-column>
-      <el-table-column label="图片" align="center" prop="picture">
-        <image-preview slot-scope="d" :src="d.row.picture" :width="32" :height="32"/>
+          <el-table-column label="图片" align="center">
+            <template slot-scope="{row}">
+              <image-preview v-if="!row.isStore" :src="row.picture" :width="32" :height="32"/>
+            </template>
+          </el-table-column>
+          <el-table-column label="显示顺序" align="center" width="100">
+            <template slot-scope="{row}">
+              <span v-if="!row.isStore">{{ row.orderNum }}</span>
+            </template>
           </el-table-column>
-      <el-table-column label="显示顺序" align="center" prop="orderNum" width="60"/>
           <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
             <template slot-scope="scope">
+              <template v-if="!scope.row.isStore">
                 <el-button
                   size="mini"
                   type="text"
@@ -116,16 +108,12 @@
                 >删除
                 </el-button>
               </template>
+            </template>
           </el-table-column>
         </el-table>
+      </el-col>
+    </el-row>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
 
     <!-- 添加或修改区域列表对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false">
@@ -183,6 +171,7 @@ import FormCol from "@/components/FormCol/index.vue";
 import {listStore} from "@/api/bst/store";
 import DeptSelect from "@/components/Business/Dept/DeptSelect.vue";
 import StoreLink from "@/views/bst/store/StoreLink.vue";
+import PartTree from "@/views/bst/part/components/PartTree.vue";
 
 // 默认排序字段
 const defaultSort = {
@@ -193,9 +182,12 @@ const defaultSort = {
 export default {
   name: "Part",
   mixins: [$showColumns],
-  components: {StoreLink, DeptSelect, FormCol},
+  components: {PartTree, StoreLink, DeptSelect, FormCol},
   data() {
     return {
+      // 是否展开，默认全部展开
+      isExpandAll: true,
+      refreshTable: true,
       storeOptions: [], // 店铺域树数据
       parentOptions: [], // 父区域树数据
       cascaderProps: {
@@ -229,8 +221,6 @@ export default {
       defaultSort,
       // 查询参数
       queryParams: {
-        pageNum: 1,
-        pageSize: 20,
         orderByColumn: defaultSort.prop,
         isAsc: defaultSort.order,
         storeId: null,
@@ -262,6 +252,11 @@ export default {
     this.getStoreList();
   },
   methods: {
+    // 分类树节点点击事件
+    handlePartNodeClick(node) {
+      this.queryParams.partId = node.id;
+      this.getList();
+    },
     loadParentTree(storeId) {
       listPart({
         storeId: storeId,
@@ -302,17 +297,52 @@ export default {
       });
     },
     /** 查询区域列表列表 */
-    getList() {
+    async getList() {
       this.loading = true;
-      listPart(this.queryParams).then(response => {
-        this.partList = response.data.rows || response.data;
+      try {
+        // 获取所有店铺
+        const stores = await listStore();
+        // 获取所有区域
+        const parts = await listPart(this.queryParams);
+
+        // 构建混合树形结构
+        this.parentOptions = stores.rows.map(store => ({
+          id: `store_${store.storeId}`, // 添加唯一标识前缀
+          storeId: store.storeId,
+          storeName: store.storeName,
+          partName: store.storeName, // 统一使用partName字段显示名称
+          isStore: true, // 标记为店铺节点
+          children: this.buildStoreTree(parts.data, store.storeId)
+        })).filter(storeNode => storeNode.children.length > 0);
+
+        console.log('完整树形结构:', this.parentOptions);
+      } catch (e) {
+        console.error(e);
+      } finally {
         this.loading = false;
-      });
+      }
     },
+    buildStoreTree(parts, storeId) {
+      const storeParts = parts.filter(p => p.storeId === storeId);
+      return this.handleTree(storeParts.map(p => ({
+        ...p,
+        id: `part_${p.partId}`,  // 区域复合主键
+        parentId: p.parentId ? `part_${p.parentId}` : `store_${storeId}`
+      })), 'id', 'parentId', 'children');
+    },
+    // getList() {
+    //   this.loading = true;
+    //   listPart(this.queryParams).then(response => {
+    //     this.parentOptions = this.handleTree(response.data, "partId", "parentId", "children");
+    //     console.log("树形数据：", this.parentOptions); // 调试用
+    //     this.loading = false;
+    //   });
+    // },
     // 取消按钮
     cancel() {
       this.open = false;
       this.reset();
+      this.getList();
     },
     // 表单重置
     reset() {
@@ -329,7 +359,6 @@ export default {
     },
     /** 搜索按钮操作 */
     handleQuery() {
-      this.queryParams.pageNum = 1;
       this.getList();
     },
     /** 重置按钮操作 */