jiangchengfeiyi-Web/src/layout/components/appointTime.vue

<template>
    <div class="date-picker">
        <div class="father">
            <div v-for="(item, index) in dayList" :key="index">
                <div class="inner" style="font-size: medium;">
                    第{{ index + 1 }}天
                </div>
                <!-- 时间段部分 -->
                <div class="time-picker">
                    <div v-for="(item, row) in timeList[index]" :key="row" class="box">
                        <span>第 {{ row + 1 }} 个时间段</span>
                        <el-time-select v-model="timeList[index][row].startTime" 
                                        style="width: 150px"
                                        :max-time="timeList[index][row].endTime" 
                                        placeholder="Start time" size="default"
                                        start="08:30" step="00:15" end="18:30" />
                        <el-time-select v-model="timeList[index][row].endTime" style="width: 150px"
                            :min-time="timeList[index][row].startTime" placeholder="End time" size="default"
                            start="08:30" step="00:15" end="18:30" />
                        <div class="numRange">
                        <span>人数范围</span>
                        <el-select v-model="timeList[index][row].minNumValue" 
                                   placeholder="最小人数" 
                                   style="width: 100px"
                                   @change="minNumFun(timeList[index][row].minNumValue,index,row)">
                            <el-option v-for="item in minOptions[index][row]" 
                                       :key="item" 
                                       :value="item" />
                        </el-select>
                        <el-select v-model="timeList[index][row].maxNunValue" 
                                   placeholder="最大人数" 
                                   style="width: 100px">
                            <el-option v-for="item in maxOptions[index][row]" 
                                       :key="item" 
                                       :value="item" />
                        </el-select>
                        <el-button circle @click="addList(index, row)"><el-icon>
                                <Plus />
                            </el-icon></el-button>
                        <el-button circle @click="subList(index, row)" v-if="row + 1 > 1"><el-icon>
                                <Minus />
                            </el-icon></el-button>
                        <el-checkbox v-model="timeList[index][row].isAvailable" label="此时间段可预约"  style="margin-left: 10px;"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="totalButton">
          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="resetForm">重置</el-button>
          </el-form-item>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref , defineEmits } from 'vue'
import { Plus } from '@element-plus/icons-vue';
const dayList = ref([0, 1, 2, 3])  //今天和未来三天
const timeList = ref([    //时间段数组，可以直接通过timeList[index][row]访问对应的时间段
    [
        {
            startTime: '',
            endTime: '',
            minNumValue: '',
            maxNunValue: '',
            isAvailable: false
        }
    ],
    [
        {
            startTime: '',
            endTime: '',
            minNumValue: '',
            maxNunValue: '',
            isAvailable: false
        }
    ],
    [
        {
            startTime: '',
            endTime: '',
            minNumValue: '',
            maxNunValue: '',
            isAvailable: false
        }
    ],
    [
        {
            startTime: '',
            endTime: '',
            minNumValue: '',
            maxNunValue: '',
            isAvailable: false
        }
    ]
])
//人数数组，初始化好四天六个时间段的人数
const minOptions = ref(
    Array.from({length:4},()=>(
        Array.from({length:6},()=>(
            Array.from({length:50},()=>( 0 ))
        ))
    ))
)
const maxOptions = ref(
    Array.from({length:4},()=>(
        Array.from({length:6},()=>(
            Array.from({length:50},()=>( 0 ))
        ))
    ))
)
const flag = ref(0)  //第一个人数下标
const appointmentDateAddRequestList = ref(
    Array.from({length: 4},()=>(
        {
            timeSlot: '',
            isAvailable: 0,
            numberRange: ''
        }
    )),
)
const emit = defineEmits(['time-Info'])  //组件绑定
onMounted(()=>{
    for(let i=0; i<4; i++) {  //开始时初始化人数的数组
        for(let j=0; j<6; j++) {
            for(let k=0;k<50;k++) {
                minOptions.value[i][j][k] = k+5;
                maxOptions.value[i][j][k] = k+6;
            }
        }
    }
})
const addList = (index: any, row: any) => {
    if (timeList.value[index].length < 6) {
        timeList.value[index].push({
            startTime: '',
            endTime: '',
            minNumValue: '',
            maxNunValue: '',
            isAvailable: false
        })
        flag.value += 1 
    }
}
const subList = (index: number, row: number) => {
    timeList.value[index].splice(row, 1)
}
const minNumFun = (number : any,index : number,row : number)=> {
    maxOptions.value[index][row].splice(0,number-5)
}
//组件传值
const onSubmit =()=>{
    //将数组处理成后端格式
    emit('time-Info',timeList)
}
const resetForm=()=>{
    for(let i=0;i<4;i++) {
        timeList.value[i] = [{
            startTime: '',
            endTime: '',
            minNumValue: '',
            maxNunValue: '',
            isAvailable: false
        }]
    }
}
</script>

<style lang="scss" scoped>
.date-picker {
    height: 750px;
}
div {
    font-size: 12px;
    color: rgb(96, 98, 102);
}
.time-picker {
    display: flex;
    flex-wrap: wrap;
}
.box {
    width: 380px;
    height: 50pxpx;
}
.numRange {
    margin-left: 26px;
}
.totalButton {
  display: flex;
  justify-content: space-evenly;
}
</style>