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">
                            <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>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } 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: ''
        }
    ],
    [
        {
            startTime: '',
            endTime: '',
            minNumValue: '',
            maxNunValue: ''
        }
    ],
    [
        {
            startTime: '',
            endTime: '',
            minNumValue: '',
            maxNunValue: ''
        }
    ],
    [
        {
            startTime: '',
            endTime: '',
            minNumValue: '',
            maxNunValue: ''
        }
    ]
])
//人数数组，初始化好四天六个时间段的人数
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)  //第一个人数下标
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+1;
                maxOptions.value[i][j][k] = k+1;
            }
        }
    }
})
const addList = (index: any, row: any) => {
    if (timeList.value[index].length < 6) {
        timeList.value[index].push({
            startTime: '',
            endTime: '',
            minNumValue: '',
            maxNunValue: ''
        })
        flag.value += 1 
    }
}
const subList = (index: number, row: number) => {
    console.log(index, row);
    timeList.value[index].splice(row, 1)
}
const minNumFun = (number : any)=> {
    for(let i = 0;i<number;i++) {
        if(maxOptions.value[i] < number) {
            maxOptions.value.splice(i,1)
            console.log(maxOptions.value);
        }
    }
}
</script>

<style lang="scss" scoped>

div {
    font-size: 12px;
    color: rgb(96, 98, 102);
}
.time-picker {
    display: flex;
    flex-wrap: wrap;
}
.box {
    width: 380px;
    height: 50pxpx;
    border: 1px solid red;
}
.numRange {
    margin-left: 26px;
}
</style>