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

<template>
  <j-modal
    :width="width"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    :confirmLoadingTwo="confirmLoading"
    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
    @cancel="handleCancel"
    cancelText="关闭"
    :class="livingStatu === -1 ? 'ant-modal-header_living' : 'ant-modal-header_leave'"
  >
    <template slot="title">
      <div
        style="
        display: flex;
        height: 80px;">
        <div class="menu" v-if="livingStatu === -1">
          <a-icon @click="adjustPrice" type="account-book" style="color: #fff; font-size: 30px; width:120px; align-self: center;" />
          <a-button @click="adjustPrice" type="link" style="width: 120px; text-align: center; align-self: center"> 调价 </a-button>
        </div>
        <div class="menu" v-if="livingStatu === -1">
          <a-icon @click="handleLeaseGoods" type="block" style="color: #fff; font-size: 30px; width:120px; align-self: center;" />
          <a-button type="link" @click="handleLeaseGoods" style="width: 120px; text-align: center; align-self: center">
            物品借用
          </a-button>
        </div>
        <div class="menu" v-if="livingStatu === -1">
          <a-icon @click="handleMessage" type="message" style="color: #fff; font-size: 30px; width:120px; align-self: center;" />
          <a-button @click="handleMessage" type="link" style="width: 120px; text-align: center; align-self: center"> 客户留言 </a-button>
        </div>
        <div class="menu" v-if="livingStatu === -1">
          <a-icon @click="handleUnion" type="retweet" style="color: #fff; font-size: 30px; width:120px; align-self: center;" />
          <a-button @click="handleUnion" type="link" style="width: 120px; text-align: center; align-self: center">联房</a-button>
        </div>
        <div class="menu" v-if="livingStatu === -1">
          <a-icon @click="handleLeaveNotSettle" type="euro" style="color: #fff; font-size: 30px; width:120px; align-self: center;" />
          <a-button @click="handleLeaveNotSettle" type="link" style="width: 120px; text-align: center; align-self: center">
            先走不结
          </a-button>
        </div>
        <div class="menu" v-else-if="livingStatu === 1">
          <a-icon @click="cancelHandleLeaveNotSettle" type="euro" style="color: #fff; font-size: 30px; width:120px; align-self: center;"/>
          <a-button @click="cancelHandleLeaveNotSettle" type="link" style="width: 120px; text-align: center; align-self: center">
            撤销结账
          </a-button>
        </div>
        <div class="menu" v-else>
          <a-icon @click="cancelHandleLeaveNotSettle" type="euro" style="color: #fff; font-size: 30px; width:120px; align-self: center;" />
          <a-button @click="cancelHandleLeaveNotSettle" type="link" style="width: 120px; text-align: center; align-self: center">
            撤销先走不结
          </a-button>
        </div>
        <div class="menu">
          <a-icon
            type="printer"
            style="color: #fff; font-size: 30px; width:120px; align-self: center;"
          /><a-button type="link" style="width: 120px; text-align: center; align-self: center"> 打印账单 </a-button>
        </div>
        <div class="menu">
          <a-icon
            type="container"
            style="color: #fff; font-size: 30px; width:120px; align-self: center;"/>
          <a-button type="link" style="width: 120px; text-align: center; align-self: center"> 自定义账单 </a-button>
        </div>
      </div></template>
    <bill-room-info ref="realForm" @ok="submitCallback" @changeLoading="changeLoading" @changeLivingStatu="(e) =>{livingStatu = e}"></bill-room-info>
  </j-modal>
</template>

<script>
import BillRoomInfo from './BillRoomInfo'
import { getAction, httpAction } from '@api/manage'

export default {
  name: 'BillRoomInfoModal',
  components: {
    BillRoomInfo
  },
  data() {
    return {
      title: '',
      width: 1500,
      confirmLoading: false,
      visible: false,
      disableSubmit: false,
      /* -1正常入住 1结账退房 2未结退房 */
      livingStatu: null
    }
  },
  methods: {
    add(bookingOrderId, key, roomId, liveOrderId) {
      // let hotelId = roomLive.livingData.livingOrder.hotelId;
      // let obj = {
      //   bookingOrderId: bookingOrderId,
      //   roomId: roomId
      // }
      // getAction('/business/busRoomBookingOrders/canOnlyPaySelf', obj).then(res =>{
          // if (res.result && !confirm('是否团体支付？？')) {
          //   httpAction(
          //       'business/busRoomBookingOrders/split-living?livingOrderId=' +
          //       liveOrderId,
          //       {},
          //       "post"
          //   ).then((res) => {
          //     if (res.success) {
          //       this.visible = true;
          //       this.$nextTick(() => {
          //         this.$refs.realForm.add(res.result, key, roomId);
          //       })
          //     }
          //   });
          // }else {
          //   this.visible = true;
          //   this.$nextTick(() => {
          //     this.$refs.realForm.add(bookingOrderId, key, roomId);
          //   })
          // }
      //   this.visible = true
      //   this.$nextTick(() => {
      //     this.$refs.realForm.add(bookingOrderId, key, roomId);
      //   })
      //
      // });
      this.visible = true
      this.$nextTick(() => {
        this.$refs.realForm.add(bookingOrderId, key, roomId)
      })
    },
    getOrder() {

    },
    edit(record) {
      this.visible = true
      this.$nextTick(() => {
        this.$refs.realForm.edit(record)
      })
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      this.$refs.realForm.submitForm()
    },
    handleUnion() {
      this.$refs.realForm.addUnion()
    },
    handleMessage() {
      this.$refs.realForm.addMessage()
    },
    handleLeaseGoods() {
      this.$refs.realForm.addLeaseGoods()
    },
    handleLeaveNotSettle() {
      let that = this
      this.$confirm({
        title: '先走不结',
        content: '确认先走不结吗?',
        onOk: function () {
          that.$refs.realForm.handleLeaveNotSettle(true)
        }
      })
    },
    cancelHandleLeaveNotSettle() {
      this.$refs.realForm.handleLeaveNotSettle(false)
    },
    submitCallback() {
      this.$emit('ok')
      // this.visible = false;
    },
    handleCancel() {
      this.close()
    },
    adjustPrice() {
      this.$refs.realForm.adjustPrice()
    },
    changeLoading(e) {
      console.log('进来了加载', e)
      this.confirmLoading = e
    }
  }
}
</script>
<style lang="less">
.ant-modal-header_living{
  .ant-modal-header{
    background: rgba(255, 141, 26, 1) !important;
  }
}

.ant-modal-header_leave{
  .ant-modal-header{
    background: rgb(119, 116, 113) !important;
  }
}
</style>

<style scoped>
/deep/ .ant-btn-link {
  flex: 1;
  color: #fff;
}
.menu {
  display: flex;
  flex-direction: column;
  flex: 1;
  color: #fff;
  margin-top: 12px;
}
/deep/.ant-modal-header {
  padding: 0;
  background-color: rgb(255, 141, 26);
}
/deep/.ant-modal-close {
  color: #fff;
}

/deep/.ant-modal-body {
  padding: 12px;
  max-height: calc(80vh - 150px);
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 6px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }

  &::-webkit-scrollbar-thumb {
    background: #e3e3e6;
    border-radius: 6px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 5px;
  }
}

</style>