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.
262 lines
12 KiB
262 lines
12 KiB
<template> |
|
<div class="container"> |
|
<header> |
|
<el-form :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="结束日期" |
|
@change="handleMailTimeQuery" /> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="6"> |
|
<el-form-item label="信件来源"> |
|
<el-select v-model="query.source" placeholder="" clearable st filterable> |
|
<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="请输入姓名" clearable /> |
|
</div> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="6"> |
|
<el-form-item label="信件等级"> |
|
<el-select v-model="query.mailLevel" placeholder="" clearable st> |
|
<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 |
|
clearable filterable /> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="6"> |
|
<el-form-item label="信件状态"> |
|
<el-select v-model="query.mailState" placeholder="" clearable st> |
|
<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="办理单位"> |
|
<DeptTreeSelect v-model="query.deptId" check-strictly /> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="6"> |
|
<el-form-item label="申诉状态"> |
|
<el-select v-model="query.appealState" placeholder="" clearable st> |
|
<el-option v-for="item in dictData.appeal_state" :key="item.value" :label="item.name" |
|
:value="item.value"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
</el-row> |
|
<div class="flex end mb-20"> |
|
<el-button type="primary" @click="getList">查询</el-button> |
|
<el-button @click="reset">重置</el-button> |
|
</div> |
|
</el-form> |
|
</header> |
|
<main> |
|
<div class="table-container"> |
|
<el-table :data="dissatisfied" style="width: 100%" stripe> |
|
<el-table-column prop="mailTime" label="来信时间" align="center" width="160" /> |
|
<el-table-column label="信件来源" align="center" width="94"> |
|
<template #default="{ row }"> |
|
<span>{{ |
|
getDictLable(dictData.mail_source, row.source) |
|
}}</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="contactName" label="姓名" align="center" width="80" /> |
|
<el-table-column prop="contactPhone" label="联系电话" width="120" align="center" /> |
|
|
|
<el-table-column prop="mailCategory" label="信件分类" width="120" align="center" /> |
|
<el-table-column prop="content" label="信件内容" show-overflow-tooltip align="center" /> |
|
<el-table-column label="信件状态" width="90" align="center"> |
|
|
|
<template #default="{ row }"> |
|
<span>{{ getDictLable(dictData.mail_state, row.mailState) }}</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="threeDeptName" label="办理单位" width="120" align="center" /> |
|
<el-table-column label="流程节点" align="center"> |
|
|
|
<template #default="{ row }"> |
|
<el-tag :type="getFlowTagType(row.flowName)" v-if="row.flowName">{{ row.flowName |
|
}}</el-tag> |
|
<el-tag type="danger" v-else>未签收</el-tag> |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="appealState" label="申诉状态" align="center"> |
|
|
|
<template #default="{ row }"> |
|
<el-text :type="getAppealType(row.appealState)" v-if="row.appealState">{{ |
|
getAppealName(row.appealState) }}</el-text> |
|
<el-text v-else>未审诉</el-text> |
|
<el-text type="info" v-if="['1', '3'].includes(row.appealState)"> |
|
({{ appealDepts[row.handlingDept] || '加载中...' }}) |
|
</el-text> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="信件等级" width="100" align="center"> |
|
|
|
<template #default="{ row }"> |
|
<mail-level :value="row.mailLevel" :list="dictData.mail_level" /> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="操作" fixed="right" width="120" align="center"> |
|
|
|
<template #default="{ row }"> |
|
<el-button type="primary" link @click="handleDetail(row.id)">详情</el-button> |
|
<el-button type="primary" link |
|
v-if="(row.appealState === '0' || row.appealState === null) && row.threeDeptId === row.nowDeptId" |
|
@click="launchAppeal(row.id)">申诉</el-button> |
|
<el-button type="primary" link v-if="row.appealState === '1' || row.appealState === '2'" |
|
@click="handleAppealProgress(row.id)">查看申诉进度</el-button> |
|
<el-button type="primary" link v-if="row.appealState === '3'" |
|
@click="handleOverruleReason(row.id)">查看驳回理由</el-button> |
|
<el-button type="primary" link v-if="row.appealState === '1' && row.ifHandle === 1" |
|
v-perms="['dissatisfied:handle']" @click="handleAppeal(row.id)">立即处理</el-button> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
</div> |
|
<div class="flex mt-4 end"> |
|
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" |
|
: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" :disabled="true" @update="getList" /> |
|
<LaunchAppeal v-model:show="showAppeal" :mail-id="activeMailId" @update="getList" /> |
|
<AppealProgress v-model:show="showAppealProgress" :mail-id="activeMailId" @update="getList" /> |
|
<OverruleReason v-model:show="showOverruleReason" :mail-id="activeMailId" @update="getList" /> |
|
<HandleAppeal v-model:show="showHandleAppeal" :mail-id="activeMailId" @update="getList" /> |
|
</template> |
|
|
|
<script lang="ts" setup> |
|
import MailDialog from "./components/MailDialog.vue"; |
|
import LaunchAppeal from "./components/LaunchAppeal.vue"; |
|
import AppealProgress from "./components/AppealProgress.vue"; |
|
import OverruleReason from "./components/OverruleReason.vue"; |
|
import HandleAppeal from "./components/HandleAppeal.vue"; |
|
import useMailStore from "@/stores/modules/mail"; |
|
import { getDissatisfied } from "@/api/work"; |
|
import { ref, reactive, watchEffect } from "vue"; |
|
import { useDictData } from "@/hooks/useDictOptions"; |
|
import { getDictLable, getFlowTagType, getAppealType, getAppealDept, getAppealName } from "@/utils/util"; |
|
|
|
const mailStore = useMailStore(); |
|
mailStore.getMailCategorys(); |
|
const { dictData } = useDictData(["mail_source", "mail_level", "mail_state", "appeal_state"]); |
|
|
|
const query = ref({ |
|
size: 10, |
|
current: 1 |
|
}); |
|
const totalSize = reactive({ |
|
total: 0, |
|
pages: 0 |
|
}) |
|
const handleSizeChange = (size: any) => { |
|
query.value.size = size; |
|
getList(); |
|
}; |
|
const handleCurrentChange = (current: any) => { |
|
query.value.current = current; |
|
getList(); |
|
}; |
|
|
|
const dissatisfied = ref([]); |
|
const showModel = ref(false); |
|
const activeMailId = ref(""); |
|
const showAppeal = ref(false); |
|
const showAppealProgress = ref(false); |
|
const showOverruleReason = ref(false); |
|
const showHandleAppeal = ref(false); |
|
|
|
const appealDepts = ref({}); |
|
watchEffect(() => { |
|
for (const data of dissatisfied.value) { |
|
if (['1', '3'].includes(data.appealState) && !appealDepts.value[data.handlingDept]) { |
|
getAppealDept(data.handlingDept).then(deptName => { |
|
appealDepts.value[data.handlingDept] = deptName; |
|
}); |
|
} |
|
} |
|
}); |
|
|
|
function handleDetail(mailId) { |
|
showModel.value = true; |
|
activeMailId.value = mailId; |
|
} |
|
function getList() { |
|
getDissatisfied(query.value).then((data: any) => { |
|
console.log('data', data) |
|
dissatisfied.value = data.records; |
|
totalSize.total = data.total; |
|
totalSize.pages = data.pages; |
|
}); |
|
} |
|
|
|
function reset() { |
|
query.value = {} |
|
getList() |
|
} |
|
|
|
getList() |
|
const handleMailTimeQuery = (val: any) => { |
|
if (val) { |
|
query.value.mailTimeStart = val[0]; |
|
query.value.mailTimeEnd = val[1]; |
|
} else { |
|
delete query.value.mailTimeStart |
|
delete query.value.mailTimeEnd |
|
} |
|
} |
|
|
|
const launchAppeal = (mailId: any) => { |
|
showAppeal.value = true; |
|
activeMailId.value = mailId; |
|
} |
|
const handleAppealProgress = (mailId: any) => { |
|
showAppealProgress.value = true; |
|
activeMailId.value = mailId; |
|
} |
|
const handleOverruleReason = (mailId: any) => { |
|
showOverruleReason.value = true; |
|
activeMailId.value = mailId; |
|
} |
|
const handleAppeal = (mailId: any) => { |
|
showHandleAppeal.value = true; |
|
activeMailId.value = mailId; |
|
} |
|
|
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.table-container { |
|
border: 1px solid rgba(198, 208, 251, 1); |
|
} |
|
</style> |