查询表格优化

dlink-metadata/dlink-metadata-base/src/main/java/com/dlink/metadata/driver/AbstractJdbcDriver.java

@@ -136,8 +136,8 @@ public abstract class AbstractJdbcDriver extends AbstractDriver {
                     tableInfo.setEngine(results.getString(dbQuery.engine()));
                     tableInfo.setOptions(results.getString(dbQuery.options()));
                     tableInfo.setRows(results.getLong(dbQuery.rows()));
-                    tableInfo.setCreateTime(results.getDate(dbQuery.createTime()));
-                    tableInfo.setUpdateTime(results.getDate(dbQuery.updateTime()));
+                    tableInfo.setCreateTime(results.getTimestamp(dbQuery.createTime()));
+                    tableInfo.setUpdateTime(results.getTimestamp(dbQuery.updateTime()));
                     tableList.add(tableInfo);
                 }
             }

dlink-web/package.json

@@ -72,6 +72,7 @@
     "react-dev-inspector": "^1.1.1",
     "react-dom": "^17.0.0",
     "react-helmet-async": "^1.0.4",
+    "react-highlight-words": "^0.17.0",
     "react-monaco-editor": "^0.43.0",
     "umi": "^3.5.0",
     "umi-request": "^1.0.8"

dlink-web/src/components/Common/DTable.tsx

+import React, {useEffect, useState} from "react";
+import {SearchOutlined} from '@ant-design/icons';
+import ProTable from '@ant-design/pro-table';
+import {getData} from "@/components/Common/crud";
+import {Button, Input, Space} from "antd";
+
+const DTable = (props: any) => {
+
+  const {dataSource,columns} = props;
+
+  const [data,setData] = useState<[]>([]);
+
+  const refreshData = async () =>{
+    const msg = await getData(dataSource.url, dataSource.params);
+    setData(msg.datas);
+  };
+
+  const buildColumn = () =>{
+    const columnList: any=[];
+    columns.map((item) => {
+      const openSorter = item.openSorter==null?true:item.openSorter;
+      const isString = item.isString==null?true:item.isString;
+      const openSearch = item.openSearch==null?'like':item.openSearch;
+
+      let column = {
+        title: item.title?item.title:item.field,
+        dataIndex: item.dataIndex?item.dataIndex:item.field,
+        key: item.dataIndex?item.dataIndex:item.field,
+      };
+      if(openSorter){
+        if(isString){
+          column = {
+            sorter: (a, b) => {
+              const value1 = a[column.dataIndex]!=null?a[column.dataIndex].toString():'';
+              const value2 = b[column.dataIndex]!=null?b[column.dataIndex].toString():'';
+              return value1.localeCompare(value2);
+            },
+            ...column,
+          }
+        }else{
+          column = {
+            sorter: (a, b) => a[column.dataIndex] - b[column.dataIndex],
+            ...column,
+          }
+        }
+      }
+      if(openSearch==='like'){
+        column = {...column,...getColumnSearchProps(column.dataIndex),}
+      }else if(openSearch==='dict'){
+        column = {
+          onFilter: (value, record) => record[column.dataIndex] === value,
+          ...column,}
+      }
+      columnList.push({
+        ...column,
+        ...item,
+      });
+    });
+    return columnList;
+  }
+
+  useEffect(() => {
+    if(dataSource.url){
+      refreshData();
+    }
+  }, []);
+
+  return (
+    <ProTable
+      columns={buildColumn()}
+      style={{width: '100%'}}
+      dataSource={dataSource.url?data:dataSource}
+      rowKey="name"
+      pagination={{
+        pageSize: 10,
+      }}
+      toolBarRender={false}
+      search={false}
+      size="small"
+    />
+  );
+};
+
+export default DTable;
+
+export const getColumnSearchProps = (dIndex) => ({
+  filterDropdown: ({setSelectedKeys, selectedKeys, confirm, clearFilters}) => (
+    <div style={{padding: 8}}>
+      <Input
+        placeholder={`请输入关键字`}
+        value={selectedKeys[0]}
+        onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
+        onPressEnter={() => handleSearch(selectedKeys, confirm, dIndex)}
+        style={{marginBottom: 8, display: 'block'}}
+      />
+      <Space>
+        <Button
+          type="primary"
+          onClick={() => handleSearch(selectedKeys, confirm, dIndex)}
+          icon={<SearchOutlined/>}
+          size="small"
+          style={{width: 90}}
+        >
+          搜索
+        </Button>
+        <Button onClick={() => handleReset(clearFilters)} size="small" style={{width: 90}}>
+          重置
+        </Button>
+      </Space>
+    </div>
+  ),
+  filterIcon: filtered => <SearchOutlined style={{color: filtered ? '#1890ff' : undefined}}/>,
+  onFilter: (value, record) =>
+    record[dIndex]
+      ? record[dIndex].toString().toLowerCase().includes(value.toLowerCase())
+      : '',
+});
+
+const handleSearch = (selectedKeys, confirm, dIndex) => {
+  confirm();
+};
+
+const handleReset = (clearFilters) => {
+  clearFilters();
+};

dlink-web/src/components/Studio/StudioConsole/StudioHistory/index.tsx

 import {StateType} from "@/pages/FlinkSqlStudio/model";
 import {connect} from "umi";
-import {Button, Tag, Space, Typography, Divider, Badge, Drawer, Modal} from 'antd';
-import {MessageOutlined,ClusterOutlined,FireOutlined,ReloadOutlined,RocketOutlined} from "@ant-design/icons";
+import {Tag, Space, Typography, Divider, Badge, Modal} from 'antd';
+import {MessageOutlined,ClusterOutlined,FireOutlined,RocketOutlined} from "@ant-design/icons";
 import ProList from '@ant-design/pro-list';
 import {handleRemove, queryData} from "@/components/Common/crud";
 import ProDescriptions from '@ant-design/pro-descriptions';
-import React, {useRef, useState} from "react";
+import React, {useState} from "react";
 import {
   ModalForm,
 } from '@ant-design/pro-form';
 import styles from "./index.less";
-import {ActionType} from "@ant-design/pro-table";
 import {showJobData} from "@/components/Studio/StudioEvent/DQL";
 import StudioPreview from "../StudioPreview";
 
@@ -53,6 +52,7 @@ type HistoryConfig={
   parallelism:number;
   savePointPath:string;
 };
+
 const url = '/api/history';
 const StudioHistory = (props: any) => {
 
@@ -252,12 +252,8 @@ const StudioHistory = (props: any) => {
     }}
       />
         <ModalForm
-          // title="新建表单"
           visible={modalVisit}
           onFinish={async () => {
-            setRow(undefined);
-            setType(undefined);
-            setConfig(undefined);
           }}
           onVisibleChange={setModalVisit}
           submitter={{

dlink-web/src/components/Studio/StudioConsole/StudioPreview/index.tsx

@@ -4,76 +4,17 @@ import {connect} from "umi";
 import {useState} from "react";
 import { SearchOutlined } from '@ant-design/icons';
 import ProTable from '@ant-design/pro-table';
+import DTable from "@/components/Common/DTable";
 
 const StudioPreview = (props:any) => {
 
   const {result} = props;
-  const [searchText,setSearchText] = useState<string>('');
-  const [searchedColumn,setSearchedColumn] = useState<string>('');
-
-  const getColumnSearchProps = (dIndex) => ({
-    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
-      <div style={{ padding: 8 }}>
-        <Input
-          placeholder={`Search ${dIndex}`}
-          value={selectedKeys[0]}
-          onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
-          onPressEnter={() => handleSearch(selectedKeys, confirm, dIndex)}
-          style={{ marginBottom: 8, display: 'block' }}
-        />
-        <Space>
-          <Button
-            type="primary"
-            onClick={() => handleSearch(selectedKeys, confirm, dIndex)}
-            icon={<SearchOutlined />}
-            size="small"
-            style={{ width: 90 }}
-          >
-            搜索
-          </Button>
-          <Button onClick={() => handleReset(clearFilters)} size="small" style={{ width: 90 }}>
-            重置
-          </Button>
-          <Button
-            type="link"
-            size="small"
-            onClick={() => {
-              setSearchText(selectedKeys[0]);
-              setSearchedColumn(dIndex);
-            }}
-          >
-            过滤
-          </Button>
-        </Space>
-      </div>
-    ),
-    filterIcon: filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
-    onFilter: (value, record) =>
-      record[dIndex]
-        ? record[dIndex].toString().toLowerCase().includes(value.toLowerCase())
-        : '',
-  });
-
-  const handleSearch = (selectedKeys, confirm, dIndex) => {
-    confirm();
-    setSearchText(selectedKeys[0]);
-    setSearchedColumn(dIndex);
-  };
-
-  const handleReset = (clearFilters) => {
-    clearFilters();
-    setSearchText('');
-  };
 
   const getColumns=(columns:[])=>{
     let datas:any=[];
     columns.map((item)=> {
       datas.push({
-        title: item,
-        dataIndex: item,
-        key: item,
-        sorter: true,
-        ...getColumnSearchProps(item),
+        field: item,
       });
     });
     return datas;
@@ -82,7 +23,7 @@ const StudioPreview = (props:any) => {
   return (
     <div style={{width: '100%'}}>
       {result&&result.jobId&&!result.isDestroyed&&result.rowData&&result.columns?
-        (<ProTable dataSource={result.rowData} columns={getColumns(result.columns)} search={false} toolBarRender={false}
+        (<DTable dataSource={result.rowData} columns={getColumns(result.columns)}
                    pagination={{
                      pageSize: 5,
                    }}

dlink-web/src/components/Studio/StudioConsole/StudioTable/index.tsx

-import {Typography, Input, Button, Space, Table, Select, Tag, Form, Empty,Tooltip} from "antd";
+import {Button, Tag, Empty} from "antd";
 import {StateType} from "@/pages/FlinkSqlStudio/model";
 import {connect} from "umi";
-import React, {useState} from "react";
-// import Highlighter from 'react-highlight-words';
 import {FireOutlined, SearchOutlined} from '@ant-design/icons';
 import {showJobData} from "@/components/Studio/StudioEvent/DQL";
-import ProTable from '@ant-design/pro-table';
-import {DIALECT, isSql} from "@/components/Studio/conf";
-
-const { Option } = Select;
-const { Title, Paragraph, Text, Link } = Typography;
-
+import {isSql} from "@/components/Studio/conf";
+import DTable from "@/components/Common/DTable";
 
 const StudioTable = (props:any) => {
 
   const {current,result,dispatch} = props;
-  const [searchText,setSearchText] = useState<string>('');
-  const [searchedColumn,setSearchedColumn] = useState<string>('');
-
-  const getColumnSearchProps = (dIndex) => ({
-    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
-      <div style={{ padding: 8 }}>
-        <Input
-          placeholder={`Search ${dIndex}`}
-          value={selectedKeys[0]}
-          onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
-          onPressEnter={() => handleSearch(selectedKeys, confirm, dIndex)}
-          style={{ marginBottom: 8, display: 'block' }}
-        />
-        <Space>
-          <Button
-            type="primary"
-            onClick={() => handleSearch(selectedKeys, confirm, dIndex)}
-            icon={<SearchOutlined />}
-            size="small"
-            style={{ width: 90 }}
-          >
-            搜索
-          </Button>
-          <Button onClick={() => handleReset(clearFilters)} size="small" style={{ width: 90 }}>
-            重置
-          </Button>
-          <Button
-            type="link"
-            size="small"
-            onClick={() => {
-              setSearchText(selectedKeys[0]);
-              setSearchedColumn(dIndex);
-            }}
-          >
-            过滤
-          </Button>
-        </Space>
-      </div>
-    ),
-    filterIcon: filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
-    onFilter: (value, record) =>
-      record[dIndex]
-        ? record[dIndex].toString().toLowerCase().includes(value.toLowerCase())
-        : '',
-    /*render: text =>
-      searchedColumn === dIndex ? (
-        <Highlighter
-          highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
-          searchWords={[searchText]}
-          autoEscape
-          textToHighlight={text ? text.toString() : ''}
-        />
-      ) : (
-        text
-      ),*/
-  });
-
-  const handleSearch = (selectedKeys, confirm, dIndex) => {
-    confirm();
-    setSearchText(selectedKeys[0]);
-    setSearchedColumn(dIndex);
-  };
-
-  const handleReset = (clearFilters) => {
-    clearFilters();
-    setSearchText('');
-  };
 
   const getColumns=(columns:[])=>{
     let datas:any=[];
     columns.map((item)=> {
       datas.push({
-        title: item,
-        dataIndex: item,
-        key: item,
-        // sorter: true,
-        ...getColumnSearchProps(item),
+        field: item,
       });
     });
     return datas;
@@ -110,10 +33,7 @@ const StudioTable = (props:any) => {
         <FireOutlined /> {current.console.result.jobId}
       </Tag>)}
       {result.columns?
-        <ProTable dataSource={result.rowData} columns={getColumns(result.columns)} search={false}
-                  options={{
-                    search: false,
-                  }}/>
+        <DTable dataSource={result.rowData} columns={getColumns(result.columns)}/>
         :(<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />)
       }
     </>)
@@ -122,10 +42,7 @@ const StudioTable = (props:any) => {
   const renderSQLContent = () => {
     return (<>
       {current.console.result.result?
-        <ProTable dataSource={current.console.result.result.rowData} columns={getColumns(current.console.result.result.columns)} search={false}
-                  options={{
-                    search: false,
-                  }}/>
+        <DTable dataSource={current.console.result.result.rowData} columns={getColumns(current.console.result.result.columns)}/>
         :(<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />)
       }
     </>)

dlink-web/src/components/Studio/StudioLeftTool/StudioMetaData/index.tsx

@@ -122,7 +122,7 @@ const StudioMetaData = (props: any) => {
         }}
 
       >
-        <Tabs defaultActiveKey="2">
+        <Tabs defaultActiveKey="tableInfo" size="small">
           <TabPane
             tab={
               <span>

dlink-web/src/pages/DataBase/Columns/index.tsx

 import React from "react";
-import { Button, Tooltip } from 'antd';
-import { KeyOutlined,CheckSquareOutlined } from '@ant-design/icons';
-import type { ProColumns } from '@ant-design/pro-table';
-import ProTable, { TableDropdown } from '@ant-design/pro-table';
-import { Column } from "../data";
-import {getData, queryData} from "@/components/Common/crud";
-
-
+import {KeyOutlined, CheckSquareOutlined} from '@ant-design/icons';
+import DTable from "@/components/Common/DTable";
 
 const Columns = (props: any) => {
 
   const {dbId,table,schema} = props;
 
-  const columns: ProColumns<Column>[] = [
-    {
-      title: '序号',
-      dataIndex: 'position',
-      sorter: (a, b) => a.position - b.position,
-    },
+  const cols = [{
+    title: '序号',
+    dataIndex: 'position',
+    isString: false,
+  },
     {
       title: '列名',
       dataIndex: 'name',
-      render: (_) => <a>{_}</a>,
-      // sorter: (a, b) => a.name - b.name,
       copyable: true,
     },
     {
@@ -42,6 +33,17 @@ const Columns = (props: any) => {
           {record.keyFlag?<KeyOutlined style={{ color:'#FAA100'}} />:undefined}
         </>
       ),
+      filters: [
+        {
+          text: '主键',
+          value: true,
+        },
+        {
+          text: '其他',
+          value: false,
+        },
+      ],
+      openSearch: 'dict',
     },{
       title: '自增',
       dataIndex: 'autoIncrement',
@@ -50,6 +52,17 @@ const Columns = (props: any) => {
           {record.autoIncrement?<CheckSquareOutlined style={{ color:'#1296db'}} />:undefined}
         </>
       ),
+      filters: [
+        {
+          text: '自增',
+          value: true,
+        },
+        {
+          text: '其他',
+          value: false,
+        },
+      ],
+      openSearch: 'dict',
     },{
       title: '非空',
       dataIndex: 'nullable',
@@ -58,15 +71,28 @@ const Columns = (props: any) => {
           {!record.nullable?<CheckSquareOutlined style={{ color:'#1296db'}} />:undefined}
         </>
       ),
+      filters: [
+        {
+          text: '非空',
+          value: true,
+        },
+        {
+          text: '可为空',
+          value: false,
+        },
+      ],
+      openSearch: 'dict',
     },{
       title: '默认值',
       dataIndex: 'defaultValue',
     },{
       title: '精度',
       dataIndex: 'precision',
+      isString: false,
     },{
       title: '小数范围',
       dataIndex: 'scale',
+      isString: false,
     },{
       title: '字符集',
       dataIndex: 'characterSet',
@@ -76,69 +102,11 @@ const Columns = (props: any) => {
     },{
       title: 'Java 类型',
       dataIndex: 'javaType',
-    },
-    /*{
-      title: '类型',
-      dataIndex: 'type',
-      valueType: 'select',
-      valueEnum: {
-        all: { text: '全部' },
-        付小小: { text: '付小小' },
-        曲丽丽: { text: '曲丽丽' },
-        林东东: { text: '林东东' },
-        陈帅帅: { text: '陈帅帅' },
-        兼某某: { text: '兼某某' },
-      },
-    },*/
-    /*{
-      title: '操作',
-      width: '164px',
-      key: 'option',
-      valueType: 'option',
-      render: () => [
-        <a key="link">链路</a>,
-        <a key="link2">报警</a>,
-        <a key="link3">监控</a>,
-        <TableDropdown
-          key="actionGroup"
-          menus={[
-            { key: 'copy', name: '复制' },
-            { key: 'delete', name: '删除' },
-          ]}
-        />,
-      ],
-    },*/
-  ];
-
-
+    },]
   return (
-    <ProTable<Column>
-      columns={columns}
-      style={{width: '100%'}}
-      request={async() =>
-      {
-        const msg = await getData('api/database/listColumns', {id:dbId,schemaName:schema,tableName:table});
-        return {
-          data: msg.datas,
-          success: msg.code===0,
-        };
-      }}
-      rowKey="name"
-      pagination={{
-        pageSize: 10,
-      }}
-      /*search={{
-        filterType: 'light',
-      }}*/
-      search={false}
-      /*toolBarRender={() => [
-        <Button key="show">查看日志</Button>,
-        <Button type="primary" key="primary">
-          创建应用
-        </Button>,
-      ]}*/
-    />
-  );
+    <DTable columns={cols}
+            dataSource={{url:'api/database/listColumns',params:{id:dbId,schemaName:schema,tableName:table}}}/>
+  )
 };
 
 export default Columns;