|
|
@@ -0,0 +1,168 @@
|
|
|
+<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]}}
|
|
|
+ </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>
|
|
|
+ 入住时长:3天
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ 已制卡:1张
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ 入住时间
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ 预离时间
|
|
|
+ </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="dataSource" :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: "room_name",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "房型",
|
|
|
+ align: "center",
|
|
|
+ dataIndex: "layout_name",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "住客姓名",
|
|
|
+ align: "center",
|
|
|
+ dataIndex: "name",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "手机号码",
|
|
|
+ align: "center",
|
|
|
+ dataIndex: "iphone",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "",
|
|
|
+ align: "center",
|
|
|
+ dataIndex: "iscard",
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ ipagination:{},
|
|
|
+ dataSource:[],
|
|
|
+ loading:false,
|
|
|
+ roomList:['8306','8307','8308','8309'],
|
|
|
+ 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--;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</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>
|