hotel-saas-tenant-frontend/src/views/fangwu/index.vue

<template>
<a-card :bordered="false">
    <a-tabs default-active-key="1" @change="callback">
        <a-tab-pane key="1" tab="房务数据概览">
            <div>
                <h3>今日房务管理</h3>
                <a-card style="width:50%;" class="card">
                    <div class="grid-day">
                        <div>
                            <div>今日锁房</div>
                            <div>{{LockedRoom}}间</div>
                        </div>
                        <div>
                            <div>正在维修中房间</div>
                            <div>{{RepairingRoom}}间</div>
                        </div>
                        <div>
                            <div>今日完成维修房间</div>
                            <div>{{TodayRepairRoom}}间</div>
                        </div>
                    </div>
                </a-card>
            </div>

            <div>
                <h3>分派房</h3>
                <div class="grid-assign">
                    <a-card class="card">
                        <div class="assign-flex">
                            <div>今日待派房间<span>0</span>间，已经分配了<span>0</span>间，剩余<span>0</span>间</div>
                            <div style="color:#1890FF" @click="showAssignModal">点击分配</div>
                        </div>
                        <div style="text-indent: 2em;" class="assign-content">
                            <div v-for="(item, index) in 15" :key="index">
                                <span style="color:#1890FF">{{'小明'}}</span>:{{'0间'}}
                            </div>
                        </div>
                    </a-card>
                    <a-card class="card">
                        <div>
                            <div>房务审核记录及调整</div>
                        </div>
                        <div class="assgin-center">0条需要审核，<span @click="lookLook">点击查看></span> </div>
                    </a-card>
                    <a-card class="card">
                        <div>
                            <div>房屋审核记录及调整</div>
                        </div>
                        <div class="assgin-right">
                            <a-button @click="auditRecords">点击设置</a-button>
                        </div>
                    </a-card>
                </div>
            </div>

            <div>
                <h3>房扫记录</h3>
                <div class="">
                    <ClearRecords />
                </div>
            </div>

            <div>
                <h3>房间易耗品记录</h3>
                <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;">
                    <div style="display:flex;align-items:center;width:100%;">
                        <div class="list-container">
                            <div class="list-item" v-for="(item, index) in list" :key="index" :class="{active: activeIndex === index}" @click="handleClick(index)">
                                {{ item }}
                            </div>
                        </div>
                        <a-range-picker v-show="activeIndex==4" @change="onChange" size="large" />
                    </div>

                    <a-button @click="dispose" style="background:#1890ff;color:#fff;">配置易耗品</a-button>
                </div>
                <a-card class="card">
                    <div>
                        客房易耗品消耗数量
                    </div>
                    <div>
                        布草换洗
                    </div>
                </a-card>
            </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="维修记录" force-render>
            <MaintenanceRecords />
        </a-tab-pane>
        <a-tab-pane key="3" tab="锁房记录">
            <LockRoomRecords />
        </a-tab-pane>
        <a-tab-pane key="4" tab="房扫管理">
            <ClearRoomManagement />
        </a-tab-pane>
        <a-tab-pane key="5" tab="房型易耗品">
            <HouseTypeConsumablesVue />
        </a-tab-pane>
    </a-tabs>
    <!-- 分派房务弹窗 -->
    <a-modal v-model="assignVisible" title="分派房务" @ok="handleAssignOk" width="70%">
        <div style="background-color: #ecf8ff; display: flex; justify-content: center; align-items: center;height:40px;border-radius:5px;overflow: hidden;">
            <div style="width: 10px; height: 100%; background-color: #1890FF;"> </div>
            <div style="text-align: center;flex:1;">剩余脏房 {{0}} 间 续(脏)房 {{5}} 间 退(脏)房 {{1}} 间</div>
        </div>
        <a-table ref="table" size="middle" :scroll="{ x: true, y: 600 }" bordered rowKey="id" :columns="columns" :dataSource="dataSource" :pagination="false" :loading="loading" :rowSelection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
        }" class="j-table-force-nowrap" @change="handleTableChange">

            <template slot="houseDetail" slot-scope="text, record">
                <div>
                    退(脏)房： <span class="check-out" v-for="(item, index) in !record || 6" :key="index">{{8306+index + ''}}</span>
                </div>
                <div style="margin-top:10px;">
                    续(脏)房： <span class="continue" v-for="(item, index) in !record || 6" :key="index">{{210+index + ''}}</span>
                </div>
            </template>
            <template slot="prefix_name" slot-scope="text, record">
                {{ (record.prefix || "") + record.name }}
            </template>
            <template slot="htmlSlot" slot-scope="text">
                <div v-html="text"></div>
            </template>
            <span slot="action" slot-scope="text, record">
                <a @click="handVisible = true">手动分房</a>
            </span>
        </a-table>
    </a-modal>
    <!-- 手动分房弹窗 -->
    <a-modal v-model="handVisible" title="房间列表" @ok="handVisible=false" width="50%">
        <a-card title="退(脏)房">
            <div style="display:flex; margin-right:6px;flex-wrap:wrap;">
                <div @click="checkOut(item)" class="check-out" v-for="item in 5" :key="item.id">{{item}}</div>
            </div>
        </a-card>
        <br />
        <a-card title="续(脏)房">
            <div style="display:flex; margin-right:6px;flex-wrap:wrap;">
                <div @click="continueHouse(item)" class="check-out" v-for="item in 5" :key="item.id">{{item}}</div>
            </div>
        </a-card>
    </a-modal>

    <!-- 手动分房弹窗结束 -->
    <!-- 分派房弹窗结束 -->

    <!-- 房务审核记录及调整点击查看弹窗 -->
    <LookLookVue ref="lookModal" />
    <!-- 房务审核记录及调整点击查看弹窗结束 -->

    <!-- 房务审核记录及调整点击设置弹窗 -->
    <AuditRecords ref="auditModal" />
    <!-- 结束 -->
    <!-- 配置易耗品弹窗 -->
    <ConfigureConsumables ref="configModal" />
    <!-- 配置易耗品弹窗结束 -->
</a-card>
</template>

<script>
import ClearRecords from './tabList/clearRecords.vue'
import ClearRoomManagement from './tabList/clearRoomManagement.vue'
import HouseTypeConsumablesVue from './tabList/houseTypeConsumables.vue'
import LockRoomRecords from './tabList/LockRoomRecords.vue'
import MaintenanceRecords from './tabList/maintenanceRecords.vue'
import LookLookVue from './modalList/lookLook.vue'
import AuditRecords from './modalList/auditRecords.vue'
import ConfigureConsumables from './modalList/configureConsumables.vue'

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'

import { HousekeepingApi } from '@/api/fwApi.js'
let hotelInfo = JSON.parse(localStorage.getItem("storeInfo"));
export default {
    mixins: [JeecgListMixin],
    components: {
        ClearRecords,
        MaintenanceRecords,
        LockRoomRecords,
        ClearRoomManagement,
        HouseTypeConsumablesVue,
        LookLookVue,
        AuditRecords,
        ConfigureConsumables
    },
    data() {
        return {
            list: ['今天', '昨日', '本周', '本月', '更多'],
            activeIndex: 0,
            dataSource:[],
            assignVisible: false,
            handVisible: false,
            //锁房总数
            LockedRoom:'0',
            //正在维修中总数
            RepairingRoom:'0',
            //今日完成维修总数
            TodayRepairRoom:'0',

            // 表头
            columns: [{
                    title: "姓名",
                    align: "center",
                    dataIndex: "hotelName",
                },
                {
                    title: "退房",
                    // align: "center",
                    dataIndex: "房间明细",
                    scopedSlots: {
                        customRender: "houseDetail"
                    },
                },
                {
                    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: [],
        }
    },
    methods: {
        callback(key) {
            console.log(key)
        },
        handleClick(index) {
            this.activeIndex = index
            this.searchQuery()
        },
        onChange(date, dateString) {
            console.log(date, dateString)
        },
        //点击弹出框
        showAssignModal() {
            this.assignVisible = true
        },
        handleAssignOk() {
            this.assignVisible = false
        },
        continueHouse(item) {
            console.log(item)
        },
        checkOut(item) {
            console.log(item)
        },
        lookLook() {
            this.$refs.lookModal.visible = true
            this.$refs.lookModal.title = '房务审核'
        },
        //房务审核记录设置
        auditRecords() {
            this.$refs.auditModal.visible = true
            this.$refs.auditModal.title = '分派规则'
        },
        /**
         * 配置易耗品
         */
        dispose(){
            this.$refs.configModal.visible = true
            this.$refs.configModal.title = '配置易耗品'
        }
    },
    mounted() {
        getAllLayouts().then((res) => {
            if (res.code == 200) {
                this.layouts = res.result.records;
                this.loadData();
            }
        });
        HousekeepingApi.getLockedRoom().then(res=>{
            this.LockedRoom = res.result.total
        })
        HousekeepingApi.getInRepair().then(res=>{
            this.RepairingRoom = res.result.total
        })
        HousekeepingApi.getRepairRoom().then(res=>{
            this.TodayRepairRoom = res.result.total
        })
    }
}
</script>

<style lang="less">
.grid-day {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.grid-assign {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 10px;

    .assign-flex {
        display: flex;
        justify-content: space-between;
    }

    .assign-content {
        display: flex;
        flex-wrap: wrap;
        margin-top: 18px;
    }

    .assgin-center {
        color: #1890ff;
        text-align: center;
        margin-top: 25px;
    }

    .assgin-right {
        text-align: center;
        margin-top: 18px;

        button {
            background: #1890ff;
            color: #fff;
        }
    }
}

.grid-clearRecords {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 10px;
}

.list-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    border: solid 1px #d9d9d9;
    width: 300px;
    border-radius: 5px;
    margin-right: 10px;
    overflow: hidden;
}

.list-item {
    padding: 10px;
    border-right: solid 1px #d9d9d9;
    cursor: pointer;
    text-align: center;
}

.list-item.active {
    background-color: #1890ff;
    color: #fff;
}

.card {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    border-radius: 5px;
    /* optional */
}

.card:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

h3 {
    margin-top: 15px;
}
.check-out{
    // width: 22px;
    // height: 12px;
    background: #909399;
    padding: 5px;
    color: #fff;
    border-radius: 5px;
    border: 1px solid #c9caca;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}
.continue{
    background: #1890ff60;
    padding: 5px;
    color: #fff;
    border-radius: 5px;
    border: 1px solid #1890ff;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}
</style>