新增了实时同步的任务运维界面

src/views/realTimeSync/taskOperationsMaintenance/maintenance.data.ts

+import {getAllRoleList} from '@/api/system/role/role';
+import { BasicColumn, FormSchema } from '@/components/Table';
+import {h} from "vue";
+import {Input, Select, Tag} from "ant-design-vue";
+import { Switch } from 'ant-design-vue';
+import {useMessage} from "@/hooks/web/useMessage";
+import {changeFlagApi} from "@/api/system/user/user";
+import {DescItem} from "@/components/Description";
+import {uploadApi} from "@/api/sys/upload"; // 引入开关组件
+type CheckedType = boolean | string | number;
+
+/**首页-table列表*/
+export const columns: BasicColumn[] = [
+  {
+    title: '任务名称',
+    dataIndex: 'taskName',
+    width: 120
+  },
+  {
+    title: '启动时间',
+    dataIndex: 'startTime',
+    width: 120
+  },
+  {
+    title: '源端',
+    dataIndex: 'source',
+    width: 120
+  },
+  {
+    title: '目标端',
+    dataIndex: 'target',
+    width: 120
+  },
+  {
+    title: '拥有者',
+    dataIndex: 'owner',
+    width: 120
+  },
+  {
+    title: '任务版本',
+    dataIndex: 'taskVersion',
+    width: 120
+  },
+  {
+    title: '任务状态',
+    dataIndex: 'taskStatus',
+    width: 120
+  },
+  {
+    title: '时延',
+    dataIndex: 'latency',
+    width: 120
+  },
+  {
+    title: '24小时数据检查有差异',
+    dataIndex: 'dataCheckDifference24h',
+    width: 120
+  },
+  {
+    title: '最新事件时间',
+    dataIndex: 'latestEventTime',
+    width: 120
+  },
+  {
+    title: '未处理异常',
+    dataIndex: 'unhandledExceptions',
+    width: 120
+  },
+  {
+    title: 'DDL',
+    dataIndex: 'ddl',
+    width: 120
+  }
+];
+/**首页-搜索表单*/
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'taskName',
+    label: '',
+    component: 'Input',
+    rules: [
+      {
+        required: true,
+        message: '请输入关键字搜索',
+      },
+    ],
+    componentProps: {
+      palceholder: '请输入关键字搜索',
+    }
+  },
+];
+/**首页-下拉框表单*/
+export const selectFormSchema: FormSchema[] = [
+  {
+    field: 'tree',
+    label: '',
+    component: 'TreeSelect',
+    colProps: { span: 3 },
+    componentProps: {
+      treeCheckable: true,
+      fieldNames: {
+        label: 'treeName',
+        value: 'businessId',
+      },
+      getPopupContainer: () => document.body,
+    },
+  },
+];
+
+
+/**table列表*/
+export const apiDocColumns: BasicColumn[] = [
+ {
+    "title": "参数code",
+    "dataIndex": "parameterCode",
+    "width": 120
+  },
+  {
+    "title": "参数位置",
+    "dataIndex": "parameterPosition",
+    "width": 120
+  },
+  {
+    "title": "Xpath",
+    "dataIndex": "xpath",
+    "width": 120
+  },
+  {
+    "title": "参数类型",
+    "dataIndex": "parameterType",
+    "width": 120
+  },
+  {
+    "title": "注释",
+    "dataIndex": "annotation",
+    "width": 120
+  },
+  {
+    "title": "是否必填",
+    "dataIndex": "isRequired",
+    "width": 120
+  },
+  {
+    "title": "参数值",
+    "dataIndex": "parameterValue",
+    "width": 120,
+    "editable": true,
+    "edit": true
+  }
+];
+/**form表单*/
+export const guideModeFormSchema2: FormSchema[] = [
+  {
+    field: 'apiName',
+    label: 'API名称',
+    component: 'Input',
+    defaultValue: 'API_ONE',
+    rules: [
+      {
+        required: true,
+        message: '请输入API名称',
+      },
+    ],
+  },
+  {
+    field: 'apiDescription',
+    label: 'API描述',
+    component: 'InputTextArea',
+    componentProps: {
+      placeholder: '请输入API描述',
+      rows: 4,
+    },
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'timeOut',
+    label: '超时时间',
+    component: 'Input',
+    defaultValue: '5',
+    rules: [
+      {
+        required: true,
+        message: '请输入超时时间',
+      },
+    ],
+    suffix: '秒',
+  },
+  {
+    field: 'label',
+    label: 'Label',
+    component: 'Select',
+    rules: [
+      {
+        required: true,
+        message: '请选择Label',
+      },
+    ],
+    defaultValue: '1',
+    componentProps: {
+      mode: 'multiple',
+      options:[
+        {
+          label:'用户',
+          value:'1'
+        },
+        {
+          label:'查询',
+          value:'2'
+        },
+      ],
+      placeholder: '请选择Label',
+    },
+  },
+  {
+    field: 'type',
+    label: '类别',
+    component: 'Select',
+    rules: [
+      {
+        required: true,
+        message: '请选择类别',
+      },
+    ],
+    defaultValue: '1',
+    componentProps: {
+      options:[
+        {
+          label:'API类别1',
+          value:'1'
+        },
+        {
+          label:'API类别2',
+          value:'2'
+        },
+        {
+          label:'API类别3',
+          value:'3'
+        },
+      ],
+      placeholder: '请选择类别',
+    },
+  },
+];
+/**编辑列表*/
+export const guideModeTableColumns1: BasicColumn[] = [
+  {
+    title: '列名',
+    dataIndex: 'column',
+    edit: true,
+    editable: true,
+    editComponent: 'Select',
+    editComponentProps: {
+      options: [
+        {
+          label: 'id',
+          value: '1',
+        },
+        {
+          label: '列名2',
+          value: '2',
+        },
+      ],
+    },
+    width: 200,
+  },
+  {
+    title: '参数code',
+    dataIndex: 'parameterCode',
+    width: 200,
+    edit: true,
+    editable: true,
+  },
+  {
+    title: '参数类型',
+    dataIndex: 'parameterType',
+    width: 150,
+  },
+  {
+    title: '注释',
+    dataIndex: 'comment',
+    width: 200,
+    edit: true,
+    editable: true,
+  },
+  {
+    title: '是否必填',
+    dataIndex: 'required',
+    edit: true,
+    editable: true,
+    editComponent: 'Checkbox',
+    editValueMap: (value) => {
+      return value ? '是' : '否';
+    },
+    width: 200,
+  },
+  {
+    title: '默认值',
+    dataIndex: 'defaultValue',
+    width: 150
+  },
+  {
+    title: '示例值',
+    dataIndex: 'exampleValue',
+    width: 200,
+    edit: true,
+    editable: true,
+  },
+];

src/views/realTimeSync/taskOperationsMaintenance/maintenanceData.ts

+import {getAllRoleList} from '@/api/system/role/role';
+import { BasicColumn, FormSchema } from '@/components/Table';
+import {h} from "vue";
+import {Tag} from "ant-design-vue";
+import { Switch } from 'ant-design-vue';
+import {useMessage} from "@/hooks/web/useMessage";
+import {changeFlagApi} from "@/api/system/user/user";
+import {relatedQualityColumns} from "@/views/dataStandards/basicStandards/basicStandards.data"; // 引入开关组件
+type CheckedType = boolean | string | number;
+
+/**主页面树/列表 数据*/
+export const TreeData: any[] = [
+  {
+    businessId: 100,
+    treeName: '全选',
+    anotherName: '全选',
+    parentId: 0,
+  },
+  {
+    businessId: 201,
+    treeName: '共享工作区',
+    anotherName: '共享工作区',
+    parentId: 100,
+  },
+  {
+    businessId: 202,
+    treeName: '商城工作区',
+    anotherName: '商城工作区',
+    parentId: 100,
+  },
+  {
+    businessId: 203,
+    treeName: 'admin个人工作区',
+    anotherName: 'admin个人工作区',
+    parentId: 100,
+  },
+];
+
+/**主页面列表 数据*/
+export const tableData: any[] =[
+  {
+    businessId:'1',
+    taskName: 'wirp-322',
+    startTime: '2024-01-01 08:00:00',
+    source: 'KUNDB',
+    target: 'KUNDB',
+    owner: 'admin',
+    taskVersion: '5.0',
+    taskStatus: '运行中',
+    latency: '0.00s',
+    dataCheckDifference24h: '是',
+    latestEventTime: '2024-01-01 08:10:00',
+    unhandledExceptions: '37439',
+    ddl: '0'
+  },
+  {
+    businessId:'2',
+    taskName: 'WARP-108477',
+    startTime: '2024-01-01 08:00:00',
+    source: 'KUNDB',
+    target: 'KUNDB',
+    owner: 'admin',
+    taskVersion: '4.0',
+    taskStatus: '运行中',
+    latency: '0.00s',
+    dataCheckDifference24h: '是',
+    latestEventTime: '2024-01-01 08:10:00',
+    unhandledExceptions: '37439',
+    ddl: '0'
+  },
+  {
+    businessId:'3',
+    taskName: 'test8988',
+    startTime: '2024-01-01 08:00:00',
+    source: 'KUNDB',
+    target: 'KUNDB',
+    owner: 'admin',
+    taskVersion: '2.0',
+    taskStatus: '运行中',
+    latency: '0.00s',
+    dataCheckDifference24h: '是',
+    latestEventTime: '2024-01-01 08:10:00',
+    unhandledExceptions: '37439',
+    ddl: '0'
+  },
+  {
+    businessId:'4',
+    taskName: 'test start slowly',
+    startTime: '2024-01-01 08:00:00',
+    source: 'KUNDB',
+    target: 'KUNDB',
+    owner: 'admin',
+    taskVersion: '2.0',
+    taskStatus: '运行中',
+    latency: '0.00s',
+    dataCheckDifference24h: '是',
+    latestEventTime: '2024-01-01 08:10:00',
+    unhandledExceptions: '37439',
+    ddl: '0'
+  },
+  {
+    businessId:'5',
+    taskName: 'gd',
+    startTime: '2024-01-01 08:00:00',
+    source: 'KUNDB',
+    target: 'MYSQL',
+    owner: 'admin',
+    taskVersion: '1.0',
+    taskStatus: '运行中',
+    latency: '0.00s',
+    dataCheckDifference24h: '是',
+    latestEventTime: '2024-01-01 08:10:00',
+    unhandledExceptions: '37439',
+    ddl: '0'
+  },
+  {
+    businessId:'6',
+    taskName: 'dffhjg',
+    startTime: '2024-01-01 08:00:00',
+    source: 'KUNDB',
+    target: 'MYSQL',
+    owner: 'admin',
+    taskVersion: '2.0',
+    taskStatus: '运行中',
+    latency: '0.00s',
+    dataCheckDifference24h: '是',
+    latestEventTime: '2024-01-01 08:10:00',
+    unhandledExceptions: '37439',
+    ddl: '0'
+  },
+  {
+    businessId:'7',
+    taskName: 'pc-8712',
+    startTime: '2024-01-01 08:00:00',
+    source: 'KUNDB',
+    target: 'MYSQL',
+    owner: 'admin',
+    taskVersion: '1.0',
+    taskStatus: '运行中',
+    latency: '0.00s',
+    dataCheckDifference24h: '是',
+    latestEventTime: '2024-01-01 08:10:00',
+    unhandledExceptions: '37439',
+    ddl: '0'
+  },
+  {
+    businessId:'8',
+    taskName: '忽略通知',
+    startTime: '2024-01-01 08:00:00',
+    source: 'MYSQL',
+    target: 'MYSQL',
+    owner: 'admin',
+    taskVersion: '2.0',
+    taskStatus: '运行中',
+    latency: '0.00s',
+    dataCheckDifference24h: '是',
+    latestEventTime: '2024-01-01 08:10:00',
+    unhandledExceptions: '37439',
+    ddl: '0'
+  },
+  {
+    businessId:'9',
+    taskName: 'pg2',
+    startTime: '2024-01-01 08:00:00',
+    source: 'POSTGRE_SQL',
+    target: 'MYSQL',
+    owner: 'admin',
+    taskVersion: '1.0',
+    taskStatus: '运行中',
+    latency: '0.00s',
+    dataCheckDifference24h: '是',
+    latestEventTime: '2024-01-01 08:10:00',
+    unhandledExceptions: '37439',
+    ddl: '0'
+  },
+]

src/views/realTimeSync/taskOperationsMaintenance/workAreaTree.vue

+<template>
+  <div class="m-4 mr-0 overflow-hidden bg-white">
+    <BasicTree
+      ref="treeRef"
+      treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
+      :clickRowToExpand="false"
+      :defaultExpandAll="true"
+      :treeData="treeData"
+      :fieldNames="{ key: 'businessId', title: 'treeName' }"
+      @select="handleSelect"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import {h, nextTick, onMounted, ref, unref} from 'vue';
+import {BasicTree, ContextMenuItem, TreeActionType, TreeItem} from '@/components/Tree';
+import {Nullable} from "packages/types/src/index";
+import { TreeData } from "./maintenanceData";
+import {EventDataNode} from "ant-design-vue/es/vc-tree/interface";
+import {PlusOutlined,EllipsisOutlined} from "@ant-design/icons-vue";
+import {useMessage} from "@/hooks/web/useMessage";
+import {Modal} from "ant-design-vue";
+import {useModal} from "@/components/Modal";
+import {router} from "@/router";
+
+defineOptions({ name: 'DeptTree' });
+
+const emit = defineEmits(['select']);
+const treeData = ref<TreeItem[]>([]);
+const treeRef = ref<Nullable<TreeActionType>>(null);
+const { createMessage, createConfirm } = useMessage();
+const [registerMoveModal, { openModal: openMoveModal }] = useModal();
+const [registerCopyModal, { openModal: openCopyModal }] = useModal();
+const [registerCreatePublicCodeModal, { openModal: openCreatePublicCodeModal }] = useModal();
+const [registerCreateStandardsTypeModal, { openModal: openCreateStandardsTypeModal }] = useModal();
+function getTree() {
+  const tree = unref(treeRef);
+  if (!tree) {
+    throw new Error('tree is null!');
+  }
+  return tree;
+}
+
+async function fetch() {
+  const data = TreeData
+  treeData.value = handleTree(data, 'businessId',undefined,undefined,undefined)
+  await nextTick(() => {
+    getTree().expandAll(true)
+  })
+}
+
+/** 转成树 */
+function handleTree(data, id, parentId, children, rootId) {
+  id = id || 'id'
+  parentId = parentId || 'parentId'
+  children = children || 'children'
+  rootId = rootId || Math.min.apply(Math, data.map(item => { return item[parentId] })) || 0
+  // 对源数据深度克隆
+  const cloneData = JSON.parse(JSON.stringify(data))
+  // 循环所有项
+  const treeData = cloneData.filter(father => {
+    const branchArr = cloneData.filter(child => {
+      // 返回每一项的子级数组
+      return father[id] === child[parentId]
+    })
+    branchArr.length > 0 ? father.children = branchArr : ''
+    // 返回第一层
+    return father[parentId] === rootId
+  })
+  return treeData !== '' ? treeData : data
+}
+
+/**选中的数据*/
+function handleSelect(keys) {
+  emit('select', keys[0]);
+}
+
+onMounted(() => {
+  fetch();
+});
+
+// 树的操作列表
+const actionList = [
+  {
+    //全部操作按钮
+    render: (node) => {
+      return h(EllipsisOutlined, {
+        class: 'ml-2',
+        onClick: () => {
+          getRightMenuList(node)
+        },
+      });
+    },
+  },
+];
+
+
+function getRightMenuList(node: EventDataNode): Promise<ContextMenuItem[]> {
+  const menu = [
+    {
+      label: '查看详情',
+      handler: () => {
+        detailButton(node)
+      },
+      icon: 'ant-design:file-search-outlined',
+    },
+    {
+      label: '编辑',
+      handler: () => {
+        editButton(node)
+      },
+      icon: 'ant-design:edit-outlined',
+    },
+    {
+      label: '标准分类信息',
+      handler: () => {
+        standardsTypeButton(node)
+      },
+      icon: 'ant-design:file-text-twotone',
+    },
+    {
+      label: '新建标准分类',
+      handler: () => {
+        createStandardsTypeButton(node)
+      },
+      icon: 'ant-design:file-add-outlined',
+    },
+    {
+      label: '新建公共代码',
+      handler: () => {
+        createPublicCodeButton(node)
+      },
+      icon: 'ant-design:file-add-outlined',
+    },
+    {
+      label: '复制到',
+      handler: () => {
+        copyButton()
+      },
+      icon: 'ant-design:snippets-twotone',
+    },
+    {
+      label: '删除',
+      handler: () => {
+        deleteButton(node)
+      },
+      icon: 'ant-design:rest-outlined',
+    },
+    {
+      label: '移动',
+      handler: () => {
+        MoveButton()
+      },
+      icon: 'ant-design:folder-open-outlined',
+    },
+  ];
+  return new Promise((resolve) => {
+    resolve(menu);
+  });
+}
+
+/**查看详情*/
+function detailButton(record) {
+  router.push({
+    path: '/dataStandards/publicCode/detailPublicCode',
+    query: {
+      businessId:record.businessId,
+    },
+  });
+}
+
+/**移动*/
+function MoveButton() {
+  openMoveModal(true, {
+
+  });
+}
+
+/**新建标准分类*/
+function createStandardsTypeButton(record) {
+  openCreateStandardsTypeModal(true, {
+    record
+  });
+}
+
+/**新建公共代码*/
+function createPublicCodeButton(record) {
+  openCreatePublicCodeModal(true, {
+    record
+  });
+}
+
+/**复制到 按钮*/
+function copyButton() {
+  openCopyModal(true, {
+
+  });
+}
+
+/**删除 按钮*/
+function deleteButton(record: Recordable) {
+  createConfirm({
+    iconType: 'warning',
+    title: '确认删除',
+    content: '确认批量删除选中数据吗？',
+    onOk() {
+      createMessage.success('删除成功!');
+    },
+  });
+}
+
+/** 修改 按钮*/
+function handleUpdateButton(record: Recordable) {
+
+}
+
+/**编辑标准*/
+function editButton(record) {
+  router.push({
+    path: '/dataStandards/publicCode/editDetailStandard',
+    query: {
+      businessId:record.businessId,
+    },
+  });
+}
+
+/**标准分类信息*/
+function standardsTypeButton(record: Recordable) {
+  createMessage.success('标准分类信息')
+}
+/** 成功回调*/
+function handleSuccess() {
+
+}
+</script>