159 lines
5.0 KiB
Vue
159 lines
5.0 KiB
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> |