如图,在query我得不到type和dictType的值,一直为undefined未定义,其实只要将他们的值改为组件里v-model绑定的值即可
此时,数据成功返回给后端,接口连接通畅
附上接口:
这个页面代码留在附件里,有需求自取参考
场馆类型:
v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value" >
场馆名称:
v-for="item in dictTypeList" :key="item.value" :label="item.name" :value="item.value" >
日期查询:
v-model="dateTime" type="datetimerange" :picker-options="pickerOptions" @change="getDateTime" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" >
import { viewAvailableVenues, getType } from '@/APIs/index/index'
export default {
name: 'viewAvailableVenues',
data() {
return {
typeList: [
{
value: 'am_room_type',
label: '教室'
},
{
value: 'am_venue_type',
label: '运动场'
}
],
dictTypeList: [],
typeName: [],
list: [],
page: {
currentPage: 1,
pageSize: 10,
total: 0
},
venuesDetailsList: [],
tableData: [],
switchValue: true,
dictTypeValue: null,
dateValue: '',
inputValue: '',
inputValue1: '',
pickerOptions: {
disabledDate(time) {
return time.getTime() < Date.now()
},
shortcuts: [
{
text: '今天',
onClick(picker) {
picker.$emit('pick', new Date())
}
},
{
text: '昨天',
onClick(picker) {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24)
picker.$emit('pick', date)
}
},
{
text: '一周前',
onClick(picker) {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
picker.$emit('pick', date)
}
}
]
},
dialogFormVisible: false,
value: new Date(),
// formLabelWidth: '120px',
// form: {
// content: [
// {
// appSiteType: '',
// appSiteName: '',
// appStartTime: '',
// appEndTime: ''
// }
// ]
// },
// resDate: [
// {
// date: '2020-09-20',
// content: [
// {
// appSiteType: '运动场',
// appSiteName: '场馆A',
// appStartTime: '13:00',
// appEndTime: '14:00'
// }
// ]
// }
// ]
dateTime: [new Date(2020, 8, 20, 8), new Date(2020, 8, 20, 9)]
}
},
created() {
// this.$nextTick(() => {
// // 点击前一个月
// let prevBtn = document.querySelector(
// '.el-calendar__button-group .el-button-group>button:nth-child(1)'
// )
// prevBtn.addEventListener('click', e => {
// let d = new Date(this.timeValue)
// let resDate = d.getFullYear() + '-' + this.handleTime(d.getMonth() + 1) //2020-08
// })
// //点击下一个月
// let nextBtn = document.querySelector(
// '.el-calendar__button-group .el-button-group>button:nth-child(3)'
// )
// nextBtn.addEventListener('click', e => {
// let d = new Date(this.timeValue)
// let resDate = d.getFullYear() + '-' + this.handleTime(d.getMonth() + 1) //2020-10
// })
// //点击今天
// let todayBtn = document.querySelector(
// '.el-calendar__button-group .el-button-group>button:nth-child(2)'
// )
// todayBtn.addEventListener('click', e => {
// let d = new Date(this.timeValue)
// let resDate = d.getFullYear() + '-' + this.handleTime(d.getMonth() + 1) //2020-09
// })
// })
},
mounted() {
// this.roomType()
},
methods: {
// 请求教室类型
async roomType(v) {
const dictType = v
const data = await getType({
dictType
})
// eslint-disable-next-line no-unused-vars
const dictTypeList = {}
for (let i = 0; i < data.data.length; i++) {
this.dictTypeList.push({
name: data.data[i].dictLabel,
value: data.data[i].dictValue
})
}
this.roomValue(v)
},
// 请求教室名称
roomValue(v) {
const value = v
console.log(value);
},
// 查询
async query() {
// console.log('查询')
this.roomType()
const type = this.typeName
const siteType = this.dictTypeValue
const startTime = this.dateTime[0]
const endTime = this.dateTime[1]
const { currentPage: pageNum, pageSize } = this.page
const {
data: { list = [], total }
} = await viewAvailableVenues({
type,
siteType,
startTime,
endTime,
pageNum,
pageSize
})
this.tableData = list.map(item => ({ ...item, visible: false }))
// setStore('viewAvailableVenues', JSON.stringify(list))
this.venuesDetailsList = list
this.page.total = total
console.log(this.tableData);
console.log(list, total)
console.log(type, siteType, startTime, endTime)
},
// 重置
reset() {
console.log('重置')
this.typeName = []
this.value = new Date()
this.value3 = [new Date(2016, 9, 10, 8), new Date(2016, 9, 10, 9)]
},
// 得到日期和时间
getDateTime() {
var dateTime = this.dateTime
console.log(dateTime)
}
// 获取数据
// async postVenueDetailsListData() {},
// 渲染预约信息
// dealMyDate(v) {
// // console.log(this.date)
// let len = this.resDate.length
// let res = ''
// for (let i = 0; i < len; i++) {
// let len1 = this.resDate[i].content.length
// for (let j = 0; j < len1; j++) {
// if (this.resDate[i].date == v) {
// // console.log(len1);
// res = `${this.resDate[i].content[j].appStartTime}-${this.resDate[i].content[j].appEndTime}
// ${this.resDate[i].content[j].appSiteType}-${this.resDate[i].content[j].appSiteName}`
// }
// }
// }
// return res
// },
// 点击天数
// changeTime(date, data) {
// console.log(date, 1111, data, 2222)
// this.form.date = data.day
// console.log(this.form)
// },
// 添加内容
// input() {
// this.dialogFormVisible = false
// let content = this.form
// console.log(content)
// this.resDate.push(content)
// console.log(this.resDate)
// },
// // 处理时间
// handleTime(s) {
// return s < 10 ? '0' + s : s
// },
// // 点击弹出输入框
// open() {
// this.$prompt('请输入', '提示', {
// confirmButtonText: '确定',
// cancelButtonText: '取消'
// })
// .then(({ value }) => {
// this.$message({
// type: 'success',
// message: '添加成功'
// })
// })
// .catch(() => {
// this.$message({
// type: 'info',
// message: '取消输入'
// })
// })
// }
}
}
.div-Calendar {
width: 100%;
height: 100%;
box-sizing: border-box;
}
.calendar-day {
text-align: center;
color: #202535;
line-height: 30px;
font-size: 12px;
}
.is-selected {
color: #f8a535;
font-size: 10px;
margin-top: 5px;
}
#calendar .el-button-group > .el-button:not(:first-child):not(:last-child):after {
content: '当月';
}