| | |
| | | </el-form-item> |
| | | |
| | | <el-form-item label="所属区划" prop="areaCode"> |
| | | <el-tree-select |
| | | <RegionSelect |
| | | class="gd-select gray" |
| | | popper-class="gd-tree-select-popper" |
| | | v-model="searchParams.areaCode" |
| | | node-key="id" |
| | | :props="treeSelectProps" |
| | | placeholder="请选择" |
| | | clearable |
| | | filterable |
| | | @change="handleSearch" |
| | | :check-strictly="true" |
| | | lazy |
| | | :load="loadRegionNode" |
| | | :render-after-expand="false" |
| | | /> |
| | | </el-form-item> |
| | | |
| | |
| | | |
| | | <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" @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 }"> |
| | | {{ ((searchParams.current - 1) * searchParams.size + $index + 1).toString().padStart(2, '0') }} |
| | | {{ $index + 1 }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="deptCode" show-overflow-tooltip label="机构编码" /> |
| | |
| | | {{ getDictLabel(row.status, dictObj.institutionStatus) }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="操作" class-name="operation-btns" width="310"> |
| | | <el-table-column label="操作" class-name="operation-btns" width="200"> |
| | | <template v-slot="{ row }"> |
| | | <el-link type="primary" @click="openForm('view', row)">查看</el-link> |
| | | <el-link type="primary" @click="openForm('edit', row)">编辑</el-link> |
| | |
| | | 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 |
| | | color="#F2F3F5" |
| | | type="primary" |
| | | @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" |
| | |
| | | import { onMounted, ref, provide, nextTick } from 'vue' |
| | | import { ElMessage, ElMessageBox, ElUpload } from 'element-plus' |
| | | import FormDiaLog from './FormDiaLog.vue' |
| | | import RegionSelect from '@/components/RegionSelect/main.vue' |
| | | import { |
| | | agenciesPageApi, |
| | | agenciesRemoveApi, |
| | | agenciesImportApi, |
| | | agenciesExportApi, |
| | | regionLazyTreeApi, |
| | | agenciesExportTemplateApi, |
| | | agenciesSubmitApi |
| | | } from './agenciesApi' |
| | | import { getDictionaryByCode } from '@/api/system/dictbiz' |
| | |
| | | const dialogVisible = ref(false) |
| | | const regionOptions = ref([]) // 区域选项 |
| | | const dictObj = ref({}) // 字典对象 |
| | | |
| | | // 树形选择器配置 |
| | | const treeSelectProps = { |
| | | value: 'id', |
| | | label: 'name', |
| | | children: 'children' |
| | | } |
| | | |
| | | |
| | | const selectedFiles = ref([]) // 勾选的文件列表 |
| | | // 导入机构相关 |
| | | const isShowImportView = ref(false) |
| | | const importFileName = ref('') |
| | |
| | | file: [{ required: true, message: '请上传文件', trigger: ['change'] }], |
| | | }) |
| | | |
| | | // 导出加载状态 |
| | | const exportLoading = ref(false) |
| | | |
| | | // 模板导出加载状态 |
| | | const templateExportLoading = ref(false) |
| | | |
| | | provide('regionOptions', regionOptions) |
| | | provide('dictObj', dictObj) |
| | | |
| | |
| | | dictObj.value = res.data.data |
| | | }) |
| | | } |
| | | |
| | | // 懒加载获取区域节点数据 |
| | | async function loadRegionNode(node, resolve) { |
| | | |
| | | try { |
| | | const parentCode = node.data?.id || '360800000000' |
| | | const res = await regionLazyTreeApi({ parentCode }) |
| | | const nodes = res?.data?.data || [] |
| | | |
| | | // 处理返回的节点数据 |
| | | const processedNodes = nodes.map(item => { |
| | | return { |
| | | id: item.id || item.value, |
| | | name: item.name || item.title || item.label, |
| | | hasChildren: item.hasChildren || false |
| | | } |
| | | }) |
| | | |
| | | resolve(processedNodes) |
| | | } catch (error) { |
| | | console.error('获取区域数据失败:', error) |
| | | resolve([]) |
| | | } |
| | | } |
| | | |
| | | // 获取初始区域数据(根节点) |
| | | async function getRegionList() { |
| | | try { |
| | | // 懒加载模式下,只需要初始化根节点 |
| | | const res = await regionLazyTreeApi({ parentCode: '360800000000' }) |
| | | const nodes = res?.data?.data || [] |
| | | |
| | | // 处理根节点数据 |
| | | regionOptions.value = nodes.map(item => { |
| | | return { |
| | | id: item.id || item.value, |
| | | name: item.name || item.title || item.label, |
| | | hasChildren: item.hasChildren || false |
| | | } |
| | | }) |
| | | } catch (error) { |
| | | console.error('获取区域数据失败:', error) |
| | | } |
| | | } |
| | | |
| | | // 获取列表 |
| | | async function getList() { |
| | | loading.value = true |
| | |
| | | } |
| | | } |
| | | |
| | | // 勾选值设置 |
| | | function handleSelectionChange(rows) { |
| | | selectedFiles.value = rows |
| | | } |
| | | |
| | | // 导出模板 |
| | | async function handleExportTemplate() { |
| | | templateExportLoading.value = true |
| | | try { |
| | | const res = await agenciesExportTemplateApi() |
| | | 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) |
| | | |
| | | agenciesImportApi(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 agenciesImportApi(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 |
| | | } |
| | |
| | | } |
| | | |
| | | // 导出机构 |
| | | function handleExport() { |
| | | agenciesExportApi(searchParams.value).then(res => { |
| | | async function handleExport() { |
| | | // 检查是否有选中的数据 |
| | | if (selectedFiles.value.length === 0) { |
| | | ElMessage.warning('请选择要导出的机构') |
| | | return |
| | | } |
| | | |
| | | exportLoading.value = true |
| | | try { |
| | | const params = {} |
| | | params.deptIds = selectedFiles.value.map(i => i.id) |
| | | // 调用导出API |
| | | const res = await agenciesExportApi(params) |
| | | const blob = new Blob([res.data]) |
| | | const url = URL.createObjectURL(blob) |
| | | const a = document.createElement('a') |
| | | a.href = url |
| | | a.download = `机构列表${new Date().getTime()}.xlsx` |
| | | // `机构列表${new Date().getTime()}.xlsx` |
| | | const fileName = `机构列表.xlsx` |
| | | a.download = fileName |
| | | |
| | | document.body.appendChild(a) |
| | | a.click() |
| | | document.body.removeChild(a) |
| | | URL.revokeObjectURL(url) |
| | | }) |
| | | } catch (error) { |
| | | console.error('导出失败:', error) |
| | | } finally { |
| | | exportLoading.value = false |
| | | } |
| | | } |
| | | |
| | | onMounted(() => { |
| | | getDictList() |
| | | getRegionList() |
| | | getList() |
| | | }) |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | .upload-tip { |
| | | margin-left: 5px; |
| | | } |
| | | </style> |