|
|
@ -1,5 +1,5 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div class='DutyOfficer'> |
|
|
<div class="DutyOfficer"> |
|
|
<div class="filter"> |
|
|
<div class="filter"> |
|
|
<div> |
|
|
<div> |
|
|
<ButtonGradient @click.native="handleExport"> |
|
|
<ButtonGradient @click.native="handleExport"> |
|
|
@ -34,25 +34,28 @@ |
|
|
</ButtonGradient> |
|
|
</ButtonGradient> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<InputSearch |
|
|
<InputSearch |
|
|
style="width: 402px;" |
|
|
style="width: 402px" |
|
|
:formList="searchFormList" |
|
|
:formList="searchFormList" |
|
|
:formConfigOptions="{ labelWidth: '100px' }" |
|
|
:formConfigOptions="{ labelWidth: '100px' }" |
|
|
placeholder="请输入姓名、电话，回车搜索" |
|
|
placeholder="请输入姓名、电话，回车搜索" |
|
|
type="input" |
|
|
type="input" |
|
|
:params="params" |
|
|
:params="params" |
|
|
@handleSearch="handleSearch" /> |
|
|
@handleSearch="handleSearch" |
|
|
|
|
|
/> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="body"> |
|
|
<div class="body"> |
|
|
<ElEmpty v-if="!data.length && !isFirst" description="暂无数据" style="width: 100%;height: 100%;position: absolute;" /> |
|
|
<ElEmpty |
|
|
|
|
|
v-if="!data.length && !isFirst" |
|
|
|
|
|
description="暂无数据" |
|
|
|
|
|
style="width: 100%; height: 100%; position: absolute" |
|
|
|
|
|
/> |
|
|
<!-- <div v-if="!data.length && !isFirst" class="no-data" style="position: absolute">暂无数据</div> --> |
|
|
<!-- <div v-if="!data.length && !isFirst" class="no-data" style="position: absolute">暂无数据</div> --> |
|
|
|
|
|
|
|
|
<SpecialTable v-else :columns="columns" :data="data" class="body"> |
|
|
<SpecialTable v-else :columns="columns" :data="data" class="body"> |
|
|
<template #title-DateDuty> |
|
|
<template #title-DateDuty> |
|
|
<div class="special-title"> |
|
|
<div class="special-title">值班中心</div> |
|
|
值班中心 |
|
|
|
|
|
</div> |
|
|
|
|
|
</template> |
|
|
</template> |
|
|
<template #content-date="{ data }"> |
|
|
<template #content-date="{ data }"> |
|
|
<div class="item"> |
|
|
<div class="item"> |
|
|
@ -64,46 +67,62 @@ |
|
|
<div class="parent"> |
|
|
<div class="parent"> |
|
|
<div class="item"> |
|
|
<div class="item"> |
|
|
<img src="@screen/images/form/location.svg" /> |
|
|
<img src="@screen/images/form/location.svg" /> |
|
|
{{ data['organizationName'] }} |
|
|
{{ data["organizationName"] }} |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
<template #content-dayShift="{ data }"> |
|
|
<template #content-dayShift="{ data }"> |
|
|
<div class="item-parent" v-if="data.dayShift && data.dayShift.length"> |
|
|
<div class="item-parent" v-if="data.dayShift && data.dayShift.length"> |
|
|
<div class="item" v-for="(item,index) in data.dayShift" :key="index" > |
|
|
<div |
|
|
|
|
|
class="item" |
|
|
|
|
|
v-for="(item, index) in data.dayShift" |
|
|
|
|
|
:key="index" |
|
|
|
|
|
> |
|
|
<img src="@screen/images/form/people.svg" /> |
|
|
<img src="@screen/images/form/people.svg" /> |
|
|
{{ item.name }} |
|
|
{{ item.name }} |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="no-data" v-else> |
|
|
<div class="no-data" v-else>无值班人员</div> |
|
|
无值班人员 |
|
|
|
|
|
</div> |
|
|
|
|
|
</template> |
|
|
</template> |
|
|
<template #content-graveyardShift="{ data }"> |
|
|
<template #content-graveyardShift="{ data }"> |
|
|
<div class="item-parent" v-if="data.graveyardShift && data.graveyardShift.length"> |
|
|
<div |
|
|
<div class="item" v-for="(item,index) in data.graveyardShift" :key="index"> |
|
|
class="item-parent" |
|
|
|
|
|
v-if="data.graveyardShift && data.graveyardShift.length" |
|
|
|
|
|
> |
|
|
|
|
|
<div |
|
|
|
|
|
class="item" |
|
|
|
|
|
v-for="(item, index) in data.graveyardShift" |
|
|
|
|
|
:key="index" |
|
|
|
|
|
> |
|
|
<img src="@screen/images/form/people.svg" /> |
|
|
<img src="@screen/images/form/people.svg" /> |
|
|
{{ item.name }} |
|
|
{{ item.name }} |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="no-data" v-else> |
|
|
<div class="no-data" v-else>无值班人员</div> |
|
|
无值班人员 |
|
|
|
|
|
</div> |
|
|
|
|
|
</template> |
|
|
</template> |
|
|
<template #operation-content="{ data }"> |
|
|
<template #operation-content="{ data }"> |
|
|
<ButtonGradient class="operate-button" @click.native="handleModifyDutyInformationTable(true, data)"> |
|
|
<ButtonGradient |
|
|
|
|
|
class="operate-button" |
|
|
|
|
|
@click.native="handleModifyDutyInformationTable(true, data)" |
|
|
|
|
|
> |
|
|
<template #prefix> |
|
|
<template #prefix> |
|
|
<img src="@screen/images/form/edit.svg" /> |
|
|
<img src="@screen/images/form/edit.svg" /> |
|
|
</template> |
|
|
</template> |
|
|
修改 |
|
|
修改 |
|
|
</ButtonGradient> |
|
|
</ButtonGradient> |
|
|
<ButtonGradient class="operate-button" @click.native="handleOperateRecord(true, data)"> |
|
|
<ButtonGradient |
|
|
|
|
|
class="operate-button" |
|
|
|
|
|
@click.native="handleOperateRecord(true, data)" |
|
|
|
|
|
> |
|
|
<template #prefix> |
|
|
<template #prefix> |
|
|
<img src="@screen/images/form/record.svg" /> |
|
|
<img src="@screen/images/form/record.svg" /> |
|
|
</template> |
|
|
</template> |
|
|
记录 |
|
|
记录 |
|
|
</ButtonGradient> |
|
|
</ButtonGradient> |
|
|
<ButtonGradient class="operate-button" @click.native="handleDelete(data)"> |
|
|
<ButtonGradient |
|
|
|
|
|
class="operate-button" |
|
|
|
|
|
@click.native="handleDelete(data)" |
|
|
|
|
|
> |
|
|
<template #prefix> |
|
|
<template #prefix> |
|
|
<img src="@screen/images/form/delete.svg" /> |
|
|
<img src="@screen/images/form/delete.svg" /> |
|
|
</template> |
|
|
</template> |
|
|
@ -112,61 +131,67 @@ |
|
|
</template> |
|
|
</template> |
|
|
</SpecialTable> |
|
|
</SpecialTable> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<OperateRecord :visible="operateRecordVisible" @close="handleOperateRecord(false)" :data="dialogData" /> |
|
|
<OperateRecord |
|
|
|
|
|
:visible="operateRecordVisible" |
|
|
|
|
|
@close="handleOperateRecord(false)" |
|
|
|
|
|
:data="dialogData" |
|
|
|
|
|
/> |
|
|
|
|
|
|
|
|
<ModifyDutyInformationTable :visible="modifyDutyInformationTableVisible" :data="dialogData" |
|
|
<ModifyDutyInformationTable |
|
|
@close="handleModifyDutyInformationTable(false)" /> |
|
|
:visible="modifyDutyInformationTableVisible" |
|
|
|
|
|
:data="dialogData" |
|
|
|
|
|
@close="handleModifyDutyInformationTable(false)" |
|
|
|
|
|
/> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
import SpecialTable from "./../../components/SpecialTable.vue" |
|
|
import SpecialTable from "./../../components/SpecialTable.vue"; |
|
|
import OperateRecord from "./components/OperateRecord.vue" |
|
|
import OperateRecord from "./components/OperateRecord.vue"; |
|
|
import ModifyDutyInformationTable from "./components/ModifyDutyInformationTable.vue" |
|
|
import ModifyDutyInformationTable from "./components/ModifyDutyInformationTable.vue"; |
|
|
import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue'; |
|
|
import ButtonGradient from "@screen/components/Buttons/ButtonGradient.vue"; |
|
|
import InputSearch from '@screen/components/InputSearch/index.vue'; |
|
|
import InputSearch from "@screen/components/InputSearch/index.vue"; |
|
|
|
|
|
|
|
|
import { searchFormList } from "./data"; |
|
|
import { searchFormList } from "./data"; |
|
|
import request from "@/utils/request"; |
|
|
import request from "@/utils/request"; |
|
|
import { setLoading } from "@screen/utils/index.js" |
|
|
import { setLoading } from "@screen/utils/index.js"; |
|
|
import { delay, exportFile, confirm, uploadFile } from "@screen/utils/common"; |
|
|
import { delay, exportFile, confirm, uploadFile } from "@screen/utils/common"; |
|
|
import { Message } from "element-ui"; |
|
|
import { Message } from "element-ui"; |
|
|
import { getSelectOptionsStation } from "@screen/pages/control/event/businessDataManagement/utils.js"; |
|
|
import { getSelectOptionsStation } from "@screen/pages/control/event/businessDataManagement/utils.js"; |
|
|
|
|
|
|
|
|
export default { |
|
|
export default { |
|
|
name: 'DutyOfficer', |
|
|
name: "DutyOfficer", |
|
|
components: { |
|
|
components: { |
|
|
SpecialTable, |
|
|
SpecialTable, |
|
|
OperateRecord, |
|
|
OperateRecord, |
|
|
ModifyDutyInformationTable, |
|
|
ModifyDutyInformationTable, |
|
|
ButtonGradient, |
|
|
ButtonGradient, |
|
|
InputSearch |
|
|
InputSearch, |
|
|
}, |
|
|
}, |
|
|
inject: ['getPagination', 'setTotal', 'setCurrentPage'], |
|
|
inject: ["getPagination", "setTotal", "setCurrentPage"], |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
columns: [ |
|
|
columns: [ |
|
|
{ |
|
|
{ |
|
|
key: "date", |
|
|
key: "date", |
|
|
title: "值班日期", |
|
|
title: "值班日期", |
|
|
width: "210px" |
|
|
width: "210px", |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
key: "organizationName", |
|
|
key: "organizationName", |
|
|
title: "驻点", |
|
|
title: "驻点", |
|
|
width: "240px" |
|
|
width: "240px", |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
key: "dayShift", |
|
|
key: "dayShift", |
|
|
title: "白班", |
|
|
title: "白班", |
|
|
width: "510px" |
|
|
width: "510px", |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
key: "graveyardShift", |
|
|
key: "graveyardShift", |
|
|
title: "夜班", |
|
|
title: "夜班", |
|
|
width: "510px" |
|
|
width: "510px", |
|
|
}, |
|
|
}, |
|
|
], |
|
|
], |
|
|
data: [], |
|
|
data: [], |
|
|
@ -177,8 +202,8 @@ export default { |
|
|
required: false, |
|
|
required: false, |
|
|
type: "datePicker", |
|
|
type: "datePicker", |
|
|
options: { |
|
|
options: { |
|
|
valueFormat: "yyyy-MM-dd" |
|
|
valueFormat: "yyyy-MM-dd", |
|
|
} |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
label: "驻点:", |
|
|
label: "驻点:", |
|
|
@ -195,7 +220,7 @@ export default { |
|
|
dialogData: null, |
|
|
dialogData: null, |
|
|
isFirst: true, |
|
|
isFirst: true, |
|
|
params: "name", |
|
|
params: "name", |
|
|
} |
|
|
}; |
|
|
}, |
|
|
}, |
|
|
created() { |
|
|
created() { |
|
|
this.getData(); |
|
|
this.getData(); |
|
|
@ -203,7 +228,6 @@ export default { |
|
|
}, |
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
|
async getOptions() { |
|
|
async getOptions() { |
|
|
|
|
|
|
|
|
const result = await getSelectOptionsStation(2); |
|
|
const result = await getSelectOptionsStation(2); |
|
|
|
|
|
|
|
|
this.searchFormList[1].options.options = result; |
|
|
this.searchFormList[1].options.options = result; |
|
|
@ -230,8 +254,8 @@ export default { |
|
|
filename: "机构值班表", |
|
|
filename: "机构值班表", |
|
|
data: { |
|
|
data: { |
|
|
...this.searchData, |
|
|
...this.searchData, |
|
|
...this.getPagination() |
|
|
...this.getPagination(), |
|
|
} |
|
|
}, |
|
|
}); |
|
|
}); |
|
|
}, |
|
|
}, |
|
|
handleExportTemplate() { |
|
|
handleExportTemplate() { |
|
|
@ -240,8 +264,8 @@ export default { |
|
|
filename: "机构值班表面板", |
|
|
filename: "机构值班表面板", |
|
|
data: { |
|
|
data: { |
|
|
...this.searchData, |
|
|
...this.searchData, |
|
|
...this.getPagination() |
|
|
...this.getPagination(), |
|
|
} |
|
|
}, |
|
|
}); |
|
|
}); |
|
|
}, |
|
|
}, |
|
|
handleSearch(data) { |
|
|
handleSearch(data) { |
|
|
@ -258,35 +282,36 @@ export default { |
|
|
method: "get", |
|
|
method: "get", |
|
|
params: { |
|
|
params: { |
|
|
...this.searchData, |
|
|
...this.searchData, |
|
|
...this.getPagination() |
|
|
...this.getPagination(), |
|
|
} |
|
|
}, |
|
|
}) |
|
|
}) |
|
|
.then(result => { |
|
|
.then((result) => { |
|
|
if (result.code != 200) return; |
|
|
if (result.code != 200) return; |
|
|
this.data = result.rows.map(item => { |
|
|
this.data = result.rows.map((item) => { |
|
|
const result = { |
|
|
const result = { |
|
|
date: item.date, |
|
|
date: item.date, |
|
|
organizationName: item.organizationName, |
|
|
organizationName: item.organizationName, |
|
|
station: item.station, |
|
|
station: item.station, |
|
|
id: item.id |
|
|
id: item.id, |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
item.shiftsList.forEach(item => { |
|
|
item.shiftsList.forEach((item) => { |
|
|
const key = { 1: 'dayShift', 2: 'graveyardShift' }[item.scheduling]; |
|
|
const key = { 1: "dayShift", 2: "graveyardShift" }[ |
|
|
|
|
|
item.scheduling |
|
|
|
|
|
]; |
|
|
if (!result[key]) result[key] = []; |
|
|
if (!result[key]) result[key] = []; |
|
|
|
|
|
|
|
|
result[key].push(item); |
|
|
result[key].push(item); |
|
|
}) |
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return result |
|
|
return result; |
|
|
}); |
|
|
}); |
|
|
this.setTotal(result.total); |
|
|
this.setTotal(result.total); |
|
|
}) |
|
|
}) |
|
|
.finally(() => { |
|
|
.finally(() => { |
|
|
this.isFirst = false; |
|
|
this.isFirst = false; |
|
|
closeLoading(); |
|
|
closeLoading(); |
|
|
}) |
|
|
}); |
|
|
}, |
|
|
}, |
|
|
async handleDelete(data) { |
|
|
async handleDelete(data) { |
|
|
await confirm({ message: "是否要删除该值班信息?" }); |
|
|
await confirm({ message: "是否要删除该值班信息?" }); |
|
|
@ -297,31 +322,30 @@ export default { |
|
|
data: { |
|
|
data: { |
|
|
date: data.date, |
|
|
date: data.date, |
|
|
station: data.station, |
|
|
station: data.station, |
|
|
} |
|
|
}, |
|
|
}) |
|
|
}) |
|
|
.then(result => { |
|
|
.then((result) => { |
|
|
if (result.code != 200) return Message.error("删除失败"); |
|
|
if (result.code != 200) return Message.error("删除失败"); |
|
|
this.setCurrentPage(1) |
|
|
this.setCurrentPage(1); |
|
|
|
|
|
|
|
|
Message.success("删除成功") |
|
|
Message.success("删除成功"); |
|
|
}) |
|
|
}) |
|
|
.catch(() => { |
|
|
.catch(() => { |
|
|
Message.error("删除失败") |
|
|
Message.error("删除失败"); |
|
|
}) |
|
|
}); |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
uploadFile() { |
|
|
uploadFile() { |
|
|
uploadFile({ url: "/business/shifts/importEquipment" }); |
|
|
uploadFile({ url: "/business/shifts/importEquipment" }); |
|
|
} |
|
|
}, |
|
|
} |
|
|
}, |
|
|
} |
|
|
}; |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<style lang='scss' scoped> |
|
|
<style lang="scss" scoped> |
|
|
.DutyOfficer { |
|
|
.DutyOfficer { |
|
|
|
|
|
|
|
|
.special-title { |
|
|
.special-title { |
|
|
background: linear-gradient(180deg, #FFC071 0%, #D68D00 100%); |
|
|
background: linear-gradient(180deg, #ffc071 0%, #d68d00 100%); |
|
|
background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
color: transparent; |
|
|
} |
|
|
} |
|
|
|
