| | |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="所属区划" prop="areaCode"> |
| | | <el-tree-select |
| | | class="gd-select" |
| | | popper-class="gd-tree-select-popper" |
| | | v-model="formData.areaCode" |
| | | node-key="id" |
| | | :default-expanded-keys="expandedKeys" |
| | | :props="treeSelectProps" |
| | | placeholder="请选择" |
| | | clearable |
| | | filterable |
| | | :check-strictly="true" |
| | | lazy |
| | | :load="loadRegionNode" |
| | | :render-after-expand="false" |
| | | @change="handleAreaChange" |
| | | /> |
| | | </el-form-item> |
| | | <RegionSelect |
| | | v-model="formData.areaCode" |
| | | placeholder="请选择" |
| | | @change="handleAreaChange" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="实施清单名称" prop="implementName"> |
| | |
| | | import { computed, ref, inject } from 'vue' |
| | | import { ElMessage } from 'element-plus' |
| | | import { fieldRules } from '@ztzf/utils' |
| | | import { inventorySubmitApi, inventoryDetailApi, regionLazyTreeApi } from './inventoryApi' |
| | | import { inventorySubmitApi, inventoryDetailApi } from './inventoryApi' |
| | | import RegionSelect from '@/components/RegionSelect/main.vue' |
| | | |
| | | // 初始化表单数据 |
| | | const initForm = () => ({ |
| | |
| | | const submitting = ref(false) // 提交中 |
| | | const dialogReadonly = computed(() => dialogMode.value === 'view') |
| | | const titleEnum = ref({ edit: '编辑', view: '查看', add: '新增' }) |
| | | const expandedKeys = ref([]) // 树形选择器展开的节点 |
| | | const regionNodeCache = ref(new Map()) // 缓存区域节点及其父节点关系 |
| | | |
| | | // 区域树形选择器配置 |
| | | const treeSelectProps = ref({ |
| | | value: 'id', |
| | | label: 'name', |
| | | children: 'children', |
| | | // 判断叶子节点 |
| | | isLeaf: (data, node) => { |
| | | // 如果是第二级节点,则认为是叶子节点 |
| | | return node.level >= 2 |
| | | }, |
| | | }) |
| | | |
| | | // 表单校验规则 |
| | | const rules = { |
| | |
| | | formData.value.areaName = '' |
| | | return |
| | | } |
| | | // 从缓存中获取区域名称 |
| | | const node = regionNodeCache.value.get(value) |
| | | if (node) { |
| | | formData.value.areaName = node.name || '' |
| | | // 处理RegionSelect组件传递的包含code和name的对象 |
| | | if (typeof value === 'object' && value.code) { |
| | | formData.value.areaCode = value.code |
| | | formData.value.areaName = value.name || '' |
| | | } else { |
| | | // 兼容旧的字符串值格式 |
| | | formData.value.areaCode = value |
| | | formData.value.areaName = '' |
| | | } |
| | | } |
| | | |
| | |
| | | data.areaCode = String(data.areaCode) |
| | | } |
| | | formData.value = data |
| | | |
| | | // 如果是编辑模式,获取区域节点的路径以展开树形选择器 |
| | | if (dialogMode.value === 'edit' && data.areaCode) { |
| | | await loadRegionPath(data.areaCode) |
| | | } |
| | | } |
| | | |
| | | // 加载区域节点路径 |
| | | async function loadRegionPath(areaCode) { |
| | | try { |
| | | const path = [] |
| | | const queue = [{ code: '360800000000', currentPath: ['360800000000'] }] |
| | | let found = false |
| | | |
| | | // 广度优先搜索,逐层加载节点直到找到目标节点 |
| | | while (queue.length > 0 && !found) { |
| | | const { code, currentPath } = queue.shift() |
| | | |
| | | // 获取当前节点的子节点 |
| | | const res = await regionLazyTreeApi({ parentCode: code }) |
| | | const nodes = res?.data?.data || [] |
| | | |
| | | for (const node of nodes) { |
| | | const nodeId = node.id || node.value |
| | | |
| | | // 缓存节点及其父节点关系 |
| | | regionNodeCache.value.set(nodeId, { |
| | | id: nodeId, |
| | | name: node.name || node.title || node.label, |
| | | parentId: code, |
| | | hasChildren: node.hasChildren || false, |
| | | }) |
| | | |
| | | // 检查是否找到目标节点 |
| | | if (nodeId === areaCode) { |
| | | path.push(...currentPath, nodeId) |
| | | found = true |
| | | break |
| | | } |
| | | |
| | | // 如果有子节点,加入队列继续搜索 |
| | | if (node.hasChildren) { |
| | | queue.push({ |
| | | code: nodeId, |
| | | currentPath: [...currentPath, nodeId], |
| | | }) |
| | | } |
| | | } |
| | | } |
| | | |
| | | if (path.length > 0) { |
| | | expandedKeys.value = path |
| | | } |
| | | } catch (error) { |
| | | console.error('加载区域路径失败:', error) |
| | | } |
| | | } |
| | | |
| | | // 打开弹框 |
| | |
| | | formData.value = dialogMode.value === 'add' ? initForm() : row |
| | | if (dialogMode.value !== 'add') { |
| | | await loadDetail() |
| | | } |
| | | } |
| | | |
| | | // 懒加载获取区域节点数据 |
| | | async function loadRegionNode(node, resolve) { |
| | | try { |
| | | // 限制只加载两级,当前节点 level >= 1 时不加载子节点 |
| | | if (node.level >= 2) { |
| | | resolve([]) |
| | | return |
| | | } |
| | | // 初始化加载时传递 code 参数,加载子节点时传递 parentCode 参数 |
| | | const params = node.data?.id ? { parentCode: node.data.id } : { code: '360800000000' } |
| | | const parentCode = node.data?.id || '360800000000' |
| | | const res = await regionLazyTreeApi(params) |
| | | const nodes = res?.data?.data || [] |
| | | |
| | | // 处理返回的节点数据 |
| | | const processedNodes = nodes.map(item => { |
| | | const nodeId = item.id || item.value |
| | | // 缓存节点及其父节点关系 |
| | | regionNodeCache.value.set(nodeId, { |
| | | id: nodeId, |
| | | name: item.name || item.title || item.label, |
| | | parentId: parentCode, |
| | | hasChildren: item.hasChildren || false, |
| | | }) |
| | | |
| | | return { |
| | | id: nodeId, |
| | | name: item.name || item.title || item.label, |
| | | hasChildren: item.hasChildren || false, |
| | | } |
| | | }) |
| | | |
| | | resolve(processedNodes) |
| | | } catch (error) { |
| | | console.error('获取区域数据失败:', error) |
| | | resolve([]) |
| | | } |
| | | } |
| | | |