feat:机构管理

张含笑

2026-01-26 b18067b55847fb2afc2f31279f8762c1eb3fcd7f

feat:机构管理

 applications/task-work-order/src/views/orderView/organizationalMessage/agenciesManagement/FormDiaLog.vue

New file
@@ -0,0 +1,173 @@
<template>
  <el-dialog
    class="gd-dialog"
    v-model="visible"
    :title="titleEnum[dialogMode]"
    @closed="visible = false"
    destroy-on-close
    :close-on-click-modal="false"
  >
    <el-row class="detail-row-view" v-if="dialogReadonly">
      <el-col :span="12">
        <div class="label">机构名称</div>
        <div class="val">{{ formData.deptName }}</div>
      </el-col>
      <el-col :span="12">
        <div class="label">所属区划</div>
        <div class="val">{{ formData.areaName }}</div>
      </el-col>
      <el-col :span="12">
        <div class="label">机构状态</div>
        <div class="val">{{ formData.status === 1 ? '启用' : '禁用' }}</div>
      </el-col>
      <el-col :span="24">
        <div class="label">机构描述</div>
        <div class="val">{{ formData.remark }}</div>
      </el-col>
    </el-row>

    <el-form
      class="gd-dialog-form"
      v-else
      ref="formRef"
      :model="formData"
      :rules="rules"
      :disabled="dialogReadonly"
      label-width="140px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="机构名称" prop="deptName">
            <el-input class="gd-input" v-model="formData.deptName" placeholder="请输入" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属区划" prop="areaCode">
            <el-select
              class="gd-select"
              popper-class="gd-select-popper"
              v-model="formData.areaCode"
              placeholder="请选择"
              clearable
            >
              <el-option v-for="item in regionOptions" :key="item.value" :label="item.title" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="机构状态" prop="status">
            <el-select
              class="gd-select"
              popper-class="gd-select-popper"
              v-model="formData.status"
              placeholder="请选择"
              clearable
            >
              <el-option v-for="item in dictObj.institutionStatus" :key="item.dictKey"
                                :label="item.dictValue"
                                :value="item.dictKey" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="机构描述" prop="remark">
            <el-input
              class="gd-input"
              v-model="formData.remark"
              type="textarea"
              :rows="4"
              placeholder="请输入"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer v-if="!dialogReadonly">
      <el-button color="#F2F3F5" @click="visible = false">{{ dialogReadonly ? '关闭' : '取消' }}</el-button>
      <el-button
        class="save-btn"
        color="#4C34FF"
        :loading="submitting"
        :disabled="submitting"
        @click="handleSubmit"
      >
        保存
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed, ref, inject, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { fieldRules } from '@ztzf/utils'
import {
  agenciesSubmitApi,
  agenciesDetailApi,
} from './agenciesApi'

// 初始化表单数据
const initForm = () => ({
  deptName: '',
  areaCode: '',
  status: '',
  remark: '',
  id: null,
})

const dictObj = inject('dictObj')
const regionOptions = inject('regionOptions')

const emit = defineEmits(['success'])
const formRef = ref(null) // 表单实例
const formData = ref(initForm()) // 表单数据
const visible = defineModel() // 弹框显隐
const dialogMode = ref('add') // 弹框模式
const submitting = ref(false) // 提交中
const dialogReadonly = computed(() => dialogMode.value === 'view')
const titleEnum = ref({ edit: '编辑', view: '查看', add: '新增' })

const rules = {
  deptName: fieldRules(true),
  areaCode: fieldRules(true),
  status: fieldRules(true),
  remark: fieldRules(false),
}

// 提交新增/编辑
async function handleSubmit() {
  const isValid = await formRef.value?.validate().catch(() => false)
  if (!isValid) return
  submitting.value = true
  try {
    await agenciesSubmitApi(formData.value)
    ElMessage.success(dialogMode.value === 'add' ? '新增成功' : '更新成功')
    visible.value = false
    emit('success')
  } finally {
    submitting.value = false
  }
}

// 加载详情
async function loadDetail() {
  if (!formData.value.id) return
  const res = await agenciesDetailApi({ id: formData.value.id })
  formData.value = res?.data?.data ?? {}
}

// 打开弹框
async function open({ mode = 'add', row } = {}) {
  dialogMode.value = mode
  formData.value = dialogMode.value === 'add' ? initForm() : row
  if (dialogMode.value !== 'add') {
    await loadDetail()
  }
}

defineExpose({ open })
</script>

<style scoped lang="scss">
</style>

 applications/task-work-order/src/views/orderView/organizationalMessage/agenciesManagement/agenciesApi.js

New file
@@ -0,0 +1,65 @@
import request from '@/axios'

// 列表
export const agenciesPageApi = params => {
  return request({
    url: `/blade-system/dept/page`,
    method: 'get',
    params: { ...params },
  })
}

// 新增或编辑
export const agenciesSubmitApi = data => {
  return request({
    url: `/blade-system/dept/submit`,
    method: 'post',
    data,
  })
}

// 删除
export const agenciesRemoveApi = params => {
  return request({
    url: `/blade-system/dept/remove`,
    method: 'post',
    params,
  })
}

// 详情
export const agenciesDetailApi = params => {
  return request({
    url: `/blade-system/dept/detail`,
    method: 'get',
    params,
  })
}

// 导入机构
export const agenciesImportApi = (data) => {
  return request({
    url: `/blade-system/dept/import-region`,
    method: 'post',
    data,
  })
}

// 导出机构
export const agenciesExportApi = params => {
  return request({
    url: `/blade-system/dept/export-region`,
    method: 'get',
    params,
    responseType: 'blob',
  })
}

// 懒加载列表
export const regionLazyTreeApi = params => {
  return request({
    url: `/blade-system/region/lazy-tree`,
    method: 'get',
    params,
  })
}

 applications/task-work-order/src/views/orderView/organizationalMessage/agenciesManagement/index.vue

New file
@@ -0,0 +1,313 @@
<template>
  <basic-container>
    <el-form ref="queryParamsRef" :model="searchParams" class="gd-search-form">
      <el-form-item label="机构名称" prop="deptName">
        <el-input
          class="gd-input gray"
          v-model="searchParams.deptName"
          placeholder="请输入"
          clearable
          @clear="handleSearch"
        />
      </el-form-item>

      <el-form-item label="机构编码" prop="bindCode">
        <el-input
          class="gd-input gray"
          v-model="searchParams.bindCode"
          placeholder="请输入"
          clearable
          @clear="handleSearch"
        />
      </el-form-item>

      <el-form-item label="所属区划" prop="areaCode">
        <el-select
          class="gd-select gray"
          popper-class="gd-select-popper"
          v-model="searchParams.areaCode"
          placeholder="请选择"
          clearable
          @change="handleSearch"
        >
          <el-option v-for="item in regionOptions" :key="item.code" :label="item.name" :value="item.code" />
        </el-select>
      </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 }">
              {{ ((searchParams.current - 1) * searchParams.size + $index + 1).toString().padStart(2, '0') }}
            </template>
          </el-table-column>
          <el-table-column prop="bindCode" 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="机构描述" />
          <el-table-column prop="status" show-overflow-tooltip label="机构状态">
            <template v-slot="{ row }">
              {{ row.status === 1 ? '启用' : '禁用' }}
            </template>
          </el-table-column>
          <el-table-column label="操作" class-name="operation-btns" width="180">
            <template v-slot="{ row }">
              <el-link @click="openForm('view', row)">查看</el-link>
              <el-link @click="openForm('edit', row)">编辑</el-link>
              <el-link @click="handleDelete(row)">删除</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>
import { Search, RefreshRight, Plus, Delete, 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 {
  agenciesPageApi,
  agenciesRemoveApi,
  agenciesImportApi,
  agenciesExportApi,
  regionLazyTreeApi,
} from './agenciesApi'
import { getDictionaryByCode } from '@/api/system/dictbiz'
import { getDictLabel } from '@ztzf/utils'
import { pxToRem } from '@/utils/rem'
// 初始化查询参数
const initSearchParams = () => ({
  deptName: '', // 机构名称
  bindCode: '', // 机构编码
  areaCode: '', // 所属区划
  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({
  isCovered: [{ required: true, message: '请选择是否覆盖', trigger: ['change'] }],
  file: [{ required: true, message: '请上传文件', trigger: ['change'] }],
})

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

// 获取字典列表
function getDictList() {
  getDictionaryByCode('institutionStatus').then(res => {
            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
  try {
    const res = await agenciesPageApi(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 agenciesRemoveApi({ ids: row.id })
  ElMessage.success('删除成功')
  getList()
}

// 导入机构
function handleImport() {
  isShowImportView.value = true
}

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

// 上传文件前处理
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 || '导入失败')
    }
  })

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

// 提交导入
async function submitImport(formValidate) {
  if (!formValidate) return
  await formValidate.validate(async (valid, fields) => {
    if (valid) {
      importSubmitting.value = true
      try {
        // 这里实际上传文件的逻辑已经在onImportFileBefore中处理了
        // 这里可以添加额外的验证或逻辑
      } finally {
        importSubmitting.value = false
      }
    }
  })
}

// 导出机构
function handleExport() {
  agenciesExportApi(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()
  getRegionList()
  getList()
})
</script>

<style scoped lang="scss">
</style>

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

New file
@@ -0,0 +1,20 @@
<template>
 <div>
    区划管理
 </div>
</template>

<script setup >
/**
 * @description index
 * @date 2026-01-26 (周一) 10:50:43
 */
defineOptions({
 name: 'index'
})


</script>

<style scoped lang="scss">
</style>