WholeProcessPlatform/frontend/src/views/system/map/components/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"
      @reset="handleReset"
      @search-finish="onSearchFinish"
    />
    <BasicTable
      :columns="columns"
      :data="dataSource"
      :list-url="fetchConfigData"
      :search-params="searchParams"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <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>
        <template v-if="column.key === 'configType'">
          <a-tag :color="getConfigTypeColor(record.configType)">
            {{ record.configType }}
          </a-tag>
        </template>
      </template>
    </BasicTable>
    <ConfigManagementForm
      ref="configManagementForm"
      v-model:visible="editModalVisible"
      :initial-values="currentRecord"
      @cancel="editModalCancel"
      @ok="handleEditSubmit"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import BasicTable from "@/components/BasicTable/index.vue";
import ConfigManagementSearch from "./ConfigManagementSearch.vue";
import ConfigManagementForm from "./ConfigManagementForm.vue";
import { message } from "ant-design-vue";

// 表格列配置
const columns = [
  {
    title: "序号",
    dataIndex: "index",
    key: "index",
    width: 60,
    align: "center",
    customRender: ({ text, record, index }) => index + 1,
  },
  {
    title: "沿程配置名称",
    dataIndex: "name",
    key: "name",
    width: 150,
  },
  {
    title: "配置编码",
    key: "code",
    dataIndex: "code",
    width: 120,
  },
  {
    title: "所在河段",
    dataIndex: "rvnm",
    key: "rvnm",
    ellipsis: true,
  },
  {
    title: "创建人",
    key: "recordUser",
    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",
  },
];

// 搜索参数
const searchParams = ref({});
// 编辑弹窗数据
const currentRecord = ref<any | null>(null);
const editModalVisible = ref(false);

// 数据源
const dataSource = ref([
  {
    _tls: {},
    id: "D0E1293DB0324E729AB074D8BD61C745",
    recordUser: "20210802-1454-3403-3753-a22ed7009522",
    recordTime: "0001-01-01 00:00:00",
    modifyTime: "0001-01-01 00:00:00",
    displayRecordUser: null,
    isolateType: null,
    name: "雅砻江通用配置",
    code: "common",
    rvcd: "SJLY176",
    rvnm: "雅砻江",
    remark: null,
    recordUserName: "20210802-1454-3403-3753-a22ed7009522",
    departmentId: null,
    displayDepartment: null,
  },
  {
    _tls: {},
    id: "E8E0425BFA8143BCB2D0FC9C45FE2853",
    recordUser: "20210802-1454-3403-3753-a22ed7009522",
    recordTime: "0001-01-01 00:00:00",
    modifyTime: "0001-01-01 00:00:00",
    displayRecordUser: null,
    isolateType: null,
    name: "澜沧江干流通用配置",
    code: "common",
    rvcd: "SJLY126",
    rvnm: "澜沧江干流",
    remark: null,
    recordUserName: "20210802-1454-3403-3753-a22ed7009522",
    departmentId: null,
    displayDepartment: null,
  },
  {
    _tls: {},
    id: "9AE90200DF324B6981C85129D5288C8E",
    recordUser: "20210802-1454-3403-3753-a22ed7009522",
    recordTime: "2023-08-04 17:46:08",
    modifyTime: null,
    displayRecordUser: null,
    isolateType: null,
    name: "清江通用配置",
    code: "common",
    rvcd: "SJLY109",
    rvnm: "清江",
    remark: null,
    recordUserName: "20210802-1454-3403-3753-a22ed7009522",
    departmentId: null,
    displayDepartment: null,
  },
  {
    _tls: {},
    id: "F2EC0A6870534C14810AECA990E092D6",
    recordUser: "20210802-1454-3403-3753-a22ed7009522",
    recordTime: "2023-08-04 17:46:09",
    modifyTime: "2024-07-08 16:25:05",
    displayRecordUser: null,
    isolateType: null,
    name: "澧水通用配置",
    code: "common",
    rvcd: "SJLY110",
    rvnm: "澧水",
    remark: null,
    recordUserName: "20210802-1454-3403-3753-a22ed7009522",
    departmentId: null,
    displayDepartment: null,
  },
  {
    _tls: {},
    id: "F99C360B47B14F10AAE688534ECAFA87",
    recordUser: "20210802-1454-3403-3753-a22ed7009522",
    recordTime: "2023-08-04 17:46:10",
    modifyTime: "2024-06-14 15:25:10",
    displayRecordUser: null,
    isolateType: null,
    name: "红水河通用配置",
    code: "common",
    rvcd: "SJLY130",
    rvnm: "红水河",
    remark: null,
    recordUserName: "20210802-1454-3403-3753-a22ed7009522",
    departmentId: null,
    displayDepartment: null,
  },
  {
    _tls: {},
    id: "3E8E27C07F5B41D9A3915E969D9E1BB8",
    recordUser: "20210802-1454-3403-3753-a22ed7009522",
    recordTime: "2023-08-04 17:46:11",
    modifyTime: "2024-07-18 17:29:22",
    displayRecordUser: null,
    isolateType: null,
    name: "大渡河通用配置",
    code: "common",
    rvcd: "SJLY148",
    rvnm: "大渡河",
    remark: null,
    recordUserName: "20210802-1454-3403-3753-a22ed7009522",
    departmentId: null,
    displayDepartment: null,
  },
  {
    _tls: {},
    id: "BB4FBC900D2C462080BDC7638EB4459F",
    recordUser: "20210802-1454-3403-3753-a22ed7009522",
    recordTime: "2023-08-04 17:46:12",
    modifyTime: null,
    displayRecordUser: null,
    isolateType: null,
    name: "洞庭湖环湖区通用配置",
    code: "common",
    rvcd: "SJLY155",
    rvnm: "洞庭湖环湖区",
    remark: null,
    recordUserName: "20210802-1454-3403-3753-a22ed7009522",
    departmentId: null,
    displayDepartment: null,
  },
  {
    _tls: {},
    id: "8E707E0628414DC2BFC42CFAA32D2A76",
    recordUser: "20210802-1454-3403-3753-a22ed7009522",
    recordTime: "2023-08-04 17:46:13",
    modifyTime: "2024-05-29 10:08:26",
    displayRecordUser: null,
    isolateType: null,
    name: "丰满以下通用配置",
    code: "common",
    rvcd: "SJLY168",
    rvnm: "丰满以下",
    remark: null,
    recordUserName: "20210802-1454-3403-3753-a22ed7009522",
    departmentId: null,
    displayDepartment: null,
  },
  {
    _tls: {},
    id: "BB911176EE164E3F85B6DABF1F6C3F14",
    recordUser: "20210802-1454-3403-3753-a22ed7009522",
    recordTime: "2023-08-04 17:46:13",
    modifyTime: null,
    displayRecordUser: null,
    isolateType: null,
    name: "丰满以上通用配置",
    code: "common",
    rvcd: "SJLY169",
    rvnm: "丰满以上",
    remark: null,
    recordUserName: "20210802-1454-3403-3753-a22ed7009522",
    departmentId: null,
    displayDepartment: null,
  },
  {
    _tls: {},
    id: "3246C417FA544C3592FA367B15F90927",
    recordUser: "20210802-1454-3403-3753-a22ed7009522",
    recordTime: "2023-08-04 17:46:15",
    modifyTime: "2024-07-08 16:14:42",
    displayRecordUser: null,
    isolateType: null,
    name: "南盘江通用配置",
    code: "common",
    rvcd: "SJLY178",
    rvnm: "南盘江",
    remark: null,
    recordUserName: "20210802-1454-3403-3753-a22ed7009522",
    departmentId: null,
    displayDepartment: null,
  },
  {
    _tls: {},
    id: "2589AC1BFB5549F2AD497D3EDB7C45A9",
    recordUser: "20210802-1454-3403-3753-a22ed7009522",
    recordTime: "2023-08-04 17:46:16",
    modifyTime: null,
    displayRecordUser: null,
    isolateType: null,
    name: "瓯江温溪以上通用配置",
    code: "common",
    rvcd: "SJLY194",
    rvnm: "瓯江温溪以上",
    remark: null,
    recordUserName: "20210802-1454-3403-3753-a22ed7009522",
    departmentId: null,
    displayDepartment: null,
  },
  {
    _tls: {},
    id: "2A450ADE4A884F90A35866C89FF9A012",
    recordUser: "20210802-1454-3403-3753-a22ed7009522",
    recordTime: "2023-08-04 17:46:16",
    modifyTime: null,
    displayRecordUser: null,
    isolateType: null,
    name: "富春江水库以上通用配置",
    code: "common",
    rvcd: "SJLY195",
    rvnm: "富春江水库以上",
    remark: null,
    recordUserName: "20210802-1454-3403-3753-a22ed7009522",
    departmentId: null,
    displayDepartment: null,
  },
  {
    _tls: {},
    id: "761683529B374922864910CD334BE7D3",
    recordUser: "20210802-1454-3403-3753-a22ed7009522",
    recordTime: "2023-08-04 17:46:17",
    modifyTime: null,
    displayRecordUser: null,
    isolateType: null,
    name: "黄河干流中游通用配置",
    code: "common",
    rvcd: "SJLY1C",
    rvnm: "黄河干流中游",
    remark: null,
    recordUserName: "20210802-1454-3403-3753-a22ed7009522",
    departmentId: null,
    displayDepartment: null,
  },
  {
    _tls: {},
    id: "2A64FFA5D7944CE9A7D3C844F5A7B7AA",
    recordUser: "20210802-1454-3403-3753-a22ed7009522",
    recordTime: "2023-08-04 17:46:18",
    modifyTime: "2024-08-07 10:29:42",
    displayRecordUser: null,
    isolateType: null,
    name: "黄河干流上游通用配置",
    code: "common",
    rvcd: "SJLY1U",
    rvnm: "黄河干流上游",
    remark: null,
    recordUserName: "20210802-1454-3403-3753-a22ed7009522",
    departmentId: null,
    displayDepartment: null,
  },
  {
    _tls: {},
    id: "1B0ECE32A8F74E47B0B5EB6774476728",
    recordUser: "20210802-1454-3403-3753-a22ed7009522",
    recordTime: "2023-08-04 17:46:19",
    modifyTime: null,
    displayRecordUser: null,
    isolateType: null,
    name: "长江干流通用配置",
    code: "common",
    rvcd: "SJLY208",
    rvnm: "长江干流",
    remark: null,
    recordUserName: "20210802-1454-3403-3753-a22ed7009522",
    departmentId: null,
    displayDepartment: null,
  },
  {
    _tls: {},
    id: "96600AD12B9645D9A86B0754BE03F9C3",
    recordUser: "20210802-1454-3403-3753-a22ed7009522",
    recordTime: "2023-08-04 17:46:20",
    modifyTime: null,
    displayRecordUser: null,
    isolateType: null,
    name: "资水通用配置",
    code: "common",
    rvcd: "SJLY214",
    rvnm: "资水",
    remark: null,
    recordUserName: "20210802-1454-3403-3753-a22ed7009522",
    departmentId: null,
    displayDepartment: null,
  },
  {
    _tls: {},
    id: "2B70280D51D44398815C99EF700A6B55",
    recordUser: "20210802-1454-3403-3753-a22ed7009522",
    recordTime: "2023-08-04 17:46:20",
    modifyTime: null,
    displayRecordUser: null,
    isolateType: null,
    name: "沅水通用配置",
    code: "common",
    rvcd: "SJLY216",
    rvnm: "沅水",
    remark: null,
    recordUserName: "20210802-1454-3403-3753-a22ed7009522",
    departmentId: null,
    displayDepartment: null,
  },
  {
    _tls: {},
    id: "F9CD484CBE254AD0A7B7D3D058443455",
    recordUser: "20210802-1454-3403-3753-a22ed7009522",
    recordTime: "2023-08-04 17:46:21",
    modifyTime: null,
    displayRecordUser: null,
    isolateType: null,
    name: "赣江通用配置",
    code: "common",
    rvcd: "SJLY217",
    rvnm: "赣江",
    remark: null,
    recordUserName: "20210802-1454-3403-3753-a22ed7009522",
    departmentId: null,
    displayDepartment: null,
  },
  {
    _tls: {},
    id: "0AA0EA96FA5649FEA3B7881FC6F0C85C",
    recordUser: "20210802-1454-3403-3753-a22ed7009522",
    recordTime: "2023-08-04 17:46:22",
    modifyTime: null,
    displayRecordUser: null,
    isolateType: null,
    name: "黔浔江及西江通用配置",
    code: "common",
    rvcd: "SJLY25",
    rvnm: "黔浔江及西江",
    remark: null,
    recordUserName: "20210802-1454-3403-3753-a22ed7009522",
    departmentId: null,
    displayDepartment: null,
  },
  {
    _tls: {},
    id: "533473B0349546CC82B50C21CF843101",
    recordUser: "20210802-1454-3403-3753-a22ed7009522",
    recordTime: "2023-08-04 17:46:23",
    modifyTime: null,
    displayRecordUser: null,
    isolateType: null,
    name: "闽江上游通用配置",
    code: "common",
    rvcd: "SJLY33",
    rvnm: "闽江上游",
    remark: null,
    recordUserName: "20210802-1454-3403-3753-a22ed7009522",
    departmentId: null,
    displayDepartment: null,
  },
]);

// 获取配置类型标签颜色
const getConfigTypeColor = (type: string) => {
  const colorMap: Record<string, string> = {
    系统配置: "blue",
    显示配置: "green",
    业务配置: "orange",
  };
  return colorMap[type] || "default";
};

// 模拟数据获取函数
const fetchConfigData = (params: any) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        data: {
          records: [
            {
              id: 1,
              configName: "默认缩放级别",
              configType: "显示配置",
              configValue: "10",
              description: "地图默认显示的缩放级别",
              updateTime: "2023-05-15 10:30:00",
            },
            {
              id: 2,
              configName: "数据刷新间隔",
              configType: "系统配置",
              configValue: "300",
              description: "数据自动刷新的时间间隔(秒)",
              updateTime: "2023-06-20 14:45:00",
            },
            {
              id: 3,
              configName: "预警阈值",
              configType: "业务配置",
              configValue: "85%",
              description: "触发预警的阈值百分比",
              updateTime: "2023-07-10 09:15:00",
            },
          ],
          total: 3,
        },
      });
    }, 500);
  });
};

const handleAdd = () => {
  currentRecord.value = null;
  editModalVisible.value = true;
};

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

// 删除处理
const handleDelete = (record: any) => {
  message.warning(`删除配置: ${record.configName}`);
};

// 搜索完成处理
const onSearchFinish = (values: any) => {
  console.log(values);
};

// 重置
const handleReset = (params: any) => {};

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

// 表单提交
const handleEditSubmit = (values: any) => {
  console.log(values);
};
</script>

<style scoped lang="scss">
.config-management {
  height: 100%;
  padding: 16px;
}
</style>