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

<!-- d:\wordpack\WholeProcessPlatform\frontend\src\views\system\map\components\LegendData\index.vue -->
<template>
  <div class="content">
    <LegendDataSearch
      ref="legendDataSearch"
      :handle-add="handleAdd"
      :options="LegendOptions"
      @reset="handleReset"
      @search-finish="onSearchFinish"
    />
    <BasicTable
      ref="basicTable"
      :columns="columns"
      :list-url="getAllMapLegendTree"
      :search-params="searchParams"
    >
      <template #action="{ column, record }">
        <div class="flex gap-[6px] justify-between">
          <a-button
            class="!p-0"
            type="link"
            size="small"
            @click="handleEdit(record)"
            >选中配置</a-button
          >
          <a-button
            class="!p-0"
            type="link"
            size="small"
            @click="handleEdit(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>
    <LegendDataForm
      ref="legendDataForm"
      :LegendOptions="LegendOptions"
      :LayerOptions="LayerOptions"
      v-model:visible="editModalVisible"
      :initial-values="currentRecord"
      @cancel="editModalCancel"
      @ok="handleEditSubmit"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick, onMounted } from 'vue';
import BasicTable from '@/components/BasicTable/index.vue';
import LegendDataSearch from './LegendDataSearch.vue';
import LegendDataForm from './LegendDataForm.vue';
import { message, Modal } from 'ant-design-vue';
import {
  getAllMapLegendTree,
  saveMapLegend,
  deleteMapLegend
} from '@/api/system/map/LegendStructure';
import { getAllMapLegendParentIdTree } from '@/api/system/map/LegendStructure';
import { getAllMapLayerTree } from '@/api/system/map/LayerManagement';
// 表格列配置
const columns = [
  {
    title: '序号',
    key: 'index',
    width: 60,
    align: 'center',
    customRender: ({ _, index }) => index + 1
  },
  {
    title: '图例名称',
    dataIndex: 'name',
    key: 'name',
    width: 150
  },
  {
    title: '图例编码',
    key: 'nameEn',
    dataIndex: 'nameEn',
    width: 120
  },
  {
    title: 'icon编码',
    key: 'icon',
    dataIndex: 'icon',
    width: 200
  },
  {
    title: '图例类型',
    dataIndex: 'codeName',
    key: 'codeName',
    width: 80
  },
  {
    title: '二维最小缩放',
    dataIndex: 'minZoom',
    key: 'minZoom',
    width: 100
  },
  {
    title: '二维最大缩放',
    dataIndex: 'maxZoom',
    key: 'maxZoom',
    width: 100
  },
  {
    title: '三维最小高程',
    dataIndex: 'minHeightThd',
    key: 'minHeightThd',
    width: 100
  },
  {
    title: '三维最大高程',
    dataIndex: 'maxHeightThd',
    key: 'maxHeightThd',
    width: 100
  },
  {
    title: '区间表达式',
    dataIndex: 'expression',
    key: 'expression',
    width: 100
  },
  {
    title: '父级图例名称',
    dataIndex: 'parentName',
    key: 'parentName',
    width: 170
  },
  {
    title: '父级图例编码',
    dataIndex: 'parentCode',
    key: 'parentCode',
    width: 150
  },
  {
    title: '图层名称',
    dataIndex: 'layerCodeName',
    key: 'layerCodeName',
    width: 180
  },
  {
    title: '图层编码',
    dataIndex: 'layerCode',
    key: 'layerCode',
    width: 180
  },
  {
    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',
    width: 160
  },
  {
    title: '创建人',
    key: 'displayRecordUser',
    dataIndex: 'displayRecordUser',
    width: 150
  },
  {
    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 searchParams = ref({});
// 编辑弹窗数据
const LegendOptions = ref<any[]>([]);
const LayerOptions = ref<any[]>([]);
const currentRecord = ref<any | null>(null);
const editModalVisible = ref(false);
const handleAdd = () => {
  currentRecord.value = null;
  editModalVisible.value = true;
};

// 编辑处理
const handleEdit = (record: any) => {
  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;
      }
    }
  });
};

// 搜索完成处理
const onSearchFinish = (values: any) => {
  const params = {
    logic: 'and',
    filters: [
      { field: 'dataType', operator: 'eq', dataType: 'string', value: '2' },
      values.parentId
        ? {
            field: 'parentId',
            operator: 'eq',
            dataType: 'string',
            value: values.parentId
          }
        : null,
      {
        field: 'name',
        operator: 'contains',
        dataType: 'string',
        value: values.name
      }
    ].filter(Boolean)
  };
  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 = () => {
  currentRecord.value = null;
  editModalVisible.value = false;
};

// 表单提交

// 表单提交
const handleEditSubmit = async (values: any, type: string) => {
  try {
    let res = await saveMapLegend({
      ...currentRecord.value,
      ...values
    });
    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;
  }
};
const initOption = () => {
  // 递归处理树节点的函数
  const processTreeNode = (node: any) => {
    if (!node) return node;

    // 删除 checkable 属性
    delete node.checkable;
    // 设置 value 和 key 为 code 的值
    node.value = node.code;
    node.key = node.code;

    // 递归处理子节点
    if (node.children && Array.isArray(node.children)) {
      node.children = node.children.map(processTreeNode);
    }

    return node;
  };

  getAllMapLayerTree({ flag: 0 }).then((res: any) => {
    // 使用递归函数处理整个树结构
    const processedData = res.data.map(processTreeNode);
    LayerOptions.value = processedData;
    console.log(LayerOptions.value);
  });
  getAllMapLegendParentIdTree({ flag: 1 }).then((res: any) => {
    LegendOptions.value = res.data || [];
  });
};

onMounted(() => {
  initOption();
});
</script>

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