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 }}天
                    <el-checkbox v-model="isAvailableArray[index]" v-if="timeList[index].length != 0" label="这天可预约"  style="margin-left: 10px;"/>
                </div>
                <!-- 时间段部分 -->
                <div class="time-picker">
                    <el-button circle @click="addList(index, 0)" v-if="timeList[index].length == 0"><el-icon>
                                <Plus />
                            </el-icon></el-button>
                    <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(index,row)">
                            <el-option v-for="item in minOptions[index][row]" 
                                       :key="item" 
                                       :value="item" />
                        </el-select>
                        <el-select v-model="timeList[index][row].maxNumValue" 
                                   placeholder="最大人数" 
                                   style="width: 100px"
                                   @change="maxNumFun(index,row)"
                                   >
                            <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 >= 0"><el-icon>
                                <Minus />
                            </el-icon></el-button>
                        </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';
import { transfer } from '../../utils/dealStringArray';   //导入js函数
import { ElMessage } from 'element-plus';
const dayList = ref([0, 1, 2, 3])  //今天和未来三天
const timeList = ref([    //时间段数组，可以直接通过timeList[index][row]访问对应的时间段
    [
        {
            startTime: '',
            endTime: '',
            minNumValue: '',
            maxNumValue: ''
        }
    ],
    [
        {
            startTime: '',
            endTime: '',
            minNumValue: '',
            maxNumValue: ''
        }
    ],
    [
        {
            startTime: '',
            endTime: '',
            minNumValue: '',
            maxNumValue: ''
        }
    ],
    [
        {
            startTime: '',
            endTime: '',
            minNumValue: '',
            maxNumValue: ''
        }
    ]
])
const isAvailableArray = ref(
    Array.from({length:4},()=>(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)  //第一个人数下标
var arr = new Array(4)
const emit = defineEmits(['time-Info'])  //组件绑定

const initTimeList = () => {
    for (var i = 0; i < 4; i ++ ) {
        timeList.value[i].splice(0)
    }
}

onMounted(()=>{
    init()
    initTimeList()
    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: '',
            maxNumValue: ''
        })
        flag.value += 1 
    }
}
const subList = (index: number, row: number) => {
    timeList.value[index].splice(row, 1)
}
const minNumFun = (index : number,row : number)=> {
    if(timeList.value[index][row].maxNumValue < timeList.value[index][row].minNumValue && timeList.value[index][row].maxNumValue != '') {
        ElMessage({
            type: 'error',
            message: '最小人数不大于最大人数'
        })
        timeList.value[index][row].minNumValue = ''
        return; 
    }
}
//组件传值
const onSubmit =()=> {
    let tempArr = transfer(timeList.value, arr,isAvailableArray.value)
    // console.log(tempArr)
    //将数组处理成后端格式
    emit('time-Info',tempArr)
}
const resetForm=()=>{
    for(let i=0;i<4;i++) {
        timeList.value[i].splice(0, timeList.value[i].length)
        isAvailableArray.value[i] = false
    }
}
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 maxNumFun =(index: number ,row: number)=>{
    if(timeList.value[index][row].maxNumValue < timeList.value[index][row].minNumValue) {
        ElMessage({
            type: 'error',
            message: '最大人数应该大于最小人数'
        })
        return;
    }
}
</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>