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

<template>
  <div>
    <div style="display: flex; gap: 15px">
      <div style="width: 40%">
        <div style="display: flex; justify-content: space-between">
          <h4
            style="
              color: rgba(255, 141, 26, 1);
              font-weight: 600;
              margin-top: 15px;
            "
          >
            入住信息
          </h4>
          <div style="display: flex">
            <div style="display: flex; flex-direction: column">
              <a-icon
                type="clock-circle"
                style="color: rgba(255, 141, 26, 1); font-size: 18px"
              /><a-button type="link"> 叫醒服务 </a-button>
            </div>
            <div style="display: flex; flex-direction: column">
              <a-icon
                type="compass"
                style="color: rgba(255, 141, 26, 1); font-size: 18px"
              /><a-button type="link"> 拆分房间 </a-button>
            </div>
          </div>
        </div>
        <a-divider />
        <a-tabs>
          <a-tab-pane
            :key="item.id"
            :tab="item.roomName"
            v-for="(item, livingIndex) in model.livingRoomIds"
          >
            <a-descriptions :column="2">
              <a-descriptions-item label="主客姓名">
                {{ item.livingCustomers[0].customerName }}
                <a-icon
                  type="edit"
                  style="color: rgba(255, 141, 26, 1); font-size: 18px"
              /></a-descriptions-item>
              <a-descriptions-item label="性别">
                {{
                  item.livingCustomers[0].gender === 1 ? "男" : "女"
                }}</a-descriptions-item
              >
              <a-descriptions-item label="房间数量">
                {{ livingIndex == 0 ? model.livingRoomIds.length : 1 }}间
              </a-descriptions-item>
              <a-descriptions-item label="手机号">
                {{ item.livingCustomers[0].phone }}
                <a-icon
                  type="edit"
                  style="color: rgba(255, 141, 26, 1); font-size: 18px"
              /></a-descriptions-item>

              <a-descriptions-item label="宾客类型">
                {{ customerTypeName(model.orderInfo.customerType) }}
                <a-icon
                  type="edit"
                  style="color: rgba(255, 141, 26, 1); font-size: 18px"
              /></a-descriptions-item>
              <a-descriptions-item label="入住时间">
                {{ model.orderInfo.arrivalTime }}
              </a-descriptions-item>
              <a-descriptions-item label="房价方案"> -- </a-descriptions-item>
              <a-descriptions-item label="预离时间">
                {{ model.orderInfo.dueOutTime }}
              </a-descriptions-item>
              <a-descriptions-item label="订单来源">
                {{ customerSourceName(model.orderInfo.customerSource) }}
                <a-icon
                  type="edit"
                  style="color: rgba(255, 141, 26, 1); font-size: 18px"
              /></a-descriptions-item>
              <a-descriptions-item label="入住类型">
                {{ model.orderInfo.bookingType == 1 ? "全天" : "钟点" }}
              </a-descriptions-item>
              <a-descriptions-item label="入住天数">
                {{ model.orderInfo.dayCount }}
              </a-descriptions-item>
              <a-descriptions-item label="早餐券">
                {{ model.orderInfo.breakfastNum }}
              </a-descriptions-item>
              <a-descriptions-item label="外部单号">
                {{ model.orderInfo.outerOrdersNo }}
              </a-descriptions-item>
              <a-descriptions-item label="销售员工">
                {{ warranterName(model.orderInfo.warranter) }}
                <a-icon
                  type="edit"
                  style="color: rgba(255, 141, 26, 1); font-size: 18px"
              /></a-descriptions-item>
              <a-descriptions-item label="订单备注" :span="2">
                {{ model.orderInfo.remark
                }}<a-icon
                  type="edit"
                  style="color: rgba(255, 141, 26, 1); font-size: 18px"
                />
              </a-descriptions-item>
              <a-descriptions-item
                label="叫醒服务"
                :span="2"
                v-for="(item, index) in wakeList"
                :key="index"
              >
                <a-select
                  style="width: 100px"
                  placeholder="房间号"
                  @change="onChange"
                >
                  <a-select-option value="jack"> 1001 </a-select-option>
                  <a-select-option value="lucy"> 1002 </a-select-option>
                </a-select>
                <a-date-picker
                  style="width: 120px; margin-left: 2px"
                  placeholder="日期"
                  @change="onChange"
                />
                <a-time-picker
                  style="width: 100px; margin-left: 2px"
                  :default-value="moment('12:08', 'HH:mm')"
                  format="HH:mm"
                />
                <a-icon
                  v-if="wakeList.length - 1 == index"
                  type="plus-circle"
                  class="dynamic-delete-button"
                  @click="puls()"
                />
                <a-icon
                  type="minus-circle"
                  style="color: #f56c6c"
                  class="dynamic-delete-button"
                  v-if="wakeList.length > 1"
                  @click="() => remove(index)"
                />
              </a-descriptions-item>
            </a-descriptions>
            <div style="display: flex; justify-content: space-between">
              <h4
                style="
                  color: rgba(255, 141, 26, 1);
                  font-weight: 600;
                  margin-top: 15px;
                "
              >
                同住人
              </h4>
              <div style="display: flex">
                <div style="display: flex; flex-direction: column">
                  <a-icon
                    type="user-add"
                    style="color: rgba(255, 141, 26, 1); font-size: 18px"
                  /><a-button
                    type="link"
                    @click="addlivingCustomer(item.livingOrder.id, item.roomId)"
                  >
                    添加
                  </a-button>
                </div>
              </div>
            </div>
            <div id="livingCustomers-grid">
              <a-row
                v-for="(customer, index) in item.livingCustomers"
                :key="customer.id"
              >
                <template v-if="index > 0">
                  <a-col :span="7"> {{ customer.customerName }} </a-col>
                  <a-col :span="1"
                    >{{ customer.gender == 1 ? "男" : "女" }}
                  </a-col>
                  <a-col :span="8"> {{ customer.certNo }}</a-col>
                  <a-col :span="6"> {{ customer.phone }}</a-col>
                  <a-col :span="2">
                    <a-icon
                      type="minus-circle"
                      style="color: #f56c6c"
                      class="dynamic-delete-button"
                      @click="() => removeLivingCustomer(customer.id)"
                  /></a-col>
                </template>
              </a-row>
            </div>
          </a-tab-pane>
        </a-tabs>
        <!-- <h4
          style="
            color: rgba(255, 141, 26, 1);
            font-weight: 600;
            margin-top: 50px;
          "
        >
          会员信息
        </h4>
        <a-divider />
        <a-descriptions :column="2">
          <a-descriptions-item label="姓名"> 张三 </a-descriptions-item>
          <a-descriptions-item label="证件号"
            >888888888888
          </a-descriptions-item>
          <a-descriptions-item label="卡号"> 1588888888 </a-descriptions-item>
          <a-descriptions-item label="手机号"> 1588888888 </a-descriptions-item>
          <a-descriptions-item label="会员级别"> 金卡 </a-descriptions-item>
          <a-descriptions-item label="余额"> 3000.00元 </a-descriptions-item>
          <a-descriptions-item label="积分"> 888888分 </a-descriptions-item>
        </a-descriptions> -->
      </div>
      <div style="width: 40%">
        <div style="display: flex; justify-content: space-between">
          <h4
            style="
              color: rgba(255, 141, 26, 1);
              font-weight: 600;
              margin-top: 15px;
            "
          >
            消费详情
          </h4>
          <div style="display: flex">
            <div style="display: flex; flex-direction: column">
              <a-icon
                type="import"
                style="color: rgba(255, 141, 26, 1); font-size: 18px"
              /><a-button type="link"> 退单 </a-button>
            </div>
            <div style="display: flex; flex-direction: column">
              <a-icon
                type="tool"
                style="color: rgba(255, 141, 26, 1); font-size: 18px"
              /><a-button type="link"> 补单 </a-button>
            </div>
            <div style="display: flex; flex-direction: column">
              <a-icon
                type="property-safety"
                style="color: rgba(255, 141, 26, 1); font-size: 18px"
              /><a-button type="link"> 部分结账 </a-button>
            </div>
          </div>
        </div>
        <a-divider />
        <a-table
          :columns="columns"
          :data-source="data"
          :pagination="false"
          :scroll="{ y: 160, x: 500 }"
          rowKey="id"
          :rowSelection="{
            selectedRowKeys: selectedRowKeys,
            onChange: onSelectChange,
          }"
        />
        <div
          style="
            color: rgba(255, 87, 51, 1);
            font-weight: 600;
            text-align: right;
          "
        >
          合计消费：2922:00
        </div>
        <div
          style="
            display: flex;
            justify-content: space-between;
            margin-top: 30px;
          "
        >
          <h4
            style="
              color: rgba(255, 141, 26, 1);
              font-weight: 600;
              margin-top: 15px;
            "
          >
            收款详情
          </h4>
          <div style="display: flex">
            <div style="display: flex; flex-direction: column">
              <a-icon
                type="transaction"
                style="color: rgba(255, 141, 26, 1); font-size: 18px"
              /><a-button type="link"> 收款 </a-button>
            </div>
            <div style="display: flex; flex-direction: column">
              <a-icon
                type="trademark"
                style="color: rgba(255, 141, 26, 1); font-size: 18px"
              /><a-button type="link"> 退款 </a-button>
            </div>
            <div style="display: flex; flex-direction: column">
              <a-icon
                type="pound"
                style="color: rgba(255, 141, 26, 1); font-size: 18px"
              /><a-button type="link"> 冲账 </a-button>
            </div>
          </div>
        </div>
        <a-divider />
        <a-table
          :columns="columns2"
          :data-source="data2"
          :pagination="false"
          :scroll="{ y: 160, x: 500 }"
          rowKey="id"
          :rowSelection="{
            selectedRowKeys: selectedRowKeys,
            onChange: onSelectChange,
          }"
        />
        <div
          style="
            color: rgba(255, 87, 51, 1);
            font-weight: 600;
            text-align: right;
          "
        >
          合计收款：2922:00
        </div>
      </div>
      <div style="width: 20%">
        <h4 style="color: rgba(255, 141, 26, 1); font-weight: 600">财务汇总</h4>
        <a-divider />
        <a-descriptions :column="1">
          <a-descriptions-item label="合计收款"> + 2500 </a-descriptions-item>
          <a-descriptions-item label="合计消费">-2500 </a-descriptions-item>
          <a-descriptions-item label="结账应退"> 0 </a-descriptions-item>
        </a-descriptions>

        <a-button @click="handleAdd" type="danger" style="margin-left: 100px"
          >结账退款</a-button
        >
      </div>
    </div>
    <customer-modal ref="modalCustomerForm" @ok="modalFormOk"></customer-modal>
  </div>
</template>

<script>
import { httpAction, getAction, deleteAction } from "@/api/manage";
import { validateDuplicateValue } from "@/utils/util";
import moment from "moment";
import CustomerModal from "./CustomerModal.vue";
const columns = [
  // {
  //     title: "",
  //     dataIndex: "key",
  //     width: 20,
  //   },
  {
    title: "房间号",
    dataIndex: "name",
    width: 80,
  },
  {
    title: "费项",
    dataIndex: "age",
    width: 80,
  },
  {
    title: "入账日期",
    dataIndex: "address",
    width: 100,
  },
  {
    title: "单价",
    dataIndex: "address2",
    width: 60,
  },
  {
    title: "优惠价",
    dataIndex: "address3",
    width: 80,
  },
  {
    title: "数量",
    dataIndex: "address4",
    width: 60,
  },
  {
    title: "小计",
    dataIndex: "address5",
    width: 60,
  },
];
const columns2 = [
  {
    title: "入账时间",
    dataIndex: "name",
    width: 160,
  },
  {
    title: "支付方式",
    dataIndex: "age",
    width: 100,
  },
  {
    title: "备注",
    dataIndex: "remark",
    width: 120,
  },
  {
    title: "金额",
    dataIndex: "amount",
    width: 60,
  },
];
const data = [];
for (let i = 0; i < 100; i++) {
  data.push({
    key: i,
    name: `100${i}`,
    age: "房费",
    address: 280,
  });
}
const data2 = [];
for (let i = 0; i < 8; i++) {
  data2.push({
    key: i,
    name: `2023-02-0${i} 10:52`,
    age: "支付宝",
    remark: "押金",
    amount: 888,
  });
}
const date = new Date();
const endDate = new Date(date.setDate(date.getDate() + 1));
export default {
  name: "BusMeetingRoomForm",
  components: { CustomerModal },
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
  },
  data() {
    return {
      selectedRowKeys: [],
      data,
      columns,
      data2,
      columns2,
      wakeList: [{}],
      model: {
        // data: data,
        orderInfo: {},
        roomIds: [],
        layoutDayPrices: [],
        livingRoomIds: [],
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      validatorRules: {
        dateRange: [{ required: true, message: "请选择维修时间!" }],
        remark: [{ required: true, message: "请输入维修原因!" }],
      },
      url: {
        add: "/business/busMeetingRoom/add",
        edit: "/business/busMeetingRoom/edit",
        queryById: "/business/busMeetingRoom/queryById",
        getBookingOrderInfo:
          "/business/busRoomBookingOrders/getBookingOrderInfo",
      },
      id: "",
      customerSourceList: [],
      warranterList: [],
      key: 0,
    };
  },
  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("/business/busDictItem/list", {
      hotelId: _info.id,
      dictId: "1639538915239743490",
    }).then((res) => {
      if (res.success) {
        this.customerSourceList = res.result.records;
      }
    });
    getAction("/business/busSalesPerson/list", {
      hotelId: _info.id,
      pageNo: 1,
      pageSize: 100,
    }).then((res) => {
      if (res.success) {
        this.warranterList = res.result.records;
      }
    });
  },
  methods: {
    removeLivingCustomer(id) {
      deleteAction("/business/busLivingCustomer/delete", { id: id }).then(
        (res) => {
          if (res.success) {
            this.getBookingOrderInfo();
          }
        }
      );
    },
    addlivingCustomer(id, roomId) {
      console.log(id);
      this.$refs.modalCustomerForm.add(id, roomId);
      this.$refs.modalCustomerForm.title = "添加同住人";
      this.$refs.modalCustomerForm.disableSubmit = false;
    },
    modalFormOk(e) {
      this.getBookingOrderInfo();
    },
    customerTypeName(customerType) {
      switch (customerType) {
        case 1:
          return "散客";
        case 2:
          return "会员";
        case 3:
          return "协议单位";
        case 4:
          return "中介";
        default:
          return "散客";
      }
    },
    warranterName(warranter) {
      var find = this.warranterList.find((t) => t.id == warranter);
      return find ? find.name : "--";
    },
    customerSourceName(customerSource) {
      var find = this.customerSourceList.find((t) => t.id == customerSource);
      return find ? find.itemText : "--";
    },
    getBookingOrderInfo() {
      var obj = {
        bookingNo: this.id,
      };
      if (this.key && this.key == 1) {
        obj = {
          bookingOrderId: this.id,
        };
      }
      getAction(this.url.getBookingOrderInfo, obj).then((res) => {
        if (res.success) {
          var livingRoomId = JSON.parse(
            JSON.stringify(res.result.livingRoomIds[0])
          );
          livingRoomId.id = "1";
          livingRoomId.roomName = "全部";
          var list = [];
          res.result.livingRoomIds.forEach((t) => {
            list = [...list, ...t.livingCustomers];
          });
          livingRoomId.livingCustomers = list;
          res.result.livingRoomIds.unshift(livingRoomId);
          this.model = res.result;
        }
      });
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectionRows = selectionRows;
    },
    handleAdd() {},
    puls() {
      this.wakeList.push({});
    },
    remove(index) {
      this.wakeList.splice(index, 1);
    },
    moment,
    onChange(e) {
      console.log(e);
    },
    add(id, key) {
      this.key = key;
      this.id = id;
      this.edit(this.modelDefault);
      this.getBookingOrderInfo();
    },
    edit(record) {
      this.model = Object.assign({}, record);
      this.visible = true;
    },
    submitForm() {
      const that = this;
      that.$message.warning("未实现");
      return;
      // 触发表单验证
      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";
          }
          httpAction(httpurl, this.model, method)
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message);
                that.$emit("ok");
              } else {
                that.$message.warning(res.message);
              }
            })
            .finally(() => {
              that.confirmLoading = false;
            });
        }
      });
    },
  },
};
</script>
<style scoped>
/deep/ .ant-btn-link {
  flex: 1;
  color: rgba(255, 141, 26, 1) !important;
}
.menu {
  display: flex;
  flex-direction: column;
  flex: 1;
  color: #fff;
  margin-top: 12px;
}
.dynamic-delete-button {
  cursor: pointer;
  position: relative;
  /* top: 4px; */
  margin-left: 5px;
  font-size: 18px;
  color: #1890ff;
  transition: all 0.3s;
}
.dynamic-delete-button:hover {
  color: #777;
}
.dynamic-delete-button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
/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;
}

#livingCustomers-grid [class~="ant-col"] {
  border: #ccc 1px solid;
}
#livingCustomers-grid [class~="ant-col"]:last-child {
  border: 0;
}
</style>