qimall/addons/Store/client/views/reserve-board/index.php

<div id="app" v-cloak>
    <el-card shadow="never" style="border:0;min-width: 1000px;"
        body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <span>预约看板</span>
        </div>
        <div class="scheduler">
            <div class="date-container">
                <i class="el-icon-arrow-left" @click="prevDay"></i>
                <el-date-picker :editable="false" :clearable="false" format="yyyy/MM/dd" v-model="selectedDate"
                    type="date" size="mini" @change="onDateChange"></el-date-picker>
                <i class="el-icon-arrow-right" @click="nextDay"></i>
            </div>

            <div class="scheduler-main">
                <!--未分配区域-->
                <div class="unassigned-tasks">
                    <el-table :data="unassigned" :height="tableHeight" :cell-class-name="getUnassignedCellClass"
                        v-loading="unassignedLoading" element-loading-text="加载中..."
                        element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, 0.8)">
                        <!-- 未分配 -->
                        <el-table-column :label="`未分配(${unassigned.length || 0})`" align="center">
                            <template slot-scope="scope">
                                <el-popover placement="right" width="300" trigger="hover">
                                    <!-- 预约详情 -->
                                    <div class="task-detail">
                                        <span class="task-detail__label">预约时间</span>
                                        <span class="task-detail__time">
                                            {{ scope.row.schedule.startTime }} - {{ scope.row.schedule.endTime }}
                                        </span>
                                    </div>
                                    <div class="task-detail">
                                        <span class="task-detail__label">项目名称：</span>
                                        <span class="task-detail__project">{{ scope.row.project }}</span>
                                    </div>
                                    <div class="task-detail">
                                        <span class="task-detail__label">服务类型：</span>
                                        <span class="task-detail__service">{{ scope.row.service_type_text }}</span>
                                    </div>
                                    <div class="task-detail">
                                        <span class="task-detail__label">订单编号：</span>
                                        <span class="task-detail__service">{{ scope.row.order_no }}</span>
                                    </div>
                                    <div class="task-actions">
                                        <template v-if="scope.row.server_status !== 4">
                                            <el-button size="mini" @click="canceledRes(scope.row)"
                                                       v-if="[1,2].includes(scope.row.server_status)">
                                                取消预约
                                            </el-button>
                                            <!--<el-button size="mini" @click="confirmToStore(scope.row)"
                                                       v-if="[1].includes(scope.row.server_status) && scope.row.service_type_text === '到店服务'">
                                                确认到店
                                            </el-button>-->
                                            <el-button size="mini" @click="checkAccept(scope.row)"
                                                       v-if="[3].includes(scope.row.server_status)">
                                                确认验收
                                            </el-button>
                                            <el-button size="mini" @click="checkAccept(scope.row)"
                                                       v-if="[2].includes(scope.row.server_status) && scope.row.create_type === 2">
                                                服务完成
                                            </el-button>
                                            <el-button size="mini" @click="canceledOccupy(scope.row)"
                                                       v-if="scope.row.create_type === 3">
                                                取消占用
                                            </el-button>
                                        </template>
                                    </div>
                                    <!-- 使用 slot="reference" 指定触发元素 -->
                                    <div slot="reference" class="task-container"
                                         @click="handleUnassignedClick(scope.row)">
                                        <div class="task-info-row">
                                            <span class="task-name">{{ scope.row.name }}</span>
                                            <span class="task-time">
                                                {{ scope.row.schedule.startTime }} - {{ scope.row.schedule.endTime }}
                                            </span>
                                        </div>
                                        <div class="task-info-row">
                                            <span class="task-phone">{{ scope.row.phone }}</span>
                                            <el-tag v-if="scope.row.server_status === 1 && scope.row.late"
                                                    effect="plain" type="danger" size="mini"
                                                    style="border: none">
                                                迟到{{ scope.row.late }}分钟
                                            </el-tag>
                                        </div>
                                    </div>
                                </el-popover>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!-- 已分配区域 -->
                <el-table ref="tableContainer" row-class-name="dates-row" :cell-class-name="getCellClass"
                    :data="tableData" border :highlight-current-row="false" :height="tableHeight" size="medium"
                    v-loading="technicianLoading" element-loading-text="加载中..."
                    element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, 0.8)">
                    <el-table-column prop="time" label="" class="time" width="80" align="center" fixed>
                        <template slot-scope="scope">
                            {{ scope.row.time }}
                        </template>
                    </el-table-column>

                    <!-- 工作人员 -->
                    <el-table-column v-for="staff in staffs" :key="staff.id" align="center" min-width="150"
                        :prop="staff.label">
                        <template slot="header" slot-scope="scope">
                            <div>
                                <div>{{ staff.name }}</div>
                                <div>id: {{ staff.id}}</div>
                            </div>
                        </template>
                        <template slot-scope="scope">
                            <div :class="['cell-container', scope.row.disabled ? 'is-disabled' : '']">
                                <div v-for="(task, index) in scope.row[staff.label]" :key="index"
                                    :class="['task-container', scope.row[staff.label].length > 1 ? getTaskClass(task) : '']"
                                    @click="handleTaskClick(task)">
                                    <el-popover placement="top" width="300" trigger="hover">
                                        <div class="task-detail" v-if="task.create_type!=3">
                                            <span class="task-detail__label">预约时间</span>
                                            <span class="task-detail__time">
                                                {{ task.schedule.startTime }} - {{ task.schedule.endTime }}
                                            </span>
                                        </div>
                                        <div class="task-detail" v-if="task.create_type!=3">
                                            <span class="task-detail__label">占用时间：</span>
                                            <span class="task-detail__duration">{{ task.duration }}</span>
                                        </div>
                                        <div class="task-detail" v-if="task.create_type==3">
                                            <span class="task-detail__label">占用时间</span>
                                            <span class="task-detail__time">
                                                {{ task.schedule.startTime }} - {{ task.schedule.endTime }}
                                            </span>
                                        </div>
                                        <div class="task-detail" v-if="task.create_type==3">
                                            <span class="task-detail__label">占用时长：</span>
                                            <span class="task-detail__duration">{{ task.duration }}</span>
                                        </div>
                                        <div class="task-detail">
                                            <span class="task-detail__label">占用技师：</span>
                                            <span class="task-detail__staff">{{ task.staff }}</span>
                                        </div>
                                        <div class="task-detail" v-if="task.create_type!=3">
                                            <span class="task-detail__label">项目名称：</span>
                                            <span class="task-detail__project">{{ task.project }}</span>
                                        </div>
                                        <div class="task-detail" v-if="task.create_type!=3">
                                            <span class="task-detail__label">服务类型：</span>
                                            <span class="task-detail__service">{{ task.service_type_text }}</span>
                                        </div>
                                        <div class="task-detail">
                                            <span class="task-detail__label">订单编号：</span>
                                            <span class="task-detail__service">{{ task.order_no }}</span>
                                        </div>
                                        <div class="task-actions">
                                            <template v-if="task.server_status !== 4">
                                                <el-button size="mini" @click="canceledRes(task)"
                                                           v-if="[1,2].includes(task.server_status)">
                                                    取消预约
                                                </el-button>
                                                <el-button size="mini" @click="confirmToStore(task)"
                                                           v-if="[1].includes(task.server_status) && task.service_type_text === '到店服务'">
                                                    确认到店
                                                </el-button>
                                                <el-button size="mini" @click="checkAccept(task)"
                                                           v-if="[3].includes(task.server_status)">
                                                    确认验收
                                                </el-button>
                                                <el-button size="mini" @click="checkAccept(task)"
                                                           v-if="[2].includes(task.server_status) && task.create_type === 2">
                                                    服务完成
                                                </el-button>
                                                <el-button size="mini" @click="canceledOccupy(task)"
                                                           v-if="task.create_type === 3">
                                                    取消占用
                                                </el-button>
                                            </template>
                                        </div>
                                        <div slot="reference" :class="['task-summary',task.className]">
                                            <div class="task-summary__header">
                                                <span class="task-summary__name">{{ task.name }}</span>
                                                <span class="task-summary__time">
                                                    {{ task.schedule.startTime }} - {{ task.schedule.endTime }}
                                                </span>
                                            </div>
                                            <div class="task-summary__phone">{{ task.phone }}</div>
                                        </div>
                                    </el-popover>
                                </div>
                                <!-- 如果没有任务数据，显示空白单元格 -->
                                <div v-if="!scope.row[staff] || scope.row[staff].length === 0" class="empty-cell">
                                    <!-- 空白状态可用样式 -->
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>


            <div class="footer">
                <div class="status-container">
                    <div v-for="(status, index) in statuses" :key="index" class="status-item">
                        <div :class="['status-indicator', status.colorClass]"></div>
                        <span class="status-label">{{ status.label }}</span>
                    </div>
                </div>
                <div>
                    <el-button @click="settingsDialogVisible = true">看板设置</el-button>
                    <el-button @click="showOccupy">占用</el-button>
                    <el-button type="primary" @click="showReserve">新建</el-button>
                </div>
            </div>
        </div>
    </el-card>

    <!--看板设置-->
    <el-dialog title="看板设置" :visible.sync="settingsDialogVisible" width="30%">
        <el-form :model="settingsForm" label-width="80px">
            <el-form-item label="技师显示">
                <el-radio-group v-model="settingsForm.technician_display">
                    <el-radio :label="0">显示全部技师</el-radio>
                    <el-radio :label="1">显示有排班的技师</el-radio>
                </el-radio-group>
            </el-form-item>
            <!--时间间隔选择，-->
            <el-form-item label="时间间隔">
                <el-radio-group v-model="settingsForm.interval">
                    <el-radio :label="15">15分钟</el-radio>
                    <el-radio :label="30">30分钟</el-radio>
                    <el-radio :label="60">1小时</el-radio>
                    <el-radio :label="120">2小时</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmitSettings">确定</el-button>
                <el-button @click="settingsDialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!--添加/修改预约-->
    <el-dialog :title="isEdit ? '修改预约' : '添加预约'" :visible.sync="dialogVisible" class="reserve-dialog"
        @close="handleDialogClose" v-loading="dialogLoading" element-loading-text="加载中...">
        <el-form ref="reserveForm" :model="form" label-width="120px" :rules="reserveRules">
            <div class="title">基本信息</div>
            <el-form-item label="手机号" prop="mobile" required>
                <el-input v-model="form.mobile" placeholder="请输入手机号" @change="mobileChange"
                    :disabled="isEdit"></el-input>
            </el-form-item>
            <el-form-item label="用户名" prop="username" required>
                <el-input v-model="form.username" placeholder="请输入用户名" :disabled="isChangeUsername"></el-input>
            </el-form-item>

            <div class="title">预约信息</div>
            <el-form-item label="预约门店" prop="store" required>
                <b style="color: #333333">{{form.store}}</b>
            </el-form-item>
            <el-form-item label="服务和手艺人" prop="master" required>
                <el-table :data="form.master">
                    <el-table-column prop="service" label="预约服务">
                        <template slot-scope="scope">
                            <template v-if="isEdit">
                                <span>{{ scope.row.goods_name }}</span>
                            </template>
                            <template v-else>
                                <el-select v-model="scope.row.sku_id" placeholder="请选择服务" @change="changeService">
                                    <el-option v-for="item in sku_list" :key="item.id" :label="item.goods_name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </template>
                        </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="!staff_user_list?.length" @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="time-select-container">
                    <el-date-picker v-model="form.at_date" type="date" placeholder="选择日期"
                                    :picker-options="pickerOptionsData" @change="changeDay">
                    </el-date-picker>
                    <el-time-picker
                        v-model="form.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="服务类型" prop="service_type" required>
                <el-select v-model="form.service_type" placeholder="请选择服务类型" :disabled="isEdit && !canEditServiceType">
                    <el-option v-for="option in getServiceTypeOptions()" :key="option.value" :label="option.label"
                        :value="option.value">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" :loading="submitLoading" @click="submitForm">确认预约</el-button>
        </span>
    </el-dialog>

    <!-- 添加占用 -->
    <el-dialog title="添加占用" :visible.sync="occupyDialogVisible" width="500px" @close="handleOccupyDialogClose">
        <el-form :model="occupyForm" :rules="occupyFormRules" ref="occupyForm" label-width="100px" size="small">
            <!-- 技师选择 -->
            <el-form-item label="技师" prop="staff_user_id">
                <el-select v-model="occupyForm.staff_user_id" placeholder="请选择技师" style="width: 100%">
                    <el-option v-for="item in staffs_user_list" :key="item.user_id" :label="item.name"
                        :value="item.user_id">
                    </el-option>
                </el-select>
            </el-form-item>

            <!-- 开始时间选择 -->
            <el-form-item label="开始时间" prop="start_at">
                <el-select v-model="occupyForm.start_at" placeholder="请选择开始时间" style="width: 100%">
                    <el-option v-for="item in occupy_time_range" :key="item.time" :label="item.time" :value="item.time">
                    </el-option>
                </el-select>
            </el-form-item>

            <!-- 占用时长 -->
            <el-form-item label="占用时长" required>
                <div class="time-duration-container">
                    <div class="time-input-group">
                        <el-form-item prop="occupy_hour" class="no-margin">
                            <el-input-number v-model="occupyForm.occupy_hour" :min="0" :max="24" :precision="0"
                                controls-position="right" @change="handleHourChange" class="time-input">
                            </el-input-number>
                        </el-form-item>
                        <span class="time-unit">小时</span>
                    </div>
                    <div class="time-input-group">
                        <el-form-item prop="occupy_minute" class="no-margin">
                            <el-input-number v-model="occupyForm.occupy_minute" :min="0" :max="59" :precision="0"
                                controls-position="right" @change="handleMinuteChange" class="time-input">
                            </el-input-number>
                        </el-form-item>
                        <span class="time-unit">分钟</span>
                    </div>
                </div>
            </el-form-item>

            <!-- 按钮区域 -->
            <el-form-item class="dialog-footer">
                <el-button @click="occupyDialogVisible = false">取 消</el-button>
                <el-button type="primary" :loading="submitLoading" @click="onSubmitOccupyForm('occupyForm')">确 定
                </el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

</div>
<script>

    function elTableScrollToRow($table, rowData) {
        const bodyWrapper = $table.$el.querySelector('.el-table__body-wrapper')
        const rowIndex = $table.data.indexOf(rowData)
        const tr = bodyWrapper.querySelectorAll('tr')[rowIndex]
        if (!bodyWrapper || !tr) {
            return
        }
        bodyWrapper.style.scrollBehavior = 'smooth'
        setTimeout(() => {
            bodyWrapper.scrollTop = tr.offsetTop - 75
        }, 100)
    }

    const app = new Vue({
        el: '#app',
        data() {
            return {
                tableHeight: 650,
                startTime: '08:00',
                endTime: '20:00',
                unassigned: [],
                appointments: [],
                tableData: [],
                staffs: [],
                selectedTask: null,
                selectedDate: new Date(),
                showPicker: false,
                statuses: [
                    { label: '已预约', colorClass: 'bg-blue', value: 1 },
                    { label: '已到店', colorClass: 'bg-yellow', value: 2 },
                    { label: '待验收', colorClass: 'bg-red', value: 3 },
                    { label: '已完成', colorClass: 'bg-green', value: 4 },
                    { label: '已占用', colorClass: 'bg-purple', value: 6 },
                    { label: '休息中', colorClass: 'bg-gray', value: -1 },
                    { label: '空闲中', colorClass: 'bg-write', value: -2 }
                ],
                // 看板设置表单
                settingsDialogVisible: false,
                occupyDialogVisible: false,
                settingsForm: {
                    technician_display: 0, // 0:显示全部技师, 1:显示有排班的技师
                    interval: 30 // 以分钟为单位
                },
                occupyForm: {
                    staff_user_id: '',
                    start_at: '', // 以分钟为单位
                    occupy_hour: 1, // 以分钟为单位
                    occupy_minute: '', // 以分钟为单位
                },
                occupyFormRules: {
                    staff_user_id: [
                        { required: true, message: '请选择技师', trigger: 'change' }
                    ],
                    start_at: [
                        { required: true, message: '请选择开始时间', trigger: 'change' }
                    ],
                    occupy_hour: [
                        { required: true, message: '请输入小时数', trigger: 'blur' },
                        { type: 'number', min: 0, max: 24, message: '小时数必须在0-24之间', trigger: 'blur' }
                    ],
                    occupy_minute: [
                        { required: true, message: '请输入分钟数', trigger: 'blur' },
                        { type: 'number', min: 0, max: 59, message: '分钟数必须在0-59之间', trigger: 'blur' },
                        {
                            validator: (rule, value, callback) => {
                                if (this.occupyForm.occupy_hour === 24 && value !== 0) {
                                    callback(new Error('当小时为24时，分钟必须为0'));
                                } else if (this.occupyForm.occupy_hour === 0 && value === 0) {
                                    callback(new Error('占用时长不能为0'));
                                } else {
                                    callback();
                                }
                            },
                            trigger: 'change'
                        }
                    ]
                },
                dialogVisible: false,
                form: {
                    mobile: '',
                    username: '',
                    store: '',
                    master: [
                        { sku_id: '', staff_user_id: '' },
                    ],
                    at_date: '',
                    at_time: '',
                    // 预约类型：1:上门服务，2:到店服务
                    service_type: '2'
                },
                masters: [
                    { label: '王五', value: '王五' },
                    { label: '李四', value: '李四' },
                    { label: '张三', value: '张三' }
                ],
                staffs_user_list: [],
                occupy_time_range: [],
                start_time: '',
                end_time: '',
                sku_list: [],
                staff_user_list: [],
                // pickerOptionsData: {
                //     disabledDate(time) {
                //         // 禁用今天之前的日期
                //         return time.getTime() < Date.now() - 8.64e7;
                //     },
                // },
                pickerOptionsTime: {
                    start: '08:30',
                    step: '00:60',
                    end: '18:30'
                },
                reserveRules: {
                    mobile: [
                        { required: true, message: '请输入手机号', trigger: ['blur', 'change'] },
                        { pattern: /^1[3-9]\d{9}$/, message: '输入有效的手机号', trigger: 'blur' }
                    ],
                    username: [{ required: true, message: '请输入用户名', trigger: 'change' }],
                    store: [{ required: true, message: '请选择预约门店', trigger: 'change' }],
                    master: [{ required: true, message: '请选择服务和技师', trigger: 'change', }],
                    at_date: [{ required: true, message: '请选择到店日期', trigger: 'change' }],
                    at_time: [{ required: true, message: '请选择到店时间', trigger: 'change' }],
                    service_type: [{ required: true, message: '请选择服务类型', trigger: 'change' }]
                },
                isChangeUsername: true,
                loading: false,  // 全局loading状态
                unassignedLoading: false, // 未分配区域loading状态
                technicianLoading: false, // 技师区域loading状态
                submitLoading: false, // 提交按钮loading状态
                listLoading: false,  // 列表loading状态
                isEdit: false, // 是否是编辑模式
                editId: null, // 编辑的预约ID
                canEditServiceType: false,
                dialogLoading: false, // 弹窗加载状态
                sku_id: '',
                staff_user_id: '',
                pickerOptionsData: {},
                day_arr: [],
                // 预约服务时长,仅编辑模式下使用
                service_time: 0,
                secondary_card_id: 0,
                service_type_arr: [],
            };
        },
        computed: {
            formattedDate() {
                return this.selectedDate.toLocaleDateString();
            },
            currentTime() {
                const now = new Date();
                return now.getHours() * 60 + now.getMinutes();
            },
            serviceDuration() {
                if (this.isEdit && this.service_time) {
                    return this.service_time
                }
                // 新建模式下
                const sku = this.sku_list.find(item => item.id === this.form.master[0].sku_id);
                return sku?.service_min || 0;
            },
            formattedStaffs() {
                return this.staffs.map(staff => ({
                    ...staff,
                    displayName: `${staff.name} (ID: ${staff.id})`
                }));
            },
            // 营业时间范围
            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)}`;
            },
        },
        watch: {
            tableData: {
                handler(newVal) {
                    this.$nextTick(() => {
                        if (this.$refs.tableContainer) {
                            this.$refs.tableContainer.doLayout();
                        }
                    });
                },
                deep: true
            }
        },
        created() {
            this.loadData();
        },
        methods: {
            getUnassignedCellClass({ row }) {
                // 根据预约状态返回对应的背景色类名
                if (!row || !row.server_status) return '';

                const status = this.statuses.find(item => item.value === row.server_status);
                return status ? status.colorClass : '';
            },
            getCellClass({ row, column }) {
                let class_name = row.disabled && 'bg-gray';
                const staffLabel = column.property;
                if (staffLabel === 'time') return '';

                const rowData = row[staffLabel];
                if (rowData && Array.isArray(rowData)) {
                    // 只有一个预约时才设置单元格背景色
                    if (rowData.length === 1 && [1, 2, 3, 4, 6].includes(rowData[0].server_status)) {
                        class_name = this.statuses.find(item => item.value === rowData[0].server_status).colorClass;
                    }
                }
                return class_name;
            },
            generateTimeSlots() {
                const timeSlots = [];
                let startTime = this.start_time;
                const endTime = this.end_time;

                const now = new Date();
                const currentDate = new Date(now.getFullYear(), now.getMonth(), now.getDate()); // 当前日期的0点
                const selectedDate = new Date(this.selectedDate.getFullYear(), this.selectedDate.getMonth(), this.selectedDate.getDate()); // 选择日期的0点

                // 判断是否是过去的日期
                const isPastDate = selectedDate < currentDate;

                // 如果是今天,则需要比较具体时间
                const isToday = selectedDate.getTime() === currentDate.getTime();
                const currentTime = isToday ? now.getHours() * 60 + now.getMinutes() : 0;

                while (startTime <= endTime) {
                    const timeSlot = {
                        time: this.formatTime(startTime),
                        disabled: isPastDate || (isToday && startTime + this.settingsForm.interval < currentTime)  // 修改判断逻辑
                    };

                    // 动态生成每个工作人员的空数组
                    this.staffs.forEach(staff => {
                        timeSlot[staff.label] = [];
                    });

                    timeSlots.push(timeSlot);
                    startTime = startTime + this.settingsForm.interval;
                }

                // 将预约数据合并到时间段中
                this.appointments.forEach(appointment => {
                    // 查找每个appointment的时间
                    const appointmentTimeInMinutes = this.addMinutes(appointment.time, 0).totalMinutes;

                    timeSlots.forEach(slot => {
                        const slotStartTimeInMinutes = this.addMinutes(slot.time, 0).totalMinutes;
                        const slotEndTimeInMinutes = slotStartTimeInMinutes + this.settingsForm.interval;

                        // 如果预约时间处于这个时间段内
                        if (appointmentTimeInMinutes >= slotStartTimeInMinutes && appointmentTimeInMinutes < slotEndTimeInMinutes) {
                            // 为每个工作人员动态添加任务
                            this.staffs.forEach(staff => {
                                if (appointment[staff.label] && appointment[staff.label].length > 0) {
                                    appointment[staff.label].forEach(task => {
                                        slot[staff.label].push(task);
                                    });
                                }
                            });
                        }
                    });
                });

                this.tableData = timeSlots;

                // 滚动到当前时间
                this.$nextTick(() => {
                    this.scrollToCurrentTime();
                })
            },
            taskDetails(task) {
                return {
                    name: `${task.name}`,
                    schedule: `${task.schedule.startTime} - ${task.schedule.endTime}`,
                    duration: `占用时间：${task.schedule.duration}`,
                    staff: `占用技师：${task.staff}`,
                    project: `项目名称：${task.project}`,
                    serviceType: `服务类型：${task.serviceType}`,
                };
            },
            // 前一天
            prevDay() {
                this.selectedDate = new Date(this.selectedDate.setDate(this.selectedDate.getDate() - 1));
                this.loadData();
            },
            // 后一天
            nextDay() {
                this.selectedDate = new Date(this.selectedDate.setDate(this.selectedDate.getDate() + 1));
                this.loadData();
            },
            /**
             * 将分钟转换为时间格式
             *
             * @param minutes
             * @returns {string}
             */
            formatTime(minutes) {
                const hh = Math.floor(minutes / 60).toString().padStart(2, '0');
                const mm = (minutes % 60).toString().padStart(2, '0');
                return `${hh}:${mm}`;
            },
            addMinutes(time, minutesToAdd) {
                let hours, minutes;

                // 判断输入是字符串还是数值
                if (typeof time === 'string') {
                    const [h, m] = time.split(':').map(Number);
                    hours = h;
                    minutes = m;
                } else if (typeof time === 'number') {
                    // 将数字转换为小时和分钟
                    hours = Math.floor(time / 60); // 获取小时部分
                    minutes = time % 60; // 获取分钟部分
                } else {
                    throw new Error('Invalid time format');
                }

                // 创建 Date 对象并增加分钟
                const date = new Date(0, 0, 0, hours, minutes);
                date.setMinutes(date.getMinutes() + minutesToAdd);

                // 格式化返回的时间字符串
                const newHours = String(date.getHours()).padStart(2, '0'); // 确保两位数
                const newMinutes = String(date.getMinutes()).padStart(2, '0'); // 确保两位数

                // 计算总分钟数
                const totalMinutes = date.getHours() * 60 + date.getMinutes();

                return {
                    timeString: `${newHours}:${newMinutes}`,
                    totalMinutes: totalMinutes
                };
            },
            // 判断当前时间是否在指定时间段内
            isInTimeRange(time, startTime, endTime) {
                const currentTime = this.addMinutes(time, 0).totalMinutes;
                const start = this.addMinutes(startTime, 0).totalMinutes;
                const end = this.addMinutes(endTime, 0).totalMinutes;
                return currentTime >= start && currentTime <= end;
            },
            decrementDate() {
                this.selectedDate.setDate(this.selectedDate.getDate() - 1);
            },
            incrementDate() {
                this.selectedDate.setDate(this.selectedDate.getDate() + 1);
            },
            onDateChange() {
                this.showPicker = false;
                this.loadData();
            },
            scrollToCurrentTime() {
                // 当前时间加上时间间隔时间
                const nextTime = this.addMinutes(this.currentTime, this.settingsForm.interval).totalMinutes;

                // 判断当前时间戳所在时间段
                const row = this.tableData.find(slot => {
                    if (this.isInTimeRange(slot.time, this.currentTime, nextTime)) {
                        return slot
                    }
                });
                console.log(row)
                elTableScrollToRow(this.$refs.tableContainer, row)
            },
            onSubmitSettings() {
                this.loadData();
                this.settingsDialogVisible = false;
            },
            submitForm() {
                this.$refs.reserveForm.validate((valid) => {
                    if (valid) {
                        this.submitLoading = true;

                        // 构造提交数据
                        const formData = {
                            form: {
                                ...this.form
                            }
                        };

                        // 编辑模式下，将id添加到form对象中
                        if (this.isEdit) {
                            formData.form.id = this.editId;
                        }

                        request({
                            params: { r: 'store/client/reserve-board/edit' },
                            method: 'post',
                            data: formData
                        }).then(e => {
                            if (e.data.code === 0) {
                                this.$message.success(e.data.msg);
                                this.dialogVisible = false;
                                this.loadData();
                            } else {
                                this.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            this.handleError(e, '提交失败');
                        }).finally(() => {
                            this.submitLoading = false;
                        });
                    }
                });
            },
            getTaskClass(task) {
                // 当单元格中有多个预约时，为每个预约项设置对应的背景色
                if (task && task.server_status) {
                    const status = this.statuses.find(item => item.value === task.server_status);
                    return status ? status.colorClass : '';
                }
                return '';
            },
            loadData() {
                this.unassignedLoading = true;
                this.technicianLoading = true;

                let params = {
                    r: 'store/client/reserve-board/index',
                    date: this.selectedDate,
                    technician_display: this.settingsForm.technician_display
                };

                request({
                    params: params,
                    method: 'get',
                }).then(e => {
                    if (e.data.code == 0) {
                        this.unassigned = e.data.data.unassigned;
                        this.staffs = e.data.data.staffs.map(item => {
                            const [id, name] = item.split(':');
                            return { id, name, label: item }
                        });
                        this.appointments = e.data.data.appointments;
                        this.staffs_user_list = e.data.data.staffs_user_list;
                        this.start_time = e.data.data.start_time;
                        this.end_time = e.data.data.end_time;
                        this.form.store = e.data.data.store_name;
                        this.generateTimeSlots();
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.handleError(e, '加载数据失败');
                }).finally(() => {
                    // 延迟关闭loading，让用户感知到加载过程
                    setTimeout(() => {
                        this.unassignedLoading = false;
                        this.technicianLoading = false;
                    }, 300);
                });
            },
            async confirmAction(message, action) {
                try {
                    await this.$confirm(message, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    });
                    return await action();
                } catch (e) {
                    return Promise.reject(e);
                }
            },
            canceledRes(value) {
                return this.confirmAction('是否取消预约单？', async () => {
                    try {
                        const response = await request({
                            params: {
                                r: 'store/client/reserve-order/cancel'
                            },
                            method: 'post',
                            data: {
                                id: value.id,
                            }
                        })
                        if (response.data.code === 0) {
                            this.$message.success(response.data.msg);
                            await this.loadData();
                        }
                    } finally {
                    }
                });
            },
            canceledOccupy(value) {
                this.loading = true;
                this.$confirm('确定取消该占用？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request({
                        params: {
                            r: 'store/client/reserve-board/cancel-occupy'
                        },
                        method: 'post',
                        data: {
                            id: value.id,
                        }
                    }).then(e => {
                        if (e.data.code === 0) {
                            this.$message.success(e.data.msg);
                            this.loadData();
                        } else {
                            this.$message.error(e.data.msg);
                        }
                    }).catch(e => {
                        console.log(e);
                    });
                }).catch(() => {

                }).finally(() => {
                    this.loading = false;
                })
            },
            confirmToStore(value) {
                this.$confirm('确定到店？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request({
                        params: {
                            r: 'store/client/reserve-order/confirm-to-store'
                        },
                        method: 'post',
                        data: {
                            id: value.id,
                        }
                    }).then(e => {
                        if (e.data.code === 0) {
                            this.$message.success(e.data.msg);
                            this.loadData();
                        } else {
                            this.$message.error(e.data.msg);
                        }
                    }).catch(e => {
                        console.log(e);
                    });
                }).catch(() => {
                });
            },
            checkAccept(value) {
                this.$confirm('确定验收完成订单？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    request({
                        params: {
                            r: 'store/client/reserve-order/check-accept'
                        },
                        method: 'post',
                        data: {
                            id: value.id,
                        }
                    }).then(e => {
                        this.listLoading = false;
                        if (e.data.code === 0) {
                            this.$message.success(e.data.msg);
                            this.loadData();
                        } else {
                            this.$message.error(e.data.msg);
                        }
                    }).catch(e => {
                        console.log(e);
                    });
                }).catch(() => {
                });
            },
            showOccupy() {
                this.resetForms();
                this.occupyDialogVisible = true;
                let params = {
                    r: 'store/client/reserve-board/get-time-range',
                };
                request({
                    params: params,
                    method: 'get',
                }).then(e => {
                    if (e.data.code == 0) {
                        this.occupy_time_range = e.data.data;
                        this.generateTimeSlots();
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.handleError(e, '获取时间范围失败');
                });
            },
            showReserve() {
                // 先重置表单数据
                this.resetForms();
                // 打开弹窗
                this.dialogVisible = true;
                // 获取必要数据
                this.getTimeRange();
                this.getSkuList();
            },
            getTimeRange() {
                let params = {
                    r: 'store/client/reserve-board/get-time-range',
                };
                request({
                    params: params,
                    method: 'get',
                }).then(e => {
                    this.loading = false;
                    if (e.data.code == 0) {
                        this.occupy_time_range = e.data.data;
                        this.generateTimeSlots();
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.loading = false;
                });
            },
            getSkuList() {
                let params = {
                    r: 'store/client/reserve-board/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;
                });
            },
            async changeService(value) {
                this.loading = true
                // 根据服务商品sku_id获取技师列表和预约时间
                await this.getStaffUserList(value);
                // await this.getReserveTime(value);
                this.sku_id = value;

                this.loading = false
            },
            getStaffUserList(value) {
                return new Promise((resolve, reject) => {
                    request({
                        params: {
                            r: 'store/client/reserve-order/get-staff-user-list',
                            sku_id: value
                        },
                        method: 'get',
                    }).then(e => {
                        if (e.data.code === 0) {
                            this.form.staff_user_id = ''
                            this.staff_user_list = [{ name: '暂不选择技师', user_id: 0 }, ...e.data.data]
                            resolve()
                        } else {
                            this.$message.error(e.data.msg);
                            reject()
                        }
                    }).catch(e => {
                        this.$message.error(e.data.msg);
                        reject()
                    });
                })
            },
            getReserveTime(sku_id) {
                return new Promise((resolve, reject) => {
                    request({
                        params: {
                            r: 'store/client/reserve-order/get-reserve-time',
                            sku_id
                        },
                        method: 'get',
                    }).then(e => {
                        if (e.data.code === 0) {
                            // 添加数据校验和默认值处理
                            const pickerOptions = e.data.data.picker_options_time || {};
                            this.pickerOptionsTime = {
                                start: pickerOptions.start || '08:00',  // 默认开始时间
                                step: this.validateTimeStep(pickerOptions.step),  // 验证并修正时间步长
                                end: pickerOptions.end || '20:00'  // 默认结束时间
                            };
                            resolve(e.data.data);
                        } else {
                            this.$message.error(e.data.msg);
                            reject(e);
                        }
                    }).catch(e => {
                        this.$message.error(e.data.msg);
                        reject(e);
                    });
                });
            },
            onSubmitOccupyForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.submitLoading = true;
                        request({
                            params: {
                                r: 'store/client/reserve-board/set-occupy',
                            },
                            method: 'post',
                            data: {
                                form: this.occupyForm,
                                date: this.selectedDate
                            },
                        }).then(e => {
                            if (e.data.code === 0) {
                                this.$message.success(e.data.msg);
                                this.occupyDialogVisible = false;
                                // 重置占用表单数据
                                this.occupyForm = {
                                    staff_user_id: '',
                                    start_at: '',
                                    occupy_hour: 1,
                                    occupy_minute: ''
                                };
                                // 清除表单校验状态
                                this.$nextTick(() => {
                                    if (this.$refs.occupyForm) {
                                        this.$refs.occupyForm.clearValidate();
                                    }
                                });
                                // 重新加载数据
                                this.loadData();
                            } else {
                                this.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            this.$message.error('提交失败');
                        }).finally(() => {
                            this.submitLoading = false;
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            mobileChange(mobile) {
                request({
                    params: {
                        r: 'store/client/reserve-order/get-user',
                        mobile: mobile
                    },
                    method: 'get',
                }).then(e => {
                    if (e.data.code === 0) {
                        if (e.data.data) {
                            this.form.username = e.data.data
                        } else {
                            this.isChangeUsername = false;
                            this.form.username = '';
                        }
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.$message.error(e.data.msg);
                });
            },
            handleError(e, customMessage = '操作失败') {
                let errorMsg = e?.data?.msg || customMessage;
                this.$message.error(errorMsg);
                console.error(e);
            },
            resetForms() {
                if (!this.isEdit) {
                    // 新建时重置所有字段，但保留门店名称
                    const storeName = this.form.store; // 先保存门店名称
                    this.form = {
                        mobile: '',
                        username: '',
                        store: storeName, // 使用保存的门店名称
                        master: [
                            { sku_id: '', staff_user_id: '' }
                        ],
                        at_date: '',
                        at_time: '',
                        service_type: '2'
                    };
                }
                // 重置其他相关状态
                this.isChangeUsername = true;
                this.staff_user_list = [];
                this.sku_list = [];

                // 重置表单校验状态
                this.$nextTick(() => {
                    if (this.$refs.reserveForm) {
                        this.$refs.reserveForm.clearValidate();
                    }
                });
            },
            handleDialogClose() {
                this.resetForms();
                this.dialogVisible = false;
                this.isEdit = false;
                this.editId = null;
            },
            handleOccupyDialogClose() {
                // 重置占用表单数据
                this.occupyForm = {
                    staff_user_id: '',
                    start_at: '',
                    occupy_hour: 1,
                    occupy_minute: ''
                };
                // 清除表单校验状态
                this.$nextTick(() => {
                    if (this.$refs.occupyForm) {
                        this.$refs.occupyForm.clearValidate();
                    }
                });
                this.occupyDialogVisible = false;
            },
            handleHourChange(value) {
                // 如果小时数为24，则分钟必须为0
                if (value === 24) {
                    this.occupyForm.occupy_minute = 0;
                }
                // 如果小时数为0，且分钟也为0，则设置分钟为1
                if (value === 0 && this.occupyForm.occupy_minute === 0) {
                    this.occupyForm.occupy_minute = 1;
                }
            },
            handleMinuteChange(value) {
                // 如果小时数为24，则分钟必须为0
                if (this.occupyForm.occupy_hour === 24) {
                    this.occupyForm.occupy_minute = 0;
                    return;
                }
                // 如果小时数为0，且分钟为0，则设置分钟为1
                if (this.occupyForm.occupy_hour === 0 && value === 0) {
                    this.occupyForm.occupy_minute = 1;
                }
            },
            handleTaskClick(task) {
                // 只有状态为1、2、3时可以修改
                if (!task || ![1, 2, 3].includes(task.server_status)) {
                    return;
                }

                this.isEdit = true;
                this.editId = task.id;
                this.dialogLoading = true; // 开始加载

                // 获取预约详情
                request({
                    params: {
                        r: 'store/client/reserve-board/edit',
                        id: task.id
                    },
                    method: 'get',
                }).then(async e => {
                    if (e.data.code === 0) {
                        const detail = e.data.data;
                        const reserveOrder = detail.reserve_order || {};
                        this.secondary_card_id = reserveOrder.secondary_card_id;
                        this.service_type_arr = detail.service_type_arr;

                        // 设置表单数据
                        this.form = {
                            mobile: reserveOrder.mobile || '',
                            username: reserveOrder.nickname || '',
                            store: detail.store_name || '',
                            master: [
                                {
                                    sku_id: reserveOrder.sku_id || '',
                                    staff_user_id: reserveOrder.staff_user_id || '',
                                    goods_name: detail.goods_name || '' // 预约服务名称
                                }
                            ],
                            at_date: reserveOrder.at_date || '',
                            at_time: reserveOrder.at_time || '',
                            create_type: reserveOrder.create_type,
                            service_type: reserveOrder.service_type
                        };
                        if (this.secondary_card_id == 0) {
                            this.form.service_type = this.form.service_type.toString();
                        }
                        this.sku_id = reserveOrder.sku_id;
                        this.staff_user_id = reserveOrder.staff_user_id;
                        this.getReserveDay(reserveOrder.sku_id, reserveOrder.staff_user_id);

                        // 设置技师列表
                        this.staff_user_list = detail.staff_user_list || [];

                        // 根据 sku_id 获取可选时间
                        if (reserveOrder.sku_id) {
                            try {
                                await this.getReserveTime(reserveOrder.sku_id);
                            } catch (error) {
                                this.handleError(error, '获取预约时间失败');
                            }
                        }

                        // 根据预约创建类型，判断是否可以编辑服务类型
                        this.canEditServiceType = reserveOrder.create_type !== 2;

                        // 设置预约服务时长
                        this.service_time = reserveOrder.master[0].service_min;

                        // 打开弹窗
                        this.dialogVisible = true;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.handleError(e, '获取预约详情失败');
                }).finally(() => {
                    this.dialogLoading = false; // 结束加载
                });
            },
            getServiceTypeOptions() {
                if (this.isEdit) {
                    if (this.secondary_card_id == 0) {
                        return [
                            {label: '上门服务', value: '1'},
                            {label: '到店服务', value: '2'}
                        ];
                    } else {
                        return this.service_type_arr;
                    }

                }
                return [{ label: '到店服务', value: '2' }];
            },
            handleUnassignedClick(task) {
                if (!task) return;

                this.isEdit = true;
                this.editId = task.id;
                this.dialogLoading = true; // 开始加载

                // 获取预约详情
                request({
                    params: {
                        r: 'store/client/reserve-board/edit',
                        id: task.id
                    },
                    method: 'get',
                }).then(async e => {
                    if (e.data.code === 0) {
                        const detail = e.data.data;
                        const reserveOrder = detail.reserve_order || {};

                        // 设置表单数据
                        this.form = {
                            mobile: reserveOrder.mobile || '',
                            username: reserveOrder.nickname || '',
                            store: detail.store_name || '',
                            master: [
                                {
                                    sku_id: reserveOrder.sku_id || '',
                                    staff_user_id: '',  // 未分配的订单没有技师ID
                                    goods_name: detail.goods_name || '' // 预约服务名称
                                }
                            ],
                            at_date: reserveOrder.at_date || '',
                            at_time: reserveOrder.at_time || '',
                            service_type: (reserveOrder.service_type || '2').toString()
                        };
                        this.getReserveDay(reserveOrder.sku_id, reserveOrder.staff_user_id);

                        // 设置技师列表
                        this.staff_user_list = detail.staff_user_list || [];

                        // 根据 sku_id 获取可选时间
                        if (reserveOrder.sku_id) {
                            try {
                                await this.getReserveTime(reserveOrder.sku_id);
                            } catch (error) {
                                this.handleError(error, '获取预约时间失败');
                            }
                        }

                        // 打开弹窗
                        this.dialogVisible = true;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.handleError(e, '获取预约详情失败');
                }).finally(() => {
                    this.dialogLoading = false; // 结束加载
                });
            },
            // 添加验证时间步长的方法
            validateTimeStep(step) {
                // 如果step为空或格式不正确，返回默认值
                if (!step || typeof step !== 'string' || !step.includes(':')) {
                    return '00:30';  // 默认30分钟
                }

                // 解析时间步长
                const [hours, minutes] = step.split(':');

                // 如果解析出的分钟数无效，返回默认值
                if (isNaN(minutes) || minutes === '') {
                    return '00:30';
                }

                // 返回格式化的时间步长
                return `${hours || '00'}:${minutes}`;
            },
            getReserveDay(sku_id, staff_user_id) {
                request({
                    params: {
                        r: 'store/client/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);
                });
            },
            changeDay(value) {
                console.log('===', value)
            },
            changeStaff(value) {
                this.staff_user_id = value;
                this.getReserveDay(this.sku_id, value);
            },
        }
    });
</script>
<style lang="scss">
    .scheduler {
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            background-color: #fff;
            margin-bottom: 10px;
        }

        .date-container {
            width: 150px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            background-color: #fff;
            margin-bottom: 10px;

            .el-date-editor {
                width: 100%;
            }

            .el-input__inner {
                border: none;
                background-color: transparent;
                color: #000;
                padding-right: 0;
            }
        }
    }

    .scheduler-main {
        display: flex;
        gap: 10px;

        .unassigned-tasks {
            width: 200px;
        }
    }

    .dates-row {
        height: 50px;

        .el-table__cell:first-child {
            position: relative;
            border-bottom: none;

            .cell {
                position: absolute;
                top: -10px;
                right: 0;
            }
        }

        &:first-child {
            .el-table__cell:first-child {
                .cell {
                    top: 0;
                }
            }

            td {
                &:first-child {
                    .cell {
                        position: absolute;
                        top: 0;
                    }
                }
            }
        }

        td {
            position: relative;
            /* 父元素需要相对定位 */
            padding: 0 !important;
            border-right: 1px solid #d9d9d9;
            border-bottom: 1px solid #d9d9d9;
            height: 50px;

            &:first-child {
                border-bottom: none;

                .cell {
                    position: absolute;
                    top: -10px;
                    right: 5px;
                }
            }

            .cell {
                padding: 0;
            }
        }

        /* 隐藏 el-table  hover 的背景颜色 */

        &:hover {
            td {
                /* background-color: transparent !important;  */
                /* 设置为透明，取消整行的hover效果 */
            }
        }

        /*保持单元格hover效果*/
        td:not(:first-child) {
            &:hover {
                /* background-color: #f5f7fa !important;  */
                /* 修改为你想要的单元格hover背景颜色 */
            }
        }

        .is-disabled1 {
            height: 100%;
            /* background-color: #ebebeb; */

            .empty-cell {
                position: absolute;
                /* 使用绝对定位，让它可以覆盖整个单元格 */
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                /* background-color: #ebebeb;  */
                /* 灰色背景 */

                /*&:hover {
                    cursor: not-allowed;
                }*/
            }
        }

        .cell-container {
            height: 100%;
            padding: 10px;

            /* display：flex;display:-webkit-flex;align-items:stretch; */
            .task-container {
                &:not(:first-child) {
                    margin-top: 10px;
                }
            }
        }
    }

    /* 弹出框 */
    .task-detail {
        display: flex;
        align-items: center;

        &:first-child {
            justify-content: space-between;
            margin-bottom: 10px;
        }
    }

    .task-actions {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-top: 10px;
    }

    .task-summary {
        text-align: left;

        .task-summary__header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }

    .footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        background-color: #fff;

        .status-container {
            display: flex;
            gap: 0.5rem;

            .status-item {
                display: flex;
                align-items: center;

                .status-indicator {
                    width: 1rem;
                    height: 1rem;
                    border-radius: 0.125rem;
                }

                .status-label {
                    margin-left: 0.25rem;
                    color: #6b7280;
                }
            }
        }
    }

    .bg-blue {
        background-color: #3b82f6 !important;
        color: #fff;
    }

    .bg-yellow {
        background-color: #facc15 !important;
        color: #000;
    }

    .bg-red {
        background-color: #ef4444 !important;
        color: #fff;
    }

    .bg-green {
        background-color: #22c55e !important;
        color: #fff;
    }

    .bg-purple {
        background-color: #a855f7 !important;
        color: #fff;
    }

    .bg-gray {
        background-color: #d1d5db !important;
        color: #4b5563;
        cursor: not-allowed;
    }

    .bg-write {
        background-color: #ffffff !important;
        box-shadow: 0 0 0 1px #d1d5db;
    }

    .task-info-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .reserve-dialog {
        .el-dialog__body {
            padding: 20px;
        }

        .title {
            padding: 10px;
        }
    }

    .el-loading-mask {
        transition: opacity 0.3s;
    }

    .scheduler-main {
        .el-table {
            position: relative;
            transition: all 0.3s ease;

            &.is-loading {
                opacity: 0.6;
            }
        }
    }

    /* 添加hover效果 */
    .task-container {
        cursor: pointer;
        transition: all 0.3s;
        padding: 8px;
        border-radius: 4px;
        margin-bottom: 4px;

        &:last-child {
            margin-bottom: 0;
        }

        /*&:hover {
            transform: translateY(-2px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }*/

        &.bg-green {
            cursor: not-allowed;
        }

        /* 当有多个预约时的样式 */

        &.bg-blue,
        &.bg-yellow,
        &.bg-red,
        &.bg-green,
        &.bg-purple {
            margin: 4px 0;

            /* 确保文字在有背景色时清晰可见 */

            .task-summary {
                color: inherit;

                & __time,
                & __phone {
                    opacity: 0.9;
                }
            }
        }
    }

    /* 优化单元格内多个预约的布局 */
    .cell-container {
        height: 100%;
        padding: 8px;
        display: flex;
        flex-direction: column;
        gap: 4px;
        overflow-y: auto;

        /* 添加滚动条样式 */

        &::-webkit-scrollbar {
            width: 4px;
        }

        &::-webkit-scrollbar-thumb {
            background-color: rgba(0, 0, 0, 0.2);
            border-radius: 2px;
        }
    }

    /* 优化表格样式 */
    .el-table {
        &::before {
            display: none;
        }

        th {
            background-color: #f5f7fa;
        }
    }

    /* 优化按钮样式 */
    .el-button {
        &.is-loading {
            position: relative;
            pointer-events: none;

            &:before {
                content: '';
                position: absolute;
                left: -1px;
                top: -1px;
                right: -1px;
                bottom: -1px;
                border-radius: inherit;
                background-color: rgba(255, 255, 255, 0.35);
            }
        }
    }

    /* 占用窗样式 */
    .el-dialog {
        .el-select {
            width: 100%;
        }

        .el-input-number {
            width: 100%;

            .el-input__inner {
                text-align: left;
            }
        }

        .dialog-footer {
            margin-top: 20px;
            text-align: right;
            margin-bottom: 0;
        }
    }

    /* 优化表单项间距 */
    .el-form--small .el-form-item {
        margin-bottom: 18px;
    }

    /* 移除嵌套表单项的额外边距 */
    .el-form-item .el-form-item {
        margin-bottom: 0;
    }

    .input-with-unit {
        position: relative;
        width: 100%;

        .el-input-number {
            width: 100%;

            .el-input__inner {
                /* 为单位留出空间 */
                padding-right: 60px;
            }
        }

        .unit-label {
            position: absolute;
            top: 50%;
            right: 30px;
            /* 调整位置以避免与控制按钮重叠 */
            transform: translateY(-50%);
            color: #606266;
            font-size: 14px;
            padding: 0 8px;
            /* 防止文字影响输入 */
            pointer-events: none;
            /* 防止文字换行 */
            white-space: nowrap;
            z-index: 1;
        }
    }

    /* 优化数字输入框样式 */
    .el-input-number.is-controls-right {

        .el-input-number__decrease,
        .el-input-number__increase {
            background: #f5f7fa;
            border-left: 1px solid #dcdfe6;
            /* 确保控制按钮在单位标签之上 */
            z-index: 2;
        }

        .el-input__inner {
            /* 数字左对齐 */
            text-align: left;
        }
    }

    .time-duration-container {
        display: flex;
        gap: 20px;
        align-items: center;

        .time-input-group {
            flex: 1;
            position: relative;
            display: flex;
            align-items: center;

            .time-input {
                width: 100%;

                .el-input__inner {
                    padding-right: 55px;
                }

                .el-input-number__decrease,
                .el-input-number__increase {
                    z-index: 2;
                }
            }

            .time-unit {
                position: absolute;
                right: 40px;
                color: #606266;
                font-size: 14px;
                pointer-events: none;
            }
        }

        .no-margin {
            margin-bottom: 0;
        }
    }

    /* 添加未分配区域的样式 */
    .unassigned-tasks {
        .task-container {
            cursor: pointer;
            padding: 8px;
            transition: all 0.3s ease;

            /* &:hover {
                background-color: rgba(59, 130, 246, 0.1);
                transform: translateY(-2px);
            } */
        }

        .task-info-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 4px;

            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    .time-select-container {
        display: flex;
        align-items: center;
        gap: 10px;

        /* 调整日期选择器和时间选择器的宽度 */

        .el-date-picker {
            width: 160px !important;
        }

        .el-select {
            width: 160px !important;
        }
    }
</style>