批量制卡

src/views/room/modules/checkIn/batchCardDetail.vue

@@ -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>

src/views/room/modules/checkIn/batchCardModal.vue

@@ -0,0 +1,59 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    @ok="handleOk"
+    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
+    @cancel="handleCancel"
+    cancelText="关闭">
+    <pos-type-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit"></pos-type-form>
+  </j-modal>
+</template>
+
+<script>
+
+  import PosTypeForm from './batchCardDetail.vue'
+  export default {
+    name: 'PosTypeModal',
+    components: {
+      PosTypeForm
+    },
+    data () {
+      return {
+        title:'',
+        width:500,
+        visible: false,
+        disableSubmit: false
+      }
+    },
+    methods: {
+      add () {
+        this.visible=true
+        this.$nextTick(()=>{
+          this.$refs.realForm.add();
+        })
+      },
+      edit (record) {
+        this.visible=true
+        this.$nextTick(()=>{
+          this.$refs.realForm.edit(record);
+        })
+      },
+      close () {
+        this.$emit('close');
+        this.visible = false;
+      },
+      handleOk () {
+        this.$refs.realForm.submitForm();
+      },
+      submitCallback(){
+        this.$emit('ok');
+        this.visible = false;
+      },
+      handleCancel () {
+        this.close()
+      }
+    }
+  }
+</script>