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.
273 lines
9.6 KiB
273 lines
9.6 KiB
<template> |
|
<el-dialog v-model="visible" width="70vw" top="4vh" class="dialog-header-nopadding" align-center |
|
style="--el-dialog-padding-primary: 10px"> |
|
<template #header="" style="display: flex;align-items: center;justify-content: space-between;"> |
|
<div class="dialog-header"> |
|
<span class="dialog-title">信件核对</span> |
|
</div> |
|
</template> |
|
<div class="dialog-body"> |
|
<el-form ref="queryRef" :model="query" label-width="100px"> |
|
<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="数据导入"> |
|
<div class="upload-container"> |
|
<el-upload class="upload-demo" action="#" ref="upload" :limit="1" |
|
:http-request="handleUpload" :on-exceed="handleExceed" :auto-upload="false" |
|
:file-list="fileList"> |
|
<el-button>上传 |
|
<template #icon> |
|
<icon name="el-icon-Upload" /> |
|
</template> |
|
</el-button> |
|
<div slot="tip"> |
|
<ul class="file-list"> |
|
<li v-for="file in fileList" :key="file.uid" class="file-item"> |
|
{{ file.name }} |
|
</li> |
|
</ul> |
|
</div> |
|
</el-upload> |
|
</div> |
|
</el-form-item> |
|
</el-col> |
|
</el-row> |
|
</el-form> |
|
<div class="flex end"> |
|
<el-button type="primary" @click="handleCheck">信件核对</el-button> |
|
</div> |
|
</div> |
|
<div class="mr-20 ml-20"> |
|
<div v-if="result" v-show="ifShow"> |
|
<span class="allRight">数据核对无误</span> |
|
</div> |
|
<div class="table-container" v-if="!result" v-show="ifShow"> |
|
<div style="display: flex;align-items: center;justify-content: space-between; margin-bottom: 20px"> |
|
<span class="title-label">以下数据共 {{ form.length }} 条，数据不匹配</span> |
|
<el-button type="primary" @click="handleImport">下载不匹配数据</el-button> |
|
</div> |
|
<el-table :data="form" style="width: 100%" stripe ref="tableRef"> |
|
<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 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="流程限时" width="140"> |
|
<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 prop="mailLabels" label="信件标签" width="160" /> |
|
</el-table> |
|
</div> |
|
</div> |
|
|
|
</el-dialog> |
|
</template> |
|
<script lang="ts" setup> |
|
import { ref, defineProps } from 'vue' |
|
import { watch } from 'vue' |
|
import { formatTimeText, getDictLable, getFlowTagType } from "@/utils/util"; |
|
import { useDictData } from "@/hooks/useDictOptions"; |
|
import { ElMessage, ElTable } from "element-plus"; |
|
import { genFileId } from 'element-plus' |
|
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus' |
|
import axios from 'axios'; |
|
import request from "@/utils/request"; |
|
const { dictData } = useDictData(["mail_source", "mail_level", "mail_state"]); |
|
const props = defineProps({ |
|
show: { |
|
type: Boolean, |
|
default: false |
|
}, |
|
mails: { |
|
type: String, |
|
default: '' |
|
} |
|
}) |
|
const visible = ref(props.show) |
|
watch( |
|
() => props.show, |
|
(val) => { |
|
visible.value = val; |
|
if (val) { |
|
} |
|
} |
|
); |
|
|
|
const query = ref({ |
|
fileList: [], |
|
mailTime: [] |
|
}) |
|
const form = ref([]) |
|
const queryRef = ref(null) |
|
const result = ref(true) |
|
const ifShow = ref(false) |
|
const upload = ref<UploadInstance>() |
|
const fileList = ref([]) |
|
|
|
const handleUpload: UploadProps['httpRequest'] = (file) => { |
|
const formData = new FormData(); // 创建表单数据对象 |
|
formData.append("file", file.file); // 将文件添加到表单数据中 |
|
return axios.post("/lan-api/api/work/check", formData) // 使用 axios 发送 post 请求到后端 |
|
.then((res) => { |
|
// 处理成功的响应 |
|
console.log('checkMsg', res.data); |
|
if (res.data[0]) { |
|
result.value = false |
|
ifShow.value = true |
|
form.value = res.data.data |
|
} else { |
|
ifShow.value = true |
|
result.value = true |
|
} |
|
upload.value.clearFiles(); // 清空文件列表 |
|
}) |
|
.catch((error) => { |
|
// 处理失败的响应 |
|
console.error(error); |
|
ElMessage.error('上传失败') |
|
}); |
|
} |
|
const handleCheck = () => { |
|
upload.value!.submit() |
|
console.log(query.value) |
|
} |
|
const handleImport = () => { |
|
request.post({ url: '/work/import', body: form.value }).then((data: any) => { |
|
ElMessage.success('下载成功') |
|
resetView() |
|
}).catch((error: any) => { |
|
console.error(error); |
|
ElMessage.error('下载失败') |
|
}) |
|
} |
|
|
|
const handleExceed: UploadProps['onExceed'] = (files) => { |
|
upload.value!.clearFiles() |
|
const file = files[0] as UploadRawFile |
|
file.uid = genFileId() |
|
upload.value!.handleStart(file) |
|
} |
|
|
|
function resetView(){ |
|
ifShow.value = false |
|
} |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.dialog-header { |
|
height: 60px; |
|
width: 100%; |
|
display: flex; |
|
align-items: center; |
|
justify-self: center; |
|
} |
|
|
|
.dialog-title { |
|
margin-left: 20px; |
|
width: 100%; |
|
height: 22px; |
|
font-size: 16px; |
|
font-family: PingFangSC, PingFang SC; |
|
font-weight: 400; |
|
color: #FFFFFF; |
|
line-height: 22px; |
|
text-align: center; |
|
} |
|
|
|
.dialog-body { |
|
margin-left: 20px; |
|
margin-right: 20px; |
|
display: flex; |
|
justify-content: space-between; |
|
} |
|
|
|
.main-label { |
|
width: 80px; |
|
height: 22px; |
|
font-size: 20px; |
|
font-family: PingFang-SC, PingFang-SC; |
|
font-weight: bold; |
|
color: #333333; |
|
line-height: 22px; |
|
} |
|
|
|
.title-label { |
|
height: 16px; |
|
font-size: 16px; |
|
font-family: SourceHanSansCN, SourceHanSansCN; |
|
font-weight: 600; |
|
color: #162582; |
|
line-height: 24px; |
|
} |
|
|
|
.info-input { |
|
width: 100%; |
|
} |
|
|
|
.el-upload__inner { |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
} |
|
|
|
.allRight { |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
font-family: SourceHanSansCN, SourceHanSansCN; |
|
font-weight: 500; |
|
color: #162582; |
|
} |
|
|
|
.upload-demo { |
|
margin-top: -4px; |
|
display: flex; |
|
align-items: center; |
|
} |
|
|
|
.file-list { |
|
display: inline-flex; |
|
margin-left: 20px; |
|
} |
|
|
|
.file-item { |
|
list-style: none; |
|
} |
|
</style> |