<template>
<!-- //导出选中的列表 -->
<div>
<!-- <ExportExcel
@clickButton="exportPeopleScoreExcel"
:exportList="exportList"
:tableHeader="tableHeader"
:filterVal="filterVal"
:tableTitle="tableTitle"
></ExportExcel> -->
<el-table
id="mytable"
:data="tableData"
style="width: 100%"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column prop="date" label="日期" width="180"> </el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
<el-button size="mini" @click="addAppoint(scope.row)">预约</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<el-dialog title="预约" :visible.sync="isAppoint" width="70%" :before-close="closeAppoint">
<el-form label-width="120px" :model="appointForm">
<div style="margin:20px;height:100%;float:left;">
<div style="display:flex;justify-content:space-between;">
<span v-for="(item,index) in week" :key="index" :class="{'top_style':item.is_active==0,'top_active':item.is_active==1}" @click="changWeek(item,index)">
<div style="height:25px;line-height:20px;">{{item.month}}-{{item.date}}</div>
<div style="height:25px;line-height:20px;">{{item.day}}</div>
</span>
</div>
<div style="display:flex;margin:20px 50px;font-size:18px;justify-content:space-between;">
<div style="display:flex;"><div style="width:40px;height:20px;margin-right:10px;"></div><div>不可预约</div></div>
<div style="display:flex;"><div style="width:40px;height:20px;margin-right:10px;"></div><div>已有预约</div></div>
<div style="display:flex;"><div style="width:40px;height:20px;margin-right:10px;"></div><div>当前预约</div></div>
</div>
<div style="margin:20px 50px;height:100%;float:left;" class="button_wrap">
<el-button v-for="(item,index) in timeArr" :key="index" @click="changTime(item,index)" :type="item.status==0?'':item.status==1?'danger':item.status==2?'info':'primary'" :disabled="item.status==1||item.status==2" class="button_style">{{item.time}}</el-button>
</div>
<div style="float:left;">
<div style="display:flex;justify-content:flex-start;margin-left:50px;">
<div style="width:80px;line-height:36px;height:36px;">备注：</div><el-input style="width:100%;" placeholder="请输入" v-model="remark" clearable></el-input>
</div>
</div>
</div>
</el-form>
<div slot="footer" class="dialog-footer" >
<el-button @click="closeAppoint">取消</el-button>
<el-button type="primary" @click="saveAppoint" style="margin-left:20px;">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
components: {
// ExportExcel: () => import("@/components/exportExcel"),
},
data() {
return {
//导出表格所需字段
tableData: [
{
//用来进行数据渲染
date: "2016.05.02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016.05.04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
},
{
date: "2016.05.01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
{
date: "2016.05.03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄",
},
],
selectList: [], //选中列表
exportList: [],
tableHeader: [],
filterVal: [],
tableTitle: "",
//会议预约部分
isAppoint:false,
appointForm:{},
week:[],//预约周
timeArr:[],
dateNow:'',//预约日期
timeStart:'',//预约时间
timeEnd:'',//预约时间
appointAreaId:'',//预约的会议室id
appointAreaName:'',//预约的会议室name
positionId:'',//位置id
positionName:'',//位置name
remark:'',//备注
appointTimeArr:[],//预约选中时间数组
};
},
methods: {
handleSelectionChange(val) {
console.log(val);
this.selectList = val;
},
handleEdit(val) {
console.log(val, "编辑");
},
handleDelete(val) {
console.log(val, "删除");
},
//定义导出表格的文件名、表头和字段
// exportPeopleScoreExcel() {
// this.exportList = this.selectList;
// this.tableTitle = "人员统计";
// this.tableHeader = ["姓名", "日期", "地址"];
// this.filterVal = ["name", "date", "address"];
// },
closeAppoint(){
this.isAppoint=false
for(let i=0;i<this.week.length;i++){
this.week[i].is_active=0;
}
this.week[0].is_active=1;
this.remark='';
for(let i=0;i<this.timeArr.length;i++){
if(this.timeArr[i].status==3){
this.timeArr[i].status=0;
}
}
},
saveAppoint(){
if(this.timeStart!=''&&this.timeEnd!=''){
this.appointForm.appointAreaId=this.appointAreaId;
this.appointForm.appointAreaName=this.appointAreaName;
this.appointForm.positionId=this.positionId;
this.appointForm.positionName=this.positionName;
this.appointForm.remark=this.remark;
this.appointForm.startTime=this.dateNow+' '+this.timeStart;
this.appointForm.endTime=this.dateNow+' '+this.timeEnd;
//
// appoint(this.appointForm).then(res=>{
// if(res.data.code==200){
// this.$message.success(res.data.message)
// this.remark='';
// this.isAppoint=false;
// this.isMeeting=false
// this.getList();
// }else{
// this.$message.error(res.data.message)
// }
// })
// 保存数据，成功后，关闭弹窗，并且再去调用一次获取列表的接口
console.log(this.appointForm)
this.$message.success('预约成功')
this.remark='';
this.isAppoint=false;
}else{
this.$message.error("请选择预约时间")
for(let i=0;i<this.timeArr.length;i++){
if(this.timeArr[i].status==2){
this.timeArr[i].status=0
}
}
}
},
changTime(val,index){
if(this.appointTimeArr.length<2){
this.timeArr[index].status=3;
this.appointTimeArr.push(index);
if(this.appointTimeArr.length==2){
if(this.appointTimeArr[0]==this.appointTimeArr[1]){
this.timeArr[this.appointTimeArr[0]].status=0;
this.appointTimeArr=[];
}else{
this.appointTimeArr=this.appointTimeArr.sort(function(a,b){return a-b});
let len=this.appointTimeArr[1]-this.appointTimeArr[0];
for(let i=0;i<len;i++){
if(this.timeArr[this.appointTimeArr[0]+i].status==1){
this.$message.warning("已预约过的时间不允许预约！")
this.timeStart='';
this.timeEnd='';
break
}else{
this.timeArr[this.appointTimeArr[0]+i].status=3;
this.timeStart=this.timeArr[this.appointTimeArr[0]].time;
this.timeEnd=this.timeArr[this.appointTimeArr[1]].time;
}
}
}
}
}else if(this.appointTimeArr.length=3){
for(let i=0;i<this.timeArr.length;i++){
if(this.timeArr[i].status===3){
this.timeArr[i].status=0;
}
}
this.appointTimeArr=[];
this.appointTimeArr.push(index);
this.timeArr[index].status=3;
}
},
//每次打开预约弹窗时，默认选中当天
getAppoint(){
let arr = []
for (let i = 0; i < 7; i++) {
arr.push(this.dealTime(i))
}
arr[0].is_active=1;
this.week=arr;
this.dateNow=this.week[0].full;
},
//点击切换星期状态
changWeek(val,index){
for(let i=0;i<this.week.length;i++){
this.week[i].is_active=0;
}
this.week[index].is_active=1;
let formData={
appointAreaId:this.appointAreaId,
startTime:val.full+' '+'00:00:00',
endTime:val.full+' '+'23:59:59'
};
this.dateNow=val.full;
this.getAppointed(formData)
},
// 处理未来七天的函数
dealTime(num){
let time = new Date() // 获取当前时间日期
let date = new Date(time.setDate(time.getDate() + num)).getDate() //这里先获取日期，在按需求设置日期，最后获取需要的
let newDate=(date.toString()).padStart(2,"0");
let month = time.getMonth() + 1 // 获取月份
let newMonth=(month.toString()).padStart(2,"0");
let day = time.getDay() // 获取星期
let year=time.getFullYear();
let full=year+'-'+month+'-'+date;
switch (day) { // 格式化
case 0:
day = "星期日"
break
case 1:
day = "星期一"
break
case 2:
day = "星期二"
break
case 3:
day = "星期三"
break
case 4:
day = "星期四"
break
case 5:
day = "星期五"
break
case 6:
day = "星期六"
break
}
let obj = {
date: newDate,
day: day,
is_active: 0,
month: newMonth,
year:year,
full:full,
}
return obj // 返回对象
},
//时间格式转为年月日
getYMD(time){
let date = new Date(time)
let Str=date.getFullYear() + '-' +
(date.getMonth() + 1) + '-' +
date.getDate()
return Str
},
//预约
addAppoint(val){
//先写假的appointAreaId,appointAreaName,positionId,positionName
let appointAreaId=123;
let appointAreaName='会议室1';
let positionId='11';
let positionName='2楼101';
this.isAppoint=true;
this.appointAreaId=appointAreaId;
this.appointAreaName=appointAreaName;
this.positionId=positionId;
this.positionName=positionName;
this.getAppoint();
let formData={
appointAreaId:val.appointAreaId,
startTime:this.getYMD(new Date())+' '+'00:00:00',
endTime:this.getYMD(new Date())+' '+'23:59:59'
}
this.getAppointed(formData);
},
//获取时间数组
getAppointed(formData){
//假设当前时间是10:30，则10:30之前的时间点都是过期的，即状态是2；
// 已经预约过的时间点是13:00，13:30，14:00，即状态是1
let data=[
{time:"5:00",status:2},
{time:"5:30",status:2},
{time:"6:00",status:2},
{time:"6:30",status:2},
{time:"7:00",status:2},
{time:"7:30",status:2},
{time:"8:00",status:2},
{time:"8:30",status:2},
{time:"9:00",status:2},
{time:"9:30",status:2},
{time:"10:00",status:2},
{time:"10:30",status:2},
{time:"11:00",status:0},
{time:"11:30",status:0},
{time:"12:00",status:0},
{time:"12:30",status:0},
{time:"13:00",status:1},
{time:"13:30",status:1},
{time:"14:00",status:1},
{time:"14:30",status:0},
{time:"15:00",status:0},
{time:"15:30",status:0},
{time:"16:00",status:0},
{time:"16:30",status:0},
{time:"17:00",status:0},
{time:"17:30",status:0},
{time:"18:00",status:0},
{time:"18:30",status:0},
{time:"19:00",status:0},
{time:"19:30",status:0},
{time:"20:00",status:0},
{time:"20:30",status:0},
{time:"21:00",status:0},
{time:"21:30",status:0},
{time:"22:00",status:0},
];//写一组假数据
this.timeArr=data;
this.timeArr=formData;
// appointTime(formData).then(res=>{
// this.timeArr=res.data.data;
// if(res.data.code==200){
// this.timeArr=res.data.data;
// }
// })
},
},
};
</script>
<style scoped>
.top_style,.top_active{
border:1px solid #AAA;
padding:3px 20px;
text-align:center;
}
.top_active{
border-color:#02A7F0;
color: #02A7F0;
}
.button_style{
text-align:center;
float:left;
width: 80px;
}
.payCompany_date{
width:400px;
margin:0 10px 10px 0;
}
</style>
<style>
.button_wrap .el-button{
text-align:center;
float:left;
margin:0 10px 10px 0;
}
.button_wrap .el-button:first-child{
margin-left:10px;
}
</style>
浙公网安备 33010602011771号