hotel-saas-tenant-frontend/src/views/settings/components/pos/tabletOrdering.vue

<template>
<!-- <a-spin :spinning="confirmLoading"> -->
    <j-form-container :disabled="false">
        <a-form-model ref="form" :model="model" layout="horizontal" slot="detail">
            <!-- 1 -->
            <div class="item-wrapper">
                <div class="wrapper-content">结账模式：</div>
                <div class="wrapper-form-item">
                    <a-form-model-item label="" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
                        <a-radio-group :options="options" v-model="model.type" @change="onChangeType" />
                    </a-form-model-item>
                </div>
                <div class="wrapper-content">

                </div>
            </div>

            <!-- 2 -->
            <div class="item-wrapper">
                <div class="wrapper-content">验证场景：</div>
                <div class="wrapper-form-item">
                    <a-form-model-item label="" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="leaveTime">
                        <a-checkbox-group v-model="model.value" name="checkboxgroup" :options="plainOptions" @change="onChangeCJ" />
                    </a-form-model-item>
                </div>
            </div>

            <!-- 3 -->
            <div class="item-wrapper">
                <div class="wrapper-content">验证方式：动态码验证</div>
            </div>
            <div class="buttons">
                <a-button style="margin-right: 10px" @click="reload">刷新</a-button>
                <a-button type="primary" @click="save">保存</a-button>
            </div>
        </a-form-model>
    </j-form-container>
<!-- </a-spin> -->
</template>

<script>
import {
    fetch,
    save
} from "@/api/allDaysPriceRuleApi";
import {
    getAllLayouts
} from "@/api/roomLayout";
import moment from 'moment'

let hotelInfo = JSON.parse(localStorage.getItem("storeInfo"))
export default {
    data() {
        return {
            labelCol: {
                xs: {
                    span: 0
                },
                sm: {
                    span: 0
                },
            },
            wrapperCol: {
                xs: {
                    span: 24
                },
                sm: {
                    span: 24
                },
            },
            options: [{
                    label: '前台结账',
                    value: 0
                },
                {
                    label: '平板结账',
                    value: 1
                }
            ],
            plainOptions: ['顾客切换至服务员', '顾客下单需服务员确认'],
            model: {
                type: 0,
            },
            confirmLoading:true,
        };
    },
    mounted() {

    },
    methods: {
        onChangeType(e){
            console.log(e);
        },
        onChangeCJ(e){
            console.log(e);
        },
        reload() {
            this.confirmLoading = true
            this.loadLayouts()
            setTimeout(_ => {
                this.$message.success('刷新成功')
                this.confirmLoading = false
            }, 800)

        },
        save() {
            return
            const that = this;
            // 触发表单验证
            this.$refs.form.validate((valid) => {
                if (valid) {
                    that.confirmLoading = true;
                    let layoutRules = []
                    if (this.model.timeOutRule == 1 && this.model.ruleType == 2) {
                        this.layouts.forEach(s => {
                            let pushItem = {
                                hotelId: hotelInfo.id,
                                roomLayoutId: s.id,
                                minute: s.minute,
                                price: s.price,
                                moreThenMinute: s.moreThenMinute,
                                moreThenPrice: s.moreThenPrice,
                            }
                            if (s.mId) {
                                pushItem['id'] = s.mId
                            }
                            layoutRules.push(pushItem)
                        })
                    }
                    let param = {
                        hotelId: hotelInfo.id,
                        enterTime: moment(this.model.enterTime, "HH:mm").utcOffset(8).format("HH:mm"),
                        leaveTime: moment(this.model.leaveTime, "HH:mm").utcOffset(8).format("HH:mm"),
                        timeOutRule: this.model.timeOutRule,
                        ruleType: this.model.ruleType,
                        minute: this.model.minute,
                        price: this.model.price,
                        moreThenMinute: this.model.moreThenMinute,
                        moreThenPrice: this.model.moreThenPrice,
                        endTime: moment(this.model.endTime, "HH:mm").utcOffset(8).format("HH:mm"),
                        dayTime: this.model.dayTime,
                        roomLayoutRules: layoutRules
                    }
                    if (this.model.id) {
                        param['id'] = this.model.id
                    }
                    save(param).then(res => {
                        if (res.code == 200) {
                            this.$message.success("保存成功")
                            this.loadRules()
                        }
                    }).finally(_ => {
                        that.confirmLoading = false;
                    })
                }
            });
        },
    },
};
</script>

<style lang="css" scoped>
/deep/ .ant-form-explain {
    width: 300% !important;
}

.item-wrapper {
    display: flex;
    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>