admin1/jiangchengfeiyi-Web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

暂存

Browse Source
This commit is contained in:
yuanteng 2024-12-20 15:58:58 +08:00
parent 29d4228b4b
commit 3b7c1dfb17
2 changed files with 2 additions and 232 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/api/myAxios.ts
View File

@ -4,8 +4,8 @@ import router from '../router'
const myAxios = axios.create({
withCredentials:true,
baseURL: 'http://localhost:9092/api'
// baseURL: 'http://123.249.108.160:8888/api' //测试服务器
// baseURL: 'http://localhost:9092/api'
baseURL: 'http://123.249.108.160:8888/api' //测试服务器
});
// 添加请求拦截器
axios.interceptors.request.use(function (config) {

230
src/layout/components/appointTime.vue
View File

@ -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>