boom-light-ui/src/views/bst/location/components/LocationTree.vue

<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="id"
      default-expand-all
      :filter-node-method="filterNode"
      ref="tree"
      @node-click="handleNodeClick"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>

        <!-- 店铺节点：显示新增按钮 -->
        <span class="operation-group" v-if="data.type === 'store'">
          <el-button type="text" size="mini" icon="el-icon-plus" @click.stop="handleAdd(data)"></el-button>
        </span>

        <!-- 位置节点：显示修改和删除按钮 -->
        <span class="operation-group" v-if="data.type === 'location'">
          <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>

    <!-- 新增/编辑对话框 -->
    <el-dialog :title="form.id ? '编辑位置' : '新增位置'" :visible.sync="dialogVisible" width="400px">
      <el-form :model="form" label-width="80px" ref="formRef">
        <el-form-item label="所属店铺" prop="storeId">
          <div class="category-wrapper">
            <el-select
              v-model="form.storeId"
              placeholder="请选择店铺"
              clearable
            >
              <el-option
                v-for="item in stores"
                :key="item.storeId"
                :label="item.storeName"
                :value="item.storeId"
              />
            </el-select>
          </div>
        </el-form-item>
        <el-form-item label="位置名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入位置名称"/>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {listStore} from "@/api/bst/store";
import {listLocation, addLocation, updateLocation, delLocation} from "@/api/bst/location";

export default {
  name: "LocationTree",
  props: {
    storeId: {
      type: [String, Number],
      default: null
    }
  },
  data() {
    return {
      stores :[], // 店铺选项
      loading: false,
      searchValue: "",
      treeData: [],
      defaultProps: {
        children: "children",
        label: "name"
      },
      dialogVisible: false,
      form: {
        id: null,
        storeId: null,
        storeName: "",
        name: ""
      }
    };
  },
  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 storeRes = await listStore();
        this.stores = storeRes.rows;

        // 获取位置列表，如果传递了storeId，则根据storeId查询，否则查询所有
        const params = { storeId: this.storeId };
        const locationRes = await listLocation(params);
        const locations = locationRes.rows;

        // 构建树结构：店铺 -> 位置
        this.treeData = this.stores.map(store => ({
          id: store.storeId,
          name: store.storeName,
          storeId: store.storeId,
          type: "store",
          children: locations
            .filter(location => location.storeId === store.storeId)
            .map(location => ({
              id: location.id,
              name: location.name,
              storeId: location.storeId,
              storeName: store.storeName,
              locationId: location.id,
              type: "location"
            }))
        }));

        console.log("this.treeData:", this.treeData);

      } catch (error) {
        console.error("获取数据失败:", error);
      } finally {
        this.loading = false;
      }
    },

    handleNodeClick(data) {
      this.$emit('node-click', data);
    },

    // 新增按钮点击
    handleAdd(data) {
      this.form = {
        storeId: data.storeId,
        name: ""
      };
      this.dialogVisible = true;
    },
    // 编辑按钮点击
    handleEdit(data) {
      console.log("data:", data);
      this.form = {
        id: data.locationId || data.id,
        storeId: data.storeId,
        name: data.name
      };
      this.dialogVisible = true;
    },

    // 删除按钮点击
    handleDelete(data) {
      this.$confirm(`是否确认删除【${data.name}】？`, "提示", {
        type: "warning"
      }).then(async () => {
        await delLocation(data.locationId);
        this.$message.success("删除成功");
        this.getList(); // 刷新列表
      }).catch(() => {
      });
    },

    // 提交表单
    submitForm() {
      if (!this.form.name.trim()) {
        this.$message.warning("请输入位置名称");
        return;
      }

      const api = this.form.id ? updateLocation : addLocation;
      const params = {
        id: this.form.id || undefined,
        storeId: this.form.storeId,
        name: this.form.name
      };

      api(params)
        .then(() => {
          this.$message.success(this.form.id ? "更新成功" : "新增成功");
          this.dialogVisible = false;
          this.getList(); // 刷新列表
        })
        .catch(err => {
          this.$message.error("操作失败：" + err.message);
        });
    }
  },
  watch: {
    storeId: {
      handler() {
        this.getList();
      }
    }
  }
};
</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 {
    margin-left: 8px;

    &:first-child {
      margin-left: 0;
    }

    &[class*="el-icon-delete"] {
      color: #f56c6c;
    }
  }
}
</style>