WholeProcessPlatform/frontend/src/views/system/map/components/LegendStructure/index.vue

<!-- d:\wordpack\WholeProcessPlatform\frontend\src\views\system\map\components\LegendStructure\index.vue -->
<template>
  <div class="content">
    <LegendStructureSearch
      ref="legendStructureSearch"
      :handle-add="handleAdd"
      @reset="handleReset"
      @search-finish="onSearchFinish"
    />
    <BasicTable
      ref="basicTable"
      :isPage="false"
      :columns="columns"
      :transformData="transformData"
      :list-url="getAllMapLegendTree"
    >
      <template #action="{ column, record }">
        <div class="flex gap-[6px]">
          <a-button
            class="!p-0"
            type="link"
            size="small"
            @click="handleEdit(record)"
            >编辑</a-button
          >
          <a-button
            v-if="record.parentId == null"
            class="!p-0"
            type="link"
            size="small"
            @click="handleAdd(record)"
            >新增子图例</a-button
          >
          <a-button
            class="!p-0"
            type="link"
            size="small"
            danger
            @click="handleDelete(record)"
            >删除</a-button
          >
        </div>
      </template>
      <template #enable="{ column, record }">
        <a-switch
          :checked="record.enable === 1"
          @change="(checked: boolean) => handleEnableChange(record, checked)"
        />
      </template>
      <template #internal="{ column, record }">
        <a-switch
          :checked="record.internal === 1"
          @change="(checked: boolean) => handleInternalChange(record, checked)"
        />
      </template>
      <template #ifShow="{ column, record }">
        <a-switch
          :checked="record.ifShow === 1"
          @change="(checked: boolean) => handleIfShowChange(record, checked)"
        />
      </template>
    </BasicTable>
    <LegendStructureForm
      ref="legendStructureForm"
      v-model:visible="editModalVisible"
      :initial-values="currentRecord"
      @cancel="editModalCancel"
      @ok="handleEditSubmit"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue';
import BasicTable from '@/components/BasicTable/index.vue';
import LegendStructureSearch from './LegendStructureSearch.vue';
import LegendStructureForm from './LegendStructureForm.vue';
import { message, Modal } from 'ant-design-vue';
import {
  getAllMapLegendTree,
  saveMapLegend,
  deleteMapLegend
} from '@/api/system/map/LegendStructure';

// 表格列配置
const columns = [
  {
    title: '',
    dataIndex: '',
    key: '',
    width: 20
  },
  {
    title: '序号',
    key: 'index',
    width: 60,
    align: 'center',
    customRender: ({ record, index }: any) => {
      // 对于树形结构，计算当前记录在其父节点的 children 中的位置
      // 如果没有 parentId，说明是根节点，需要计算在所有根节点中的序号
      if (!record.parentId) {
        // 根节点：计算在 dataSource 中是第几个根节点
        let rootIndex = 0;
        for (let i = 0; i < basicTable.value.tableData.length; i++) {
          const item = basicTable.value.tableData[i];
          // 只统计根节点（没有 parentId 的节点）
          if (!item.parentId) {
            rootIndex++;
            // 找到当前记录，返回其序号
            if (
              item.id === record.id ||
              (item.key === record.key && item.id === record.id)
            ) {
              return rootIndex;
            }
          }
        }
        return rootIndex;
      } else {
        // 子节点：在其父节点的 children 中查找索引
        const findParentAndIndex = (data: any[], parentId: string): number => {
          for (const item of data) {
            if (item.key === parentId || item.id === parentId) {
              // 找到父节点，在其 children 中查找当前记录的位置
              if (item.children && item.children.length > 0) {
                const childIndex = item.children.findIndex(
                  (child: any) =>
                    child.key === record.key || child.id === record.id
                );
                return childIndex + 1;
              }
            }
            // 递归查找更深层的父节点
            if (item.children && item.children.length > 0) {
              const result = findParentAndIndex(item.children, parentId);
              if (result > 0) {
                return result;
              }
            }
          }
          return 0;
        };
        return findParentAndIndex(basicTable.value.tableData, record.parentId);
      }
    }
  },
  {
    title: '图例名称',
    dataIndex: 'name',
    key: 'name',
    width: 170
  },
  {
    title: '图例编码',
    dataIndex: 'nameEn',
    key: 'nameEn',
    width: 120
  },
  {
    title: '是否启用',
    dataIndex: 'enable',
    key: 'enable',
    width: 80,
    slots: { customRender: 'enable' }
  },
  {
    title: '系统内置项',
    dataIndex: 'internal',
    key: 'internal',
    width: 100,
    slots: { customRender: 'internal' }
  },
  {
    title: '是否显示',
    dataIndex: 'ifShow',
    key: 'ifShow',
    width: 80,
    slots: { customRender: 'ifShow' }
  },
  {
    title: '备注',
    dataIndex: 'description',
    key: 'description'
  },
  {
    title: '创建人',
    key: 'displayRecordUser',
    dataIndex: 'displayRecordUser'
  },
  {
    title: '创建时间',
    key: 'recordTime',
    dataIndex: 'recordTime',
    width: 150
  },
  {
    title: '更新时间',
    key: 'modifyTime',
    dataIndex: 'modifyTime',
    width: 150
  },
  {
    title: '操作',
    key: 'action',
    width: 160,
    fixed: 'right',
    slots: { customRender: 'action' }
  }
];
// 表格实例
const basicTable = ref<any>(null);
// 编辑弹窗数据
const editModalVisible = ref(false);
const parentId = ref<string | null>(null);
const currentRecord = ref<any | null>(null);
// 新增处理
const handleAdd = (record: any) => {
  currentRecord.value = null;
  parentId.value = record.id;
  editModalVisible.value = true;
};

// 编辑处理
const handleEdit = (record: any) => {
  parentId.value = null;
  currentRecord.value = { ...record };
  editModalVisible.value = true;
};

// 删除处理
const handleDelete = (record: any) => {
  Modal.confirm({
    title: '确认删除',
    content: '确定要删除选中的记录吗？',
    zIndex: 2002,
    onOk: async () => {
      try {
        let res = await deleteMapLegend([record.id]);
        message.success('删除成功');
        basicTable.value.refresh();
      } catch (error) {
        message.error('删除失败');
        return;
      }
    }
  });
};
// ... existing code ...
const transformData = (res: any) => {
  const flatData = res.data.data || [];

  // 构建树形结构
  const buildTree = (data: any[]) => {
    const map = new Map();
    const tree: any[] = [];

    // 第一步：将所有节点放入 map 中，并初始化 children
    data.forEach(item => {
      map.set(item.id, { ...item, children: [] });
    });

    // 第二步：根据 parentId 建立父子关系
    data.forEach(item => {
      const node = map.get(item.id);

      if (!item.parentId) {
        // 根节点
        tree.push(node);
      } else {
        // 子节点，找到父节点并添加
        const parent = map.get(item.parentId);
        if (parent) {
          parent.children.push(node);
        } else {
          // 如果找不到父节点，也作为根节点处理
          tree.push(node);
        }
      }
    });

    // 第三步：清理没有子节点的 children 数组
    const cleanEmptyChildren = (nodes: any[]) => {
      nodes.forEach(node => {
        if (node.children && node.children.length === 0) {
          delete node.children;
        } else if (node.children && node.children.length > 0) {
          cleanEmptyChildren(node.children);
        }
      });
    };

    cleanEmptyChildren(tree);

    return tree;
  };

  const treeData = buildTree(flatData);

  return {
    records: treeData,
    total: null
  };
};
// ... existing code ...
// 搜索完成处理
const onSearchFinish = (values: any) => {
  const params = {
    logic: 'and',
    filters: [
      { field: 'dataType', operator: 'eq', dataType: 'string', value: '1' },
      {
        field: 'name',
        operator: 'contains',
        dataType: 'string',
        value: values.name
      }
    ]
  };
  basicTable.value.getList(params);
};

// 重置
const handleReset = () => {
  nextTick(() => {
    basicTable.value.getList({
      logic: 'and',
      filters: [
        { field: 'dataType', operator: 'eq', dataType: 'string', value: '1' }
      ]
    });
  });
};

// 是否启用切换处理
const handleEnableChange = (record: any, checked: boolean) => {
  currentRecord.value = { ...record };
  handleEditSubmit({ enable: checked ? 1 : 0 }, 'switch');
};
// 是否内部切换处理
const handleInternalChange = (record: any, checked: boolean) => {
  currentRecord.value = { ...record };
  handleEditSubmit({ internal: checked ? 1 : 0 }, 'switch');
};
// 是否显示处理
const handleIfShowChange = (record: any, checked: boolean) => {
  currentRecord.value = { ...record };
  handleEditSubmit({ ifShow: checked ? 1 : 0 }, 'switch');
};
// 表单取消
const editModalCancel = () => {
  parentId.value = null;
  currentRecord.value = null;
  editModalVisible.value = false;
};

// 表单提交
const handleEditSubmit = async (values: any, type: string) => {
  try {
    let res = await saveMapLegend({
      ...currentRecord.value,
      ...values,
      parentId: parentId.value
    });
    if (type === 'switch') {
      message.success('修改状态成功');
    } else {
      message.success(`保存成功`);
    }
    editModalVisible.value = false;
    basicTable.value.refresh();
  } catch (error) {
    if (type === 'switch') {
      message.error('修改状态失败');
    } else {
      message.error(`保存失败`);
    }
    editModalVisible.value = false;
    return;
  }
};
</script>

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