暂存
This commit is contained in:
parent
29d4228b4b
commit
3b7c1dfb17
|
|
@ -4,8 +4,8 @@ import router from '../router'
|
||||||
|
|
||||||
const myAxios = axios.create({
|
const myAxios = axios.create({
|
||||||
withCredentials:true,
|
withCredentials:true,
|
||||||
baseURL: 'http://localhost:9092/api'
|
// baseURL: 'http://localhost:9092/api'
|
||||||
// baseURL: 'http://123.249.108.160:8888/api' //测试服务器
|
baseURL: 'http://123.249.108.160:8888/api' //测试服务器
|
||||||
});
|
});
|
||||||
// 添加请求拦截器
|
// 添加请求拦截器
|
||||||
axios.interceptors.request.use(function (config) {
|
axios.interceptors.request.use(function (config) {
|
||||||
|
|
|
||||||
|
|
@ -1,230 +0,0 @@
|
||||||
<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>
|
|
||||||
Loading…
Reference in New Issue
Block a user