hotel-saas-tenant-frontend/src/views/settings/components/roomModules/roomNumSettings/roomNumList.vue

<template>
  <div>
    <div class="page-wrapper">
      <div class="left-wrapper-1">
        <div>
          <a-input style="width: 140px; margin-right: 10px" v-model="newBuildingName" placeholder="请填写楼栋名称"></a-input>
          <a-button :disabled="saveBtnLoading" :loading="saveBtnLoading" @click="saveNewBuilding"
            type="primary">新增楼栋</a-button>
        </div>
        <div class="building-tree">
          <div v-if="buildingTree && buildingTree.length > 0">
            <a-tree class="draggable-tree" :tree-data="buildingTree" :default-expand-all="true" blockNode
              style="width: 100%" :replaceFields="{
                children: 'children',
                title: 'name',
                key: 'id',
              }">
              <div slot="title" slot-scope="item"
                style="display: flex;align-items: center;height: 100%;overflow: hidden;">
                <a-button style="font-size: 12px" type="link" @click="filterSearch(item)">{{ item.name }}</a-button>
                <div style="flex: 1; height: 1px"></div>
                <a-button style="font-size: 12px; padding: 0 5px" type="link" v-if="item.parentId == 0"
                  @click="onAddFlowerClick(item)">添加楼层</a-button>
                <a-button style="font-size: 12px; padding: 0 5px" type="link" @click="onTreeEditClick(item)">编辑</a-button>

                <a-popconfirm placement="topLeft" ok-text="是的" cancel-text="取消" @confirm="onTreeDeleteClick(item)">
                  <template slot="title">
                    确定删除吗?
                  </template>
                  <a-button style="font-size: 12px; padding: 0 5px" type="link">删除</a-button>
                </a-popconfirm>


              </div>
            </a-tree>
          </div>
          <div v-else class="empty-data"></div>
        </div>
      </div>
      <div class="right-wrapper">
        <room-num-table ref="numtable"></room-num-table>
      </div>
    </div>
    <!-- 添加楼层 -->
    <a-modal width="300px" title="楼栋楼层编辑" :visible.sync="fVisible" :confirm-loading="fSaveLoading" @ok="saveFlow"
      @cancel="fVisible = false">
      <a-input style="width: 240px; margin-right: 10px" v-model="flowData.name" placeholder="请填写楼层/楼栋名称"></a-input>
    </a-modal>
  </div>
</template>


<script>
import { save, buildingTree, modify, remove } from "@/api/roomBuildingApi";
import roomNumTable from './roomNumTable.vue'
export default {
  components: {
    roomNumTable
  },
  data() {
    return {
      currentFilterId: null,
      flowData: {
        id: null,
        hotelId: null,
        name: "",
        parentId: null,
        type: 2,
      },
      currentBuildingId: null,
      fVisible: false,
      fSaveLoading: false,
      currentHotel: JSON.parse(localStorage.getItem("storeInfo")),
      newBuildingName: "",
      saveBtnLoading: false,
      model: {
        dis: 1,
      },
      buildingTree: [],
    };
  },
  mounted() {
    this.loadBuildingTreeData();
  },
  methods: {
    // 点击 触发搜索
    filterSearch(item) {
      this.currentFilterId = item.id
      this.$refs.numtable.ipagination.current = 1
      this.$refs.numtable.searchParam(item.id, item.name, item.parentId == "0")
    },
    // 获取楼栋树
    loadBuildingTreeData() {
      buildingTree().then((res) => {
        this.buildingTree = res.result;
      });
    },
    // 点击楼栋添加楼层事件
    onAddFlowerClick(building) {

      this.currentBuildingId = building.id;
      this.flowData.parentId = building.id;
      this.flowData.name = '';
      this.flowData.hotelId = this.currentHotel.id;
      this.flowData.type = 2;
      this.flowData.id = null;
      this.fVisible = true;
    },
    // 点击tree节点编辑事件
    onTreeEditClick(item) {
      if (item.parentId == 0) {
        this.flowData.type = 1;
        this.flowData.name = item.name;
      } else {
        this.flowData.type = 2;
        this.flowData.name = item.name;
      }
      this.flowData.id = item.id;
      this.flowData.hotelId = this.currentHotel.id;
      this.flowData.parentId = item.parentId;
      this.fVisible = true;
    },
    // 确定删除楼层/楼栋
    onTreeDeleteClick(item) {
      remove({
        id: item.id
      }).then(res => {
        if (res.code == 200) {
          this.$message.success('删除成功')

          this.loadBuildingTreeData()
          this.$refs.numtable.ipagination.current = 1
          this.$refs.numtable.ipagination.pageSize = 10
          if (this.currentFilterId == item.id) {
            if (item.parentId == "0")
              this.$refs.numtable.filters['buildId'] = null
            else
              this.$refs.numtable.filters['floorId'] = null
          }
          this.$refs.numtable.loadData()
        }
      })
    },
    // 保存楼栋信息
    saveNewBuilding() {
      if (!this.newBuildingName) {
        this.$message.error("名称不能为空");
        return;
      }
      this.saveBtnLoading = true;
      save({
        hotelId: this.currentHotel.id,
        name: this.newBuildingName,
        parentId: "0",
        type: 1,
      })
        .then((res) => {
          if (res.code == 200) {
            this.newBuildingName = "";
            this.$message.success("楼栋保存成功");
            this.loadBuildingTreeData();
          }
        })
        .finally((_) => {
          this.saveBtnLoading = false;
        });
    },
    // 保存楼栋都层信息
    saveFlow() {
      if (!this.flowData.name) {
        this.$message.error("名称不能为空");
        return;
      }
      this.fSaveLoading = true;

      if (this.flowData.id) {
        // edit

        modify(this.flowData).then((res) => {
          if (res.code == 200) {
            this.flowData.name = "";
            this.flowData.type = 1;
            this.flowData.parentId = null;
            this.flowData.id = null;
            this.$message.success("保存成功");
            this.loadBuildingTreeData();
            this.fVisible = false;
          }
        }).finally(_ => {
          this.fSaveLoading = false;
        });

        return;
      }
      // add flow
      save(this.flowData)
        .then((res) => {
          if (res.code == 200) {
            this.flowData.name = "";
            this.$message.success("楼层保存成功");
            this.loadBuildingTreeData();
            this.fVisible = false;
          }
        })
        .finally((_) => {
          this.fSaveLoading = false;
        });
    },
  },
};
</script>


<style scoped>
.page-wrapper {
  display: flex;
}

.right-wrapper {
  flex: 1;
}

.left-wrapper-1 {
  width: 30%;
  display: flex;
  flex-direction: column;
}

.building-tree {
  width: 100%;
  flex: 1;
  overflow-y: auto;
}

.empty-data {
  height: 100%;
}
</style>