You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
311 lines
9.8 KiB
311 lines
9.8 KiB
<template> |
|
<el-tabs v-model="activeName"> |
|
<el-tab-pane label="我的待办" name="todo"> |
|
<TabsTable :data="todos" @update="todoList" /> |
|
|
|
</el-tab-pane> |
|
<el-tab-pane label="即将到期" name="due"> |
|
<el-table :data="superviseTodos" style="width: 100%" stripe> |
|
<el-table-column |
|
prop="mailTime" |
|
label="来信时间" |
|
align="center" |
|
width="180" |
|
/> |
|
<el-table-column |
|
prop="contactName" |
|
label="姓名" |
|
align="center" |
|
width="120" |
|
/> |
|
<el-table-column |
|
prop="contactPhone" |
|
label="联系电话" |
|
width="120" |
|
/> |
|
<el-table-column |
|
prop="contactIdCard" |
|
label="身份证号" |
|
width="120" |
|
/> |
|
<el-table-column |
|
prop="content" |
|
label="信件内容" |
|
show-overflow-tooltip |
|
/> |
|
<el-table-column prop="mailState" label="信件状态"> |
|
<template #default="{ row }"> |
|
<span>{{ |
|
getDictLable(dictData.mail_state, row.mailState) |
|
}}</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="流程节点"> |
|
<template #default="{ row }"> </template> |
|
</el-table-column> |
|
<el-table-column label="操作"> |
|
<template #default="{ row }"> |
|
<el-button type="primary" link @click="handleMail(row)" |
|
>立即处理</el-button |
|
> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
</el-tab-pane> |
|
<el-tab-pane label="督办信件" name="supervise"> |
|
<el-table :data="superviseTodos" style="width: 100%" stripe> |
|
<el-table-column |
|
prop="mailTime" |
|
label="来信时间" |
|
align="center" |
|
width="180" |
|
/> |
|
<el-table-column |
|
prop="contactName" |
|
label="姓名" |
|
align="center" |
|
width="120" |
|
/> |
|
<el-table-column |
|
prop="contactPhone" |
|
label="联系电话" |
|
width="120" |
|
/> |
|
<el-table-column |
|
prop="contactIdCard" |
|
label="身份证号" |
|
width="120" |
|
/> |
|
<el-table-column |
|
prop="content" |
|
label="信件内容" |
|
show-overflow-tooltip |
|
/> |
|
<el-table-column prop="mailState" label="信件状态"> |
|
<template #default="{ row }"> |
|
<span>{{ |
|
getDictLable(dictData.mail_state, row.mailState) |
|
}}</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="流程节点"> |
|
<template #default="{ row }"> </template> |
|
</el-table-column> |
|
<el-table-column label="操作"> |
|
<template #default="{ row }"> |
|
<el-button type="primary" link @click="handleMail(row)" |
|
>立即处理</el-button |
|
> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
</el-tab-pane> |
|
<el-tab-pane label="高敏信件" name="high"> |
|
<el-table :data="highTodos" style="width: 100%" stripe> |
|
<el-table-column |
|
prop="mailTime" |
|
label="来信时间" |
|
align="center" |
|
width="180" |
|
/> |
|
<el-table-column |
|
prop="contactName" |
|
label="姓名" |
|
align="center" |
|
width="120" |
|
/> |
|
<el-table-column |
|
prop="contactPhone" |
|
label="联系电话" |
|
width="120" |
|
/> |
|
<el-table-column |
|
prop="contactIdCard" |
|
label="身份证号" |
|
width="120" |
|
/> |
|
<el-table-column |
|
prop="content" |
|
label="信件内容" |
|
show-overflow-tooltip |
|
/> |
|
<el-table-column prop="mailState" label="信件状态"> |
|
<template #default="{ row }"> |
|
<span>{{ |
|
getDictLable(dictData.mail_state, row.mailState) |
|
}}</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="流程节点"> |
|
<template #default="{ row }"> </template> |
|
</el-table-column> |
|
<el-table-column label="操作"> |
|
<template #default="{ row }"> |
|
<el-button type="primary" link @click="handleMail(row)" |
|
>立即处理</el-button |
|
> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
</el-tab-pane> |
|
<el-tab-pane label="我的收藏" name="fav"> |
|
<el-table :data="highTodos" style="width: 100%" stripe> |
|
<el-table-column |
|
prop="mailTime" |
|
label="来信时间" |
|
align="center" |
|
width="180" |
|
/> |
|
<el-table-column |
|
prop="contactName" |
|
label="姓名" |
|
align="center" |
|
width="120" |
|
/> |
|
<el-table-column |
|
prop="contactPhone" |
|
label="联系电话" |
|
width="120" |
|
/> |
|
<el-table-column |
|
prop="contactIdCard" |
|
label="身份证号" |
|
width="120" |
|
/> |
|
<el-table-column |
|
prop="content" |
|
label="信件内容" |
|
show-overflow-tooltip |
|
/> |
|
<el-table-column prop="mailState" label="信件状态"> |
|
<template #default="{ row }"> |
|
<span>{{ |
|
getDictLable(dictData.mail_state, row.mailState) |
|
}}</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="流程节点"> |
|
<template #default="{ row }"> </template> |
|
</el-table-column> |
|
<el-table-column label="操作"> |
|
<template #default="{ row }"> |
|
|
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
</el-tab-pane> |
|
</el-tabs> |
|
|
|
<audio loop ref="newMailAudioRef"> |
|
<source :src="NewMailMp3" type="audio/mpeg"> |
|
</audio> |
|
</template> |
|
<script setup> |
|
import TabsTable from "./TabsTable.vue"; |
|
import NewMailMp3 from '/mp3/new-mail.mp3' |
|
|
|
import { useDictData } from "@/hooks/useDictOptions"; |
|
import { getTodos } from "@/api/work"; |
|
import { getDictLable, getFlowTagType } from "@/utils/util"; |
|
|
|
const { dictData } = useDictData(["mail_state"]); |
|
import emitter from "@/utils/bus"; |
|
import { nextTick } from "vue"; |
|
|
|
emitter.on('notice',()=>{ |
|
todoList() |
|
}) |
|
|
|
const activeName = ref("todo"); |
|
|
|
watch(activeName, (val) => { |
|
if (val === "todo") { |
|
} |
|
if (val === "supervise") { |
|
superviseTodoList(); |
|
} |
|
if (val === "high") { |
|
highTodoList(); |
|
} |
|
}); |
|
|
|
const todos = ref([]); |
|
const superviseTodos = ref([]); |
|
const highTodos = ref([]); |
|
const showModel = ref(false); |
|
|
|
const newMailAudioRef = ref() |
|
watch(todos, (val) => { |
|
nextTick(() => { |
|
todos.value.filter(item => item.flowName === '待签收').length > 0 ? newMailAudioRef.value.play() : newMailAudioRef.value.pause() |
|
}) |
|
}) |
|
|
|
todoList(); |
|
function todoList() { |
|
getTodos({ |
|
size: 100, |
|
current: 1, |
|
}).then((data) => { |
|
todos.value = data.records; |
|
}); |
|
} |
|
|
|
function superviseTodoList() { |
|
getTodos({ |
|
size: 8, |
|
current: 1, |
|
mailLevel: "superintend", |
|
}).then((data) => { |
|
superviseTodos.value = data.records; |
|
}); |
|
} |
|
|
|
function highTodoList() { |
|
getTodos({ |
|
size: 8, |
|
current: 1, |
|
mailLevel: "high_sensitivity", |
|
}).then((data) => { |
|
highTodos.value = data.records; |
|
}); |
|
} |
|
|
|
const activeMailId = ref(""); |
|
const activeWorkId = ref(0); |
|
const activeWorkType = ref(""); |
|
|
|
function handleMail(row) { |
|
showModel.value = true; |
|
activeMailId.value = row.mailId; |
|
activeWorkId.value = row.id; |
|
activeWorkType.value = row.workType; |
|
} |
|
</script> |
|
<style lang="scss" scoped> |
|
.el-tabs { |
|
.el-tab-pane { |
|
min-height: 200px; |
|
} |
|
:deep() { |
|
.el-tabs__header { |
|
margin: 0; |
|
|
|
.el-tabs__nav { |
|
padding-bottom: 16px; |
|
|
|
.el-tabs__item { |
|
font-weight: 700; |
|
} |
|
} |
|
} |
|
.el-tabs__active-bar { |
|
height: 4px; |
|
} |
|
.el-tabs__item { |
|
--el-font-size-base: 24px; |
|
--el-text-color-primary: #999; |
|
} |
|
} |
|
} |
|
</style> |