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="guestSource">
                    <a-select
                            v-model="model.guestSource"
                            placeholder="请选择客人来源"
                            :allowClear="true"
                    >
                        <a-select-option :value="item.id" v-for="(item,index) in customerSourceList" :key="index">{{ item.itemText }}</a-select-option>
                    </a-select>
                </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="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">
                            <a-range-picker @change="onCheckTimeChange" v-model="checkTimeRange" format="YYYY-MM-DD 00:00:00" v-if="model.checkInTime == 1" />
                        </a-col>
                    </a-row>
                </a-form-model-item>
                <a-form-model-item label="周末假日" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="weekends">
                    <a-checkbox-group v-model="model.weekends" @change="onChange">
                        <a-checkbox :value="item.value" v-for="item in weeks" :key="item.value">
                            {{ item.text }}
                        </a-checkbox>
                    </a-checkbox-group>
                </a-form-model-item>
                <a-form-model-item label="节假日" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="holiday">
                    <a-date-picker valueFormat="YYYY-MM-DD"
                                   v-model="model.holiday"
                                   :open='open'
                                   type="dates"
                                   :showToday="false"
                                   @ok="handleOk"
                                   @change="handleChange"
                                   @openChange="openChangeOne"
                                   @panelChange="panelChangeOne">
                        <template slot="renderExtraFooter" style="float: right">
                            <a-button slot="addon" size="small" @click="handleHolidCancel">
                                取消
                            </a-button>
                            <a-button class="margin_left_6" slot="addon" size="small" type="primary" @click="handleHolidConfirm">
                                确定
                            </a-button>
                        </template>
                    </a-date-picker>
                </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="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 { validateDuplicateValue } from "@/utils/util";
    import { initDictOptions } from '@/components/dict/JDictSelectUtil'
    import moment from 'moment'
    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: "请输入房价方案!" }],
                    number: [{ required: true, message: "请输入编号!" }],
                    guestSource: [{ required: true, message: "请选择客人来源!" }],
                    guestType: [{ required: true, message: "请选择客人类型!" }],
                    checkInTime: [{ required: true, message: "请选择入住时间!" }],
                    validTime: [{ required: true, message: "请选择有效期!" }],
                    open: [{ required: true, message: "请选择是否开启!" }],
                    sort: [{ 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:[],
            };
        },
        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;
                        }
                    }
                }).finally(() => {
                    that.confirmLoading = false;
                })

                //初始化字典 - 客人类型
                initDictOptions('guest_type').then((res) => {
                    if (res.success) {
                        this.guestTypeList = res.result;
                    }
                });
                //初始化字典 - 客人类型
                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.checkTimeRange =
                            [moment(new Date(this.model.startTime)).format('YYYY-MM-DD 00:00:00'),
                                moment(new Date(this.model.endTime)).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');
                }
                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>