右键菜单

src/views/room/fangtailive.vue

@@ -334,7 +334,8 @@
                               <span>
                                 {{
                                   roomLive.livingData.livingCustomers
-                                    .customerName
+                              ? roomLive.livingData.livingCustomers.customerName
+                              : ""
                                 }}
                                 <a-tag
                                   color="pink"
@@ -564,7 +565,7 @@
 
                             <a-menu-item key="9"> 入账 </a-menu-item>
 
-                            <a-menu-item key="10"> 续租/提前 </a-menu-item>
+                            <a-menu-item key="10"> 续住/提前 </a-menu-item>
 
                             <a-menu-item key="11"> 制房卡 </a-menu-item>
 
@@ -718,6 +719,18 @@
       ref="ModalCleanRoom"
       @ok="modalLockRoomFormOk"
     ></clean-room-modal>
+
+    <!-- 右键菜单 -->
+    <look-room-modalVue ref="lookRoomModalVue" @ok="modalLockRoomFormOk" />
+    <continued-modalVue ref="continuedModalVue" @ok="modalLockRoomFormOk" />
+    <select-check-in-room-order-modal
+      ref="modalSelectCheckInRoomOrder"
+      @ok="modalLockRoomFormOk"
+    ></select-check-in-room-order-modal>
+    <customer-modal ref="modalCustomerForm" @ok="modalLockRoomFormOk"></customer-modal>
+    <exchange-houses-modalVue ref="exchangeHousesModalVue" @ok="modalLockRoomFormOk" />
+
+
   </a-card>
 </template>
 
@@ -740,6 +753,13 @@ import guestorders from "./guestorders";
 import leasegoods from "./leasegoods";
 import membermessage from "./membermessage";
 import membergoodsmanage from "./membergoodsmanage";
+import lookRoomModalVue from './modules/fangtaiModal/lookRoomModal/lookRoomModal.vue';
+import continuedModalVue from './modules/fangtaiModal/continuedModal/continuedModal.vue';
+import SelectCheckInRoomOrderModal from "./modules/checkIn/SelectCheckInRoomOrderModal.vue";
+import CustomerModal from "./modules/checkIn/CustomerModal.vue";
+import exchangeHousesModalVue from './modules/fangtaiModal/exchangeHouses/exchangeHousesModal.vue';
+
+
 import { TreeSelect } from "ant-design-vue";
 import moment from "moment";
 const SHOW_PARENT = TreeSelect.SHOW_PARENT;
@@ -762,6 +782,11 @@ export default {
     membergoodsmanage,
     LockRoomModal,
     CleanRoomModal,
+    lookRoomModalVue,
+    continuedModalVue,
+    SelectCheckInRoomOrderModal,
+    CustomerModal,
+    exchangeHousesModalVue
   },
   data() {
     return {
@@ -1478,11 +1503,42 @@ export default {
         this.$message.error("接口程序未打开，请打开接口程序");
         return;
       } else if (e.key == 15) {
-        this.handleBillInfo(row);
+        this.$refs.modalCustomerForm.add(row.livingData.livingOrder.id, row.roomInfo.id);
+        this.$refs.modalCustomerForm.title = "添加同住人";
+        this.$refs.modalCustomerForm.disableSubmit = false;
         return;
       } else if (e.key == 18) {
         this.$message.error("暂未实现");
         return;
+      }else if(e.key == 8){
+        this.$refs.lookRoomModalVue.edit(row)
+        console.log(this.$refs.lookRoomModalVue);
+        this.$refs.lookRoomModalVue.title = '查房'
+        this.$refs.lookRoomModalVue.disableSubmit = true;
+        return
+      }else if(e.key == 9){
+        this.handleBillInfo(row);
+        return
+      }else if(e.key == 10){
+        this.$refs.continuedModalVue.edit(row)
+        this.$refs.continuedModalVue.title = '续住'
+        this.$refs.continuedModalVue.disableSubmit = false;
+        return
+      }else if( e.key == 14 ){
+        this.$refs.modalSelectCheckInRoomOrder.add();
+        this.$refs.modalSelectCheckInRoomOrder.title = "请选择需要关联的订单";
+        this.$refs.modalSelectCheckInRoomOrder.disableSubmit = false;
+        this.$refs.modalSelectCheckInRoomOrder.livingOrderId =
+          row.livingData.livingOrder.id;
+        this.$refs.modalSelectCheckInRoomOrder.livingRoomId = row.roomInfo.id;
+        return
+      }else if( e.key==13 ){
+        this.$refs.exchangeHousesModalVue.edit(row)
+        this.$refs.exchangeHousesModalVue.title = '换房'
+        this.$refs.exchangeHousesModalVue.disableSubmit = false;
+      }else if( e.key == 16){
+        this.handleBillInfo(row);
+        return
       }
     },
     modalBillRoomFormOk(e) {

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

@@ -59,7 +59,7 @@
             <a-descriptions :column="2">
               <a-descriptions-item label="主客姓名">
                 {{
-                  item.livingCustomers
+                  item.livingCustomers && item.livingCustomers[0]
                     ? item.livingCustomers[0].customerName
                     : "--"
                 }}
@@ -69,7 +69,7 @@
               /></a-descriptions-item>
               <a-descriptions-item label="性别">
                 {{
-                  item.livingCustomers
+                  item.livingCustomers  && item.livingCustomers[0]
                     ? item.livingCustomers[0].gender === 1
                       ? "男"
                       : "女"
@@ -81,7 +81,7 @@
               </a-descriptions-item>
               <a-descriptions-item label="手机号">
                 {{
-                  item.livingCustomers ? item.livingCustomers[0].phone : "--"
+                  item.livingCustomers  && item.livingCustomers[0] ? item.livingCustomers[0].phone : "--"
                 }}
                 <a-icon
                   type="edit"

src/views/room/modules/fangtaiModal/continuedModal/continuedForm.vue

@@ -0,0 +1,379 @@
+<template>
+<a-spin :spinning="confirmLoading">
+    <a-tabs default-active-key="1" @change="callback">
+        <a-tab-pane key="1" tab="操作">
+            <j-form-container :disabled="formDisabled">
+                <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
+                    <a-row>
+                        <a-col :span="24">
+                            <a-form-model-item label="续住总价" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
+                                <!-- <a-input v-model="model.name" placeholder="请输入餐桌名称"></a-input> -->
+                                {{PriceData.reduce((pre,cur)=> pre+cur.price*1,0 ) || 0}}
+                                <a-popover placement="right" v-if="dayNum>0">
+                                    <template slot="content">
+                                        <div style="max-height:400px;overflow:auto;width:100%;">
+                                            <div v-for="(item, index) in PriceData" :key="index">
+                                                {{item.day}}
+                                                <a-input-number :min="0" v-model="item.price"></a-input-number>
+                                            </div>
+                                        </div>
+                                    </template>
+                                    <template slot="title">
+                                        <a-input-number :min="0" @change="batchPrice" placeholder="批量改价"></a-input-number>
+                                    </template>
+                                    <a-icon type="edit" />
+                                </a-popover>
+                                <template v-else>
+                                    <a-icon type="edit" />
+                                </template>
+                            </a-form-model-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-model-item label="入住时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
+                                {{ model.livingData && model.livingData.livingOrder && model.livingData.livingOrder.arrivalTime || ''}}
+                            </a-form-model-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-model-item label="预离时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
+                                {{ model.livingData && model.livingData.livingOrder && model.livingData.livingOrder.dueOutTime || ''}}
+                            </a-form-model-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-model-item label="预离变更" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
+                                <!-- <a-select v-model="model.posRegionId" placeholder="请选择pos类型">
+                                    <a-select-option :value="item.id" v-for="item in regionList" :key="item.id">
+                                        {{ item.name }}
+                                    </a-select-option>
+                                </a-select> -->
+                                <a-date-picker :disabled-date="disabledStartDate" v-model="model.startValue" show-time format="YYYY-MM-DD HH:mm:ss" :placeholder=" model.livingData && model.livingData.livingOrder && model.livingData.livingOrder.dueOutTime" @change="handleStartOpenChange" />
+                            </a-form-model-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-model-item label="续住天数" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
+                                <a-input-number :min="0" v-model="dayNum" placeholder="请输入续住天数" style="width: 40%" @change="dayChange" />
+                            </a-form-model-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-model-item label="收款方式" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
+                                <a-select v-model="model.payType" placeholder="收款方式" style="width: 40%">
+                                    <a-select-option :value="item.id" v-for="item in payTypeList" :key="item.id">
+                                        {{ item.name }}
+                                    </a-select-option>
+                                </a-select>
+                            </a-form-model-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-model-item label="金额" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="num">
+                                <a-input-number v-model="model.num" placeholder="请输入金额" style="width: 40%" />
+                            </a-form-model-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
+                                <!-- <a-input-number v-model="model.num" placeholder="请输入座位数" style="width: 100%" /> -->
+                                <a-input v-model="model.remarks"></a-input>
+                            </a-form-model-item>
+                        </a-col>
+                    </a-row>
+                </a-form-model>
+            </j-form-container>
+        </a-tab-pane>
+        <!-- <a-tab-pane key="2" tab="续住记录"></a-tab-pane> -->
+    </a-tabs>
+
+</a-spin>
+</template>
+
+<script>
+import {
+    httpAction,
+    getAction
+} from "@/api/manage";
+import {
+    validateDuplicateValue
+} from "@/utils/util";
+
+export default {
+    name: "PosTableForm",
+    components: {},
+    props: {
+        //表单禁用
+        disabled: {
+            type: Boolean,
+            default: false,
+            required: false,
+        },
+    },
+    data() {
+        return {
+            model: {
+                day: 0
+            },
+            labelCol: {
+                xs: {
+                    span: 24
+                },
+                sm: {
+                    span: 5
+                },
+            },
+            wrapperCol: {
+                xs: {
+                    span: 24
+                },
+                sm: {
+                    span: 16
+                },
+            },
+            confirmLoading: false,
+            validatorRules: {
+                tenantId: [{
+                    required: true,
+                    message: "请输入关联租户!"
+                }],
+                hotelId: [{
+                    required: true,
+                    message: "请输入关联酒店!"
+                }],
+                name: [{
+                    required: true,
+                    message: "请输入餐桌名称!"
+                }],
+                posTypeId: [{
+                    required: true,
+                    message: "请输入pos类型id!"
+                }],
+                posTableTypeId: [{
+                    required: true,
+                    message: "请输入pos桌型id!"
+                }],
+                posRegionId: [{
+                    required: true,
+                    message: "请输入pos餐桌区域id!"
+                }],
+                num: [{
+                    required: true,
+                    message: "请输入金额!"
+                }],
+                tableNo: [{
+                    required: true,
+                    message: "请输入餐桌序号!"
+                }],
+                state: [{
+                    required: true,
+                    message: "请输入状态!"
+                }],
+            },
+            url: {
+                add: "/pos/posTable/add",
+                edit: "/pos/posTable/edit",
+                queryById: "/pos/posTable/queryById",
+            },
+            payTypeList: [],
+            tableTypeList: [],
+            regionList: [],
+            PriceData: [],
+            dayNum:0
+        };
+    },
+    watch:{
+        dayNum(val){
+            let arr = [];
+            console.log(this.dayNum);
+            if (this.dayNum && this.dayNum > 0) {
+                arr.length = this.dayNum;
+                for (let i = 0; i < arr.length; i++) {
+                    arr[i] = {
+                        day: this.addDate(this.model.livingData.livingOrder.dueOutTime, i),
+                        price: 0,
+                    };
+                }
+                this.PriceData = arr;
+            } else {
+                return [];
+            }
+        }
+    },
+    computed: {
+        formDisabled() {
+            return this.disabled;
+        },
+        dayDataArr() {
+            let arr = [];
+            console.log(this.dayNum);
+            if (this.dayNum && this.dayNum > 0) {
+                arr.length = this.dayNum;
+                for (let i = 0; i < arr.length; i++) {
+                    arr[i] = {
+                        day: this.addDate(this.model.livingData.livingOrder.dueOutTime, i),
+                        price: 0,
+                    };
+                }
+                this.PriceData = arr;
+            } else {
+                return [];
+            }
+
+            return arr;
+        }
+    },
+    created() {
+        var _info = JSON.parse(localStorage.getItem("storeInfo"));
+        if (_info) {
+            this.model.hotelId = _info.id;
+        }
+        //备份model原始值
+        this.modelDefault = JSON.parse(JSON.stringify(this.model));
+        getAction("/pos/posType/list", {
+            hotelId: _info.id,
+            pageNo: 1,
+            pageSize: 100,
+        }).then((res) => {
+            if (res.success) {
+                this.posTypeList = res.result.records;
+            }
+        });
+        getAction("/pos/posTableType/list", {
+            hotelId: _info.id,
+            pageNo: 1,
+            pageSize: 100,
+        }).then((res) => {
+            if (res.success) {
+                this.tableTypeList = res.result.records;
+            }
+        });
+        getAction("/pos/posRegion/list", {
+            hotelId: _info.id,
+            pageNo: 1,
+            pageSize: 100,
+        }).then((res) => {
+            if (res.success) {
+                this.regionList = res.result.records;
+            }
+        });
+        getAction("/business/busRoomPayType/list", {
+            pageSize: 99999,
+            pageNo: 1,
+        }).then((res) => {
+            if (res.success) {
+                this.payTypeList = res.result.records;
+            }
+        });
+    },
+    methods: {
+        /**
+         * 根据传入的数字将日期加上对应的天数
+         * @param {String} date 日期
+         * @param {Number} days 天数
+         * @return {String} 返回日期
+         */
+        addDate(date, days) {
+            console.log(date, days);
+            let time = new Date(date);
+            time.setDate(time.getDate() + days);
+            let m = time.getMonth() + 1;
+            let d = time.getDate();
+            if (m < 10) {
+                m = "0" + m;
+            }
+            if (d < 10) {
+                d = "0" + d;
+            }
+            return time.getFullYear() + '-' + m + '-' + d + ' ' + time.getHours() + ':' + (time.getMinutes() < 10 ? "0" + time.getMinutes() : time.getMinutes()) + ':' + (time.getSeconds() < 10 ? "0" + time.getSeconds() : time.getSeconds())
+        },
+
+        //计算两个日期之间相隔多少天
+        daysBetween(date1, date2) {
+            const oneDay = 24 * 60 * 60 * 1000; // hours*minutes*seconds*milliseconds
+            const firstDate = new Date(date1);
+            const secondDate = new Date(date2);
+            if (secondDate<firstDate) {
+                this.$message.warning("离开时间不能小于预离时间");
+                return
+            }
+            const diffDays = Math.round(Math.abs((firstDate - secondDate) / oneDay));
+            return diffDays;
+        },
+        batchPrice(e){
+            console.log(e);
+            this.PriceData.forEach(item=>{
+                item.price = e;
+            })
+        },
+
+        add() {
+            this.edit(this.modelDefault);
+        },
+        edit(record) {
+            this.model = Object.assign({}, record);
+            // this.model.startValue = record.livingData.livingOrder.dueOutTime
+            this.visible = true;
+        },
+        submitForm() {
+            const that = this;
+            // 触发表单验证
+            this.$refs.form.validate((valid) => {
+                if (valid) {
+                    that.confirmLoading = true;
+                    let httpurl = "";
+                    let method = "";
+                    // if (!this.model.id) {
+                    //     httpurl += this.url.add;
+                    //     method = "post";
+                    // } else {
+                    //     httpurl += this.url.edit;
+                    //     method = "put";
+                    // }
+                    let obj = {
+                        // livingOrderId:this.model.roomInfo.livingOrderId,
+                        payType:this.model.payType,
+                        remark:this.model.remarks,
+                        roomId:this.model.roomInfo.id,
+                        money:this.model.num,
+                        prices:this.PriceData.map(item=>({
+                            livingOrderId:this.model.roomInfo.livingOrderId,
+                            dayTime:item.day,
+                            price:item.price,
+                        }))
+                    }
+                    // console.log(this.model.startValue);
+                    // return
+                    httpAction(`/business/busRoomBookingOrders/continue-living?livingOrderId=${this.model.roomInfo.livingOrderId}&dueOutTime=${this.model.startValue}`, obj, 'post')
+                        .then((res) => {
+                            if (res.success) {
+                                that.$message.success(res.message);
+                                that.$emit("ok");
+                            } else {
+                                that.$message.warning(res.message);
+                            }
+                        })
+                        .finally(() => {
+                            that.confirmLoading = false;
+                        });
+                }
+            });
+        },
+
+        callback(key) {
+            console.log(key)
+        },
+        handleStartOpenChange(e) {
+            console.log(e)
+            this.dayNum = this.daysBetween(this.model.livingData.livingOrder.dueOutTime, e._d)
+            // this.model.startValue = e._i;
+        },
+        dayChange(e) {
+            console.log(e);
+            this.model.startValue = this.addDate(this.model.livingData.livingOrder.dueOutTime, e);
+        },
+
+        disabledStartDate(endValue) {
+            // const endValue = 
+            const startValue = this.model.livingData.livingOrder.dueOutTime
+            if (!endValue || !startValue) {
+                return false;
+            }
+            return startValue.valueOf() >= endValue.valueOf();
+        },
+    },
+};
+</script>

src/views/room/modules/fangtaiModal/continuedModal/continuedModal.vue

@@ -0,0 +1,60 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    switchFullscreen
+    @ok="handleOk"
+    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
+    @cancel="handleCancel"
+    cancelText="关闭">
+    <pos-table-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit"></pos-table-form>
+  </j-modal>
+</template>
+
+<script>
+
+  import PosTableForm from './continuedForm.vue'
+  export default {
+    name: 'PosTableModal',
+    components: {
+      PosTableForm
+    },
+    data () {
+      return {
+        title:'',
+        width:800,
+        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(e){
+        this.$emit('ok', e);
+        this.visible = false;
+      },
+      handleCancel () {
+        this.close()
+      }
+    }
+  }
+</script>

src/views/room/modules/fangtaiModal/exchangeHouses/exchangeHousesForm.vue

@@ -0,0 +1,472 @@
+<template>
+<a-spin :spinning="confirmLoading">
+    <a-tabs default-active-key="1" @change="callback">
+        <a-tab-pane key="1" tab="操作">
+            <j-form-container :disabled="formDisabled">
+                <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
+                    <a-row>
+                        <!-- <a-col :span="24">
+                            <a-form-model-item label="续住总价" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
+                                {{PriceData.reduce((pre,cur)=> pre+cur.price*1,0 ) || 0}}
+                                <a-popover placement="right" v-if="dayNum>0">
+                                    <template slot="content">
+
+                                    </template>
+                                    <template slot="title">
+                                        <a-input-number :min="0" @change="batchPrice" placeholder="批量改价"></a-input-number>
+                                    </template>
+                                    <a-icon type="edit" />
+                                </a-popover>
+                                <template v-else>
+                                    <a-icon type="edit" />
+                                </template>
+                            </a-form-model-item>
+                        </a-col> -->
+                        <a-col :span="24">
+                            <a-form-model-item label="原房间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
+                                <!-- {{ model.livingData && model.livingData.livingOrder && model.livingData.livingOrder.arrivalTime || ''}} -->
+                                {{ model.roomInfo && model.roomInfo.name}}
+                            </a-form-model-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-model-item label="房价" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
+                                <!-- {{ model.livingData && model.livingData.livingOrder && model.livingData.livingOrder.dueOutTime || ''}} -->
+                                {{ model.roomInfo && model.layout.marketPrice}}
+                            </a-form-model-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-model-item label="新房间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
+                                <template v-if="selectData.length>0">
+                                    {{newRoom.roomInfo && newRoom.roomInfo.name}}
+                                </template> <a href="#" @click="selectVisible = true">选择</a>
+                            </a-form-model-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-model-item label="房价" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
+                                <!-- <a-input-number :min="0" v-model="dayNum" placeholder="请输入续住天数" style="width: 40%" @change="dayChange" /> -->
+                                {{ timeData.reduce((pre,cur)=> pre+cur.price*1,0) }}
+                                <a-popover placement="right" v-if="newRoom.roomInfo">
+                                    <template slot="content">
+                                        <div style="max-height:400px;overflow:auto;width:100%;">
+                                            <div v-for="(item, index) in timeData" :key="index">
+                                                {{item.day}}
+                                                <a-input-number :min="0" v-model="item.price"></a-input-number>
+                                            </div>
+                                        </div>
+                                    </template>
+                                    <template slot="title">
+                                    </template>
+                                    <a-icon type="edit" />
+                                </a-popover>
+                            </a-form-model-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-model-item label="原因" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
+                                <!-- <a-input-number v-model="model.num" placeholder="请输入座位数" style="width: 100%" /> -->
+                                <a-input v-model="model.remarks"></a-input>
+                            </a-form-model-item>
+                        </a-col>
+                    </a-row>
+                </a-form-model>
+            </j-form-container>
+        </a-tab-pane>
+        <!-- <a-tab-pane key="2" tab="换房记录"></a-tab-pane> -->
+    </a-tabs>
+
+    <a-modal :title="'选择房间'" :visible="selectVisible" @cancel="selectVisible = false" @ok="changeSelct">
+        <a-row>
+            <a-col :span="24">
+                <a-form-model-item label="房型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
+                    <a-checkbox-group v-model="checkedCesRoomLayoutList" :options="cesRoomLayoutList" @change="checkChange">
+                    </a-checkbox-group>
+                </a-form-model-item>
+            </a-col>
+            <a-col :span="24">
+                <a-form-model-item label="房态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
+                    <a-checkbox-group v-model="checkedRoomStatusList" :options="roomStatusList" @change="checkChange">
+                    </a-checkbox-group>
+                </a-form-model-item>
+            </a-col>
+            <a-col :span="24">
+                <div>
+                    <div>已选择{{selectData.length}}间</div>
+                    <div v-if="selectData.length>0">
+                        {{selectData[0].roomInfo && selectData[0].roomInfo.name}}
+                    </div>
+                </div>
+
+            </a-col>
+            <a-col :span="24" v-if="dataList.length>0">
+                <div style="display:flex;flex-wrap:wrap;">
+                    <div v-for="(item,index) in dataList" :key="index" @click="selectRoom(item, index)" :class="{'active':index==link}" style="border:1px solid #ccc;padding: 5px 20px;margin-right:10px;margin-top:10px;border-radius:5px;">
+                        {{ item.roomInfo && item.roomInfo.name}}
+                    </div>
+                </div>
+            </a-col>
+        </a-row>
+    </a-modal>
+
+</a-spin>
+</template>
+
+<script>
+import {
+    httpAction,
+    getAction
+} from "@/api/manage";
+import {
+    validateDuplicateValue
+} from "@/utils/util";
+
+export default {
+    name: "PosTableForm",
+    components: {},
+    props: {
+        //表单禁用
+        disabled: {
+            type: Boolean,
+            default: false,
+            required: false,
+        },
+    },
+    data() {
+        return {
+            link: -1,
+            customerSourceList: [],
+            checkedCustomerSourceList: [],
+            roomStatusList: [],
+            checkedRoomStatusList: ['1', '2'],
+            cesRoomLayoutList: [],
+            checkedCesRoomLayoutList: [],
+            roomList: [],
+            selectVisible: false,
+            model: {
+                day: 0
+            },
+            labelCol: {
+                xs: {
+                    span: 24
+                },
+                sm: {
+                    span: 5
+                },
+            },
+            wrapperCol: {
+                xs: {
+                    span: 24
+                },
+                sm: {
+                    span: 16
+                },
+            },
+            confirmLoading: false,
+            validatorRules: {
+                tenantId: [{
+                    required: true,
+                    message: "请输入关联租户!"
+                }],
+                hotelId: [{
+                    required: true,
+                    message: "请输入关联酒店!"
+                }],
+                name: [{
+                    required: true,
+                    message: "请输入餐桌名称!"
+                }],
+                posTypeId: [{
+                    required: true,
+                    message: "请输入pos类型id!"
+                }],
+                posTableTypeId: [{
+                    required: true,
+                    message: "请输入pos桌型id!"
+                }],
+                posRegionId: [{
+                    required: true,
+                    message: "请输入pos餐桌区域id!"
+                }],
+                num: [{
+                    required: true,
+                    message: "请输入金额!"
+                }],
+                tableNo: [{
+                    required: true,
+                    message: "请输入餐桌序号!"
+                }],
+                state: [{
+                    required: true,
+                    message: "请输入状态!"
+                }],
+            },
+            url: {
+                add: "/pos/posTable/add",
+                edit: "/pos/posTable/edit",
+                queryById: "/pos/posTable/queryById",
+            },
+            payTypeList: [],
+            tableTypeList: [],
+            regionList: [],
+            PriceData: [],
+            oldRoomList: [],
+            dataList: [],
+            selectData: [],
+            newRoom: {},
+            timeData: [],
+        };
+    },
+    watch: {
+        roomList(val) {
+            // this.roomList.forEach(ele => {
+            //     this.dataList.push(...ele.rooms)
+            // })
+        }
+    },
+    computed: {
+        formDisabled() {
+            return this.disabled;
+        },
+    },
+    created() {
+        var _info = JSON.parse(localStorage.getItem("storeInfo"));
+        if (_info) {
+            this.model.hotelId = _info.id;
+        }
+        //备份model原始值
+        this.modelDefault = JSON.parse(JSON.stringify(this.model));
+        getAction("/rooms/cesRoomLayout/list", {
+            pageSize: 99999,
+            pageNo: 1,
+        }).then((res) => {
+            if (res.success) {
+                var list = [];
+                res.result.records.forEach((item) => {
+                    list.push({
+                        label: item.name,
+                        value: item.id
+                    });
+                });
+                this.cesRoomLayoutList = list;
+            }
+        });
+        getAction("/rooms/cesRooms/room-status-color", {}).then((res) => {
+            if (res.success) {
+                this.roomStatusColorList = res.result;
+                var list = [];
+                res.result.forEach((item) => {
+                    list.push({
+                        label: item.title,
+                        value: item.value
+                    });
+                });
+                list = list.filter(item => item.label == '空净' || item.label == '空脏')
+                console.log(list);
+                this.roomStatusList = list;
+            }
+        });
+        this.loadData();
+    },
+    methods: {
+        changeSelct() {
+            if (this.selectData[0].roomInfo.id == this.model.roomInfo.id) {
+                this.$message.warning("不能选择相同的房间");
+                return
+            }
+            this.newRoom = this.selectData[0]
+            this.selectVisible = false;
+        },
+        /**
+         * 根据传入的数字将日期加上对应的天数
+         * @param {String} date 日期
+         * @param {Number} days 天数
+         * @return {String} 返回日期
+         */
+        addDate(date, days) {
+            console.log(date, days);
+            let time = new Date(date);
+            time.setDate(time.getDate() + days);
+            let m = time.getMonth() + 1;
+            let d = time.getDate();
+            if (m < 10) {
+                m = "0" + m;
+            }
+            if (d < 10) {
+                d = "0" + d;
+            }
+            console.log(time);
+            return time.getFullYear() + '-' + m + '-' + d + ' ' + time.getHours() + ':' + (time.getMinutes() < 10 ? "0" + time.getMinutes() : time.getMinutes()) + ':' + (time.getSeconds() < 10 ? "0" + time.getSeconds() : time.getSeconds())
+        },
+
+        //计算两个日期之间相隔多少天
+        daysBetween(date1, date2) {
+            const oneDay = 24 * 60 * 60 * 1000; // hours*minutes*seconds*milliseconds
+            const firstDate = new Date(date1);
+            const secondDate = new Date(date2);
+            // if (secondDate < firstDate) {
+            //     this.$message.warning("离开时间不能小于预离时间");
+            //     return
+            // }
+            const diffDays = Math.round(Math.abs((firstDate - secondDate) / oneDay));
+            if (diffDays<0) {
+                diffDays = 1
+            }
+            return diffDays;
+        },
+        selectRoom(e, idx) {
+            console.log(e);
+            this.link = idx
+            this.selectData[0] = e
+        },
+        batchPrice(e) {
+            console.log(e);
+            this.PriceData.forEach(item => {
+                item.price = e;
+            })
+        },
+        checkChange(e) {
+            console.log("e", e);
+            console.log(
+                "checkedroomBuildingFloorList",
+                this.checkedroomBuildingFloorList
+            );
+            var list = this.oldRoomList;
+            if (this.checkedCesRoomLayoutList.length > 0) {
+                list = this.oldRoomList.reduce((acc, curr) => {
+                    const rooms = curr.rooms.filter((room) =>
+                        this.checkedCesRoomLayoutList.includes(room.layout.id)
+                    );
+                    acc.push({
+                        ...curr,
+                        rooms
+                    });
+                    return acc;
+                }, []);
+            }
+            if (this.checkedRoomStatusList.length > 0) {
+                list = list.reduce((acc, curr) => {
+                    const rooms = curr.rooms.filter((room) =>
+                        this.checkedRoomStatusList.includes(
+                            room.roomInfo.roomStatus.toString()
+                        )
+                    );
+                    acc.push({
+                        ...curr,
+                        rooms
+                    });
+                    return acc;
+                }, []);
+            }
+            console.log("list2", list);
+            this.roomList = list;
+            let arr = [];
+            this.roomList.forEach(ele => {
+                ele.rooms.forEach(item => {
+                    if (item) {
+                        if (arr.some(i => i.roomInfo.id == item.roomInfo.id)) {} else {
+                            arr.push(item)
+                        }
+                    }
+                })
+
+            })
+            this.dataList = arr
+        },
+        loadData() {
+            // this.checkInBtnDis = false;
+            // this.scheduleBtnDis = false;
+            getAction("/rooms/cesRooms/realtime-rooms", {}).then((res) => {
+                if (res.success) {
+                    res.result.forEach((row) => {
+                        this.$set(row, "collapse", 1);
+                    });
+                    this.roomList = res.result;
+                    this.oldRoomList = JSON.parse(JSON.stringify(res.result));
+                    this.checkChange()
+                }
+            });
+        },
+        add() {
+            this.edit(this.modelDefault);
+        },
+        edit(record) {
+            this.model = Object.assign({}, record);
+            // this.model.startValue = record.livingData.livingOrder.dueOutTime
+            let arr = []
+            arr.length = this.daysBetween(record.livingData.livingOrder.dueOutTime, record.livingData.livingOrder.arrivalTime)
+            for (let i = 0; i < arr.length; i++) {
+                arr[i] = {
+                    day: this.addDate(this.model.livingData.livingOrder.dueOutTime, i),
+                    price: 0,
+                };
+            }
+            this.timeData = arr
+            this.visible = true;
+        },
+        submitForm() {
+            const that = this;
+            // 触发表单验证
+            this.$refs.form.validate((valid) => {
+                if (valid) {
+                    that.confirmLoading = true;
+                    let httpurl = "";
+                    let method = "";
+                    // if (!this.model.id) {
+                    //     httpurl += this.url.add;
+                    //     method = "post";
+                    // } else {
+                    //     httpurl += this.url.edit;
+                    //     method = "put";
+                    // }
+                    let prices = this.timeData.map(item => {
+                        return {
+                            dayTime: item.day,
+                            price: item.price,
+                            roomId: this.newRoom.roomInfo.id
+                        }
+                    })
+                    // return
+                    httpAction(`/business/busRoomBookingOrders/change-living-room?livingOrderId=${this.model.roomInfo.livingOrderId}&changeRoomId=${this.newRoom.roomInfo.id}`, prices, 'post')
+                        .then((res) => {
+                            if (res.success) {
+                                that.$message.success(res.message);
+                                that.$emit("ok");
+                            } else {
+                                that.$message.warning(res.message);
+                            }
+                        })
+                        .finally(() => {
+                            that.confirmLoading = false;
+                        });
+                }
+            });
+        },
+
+        callback(key) {
+            console.log(key)
+        },
+        handleStartOpenChange(e) {
+            console.log(e)
+            this.dayNum = this.daysBetween(this.model.livingData.livingOrder.dueOutTime, e._d)
+            // this.model.startValue = e._i;
+        },
+        dayChange(e) {
+            console.log(e);
+            this.model.startValue = this.addDate(this.model.livingData.livingOrder.dueOutTime, e);
+        },
+
+        disabledStartDate(endValue) {
+            // const endValue = 
+            const startValue = this.model.livingData.livingOrder.dueOutTime
+            if (!endValue || !startValue) {
+                return false;
+            }
+            return startValue.valueOf() >= endValue.valueOf();
+        },
+    },
+};
+</script>
+
+<style scoped>
+.active {
+    border: 1px solid red !important;
+}
+</style>

src/views/room/modules/fangtaiModal/exchangeHouses/exchangeHousesModal.vue

@@ -0,0 +1,60 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    switchFullscreen
+    @ok="handleOk"
+    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
+    @cancel="handleCancel"
+    cancelText="关闭">
+    <pos-table-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit"></pos-table-form>
+  </j-modal>
+</template>
+
+<script>
+
+  import PosTableForm from './exchangeHousesForm.vue'
+  export default {
+    name: 'PosTableModal',
+    components: {
+      PosTableForm
+    },
+    data () {
+      return {
+        title:'',
+        width:800,
+        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(e){
+        this.$emit('ok', e);
+        this.visible = false;
+      },
+      handleCancel () {
+        this.close()
+      }
+    }
+  }
+</script>

src/views/room/modules/fangtaiModal/lookRoomModal/lookRoomModal.vue

@@ -0,0 +1,60 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    switchFullscreen
+    @ok="handleOk"
+    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
+    @cancel="handleCancel"
+    cancelText="关闭">
+    <pos-table-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit"></pos-table-form>
+  </j-modal>
+</template>
+
+<script>
+
+  import PosTableForm from './lookRoomTable.vue'
+  export default {
+    name: 'PosTableModal',
+    components: {
+      PosTableForm
+    },
+    data () {
+      return {
+        title:'',
+        width:800,
+        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(e){
+        this.$emit('ok', e);
+        this.visible = false;
+      },
+      handleCancel () {
+        this.close()
+      }
+    }
+  }
+</script>

src/views/room/modules/fangtaiModal/lookRoomModal/lookRoomTable.vue

@@ -0,0 +1,239 @@
+<template>
+<a-spin :spinning="confirmLoading">
+    <j-form-container>
+        <a-table :dataSource="dataSource" :columns="columns" :pagination="false">
+            <template slot="action" slot-scope="text, record">
+                <a @click="handleLookRoom()">申请查房</a>
+            </template>
+        </a-table>
+    </j-form-container>
+
+    <a-modal :title="'申请查房'" :visible="visibleLook" @cancel="visibleLook = false" @ok="submitOK">
+        <!-- <j-form-container :disabled="false"> -->
+            <a-form-model-item label="请输入备注">
+                <a-input v-model="model.remarks" placeholder="请输入备注"></a-input>
+            </a-form-model-item>
+        <!-- </j-form-container> -->
+    </a-modal>
+</a-spin>
+</template>
+
+<script>
+import {
+    httpAction,
+    getAction
+} from "@/api/manage";
+import {
+    validateDuplicateValue
+} from "@/utils/util";
+// import {
+//     JeecgListMixin
+// } from '@/mixins/JeecgListMixin'
+
+export default {
+    // mixins: [JeecgListMixin],
+    name: "PosTableForm",
+    components: {},
+    props: {
+        //表单禁用
+        disabled: {
+            type: Boolean,
+            default: true,
+            required: false,
+        },
+    },
+    data() {
+        return {
+            visibleLook: false,
+            queryParam: {
+                hotelId: null,
+                livingOrderId: null,
+            },
+            dataSource: [],
+            columns: [{
+                title: '房号',
+                align: "center",
+                dataIndex: 'roomName'
+            }, {
+                title: '客人姓名',
+                align: "center",
+                dataIndex: 'contactName'
+            }, {
+                title: '房间状态',
+                align: "center",
+                dataIndex: 'roomStatus',
+            }, {
+                title: '入住状态',
+                align: "center",
+                dataIndex: 'createBy'
+            }, {
+                title: '查房状态',
+                align: "center",
+                dataIndex: 'state',
+                //   sorter: true
+            }, {
+                title: '操作',
+                key: 'operation',
+                align: "center",
+                width: 130,
+                scopedSlots: {
+                    customRender: 'action'
+                },
+            }],
+            model: {
+                hotelId: null,
+                remarks:'',
+            },
+            labelCol: {
+                xs: {
+                    span: 24
+                },
+                sm: {
+                    span: 5
+                },
+            },
+            wrapperCol: {
+                xs: {
+                    span: 24
+                },
+                sm: {
+                    span: 16
+                },
+            },
+            confirmLoading: false,
+            validatorRules: {
+                tenantId: [{
+                    required: true,
+                    message: "请输入关联租户!"
+                }],
+                qz: [{
+                    required: true,
+                    message: "请输入餐桌名前缀!"
+                }],
+                hotelId: [{
+                    required: true,
+                    message: "请输入关联酒店!"
+                }],
+                name: [{
+                    required: true,
+                    message: "请输入餐桌名称!"
+                }],
+                posTypeId: [{
+                    required: true,
+                    message: "请输入pos类型id!"
+                }],
+                posTableTypeId: [{
+                    required: true,
+                    message: "请输入pos桌型id!"
+                }],
+                posRegionId: [{
+                    required: true,
+                    message: "请输入pos餐桌区域id!"
+                }],
+                num: [{
+                    required: true,
+                    message: "请输入座位数!"
+                }],
+                tableNo: [{
+                    required: true,
+                    message: "请输入餐桌序号!"
+                }],
+                state: [{
+                    required: true,
+                    message: "请输入状态!"
+                }],
+            },
+            url: {
+                list: "",
+                edit: "/pos/posTable/edit",
+                queryById: "/pos/posTable/queryById",
+            },
+            posTypeList: [],
+            tableTypeList: [],
+            regionList: []
+        };
+    },
+    computed: {
+        formDisabled() {
+            return this.disabled;
+        },
+    },
+    created() {
+        var _info = JSON.parse(localStorage.getItem("storeInfo"));
+        if (_info) {
+            this.model.hotelId = _info.id;
+        }
+        //备份model原始值
+        this.modelDefault = JSON.parse(JSON.stringify(this.model));
+        getAction("/pos/posType/list", {
+            hotelId: _info.id,
+            pageNo: 1,
+            pageSize: 100,
+        }).then((res) => {
+            if (res.success) {
+                this.posTypeList = res.result.records;
+                // this.model.posTypeId = this.posTypeList[0].id;
+            }
+        });
+        getAction("/pos/posTableType/list", {
+            hotelId: _info.id,
+            pageNo: 1,
+            pageSize: 100,
+        }).then((res) => {
+            if (res.success) {
+                this.tableTypeList = res.result.records;
+            }
+        });
+        getAction("/pos/posRegion/list", {
+            hotelId: _info.id,
+            pageNo: 1,
+            pageSize: 100,
+        }).then((res) => {
+            if (res.success) {
+                this.regionList = res.result.records;
+            }
+        });
+    },
+    methods: {
+        add() {
+            this.edit(this.modelDefault);
+        },
+        loadData() {
+            getAction(`/fw/fwRoomExamine/list?livingOrderId=${this.model.roomInfo.livingOrderId}`).then(res => {
+                console.log(res);
+                if (res.success) {
+                    this.dataSource = res.result.records;
+                } else {
+                    this.$message.warning(res.message);
+                }
+            })
+        },
+        edit(record) {
+            this.model = Object.assign({}, record);
+            this.queryParam.livingOrderId = record.roomInfo.livingOrderId;
+            this.loadData()
+
+            this.visible = true;
+        },
+        submitOK(){
+            this.confirmLoading = true;
+            console.log(this.model);
+            httpAction("/fw/fwRoomExamine/edit", {
+                livingOrderId: this.model.roomInfo.livingOrderId,
+                remark: this.model.remarks
+            },'post').then(res => {
+                this.confirmLoading = false;
+                if (res.success) {
+                    this.$message.success("申请成功");
+                    this.visibleLook = false;
+                } else {
+                    this.$message.warning(res.message);
+                }
+            })
+        },
+        handleLookRoom(record) {
+            this.visibleLook = true;
+        },
+    },
+};
+</script>