|
|
|
@ -5,22 +5,30 @@ |
|
|
|
<Form v-if="!data" :formList="formList" column="2" ref="FormRef" /> |
|
|
|
|
|
|
|
<div v-if="peopleList.length" class="people"> |
|
|
|
<div v-for=" item in peopleList" :class="{ active: getActive(item) }" :key="item.id" |
|
|
|
@click="chooseDutyPerson(item)"> |
|
|
|
<span>{{ item.name || '-' }}</span> |
|
|
|
<span>{{ item.contactNumber || '-' }}</span> |
|
|
|
<div |
|
|
|
v-for="item in peopleList" |
|
|
|
:class="{ active: getActive(item) }" |
|
|
|
:key="item.id" |
|
|
|
@click="chooseDutyPerson(item)" |
|
|
|
> |
|
|
|
<span>{{ item.name || "-" }}</span> |
|
|
|
<span>{{ item.contactNumber || "-" }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div v-else class="people no-data">暂无人员</div> |
|
|
|
|
|
|
|
<img src="./../images/Line.svg"> |
|
|
|
<img src="./../images/Line.svg" /> |
|
|
|
|
|
|
|
<div class="dutyPeople"> |
|
|
|
<div :class="['line', { active: active == 'dayShift' }]"> |
|
|
|
<p @click="active = 'dayShift'">白天值班:</p> |
|
|
|
<div> |
|
|
|
<p v-for="(item, index) in dayShift" :key="`${item.id}_${index}`" @click="removeDutyPerson(item)"> |
|
|
|
<p |
|
|
|
v-for="(item, index) in dayShift" |
|
|
|
:key="`${item.id}_${index}`" |
|
|
|
@click="removeDutyPerson(item)" |
|
|
|
> |
|
|
|
{{ item.name }} |
|
|
|
</p> |
|
|
|
<div class="no-data" v-if="!dayShift.length">未添加人员</div> |
|
|
|
@ -30,17 +38,28 @@ |
|
|
|
<div :class="['line', { active: active == 'graveyardShift' }]"> |
|
|
|
<p @click="active = 'graveyardShift'">晚上值班:</p> |
|
|
|
<div> |
|
|
|
<p v-for="(item, index) in graveyardShift" :key="`${index}_${item.id}`" @click="removeDutyPerson(item)"> |
|
|
|
<p |
|
|
|
v-for="(item, index) in graveyardShift" |
|
|
|
:key="`${index}_${item.id}`" |
|
|
|
@click="removeDutyPerson(item)" |
|
|
|
> |
|
|
|
{{ item.name }} |
|
|
|
</p> |
|
|
|
<div class="no-data" v-if="!graveyardShift.length">未添加人员</div> |
|
|
|
<div class="no-data" v-if="!graveyardShift.length"> |
|
|
|
未添加人员 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<template #footer> |
|
|
|
<Button :style="{ backgroundColor: '#C9C9C9' }" @click.native="$emit('close')"> 取消</Button> |
|
|
|
<Button |
|
|
|
:style="{ backgroundColor: '#0E708B' }" |
|
|
|
@click.native="$emit('close')" |
|
|
|
> |
|
|
|
取消</Button |
|
|
|
> |
|
|
|
<Button @click.native="submit">确认</Button> |
|
|
|
</template> |
|
|
|
</Dialog> |
|
|
|
@ -48,34 +67,34 @@ |
|
|
|
|
|
|
|
<script> |
|
|
|
import Dialog from "@screen/components/Dialog/index.vue"; |
|
|
|
import Button from "@screen/components/Buttons/Button.vue" |
|
|
|
import InputSearch from '@screen/components/InputSearch/index.vue'; |
|
|
|
import Form from '@screen/components/FormConfig'; |
|
|
|
import Button from "@screen/components/Buttons/Button.vue"; |
|
|
|
import InputSearch from "@screen/components/InputSearch/index.vue"; |
|
|
|
import Form from "@screen/components/FormConfig"; |
|
|
|
|
|
|
|
import { loadingMessage } from '@screen/utils/common'; |
|
|
|
import { loadingMessage } from "@screen/utils/common"; |
|
|
|
import { getSelectOptionsStation } from "@screen/pages/control/event/businessDataManagement/utils.js"; |
|
|
|
import request from "@/utils/request"; |
|
|
|
import { Message } from "element-ui"; |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'ModifyDutyInformationTable', |
|
|
|
name: "ModifyDutyInformationTable", |
|
|
|
components: { |
|
|
|
Dialog, |
|
|
|
Button, |
|
|
|
InputSearch, |
|
|
|
Form |
|
|
|
Form, |
|
|
|
}, |
|
|
|
props: { |
|
|
|
visible: { |
|
|
|
type: Boolean, |
|
|
|
default: false |
|
|
|
default: false, |
|
|
|
}, |
|
|
|
data: { |
|
|
|
type: Object, |
|
|
|
default: null |
|
|
|
} |
|
|
|
default: null, |
|
|
|
}, |
|
|
|
}, |
|
|
|
emit: ['close'], |
|
|
|
emit: ["close"], |
|
|
|
data() { |
|
|
|
return { |
|
|
|
formList: [ |
|
|
|
@ -85,11 +104,11 @@ export default { |
|
|
|
type: "select", |
|
|
|
required: true, |
|
|
|
options: { |
|
|
|
options: [] |
|
|
|
options: [], |
|
|
|
}, |
|
|
|
ons: { |
|
|
|
change: (id) => this.getPeopleList(id) |
|
|
|
} |
|
|
|
change: (id) => this.getPeopleList(id), |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "日期:", |
|
|
|
@ -97,29 +116,30 @@ export default { |
|
|
|
required: true, |
|
|
|
type: "datePicker", |
|
|
|
options: { |
|
|
|
valueFormat: "yyyy-MM-dd" |
|
|
|
} |
|
|
|
valueFormat: "yyyy-MM-dd", |
|
|
|
}, |
|
|
|
}, |
|
|
|
], |
|
|
|
value2: null, |
|
|
|
dayShift: [], |
|
|
|
graveyardShift: [], |
|
|
|
peopleList: [], |
|
|
|
active: 'dayShift' |
|
|
|
} |
|
|
|
active: "dayShift", |
|
|
|
}; |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
visibleModel: { |
|
|
|
get() { |
|
|
|
return this.visible |
|
|
|
return this.visible; |
|
|
|
}, |
|
|
|
set(bool) { |
|
|
|
this.$emit('close', bool); |
|
|
|
} |
|
|
|
this.$emit("close", bool); |
|
|
|
}, |
|
|
|
}, |
|
|
|
getActive() { |
|
|
|
return data => this[this.active].findIndex(item => item.id === data.id) != -1; |
|
|
|
} |
|
|
|
return (data) => |
|
|
|
this[this.active].findIndex((item) => item.id === data.id) != -1; |
|
|
|
}, |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
visible: { |
|
|
|
@ -127,33 +147,36 @@ export default { |
|
|
|
async handler(bool) { |
|
|
|
if (!bool) return; |
|
|
|
|
|
|
|
this.dayShift = [...this.data?.dayShift || []]; |
|
|
|
this.graveyardShift = [...this.data?.graveyardShift || []]; |
|
|
|
this.dayShift = [...(this.data?.dayShift || [])]; |
|
|
|
this.graveyardShift = [...(this.data?.graveyardShift || [])]; |
|
|
|
|
|
|
|
if (!this.data) { |
|
|
|
const result = await getSelectOptionsStation(2); |
|
|
|
|
|
|
|
this.formList[0].options.options = (result || []); |
|
|
|
this.formList[0].options.options = result || []; |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
this.getPeopleList(this.data.station); |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
chooseDutyPerson(item) { |
|
|
|
|
|
|
|
const hasInserted = this[this.active].find(_item => _item.employeesId === item.id || _item.id === item.id); |
|
|
|
const hasInserted = this[this.active].find( |
|
|
|
(_item) => _item.employeesId === item.id || _item.id === item.id |
|
|
|
); |
|
|
|
|
|
|
|
if (hasInserted) return Message.warning("人员已存在"); |
|
|
|
|
|
|
|
this[this.active].push(item) |
|
|
|
this[this.active].push(item); |
|
|
|
}, |
|
|
|
removeDutyPerson(item) { |
|
|
|
const index = this[this.active].findIndex(_item => _item.id === item.id); |
|
|
|
const index = this[this.active].findIndex( |
|
|
|
(_item) => _item.id === item.id |
|
|
|
); |
|
|
|
|
|
|
|
if (index === -1) return;//Message.warning("人员不存在"); |
|
|
|
if (index === -1) return; //Message.warning("人员不存在"); |
|
|
|
|
|
|
|
this[this.active].splice(index, 1); |
|
|
|
}, |
|
|
|
@ -169,20 +192,23 @@ export default { |
|
|
|
url: `/business/employees/list`, |
|
|
|
method: "GET", |
|
|
|
params: { |
|
|
|
organizationId: stationId |
|
|
|
} |
|
|
|
}).then((result) => { |
|
|
|
if (result.code != 200) return Message.error("人员获取失败"); |
|
|
|
if (!result.rows?.length) return Message.warning("该驻点下暂无人员"); |
|
|
|
organizationId: stationId, |
|
|
|
}, |
|
|
|
}) |
|
|
|
.then((result) => { |
|
|
|
if (result.code != 200) return Message.error("人员获取失败"); |
|
|
|
if (!result.rows?.length) return Message.warning("该驻点下暂无人员"); |
|
|
|
|
|
|
|
// Message.success("人员获取成功") |
|
|
|
// Message.success("人员获取成功") |
|
|
|
|
|
|
|
this.peopleList = result.rows; |
|
|
|
}).catch((err) => { |
|
|
|
Message.error("人员获取失败") |
|
|
|
}).finally(() => { |
|
|
|
closeMessage(); |
|
|
|
}) |
|
|
|
this.peopleList = result.rows; |
|
|
|
}) |
|
|
|
.catch((err) => { |
|
|
|
Message.error("人员获取失败"); |
|
|
|
}) |
|
|
|
.finally(() => { |
|
|
|
closeMessage(); |
|
|
|
}); |
|
|
|
|
|
|
|
//修改时,获取已排版人员列表 |
|
|
|
if (this.data) { |
|
|
|
@ -192,17 +218,24 @@ export default { |
|
|
|
data: { |
|
|
|
station: this.data.station, |
|
|
|
date: this.data.date, |
|
|
|
} |
|
|
|
}).then((result) => { |
|
|
|
console.log("result.data:", result.data); |
|
|
|
this.dayShift = result.data.filter(item => item.scheduling === "1"); |
|
|
|
console.log("this.dayShift11:", this.dayShift); |
|
|
|
this.graveyardShift = result.data.filter(item => item.scheduling === "2"); |
|
|
|
}).catch((err) => { |
|
|
|
Message.error("人员获取失败") |
|
|
|
}).finally(() => { |
|
|
|
closeMessage(); |
|
|
|
}, |
|
|
|
}) |
|
|
|
.then((result) => { |
|
|
|
console.log("result.data:", result.data); |
|
|
|
this.dayShift = result.data.filter( |
|
|
|
(item) => item.scheduling === "1" |
|
|
|
); |
|
|
|
console.log("this.dayShift11:", this.dayShift); |
|
|
|
this.graveyardShift = result.data.filter( |
|
|
|
(item) => item.scheduling === "2" |
|
|
|
); |
|
|
|
}) |
|
|
|
.catch((err) => { |
|
|
|
Message.error("人员获取失败"); |
|
|
|
}) |
|
|
|
.finally(() => { |
|
|
|
closeMessage(); |
|
|
|
}); |
|
|
|
} |
|
|
|
}, |
|
|
|
updateData(data) { |
|
|
|
@ -216,16 +249,16 @@ export default { |
|
|
|
//添加和修改时,人员id字段来源不一样 |
|
|
|
employeesId: item.employeesId ? item.employeesId : item.id, |
|
|
|
scheduling: 1, |
|
|
|
station: data.station |
|
|
|
station: data.station, |
|
|
|
})), |
|
|
|
...this.graveyardShift.map((item) => ({ |
|
|
|
employeesId: item.employeesId ? item.employeesId : item.id, |
|
|
|
scheduling: 2, |
|
|
|
station: data.station |
|
|
|
station: data.station, |
|
|
|
})), |
|
|
|
] |
|
|
|
} |
|
|
|
}) |
|
|
|
], |
|
|
|
}, |
|
|
|
}); |
|
|
|
}, |
|
|
|
async submit() { |
|
|
|
let data = this.data; |
|
|
|
@ -235,38 +268,44 @@ export default { |
|
|
|
} |
|
|
|
// console.log("%c [ data ]-202-「ModifyDutyInformationTable.vue」", "font-size:15px; background:#9afce6; color:#deffff;", data, this.value2); |
|
|
|
|
|
|
|
const closeMessage = loadingMessage({ message: "正在保存值班信息111..." }); |
|
|
|
const closeMessage = loadingMessage({ |
|
|
|
message: "正在保存值班信息111...", |
|
|
|
}); |
|
|
|
|
|
|
|
if (!this.data) { |
|
|
|
this.updateData(data).then((result) => { |
|
|
|
this.updateData(data) |
|
|
|
.then((result) => { |
|
|
|
// console.log("%c [ result ]-217-「ModifyDutyInformationTable.vue」", "font-size:15px; background:#335cf6; color:#77a0ff;", result); |
|
|
|
if (result.code != 200) return Message.error("保存失败"); |
|
|
|
|
|
|
|
Message.success("保存成功"); |
|
|
|
|
|
|
|
this.$emit('close') |
|
|
|
}).catch((err) => { |
|
|
|
Message.error("保存失败") |
|
|
|
}).finally(() => { |
|
|
|
closeMessage(); |
|
|
|
this.$emit("close"); |
|
|
|
}) |
|
|
|
.catch((err) => { |
|
|
|
Message.error("保存失败"); |
|
|
|
}) |
|
|
|
.finally(() => { |
|
|
|
closeMessage(); |
|
|
|
}); |
|
|
|
return; |
|
|
|
|
|
|
|
} else { |
|
|
|
const deleteIds = []; |
|
|
|
|
|
|
|
(this.data.dayShift || []).forEach(item => { |
|
|
|
const findIndex = this.dayShift.findIndex(_item => _item.id === item.id); |
|
|
|
(this.data.dayShift || []).forEach((item) => { |
|
|
|
const findIndex = this.dayShift.findIndex( |
|
|
|
(_item) => _item.id === item.id |
|
|
|
); |
|
|
|
|
|
|
|
if (findIndex === -1) deleteIds.push(item.id) |
|
|
|
if (findIndex === -1) deleteIds.push(item.id); |
|
|
|
}); |
|
|
|
(this.data.graveyardShift || []).forEach(item => { |
|
|
|
const findIndex = this.graveyardShift.findIndex(_item => _item.id === item.id); |
|
|
|
|
|
|
|
|
|
|
|
if (findIndex === -1) deleteIds.push(item.id) |
|
|
|
}) |
|
|
|
(this.data.graveyardShift || []).forEach((item) => { |
|
|
|
const findIndex = this.graveyardShift.findIndex( |
|
|
|
(_item) => _item.id === item.id |
|
|
|
); |
|
|
|
|
|
|
|
if (findIndex === -1) deleteIds.push(item.id); |
|
|
|
}); |
|
|
|
|
|
|
|
// Promise.allSettled([ |
|
|
|
// deleteIds?.length ? request({ |
|
|
|
@ -285,51 +324,59 @@ export default { |
|
|
|
// }) |
|
|
|
|
|
|
|
//如果有需要删除的人员,先删除,再更新 |
|
|
|
if(deleteIds?.length){ |
|
|
|
if (deleteIds?.length) { |
|
|
|
request({ |
|
|
|
url: `/business/shifts/${deleteIds.join()}`, |
|
|
|
method: "DELETE", |
|
|
|
data: {} |
|
|
|
}).then((result) => { |
|
|
|
if (result.code != 200) return Message.error("修改失败"); |
|
|
|
|
|
|
|
this.updateData(this.data).then((result) => { |
|
|
|
data: {}, |
|
|
|
}) |
|
|
|
.then((result) => { |
|
|
|
if (result.code != 200) return Message.error("修改失败"); |
|
|
|
|
|
|
|
Message.success("修改成功"); |
|
|
|
this.updateData(this.data) |
|
|
|
.then((result) => { |
|
|
|
if (result.code != 200) return Message.error("修改失败"); |
|
|
|
|
|
|
|
this.$emit('close') |
|
|
|
}).catch((err) => { |
|
|
|
Message.error("修改失败") |
|
|
|
}).finally(() => { |
|
|
|
closeMessage(); |
|
|
|
Message.success("修改成功"); |
|
|
|
|
|
|
|
this.$emit("close"); |
|
|
|
}) |
|
|
|
.catch((err) => { |
|
|
|
Message.error("修改失败"); |
|
|
|
}) |
|
|
|
.finally(() => { |
|
|
|
closeMessage(); |
|
|
|
}); |
|
|
|
}) |
|
|
|
}).catch((err) => { |
|
|
|
Message.error("删除失败") |
|
|
|
}).finally(() => { |
|
|
|
closeMessage(); |
|
|
|
}) |
|
|
|
}else{ |
|
|
|
this.updateData(this.data).then((result) => { |
|
|
|
if (result.code != 200) return Message.error("修改失败"); |
|
|
|
.catch((err) => { |
|
|
|
Message.error("删除失败"); |
|
|
|
}) |
|
|
|
.finally(() => { |
|
|
|
closeMessage(); |
|
|
|
}); |
|
|
|
} else { |
|
|
|
this.updateData(this.data) |
|
|
|
.then((result) => { |
|
|
|
if (result.code != 200) return Message.error("修改失败"); |
|
|
|
|
|
|
|
Message.success("修改成功"); |
|
|
|
Message.success("修改成功"); |
|
|
|
|
|
|
|
this.$emit('close') |
|
|
|
}).catch((err) => { |
|
|
|
Message.error("修改失败") |
|
|
|
}).finally(() => { |
|
|
|
closeMessage(); |
|
|
|
}) |
|
|
|
this.$emit("close"); |
|
|
|
}) |
|
|
|
.catch((err) => { |
|
|
|
Message.error("修改失败"); |
|
|
|
}) |
|
|
|
.finally(() => { |
|
|
|
closeMessage(); |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang='scss' scoped> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.ModifyDutyInformationTable { |
|
|
|
width: 947px; |
|
|
|
height: 658px; |
|
|
|
@ -343,7 +390,6 @@ export default { |
|
|
|
gap: 24px; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.body { |
|
|
|
@ -363,14 +409,14 @@ export default { |
|
|
|
flex: 1; |
|
|
|
overflow-y: auto; |
|
|
|
|
|
|
|
>div { |
|
|
|
background: #0D5F79; |
|
|
|
> div { |
|
|
|
background: #0d5f79; |
|
|
|
height: 65px; |
|
|
|
border-radius: 2px; |
|
|
|
font-size: 16px; |
|
|
|
font-family: PingFang SC, PingFang SC; |
|
|
|
font-weight: 500; |
|
|
|
color: #FFFFFF; |
|
|
|
color: #ffffff; |
|
|
|
letter-spacing: 1px; |
|
|
|
|
|
|
|
display: flex; |
|
|
|
@ -382,7 +428,7 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
.active { |
|
|
|
background: linear-gradient(180deg, #00AEE5 0%, #0086B1 100%); |
|
|
|
background: linear-gradient(180deg, #00aee5 0%, #0086b1 100%); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@ -393,11 +439,15 @@ export default { |
|
|
|
|
|
|
|
.active { |
|
|
|
p { |
|
|
|
background: linear-gradient(180deg, rgba(1, 167, 220, 0) 0%, #01A7DC 100%); |
|
|
|
background: linear-gradient( |
|
|
|
180deg, |
|
|
|
rgba(1, 167, 220, 0) 0%, |
|
|
|
#01a7dc 100% |
|
|
|
); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
>div { |
|
|
|
> div { |
|
|
|
display: flex; |
|
|
|
gap: 9px; |
|
|
|
border-radius: 2px; |
|
|
|
@ -405,7 +455,11 @@ export default { |
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
p { |
|
|
|
background: linear-gradient(180deg, rgba(0, 148, 255, 0) 0%, rgba(37, 124, 255, .15) 100%); |
|
|
|
background: linear-gradient( |
|
|
|
180deg, |
|
|
|
rgba(0, 148, 255, 0) 0%, |
|
|
|
rgba(37, 124, 255, 0.15) 100% |
|
|
|
); |
|
|
|
height: 42px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
@ -414,14 +468,14 @@ export default { |
|
|
|
font-size: 16px; |
|
|
|
font-family: PingFang SC, PingFang SC; |
|
|
|
font-weight: 500; |
|
|
|
color: #FFFFFF; |
|
|
|
color: #ffffff; |
|
|
|
|
|
|
|
border-radius: 2px; |
|
|
|
|
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
|
|
|
|
>div { |
|
|
|
> div { |
|
|
|
flex: 1; |
|
|
|
display: flex; |
|
|
|
gap: 9px; |
|
|
|
|
