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.
317 lines
11 KiB
317 lines
11 KiB
<template> |
|
<el-dialog title="国家信访投诉导入" width="80vw" ref="dialogRef" :lock-scroll="false"> |
|
<header class="flex center mb-40"> |
|
<el-steps |
|
:space="300" |
|
:active="activeStep" |
|
finish-status="success" |
|
style="width: 800px" |
|
> |
|
<el-step title="数据导入" /> |
|
<el-step title="数据校验" /> |
|
<el-step title="数据导入" /> |
|
</el-steps> |
|
</header> |
|
<div style="min-height: 50vh"> |
|
<template v-if="activeStep === 0"> |
|
<div v-loading="loading"> |
|
<el-upload |
|
drag |
|
:multiple="false" |
|
:auto-upload="false" |
|
:show-file-list="false" |
|
v-model:file-list="fileList" |
|
accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" |
|
class="mt-20" |
|
> |
|
<template v-if="fileList.length === 0"> |
|
<el-icon class="el-icon--upload" |
|
><upload-filled |
|
/></el-icon> |
|
<div class="el-upload__text"> |
|
<p>点击或拖拽文件到此区域上传</p> |
|
</div> |
|
</template> |
|
<template v-else> |
|
<el-icon class="el-icon--upload" |
|
><Select |
|
/></el-icon> |
|
<div class="el-upload__text"> |
|
已选择文件：{{ |
|
fileList[fileList.length - 1].name |
|
}} |
|
</div> |
|
</template> |
|
</el-upload> |
|
<div class="mt-20"> |
|
<span>文件模板</span> |
|
<a |
|
class="link" |
|
:href="`${BASE_PATH}/templates/国家信访投诉数据导入模板.xls`" |
|
target="__blank" |
|
>国家信访投诉数据导入模板.xls 下载</a |
|
> |
|
</div> |
|
</div> |
|
</template> |
|
<template v-if="activeStep === 1"> |
|
<div class="table-container" v-loading="loading"> |
|
<el-table :data="importTableData.slice(0, Math.min(20, importTableData.length))" :max-height="500"> |
|
<el-table-column |
|
label="办理单位" |
|
prop="discoverTime" |
|
width="180" |
|
> |
|
<template #default="{ row }"> |
|
<depart-tree-select |
|
size="small" |
|
v-model="row.departId" |
|
/> |
|
</template> |
|
</el-table-column> |
|
<el-table-column |
|
label="去向机构" |
|
prop="handleDepartName" |
|
width="120" |
|
show-overflow-tooltip |
|
/> |
|
<el-table-column |
|
label="问题发生地" |
|
prop="occurred" |
|
width="160" |
|
show-overflow-tooltip |
|
/> |
|
<el-table-column |
|
label="信访件编号" |
|
prop="originId" |
|
width="196" |
|
/> |
|
<el-table-column |
|
label="信访形式" |
|
prop="channelForFilingComplaints" |
|
width="86" |
|
align="center" |
|
/> |
|
<el-table-column |
|
label="姓名" |
|
prop="responderName" |
|
width="86" |
|
/> |
|
<el-table-column |
|
label="身份证号" |
|
prop="responderIdCode" |
|
width="174" |
|
/> |
|
<el-table-column |
|
label="信访人住址" |
|
prop="responderAddress" |
|
width="174" |
|
show-overflow-tooltip |
|
/> |
|
<el-table-column |
|
label="手机号码" |
|
prop="responderPhone" |
|
width="120" |
|
/> |
|
<el-table-column |
|
label="信访日期" |
|
prop="discoveryTime" |
|
width="110" |
|
/> |
|
|
|
<el-table-column |
|
label="信访内容" |
|
prop="thingDesc" |
|
width="160" |
|
show-overflow-tooltip |
|
/> |
|
<el-table-column |
|
label="涉企涉冻" |
|
prop="involvedIssue" |
|
width="110" |
|
/> |
|
<el-table-column |
|
label="是否重信" |
|
prop="initialPetition" |
|
width="86" |
|
align="center" |
|
/> |
|
<el-table-column |
|
label="信访人数" |
|
prop="peopleNumber" |
|
width="86" |
|
align="center" |
|
/> |
|
<el-table-column |
|
label="公安业务分类" |
|
prop="businessTypeName" |
|
width="140" |
|
show-overflow-tooltip |
|
/> |
|
</el-table> |
|
</div> |
|
</template> |
|
<template v-if="activeStep === 2"> |
|
<el-result |
|
icon="success" |
|
title="导入成功" |
|
:sub-title="` 已成功导入${importTableData.length}条数据。`" |
|
> |
|
<template #sub-title> |
|
<p>已成功导入{{ importTableData.length }}条数据。您可通过<span |
|
class="link pointer" |
|
@click="router.push('/data/ImportRecords')" |
|
>导入记录</span |
|
>功能查看导入记录。 |
|
</p> |
|
</template> |
|
</el-result> |
|
</template> |
|
</div> |
|
<div class="demo-image__error" flex gap-2> |
|
<span class="link pointer" @click="openGuidePreview"> |
|
导入模板已兼容国家信访平台的台账，在国家信访平台导出后直接在此处导入。 |
|
</span> |
|
<el-image-viewer |
|
v-if="showPreview" |
|
show-progress |
|
:url-list="srcList" |
|
@close="showPreview = false" |
|
@switch="onPreviewChange" |
|
> |
|
<!-- 底部说明 --> |
|
<div class="image-desc"> |
|
{{ imageList[currentIndex]?.desc }} |
|
</div> |
|
</el-image-viewer> |
|
</div> |
|
|
|
<footer class="flex end mt-20 v-center"> |
|
<el-button size="large" @click="handlePrev" v-if="activeStep !== 3 && activeStep !== 0" |
|
>上一步</el-button |
|
> |
|
<el-button |
|
type="primary" |
|
size="large" |
|
@click="handleNext" |
|
:disabled="loading" |
|
>{{ activeStep === 2 ? "确定" : "下一步" }}</el-button |
|
> |
|
</footer> |
|
</el-dialog> |
|
</template> |
|
<script setup> |
|
import { BASE_PATH } from "@/api/request"; |
|
import { |
|
importPetitionComplaintGj, |
|
addPetitionComplaintGj, |
|
} from "@/api/data/petitionComplaint"; |
|
import feedback from "@/utils/feedback"; |
|
import { onMounted } from "vue"; |
|
|
|
const emit = defineEmits(["close", "update"]); |
|
|
|
const activeStep = ref(0); |
|
|
|
const fileList = ref([]); |
|
|
|
const importTableData = ref([]); |
|
|
|
const loading = ref(false); |
|
|
|
async function handleNext() { |
|
if (activeStep.value === 0) { |
|
if (fileList.value.length === 0) { |
|
return; |
|
} |
|
const formData = new FormData(); |
|
formData.append("file", fileList.value[fileList.value.length - 1].raw); |
|
loading.value = true; |
|
try { |
|
importTableData.value = await importPetitionComplaintGj(formData); |
|
} catch (e) { |
|
loading.value = false; |
|
throw e; |
|
} |
|
loading.value = false; |
|
activeStep.value = 1; |
|
return; |
|
} |
|
if (activeStep.value === 1) { |
|
loading.value = true; |
|
try { |
|
await addPetitionComplaintGj(importTableData.value); |
|
} catch (e) { |
|
loading.value = false; |
|
return; |
|
} |
|
loading.value = false; |
|
activeStep.value = 2; |
|
emit("update"); |
|
return; |
|
} |
|
if (activeStep.value === 2) { |
|
emit("close"); |
|
activeStep.value = 0; |
|
importTableData.value = []; |
|
fileList.value = []; |
|
} |
|
} |
|
|
|
function handlePrev() { |
|
activeStep.value = activeStep.value - 1; |
|
} |
|
|
|
const dialogRef = ref(); |
|
|
|
watch( |
|
() => dialogRef.value?.visible, |
|
(val) => { |
|
if (!val) { |
|
activeStep.value = 0; |
|
importTableData.value = []; |
|
fileList.value = []; |
|
} |
|
} |
|
); |
|
|
|
const showPreview = ref(false) |
|
const currentIndex = ref(0); |
|
|
|
const onPreviewChange = (index) => { |
|
currentIndex.value = index; |
|
}; |
|
const imageList = [ |
|
{ |
|
url: "/imgs/5.jpg", |
|
desc: "步骤一：下载并填写 Excel 模板", |
|
}, |
|
]; |
|
const srcList = imageList.map(i => i.url); |
|
const openGuidePreview = () => { |
|
// showPreview.value = true; |
|
}; |
|
const router = useRouter(); |
|
</script> |
|
<style lang="scss" scoped> |
|
.demo-image__error .el-image { |
|
max-width: 300px; |
|
max-height: 200px; |
|
width: 100%; |
|
} |
|
|
|
.image-desc { |
|
position: fixed; |
|
left: 50%; |
|
top: 20%; |
|
transform: translateX(-50%); |
|
max-width: 70%; |
|
padding: 8px 16px; |
|
background: rgba(0, 0, 0, 0.6); |
|
color: #fff; |
|
font-size: 14px; |
|
border-radius: 6px; |
|
text-align: center; |
|
} |
|
|
|
</style>
|
|
|