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: ''
        }
    )),
)

var arr = new Array(4)
const init = () => {
    for (var i = 0; i < 4; i ++ ) {
        arr[i] = new Array(6)
    }
    for (var i = 0; i < 4; i ++ ) {
        for (var j = 0; j < 6; j ++ ) {
            arr[i][j] = {
                timeSlot: '',
                numberRange: '',
                isAvailable: ''
            }
        }
    }
}

const emit = defineEmits(['time-Info'])  //组件绑定
onMounted(()=>{
    init()
    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)
}
import { transfer } from '../../utils/dealStringArray';
//组件传值
const onSubmit =()=> {
    let tempArr = transfer(timeList.value, arr)
    console.log(tempArr)
    //将数组处理成后端格式
    emit('time-Info',tempArr)
}



// const isNotValid = (val:any) => {
//     const timeRegex = /^([0-1]?[0-9]|2[0-3]):([0-5]?[0-9])-(?:[0-1]?[0-9]|2[0-3]):([0-5]?[0-9])$/;
//     const rangeRegex = /^\(\d+,\d+\)$/
//     return timeRegex.test(val.timeSlot) && rangeRegex.test(val.numberRange)
// }

// const isValidPlus = (val:any) => {
//     const timeRegex = /^([0-1]?[0-9]|2[0-3]):([0-5]?[0-9])-(?:[0-1]?[0-9]|2[0-3]):([0-5]?[0-9])$/;
//     const rangeRegex = /^\(\d+,\d+\)$/
//     if(val.timeSlot === '' &&  val.numberRange === '') return false
//     if(timeRegex.test(val.timeSlot) && rangeRegex.test(val.numberRange)) return false
//     return true
// }

// const transfer = (val:any) => {
//     for (var i = 0; i < val.length; i ++ ) {
//         for (var j = 0; j < val[i].length; j ++ ) {
//             arr[i][j].timeSlot = val[i][j].startTime + "-" + val[i][j].endTime
//             arr[i][j].numberRange = "(" + val[i][j].minNumValue + "," + val[i][j].maxNunValue + ")"
//             arr[i][j].isAvailable = val[i][j].isAvailable
//         }
//     }
//     // console.log(arr)
//     for (var i = 0; i < 4; i ++ ) {
//         for (var j = 0; j < 6; j ++ ) {
//             if(isValidPlus(arr[i][j])) {
//                 ElMessage({
//                      type: 'error',
//                      message: '请检查表单数据是否完整填写'
//                 })
//                 return ;
//             }
//         }
//     }
//     let newArr:any = new Array(4)
//     for (var i = 0; i < 4; i ++ ) {
//         newArr[i] = {
//             timeSlot:'',
//             numberRange: '',
//             isAvailable: true
//         }
//     }

//     let timeSlotArr:any = []
//     let numberRangeArr:any = []
//     for (var i = 0; i < val.length; i ++ ) {
//         for (var j = 0; j < val[i].length; j ++ ) {
//             if(isNotValid(arr[i][j])) {
//                 timeSlotArr.push(arr[i][j].timeSlot)
//                 numberRangeArr.push(arr[i][j].numberRange)
//             }
//         }
//         newArr[i].timeSlot = timeSlotArr.join(';')
//         newArr[i].numberRange = numberRangeArr.join(';')
//         timeSlotArr = []
//         numberRangeArr = []
//     }
//     console.log(newArr)
//     return newArr
// }




const resetForm=()=>{
    console.log(3333)
    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>