|
|
|
@ -1,42 +1,43 @@ |
|
|
|
<template> |
|
|
|
<Dialog v-model="visibleModel" title="修改值班信息表"> |
|
|
|
<Dialog v-model="visibleModel" :title="`${data ? '修改' : '新增'}值班信息表`"> |
|
|
|
<div class="ModifyDutyInformationTable"> |
|
|
|
<div class="search"> |
|
|
|
<InputSearch style="width: 402px;" /> |
|
|
|
|
|
|
|
</div> |
|
|
|
<div class="body"> |
|
|
|
<div class="people"> |
|
|
|
<div v-for="item in 36" :key="item"> |
|
|
|
<span>甘易玫</span> |
|
|
|
<span>13011600555</span> |
|
|
|
<Form v-if="!data" :formList="formList" column="2" ref="FormRef" /> |
|
|
|
|
|
|
|
<div v-if="peopleList.length" class="people"> |
|
|
|
<div v-for=" item in peopleList " :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"> |
|
|
|
|
|
|
|
<div class="dutyPeople"> |
|
|
|
<div class="line"> |
|
|
|
<p>白天值班:</p> |
|
|
|
<div :class="['line', { active: active == 'dayShift' }]"> |
|
|
|
<p @click="active = 'dayShift'">白天值班:</p> |
|
|
|
<div> |
|
|
|
<p v-for="item in 15">甘易玫</p> |
|
|
|
<p v-for=" item in dayShift" :key="item.id" @click="removeDutyPerson(item)">{{ item.name }}</p> |
|
|
|
<div class="no-data" v-if="!dayShift.length">未添加人员</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="line"> |
|
|
|
<p>晚上值班:</p> |
|
|
|
|
|
|
|
<div :class="['line', { active: active == 'graveyardShift' }]"> |
|
|
|
<p @click="active = 'graveyardShift'">晚上值班:</p> |
|
|
|
<div> |
|
|
|
<p v-for="item in 15">甘易玫</p> |
|
|
|
<p v-for=" item in graveyardShift" :key="item.id" @click="removeDutyPerson(item)">{{ item.name }}</p> |
|
|
|
<div class="no-data" v-if="!graveyardShift.length">未添加人员</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<Form :formList="formList" :rules="{ '桩号:': [{ required: true, message: '年龄不能为空' }] }" column="1" |
|
|
|
style="flex: 1;" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="bottom"> |
|
|
|
<Button>确认</Button> |
|
|
|
<Button :style="{ backgroundColor: '#C9C9C9' }"> 取消</Button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<template #footer> |
|
|
|
<Button :style="{ backgroundColor: '#C9C9C9' }" @click.native="$emit('close')"> 取消</Button> |
|
|
|
<Button @click.native="submit">确认</Button> |
|
|
|
</template> |
|
|
|
</Dialog> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -46,6 +47,11 @@ 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 request from "@/utils/request"; |
|
|
|
import { Message } from "element-ui"; |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'ModifyDutyInformationTable', |
|
|
|
components: { |
|
|
|
@ -58,6 +64,10 @@ export default { |
|
|
|
visible: { |
|
|
|
type: Boolean, |
|
|
|
default: false |
|
|
|
}, |
|
|
|
data: { |
|
|
|
type: Object, |
|
|
|
default: null |
|
|
|
} |
|
|
|
}, |
|
|
|
emit: ['close'], |
|
|
|
@ -65,21 +75,32 @@ export default { |
|
|
|
return { |
|
|
|
formList: [ |
|
|
|
{ |
|
|
|
label: "操作人员:", |
|
|
|
key: "input", |
|
|
|
type: "input", |
|
|
|
label: "驻点:", |
|
|
|
key: "station", |
|
|
|
type: "select", |
|
|
|
required: true, |
|
|
|
options: { |
|
|
|
placeholder: "请输入人员名称" |
|
|
|
options: [] |
|
|
|
}, |
|
|
|
ons: { |
|
|
|
change: (id) => this.getPeopleList(id) |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: "日期:", |
|
|
|
key: "date", |
|
|
|
required: true, |
|
|
|
type: "datePicker", |
|
|
|
options: { |
|
|
|
valueFormat: "yyyy-MM-dd" |
|
|
|
} |
|
|
|
}, |
|
|
|
], |
|
|
|
list: Array.from({ length: 15 }).map(item => ({ |
|
|
|
title: "123456", |
|
|
|
list: Array.from({ length: 15 }).map((_, index) => ({ |
|
|
|
name: index, |
|
|
|
phone: "12345678901" |
|
|
|
})) |
|
|
|
})) |
|
|
|
value2: null, |
|
|
|
dayShift: [], |
|
|
|
graveyardShift: [], |
|
|
|
peopleList: [], |
|
|
|
active: 'dayShift' |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
@ -91,6 +112,175 @@ export default { |
|
|
|
this.$emit('close', bool); |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
visible: { |
|
|
|
immediate: true, |
|
|
|
handler(bool) { |
|
|
|
if (!bool) return; |
|
|
|
if (!this.data) { |
|
|
|
// 机构 |
|
|
|
request({ |
|
|
|
url: `/business/employees/organization`, |
|
|
|
method: "POST", |
|
|
|
data: {} |
|
|
|
}) |
|
|
|
.then((result) => { |
|
|
|
if (result.code != 200) return; |
|
|
|
|
|
|
|
const data = []; |
|
|
|
|
|
|
|
result.data.forEach(item => { |
|
|
|
|
|
|
|
if (item.organizationType == 2) { |
|
|
|
data.push({ |
|
|
|
key: item.id, |
|
|
|
label: item.organizationName, |
|
|
|
disabled: false |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
this.formList[0].options.options = data; |
|
|
|
}) |
|
|
|
.catch((err) => { |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
this.getPeopleList(this.data.station); |
|
|
|
this.dayShift = [...this.data.dayShift || []]; |
|
|
|
this.graveyardShift = [...this.data.graveyardShift || []]; |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
chooseDutyPerson(item) { |
|
|
|
const hasInserted = this[this.active].find(_item => _item.id === item.id); |
|
|
|
|
|
|
|
if (hasInserted) return Message.warning("人员已存在"); |
|
|
|
|
|
|
|
this[this.active].push(item) |
|
|
|
}, |
|
|
|
removeDutyPerson(item) { |
|
|
|
const index = this[this.active].findIndex(_item => _item.id === item.id); |
|
|
|
|
|
|
|
if (index === -1) return Message.warning("人员不存在"); |
|
|
|
|
|
|
|
this[this.active].splice(index, 1); |
|
|
|
}, |
|
|
|
getPeopleList(id) { |
|
|
|
this.peopleList = []; |
|
|
|
|
|
|
|
this.dayShift = []; |
|
|
|
this.graveyardShift = []; |
|
|
|
|
|
|
|
const closeMessage = loadingMessage({ message: "人员获取中..." }); |
|
|
|
|
|
|
|
request({ |
|
|
|
url: `/business/employees/list`, |
|
|
|
method: "GET", |
|
|
|
params: { |
|
|
|
organizationId: id |
|
|
|
} |
|
|
|
}) |
|
|
|
.then((result) => { |
|
|
|
if (result.code != 200) return Message.error("人员获取失败"); |
|
|
|
if (!result.rows?.length) return Message.warning("该驻点下暂无人员"); |
|
|
|
|
|
|
|
Message.success("人员获取成功") |
|
|
|
|
|
|
|
this.peopleList = result.rows; |
|
|
|
}) |
|
|
|
.catch((err) => { |
|
|
|
Message.error("人员获取失败") |
|
|
|
}) |
|
|
|
.finally(() => { |
|
|
|
closeMessage(); |
|
|
|
}) |
|
|
|
}, |
|
|
|
updateData(data) { |
|
|
|
return request({ |
|
|
|
url: `/business/shifts`, |
|
|
|
method: "POST", |
|
|
|
data: { |
|
|
|
date: data.date, |
|
|
|
employeesJson: [ |
|
|
|
...this.dayShift.map(({ id }) => ({ |
|
|
|
employeesId: id, |
|
|
|
scheduling: 1, |
|
|
|
station: data.station |
|
|
|
})), |
|
|
|
...this.graveyardShift.map(({ id }) => ({ |
|
|
|
employeesId: id, |
|
|
|
scheduling: 2, |
|
|
|
station: data.station |
|
|
|
})), |
|
|
|
] |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
async submit() { |
|
|
|
let data = this.data; |
|
|
|
|
|
|
|
if (this.$refs.FormRef) |
|
|
|
data = await this.$refs.FormRef.validate(); |
|
|
|
console.log("%c [ data ]-202-「ModifyDutyInformationTable.vue」", "font-size:15px; background:#9afce6; color:#deffff;", data, this.value2); |
|
|
|
|
|
|
|
const closeMessage = loadingMessage({ message: "正在保存值班信息..." }); |
|
|
|
|
|
|
|
if (!this.data) { |
|
|
|
this.updateData(data) |
|
|
|
.then((result) => { |
|
|
|
if (result.code != 200) return Message.error("保存失败"); |
|
|
|
|
|
|
|
Message.success("保存成功"); |
|
|
|
|
|
|
|
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); |
|
|
|
|
|
|
|
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([ |
|
|
|
request({ |
|
|
|
url: `/business/shifts/${deleteIds.join()}`, |
|
|
|
method: "DELETE", |
|
|
|
data: {} |
|
|
|
}), |
|
|
|
this.updateData(this.data) |
|
|
|
]) |
|
|
|
.then(([del, update]) => { |
|
|
|
if (del.status === 'rejected' && update.status === 'rejected') return Message.error("修改失败"); |
|
|
|
if (del.value.code != '200' && update.value.code != '200') return Message.error("修改失败"); |
|
|
|
|
|
|
|
this.$emit('close') |
|
|
|
}) |
|
|
|
.finally(() => { |
|
|
|
closeMessage(); |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
@ -130,8 +320,8 @@ export default { |
|
|
|
overflow-y: auto; |
|
|
|
|
|
|
|
>div { |
|
|
|
background: #0D5F79; |
|
|
|
height: 65px; |
|
|
|
background: linear-gradient(180deg, #00AEE5 0%, #0086B1 100%); |
|
|
|
border-radius: 2px; |
|
|
|
font-size: 16px; |
|
|
|
font-family: PingFang SC, PingFang SC; |
|
|
|
@ -146,6 +336,10 @@ export default { |
|
|
|
cursor: pointer; |
|
|
|
padding: 9px 12px; |
|
|
|
} |
|
|
|
|
|
|
|
.active { |
|
|
|
background: linear-gradient(180deg, #00AEE5 0%, #0086B1 100%); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.dutyPeople { |
|
|
|
@ -153,6 +347,12 @@ export default { |
|
|
|
flex-direction: column; |
|
|
|
gap: 9px; |
|
|
|
|
|
|
|
.active { |
|
|
|
p { |
|
|
|
background: linear-gradient(180deg, rgba(1, 167, 220, 0) 0%, #01A7DC 100%); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
>div { |
|
|
|
display: flex; |
|
|
|
gap: 9px; |
|
|
|
@ -161,7 +361,7 @@ export default { |
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
p { |
|
|
|
background: linear-gradient(180deg, rgba(1, 167, 220, 0) 0%, #01A7DC 100%); |
|
|
|
background: linear-gradient(180deg, rgba(0, 148, 255, 0) 0%, rgba(37, 124, 255, .15) 100%); |
|
|
|
height: 42px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
@ -190,15 +390,5 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.bottom { |
|
|
|
display: flex; |
|
|
|
gap: 15px; |
|
|
|
justify-content: end; |
|
|
|
|
|
|
|
>div { |
|
|
|
width: 96px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
Joe
1 year ago