Merge remote-tracking branch 'origin/master'

罗广辉

2026-01-27 7319ec49da9f1490ad35f47e0da62546d1cc7ff4

 applications/task-work-order/src/views/orderView/organizational/zoningManagement/index.vue

@@ -1,19 +1,336 @@
<template>
 <div>
    区划管理
 </div>
  <basic-container>
    <el-form ref="queryParamsRef" :model="searchParams" class="gd-search-form">
      <el-form-item label="上级区划名称" prop="parentName">
        <el-input
          class="gd-input gray"
          v-model="searchParams.parentName"
          placeholder="请输入"
          clearable
          @clear="handleSearch"
        />
      </el-form-item>

      <el-form-item label="区划名称" prop="districtName">
        <el-input
          class="gd-input gray"
          v-model="searchParams.districtName"
          placeholder="请输入"
          clearable
          @clear="handleSearch"
        />
      </el-form-item>

      <el-form-item label="区划代码" prop="cityCode">
        <el-input
          class="gd-input gray"
          v-model="searchParams.cityCode"
          placeholder="请输入"
          clearable
          @clear="handleSearch"
        />
      </el-form-item>

      <el-form-item class="gd-search-actions">
        <el-button :icon="RefreshRight" @click="resetForm"></el-button>
        <el-button class="search-btn" :icon="Search" @click="handleSearch"></el-button>
      </el-form-item>
    </el-form>

    <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>
    </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-column label="序号" width="80">
            <template v-slot="{ $index }">
               {{ $index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="code" show-overflow-tooltip label="区划代码" />
          <el-table-column prop="name" show-overflow-tooltip label="区划名称" />
          <el-table-column prop="parentName" show-overflow-tooltip label="上级区划名称" />
          <el-table-column prop="regionLevel" show-overflow-tooltip label="区划级别">
            <template v-slot="{ row }">
              {{ getDictLabel(row.regionLevel, dictObj.divisionLevel) }}
            </template>
          </el-table-column>
          <el-table-column prop="sort" show-overflow-tooltip label="排序" />
          <el-table-column prop="status" show-overflow-tooltip label="区划状态">
            <template v-slot="{ row }">
              {{ getDictLabel(row.status, dictObj.zoningStatus) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" class-name="operation-btns" width="400">
            <template v-slot="{ row }">
              <el-link type="primary" @click="openForm('view', row)">查看</el-link>
              <el-link type="primary"  @click="openForm('edit', row)">编辑</el-link>
              <el-link type="primary" @click="handleDelete(row)">删除</el-link>
              <el-link type="primary" @click="toggleStatus(row)">{{row.status === 1 ? '禁用' : '启用'}}</el-link>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="gd-pagination-parent">
        <el-pagination
          popper-class="gd-select-popper"
          v-model:current-page="searchParams.current"
          v-model:page-size="searchParams.size"
          layout="total, prev, pager, next, sizes"
          :total="total"
          @change="getList"
        />
      </div>
    </div>

    <FormDiaLog ref="dialogRef" @success="getList" v-if="dialogVisible" v-model="dialogVisible" />

    <!-- 导入区划弹框 -->
    <el-dialog
      class="gd-dialog"
      append-to-body
      v-model="isShowImportView"
      title="导入区划"
      :width="pxToRem(600)"
      :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="上传文件" 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-upload>
        </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"
          @click="submitImport(importFormRef)"
        >
          导入
        </el-button>
      </template>
    </el-dialog>
  </basic-container>
</template>

<script setup >
/**
 * @description index
 * @date 2026-01-26 (周一) 10:50:43
 */
defineOptions({
 name: 'index'
<script setup>
import { Search, RefreshRight, Plus, Upload, Download } from '@element-plus/icons-vue'
import { onMounted, ref, provide, nextTick } from 'vue'
import { ElMessage, ElMessageBox, ElUpload } from 'element-plus'
import FormDiaLog from './FormDiaLog.vue'
import {
  zoningPageApi,
  zoningRemoveApi,
  zoningImportApi,
  zoningExportApi,
  regionLazyTreeApi,
  zoningSubmitApi
} from './zoningApi'
import { getDictionaryByCode } from '@/api/system/dictbiz'
import { getDictLabel } from '@ztzf/utils'
import { pxToRem } from '@/utils/rem'
// 初始化查询参数
const initSearchParams = () => ({
  parentName: '', // 上级区划名称
  districtName: '', // 区划名称
  cityCode: '', // 区划代码
  current: 1, // 当前页
  size: 10, // 每页大小
})
const searchParams = ref(initSearchParams()) // 查询参数
const total = ref(0) // 总条数
const loading = ref(true) // 列表加载中
const list = ref([]) // 列表数据
const queryParamsRef = ref(null) // 查询表单实例
const dialogRef = ref(null) // 弹框实例
const dialogVisible = ref(false)
const regionOptions = ref([]) // 区域选项
const dictObj = ref({}) // 字典对象

// 导入区划相关
const isShowImportView = ref(false)
const importFileName = ref('')
const importParams = ref({
  isCovered: '0',
  file: '',
})
const importFormRef = ref()
const importSubmitting = ref(false)
const importRules = ref({
  file: [{ required: true, message: '请上传文件', trigger: ['change'] }],
})

provide('regionOptions', regionOptions)
provide('dictObj', dictObj)

// 获取字典列表
function getDictList() {
   return getDictionaryByCode('zoningStatus,divisionLevel').then(res => {
      dictObj.value = res.data.data
   })
}

// 获取列表
async function getList() {
  loading.value = true
  try {
    const res = await zoningPageApi(searchParams.value)
    list.value = res?.data?.data?.records ?? []
    total.value = res?.data?.data?.total ?? 0
  } finally {
    loading.value = false
  }
}

// 查询
function handleSearch() {
  searchParams.value.current = 1
  getList()
}

// 重置查询
function resetForm() {
  queryParamsRef.value?.resetFields()
  searchParams.value.current = 1
  getList()
}

// 新增/编辑/查看 弹框
function openForm(mode, row) {
  dialogVisible.value = true
  nextTick(() => {
    dialogRef.value?.open({ mode, row })
  })
}

// 删除
async function handleDelete(row) {
  await ElMessageBox.confirm('确认删除该条记录吗？', '提示', {
    type: 'warning',
    customClass: 'gd-confirm-custom',
    confirmButtonClass: 'gd-confirm-button',
    cancelButtonClass: 'gd-confirm-cancel-button',
  })
  await zoningRemoveApi({ id: row.id })
  ElMessage.success('删除成功')
  getList()
}

// 切换区划状态
async function toggleStatus(row) {
  // 计算目标状态：当前为1则切换为0，当前为0则切换为1
  const targetStatus = row.status === 1 ? 0 : 1
  const actionText = targetStatus === 0 ? '禁用' : '启用'
  
  await ElMessageBox.confirm(`确认${actionText}该区划吗？`, '提示', {
    type: 'warning',
    customClass: 'gd-confirm-custom',
    confirmButtonClass: 'gd-confirm-button',
    cancelButtonClass: 'gd-confirm-cancel-button',
  })
  
  try {
    await zoningSubmitApi({ ...row, status: targetStatus })
    ElMessage.success(`${actionText}成功`)
    getList()
  } catch (error) {
    ElMessage.error(`${actionText}失败`)
  }
}

// 导入区划
function handleImport() {
  isShowImportView.value = true
}

// 导入区划弹框关闭
function handleImportClose() {
  importFileName.value = ''
  importParams.value = {
    isCovered: '0',
    file: '',
  }
}

// 上传文件前处理
function onImportFileBefore(file) {
  // 检查文件类型
  const allowedTypes = ['.xlsx', '.xls']
  const fileExtension = file.name.substring(file.name.lastIndexOf('.')).toLowerCase()
  if (!allowedTypes.includes(fileExtension)) {
    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 || '导入失败')
    }
  })

  return false // 阻止组件的默认上传行为
}

// 提交导入
async function submitImport(formValidate) {
  if (!formValidate) return
  await formValidate.validate(async (valid, fields) => {
    if (valid) {
      importSubmitting.value = true
      try {
        if (!importParams.value.file) {
          ElMessage.error('请先上传文件')
          return
        }
        // 触发上传操作
        await onImportFileBefore(importParams.value.file)
      } finally {
        importSubmitting.value = false
      }
    }
  })
}

// 导出区划
function handleExport() {
  zoningExportApi(searchParams.value).then(res => {
    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`
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    URL.revokeObjectURL(url)
  })
}

onMounted(() => {
  getDictList()
  getList()
})
</script>

<style scoped lang="scss">