hotel-saas-tenant-frontend/src/views/room/modules/checkIn/batchCardDetailCopy.vue

<template>
<div>
    <a-card title="批量制卡" style="width: 100%">
        <div slot="extra" style="display:flex;align-items:center;">
            <a-switch></a-switch>制卡完毕自动跳转下一张
        </div>
        <p>
            <a-row type="flex" justify="center">
                <a-col :span="12">
                    <div style="display:flex;flex-direction:column;justify-content:center;align-items:center;">
                        <h3 style="color:rgba(42, 130, 228, 1)">
                            当前房间号
                        </h3>
                        <div style="color:#fff;background: rgba(42, 130, 228, 1);line-height:60px;width:50%;text-align:center;border-radius:12px;">
                            {{roomList[roomIndex] && roomList[roomIndex].name}}
                        </div>
                    </div>
                </a-col>
                <a-col :span="12">
                    <div style="display:flex;flex-direction:column;justify-content:flex-end;height:100%;">
                        <div style="display:flex;align-items:center;justify-content:space-between">
                            <div>
                                入住时长：{{'--'}}天
                            </div>
                            <div>
                                已制卡：{{'--'}}张
                            </div>
                        </div>
                        <div>
                            <!-- 入住时间:{{roomList[roomIndex] && roomList[roomIndex].Info.arrivalTime2}} -->
                            入住时间:{{'--'}}
                        </div>
                        <div>
                            <!-- 预离时间:{{roomList[roomIndex] && roomList[roomIndex].Info.dueOutTime2}} -->
                            预离时间:{{'--'}}
                        </div>
                    </div>
                </a-col>
            </a-row>
        </p>
        <p>
            <a-row :gutter="[6,6]">
                <a-col :span="5">
                    <a-button @click="changeErr">制新卡</a-button>
                </a-col>
                <a-col :span="5">
                    <a-button @click="changeErr">复制卡</a-button>
                </a-col>
                <a-col :span="4">
                    <a-button @click="changeErr">读卡</a-button>
                </a-col>
                <a-col :span="4">
                    <a-button @click="changeErr">注销</a-button>
                </a-col>
                <a-col :span="5" v-if="roomIndex>0">
                    <a-button @click="handleCutRoom">上一张</a-button>
                </a-col>
                <a-col :span="5" v-if="roomIndex<roomList.length-1">
                    <a-button @click="handleAddRoom">下一张</a-button>
                </a-col>
            </a-row>
        </p>
        <p>
            <a-table ref="table" size="middle" :scroll="{ x: '100%' }" bordered rowKey="id" :columns="columns" :dataSource="roomList" :pagination="ipagination" :loading="loading" class="j-table-force-nowrap">
                <span slot="state" slot-scope="record">
                    {{record?'已制卡':''}}
                    <!-- {{record}} -->
                </span>
                <!-- <template slot="num" slot-scope="text, record, index">
                    {{ (ipagination.current-1)*ipagination.pageSize+index+1}}
                </template> -->
                <span slot="action" slot-scope="text, record">
                    <a @click="ok(record)">选择</a>
                </span>
            </a-table>
        </p>
    </a-card>
</div>
</template>

<script>
export default {
    data() {
        return {
            // 表头
            columns: [
                // {
                //     title: "序号",
                //     align: "center",
                //     loading:false,
                //     width: 60,
                //     scopedSlots: {
                //         customRender: 'num'
                //     }
                // },
                {
                    title: "房间号",
                    align: "center",
                    dataIndex: "name",
                },
                {
                    title: "房型",
                    align: "center",
                    dataIndex: "layoutName",
                },
                {
                    title: "住客姓名",
                    align: "center",
                    dataIndex: "roomInfo.key1",
                },
                {
                    title: "手机号码",
                    align: "center",
                    dataIndex: "roomInfo.key5",
                },
                {
                    title: "",
                    align: "center",
                    dataIndex: "iscard",
                }
            ],
            ipagination:{},
            dataSource:[],
            loading:false,
            roomList:[],
            roomIndex:0,
        }
    },
    methods: {
        changeErr(){
            this.$message.error('接口程序未打开，请打开接口程序')
        },
        handleAddRoom(){
            console.log(this.roomIndex);
            if (this.roomIndex == this.roomList.length-1) {
                this.$message.error('已经是最后一间了')
                return                
            }else{
                this.roomIndex++;
            }
        },
        handleCutRoom(){
            console.log(this.roomIndex);
            if (this.roomIndex == 0) {
                this.$message.error('已经是第一间了')
                return                
            }
            this.roomIndex--;
        },
        edit(record){
            console.log(record);
            // let arr = []
            // arr = record.roomPrices
            // console.log(arr);
            // arr.forEach(ele=>{
            //     ele.roomInfo = record.roomIds.filter(item=> item.roomId==ele.roomId)[0]
            //     ele.Info = record.orderInfo
            // })
            // console.log(arr);
            this.roomList = record;
        },
        submitForm(){
            this.$emit('ok')
        }
    }
}
</script>

<style scoped>
/deep/.ant-table-thead > tr > th {
  background: rgba(42, 130, 228, 1);
  color: #ffffff;
}
/deep/.ant-divider-horizontal {
  margin: 12px 0 !important;
}
/deep/ .ant-table-tbody .ant-table-row td {
  padding-top: 5px;
  padding-bottom: 5px;
}
/deep/.ant-table-thead > tr > th,
.ant-table-tbody > tr > td {
  padding: 5px 5px !important;
  overflow-wrap: break-word;
}
</style>