hotel-saas-tenant-frontend/src/views/settings/components/roomModules/hourRoomRule/hourRoomForm.vue

<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model
        labelAlign="left"
        ref="form"
        :model="model"
        layout="horizontal"
        :rules="validatorRules"
        slot="detail"
      >
      <a-form-model-item
          label="名称"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop="hourRoomName"
        >
          <a-input
            style="width: 50%"
            v-model="model.hourRoomName"
            :min="1"
            placeholder="名称"
          />
        </a-form-model-item>
        <div class="item-wrapper">
          <div class="wrapper-content"><span style="color:red;">*</span>1、开房后</div>
          <div class="wrapper-form-item" style="width: 98px">
            <a-form-model-item
              label=""
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="afterOpenRoom"
            >
             <a-input-number v-model="model.afterOpenRoom" placeholder="请填写" />
            </a-form-model-item>
          </div>
          <div class="wrapper-content">
            分钟内按
          </div>
          <div class="wrapper-form-item" style="width: 98px">
            <a-form-model-item
              label=""
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="afterOpenRoomPay"
            >
             <a-input-number v-model="model.afterOpenRoomPay" placeholder="请填写" />
            </a-form-model-item>
          </div>
          <div class="wrapper-content">
            元收取
          </div>
        </div>
        <div class="item-wrapper">
          <div class="wrapper-content"><span style="color:red;">*</span>2、超时之后每</div>
          <div class="wrapper-form-item" style="width: 98px">
            <a-form-model-item
              label=""
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="exceedTime"
            >
             <a-input-number v-model="model.exceedTime" placeholder="请填写" />
            </a-form-model-item>
          </div>
          <div class="wrapper-content">
            分钟收取
          </div>
          <div class="wrapper-form-item" style="width: 98px">
            <a-form-model-item
              label=""
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="exceedPay"
            >
             <a-input-number v-model="model.exceedPay" placeholder="请填写" />
            </a-form-model-item>
          </div>
          <div class="wrapper-content">
            元，不足
          </div>
          <div class="wrapper-form-item" style="width: 98px">
            <a-form-model-item
              label=""
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="exceedTime"
            >
             <a-input-number v-model="model.exceedTime" placeholder="请填写" />
            </a-form-model-item>
          </div>
          <div class="wrapper-content">
            分钟，超过
          </div>
          <div class="wrapper-form-item" style="width: 98px">
            <a-form-model-item
              label=""
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="notReachExceedTime"
            >
             <a-input-number v-model="model.notReachExceedTime" placeholder="请填写" />
            </a-form-model-item>
          </div>
          <div class="wrapper-content">
            分钟加收
          </div>
          <div class="wrapper-form-item" style="width: 98px">
            <a-form-model-item
              label=""
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="notReachExceedTimePay"
            >
             <a-input-number v-model="model.notReachExceedTimePay" placeholder="请填写" />
            </a-form-model-item>
          </div>
          <div class="wrapper-content">
            元
          </div>
        </div>
        <div class="item-wrapper">
          <div class="wrapper-content"><span style="color:red;">*</span>3、封顶；</div>
          <div class="wrapper-form-item" style="width: 98px">
            <a-form-model-item
              label=""
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="maxExtraPay"
            >
             <a-input-number v-model="model.maxExtraPay" placeholder="请填写" />
            </a-form-model-item>
          </div>
          <div class="wrapper-content">
            元封顶 注意：0元视为不封顶
          </div>
        </div>
        <div class="item-wrapper">
          <div class="wrapper-content"><span style="color:red;">*</span>4、消费超过</div>
          <div class="wrapper-form-item" style="width: 98px">
            <a-form-model-item
              label=""
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="limitTimeTransferAllDay"
            >
             <a-input-number v-model="model.limitTimeTransferAllDay" placeholder="请填写" />
            </a-form-model-item>
          </div>
          <div class="wrapper-content">
            分钟，自动转为全天房 注意：0分钟视为不自动转全天房
          </div>
        </div>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>
<script>
import { getRoomPlans, getSelectList } from "@/api/api";
import { httpAction, getAction } from "@/api/manage";
import { validateDuplicateValue } from "@/utils/util";
import { saveHourRule,editHourRule } from '@/api/allDaysPriceRuleApi.js' 

export default {
  name: "BusMarketMemberForm",
  props: {
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
  },
  data() {
    return {
      model: {
        id: "",
        hourRoomName: "",
        afterOpenRoom: 60, // 钟点时间周期
        afterOpenRoomPay: 108, //钟点单价
        exceedTime: 60, // 超时周期
        exceedPay: 20, //超时周期付费
        notReachExceedTime:20, // 未超时周期
        notReachExceedTimePay: 10,// 未超时周期付费
        maxExtraPay: 0,// 封顶
        limitTimeTransferAllDay: 0, //超时多少分钟自动转全天房 0 不自动转
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 1 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      validatorRules: {
        hourRoomName: [{ required: true, message: "请输入!" }],
        afterOpenRoom: [{ required: true, message: "请输入!" }],
        afterOpenRoomPay: [{ required: true, message: "请输入!" }],
        exceedTime: [{ required: true, message: "请输入!" }],
        exceedPay: [{ required: true, message: "请输入!" }],
        notReachExceedTime: [{ required: true, message: "请输入!" }],
        notReachExceedTimePay: [{ required: true, message: "请输入!" }],
        maxExtraPay: [{ required: true, message: "请输入!" }],
        limitTimeTransferAllDay: [{ required: true, message: "请输入!" }],
      },
      url: {
        add: "/rooms/cesRoomLayout/save",
        edit: "/rooms/cesRoomLayout/modify",
        queryById: "/rooms/cesRoomLayout/queryById",
      },
      iconChooseVisible: false,
      roomPlans: [],
      members: [],
    };
  },
  computed: {
    formDisabled() {
      return this.disabled;
    },
  },
  created() {
    var _info = JSON.parse(localStorage.getItem("storeInfo"));
    if (_info) {
      this.model.hotelId = _info.id;
      this.initData();
    }
    this.modelDefault = JSON.parse(JSON.stringify(this.model));
  },
  methods: {
    initData() {
      getRoomPlans(this.model.hotelId, null).then((res) => {
        if (res.success) {
          this.roomPlans = res.result;
        }
      });
    },
    selectIcons() {
      this.iconChooseVisible = true;
    },
    handleIconCancel() {
      this.iconChooseVisible = false;
    },
    handleIconChoose(value) {
      console.log(value);
      this.model.icon = value;
      this.iconChooseVisible = false;
    },
    add() {
      this.edit(this.modelDefault);
    },
    edit(record) {
      this.model = Object.assign({}, record);
      this.visible = true;
      getSelectList({ id: this.model.id }).then((res) => {
        if (res.success) {
          this.members = res.result;
        }
      });
    },
    submitForm() {
      const that = this;
      // 触发表单验证
      this.$refs.form.validate((valid) => {
        if (valid) {
          that.confirmLoading = true;
          if(this.model.id) {
            editHourRule(this.model).then(res => {
                if(res.code == 200 )  {
                    this.confirmLoading = false
                    this.model = {
                        id: "",
                        hourRoomName: "",
                        afterOpenRoom: 60, // 钟点时间周期
                        afterOpenRoomPay: 108, //钟点单价
                        exceedTime: 60, // 超时周期
                        exceedPay: 20, //超时周期付费
                        notReachExceedTime:20, // 未超时周期
                        notReachExceedTimePay: 10,// 未超时周期付费
                        maxExtraPay: 0,// 封顶
                        limitTimeTransferAllDay: 0, //超时多少分钟自动转全天房 0 不自动转
                    }
                    this.$message.success('保存成功')
                    this.$emit('ok')
                }
            }).finally(_ => {
                this.confirmLoading = false
            })
            return
          }
          saveHourRule(this.model).then(res => {
            if(res.code == 200 )  {
                this.confirmLoading = false
                this.model = {
                    id: "",
                    hourRoomName: "",
                    afterOpenRoom: 60, // 钟点时间周期
                    afterOpenRoomPay: 108, //钟点单价
                    exceedTime: 60, // 超时周期
                    exceedPay: 20, //超时周期付费
                    notReachExceedTime:20, // 未超时周期
                    notReachExceedTimePay: 10,// 未超时周期付费
                    maxExtraPay: 0,// 封顶
                    limitTimeTransferAllDay: 0, //超时多少分钟自动转全天房 0 不自动转
                }
                this.$message.success('保存成功')
                this.$emit('ok')
            }
          }).finally(_ => {
            this.confirmLoading = false
          })
        }
      });
    },
  },
};
</script>
<style lang="css" scoped>
.avatar-uploader > .ant-upload {
  width: 104px;
  height: 104px;
}
/deep/ .ant-form-explain {
  width: 200% !important;
}
.item-wrapper {
  display: flex ;
  width: 100%;
  align-items: center;
  height: 50px;
  margin-top: 22px;
  margin-bottom: 22px;
}
.wrapper-form-item {
  height: 38px;
  /* margin-top: 22px; */
}
.item-data-wrapper {
  margin-top: 0 !important;
  border-top: 2px solid #1890ff;
  width: fit-content;
  padding: 0 40px;
  background-color: #1890ff;
  border-top-right-radius: 4px;
  color: white;
}
.header-title {
  font-weight: 600;
  width: fit-content;
  padding: 10px 20px;
  background-color: #1890ff;
  color: white;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
</style>