| | |
| | | |
| | | <div class="gd-table-toolbar"> |
| | | <el-button :icon="Plus" color="#4C34FF" type="primary" @click="openForm('add')">新增区划</el-button> |
| | | <el-button :icon="Upload" @click="handleImport">导入区划</el-button> |
| | | <el-button :icon="Download" :loading="exportLoading" :disabled="exportLoading" @click="handleExport">导出区划</el-button> |
| | | <el-button :icon="Upload" @click="handleImport">区划导入</el-button> |
| | | <el-button :icon="Download" :loading="exportLoading" :disabled="exportLoading" @click="handleExport">区划导出</el-button> |
| | | </div> |
| | | |
| | | <div class="gd-table-container" v-loading="loading"> |
| | | <div class="gd-table-content gd-table-content-bg"> |
| | | <el-table class="gd-table" :data="list"> |
| | | <el-table class="gd-table" :data="list" @selection-change="handleSelectionChange"> |
| | | <el-table-column type="selection" width="46" /> |
| | | <el-table-column label="序号" width="80"> |
| | | <template v-slot="{ $index }"> |
| | | {{ $index + 1 }} |
| | |
| | | class="gd-dialog" |
| | | append-to-body |
| | | v-model="isShowImportView" |
| | | title="导入区划" |
| | | :width="pxToRem(600)" |
| | | title="区划导入" |
| | | :width="pxToRem(500)" |
| | | :close-on-click-modal="false" |
| | | :destroy-on-close="true" |
| | | @close="handleImportClose" |
| | | > |
| | | <el-form class="gd-dialog-form" ref="importFormRef" :model="importParams" :rules="importRules" label-width="140px"> |
| | | <el-form-item label="导出模板"> |
| | | <el-button |
| | | type="primary" |
| | | color="#F2F3F5" |
| | | @click="handleExportTemplate" |
| | | > |
| | | 下载模板 |
| | | </el-button> |
| | | </el-form-item> |
| | | <el-form-item label="上传文件" prop="file"> |
| | | {{ importFileName }} |
| | | <el-upload class="avatar-uploader" action="" :show-file-list="false" :before-upload="onImportFileBefore"> |
| | | <el-button size="small" type="primary">点击上传</el-button> |
| | | <el-button type="primary">点击上传</el-button> |
| | | </el-upload> |
| | | <div class="upload-tip"> |
| | | {{ importFileName }} |
| | | </div> |
| | | </el-form-item> |
| | | </el-form> |
| | | <template #footer> |
| | | <el-button color="#F2F3F5" @click="isShowImportView = false">取消</el-button> |
| | | <el-button |
| | | class="" |
| | | color="#4C34FF" |
| | | :loading="importSubmitting" |
| | | :disabled="importSubmitting" |
| | |
| | | zoningRemoveApi, |
| | | zoningImportApi, |
| | | zoningExportApi, |
| | | zoningExportTemplateApi, |
| | | regionLazyTreeApi, |
| | | zoningSubmitApi |
| | | } from './zoningApi' |
| | |
| | | const dialogVisible = ref(false) |
| | | const regionOptions = ref([]) // 区域选项 |
| | | const dictObj = ref({}) // 字典对象 |
| | | const selectedFiles = ref([]) // 勾选的文件列表 |
| | | |
| | | // 导入区划相关 |
| | | const isShowImportView = ref(false) |
| | |
| | | |
| | | // 导出加载状态 |
| | | const exportLoading = ref(false) |
| | | |
| | | // 模板导出加载状态 |
| | | const templateExportLoading = ref(false) |
| | | |
| | | provide('regionOptions', regionOptions) |
| | | provide('dictObj', dictObj) |
| | |
| | | } |
| | | } |
| | | |
| | | // 勾选值设置 |
| | | function handleSelectionChange(rows) { |
| | | selectedFiles.value = rows |
| | | } |
| | | |
| | | // 导出模板 |
| | | async function handleExportTemplate() { |
| | | templateExportLoading.value = true |
| | | try { |
| | | const res = await zoningExportTemplateApi() |
| | | const blob = new Blob([res.data]) |
| | | const url = URL.createObjectURL(blob) |
| | | const a = document.createElement('a') |
| | | a.href = url |
| | | a.download = `区划导入模板.xlsx` |
| | | document.body.appendChild(a) |
| | | a.click() |
| | | document.body.removeChild(a) |
| | | URL.revokeObjectURL(url) |
| | | } catch (error) { |
| | | console.error('导出模板失败:', error) |
| | | } finally { |
| | | templateExportLoading.value = false |
| | | } |
| | | } |
| | | |
| | | // 上传文件前处理 |
| | | function onImportFileBefore(file) { |
| | | // 检查文件类型 |
| | |
| | | ElMessage.error('请上传Excel文件(.xlsx 或 .xls)') |
| | | return false |
| | | } |
| | | let data = new FormData() |
| | | data.append('file', file) |
| | | |
| | | zoningImportApi(data, { isCovered: importParams.value.isCovered }).then(res => { |
| | | if (res.data.code === 200) { |
| | | ElMessage.success('导入成功') |
| | | // 保存文件名 |
| | | importFileName.value = file.name |
| | | importParams.value.file = file |
| | | isShowImportView.value = false |
| | | getList() |
| | | } else { |
| | | ElMessage.error(res.msg || '导入失败') |
| | | } |
| | | }) |
| | | |
| | | // 保存文件名和文件对象 |
| | | importFileName.value = file.name |
| | | importParams.value.file = file |
| | | ElMessage.success('上传成功') |
| | | |
| | | return false // 阻止组件的默认上传行为 |
| | | } |
| | |
| | | ElMessage.error('请先上传文件') |
| | | return |
| | | } |
| | | // 触发上传操作 |
| | | await onImportFileBefore(importParams.value.file) |
| | | |
| | | // 构建表单数据并调用导入接口 |
| | | let data = new FormData() |
| | | data.append('file', importParams.value.file) |
| | | const res = await zoningImportApi(data, { isCovered: importParams.value.isCovered }) |
| | | if (res.data.code === 200) { |
| | | ElMessage.success('导入成功') |
| | | isShowImportView.value = false |
| | | getList() |
| | | } else { |
| | | ElMessage.error(res.msg || '导入失败') |
| | | } |
| | | } finally { |
| | | importSubmitting.value = false |
| | | } |
| | |
| | | |
| | | // 导出区划 |
| | | async function handleExport() { |
| | | // 检查是否有选中的数据 |
| | | if (selectedFiles.value.length === 0) { |
| | | ElMessage.warning('请选择要导出的区划') |
| | | return |
| | | } |
| | | |
| | | exportLoading.value = true |
| | | try { |
| | | const res = await zoningExportApi(searchParams.value) |
| | | const params = {} |
| | | params.regionIds = selectedFiles.value.map(i => i.id) |
| | | // 调用导出API |
| | | const res = await zoningExportApi(params) |
| | | const blob = new Blob([res.data]) |
| | | const url = URL.createObjectURL(blob) |
| | | const a = document.createElement('a') |
| | | a.href = url |
| | | a.download = `区划列表.xlsx` |
| | | const fileName = `区划列表.xlsx` |
| | | a.download = fileName |
| | | |
| | | document.body.appendChild(a) |
| | | a.click() |
| | | document.body.removeChild(a) |
| | |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | .upload-tip { |
| | | margin-left: 5px; |
| | | } |
| | | </style> |