hotel-saas-tenant-frontend/src/views/settings/components/roomModules/modules/housePriceSchemeForm.vue

<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-form-model-item label="房价方案" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="priceScheme">
          <a-input v-model="model.priceScheme" placeholder="请输入房价方案" allowClear></a-input>
        </a-form-model-item>
        <!--                <a-form-model-item label="编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="number">-->
        <!--                    <a-input v-model="model.number" placeholder="请输入编号"></a-input>-->
        <!--                </a-form-model-item>-->
        <a-form-model-item label="客人类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="guestType">
          <a-row>
            <a-col :span="10">
              <a-select
                style="width: 100%"
                v-model="model.guestType"
                placeholder="请选择客人类型"
                :allowClear="true"
                @change="e=>handleGuestType(e)"
              >
                <a-select-option :value="undefined">请选择</a-select-option>
                <a-select-option :value="item.value" v-for="item in guestTypeList" :key="item.value">{{ item.text }}</a-select-option>
              </a-select>
            </a-col>
            <a-col :span="8">
              <a-select
                v-if="model.guestType == 2"
                style="width: 100%"
                v-model="model.martketMemberId"
                placeholder="请选择会员"
                :allowClear="true"
                @change="e=>handleGuestType(e)"
              >
                <a-select-option :value="undefined">请选择</a-select-option>
                <a-select-option :value="item.id" v-for="item in customerList" :key="item.id">{{ item.name }}</a-select-option>
              </a-select>

              <a-select
                v-if="model.guestType == 3"
                style="width: 100%"
                v-model="model.agreementUnitId"
                placeholder="请选择协议单位"
                :allowClear="true"
                @change="e=>handleGuestType(e)"
              >
                <a-select-option :value="undefined">请选择</a-select-option>
                <a-select-option :value="item.id" v-for="item in agreementUnitList" :key="item.id">{{ item.customerName }}</a-select-option>
              </a-select>

              <a-input v-if="model.guestType == 4" style="width: 90%;margin: auto;" v-model="model.mediation" placeholder="请输入名称/简介/联系人"></a-input>
            </a-col>
          </a-row>
        </a-form-model-item>
        <a-form-model-item label="有效期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="validTime">
          <a-radio-group v-model="model.validTime">
            <a-radio :value="0">无限制</a-radio>
            <a-radio :value="1">时间段</a-radio>
          </a-radio-group>
          <a-row>
            <a-col :span="16">
              <a-range-picker @change="onValidTimeChange" v-model="validTimeRange" format="YYYY-MM-DD 00:00:00" v-if="model.validTime == 1" />
            </a-col>
          </a-row>
        </a-form-model-item>
        <a-form-model-item label="入住时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="checkInTime">
          <a-radio-group v-model="model.checkInTime">
            <a-radio :value="0">无限制</a-radio>
            <a-radio :value="1">时间段</a-radio>
          </a-radio-group>
          <a-row>
            <a-col :span="16" v-if="model.checkInTime == 1">
              <a-time-picker v-model="startTime" format="HH:mm"></a-time-picker>
              <a-time-picker v-model="endTime" format="HH:mm"></a-time-picker>
            </a-col>
          </a-row>
        </a-form-model-item>

        <a-form-model-item label="是否开启" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="openValue">
          <a-switch
            checked-children="开启"
            un-checked-children="关闭"
            default-checked
            v-model="model.openValue"
            @change="e=>onOpenChange(e)"/>
        </a-form-model-item>

        <!--                <a-form-model-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="sort">-->
        <!--                    <a-input-number style="width:50%;" v-model="model.sort" :min="0"  placeholder="请填写排序"/>-->
        <!--                </a-form-model-item>-->
      </a-form-model>

    </j-form-container>
  </a-spin>
</template>
<script>
    import { getRoomPlans, getSelectList } from '@/api/api'
    import { httpAction, getAction } from '@/api/manage'
    import { initDictOptions } from '@/components/dict/JDictSelectUtil'
    import moment from 'moment'
    import dayjs from 'dayjs'
    export default {
        name: 'HousePriceSchemeForm',
        props: {
            disabled: {
                type: Boolean,
                default: false,
                required: false
            }
        },
        data() {
            return {
                model: {
                    // weekends:[],
                },
                labelCol: {
                    xs: { span: 24 },
                    sm: { span: 5 }
                },
                wrapperCol: {
                    xs: { span: 24 },
                    sm: { span: 16 }
                },
                confirmLoading: false,
                validatorRules: {
                    priceScheme: [{ required: true, message: '请输入房价方案!' }],
                    guestType: [{ required: true, message: '请选择客人类型!' }],
                    checkInTime: [{ required: true, message: '请选择入住时间!' }],
                    validTime: [{ required: true, message: '请选择有效期!' }],
                    open: [{ required: true, message: '请选择是否开启!' }]
                },
                url: {
                    add: '/rooms/cesHousePriceScheme/save',
                    edit: '/rooms/cesHousePriceScheme/modify',
                    queryById: '/rooms/cesHousePriceScheme/queryById',
                    queryCustomerList: '/org.jeecg.modules.business/busMarketMember/queryList',
                    queryAgreementUnitList: '/business/busMarketAgreementUnit/queryList'
                },
                iconChooseVisible: false,
                customerSourceList: [],
                guestTypeList: [],
                // weeks:[],
                open: false,
                customerList: [],
                agreementUnitList: [],
                checkTimeRange: [],
                validTimeRange: [],
                startTime: null,
                endTime: null
            }
        },
        computed: {
            formDisabled() {
                return this.disabled
            }
        },
        created() {
            var _info = JSON.parse(localStorage.getItem('storeInfo'))
            if (_info) {
                this.model.hotelId = _info.id
                this.initData()
                this.getDictConfig()
            }
            this.modelDefault = JSON.parse(JSON.stringify(this.model))
        },
        methods: {
            initData() {
                getRoomPlans(this.model.hotelId, null).then((res) => {
                    if (res.success) {
                        this.roomPlans = res.result
                    }
                })
            },
            getDictConfig() {
                var that = this
                // 客户来源
                // var param = {
                //     dictName:'客人来源设置'
                // }
                // // var values = JSON.parse(JSON.stringify(param))
                // that.confirmLoading = true;
                // getAction('/business/busDictItem/queryList',param).then((res)=>{
                //     console.log(res)
                //     if(res.success){
                //         if (res.code == 200 && res.result) {
                //             this.customerSourceList = res.result;
                //             this.model.guestSource = res.result[0].id;
                //         }
                //     }
                // }).finally(() => {
                //     that.confirmLoading = false;
                // })

                // 初始化字典 - 客人类型
                initDictOptions('guest_type').then((res) => {
                    if (res.success) {
                        this.guestTypeList = res.result
                    }
                    this.model.guestType = res.result[0].value
                })
                // 初始化字典 - 客人类型
                // initDictOptions('house_price_zmjr').then((res) => {
                //     if (res.success) {
                //         that.weeks = res.result;
                //     }
                // });

                getAction(this.url.queryCustomerList, {}).then((res) => {
                    if (res.success) {
                        this.customerList = res.result
                    } else {

                    }
                })

                getAction(this.url.queryAgreementUnitList, {}).then((res) => {
                    if (res.success) {
                        this.agreementUnitList = res.result
                    } else {

                    }
                })
            },
            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) {
                let _record = record
                // _record.guestType = record.guestType.toString();
                if (record.id) {
                    if (record.open == 1) {
                        _record.openValue = true
                    } else {
                        _record.openValue = false
                    }

                    // if (record.weekend.length > 0){
                    //     _record.weekends = record.weekend.split(',');
                    // }
                } else {
                    _record.checkInTime = 0
                    _record.validTime = 0
                }

                console.log(_record)
                this.model = Object.assign({}, _record)
                this.visible = true
                if (this.model.id) {
                    if (this.model.checkInTime === 1) {
                        this.startTime = moment(this.model.startTime, 'HH:mm')
                        this.endTime = moment(this.model.endTime, 'HH:mm')
                        // this.endTime = moment(this.validTimeRange[0]).format('YYYY-MM-DD 00:00:00')
                    }
                    if (this.model.validTime === 1) {
                        this.validTimeRange =
                            [moment(new Date(this.model.validStartTime)).format('YYYY-MM-DD 00:00:00'),
                                moment(new Date(this.model.validEndTime)).format('YYYY-MM-DD 00:00:00')]
                    }
                }

                getSelectList({ id: this.model.id }).then((res) => {
                    if (res.success) {
                        this.members = res.result
                    }
                })
            },
            onCheckTimeChange(date, dateString) {
                // this.checkStartTime = dateString[0];
                // this.checkEndTime = dateString[1];
                // if (date.length === 0) {
                //     this.checkTimeRange = [];
                // } else {
                //     console.log("这是开始时间", this.$moment(this.checkTimeRange[0]).format('YYYY-MM-DD 00:00:00'));
                //     console.log("这是结束时间", this.$moment( this.checkTimeRange[1]).format('YYYY-MM-DD 00:00:00'));
                // }
            },
            onValidTimeChange(date, dateString) {
                // this.validStartTime = dateString[0];
                // this.validEndTime = dateString[1];
                // if (date.length === 0) {
                //     this.validTimeRange = [];
                // } else {
                //     console.log("这是开始时间", this.$moment(this.validTimeRange[0]).format('YYYY-MM-DD 00:00:00'));
                //     console.log("这是结束时间", this.$moment( this.validTimeRange[1]).format('YYYY-MM-DD 00:00:00'));
                // }
                // console.log(this.validTimeRange.length);
            },
            onOpenChange(e) {
                console.log(e)
                console.log(this.model.openValue)
                // this.model.open = e?1:0;
                // this.model.openValue = e

                // this.model.openValue = !this.model.openValue
                this.model.openValue = e
            },
            submitForm() {
                const that = this
                // 触发表单验证
                if (this.model.checkInTime == 1) {
                    // this.model.startTime =moment(this.checkTimeRange[0]).format('YYYY-MM-DD 00:00:00');
                    // this.model.endTime =moment(this.checkTimeRange[1]).format('YYYY-MM-DD 00:00:00');
                    this.model.startTime = moment(this.startTime).format('HH:mm')
                    this.model.endTime = moment(this.endTime).format('HH:mm')
                }
                if (this.model.validTime == 1) {
                    this.model.validStartTime = moment(this.validTimeRange[0]).format('YYYY-MM-DD 00:00:00')
                    this.model.validEndTime = moment(this.validTimeRange[1]).format('YYYY-MM-DD 00:00:00')
                }
                // this.model.weekend = this.model.weekends.join(',');
                this.model.open = this.model.openValue ? 1 : 0
                console.log(this.model)
                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
                            })
                    }
                })
            },
            onChange() {

            },
            handleHolidCancel() {
                this.open = false
            },
            handleHolidConfirm() {
                this.open = false
            },
            moment,
            range(start, end) {
                const result = []
                for (let i = start; i < end; i++) {
                    result.push(i)
                }
                return result
            },

            disabledDate(current) {
                // Can not select days before today and today
                return current && current < moment().endOf('day')
            },

            disabledDateTime() {
                return {
                    disabledHours: () => this.range(0, 24).splice(4, 20),
                    disabledMinutes: () => this.range(30, 60),
                    disabledSeconds: () => [55, 56]
                }
            },
            // 弹出日历和关闭日历的回调
            openChangeOne(status) {
                if (status) {
                    this.open = true
                }
            },
            // 得到年份选择器的值
            panelChangeOne(value) {
                this.queryParam.year = moment(new Date(value)).format('YYYY')
                this.open = false
            },
            handleOk(e) {
                console.log(e)
            },
            handleChange(e) {
                console.log(e)
                console.log(this.model.holiday)
                this.model.holiday = e + ','
            },
            handleFocus() {
                this.open = true
            },
            handleGuestType(e) {
                console.log(e)
            }
        }
    }
</script>
<style scoped>
    .avatar-uploader>.ant-upload {
        width: 104px;
        height: 104px;
    }
    .margin_left_6{
        margin-left: 6px;
    }
</style>