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

<template>
  <a-card :bordered="false">
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
        <a-tag color="pink" v-if="buildingFloorSearchTag.name" >
            {{ buildingFloorSearchTag.name }}
            <a-icon type="close"  @click="onFliterClose" />
        </a-tag>
      <a-button @click="handleAdd" type="primary" icon="plus"
        >新增房间</a-button
      >
      <a-button @click="onAddBatch" type="primary" icon="tags"
        >批量新增</a-button
      >
      <a-popconfirm
            title="确定全部删除吗?"
            @confirm="delAll"
          >
          <a-button :disabled="delLoading" :loading="delLoading" type="primary" icon="stop">全部删除</a-button>
          </a-popconfirm>
      
      <a-popconfirm
      v-if="selectedRowKeys.length > 0"
            title="确定删除吗?"
            @confirm="delBatch"
          >
          <a-button :disabled="delLoading" :loading="delLoading" icon="stop" style="margin-left: 8px">
          批量删除</a-button>
          </a-popconfirm>
      
      <!-- <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-button style="margin-left: 8px">
          批量操作 <a-icon type="down"
        /></a-button>
      </a-dropdown> -->
      <a-button type="primary" @click="searchQuery" icon="search"
        >查询</a-button
      >
    </div>

    <!-- table区域-begin -->
    <div>
      <a-table
        ref="table"
        size="middle"
        :scroll="{ x: true }"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
        }"
        class="j-table-force-nowrap"
        @change="handleTableChange"
      >

        <template slot="layoutId" slot-scope="text, record">
          {{ getLayoutName(record) }}
        </template>
        <template slot="prefix_name" slot-scope="text, record">
          {{ (record.prefix || "") + record.name }}
        </template>
        <template slot="pictureSlot" slot-scope="text, record">
          <img :src="record.cover" style="width:40px;height40px;" />
        </template>
        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
       
        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>

          <a-divider type="vertical" />
          <a-popconfirm
            title="确定删除吗?"
            @confirm="() => handleDelete(record.id)"
          >
            <a>删除</a>
          </a-popconfirm>
          <a-divider type="vertical" />
          <a @click="handleImage(record)">图片</a>
        </span>
      </a-table>
    </div>
    <room-num-modal ref="modalForm" @ok="modalFormOk"></room-num-modal>
    <room-imgs @saveOk="onImgSave" ref="roomimgmodal"></room-imgs>
  </a-card>
</template>
  
<script>
import { JeecgListMixin } from "@/mixins/JeecgListMixin";
import roomNumModal from "./roomNumModal.vue"; // todo roomLayoutForm 需要替换成房型的表单弹窗
import roomImgs from './roomImagesForm.vue'
import { getAllLayouts } from "@/api/roomLayout";
import { delBatch, delAll } from '@/api/roomBuildingApi'
let hotelInfo = JSON.parse(localStorage.getItem("storeInfo"));
export default {
  mixins: [JeecgListMixin],
  components: {
    roomNumModal,
    roomImgs
  },
  data() {
    return {
      delLoading: false,
      layouts: [],
      queryParam: {},
      // 分页参数
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "30"],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条";
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      // 表头
      columns: [
        {
          title: "商家",
          align: "center",
          dataIndex: "hotelName",
        },
        {
          title: "楼栋",
          align: "center",
          dataIndex: "buildName",
        },
        {
          title: "楼层",
          align: "center",
          dataIndex: "floorName",
        },
        {
          title: "房型",
          align: "center",
          dataIndex: "layoutId",
          scopedSlots: { customRender: "layoutId" },
        },
        {
          title: "房号",
          align: "center",
          dataIndex: "name",
          scopedSlots: { customRender: "prefix_name" },
        },
        {
          title: "创建时间",
          align: "center",
          dataIndex: "createAt",
        },
        {
          title: "操作",
          dataIndex: "action",
          align: "center",
          fixed: "right",
          width: 147,
          scopedSlots: { customRender: "action" },
        },
      ],
      url: {
        // list: 'org.jeecg.modules.business/busMarketMember/list',
        list: "/rooms/cesRooms/list",
        delete: "/rooms/cesRooms/remove",
        deleteBatch: "/rooms/cesRooms/deleteBatch",
        exportXlsUrl: "/rooms/cesRooms/exportXls",
        importExcelUrl: "rooms/cesRooms/importExcel",
      },
      buildingFloorSearchTag: {
        name: null
      },
      dictOptions: {},
      superFieldList: [],
      selectedRowKeys: [],
      isorter: {
        column: "createTime",
        order: "desc",
      },
    };
  },
  created() {
    // this.loadData()
    getAllLayouts().then((res) => {
      if (res.code == 200) {
        this.layouts = res.result.records;
        this.loadData();
      }
    });
  },
  methods: {
    onImgSave() {
      this.loadData()
    },
    onFliterClose() {
        this.filters['buildId'] = null
        this.filters['floorId'] = null
        this.ipagination.current = 1
        this.buildingFloorSearchTag.name = null
        this.loadData()
    },
    // 搜索
    searchParam(id, name, isBuilding) {
        this.$set(this.buildingFloorSearchTag,'name',name)
        if(isBuilding) {
            this.filters['buildId'] = id
            if(this.filters['floorId']) {
                delete this.filters.floorId
            }
        } else {
            this.filters['floorId'] = id
            if(this.filters['buildId']) {
                delete this.filters.buildId
            }
        }
        this.loadData()
    },
    getLayoutName(row) {
      let i = this.layouts.findIndex((s) => s.id == row.layoutId);
      if (i > -1) {
        return this.layouts[i].name;
      }
      return "";
    },
    // 批量删除
    delBatch() {
      let hotelInfo = JSON.parse(localStorage.getItem('storeInfo'))
      let keys = this.selectedRowKeys
      this.delLoading = true
      delBatch({
        hotelId: hotelInfo.id,
        idStr: keys.toString()
      }).then(res => {
        if(res.code == 200) {
          this.selectedRowKeys = []
          this.$message.success('删除成功');
          this.loadData()
        }
      }).finally(_ => {
        this.delLoading = false
      })
    },
    // 删除所有
    delAll() {
      let hotelInfo = JSON.parse(localStorage.getItem('storeInfo'))
      this.delLoading = true
      delAll({
        hotelId: hotelInfo.id,
      }).then(res => {
        if(res.code == 200) {
          this.selectedRowKeys = []
          this.$message.success('全部删除成功');
          this.loadData()
        }
      }).finally(_ => {
        this.delLoading = false
      })
    },
    // 批量添加按钮
    onAddBatch() {
        this.$router.push('/tenant/gen/rooms');
    },
    // 全部删除
    onDelAll() {},
    // 显示图片弹窗
    handleImage(row) {
      this.$refs.roomimgmodal.setModel(row)
    },
    onSaveOk() {
      this.loadData();
    },
  },
};
</script>
<style scoped>
@import "~@assets/less/common.less";
</style>