fix: 合并冲突

src/components/DashBoard/baseCard.tsx

@@ -4,23 +4,25 @@ import type { EchartsProps } from './echarts';
 import Echarts from './echarts';
 import Style from './index.less';
 import classNames from 'classnames';
+import { forwardRef } from 'react';
 
 interface BaseCardProps extends HeaderProps, EchartsProps {
   height: number;
   className?: string;
 }
 
-export default (props: BaseCardProps) => {
+export default forwardRef((props: BaseCardProps, ref) => {
   const { height, className, options, ...formProps } = props;
+
   return (
     <div
-      className={classNames(Style['dash-board-echarts'], className)}
+      className={classNames(Style['dash-board'], className)}
       style={{
         height: height || 200,
       }}
     >
-      <Header {...formProps} />
-      <Echarts options={options} />
+      <Header ref={ref} {...formProps} />
+      <Echarts options={options} className={Style['echarts']} />
     </div>
   );
-};
+});

src/components/DashBoard/echarts.tsx

@@ -19,9 +19,11 @@ import { CanvasRenderer } from 'echarts/renderers';
 
 import Style from './index.less';
 import type { EChartsOption } from 'echarts';
+import classNames from 'classnames';
 
 export interface EchartsProps {
   options?: EChartsOption;
+  className?: string;
 }
 
 echarts.use([
@@ -93,7 +95,7 @@ export default (props: EchartsProps) => {
 
   return (
     <div
-      className={Style.content}
+      className={classNames(Style['content'], props.className)}
       ref={(ref) => {
         if (ref) {
           setTimeout(() => {

src/components/DashBoard/header.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import Style from './index.less';
 import { Col, Form, Row } from 'antd';
 import type { TimeType } from './timePicker';
@@ -16,11 +16,16 @@ export interface HeaderProps {
     Children: React.ReactNode;
   };
   initialValues?: any;
+  /**
+   * true 关闭初始化时触发onParamsChange
+   */
+  closeInitialParams?: boolean;
   defaultTime?: TimeType;
 }
 
-export default (props: HeaderProps) => {
+export default forwardRef((props: HeaderProps, ref) => {
   const [form] = Form.useForm();
+  const isCloseInitial = useRef<boolean>(false);
 
   const change = async (data: any) => {
     if (props.onParamsChange) {
@@ -28,6 +33,10 @@ export default (props: HeaderProps) => {
     }
   };
 
+  useImperativeHandle(ref, () => ({
+    getValues: form.getFieldsValue,
+  }));
+
   return (
     <div className={Style.header}>
       <div className={Style.title}>{props.title}</div>
@@ -39,7 +48,11 @@ export default (props: HeaderProps) => {
           preserve={false}
           initialValues={props.initialValues}
           onValuesChange={(_, allValue) => {
-            change(allValue);
+            if (props.closeInitialParams && !isCloseInitial.current) {
+              isCloseInitial.current = true;
+            } else {
+              change(allValue);
+            }
           }}
         >
           <Row style={{ width: '100%' }}>
@@ -60,4 +73,4 @@ export default (props: HeaderProps) => {
       </div>
     </div>
   );
-};
+});

src/components/DashBoard/index.less

@@ -1,4 +1,4 @@
-.dash-board-echarts {
+.dash-board {
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -21,8 +21,12 @@
 }
 
 .content {
-  flex-grow: 1;
   width: 100%;
+  height: 100%;
+}
+
+.echarts {
+  flex-grow: 1;
   height: 0;
   margin-top: 12px;
 }

src/components/DashBoard/timePicker.tsx

@@ -12,9 +12,11 @@ export enum TimeKey {
 
 export type TimeType = keyof typeof TimeKey;
 
+type ValueType = { start: number; end: number; type: TimeType };
+
 interface ExtraTimePickerProps extends Omit<DatePickerProps, 'onChange' | 'value'> {
-  onChange?: (value: number[]) => void;
-  value?: number[];
+  onChange?: (data: ValueType) => void;
+  value?: ValueType;
   defaultTime?: TimeType;
 }
 
@@ -23,7 +25,7 @@ export const getTimeByType = (type: TimeType) => {
     case TimeKey.week:
       return moment().subtract(6, 'days').valueOf();
     case TimeKey.month:
-      return moment().startOf('month').valueOf();
+      return moment().subtract(29, 'days').valueOf();
     case TimeKey.year:
       return moment().subtract(365, 'days').valueOf();
     default:
@@ -36,9 +38,13 @@ export default (props: ExtraTimePickerProps) => {
 
   const { value, onChange, ...extraProps } = props;
 
-  const change = (startTime: number, endTime: number) => {
+  const change = (startTime: number, endTime: number, type: TimeType) => {
     if (onChange) {
-      onChange([startTime, endTime]);
+      onChange({
+        start: startTime,
+        end: endTime,
+        type,
+      });
     }
   };
 
@@ -46,7 +52,7 @@ export default (props: ExtraTimePickerProps) => {
     const endTime = moment(new Date()).valueOf();
     const startTime: number = getTimeByType(type);
     setRadioValue(type);
-    change(startTime, endTime);
+    change(startTime, endTime, type);
   };
 
   useEffect(() => {
@@ -61,14 +67,14 @@ export default (props: ExtraTimePickerProps) => {
           {...extraProps}
           value={
             value && [
-              moment(value && value[0] ? value[0] : new Date()),
-              moment(value && value[1] ? value[1] : new Date()),
+              moment(value && value.start ? value.start : new Date()),
+              moment(value && value.end ? value.end : new Date()),
             ]
           }
           onChange={(rangeValue) => {
             setRadioValue(undefined);
             if (rangeValue && rangeValue.length === 2) {
-              change(rangeValue[0]!.valueOf(), rangeValue[1]!.valueOf());
+              change(rangeValue[0]!.valueOf(), rangeValue[1]!.valueOf(), radioValue!);
             }
           }}
           renderExtraFooter={() => (

src/pages/link/DashBoard/index.tsx

@@ -1,68 +1,153 @@
 import { PageContainer } from '@ant-design/pro-layout';
 import DashBoard from '@/components/DashBoard';
-import { Radio } from 'antd';
-import { useState } from 'react';
+import { Radio, Select } from 'antd';
+import { useEffect, useRef, useState } from 'react';
 import type { EChartsOption } from 'echarts';
+import { useRequest } from 'umi';
+import Service from './service';
+
+type RefType = {
+  getValues: Function;
+};
+
+const service = new Service('dashboard');
 
 export default () => {
-  const [options, setOptions] = useState<EChartsOption>({});
+  const [networkOptions] = useState<EChartsOption | undefined>(undefined);
+  const [cpuOptions] = useState<EChartsOption | undefined>(undefined);
+  const [jvmOptions] = useState<EChartsOption | undefined>(undefined);
+  const [serverId, setServerId] = useState(undefined);
+
+  const NETWORKRef = useRef<RefType>(); // 网络流量
+  const CPURef = useRef<RefType>(); // CPU使用率
+  const JVMRef = useRef<RefType>(); // JVM内存使用率
+
+  const { data: serverNode } = useRequest(service.serverNode, {
+    formatResult: (res) => res.result.map((item: any) => ({ label: item.name, value: item.id })),
+  });
+
+  const getNetworkEcharts = () => {
+    const data = NETWORKRef.current!.getValues();
+    if (data) {
+      service.queryMulti([
+        {
+          dashboard: 'systemMonitor',
+          object: 'network',
+          measurement: 'traffic',
+          dimension: 'agg',
+          group: 'network',
+          params: {
+            type: data.type,
+            from: data.time.start,
+            to: data.time.end,
+          },
+        },
+      ]);
+    }
+  };
 
-  const getEcharts = async (data: any) => {
-    console.log(data);
-    setOptions({
-      xAxis: {
-        type: 'category',
-        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-      },
-      yAxis: {
-        type: 'value',
-      },
-      series: [
+  const getCPUEcharts = () => {
+    const data = CPURef.current!.getValues();
+    if (data) {
+      service.queryMulti([
         {
-          data: [150, 230, 224, 218, 135, 147, 260],
-          type: 'line',
+          dashboard: 'systemMonitor',
+          object: 'stats',
+          measurement: 'traffic',
+          dimension: 'agg',
+          group: 'cpu',
+          params: {
+            from: data.time.start,
+            to: data.time.end,
+          },
         },
-      ],
-    });
+      ]);
+    }
   };
 
+  const getJVMEcharts = () => {
+    const data = CPURef.current!.getValues();
+    if (data) {
+      service.queryMulti([
+        {
+          dashboard: 'systemMonitor',
+          object: 'stats',
+          measurement: 'traffic',
+          dimension: 'agg',
+          group: 'jvm',
+          params: {
+            from: data.time.start,
+            to: data.time.end,
+          },
+        },
+      ]);
+    }
+  };
+
+  useEffect(() => {
+    if (serverId) {
+      getNetworkEcharts();
+    }
+  }, [serverId]);
+
+  useEffect(() => {
+    if (serverNode && serverNode.length) {
+      setServerId(serverNode[0].value);
+    }
+  }, [serverNode]);
+
   return (
     <PageContainer>
       <div>
+        {serverNode && serverNode.length ? (
+          <Select
+            value={serverId}
+            options={serverNode}
+            onChange={(value) => {
+              setServerId(value);
+            }}
+            style={{ width: 300 }}
+          />
+        ) : null}
         <div>
           <DashBoard
             title={'网络流量'}
-            initialValues={{ test: false }}
+            ref={NETWORKRef}
+            initialValues={{ type: 'bytesSent' }}
             height={400}
+            closeInitialParams={true}
             extraParams={{
-              key: 'test',
+              key: 'type',
               Children: (
                 <Radio.Group buttonStyle={'solid'}>
-                  <Radio.Button value={true}>上行</Radio.Button>
-                  <Radio.Button value={false}>下行</Radio.Button>
+                  <Radio.Button value={'bytesRead'}>上行</Radio.Button>
+                  <Radio.Button value={'bytesSent'}>下行</Radio.Button>
                 </Radio.Group>
               ),
             }}
             defaultTime={'week'}
-            options={options}
-            onParamsChange={getEcharts}
+            options={networkOptions}
+            onParamsChange={getNetworkEcharts}
           />
         </div>
         <div style={{ display: 'flex' }}>
           <DashBoard
             title={'CPU使用率趋势'}
-            initialValues={{ test: false }}
+            closeInitialParams={true}
+            ref={CPURef}
             height={400}
             defaultTime={'week'}
-            options={options}
-            onParamsChange={getEcharts}
+            options={cpuOptions}
+            onParamsChange={getCPUEcharts}
           />
           <DashBoard
             title={'JVM内存使用率趋势'}
+            closeInitialParams={true}
+            ref={JVMRef}
             height={400}
             defaultTime={'week'}
-            options={options}
-            onParamsChange={getEcharts}
+            options={jvmOptions}
+            onParamsChange={getJVMEcharts}
           />
         </div>
       </div>

src/pages/link/DashBoard/service.ts

@@ -0,0 +1,16 @@
+import BaseService from '@/utils/BaseService';
+import SystemConst from '@/utils/const';
+import { request } from 'umi';
+
+class Service extends BaseService<any> {
+  serverNode = () =>
+    request(`/${SystemConst.API_BASE}/network/resources/clusters`, { method: 'GET' });
+
+  /**
+   * echarts数据
+   */
+  queryMulti = (data: any) =>
+    request(`/${SystemConst.API_BASE}/dashboard/_multi`, { method: 'POST', data });
+}
+
+export default Service;

src/pages/rule-engine/Dashboard/index.tsx

@@ -0,0 +1,37 @@
+import { PageContainer } from '@ant-design/pro-layout';
+// import {EChartsOption} from "echarts";
+// import {useState} from "react";
+
+const Dashboard = () => {
+  // const [options, setOptions] = useState<EChartsOption>({});
+  //
+  // const getEcharts = async (data: any) => {
+  //
+  // };
+  return (
+    <PageContainer>
+      123
+      {/*<StatisticCard*/}
+      {/*  title="今日告警"*/}
+      {/*  statistic={{*/}
+      {/*    value: 75,*/}
+      {/*    suffix: "次"*/}
+      {/*  }}*/}
+      {/*  chart={*/}
+      {/*    <img*/}
+      {/*      src="https://gw.alipayobjects.com/zos/alicdn/PmKfn4qvD/mubiaowancheng-lan.svg"*/}
+      {/*      width="100%"*/}
+      {/*      alt="进度条"*/}
+      {/*    />*/}
+      {/*  }*/}
+      {/*  footer={*/}
+      {/*    <>*/}
+      {/*      <Statistic value={15.1} title="当月告警" suffix="次" layout="horizontal"/>*/}
+      {/*    </>*/}
+      {/*  }*/}
+      {/*  style={{width: 250}}*/}
+      {/*/>*/}
+    </PageContainer>
+  );
+};
+export default Dashboard;

src/pages/system/DataSource/Management/DataRow.tsx

@@ -1,14 +1,12 @@
-import { Form, FormGrid, FormItem, Input, Password, Select } from '@formily/antd';
+import { Form, FormGrid, FormItem, Input, Password, NumberPicker, Radio } from '@formily/antd';
 import { createForm } from '@formily/core';
 import type { ISchema } from '@formily/react';
 import { createSchemaField } from '@formily/react';
-import { message, Modal } from 'antd';
-import { Store } from 'jetlinks-store';
-import { service } from '@/pages/system/DataSource';
+import { Modal } from 'antd';
 
 interface Props {
   close: () => void;
-  reload: () => void;
+  reload: (data: any) => void;
   data: Partial<DataSourceItem>;
 }
 
@@ -23,8 +21,9 @@ const DataRow = (props: Props) => {
       FormItem,
       Input,
       Password,
-      Select,
       FormGrid,
+      NumberPicker,
+      Radio,
     },
   });
 
@@ -41,7 +40,7 @@ const DataRow = (props: Props) => {
         },
         properties: {
           name: {
-            title: '名称',
+            title: '列名',
             type: 'string',
             'x-decorator': 'FormItem',
             'x-component': 'Input',
@@ -64,251 +63,107 @@ const DataRow = (props: Props) => {
             ],
             required: true,
           },
-          typeId: {
+          type: {
             title: '类型',
             type: 'string',
             'x-decorator': 'FormItem',
-            'x-component': 'Select',
+            'x-component': 'Input',
             'x-decorator-props': {
               gridSpan: 1,
             },
             'x-component-props': {
-              placeholder: '请选择类型',
+              placeholder: '请输入类型',
             },
             name: 'typeId',
             'x-validator': [
               {
                 required: true,
-                message: '请选择类型',
+                message: '请输入类型',
               },
-            ],
-            required: true,
-            enum: Store.get('datasource-type'),
-          },
-          'shareConfig.url': {
-            title: 'URL',
-            type: 'string',
-            'x-decorator': 'FormItem',
-            'x-component': 'Input',
-            'x-visible': false,
-            'x-decorator-props': {
-              gridSpan: 2,
-            },
-            'x-component-props': {
-              placeholder: '请输入r2bdc或者jdbc连接地址，示例：r2dbc:mysql://127.0.0.1:3306/test',
-            },
-            'x-validator': [
               {
                 max: 64,
                 message: '最多可输入64个字符',
               },
-              {
-                required: true,
-                message: '请输入URL',
-              },
             ],
             required: true,
-            'x-reactions': {
-              dependencies: ['typeId'],
-              fulfill: {
-                state: {
-                  visible: '{{$deps[0]==="rdb"}}',
-                },
-              },
-            },
           },
-          'shareConfig.adminUrl': {
-            title: '管理地址',
+          length: {
+            title: '长度',
             type: 'string',
             'x-decorator': 'FormItem',
-            'x-component': 'Input',
-            'x-visible': false,
+            'x-component': 'NumberPicker',
             'x-decorator-props': {
-              gridSpan: 2,
+              gridSpan: 1,
             },
             'x-component-props': {
-              placeholder: '请输入管理地址，示例：http://localhost:15672',
+              placeholder: '请输入长度',
             },
             'x-validator': [
               {
-                max: 64,
-                message: '最多可输入64个字符',
-              },
-              {
                 required: true,
-                message: '请输入管理地址',
-              },
-            ],
-            required: true,
-            'x-reactions': {
-              dependencies: ['typeId'],
-              fulfill: {
-                state: {
-                  visible: '{{$deps[0]==="rabbitmq"}}',
-                },
-              },
-            },
-          },
-          'shareConfig.addresses': {
-            title: '链接地址',
-            type: 'string',
-            'x-decorator': 'FormItem',
-            'x-component': 'Input',
-            'x-visible': false,
-            'x-decorator-props': {
-              gridSpan: 2,
-            },
-            'x-component-props': {
-              placeholder: '请输入连接地址，示例：localhost:5672',
-            },
-            'x-validator': [
-              {
-                max: 64,
-                message: '最多可输入64个字符',
+                message: '请输入长度',
               },
               {
-                required: true,
-                message: '请输入链接地址',
+                maximum: 99999,
+                minimum: 1,
               },
             ],
             required: true,
-            'x-reactions': {
-              dependencies: ['typeId'],
-              fulfill: {
-                state: {
-                  visible: '{{$deps[0]==="rabbitmq"}}',
-                },
-              },
-            },
           },
-          'shareConfig.username': {
-            title: '用户名',
+          scale: {
+            title: '精度',
             type: 'string',
             'x-decorator': 'FormItem',
-            'x-component': 'Input',
-            'x-visible': false,
+            'x-component': 'NumberPicker',
             'x-decorator-props': {
               gridSpan: 1,
             },
             'x-component-props': {
-              placeholder: '请输入用户名',
+              placeholder: '请输入精度',
             },
             'x-validator': [
               {
-                max: 64,
-                message: '最多可输入64个字符',
+                required: true,
+                message: '请输入精度',
               },
               {
-                required: true,
-                message: '请输入用户名',
+                maximum: 99999,
+                minimum: 1,
               },
             ],
             required: true,
-            'x-reactions': {
-              dependencies: ['typeId'],
-              fulfill: {
-                state: {
-                  visible: '{{["rdb","rabbitmq"].includes($deps[0])}}',
-                },
-              },
-            },
           },
-          'shareConfig.password': {
-            title: '密码',
-            type: 'string',
+          notnull: {
+            title: '不能为空',
+            type: 'boolean',
+            default: false,
             'x-decorator': 'FormItem',
-            'x-component': 'Password',
-            'x-visible': false,
-            'x-decorator-props': {
-              gridSpan: 1,
-            },
+            'x-component': 'Radio.Group',
             'x-component-props': {
-              placeholder: '请输入密码',
-            },
-            'x-validator': [
-              {
-                max: 64,
-                message: '最多可输入64个字符',
-              },
-              {
-                required: true,
-                message: '请输入密码',
-              },
-            ],
-            required: true,
-            'x-reactions': {
-              dependencies: ['typeId'],
-              fulfill: {
-                state: {
-                  visible: '{{["rdb","rabbitmq"].includes($deps[0])}}',
-                },
-              },
+              placeholder: '请选择是否不能为空',
+              optionType: 'button',
+              buttonStyle: 'solid',
             },
-          },
-          'shareConfig.virtualHost': {
-            title: '虚拟域',
-            type: 'string',
-            'x-decorator': 'FormItem',
-            'x-component': 'Input',
-            'x-visible': false,
             'x-decorator-props': {
               gridSpan: 2,
             },
-            'x-component-props': {
-              placeholder: '请输入虚拟域',
-            },
             'x-validator': [
               {
-                max: 64,
-                message: '最多可输入64个字符',
-              },
-              {
                 required: true,
-                message: '请输入虚拟域',
+                message: '请选择是否不能为空',
               },
             ],
             required: true,
-            default: '/',
-            'x-reactions': {
-              dependencies: ['typeId'],
-              fulfill: {
-                state: {
-                  visible: '{{$deps[0]==="rabbitmq"}}',
-                },
-              },
-            },
-          },
-          'shareConfig.schema': {
-            title: 'schema',
-            type: 'string',
-            'x-decorator': 'FormItem',
-            'x-component': 'Input',
-            'x-visible': false,
-            'x-decorator-props': {
-              gridSpan: 2,
-            },
-            'x-component-props': {
-              placeholder: '请输入schema',
-            },
-            'x-validator': [
+            enum: [
               {
-                max: 64,
-                message: '最多可输入64个字符',
+                label: '是',
+                value: true,
               },
               {
-                required: true,
-                message: '请输入schema',
+                label: '否',
+                value: false,
               },
             ],
-            required: true,
-            'x-reactions': {
-              dependencies: ['typeId'],
-              fulfill: {
-                state: {
-                  visible: '{{$deps[0]==="rdb"}}',
-                },
-              },
-            },
           },
           description: {
             title: '说明',
@@ -331,17 +186,13 @@ const DataRow = (props: Props) => {
 
   const handleSave = async () => {
     const data: any = await form.submit();
-    const response: any = props.data?.id ? await service.update(data) : await service.save(data);
-    if (response.status === 200) {
-      message.success('保存成功');
-      props.reload();
-    }
+    props.reload(data);
   };
 
   return (
     <Modal
       width={'55vw'}
-      title={`${props.data?.id ? '编辑' : '新增'}数据源`}
+      title={`${props.data?.id ? '编辑' : '新增'}列`}
       visible
       onCancel={() => {
         props.close();

src/pages/system/DataSource/Management/EditTable.tsx

@@ -0,0 +1,267 @@
+import { FormItem, Input, ArrayTable, Editable, Form, NumberPicker, Radio } from '@formily/antd';
+import { createForm } from '@formily/core';
+import { createSchemaField } from '@formily/react';
+import { Button } from 'antd';
+import { useEffect } from 'react';
+import RemoveData from './RemoveData';
+
+interface Props {
+  onChange: (data: any) => void;
+  data: Partial<DataSourceItem>[];
+  table: {
+    id: string;
+    table: string;
+  };
+}
+
+const EditTable = (props: Props) => {
+  const SchemaField = createSchemaField({
+    components: {
+      FormItem,
+      Editable,
+      Input,
+      ArrayTable,
+      NumberPicker,
+      Radio,
+      RemoveData,
+    },
+  });
+
+  const form = createForm({
+    initialValues: {
+      array: props.data,
+    },
+  });
+
+  const schema = {
+    type: 'object',
+    properties: {
+      array: {
+        type: 'array',
+        'x-decorator': 'FormItem',
+        'x-component': 'ArrayTable',
+        'x-component-props': {
+          pagination: { pageSize: 10 },
+          scroll: { x: '100%' },
+        },
+        items: {
+          type: 'object',
+          properties: {
+            column1: {
+              type: 'void',
+              'x-component': 'ArrayTable.Column',
+              'x-component-props': { title: '列名' },
+              properties: {
+                name: {
+                  type: 'string',
+                  'x-decorator': 'FormItem',
+                  'x-component': 'Input',
+                  'x-component-props': {
+                    placeholder: '请输入名称',
+                  },
+                  name: 'name',
+                  'x-validator': [
+                    {
+                      max: 64,
+                      message: '最多可输入64个字符',
+                    },
+                    {
+                      required: true,
+                      message: '请输入名称',
+                    },
+                  ],
+                  required: true,
+                },
+              },
+            },
+            column2: {
+              type: 'void',
+              'x-component': 'ArrayTable.Column',
+              'x-component-props': { title: '类型' },
+              properties: {
+                type: {
+                  type: 'string',
+                  'x-decorator': 'FormItem',
+                  'x-component': 'Input',
+                  'x-component-props': {
+                    placeholder: '请输入类型',
+                  },
+                  name: 'typeId',
+                  'x-validator': [
+                    {
+                      required: true,
+                      message: '请输入类型',
+                    },
+                    {
+                      max: 64,
+                      message: '最多可输入64个字符',
+                    },
+                  ],
+                  required: true,
+                },
+              },
+            },
+            column3: {
+              type: 'void',
+              'x-component': 'ArrayTable.Column',
+              'x-component-props': { title: '长度' },
+              properties: {
+                length: {
+                  type: 'string',
+                  'x-decorator': 'FormItem',
+                  'x-component': 'NumberPicker',
+                  'x-component-props': {
+                    placeholder: '请输入长度',
+                  },
+                  'x-validator': [
+                    {
+                      required: true,
+                      message: '请输入长度',
+                    },
+                    {
+                      maximum: 99999,
+                      minimum: 1,
+                    },
+                  ],
+                  required: true,
+                },
+              },
+            },
+            column4: {
+              type: 'void',
+              'x-component': 'ArrayTable.Column',
+              'x-component-props': { title: '精度' },
+              properties: {
+                scale: {
+                  type: 'string',
+                  'x-decorator': 'FormItem',
+                  'x-component': 'NumberPicker',
+                  'x-component-props': {
+                    placeholder: '请输入精度',
+                  },
+                  'x-validator': [
+                    {
+                      required: true,
+                      message: '请输入精度',
+                    },
+                    {
+                      maximum: 99999,
+                      minimum: 0,
+                    },
+                  ],
+                  required: true,
+                },
+              },
+            },
+            column5: {
+              type: 'void',
+              'x-component': 'ArrayTable.Column',
+              'x-component-props': { width: 120, title: '不能为空' },
+              properties: {
+                notnull: {
+                  type: 'boolean',
+                  default: false,
+                  'x-decorator': 'FormItem',
+                  'x-component': 'Radio.Group',
+                  'x-component-props': {
+                    placeholder: '请选择是否不能为空',
+                    optionType: 'button',
+                    buttonStyle: 'solid',
+                  },
+                  'x-validator': [
+                    {
+                      required: true,
+                      message: '请选择是否不能为空',
+                    },
+                  ],
+                  required: true,
+                  enum: [
+                    {
+                      label: '是',
+                      value: true,
+                    },
+                    {
+                      label: '否',
+                      value: false,
+                    },
+                  ],
+                },
+              },
+            },
+            column6: {
+              type: 'void',
+              'x-component': 'ArrayTable.Column',
+              'x-component-props': { title: '说明' },
+              properties: {
+                description: {
+                  'x-component': 'Input',
+                  'x-decorator': 'FormItem',
+                  'x-component-props': {
+                    placeholder: '请输入说明',
+                  },
+                },
+              },
+            },
+            column7: {
+              type: 'void',
+              'x-component': 'ArrayTable.Column',
+              'x-component-props': {
+                title: '操作',
+                dataIndex: 'operations',
+                width: 50,
+              },
+              properties: {
+                item: {
+                  type: 'void',
+                  'x-component': 'FormItem',
+                  properties: {
+                    remove: {
+                      type: 'number',
+                      'x-component': 'RemoveData',
+                      'x-component-props': {
+                        type: props.table,
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+        properties: {
+          add: {
+            type: 'void',
+            'x-component': 'ArrayTable.Addition',
+            title: '新增行',
+          },
+        },
+      },
+    },
+  };
+
+  useEffect(() => {
+    form.setValues({ array: props?.data || [] });
+  }, [props.data]);
+
+  return (
+    <div>
+      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+        <Button
+          type="primary"
+          style={{ marginBottom: 20 }}
+          onClick={async () => {
+            const data: any = await form.submit();
+            props.onChange(data);
+          }}
+        >
+          保存
+        </Button>
+      </div>
+      <Form form={form}>
+        <SchemaField schema={schema} />
+      </Form>
+    </div>
+  );
+};
+
+export default EditTable;

src/pages/system/DataSource/Management/RemoveData.tsx

@@ -0,0 +1,51 @@
+import { DeleteOutlined } from '@ant-design/icons';
+import { ArrayItems } from '@formily/antd';
+import { Popconfirm } from 'antd';
+import { service } from '@/pages/system/DataSource';
+import _ from 'lodash';
+import { useField } from '@formily/react';
+
+interface Props {
+  type: any;
+}
+
+const RemoveData = (props: Props) => {
+  const { type } = props;
+  const row = ArrayItems.useRecord!();
+
+  const index = ArrayItems.useIndex!();
+  const self = useField();
+  const array = ArrayItems.useArray!();
+  if (!array) return null;
+  if (array.field?.pattern !== 'editable') return null;
+
+  return (
+    <div>
+      <Popconfirm
+        title={'确认删除'}
+        onConfirm={() => {
+          if (self?.disabled) return;
+          service.rdbTables(type.id, type.table).then((resp) => {
+            if (resp.status === 200) {
+              if ([..._.map(resp.result.columns, 'name')].includes(row?.name)) {
+                service.delRdbTablesColumn(type.id, type.table, [row?.name]).then((response) => {
+                  if (response.status === 200) {
+                    array.field?.remove?.(index);
+                    array.props?.onRemove?.(index);
+                  }
+                });
+              } else {
+                array.field?.remove?.(index);
+                array.props?.onRemove?.(index);
+              }
+            }
+          });
+        }}
+      >
+        <DeleteOutlined />
+      </Popconfirm>
+    </div>
+  );
+};
+
+export default RemoveData;

src/pages/system/DataSource/Management/index copy.tsx

@@ -0,0 +1,292 @@
+import { PageContainer } from '@ant-design/pro-layout';
+import { Card, Input, message, Popconfirm, Space, Tooltip, Tree } from 'antd';
+import { useEffect, useRef, useState } from 'react';
+import { service } from '@/pages/system/DataSource';
+import { useIntl, useLocation } from 'umi';
+import type { ActionType, ProColumns } from '@jetlinks/pro-table';
+import PermissionButton from '@/components/PermissionButton';
+import { DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons';
+import usePermissions from '@/hooks/permission';
+import SearchComponent from '@/components/SearchComponent';
+import ProTable from '@jetlinks/pro-table';
+import DataTable from './DataTable';
+import styles from './index.less';
+import DataRow from './DataRow';
+
+const Management = () => {
+  const location = useLocation<{ id: string }>();
+  const id = (location as any).query?.id;
+  const intl = useIntl();
+  const actionRef = useRef<ActionType>();
+  const [param, setParam] = useState({});
+  const { permission: userPermission } = usePermissions('system/User');
+
+  const [rdbList, setRdbList] = useState<any[]>([]);
+  const [defaultSelectedKeys, setDefaultSelectedKeys] = useState<any[]>([]);
+  const [visible, setVisible] = useState<boolean>(false);
+  const [current, setCurrent] = useState<any>({});
+  const [rowVisible, setRowVisible] = useState<boolean>(false);
+  const [rowCurrent, setRowCurrent] = useState<any>({});
+
+  useEffect(() => {
+    service.rdbTree(id).then((resp) => {
+      if (resp.status === 200) {
+        setRdbList(resp.result);
+        setDefaultSelectedKeys([resp.result[0]?.name]);
+      }
+    });
+  }, []);
+
+  useEffect(() => {
+    actionRef.current?.reload();
+  }, [defaultSelectedKeys]);
+
+  const columns: ProColumns<DataSourceType>[] = [
+    {
+      title: '列名',
+      dataIndex: 'name',
+      ellipsis: true,
+    },
+    {
+      title: '类型',
+      dataIndex: 'type',
+      ellipsis: true,
+    },
+    {
+      title: '长度',
+      dataIndex: 'length',
+      ellipsis: true,
+    },
+    {
+      title: '精度',
+      dataIndex: 'scale',
+      ellipsis: true,
+    },
+    {
+      title: '不能为空',
+      dataIndex: 'notnull',
+      ellipsis: true,
+      render: (text, record) => {
+        console.log(record.notnull);
+        return <span>{text ? '是' : '否'}</span>;
+      },
+      valueType: 'select',
+      valueEnum: {
+        true: {
+          text: '是',
+          status: true,
+        },
+        false: {
+          text: '否',
+          status: false,
+        },
+      },
+    },
+    {
+      dataIndex: 'description',
+      title: '说明',
+      ellipsis: true,
+    },
+    {
+      title: intl.formatMessage({
+        id: 'pages.data.option',
+        defaultMessage: '操作',
+      }),
+      valueType: 'option',
+      render: (_, record) => [
+        <a key="edit">
+          <EditOutlined
+            onClick={() => {
+              setRowCurrent(record);
+              setRowVisible(true);
+            }}
+          />
+        </a>,
+        <PermissionButton
+          type="link"
+          key="delete"
+          style={{ padding: 0 }}
+          isPermission={userPermission.delete}
+          tooltip={{ title: '删除' }}
+        >
+          <Popconfirm
+            onConfirm={async () => {
+              // await service.remove(record.id);
+              // actionRef.current?.reload();
+            }}
+            title="确认删除?"
+          >
+            <DeleteOutlined />
+          </Popconfirm>
+        </PermissionButton>,
+      ],
+    },
+  ];
+
+  return (
+    <PageContainer>
+      <Card>
+        <div className={styles.datasourceBox}>
+          <div className={styles.left}>
+            <Input.Search
+              placeholder="请输入"
+              onSearch={() => {}}
+              style={{ width: '100%', marginBottom: 20 }}
+            />
+            <div className={styles.tables}>
+              <Tree
+                showLine
+                showIcon
+                defaultExpandAll
+                height={500}
+                selectedKeys={[...defaultSelectedKeys]}
+                onSelect={(selectedKeys) => {
+                  if (!selectedKeys.includes('tables')) {
+                    setDefaultSelectedKeys([...selectedKeys]);
+                  }
+                }}
+              >
+                <Tree.TreeNode
+                  title={() => {
+                    return (
+                      <div style={{ display: 'flex', justifyContent: 'space-between', width: 230 }}>
+                        <div>数据源名称</div>
+                        <div>
+                          <a>
+                            <PlusOutlined
+                              onClick={() => {
+                                setCurrent({});
+                                setVisible(true);
+                              }}
+                            />
+                          </a>
+                        </div>
+                      </div>
+                    );
+                  }}
+                  key={'tables'}
+                >
+                  {rdbList.map((item) => (
+                    <Tree.TreeNode
+                      key={item.name}
+                      title={() => {
+                        return (
+                          <div className={styles.treeTitle}>
+                            <div className={styles.title}>
+                              <span
+                                className={
+                                  defaultSelectedKeys[0] === item?.name ? styles.active : ''
+                                }
+                              >
+                                <Tooltip title={item.name}>{item.name}</Tooltip>
+                              </span>
+                            </div>
+                            <div className={styles.options}>
+                              <Space>
+                                <a>
+                                  <EditOutlined
+                                    onClick={() => {
+                                      setCurrent(item);
+                                      setVisible(true);
+                                    }}
+                                  />
+                                </a>
+                                <a>
+                                  <Popconfirm title="确认删除！" onConfirm={() => {}}>
+                                    <DeleteOutlined />
+                                  </Popconfirm>
+                                </a>
+                              </Space>
+                            </div>
+                          </div>
+                        );
+                      }}
+                    />
+                  ))}
+                </Tree.TreeNode>
+              </Tree>
+            </div>
+          </div>
+          <div className={styles.right}>
+            <SearchComponent<DataSourceType>
+              field={columns}
+              target="datasource-manage"
+              onSearch={(data) => {
+                // 重置分页数据
+                actionRef.current?.reset?.();
+                setParam(data);
+              }}
+            />
+            <ProTable<DataSourceType>
+              actionRef={actionRef}
+              params={param}
+              columns={columns}
+              search={false}
+              rowKey="name"
+              headerTitle={
+                <PermissionButton
+                  onClick={() => {
+                    setRowCurrent({});
+                    setRowVisible(true);
+                  }}
+                  isPermission={userPermission.add}
+                  key="add"
+                  icon={<PlusOutlined />}
+                  type="primary"
+                >
+                  新增列
+                </PermissionButton>
+              }
+              request={async (params) => {
+                if (defaultSelectedKeys.length > 0) {
+                  const response = await service.rdbTables(id, defaultSelectedKeys[0], {
+                    ...params,
+                    sorts: [{ name: 'createTime', order: 'desc' }],
+                  });
+                  return {
+                    result: { data: response.result?.columns || [] },
+                    success: true,
+                    status: 200,
+                  } as any;
+                } else {
+                  return {
+                    result: { data: [] },
+                    success: true,
+                    status: 200,
+                  } as any;
+                }
+              }}
+            />
+          </div>
+        </div>
+      </Card>
+      {visible && (
+        <DataTable
+          data={current}
+          save={(data) => {
+            rdbList.push(data);
+            setRdbList([...rdbList]);
+            message.success('操作成功！');
+            setVisible(false);
+          }}
+          close={() => {
+            setVisible(false);
+          }}
+        />
+      )}
+      {rowVisible && (
+        <DataRow
+          data={rowCurrent}
+          reload={() => {
+            // setRowVisible(false);
+          }}
+          close={() => {
+            setRowVisible(false);
+          }}
+        />
+      )}
+    </PageContainer>
+  );
+};
+
+export default Management;

src/pages/system/DataSource/Management/index.less

@@ -1,20 +1,51 @@
-.tables {
-  :global {
-    .ant-tree-treenode .ant-tree-node-selected {
-      background-color: white;
+.datasourceBox {
+  display: flex;
+  width: 100%;
+  min-height: 500px;
+  overflow: hidden;
+
+  .left {
+    width: 280px;
+    .tables {
+      :global {
+        .ant-tree-treenode .ant-tree-node-selected {
+          background-color: white;
+        }
+      }
+
+      .treeTitle {
+        display: flex;
+        justify-content: space-between;
+        width: 200px;
+
+        .title {
+          width: 150px;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+
+        .options {
+          display: none;
+        }
+      }
+
+      .treeTitle:hover {
+        .options {
+          display: block;
+        }
+      }
+
+      .active {
+        background-color: #c3d3f7;
+      }
     }
   }
-  .treeTitle {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-    .options {
-      display: none;
-    }
-  }
-  .treeTitle:hover {
-    .options {
-      display: block;
-    }
+
+  .right {
+    width: calc(100% - 310px);
+    margin-left: 15px;
+    padding-left: 15px;
+    border-left: 1px solid #f0f0f0;
   }
 }

src/pages/system/DataSource/Management/index.tsx

@@ -1,192 +1,149 @@
 import { PageContainer } from '@ant-design/pro-layout';
-import { Card, Col, Input, message, Popconfirm, Row, Space, Tree } from 'antd';
-import { useEffect, useRef, useState } from 'react';
+import { Card, Input, message, Popconfirm, Space, Tooltip, Tree } from 'antd';
+import { useEffect, useState } from 'react';
 import { service } from '@/pages/system/DataSource';
-import { useIntl, useLocation } from 'umi';
-import type { ActionType, ProColumns } from '@jetlinks/pro-table';
-import PermissionButton from '@/components/PermissionButton';
+import { useLocation } from 'umi';
 import { DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons';
-import usePermissions from '@/hooks/permission';
-import SearchComponent from '@/components/SearchComponent';
-import ProTable from '@jetlinks/pro-table';
+// import usePermissions from '@/hooks/permission';
 import DataTable from './DataTable';
 import styles from './index.less';
+import EditTable from './EditTable';
+import _ from 'lodash';
 
 const Management = () => {
   const location = useLocation<{ id: string }>();
   const id = (location as any).query?.id;
-  const intl = useIntl();
-  const actionRef = useRef<ActionType>();
-  const [param, setParam] = useState({});
-  const { permission: userPermission } = usePermissions('system/User');
 
   const [rdbList, setRdbList] = useState<any[]>([]);
+  const [allList, setAllList] = useState<any[]>([]);
   const [defaultSelectedKeys, setDefaultSelectedKeys] = useState<any[]>([]);
   const [visible, setVisible] = useState<boolean>(false);
   const [current, setCurrent] = useState<any>({});
+  const [model, setModel] = useState<'edit' | 'add' | 'list'>('list');
+  const [tableList, setTableList] = useState<any[]>([]);
+  const [param, setParam] = useState<string | undefined>(undefined);
 
-  useEffect(() => {
+  const handleSearch = () => {
     service.rdbTree(id).then((resp) => {
       if (resp.status === 200) {
-        setRdbList(resp.result);
+        setAllList(resp.result);
         setDefaultSelectedKeys([resp.result[0]?.name]);
       }
     });
+  };
+
+  useEffect(() => {
+    handleSearch();
   }, []);
 
   useEffect(() => {
-    actionRef.current?.reload();
+    if (defaultSelectedKeys.length > 0) {
+      service.rdbTables(id, defaultSelectedKeys[0]).then((resp) => {
+        if (resp.status === 200) {
+          setTableList(resp.result?.columns || []);
+        }
+      });
+    } else {
+      setTableList([]);
+    }
   }, [defaultSelectedKeys]);
 
-  const columns: ProColumns<DataSourceType>[] = [
-    {
-      title: '列名',
-      dataIndex: 'name',
-      ellipsis: true,
-    },
-    {
-      title: '类型',
-      dataIndex: 'type',
-      ellipsis: true,
-    },
-    {
-      title: '长度',
-      dataIndex: 'length',
-      ellipsis: true,
-    },
-    {
-      title: '精度',
-      dataIndex: 'scale',
-      ellipsis: true,
-    },
-    {
-      title: '不能为空',
-      dataIndex: 'notnull',
-      ellipsis: true,
-      render: (text, record) => {
-        console.log(record.notnull);
-        return <span>{text ? '是' : '否'}</span>;
-      },
-      valueType: 'select',
-      valueEnum: {
-        true: {
-          text: '是',
-          status: true,
-        },
-        false: {
-          text: '否',
-          status: false,
-        },
-      },
-    },
-    {
-      dataIndex: 'description',
-      title: '说明',
-      ellipsis: true,
-    },
-    {
-      title: intl.formatMessage({
-        id: 'pages.data.option',
-        defaultMessage: '操作',
-      }),
-      valueType: 'option',
-      render: (_, record) => [
-        <PermissionButton
-          style={{ padding: 0 }}
-          type="link"
-          isPermission={userPermission.update}
-          key="editable"
-          onClick={() => {
-            setCurrent(record);
-            setVisible(true);
-          }}
-          tooltip={{
-            title: intl.formatMessage({
-              id: 'pages.data.option.edit',
-              defaultMessage: '编辑',
-            }),
-          }}
-        >
-          <EditOutlined />
-        </PermissionButton>,
-        <PermissionButton
-          type="link"
-          key="delete"
-          style={{ padding: 0 }}
-          isPermission={userPermission.delete}
-          tooltip={{ title: '删除' }}
-        >
-          <Popconfirm
-            onConfirm={async () => {
-              // await service.remove(record.id);
-              // actionRef.current?.reload();
-            }}
-            title="确认删除?"
-          >
-            <DeleteOutlined />
-          </Popconfirm>
-        </PermissionButton>,
-      ],
-    },
-  ];
+  useEffect(() => {
+    if (!!param) {
+      const list = allList.filter((item) => {
+        return item.name.includes(param);
+      });
+      setRdbList([...list]);
+      if (!_.map(list, 'name').includes(defaultSelectedKeys[0])) {
+        setDefaultSelectedKeys([list[0]?.name]);
+      }
+    } else {
+      setRdbList([...allList]);
+    }
+  }, [allList, param]);
 
   return (
     <PageContainer>
       <Card>
-        <Row gutter={24}>
-          <Col span={6}>
+        <div className={styles.datasourceBox}>
+          <div className={styles.left}>
             <Input.Search
               placeholder="请输入"
-              onSearch={() => {}}
-              style={{ width: '100%', marginBottom: 10 }}
+              onSearch={(val: string) => {
+                setParam(val);
+              }}
+              allowClear
+              style={{ width: '100%', marginBottom: 20 }}
             />
             <div className={styles.tables}>
-              <Tree
-                showLine
-                showIcon
-                defaultExpandAll
-                height={500}
-                selectedKeys={[...defaultSelectedKeys]}
-                onSelect={(selectedKeys) => {
-                  if (!selectedKeys.includes('tables')) {
-                    setDefaultSelectedKeys([...selectedKeys]);
-                  }
-                }}
-              >
+              <Tree showLine showIcon defaultExpandAll height={500}>
                 <Tree.TreeNode
                   title={() => {
                     return (
                       <div style={{ display: 'flex', justifyContent: 'space-between', width: 230 }}>
                         <div>数据源名称</div>
                         <div>
-                          <PlusOutlined
-                            onClick={() => {
-                              setCurrent({});
-                              setVisible(true);
-                            }}
-                          />
+                          <a>
+                            <PlusOutlined
+                              onClick={() => {
+                                setCurrent({});
+                                setModel('add');
+                                setVisible(true);
+                              }}
+                            />
+                          </a>
                         </div>
                       </div>
                     );
                   }}
                   key={'tables'}
                 >
-                  {rdbList.map((item) => (
+                  {rdbList.map((item, index) => (
                     <Tree.TreeNode
                       key={item.name}
                       title={() => {
                         return (
                           <div className={styles.treeTitle}>
-                            <div className={styles.title}>{item.name}</div>
+                            <div
+                              className={styles.title}
+                              onClick={() => {
+                                setDefaultSelectedKeys([item.name]);
+                              }}
+                            >
+                              <span
+                                className={
+                                  defaultSelectedKeys[0] === item?.name ? styles.active : ''
+                                }
+                              >
+                                <Tooltip title={item.name}>{item.name}</Tooltip>
+                              </span>
+                            </div>
                             <div className={styles.options}>
                               <Space>
-                                <EditOutlined
-                                  onClick={() => {
-                                    setCurrent(item);
-                                    setVisible(true);
-                                  }}
-                                />
-                                <DeleteOutlined />
+                                <a>
+                                  <EditOutlined
+                                    onClick={() => {
+                                      setCurrent(item);
+                                      setVisible(true);
+                                      setModel('edit');
+                                    }}
+                                  />
+                                </a>
+                                <a>
+                                  <Popconfirm
+                                    title="确认删除！"
+                                    onConfirm={() => {
+                                      const list = [...rdbList];
+                                      list.splice(index, 1);
+                                      setAllList([...list]);
+                                      if (item.name === defaultSelectedKeys[0]) {
+                                        setDefaultSelectedKeys([list[0]?.name]);
+                                      }
+                                    }}
+                                  >
+                                    <DeleteOutlined />
+                                  </Popconfirm>
+                                </a>
                               </Space>
                             </div>
                           </div>
@@ -197,65 +154,42 @@ const Management = () => {
                 </Tree.TreeNode>
               </Tree>
             </div>
-          </Col>
-          <Col span={18}>
-            <div>
-              <SearchComponent<DataSourceType>
-                field={columns}
-                target="datasource-manage"
-                onSearch={(data) => {
-                  // 重置分页数据
-                  actionRef.current?.reset?.();
-                  setParam(data);
-                }}
-              />
-              <ProTable<DataSourceType>
-                actionRef={actionRef}
-                params={param}
-                columns={columns}
-                search={false}
-                rowKey="name"
-                headerTitle={
-                  <PermissionButton
-                    onClick={() => {}}
-                    isPermission={userPermission.add}
-                    key="add"
-                    icon={<PlusOutlined />}
-                    type="primary"
-                  >
-                    新增列
-                  </PermissionButton>
+          </div>
+          <div className={styles.right}>
+            <EditTable
+              table={{ id, table: defaultSelectedKeys[0] }}
+              data={tableList}
+              onChange={async (data: any) => {
+                const resp = await service.saveRdbTables(id, {
+                  name: defaultSelectedKeys[0],
+                  columns: [...data.array],
+                });
+                if (resp.status === 200) {
+                  message.success('保存成功');
+                  handleSearch();
                 }
-                request={async (params) => {
-                  if (defaultSelectedKeys.length > 0) {
-                    const response = await service.rdbTables(id, defaultSelectedKeys[0], {
-                      ...params,
-                      sorts: [{ name: 'createTime', order: 'desc' }],
-                    });
-                    return {
-                      result: { data: response.result?.columns || [] },
-                      success: true,
-                      status: 200,
-                    } as any;
-                  } else {
-                    return {
-                      result: { data: [] },
-                      success: true,
-                      status: 200,
-                    } as any;
-                  }
-                }}
-              />
-            </div>
-          </Col>
-        </Row>
+              }}
+            />
+          </div>
+        </div>
       </Card>
       {visible && (
         <DataTable
           data={current}
           save={(data) => {
-            rdbList.push(data);
-            setRdbList([...rdbList]);
+            if (model === 'edit') {
+              const list = [...rdbList].map((item) => {
+                return {
+                  name: item?.name === current?.name ? data.name : item.name,
+                };
+              });
+              setAllList(list);
+            } else {
+              const list = [...rdbList];
+              list.unshift(data);
+              setAllList([...list]);
+            }
+            setModel('list');
             message.success('操作成功！');
             setVisible(false);
           }}

src/pages/system/DataSource/index.tsx

@@ -29,7 +29,7 @@ const DataSource = observer(() => {
   const actionRef = useRef<ActionType>();
   const history = useHistory<Record<string, string>>();
 
-  const { permission: userPermission } = usePermissions('system/User');
+  const { permission: userPermission } = usePermissions('system/DataSource');
   const [visible, setVisible] = useState<boolean>(false);
   const [current, setCurrent] = useState<Partial<DataSourceItem>>({});
 

src/pages/system/DataSource/service.ts

@@ -13,11 +13,23 @@ class Service extends BaseService<DataSourceItem> {
       method: 'GET',
     });
 
-  rdbTables = (datasourceId: string, table: string, data: any) =>
-    request(`/jetlinks/datasource/rdb/${datasourceId}/table/${table}`, {
+  rdbTables = (datasourceId: string, table: string, data?: any) =>
+    request(`${SystemConst.API_BASE}/datasource/rdb/${datasourceId}/table/${table}`, {
       method: 'GET',
       params: data,
     });
+
+  saveRdbTables = (datasourceId: string, data: any) =>
+    request(`${SystemConst.API_BASE}/datasource/rdb/${datasourceId}/table`, {
+      method: 'PATCH',
+      data,
+    });
+
+  delRdbTablesColumn = (datasourceId: string, table: string, data: any) =>
+    request(`${SystemConst.API_BASE}/datasource/rdb/${datasourceId}/table/${table}/drop-column`, {
+      method: 'POST',
+      data,
+    });
 }
 
 export default Service;

src/utils/menu/router.ts

@@ -64,6 +64,7 @@ export enum MENUS_CODE {
   'notice/Config/Detail' = 'notice/Config/Detail',
   'notice/Template' = 'notice/Template',
   'notice/Template/Detail' = 'notice/Template/Detail',
+  'rule-engine/DashBoard' = 'rule-engine/DashBoard',
   'rule-engine/Instance' = 'rule-engine/Instance',
   'rule-engine/SQLRule' = 'rule-engine/SQLRule',
   'rule-engine/Scene' = 'rule-engine/Scene',