<template>
|
<basic-container>
|
|
<el-tabs value="first" type="card">
|
<el-tab-pane label="周排班" name="first">
|
<el-row>
|
<el-col :span="12" :offset="1">
|
<el-button type="primary" @click="add()">添加</el-button>
|
<el-button type="primary" @click="submit">提交</el-button>
|
</el-col>
|
</el-row>
|
<el-tabs v-model="activeName" tab-position="left">
|
<el-tab-pane label="周一" name="MON">
|
<el-row v-for="(item,i) in monday">
|
<el-col :span="6" :offset="2">
|
<el-time-picker
|
is-range
|
v-model="item.range"
|
range-separator="-"
|
start-placeholder="开始"
|
end-placeholder="结束"
|
value-format="HH:mm:ss"
|
placeholder="选择时间范围">
|
</el-time-picker>
|
</el-col>
|
<el-col :span="6" :offset="2">
|
<el-button type="text" style="color: #F56C6C" size="small" icon="el-icon-delete"
|
@click="del(i,item)">删除
|
</el-button>
|
</el-col>
|
</el-row>
|
</el-tab-pane>
|
<el-tab-pane label="周二" name="TUE">
|
<el-row v-for="(item,i) in tuesday">
|
<el-col :span="6" :offset="2">
|
<el-time-picker
|
is-range
|
v-model="item.range"
|
range-separator="-"
|
start-placeholder="开始"
|
end-placeholder="结束"
|
value-format="HH:mm:ss"
|
placeholder="选择时间范围">
|
</el-time-picker>
|
</el-col>
|
<el-col :span="6" :offset="2">
|
<el-button type="text" style="color: #F56C6C" size="small" icon="el-icon-delete"
|
@click="del(i,item)">删除
|
</el-button>
|
</el-col>
|
</el-row>
|
</el-tab-pane>
|
<el-tab-pane label="周三" name="WEN">
|
<el-row v-for="(item,i) in wednesday">
|
<el-col :span="6" :offset="2">
|
<el-time-picker
|
is-range
|
v-model="item.range"
|
range-separator="-"
|
start-placeholder="开始"
|
end-placeholder="结束"
|
value-format="HH:mm:ss"
|
placeholder="选择时间范围">
|
</el-time-picker>
|
</el-col>
|
<el-col :span="6" :offset="2">
|
<el-button type="text" style="color: #F56C6C" size="small" icon="el-icon-delete"
|
@click="del(i,item)">删除
|
</el-button>
|
</el-col>
|
</el-row>
|
</el-tab-pane>
|
<el-tab-pane label="周四" name="THU">
|
<el-row v-for="(item,i) in thursday">
|
<el-col :span="6" :offset="2">
|
<el-time-picker
|
is-range
|
v-model="item.range"
|
range-separator="-"
|
start-placeholder="开始"
|
end-placeholder="结束"
|
value-format="HH:mm:ss"
|
placeholder="选择时间范围">
|
</el-time-picker>
|
</el-col>
|
<el-col :span="6" :offset="2">
|
<el-button type="text" style="color: #F56C6C" size="small" icon="el-icon-delete"
|
@click="del(i,item)">删除
|
</el-button>
|
</el-col>
|
</el-row>
|
</el-tab-pane>
|
<el-tab-pane label="周五" name="FRI">
|
<el-row v-for="(item,i) in friday">
|
<el-col :span="6" :offset="2">
|
<el-time-picker
|
is-range
|
v-model="item.range"
|
range-separator="-"
|
start-placeholder="开始"
|
end-placeholder="结束"
|
value-format="HH:mm:ss"
|
placeholder="选择时间范围">
|
</el-time-picker>
|
</el-col>
|
<el-col :span="6" :offset="2">
|
<el-button type="text" style="color: #F56C6C" size="small" icon="el-icon-delete"
|
@click="del(i,item)">删除
|
</el-button>
|
</el-col>
|
</el-row>
|
</el-tab-pane>
|
<el-tab-pane label="周六" name="SAT">
|
<el-row v-for="(item,i) in saturday">
|
<el-col :span="6" :offset="2">
|
<el-time-picker
|
is-range
|
v-model="item.range"
|
range-separator="-"
|
start-placeholder="开始"
|
end-placeholder="结束"
|
value-format="HH:mm:ss"
|
placeholder="选择时间范围">
|
</el-time-picker>
|
</el-col>
|
<el-col :span="6" :offset="2">
|
<el-button type="text" style="color: #F56C6C" size="small" icon="el-icon-delete"
|
@click="del(i,item)">删除
|
</el-button>
|
</el-col>
|
</el-row>
|
</el-tab-pane>
|
<el-tab-pane label="周日" name="SUN">
|
<el-row v-for="(item,i) in sunday">
|
<el-col :span="6" :offset="2">
|
<el-time-picker
|
is-range
|
v-model="item.range"
|
range-separator="-"
|
start-placeholder="开始"
|
end-placeholder="结束"
|
value-format="HH:mm:ss"
|
placeholder="选择时间范围">
|
</el-time-picker>
|
</el-col>
|
<el-col :span="6" :offset="2">
|
<el-button type="text" style="color: #F56C6C" size="small" icon="el-icon-delete"
|
@click="del(i,item)">删除
|
</el-button>
|
</el-col>
|
</el-row>
|
</el-tab-pane>
|
</el-tabs>
|
</el-tab-pane>
|
<el-tab-pane label="异常时间" name="second">
|
<el-row>
|
<el-col :span="12" :offset="1">
|
<el-button type="primary" @click="addEx()">添加</el-button>
|
<el-button type="primary" @click="submitEx">提交</el-button>
|
</el-col>
|
</el-row>
|
<el-row v-for="(item,i) in exceptions" align="middle">
|
<el-col :span="6" :offset="1">
|
<el-date-picker
|
v-model="item.range"
|
type="datetimerange"
|
range-separator="至"
|
start-placeholder="开始"
|
end-placeholder="结束"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
align="right">
|
</el-date-picker>
|
</el-col>
|
<el-col :span="2" :offset="1">
|
<el-checkbox v-model="item.freeTime">非工作时间</el-checkbox>
|
</el-col>
|
<el-col :span="2" :offset="1">
|
<el-button type="text" style="color: #F56C6C" size="small" icon="el-icon-delete"
|
@click="delEx(i,item)">删除
|
</el-button>
|
</el-col>
|
</el-row>
|
</el-tab-pane>
|
</el-tabs>
|
|
|
</basic-container>
|
</template>
|
|
<script>
|
import {view, viewEx, save, saveEx, delExObj} from '@/api/aps/timetable'
|
|
export default {
|
data() {
|
return {
|
activeName: 'MON',
|
monday: [],
|
tuesday: [],
|
wednesday: [],
|
thursday: [],
|
friday: [],
|
saturday: [],
|
sunday: [],
|
exceptions: []
|
}
|
},
|
created() {
|
this.load();
|
},
|
|
methods: {
|
add() {
|
this.getDataOfDay(this.activeName).push({dayOfWeek: this.activeName})
|
},
|
del(index, item) {
|
this.getDataOfDay(item.dayOfWeek).splice(index, 1);
|
},
|
|
addEx() {
|
this.exceptions.push({freeTime: true})
|
},
|
|
delEx(index, item) {
|
if (item.id) {
|
delExObj(item.id)
|
}
|
this.exceptions.splice(index, 1);
|
},
|
|
load() {
|
view().then(response => {
|
const dataList = response.data.data;
|
Object.keys(dataList).forEach(key => {
|
this.getDataOfDay(key).push.apply(this.getDataOfDay(key), dataList[key]);
|
});
|
});
|
|
viewEx().then(response => {
|
this.exceptions = response.data.data;
|
})
|
|
|
},
|
|
submit() {
|
const week = [...this.monday, ...this.tuesday, ...this.wednesday, ...this.thursday, ...this.friday, ...this.saturday, ...this.sunday];
|
save(index).then(data => {
|
this.$message.success('保存成功')
|
});
|
},
|
|
submitEx() {
|
saveEx(this.exceptions).then(data => {
|
this.$message.success('保存成功')
|
});
|
},
|
|
getDataOfDay(day) {
|
switch (day) {
|
case 'MON':
|
return this.monday
|
case 'TUE':
|
return this.tuesday
|
case 'WEN':
|
return this.wednesday
|
case 'THU':
|
return this.thursday
|
case 'FRI':
|
return this.friday
|
case 'SAT':
|
return this.saturday
|
case 'SUN':
|
return this.sunday
|
}
|
}
|
|
|
},
|
}
|
</script>
|
