WholeProcessPlatform/frontend/src/views/system/ConfigManagement/index.vue

<!-- d:\wordpack\WholeProcessPlatform\frontend\src\views\system\map\components\ConfigManagement\index.vue -->
<template>
  <div class="content">
    <ConfigManagementSearch
      ref="configManagementSearch"
      :handle-add="handleAdd"
      :river-options="riverOptions"
      :river-options-load="riverOptionsLoad"
      @reset="handleReset"
      @search-finish="onSearchFinish"
    />
    <BasicTable
      ref="basicTable"
      :columns="columns"
      :list-url="getAllConfigTree"
      :search-params="searchParams"
    >
      <template #action="{ record }">
        <div class="flex gap-[6px]">
          <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>
    </BasicTable>
    <ConfigManagementForm
      ref="configManagementForm"
      v-model:visible="editModalVisible"
      :initial-values="currentRecord"
      :river-options="riverOptions"
      :river-options-load="riverOptionsLoad"
      @cancel="editModalCancel"
      @ok="handleEditSubmit"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick, onMounted, computed } from 'vue';
import BasicTable from '@/components/BasicTable/index.vue';
import ConfigManagementSearch from './ConfigManagementSearch.vue';
import ConfigManagementForm from './ConfigManagementForm.vue';
import { message, Modal } from 'ant-design-vue';
import {
  getAllConfigTree,
  deleteBaseWbsb,
  saveBaseWbsbChild,
  saveBaseWbsbChildDetail,
  getChildConfigTree
} from '@/api/system/map/ConfigManagement';
import { getRvcdDropdown } from '@/api/select';
import dayjs from 'dayjs';
import { useJidiSelectEventStore } from '@/store/modules/jidiSelectEvent';
const JidiSelectEventStore = useJidiSelectEventStore();
// 表格实例
const basicTable = ref<any>(null);
// 表格列配置
const columns = [
  {
    title: '序号',
    dataIndex: 'index',
    key: 'index',
    width: 60,
    align: 'center',
    customRender: ({ index }) => index + 1
  },
  {
    title: '沿程配置名称',
    dataIndex: 'name',
    key: 'name',
    width: 150
  },
  {
    title: '配置编码',
    key: 'code',
    dataIndex: 'code',
    width: 120
  },
  {
    title: '水电基地',
    dataIndex: 'baseName',
    key: 'baseName',
    width: 300,
    ellipsis: true
  },
  {
    title: '创建人',
    key: 'recordUser',
    width: 120,
    dataIndex: 'recordUser'
  },
  {
    title: '创建时间',
    key: 'recordTime',
    dataIndex: 'recordTime',
    width: 150
  },
  {
    title: '更新时间',
    key: 'modifyTime',
    dataIndex: 'modifyTime',
    width: 150
  },
  {
    title: '备注',
    dataIndex: 'remark',
    key: 'remark',
    width: 360
  },
  {
    title: '操作',
    key: 'action',
    width: 120,
    fixed: 'right',
    slots: { customRender: 'action' }
  }
];

// 搜索参数
const searchParams = ref({
  sort: [
    {
      field: 'recordTime',
      dir: 'desc'
    }
  ]
});
// 编辑弹窗数据
const currentRecord = ref<any | null>(null);
const editModalVisible = ref(false);

// 新增处理
const handleAdd = () => {
  currentRecord.value = null;
  editModalVisible.value = true;
};

// 过滤掉值为 '-' 的字段
const filterRecord = (record: any) => {
  const filtered: any = {};
  Object.keys(record).forEach(key => {
    if (record[key] !== '-') {
      filtered[key] = record[key];
    }
  });
  return filtered;
};

// 编辑处理
const handleEdit = async (record: any) => {
  currentRecord.value = filterRecord(record);
  const params = {
    filter: {
      logic: 'and',
      filters: [
        {
          field: 'alongId',
          operator: 'eq',
          value: record.id
        }
      ]
    },
    sort: [
      {
        field: 'sort',
        dir: 'asc'
      }
    ]
  };
  const res = await getChildConfigTree(params);
  if (res.code == 0) {
    const data = res.data.data || [];

    const firstLevelNodes = data.filter((item: any) => !item.rstcd);
    const secondLevelNodes = data.filter((item: any) => item.rstcd);
    //  debugger
    const configNodes = firstLevelNodes.map((node: any, index: number) => {
      const children = secondLevelNodes.filter(
        (child: any) => child.rstcd === node.stcd
      );

      return {
        key: `parent-${index}`,
        stcd: node.stcd,
        ennm: node.stnm,
        sttpName: node.sttpName,
        sort: node.sort,
        parentId: null,
        children: children.map((child: any, childIndex: number) => ({
          key: `child-${index}-${childIndex}`,
          stcd: child.stcd,
          ennm: child.stnm,
          sttpName: child.sttpName,
          sort: child.sort,
          parentId: `parent-${index}`,
          ioDirection: child.ioDirection,
          children: []
        }))
      };
    });

    currentRecord.value.configNodes = configNodes;
    // debugger
  }
  editModalVisible.value = true;
};

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

// 搜索完成处理
const onSearchFinish = (values: any) => {
  const params = {
    logic: 'and',
    filters: [
      values.baseId != 'all'
        ? {
            field: 'baseId',
            operator: 'eq',
            dataType: 'string',
            value: values.baseId
          }
        : null,
      values.name
        ? {
            field: 'name',
            operator: 'contains',
            dataType: 'string',
            value: values.name
          }
        : null
    ].filter(Boolean)
  };
  basicTable.value.getList(params);
};

// 重置
const handleReset = () => {
  basicTable.value.getList({
    logic: 'and',
    filters: []
  });
};

// 表单取消
const editModalCancel = () => {
  currentRecord.value = null;
  editModalVisible.value = false;
};

// 表单提交
const handleEditSubmit = async (values: any) => {
  try {
    const formData = {
      ...currentRecord.value,
      ...values,
      baseName: (JidiSelectEventStore.jidiData.find(element => element.wbsCode === values.baseId) || {}).wbsName,
      modifyTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
    };
    delete formData.configNodes;

    Object.keys(formData).forEach(key => {
      if (key.includes('-')) {
        delete formData[key];
      }
    });

    let res = await saveBaseWbsbChild(formData);
    if (res.code == 0) {
      const alongId = res.data;
      const treeData = values.configNodes || [];

      if (treeData.length > 0) {
        const formatTreeData = (
          nodes: any[],
          parentId: string | null = null,
          parentStcd: string | null = null,
          type: string | null = null
        ) => {
          return nodes.map(node => ({
            alongId,
            stcd: node.stcd,
            stnm: node.ennm || node.stnm,
            sttpName: node.sttpName,
            parentId: parentId ? parentId : null,
            rstcd: parentStcd || null,
            ioDirection: node.type ||node.ioDirection || null,
            children:
              node.children && node.children.length > 0
                ? formatTreeData(node.children, node.key, node.stcd, node.type)
                : []
          }));
        };

        const detailData = formatTreeData(treeData);
        const detailRes = await saveBaseWbsbChildDetail(detailData);
        if (detailRes.code == 0) {
          message.success(`保存成功`);
          editModalVisible.value = false;
          basicTable.value.refresh();
        } else {
          message.error(`保存子节点失败`);
        }
      } else {
        message.success(`保存成功`);
        editModalVisible.value = false;
        basicTable.value.refresh();
      }
    } else {
      message.error(`保存失败`);
    }
  } catch (error) {
    message.error(`保存失败`);
    editModalVisible.value = false;
    return;
  }
};
// const riverOptions = ref<any>([]);
const riverOptions = computed(() => {
  return JidiSelectEventStore.jidiData.map((item: any) => ({
    label: item.wbsName,
    value: item.wbsCode
  }));
});
const riverOptionsLoad = ref(false);
const initOption = () => {
  // const params = {};
  // riverOptionsLoad.value = true;
  //  riverOptions.value = JidiSelectEventStore.jidiData.map((item:any)=>{
  //   return{
  //   }
  //  })
  // getRvcdDropdown(params).then((res: any) => {
  //   res.data.forEach((item: any) => {
  //     item.value = item.rvcd;
  //     item.label = item.rvnm;
  //   });
  //   riverOptions.value = res.data || [];
  //   riverOptionsLoad.value = false;
  // });
};
onMounted(() => {
  initOption();
});
</script>

<style scoped lang="scss">
.content {
  position: relative;
  z-index: 900;
  pointer-events: all;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  overflow: hidden;
}
.config-management {
  height: 100%;
  padding: 16px;
}
</style>