1 changed files with 244 additions and 0 deletions
@ -0,0 +1,244 @@ |
|||||||
|
<template> |
||||||
|
<div class="container"> |
||||||
|
<header> |
||||||
|
<el-form :inline="true" class="demo-form-inline" :label-width="120"> |
||||||
|
<el-row> |
||||||
|
<el-col :span="6"> |
||||||
|
<el-form-item label="来信时间"> |
||||||
|
<el-date-picker v-model="query.mailTime" value-format="YYYY-MM-DD" type="daterange" |
||||||
|
range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" /> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<el-form-item label="信件来源"> |
||||||
|
<el-select v-model="query.source" placeholder="" clearable style="width: 280px"> |
||||||
|
<el-option v-for="item in dictData.mail_source" :key="item.value" :label="item.name" |
||||||
|
:value="item.value" /> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<el-form-item label="来信人员"> |
||||||
|
<div class="flex gap"> |
||||||
|
<el-select v-model="query.contactField" style="width: 100px"> |
||||||
|
<el-option label="姓名" value="name" /> |
||||||
|
<el-option label="身份证" value="idCard" /> |
||||||
|
<el-option label="联系电话" value="phone" /> |
||||||
|
</el-select> |
||||||
|
<el-input v-model="query.contactFieldValue" :placeholder="placeholderText" clearable |
||||||
|
style="width: 120px" /> |
||||||
|
</div> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<el-form-item label="信件等级"> |
||||||
|
<el-select v-model="query.mailLevel" placeholder="" clearable style="width: 280px"> |
||||||
|
<el-option v-for="item in dictData.mail_level" :key="item.value" :label="item.name" |
||||||
|
:value="item.value" /> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
<el-row> |
||||||
|
<el-col :span="6"> |
||||||
|
<el-form-item label="信件分类"> |
||||||
|
<el-tree-select v-model="query.mailCategory" :data="mailStore.mailCategorys" check-strictly |
||||||
|
filterable style="width: 280px" /> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<el-form-item label="信件状态"> |
||||||
|
<el-select v-model="query.mailState" placeholder="" clearable style="width: 280px"> |
||||||
|
<el-option v-for="item in dictData.mail_state" :key="item.value" :label="item.name" |
||||||
|
:value="item.value" /> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<el-form-item label="办理单位"> |
||||||
|
<div class="flex gap"> |
||||||
|
<el-input v-model="query.handlingDeptId" placeholder="" clearable style="width: 280px" /> |
||||||
|
</div> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<el-form-item label="流程阶段"> |
||||||
|
<el-select v-model="query.flowKey" placeholder="" clearable style="width: 280px"> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
<div style="display: flex; justify-content: space-between; margin-bottom: 20px;"> |
||||||
|
<div> |
||||||
|
<el-button type="primary" @click="createMail" v-perms="['system:admin:add']">自建信件</el-button> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-button type="primary" @click="getList">查询</el-button> |
||||||
|
<el-button @click="reset">重置</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-form> |
||||||
|
</header> |
||||||
|
<main> |
||||||
|
<div class="table-container"> |
||||||
|
<el-table :data="todos" style="width: 100%" stripe> |
||||||
|
<el-table-column prop="mailTime" label="来信时间" align="center" width="170" /> |
||||||
|
<el-table-column label="信件来源" align="center" width="94"> |
||||||
|
<template #default="{ row }"> |
||||||
|
<span>{{ |
||||||
|
dictData.mail_source.filter( |
||||||
|
(item) => item.value === row.source |
||||||
|
)[0].name |
||||||
|
}}</span> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="contactName" label="姓名" align="center" width="70" /> |
||||||
|
<el-table-column prop="contactPhone" label="联系电话" width="120" /> |
||||||
|
<el-table-column label="信件等级" width="100"> |
||||||
|
<template #default="{ row }"> |
||||||
|
<mail-level :value="row.mailLevel" :list="dictData.mail_level" /> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="mailCategory" label="信件分类" width="160" /> |
||||||
|
<el-table-column prop="content" label="信件内容" show-overflow-tooltip /> |
||||||
|
<el-table-column label="信件状态" width="90"> |
||||||
|
<template #default="{ row }"> |
||||||
|
<span>{{ getDictLable(dictData.mail_state, row.mailState) }}</span> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="threeDeptName" label="办理单位" width="160" /> |
||||||
|
<el-table-column label="流程节点"> |
||||||
|
<template #default="{ row }"> |
||||||
|
<el-tag :type="getFlowTagType(row.flowKey)" v-if="row.flowBeforeName">{{ row.flowBeforeName |
||||||
|
}}</el-tag> |
||||||
|
<el-tag type="danger" v-else>未签收</el-tag> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="流程限时"> |
||||||
|
<template #default="{ row }"> |
||||||
|
<div v-if="row.flowLimitedRemainingTime > 0" class="success"> |
||||||
|
<span class="mr-4">剩余</span> |
||||||
|
<span class="text">{{ formatTimeText(row.flowLimitedRemainingTime) }}</span> |
||||||
|
</div> |
||||||
|
<div v-if="row.flowLimitedRemainingTime < 0" class="error"> |
||||||
|
<span class="mr-4">超时</span> |
||||||
|
<span class="text">{{ formatTimeText(-row.flowLimitedRemainingTime) }}</span> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="操作"> |
||||||
|
<template #default="{ row }"> |
||||||
|
<el-button type="primary" link @click="handleMail(row.mailId)">立即处理</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
</div> |
||||||
|
<div class="flex mt-4 end"> |
||||||
|
<el-pagination @size-change="getList" @current-change="getList" :current-page="query.current" |
||||||
|
:page-sizes="[10, 15, 20, 40, 50]" :page-size="query.size" |
||||||
|
layout="total,sizes, prev, pager, next, jumper" :total="totalSize.total"> |
||||||
|
</el-pagination> |
||||||
|
</div> |
||||||
|
</main> |
||||||
|
</div> |
||||||
|
|
||||||
|
<MailDialog v-model:show="showModel" :mail-id="activeMailId" @update="getList" /> |
||||||
|
<CreateMailSelfDialog v-model="showCreateMailSelf" @close="closeCreateMailSelf" /> |
||||||
|
</template> |
||||||
|
<script setup> |
||||||
|
import MailDialog from "../work/components/MailDialog.vue"; |
||||||
|
import CreateMailSelfDialog from "../work/components/CreateMailSelfDialog.vue"; |
||||||
|
import { getTodos } from "@/api/work"; |
||||||
|
import { getMailFlowDetail } from "@/api/mail"; |
||||||
|
import { useDictData } from "@/hooks/useDictOptions"; |
||||||
|
import useMailStore from "@/stores/modules/mail"; |
||||||
|
import { formatTimeText, getDictLable, getFlowTagType } from "@/utils/util"; |
||||||
|
|
||||||
|
const mailStore = useMailStore(); |
||||||
|
mailStore.getMailCategorys(); |
||||||
|
const { dictData } = useDictData(["mail_source", "mail_level", "mail_state"]); |
||||||
|
|
||||||
|
const query = ref({ |
||||||
|
contactField: "name", |
||||||
|
size: 10, |
||||||
|
current: 1 |
||||||
|
}); |
||||||
|
const totalSize = reactive({ |
||||||
|
total: 0, |
||||||
|
pages: 0 |
||||||
|
}) |
||||||
|
|
||||||
|
const placeholderText = ref("请输入姓名") |
||||||
|
watch(query.contactField, (val) => { |
||||||
|
if (val === "idCard") { |
||||||
|
placeholderText.value = "请输入身份证号" |
||||||
|
} else if (val === "phone") { |
||||||
|
placeholderText.value = "请输入联系电话" |
||||||
|
} else { |
||||||
|
placeholderText.value = "请输入姓名" |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
const showCreateMailSelf = ref(false); |
||||||
|
const closeCreateMailSelf = () => { |
||||||
|
showCreateMailSelf.value = false; |
||||||
|
} |
||||||
|
|
||||||
|
const todos = ref([]); |
||||||
|
const showModel = ref(false); |
||||||
|
const activeMailId = ref(""); |
||||||
|
|
||||||
|
function handleMail(mailId) { |
||||||
|
showModel.value = true; |
||||||
|
activeMailId.value = mailId; |
||||||
|
} |
||||||
|
|
||||||
|
function getList() { |
||||||
|
if (query.value.mailTime) { |
||||||
|
query.value.mailTimeStart = query.value.mailTime[0]; |
||||||
|
query.value.mailTimeEnd = query.value.mailTime[1]; |
||||||
|
} |
||||||
|
getTodos(query.value).then((data) => { |
||||||
|
todos.value = data.records; |
||||||
|
totalSize.total = data.total; |
||||||
|
totalSize.pages = data.pages; |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
function reset() { |
||||||
|
query.value = {} |
||||||
|
getList() |
||||||
|
} |
||||||
|
|
||||||
|
const createMail = () => { |
||||||
|
showCreateMailSelf.value = true; |
||||||
|
} |
||||||
|
|
||||||
|
getList() |
||||||
|
|
||||||
|
|
||||||
|
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
.table-container { |
||||||
|
border: 1px solid rgba(198, 208, 251, 1); |
||||||
|
} |
||||||
|
|
||||||
|
.success .text { |
||||||
|
color: #128009; |
||||||
|
padding: 0 8px; |
||||||
|
height: 24px; |
||||||
|
line-height: 24px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.error { |
||||||
|
background-color: #FF0000; |
||||||
|
color: #fff; |
||||||
|
padding: 0 8px; |
||||||
|
height: 24px; |
||||||
|
line-height: 24px; |
||||||
|
border-radius: 20px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue