boss_app/pages/roomStateDiagram/roomStateDiagram.vue

<template>
<view>
    <Header @change="headerChange" :isSwitch="true">
        <template #search>
            <!-- <u--input placeholder="房间号/姓名/手机号/身份证号" border="surround" shape="circle" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399" fontSize="12px" :customStyle="{border:'1px solid #e2e2e2',padding:'0 10px',margin:'0 10px',borderRadius:'20px'}" @change="searchChange"></u--input> -->
        </template>
        <template #section>
            <u-subsection :list="list" mode="subsection" :current="current" @change="sectionChange"></u-subsection>
        </template>
    </Header>
    <div style="background:#fff">
        <div class="room-state-explain">
            <div style="margin-right:8px">房态说明</div>
            <div v-for="(item, index) in roomStatusColorList" :key="index" style="margin-right:8px">
                <div :style="{width:'15px',height:'10px',background:item.extend}"></div>{{item.text}}:{{roomStateFilter(item.value)}}
            </div>
        </div>
        <div style="width:50%;margin-bottom:10px">
            <u-subsection :bold="false" :list="list1" mode="subsection" :current="current1" @change="selectChange"></u-subsection>
        </div>
        <div v-if="current1==1">
            <!-- <u-subsection :list="list2" mode="subsection" :current="current2" @change="selectChangeRoomState" fontSize="10"></u-subsection> -->
            <div class="tabs-list">
                <div v-for="(item, index) in cesRoomLayoutList" :key="item.id" class="tabs-list-content" :class="{'tabs-list-border':index!=list2.length-1}" @click="selectChangeRoomModel(item,index)" :style="{background:item.id==current2?'rgb(60, 156, 255)':'',color:item.id==current2?'#fff':''}">{{item.name}}</div>
            </div>
        </div>
        <div v-if="current1==2">
            <u-subsection :bold="false" :list="list3" mode="subsection" :current="current3" @change="selectChangeRoomState" fontSize="10"></u-subsection>
        </div>
        <div style="margin-top:10px">
            <div class="room-state-detail" v-for="item in dataList" :key="item.id">
                <div class="room-state-detail-title">{{item.name.includes('栋')? item.name : item.buildingName + item.name}}：{{item.rooms.length}}间</div>
                <div class="room-state-detail-grid">
                    <div class="room-state-detail-card" @click="roomClick(sItem)" v-for="sItem in item.rooms" :key="sItem.id" :style="{background: roomStatusColorList && roomStatusColorList.length > 0 ? getRoomStatusColor(sItem.roomInfo.roomStatus) : '',}">
                        <div style="display:flex;justify-content: space-between;">
                            <div><b>{{sItem.roomInfo.name}}</b></div>
                            <div v-if="sItem.livingData.livingOrder" style="background:rgb(255, 141, 26);color:#fff;padding:1px 2px;border-radius:5px;">{{getCustomerSourceList(sItem.livingData.livingOrder.customerSource)}}</div>
                        </div>
                        <div v-if="sItem.livingData.livingOrder">
                            <div style="width:100%;overflow: hidden;"><b>{{sItem.livingData.livingCustomers.customerName}}</b><span v-if="sItem.livingData.livingOrder.vipCustomerId" style="color:red; font-size: 12px;transform: scale(0.6);display:inline-block;">VIP</span></div>
                            <div>{{sItem.livingData.livingOrder.dayCount}}天/{{ sItem.livingData.livingOrder.arrivalTime }}</div>
                            <div style="width:100%;overflow: hidden;">￥{{sItem.livingData.price && sItem.livingData.price.length > 0  ? sItem.livingData.price[0].price : 0 }}/ {{sItem.livingData.livingOrder.shouKuan - sItem.livingData.livingOrder.xiaoFei<0? `欠${sItem.livingData.livingOrder.shouKuan - sItem.livingData.livingOrder.xiaoFei}` : `剩${sItem.livingData.livingOrder.shouKuan - sItem.livingData.livingOrder.xiaoFei}` }}</div>
                        </div>
                        <b v-else>
                            {{sItem.layout.name}}
                        </b>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <u-action-sheet safeAreaInsetBottom :cancelText="'取消'" @close="show = false" :actions="listSheet" @select="selectClick" :title="'设置'" :show="show" v-if="selectData">
        <div style="line-height:40px;" v-if="selectData.roomInfo.roomStatus === 2" @click="handleClean">置净</div>
        <div style="line-height:40px;" v-else @click="handleDirty">置脏</div>
        <div style="line-height:40px;" v-if="selectData.roomInfo.roomStatus === 6" @click="handleOffLock">解锁</div>
        <div style="line-height:40px;" v-else @click="handleLock">锁定</div>
        <div style="line-height:40px;" v-if="selectData.roomInfo.roomStatus === 5" @click="handleCompleteRepair">完成维修</div>
        <div style="line-height:40px;" v-else @click="handleWx">维修</div>
    </u-action-sheet>
    <u-modal :show="showModal" closeOnClickOverlay @confirm="confirmWx" @close="showModal = false" :cancelText="'取消'" :title="'维修'">
        <div>
            <div style="display:flex;justify-content:center;align-items:center;">
                维修时间 <div style="margin-left:10px" @click="showTime = true" class="calendar">{{`${startTime} ~ ${endTime}`}}</div>
            </div>
            <div style="display:flex;justify-content:center;align-items:center;">
                维修原因 <u-input v-model="wxReason" placeholder="请输入维修原因"></u-input>
            </div>
        </div>
    </u-modal>
    <u-calendar closeOnClickOverlay :show="showTime" mode="range" @close="showTime=false" @confirm="confirmTime"></u-calendar>

    <u-toast style="z-index:999999;position: relative;" ref="uToast"></u-toast>
</view>
</template>

<script>
import Header from '@/components/header.vue'
import {
    getHotelRoomList,
    getRoomStatus,
    getCustomerSource,
    getRoomType,
    setDirty,
    lockRoom,
    unlockRoom,
    setClean,
    repairRoom,
    finishRepair
} from '../../utils/customerOrder'
export default {
    components: {
        Header
    },
    data() {
        return {
            list: ['全部', '在住', '预离', '欠费', '钟点', '团队', '散客', '联房', '脏房'],
            list1: ['按楼层', '按房型', '按房态'],
            list2: [],
            list3: [],
            current: 0,
            current1: 0,
            current2: 0,
            current3: 0,
            dataList: [],
            dataListCopy: [],
            /**
             * 用户来源列表
             */
            customerSourceList: [],
            /**
             * 方块背景颜色列表
             */
            roomStatusColorList: [],
            /**
             * 房型列表
             */
            cesRoomLayoutList: [],
            //弹出框
            show:false,
            showModal:false,
            showTime:false,
            startTime: new Date().toISOString().slice(0, 10),
            endTime: new Date(new Date().getTime()+ 24 * 60 * 60 * 1000 ).toISOString().slice(0, 10),
            wxReason:'',
            listSheet: [
				{
					name:'置脏'
				},
				{
					name: '置净'
				},
                {
                    name: '锁定'
                },
                {
                    name: '解锁'
                },
                {
                    name: '维修'
                }
			],
            selectData:null,
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        sectionChange(i) {
            console.log(i)
            this.current = i
            this.filter()
        },
        searchChange(e) {
            console.log(e)
        },
        selectChange(e) {
            console.log(e)
            this.current1 = e
            this.filter()
        },
        selectChangeRoomModel(data, idx) {
            console.log(data)
            this.current2 = data.id
            this.filter()
        },
        selectChangeRoomState(e) {
            console.log(e)
            this.current3 = e
            this.filter()
        },
        randomColor() {
            const color = Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, '0');
            return `#${color}`;
        },
        headerChange(e) {
            this.getData(e)
        },
        getData(id) {
            getHotelRoomList({hotelId:id}).then(res => {
                console.log(res);
                if (res.code == 200 && res.result.length > 0) {
                    this.dataListCopy = res.result
                    this.dataList = res.result
                }else{
                    this.dataListCopy = []
                    this.dataList = []
                }
            })
            getRoomStatus().then(res => {
                console.log(res);
                if (res.code == 200 && res.result.length > 0) {
                    let arr = []
                    res.result.forEach(ele => {
                        arr.push(ele.text)
                    })
                    this.roomStatusColorList = res.result
                    this.list3 = arr
                    this.list3.unshift('全部')
                }else{
                    this.roomStatusColorList = []
                    this.list3 = []
                }
            })
            getCustomerSource().then(res => {
                console.log(res);
                if (res.code === 200 && res.result.records.length > 0) {
                    this.customerSourceList = res.result.records
                    console.log(this.current2);
                }else{
                    this.customerSourceList = []
                }
            })
            getRoomType().then(res => {
                console.log(res);
                if (res.code === 200 && res.result.records.length > 0) {
                    this.cesRoomLayoutList = res.result.records
                    this.current2 = res.result.records[0].id
                }else{
                    this.cesRoomLayoutList = []
                }
            })
        },
        /**
         * @description: 筛选
         * @param
         * @return
         */
        filter() {
            console.log('this.current1', this.current1);
            console.log('this.current3', this.current3);
            let arr = JSON.parse(JSON.stringify(this.dataListCopy))
            console.log('...............');
            arr.forEach(item => {
                this.current3 == 0 ? item.rooms = item.rooms :
                item.rooms = item.rooms.filter(ele => {
                    return ele.roomInfo.roomStatus == this.current3
                })
            })
            if (this.current2 && this.current1 == 1) {
                arr.forEach(item => {
                    item.rooms = item.rooms.filter(ele => {
                        return ele.layout.id == this.current2
                    })
                })
            }
            //在住
            if (this.current == 1) {
                
            }
            //预离
            if (this.current == 2) {
                arr.forEach(ele => {
                    ele.rooms = ele.rooms.filter(item => {
                        return item.livingData && item.livingData.livingOrder && item.livingData.livingOrder.dueOutTime == new Date().toISOString().slice(0, 10);
                    })
                })
            }
            //欠费
            if (this.current == 3) {
                arr.forEach(ele => {
                    ele.rooms = ele.rooms.filter(item => {
                        return item.livingData && item.livingData.livingOrder && item.livingData.livingOrder.shouKuan - item.livingData.livingOrder.xiaoFei<0
                    })
                })
            }
            //钟点
            if (this.current == 4) {
                arr.forEach(ele => {
                    ele.rooms = ele.rooms.filter(item=>{
                        return item.livingData && item.livingData.livingOrder && item.livingData.livingOrder.livingType == 2
                    })
                })
            }
            //团队
            if (this.current == 5) {
                arr.forEach(ele => {
                    ele.rooms = ele.rooms.filter(item=>{
                        return item.livingData && item.livingData.livingOrder && item.livingData.livingOrder.isTeam
                    })
                })
            }
            //散客
            if (this.current == 6) {
                // arr.forEach(ele => {
                //     ele.rooms = ele.rooms.filter(item=>{
                        
                //     })
                // })
            }
            //联房
            if (this.current == 7) {
                
            }
            //脏房
            if (this.current == 8) {
                
            }
            console.log('arrarrarrarr', arr);
            this.dataList = JSON.parse(JSON.stringify(arr))
            return arr
        },
        getCustomerSourceList(customerSource, first) {
            console.log(customerSource);
            var find = this.customerSourceList.find((t) => t.id == customerSource);
            // console.log(find);
            // console.log(this.customerSourceList);
            if (find) {
                // return first ? find.label.substr(0, 1) : find.label;
                return find.itemText.substr(0, 1);
            }
            return "";
        },
        /**
         * 计算方块的背景颜色
         */
        getRoomStatusColor(roomStatus) {
            var find = this.roomStatusColorList.find((t) => t.value == roomStatus);
            return find ? find.extend : "";
        },
        /**
         * 计算房态出现的数量
         */
        roomStateFilter(roomStatus) {
            let count = 0
            let arr = JSON.parse(JSON.stringify(this.dataListCopy))
            arr.forEach(ele => {
                ele.rooms.forEach(item => {
                    if (item.roomInfo.roomStatus == roomStatus) {
                        count++
                    }
                })
            })
            return count
        },
        selectClick(e){
            console.log(e);
        },
        roomClick(data){
            console.log(data);
            this.selectData = data
            this.show = true
        },
        //置脏
        handleDirty(){
            if (this.selectData!=null) {
                setDirty(this.selectData.roomInfo.id).then(res=>{
                    console.log(res);
                    if (res.success) {
                        this.getData(uni.getStorageSync('hotelId'))
                    }
                    this.show = false
                })
            }
        },
        //置净
        handleClean(){
            let selectRoom = [];
            selectRoom.push({ roomId: this.selectData.roomInfo.id, roomNo: this.selectData.roomInfo.name })
            if (this.selectData!=null) {
                setClean({roomCleanList:selectRoom,waiterId:' ',hotelId:uni.getStorageSync('hotelId')}).then(res=>{
                    console.log(res);
                    if (res.success) {
                        this.getData(uni.getStorageSync('hotelId'))
                    }
                    this.show = false
                })
            }
        },
        //锁房
        handleLock(){
            let selectRoom = [];
            selectRoom.push({ roomId: this.selectData.roomInfo.id, roomNo: this.selectData.roomInfo.name })
            if (this.selectData!=null) {
                lockRoom({roomLockList:selectRoom,remark:'',hotelId:uni.getStorageSync('hotelId')}).then(res=>{
                    console.log(res);
                    if (res.success) {
                        this.getData(uni.getStorageSync('hotelId'))
                    }
                    this.show = false
                })
            }
        },
        //解锁
        handleOffLock(){
            if (this.selectData!=null) {
                unlockRoom(this.selectData.roomInfo.id).then(res=>{
                    console.log(res);
                    if (res.success) {
                        this.getData(uni.getStorageSync('hotelId'))
                    }
                    this.show = false
                })
            }
        },
        //维修
        handleWx(){
            this.show = false
            this.showModal = true
        },
        //完成维修
        handleCompleteRepair(){
            if (this.selectData!=null) {
                finishRepair(this.selectData.roomInfo.id).then(res=>{
                    console.log(res);
                    if (res.success) {
                        this.getData(uni.getStorageSync('hotelId'))
                        this.$refs.uToast.show({
                            type:"success",
                            message:'成功'
                        })
                    }else{
                        this.$refs.uToast.show({
                            type:"error",
                            message:'出错了'
                        })
                    }
                    this.show = false
                })
            }
        },
        confirmWx(){
            if (this.wxReason == '') {
                this.$refs.uToast.show({
                    type:"error",
                    message:'维修原因不能为空'
                })
                return
            }
            let selectRoom = [];
            selectRoom.push({ roomId: this.selectData.roomInfo.id, roomNo: this.selectData.roomInfo.name })
            if (this.selectData!=null) {
                repairRoom({roomRepairList:selectRoom,remark:this.wxReason,hotelId:uni.getStorageSync('hotelId'),startDate:this.startTime,endDate:this.endTime,dateRange:[this.startDate,this.endTime]}).then(res=>{
                    console.log(res);
                    if (res.success) {
                        this.getData(uni.getStorageSync('hotelId'))
                        this.$refs.uToast.show({
                            type:"success",
                            message:'成功'
                        })
                    }
                    this.show = false
                })
            }
            this.showModal = false
        },
        confirmTime(e){
            console.log(e);
            this.startTime = e[0]
            this.endTime = e[e.length - 1]
            this.showTime = false
        }
    }
}
</script>

<style lang="scss" scoped>
page {
    background-color: #f5f5f5;
}

.room-state-explain {
    display: flex;
    // justify-content: space-between;
    align-items: center;
    padding: 10px;
    font-size: 12px;
    height: 30px;
    margin-top: 10px;
    flex-wrap: wrap;

    div {
        display: flex;
        align-items: center;
        justify-content: center;
        // width: 20%;
        // height: 30px;
        // border-radius: 5px;
        // background-color: #fff;
    }
}

.room-state-detail-title {
    font-size: 14px;
    color: #00000080;
    padding: 0 8px;
    text-align: right;
    border-bottom: 1px solid #00000030;
}

.room-state-detail-grid {
    display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: start;
	width: 96vw;
	margin: 0 auto;
}

.room-state-detail-card {
    width: calc(30vw);
    height: calc(30vw );
    font-size: 12px;
    border-radius: 8px;
    margin: 1vw;
    // background: red;
    color: #fff;
    padding: 1vw 1vw;
    box-sizing: border-box;
    //阴影
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.6);
}

.tabs-list {
    display: flex;
    flex-wrap: nowrap;
    font-size: 12px;
    border-radius: 3px;
    // overflow: hidden;
    border: 1px solid rgb(60, 156, 255);

    .tabs-list-content {
        text-align: center;
        padding: 5px 7px;
        flex: 1;
        // text-overflow: ellipsis;
        white-space: nowrap;
        // overflow: hidden;
    }

    .tabs-list-border {
        border-right: 1px solid rgb(60, 156, 255);
    }
}
.calendar {
    border: 1px solid;
    padding: 5px 10px;
    border-radius: 5px;
}
</style>