元数据查看列

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

@@ -8,12 +8,20 @@ import {useState} from "react";
 import styles from "./index.less";
 import {
   ReloadOutlined,
-  PlusOutlined,
-  DownOutlined
+  DatabaseOutlined,
+  DownOutlined,
+  TableOutlined, FireOutlined
 } from '@ant-design/icons';
 import React from "react";
 import {showMetaDataTable} from "@/components/Studio/StudioEvent/DDL";
 import { Scrollbars } from 'react-custom-scrollbars';
+import {
+  ModalForm,
+} from '@ant-design/pro-form';
+import ProDescriptions from "@ant-design/pro-descriptions";
+import StudioPreview from "@/components/Studio/StudioConsole/StudioPreview";
+import Columns from "@/pages/DataBase/Columns";
+import {TreeDataNode} from "@/components/Studio/StudioTree/Function";
 
 const { DirectoryTree } = Tree;
 const {Option} = Select;
@@ -23,6 +31,8 @@ const StudioMetaData = (props: any) => {
   const {database,toolHeight, dispatch} = props;
   const [databaseId, setDataBaseId] = useState<number>();
   const [treeData, setTreeData] = useState<[]>([]);
+  const [modalVisit, setModalVisit] = useState(false);
+  const [row, setRow] = useState<TreeDataNode>();
 
   const onRefreshTreeData = ()=>{
     if(!databaseId)return;
@@ -30,15 +40,20 @@ const StudioMetaData = (props: any) => {
     res.then((result) => {
       let tables = result.datas;
       for(let i=0;i<tables.length;i++){
+        tables[i].title=tables[i].name;
+        tables[i].key=tables[i].name;
+        tables[i].icon = <DatabaseOutlined />;
         tables[i].children=tables[i].tables;
         for(let j=0;j<tables[i].children.length;j++){
           tables[i].children[j].title=tables[i].children[j].name;
-          tables[i].children[j].key=tables[i].children[j].name;
+          tables[i].children[j].key=tables[i].name+'.'+tables[i].children[j].name;
+          tables[i].children[j].icon=<TableOutlined />;
+          tables[i].children[j].isLeaf=true;
+          tables[i].children[j].schema=tables[i].name;
+          tables[i].children[j].table=tables[i].children[j].name;
         }
-        tables[i].title=tables[i].name;
-        tables[i].key=tables[i].name;
       }
-      setTreeData(result.datas);
+      setTreeData(tables);
     });
   };
 
@@ -58,6 +73,14 @@ const StudioMetaData = (props: any) => {
     return itemList;
   };
 
+  const openColumnInfo = (e: React.MouseEvent, node: TreeDataNode) => {
+    console.log(node);
+    if(node.isLeaf){
+      setRow(node);
+      setModalVisit(true);
+    }
+  }
+
   return (
     <>
       <Select
@@ -68,7 +91,7 @@ const StudioMetaData = (props: any) => {
       >
         {getDataBaseOptions()}
       </Select>
-      <Tooltip title="刷新元数据表">
+      <Tooltip title="刷新元数据">
         <Button
           type="text"
           icon={<ReloadOutlined/>}
@@ -76,13 +99,39 @@ const StudioMetaData = (props: any) => {
         />
       </Tooltip>
       <Scrollbars style={{height: (toolHeight - 32)}}>
-      <DirectoryTree
-        multiple
-        switcherIcon={<DownOutlined/>}
-        treeData={treeData}
-        height={400}
-      />
+        {treeData.length>0?(
+          <DirectoryTree
+          showIcon
+          switcherIcon={<DownOutlined/>}
+          treeData={treeData}
+          onRightClick={({event, node}: any) => {
+            openColumnInfo(event, node)
+          }}
+        />):(<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />)}
       </Scrollbars>
+      <ModalForm
+        // title="新建表单"
+        title={ (row?(row.key)+'的':'')+'字段信息'}
+        visible={modalVisit}
+        onFinish={async () => {
+          // setRow(undefined);
+          // setModalVisit(false);
+        }}
+        modalProps={{
+          maskClosable:false
+        }}
+        onVisibleChange={setModalVisit}
+        submitter={{
+          submitButtonProps: {
+            style: {
+              display: 'none',
+            },
+          },
+        }}
+      >
+        {row?
+        (<Columns dbId={databaseId} schema={row.schema} table={row.table}/>) : (<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />)}
+      </ModalForm>
     </>
   );
 };

dlink-web/src/pages/DataBase/Columns/data.d.ts

+export type Column = {
+  name: string,
+  type: string,
+  comment: string,
+  keyFlag: boolean,
+  keyIdentityFlag: boolean,
+  fill: string,
+  isNotNull: string,
+  javaType: string,
+  columnFamily: string,
+};

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

 import React from "react";
+import { Button, Tooltip } from 'antd';
+import { QuestionCircleOutlined } 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";
 
-const Columns: React.FC<{}> = (props: any) => {
 
-  return (<></>);
+
+const Columns = (props: any) => {
+
+  const {dbId,table,schema} = props;
+
+  const columns: ProColumns<Column>[] = [
+    {
+      title: '列名',
+      dataIndex: 'name',
+      render: (_) => <a>{_}</a>,
+      /*formItemProps: {
+        lightProps: {
+          labelFormatter: (value) => `app-${value}`,
+        },
+      },*/
+    },
+    {
+      title: '注释',
+      dataIndex: 'comment',
+    },
+    {
+      title: '类型',
+      dataIndex: 'type',
+    },
+    {
+      title: '主键',
+      dataIndex: 'keyFlag',
+    },{
+      title: '自增',
+      dataIndex: 'keyIdentityFlag',
+    },{
+      title: '默认值',
+      dataIndex: 'fill',
+    },{
+      title: '非空',
+      dataIndex: 'isNotNull',
+    },{
+      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',
+      }}
+      /*toolBarRender={() => [
+        <Button key="show">查看日志</Button>,
+        <Button type="primary" key="primary">
+          创建应用
+        </Button>,
+      ]}*/
+    />
+  );
 };
 
 export default Columns;

dlink-web/src/pages/Welcome.tsx

@@ -514,6 +514,9 @@ export default (): React.ReactNode => {
                 <li>
                   <Link>新增 Mysql,Oracle,PostGreSql,ClickHouse,Doris,Java 方言及图标</Link>
                 </li>
+                <li>
+                  <Link>新增 元数据查看列信息</Link>
+                </li>
               </ul>
             </Paragraph>
           </Timeline.Item>