吉安感知网项目-前端
shuishen
2026-02-03 89380e6260a75d1d3b94de687ebcc2f50d50659d
applications/task-work-order/src/views/orderView/organizational/agenciesManagement/index.vue
@@ -11,10 +11,10 @@
        />
      </el-form-item>
      <el-form-item label="机构编码" prop="bindCode">
      <el-form-item label="机构编码" prop="deptCode">
        <el-input
          class="gd-input gray"
          v-model="searchParams.bindCode"
          v-model="searchParams.deptCode"
          placeholder="请输入"
          clearable
          @clear="handleSearch"
@@ -22,16 +22,14 @@
      </el-form-item>
      <el-form-item label="所属区划" prop="areaCode">
        <el-select
        <RegionSelect
          class="gd-select gray"
          popper-class="gd-select-popper"
          v-model="searchParams.areaCode"
          placeholder="请选择"
          clearable
          filterable
          @change="handleSearch"
        >
          <el-option v-for="item in regionOptions" :key="item.value" :label="item.title" :value="item.value" />
        </el-select>
        />
      </el-form-item>
      <el-form-item class="gd-search-actions">
@@ -42,19 +40,20 @@
    <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="bindCode" show-overflow-tooltip label="机构编码" />
          <el-table-column prop="deptCode" show-overflow-tooltip label="机构编码" />
          <el-table-column prop="deptName" show-overflow-tooltip label="机构名称" />
          <el-table-column prop="areaName" show-overflow-tooltip label="所属区划" />
          <el-table-column prop="remark" show-overflow-tooltip label="机构描述" />
@@ -63,7 +62,7 @@
             {{ 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>
@@ -93,25 +92,36 @@
      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"
@@ -129,12 +139,13 @@
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'
@@ -143,7 +154,7 @@
// 初始化查询参数
const initSearchParams = () => ({
  deptName: '', // 机构名称
  bindCode: '', // 机构编码
  deptCode: '', // 机构编码
  areaCode: '', // 所属区划
  current: 1, // 当前页
  size: 10, // 每页大小
@@ -157,7 +168,7 @@
const dialogVisible = ref(false)
const regionOptions = ref([]) // 区域选项
const dictObj = ref({}) // 字典对象
const selectedFiles = ref([]) // 勾选的文件列表
// 导入机构相关
const isShowImportView = ref(false)
const importFileName = ref('')
@@ -171,6 +182,12 @@
  file: [{ required: true, message: '请上传文件', trigger: ['change'] }],
})
// 导出加载状态
const exportLoading = ref(false)
// 模板导出加载状态
const templateExportLoading = ref(false)
provide('regionOptions', regionOptions)
provide('dictObj', dictObj)
@@ -180,16 +197,6 @@
          dictObj.value = res.data.data
  })
}
// 获取区域列表
function getRegionList() {
  regionLazyTreeApi({parentCode: '360800000000'}).then(res => {
  console.log('区域列表', res.data.data);
    regionOptions.value = res.data.data || []
  })
}
// 获取列表
async function getList() {
  loading.value = true
@@ -272,24 +279,46 @@
  }
}
// 勾选值设置
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) {
  // 执行文件上传
  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 || '导入失败')
    }
  })
  // 检查文件类型
  const allowedTypes = ['.xlsx', '.xls']
  const fileExtension = file.name.substring(file.name.lastIndexOf('.')).toLowerCase()
  if (!allowedTypes.includes(fileExtension)) {
    ElMessage.error('请上传Excel文件(.xlsx 或 .xls)')
    return false
  }
  // 保存文件名和文件对象
  importFileName.value = file.name
  importParams.value.file = file
  ElMessage.success('上传成功')
  return false // 阻止组件的默认上传行为
}
@@ -301,8 +330,23 @@
    if (valid) {
      importSubmitting.value = true
      try {
        // 这里实际上传文件的逻辑已经在onImportFileBefore中处理了
        // 这里可以添加额外的验证或逻辑
        if (!importParams.value.file) {
          ElMessage.error('请先上传文件')
          return
        }
        // 构建表单数据并调用导入接口
        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
      }
@@ -311,26 +355,46 @@
}
// 导出机构
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>