<template>
|
<div class='duty_add'>
|
<v-header :title="title"></v-header>
|
<div class="cont">
|
<section
|
v-for="(i,j) in list"
|
:key="j+'-s'"
|
>
|
<div class="time f">
|
<p class="label">时间：</p>
|
<article>
|
<el-date-picker
|
v-model="i.rotaDate"
|
value-key="i.rotaDate"
|
type="date"
|
placeholder="选择日期"
|
size="small"
|
value-format="yyyy-MM-dd"
|
>
|
</el-date-picker>
|
</article>
|
</div>
|
<div class="people">
|
<div class="f">
|
<p class="label">值班领导：</p>
|
<article>
|
<el-select
|
v-model="i.rotaLeader"
|
size="small"
|
>
|
<el-option
|
v-for="item in choosePersonData"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</article>
|
</div>
|
<div
|
class="f"
|
v-for="(x,y) in i.rotaPerson"
|
:key="y+'-rotaPerson'"
|
>
|
<p class="label">值班人员{{y+1}}：</p>
|
<article>
|
<el-select
|
v-model="x.id"
|
size="small"
|
>
|
<el-option
|
v-for="item in choosePersonData"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</article>
|
</div>
|
<div class="f">
|
<button
|
class="m_btn small bgc_tran"
|
@click="onAddStaff(i,j)"
|
><b class="col_primary"><i class="el-icon-plus"></i>添加人员</b></button>
|
<button
|
class="m_btn small bgc_tran"
|
@click="deletes(i,j)"
|
><b class="col_primary"><i class="el-icon-plus"></i>删除人员</b></button>
|
<button class="m_btn small bgc_tran" @click="repeat(i,j)"><b class="col_primary"><i class="el-icon-plus"></i>重复今日</b></button>
|
</div>
|
</div>
|
</section>
|
</div>
|
|
|
|
<div class="add_list">
|
<button
|
class="m_btn small bgc_tran"
|
@click="onOnceList"
|
><b class="col_primary"><i class="el-icon-plus"></i>增加</b></button>
|
</div>
|
<div class="foot">
|
<button
|
class="m_btn demo_btn"
|
@click="$router.back()"
|
><b>取消</b></button>
|
<button class="m_btn bgc_primary" @click="isOk('recordform')">确定</button>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
// edit: { type: Boolean, default: false },
|
item: {
|
type: Array,
|
default: () => {
|
return [];
|
},
|
},
|
},
|
components: {},
|
data() {
|
return {
|
list:[ ],
|
a: "",
|
b: "",
|
choosePersonData:[],
|
selectIdsArr:[]
|
};
|
},
|
created () {
|
//获取选择人员
|
this.choosePerson()
|
const { id } = this.$route.params;
|
if (id) {
|
this.getDutyDetail();
|
} else {
|
this.onOnceList();
|
}
|
},
|
computed: {
|
title() {
|
return this.$route.query.id ? "编辑" : "新增";
|
},
|
},
|
watch: {},
|
methods: {
|
/** 获取详情 */
|
getDutyDetail () {
|
this.$api.get('patrolRecord/detailRota', {rotaId: this.$route.params.id}, d => {
|
const item = {
|
id: d.id,
|
rotaDate: d.rotaDate,
|
rotaLeader: +d.rotaLeader,
|
rotaPerson: d.rotaPerson.split(',').map(d => ({id: +d}))
|
};
|
this.list.push(item);
|
})
|
},
|
|
choosePerson() {
|
this.$api.post('patrolRecord/getTotlePerson', {param:""}, e => {
|
let newPerson = e.map(d=> {
|
return {
|
label : d.name,
|
value : d.id,
|
phone:d.phone,
|
}
|
});
|
this.choosePersonData = newPerson;
|
})
|
},
|
|
getListOnce() {
|
return {
|
rotaDate: "",
|
rotaLeader: "",
|
rotaPerson: [{ id: "" }],
|
};
|
},
|
onOnceList() {
|
this.list.push(this.getListOnce());
|
},
|
onAddStaff(i, j) {
|
i.rotaPerson.push({ id: "" });
|
},
|
|
//删除值班人员
|
deletes(i, j) {
|
if (i !== 0) {
|
i.rotaPerson.splice(i, 1)
|
console.log('deleted:', JSON.stringify(i.rotaPerson))
|
}
|
},
|
|
// 重复今日
|
repeat(i,j) {
|
const item = JSON.parse(JSON.stringify(i));
|
this.list.splice(j, 0, item);
|
},
|
|
//确认新增
|
isOk() {
|
for (let i = 0; i < this.list.length; i++ ) {
|
let rotaPerson = {}, item = this.list[i];
|
// 验证
|
if(!item.rotaDate) {
|
demo.toast("请选择日期")
|
return
|
}
|
if(!item.rotaLeader) {
|
demo.toast("请选择值班领导")
|
return
|
}
|
for (let n = 0; n < item.rotaPerson.length; n++) {
|
let rotaItem = item.rotaPerson[n];
|
if(!rotaItem.id) {
|
return demo.toast("请选择值班人员")
|
}
|
if (rotaItem.id && rotaPerson[`${rotaItem.id}`]) {
|
demo.toast(`值班表${i + 1} 值班人员重复，请重新选择`);
|
return false;
|
} else {
|
rotaPerson[`${rotaItem.id}`] = rotaItem.id;
|
}
|
}
|
}
|
|
let params = this.list.map(d => {
|
let rotaPerson = [], personName = [], personPhone = [], leaderName = '', leaderPhone = '';
|
d.rotaPerson.forEach(m => {
|
const item = this.choosePersonData.find(k => k.value === m.id);
|
personName.push(item.label);
|
personPhone.push(item.phone);
|
rotaPerson.push(m.id);
|
|
const leader = this.choosePersonData.find(k => k.value === d.rotaLeader);
|
leaderName = leader.label;
|
leaderPhone = leader.phone
|
});
|
return {
|
...d,
|
rotaPerson: rotaPerson.join(','),
|
personName: personName.join(','),
|
personPhone: personPhone.join(','),
|
leaderName,
|
leaderPhone,
|
}
|
});
|
// console.log(params)
|
this.$api.post('patrolRecord/addRota', params, e => {
|
demo.toast('保存成功');
|
this.$router.back()
|
})
|
}
|
}
|
};
|
</script>
|
<style lang='less' scoped>
|
.duty_add {
|
overflow-y: auto;
|
.label:before {
|
content: '* ';
|
color: red;
|
}
|
.cont {
|
width: calc(100% - 30px);
|
margin: 0 auto;
|
> section {
|
display: flex;
|
margin-bottom: 20px;
|
box-shadow: 0 0 20px rgb(240, 240, 240);
|
border-radius: 5px;
|
padding: 20px 5px;
|
transition: all 0.5s;
|
box-sizing: border-box;
|
&:hover {
|
box-shadow: 0 0 20px rgba(45, 238, 228, 0.3);
|
}
|
.time {
|
width: 25%;
|
}
|
.people {
|
width: 75%;
|
display: flex;
|
flex-wrap: wrap;
|
.f {
|
width: 30%;
|
min-width: 200px;
|
max-width: 350px;
|
margin-bottom: 5px;
|
}
|
}
|
}
|
}
|
.add_list {
|
padding: 30px 10px;
|
.m_btn {
|
min-width: 80px;
|
}
|
}
|
.foot {
|
display: flex;
|
padding-bottom: 50px;
|
.m_btn {
|
min-width: 100px;
|
margin-right: 20px;
|
}
|
}
|
.f {
|
display: flex;
|
.label {
|
width: 90px;
|
line-height: 32px;
|
font-size: 14px;
|
text-align: right;
|
}
|
article {
|
width: calc(100% - 110px);
|
> div {
|
width: 100%;
|
max-width: 100%;
|
}
|
}
|
.m_btn {
|
flex: 1;
|
}
|
}
|
}
|
</style>
|
