qimall/addons/ReservationService/backend/views/reserve-order/edit.php

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-image');
ComponentHelper::loadComponentView('com-qq-map');
?>
<div id="app" v-cloak>
    <el-card shadow="never" style="border:0" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <div class="flex flex-x-between flex-y-center">
                <span>{{title}}</span>
                <div class='head-btns'>
                    <el-button type="primary" @click='save'>保存</el-button>
                    <el-button type="info" @click='back'>返回</el-button>
                </div>
            </div>
        </div>

        <div class="table-body">
            <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="150px" size="medium"
                     label-position='left' class="demo-dynamic">
                <div class="basic_set">
                    <div class="common_head flex flex-y-center">
                        <div class='line'></div>
                        <div>基本信息</div>
                    </div>
                    <div class='basic_body'>

                        <el-form-item label="手机号：" prop="mobile" required>
                            <div class="flex flex-y-center">
                                <el-input v-model="ruleForm.mobile" placeholder="请输入手机号"
                                          @change="mobileChange" :disabled="isEdit"></el-input>
                            </div>
                        </el-form-item>
                        <el-form-item label="用户昵称：" prop="nickname" required>
                            <div class="flex flex-y-center">
                                <el-input v-model="ruleForm.nickname" placeholder="请输入用户昵称"
                                          :disabled="isChangeUsername"></el-input>
                            </div>
                        </el-form-item>
                    </div>
                    <div class="common_head flex flex-y-center">
                        <div class='line'></div>
                        <div>预约信息</div>
                    </div>
                    <div class='basic_body'>
                        <el-form-item label="服务和手艺人" prop="master" required>
                            <el-table :data="ruleForm.master">
                                <el-table-column prop="service" label="预约服务">
                                    <template slot-scope="scope">
                                        <el-select v-model="scope.row.sku_id" placeholder="请选择服务"
                                                   @change="changeService" v-if="id==0">
                                            <el-option v-for="item in sku_list" :key="item.id" :label="item.goods_name" :value="item.id">
                                            </el-option>
                                        </el-select>
                                        <span v-if="id>0">{{goods_name}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="master" label="技师">
                                    <!--需要选择完服务后再选择技师-->
                                    <template slot-scope="scope">
                                        <el-select v-model="scope.row.staff_user_id" placeholder="请选择技师"
                                                   :disabled="scope.row.sku_id==0" @change="changeStaff">
                                            <el-option v-for="item in staff_user_list" :key="item.user_id" :label="item.name" :value="item.user_id">
                                            </el-option>
                                        </el-select>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div v-show="serviceDuration" style="margin: 10px">项目时长:{{serviceDuration}}分钟</div>
                        </el-form-item>

                        <el-form-item label="预约到店时间：" prop="at_date" required>
                            <div class="flex flex-y-center">
                                <el-date-picker
                                        v-model="ruleForm.at_date"
                                        type="date"
                                        placeholder="选择日期"
                                        :picker-options="pickerOptionsData"
                                        @change="changeDay"
                                >
                                </el-date-picker>
                                <el-time-picker
                                        v-model="ruleForm.at_time"
                                        :picker-options="{
                                        selectableRange: businessHours
                                        }"
                                        format="HH:mm"
                                        value-format="HH:mm"
                                        placeholder="选择时间"
                                ></el-time-picker>
                            </div>
                        </el-form-item>


                        <el-form-item label="服务类型：" >
                            <el-select disabled style="width: 200px" v-model="ruleForm.service_type"
                                       placeholder="请选择服务类型" clearable
                                       v-if="isEdit ==true && secondary_card_id==0">
                                <el-option  key="1" label="上门服务" value="1"></el-option>
                                <el-option  key="2" label="到店服务" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>

                </div>
            </el-form>
        </div>
    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                title:'添加预约',
                store_name:'',
                sku_list:[],
                staff_user_list:[],
                activeName: '1',
                ruleForm: {
                    mobile:'',
                    nickname:'',
                    at_date:'',
                    at_time:'',
                    goods_id:'',
                    staff_user_id:'',
                    create_type:1,
                    master:[
                        { sku_id: '', staff_user_id: '' },
                    ]
                },

                submitLoading: true,
                dialogVisible: false,
                service_min:'',

                rules: {

                },
                pickerOptionsTime:{
                    start: '08:30',
                    step: '00:60',
                    end: '18:30'
                },
                goods_name: '',
                id: 0,
                isChangeUsername: true,
                isEdit: false, // 是否是编辑模式
                sku_id: '',
                staff_user_id: '',
                pickerOptionsData: {},
                day_arr: [],
                options: [],
                start_time: '',
                end_time: '',
                service_time: 0,
                service_type_arr: [],
                secondary_card_id: 0

            };
        },
        methods: {

            back() {
                window.history.back();
            },
            mobileChange(mobile) {
                request({
                    params: {
                        r: 'reservation-service/reserve-order/get-user',
                        mobile: mobile
                    },
                    method: 'get',
                }).then(e => {
                    if (e.data.code === 0) {
                        if (e.data.data) {
                            this.ruleForm.nickname = e.data.data
                        } else {
                            this.isChangeUsername = false;
                            this.ruleForm.nickname = '';
                        }
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.$message.error(e.data.msg);
                });
            },

            save() {
                this.ruleForm.store_images = this.store_images
                console.log(this.ruleForm)
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        request({
                            params: {
                                r: 'reservation-service/reserve-order/edit',
                            },
                            method: 'post',
                            data: {
                                form: this.ruleForm
                            }
                        }).then(e => {
                            this.submitLoading = false;
                            if (e.data.code === 0) {
                                this.$message.success(e.data.msg);
                                navigateTo({
                                    r: 'reservation-service/reserve-order/index',
                                });
                            } else {
                                this.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            this.submitLoading = false;
                            this.$message.error(e.data.msg);
                        });
                    } else {
                        console.log('error submit!!');
                        this.submitLoading = false;
                        return false;
                    }
                });
            },


            load() {
                request({
                    params: {
                        r: 'reservation-service/reserve-order/edit',
                        id:getQuery('id')
                    },
                    method: 'get',
                }).then(e => {
                    this.submitLoading = false;
                    if (e.data.code === 0) {
                        this.store_name = e.data.data.store_name
                        if(getQuery('id')>0){
                            this.ruleForm = e.data.data.reserve_order;
                            this.goods_name = e.data.data.goods_name;
                            this.staff_user_list = e.data.data.staff_user_list;
                            console.log(this.ruleForm);
                            this.sku_id = this.ruleForm.master[0].sku_id;
                            this.staff_user_id = this.ruleForm.master[0].staff_user_id;
                            this.getReserveDay(this.sku_id, this.staff_user_id);
                            this.isEdit = true;
                            this.service_type_arr = e.data.data.service_type_arr;
                            this.secondary_card_id = this.ruleForm.secondary_card_id;
                            if (this.secondary_card_id == 0) {
                                this.ruleForm.service_type = this.ruleForm.service_type.toString()
                            }
                            // 设置预约服务时长
                            this.service_time = this.ruleForm.master[0].service_min;
                        }
                        this.start_time = e.data.data.start_time;
                        this.end_time = e.data.data.end_time;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.submitLoading = false;
                    this.$message.error(e.data.msg);
                });
            },
            changeService(value){
                for (var element of this.sku_list) {
                    if(element.id==value){
                        this.service_min = element.service_min;
                        break;
                    }
                }
                this.sku_id = value;
                this.getStaffUserList(value);
                // this.getReserveTime(value);
            },
            changeStaff(value) {
                this.staff_user_id = value;
                this.getReserveDay(this.sku_id, value);
            },
            changeDay(value) {
                console.log('===', value)
                this.getReserveTimes(this.sku_id, this.staff_user_id, value);
            },
            getStaffUserList(value){
                request({
                    params: {
                        r: 'reservation-service/reserve-order/get-staff-user-list',
                        sku_id:value
                    },
                    method: 'get',
                }).then(e => {
                    if (e.data.code === 0) {
                        this.staff_user_list = [{name: '暂不选择技师', user_id: 0}, ...e.data.data]
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.$message.error(e.data.msg);
                });
            },
            getReserveTime(sku_id, staff_user_id) {
                request({
                    params: {
                        r: 'reservation-service/reserve-order/get-reserve-time',
                        sku_id: sku_id,
                        staff_user_id: staff_user_id
                    },
                    method: 'get',
                }).then(e => {
                    this.submitLoading = false;
                    if (e.data.code === 0) {
                        this.pickerOptionsTime = e.data.data.picker_options_time;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.$message.error(e.data.msg);
                });
            },
            getReserveTimes(sku_id, staff_user_id, day) {
                request({
                    params: {
                        r: 'reservation-service/reserve-order/get-reserve-times',
                        sku_id: sku_id,
                        staff_user_id: staff_user_id,
                        date: day,
                    },
                    method: 'get',
                }).then(e => {
                    this.submitLoading = false;
                    if (e.data.code === 0) {
                        this.options = e.data.data;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.$message.error(e.data.msg);
                });
            },
            getReserveDay(sku_id, staff_user_id) {
                request({
                    params: {
                        r: 'reservation-service/reserve-order/get-reserve-day',
                        sku_id: sku_id,
                        staff_user_id: staff_user_id
                    },
                    method: 'get',
                }).then(e => {
                    this.submitLoading = false;
                    if (e.data.code === 0) {
                        this.day_arr = e.data.data.day_arr;
                        this.pickerOptionsData = {
                            disabledDate(time) {
                                return !e.data.data.day_arr.includes(time.getTime())
                            },
                        }
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.$message.error(e.data.msg);
                });
            },
            getSkuList(){
                let params = {
                    r: 'reservation-service/reserve-order/get-sku-list',
                };
                request({
                    params: params,
                    method: 'get',
                }).then(e => {
                    this.loading = false;
                    if (e.data.code == 0) {
                        this.sku_list = e.data.data;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.loading = false;
                });
            },

        },
        computed: {
            // 营业时间范围
            businessHours() {
                // 将分钟数转换为时:分:秒格式
                const formatTime = (minutes) => {
                    const hours = Math.floor(minutes / 60);
                    const mins = minutes % 60;
                    return `${hours.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}:00`;
                };

                return `${formatTime(this.start_time)} - ${formatTime(this.end_time)}`;
            },
            serviceDuration() {
                if (this.isEdit && this.service_time) {
                    return this.service_time
                }
                // 新建模式下
                const sku = this.sku_list.find(item => item.id === this.ruleForm.master[0].sku_id);
                return sku?.service_min || 0;
            },
        },
        mounted() {
            if (getQuery('id') > 0) {
                this.id = getQuery('id');

            }
            this.load();
            this.getSkuList();
        }
    });
</script>

<style>
    .table-body {
        padding: 20px;
        background-color: #fff;
    }

    .head-btns .el-button {
        padding: 10px 35px;
    }

    .form-body {
        padding: 10px 20px 20px;
        background-color: #fff;
        margin-bottom: 30px;
    }

    /* 基础设置 */
    .basic_set {
        /* border: 1px solid #CCCCCC; */
        padding: 20px;
        border-radius: 10px;
        overflow-y: auto;
    }

    .common_head {
        border-bottom: 1px solid #CCCCCC;
        padding-bottom: 10px;
        font-size: 15px;
        margin-bottom: 30px;
    }

    .common_head2 {
        padding-bottom: 10px;
        font-size: 15px;
        margin-bottom: 20px;
    }

    .basic_body {
        padding-left: 25px;
        width: 50%;
    }

    .add_user {
        width: 350px;
        padding-left: 70px;
    }

    .line {
        margin-right: 10px;
        width: 5px;
        height: 23px;
        background: #03C5FF;
    }

    .stores {
        margin-bottom: 20px;
    }

    .customize-share-title {
        /* margin-top: 10px; */
        width: 100px;
        height: 100px;
        position: relative;
        cursor: move;
    }

    .del-btn {
        position: absolute;
        right: -8px;
        top: -8px;
        padding: 4px 4px;
        transform: scale(0.8);
    }

    .add-image-btn {
        width: 100px;
        height: 100px;
        color: #419EFB;
        border: 1px solid #e2e2e2;
        cursor: pointer;
        text-align: center;
    }

    .el-date-editor .el-range-separator {
        padding: 0;
    }

    .operate_state {
        padding-left: 15px;
        font-size: 15px;
    }

    .switchStyle {
        transform: scale(1.2);
        margin-left: 10px;
    }

    .switchStyle .el-switch__label {
        position: absolute;
        display: none;
        color: #fff;
    }

    .switchStyle .el-switch__label--left {
        z-index: 9;
        left: 20px;
    }

    .switchStyle .el-switch__label * {
        font-size: 12px !important;
    }

    .switchStyle .el-switch__label--right {
        z-index: 9;
        left: 0px;
    }

    .switchStyle .el-switch__label * {
        font-size: 12px !important;
    }

    .switchStyle .el-switch__label.is-active {
        display: block;
    }

    .switchStyle.el-switch .el-switch__core,
    .el-switch .el-switch__label {
        width: 70px !important;
    }

    .clear_style.el-form-item {
        margin-bottom: 0px;
    }

    .clear_style .el-input--medium .el-input__inner {
        width: 45%;
    }

    .add_radio .el-form-item__content {
        margin-top: 10px;
    }

    @media screen and (max-width: 1400px) {
        .basic_body {
            width: 70%;
        }

        .clear_style .el-input--medium .el-input__inner {
            width: 70%;
        }
    }


    /* 公共样式 */
    .flex {
        display: -webkit-box;
        display: -webkit-flex;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
    }

    .flex-x-center {
        display: -webkit-box;
        display: -webkit-flex;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .flex-x-between {
        display: -webkit-box;
        display: -webkit-flex;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        -webkit-box-pack: space-between;
        -webkit-justify-content: space-between;
        -ms-flex-pack: space-between;
        justify-content: space-between;
    }

    .flex-y-center {
        display: -webkit-box;
        display: -webkit-flex;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        -ms-grid-row-align: center;
        align-items: center;
    }

    /* 溢出隐藏 */
    .over1 {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    .over2 {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
</style>