修改成table

package.json

@@ -149,6 +149,6 @@
       "react-app"
     ]
   },
-  "proxy": "http://192.168.0.216:8762",
+  "proxy": "http://139.198.126.96:9011",
   "homepage": "http://myhost/data-platform"
 }

src/view/Manage/Assets/components/AssetListHelper.js

@@ -92,6 +92,7 @@ export class DataPreview extends Component {
         pagination={false}
         columns={columns}
         loading={dataPreview === undefined}
+        scroll={{x:columns.length*150}}
         dataSource={data}
       />
     );

src/view/Manage/Assets/components/AssetTable.jsx

+import React,{useState,useEffect} from "react"
+import {Table,Icon,Modal,Tabs,message,Button} from "antd"
+import { DataDesc, DataPreview, DataDetail, ApplyDesc } from './AssetListHelper';
+import '../style.less';
+import { dispatch, dispatchLatest } from '../../../../model';
+
+const {Column} = Table
+const {TabPane} = Tabs
+
+// const bodyheight = document.body.clientHeight
+
+export default (props)=>{
+    
+    const {loading,tableModels,updateItems,subscribeTableModel=true,subscrible=false,bodyheight=500} = props
+
+    const [state,setState] = useState({
+        tableModel: null,
+        showModal: false,
+        tabKey: 'description',
+        metedata: null,
+        download: false,
+        dataDesc: null,
+        dataPreview: null,
+        activeBtn: 0,
+    })
+
+    useEffect(()=>{
+        if(state.tableModel){
+            setState({ ...state,activeBtn: 0 });
+            dispatchLatest({
+                type: 'assets.getMetadata',
+                payload: state.tableModel.tableIdInSource,
+                callback: data => {
+                    setState({
+                        ...state,
+                        metedata: data.metedata,
+                        download: data.download
+                    });
+                }
+            })
+        
+            dispatchLatest({
+                type: 'assets.listTableModelColumnsWithQuerySql',
+                payload: { tableModelId: state.tableModel.tableModelId },
+                callback: desc => {
+                    setState({
+                        ...state,
+                        dataDesc: desc
+                    });
+                }
+            });
+    
+            if (state.tabKey !== 'description') {
+                setState({...state, tabKey: 'description' });
+            }
+        }
+    },[state.tableModel])
+
+    useEffect(()=>{
+        if (state.tabKey && state.tabKey !== 'description' && state.tableModel) {
+            if (state.tabKey === 'preview') {
+                dispatchLatest({
+                    type: 'assets.listTableModelSampleDatas',
+                    payload: { tableModelId: state.tableModel.tableModelId },
+                    callback: preview => {
+                        setState({
+                            ...state,
+                            dataPreview: preview
+                        });
+                    }
+                });
+            }
+        }
+    },[state.tabKey])
+
+    const getIcon = (type) => {
+        if (type === 'Table') return <Icon type="table" className="mr-2" />;
+        if (type === 'HanaView') return <Icon type="area-chart" className="mr-2" />;
+        return null;
+    };
+
+    const apply= (columnPositions, reason, expireDate, fileList) => {
+        const { tableModel, activeBtn } = this.state;
+        
+        if (tableModel) {
+          console.log(columnPositions)
+          dispatch({
+            type: 'assets.uploadAttachment',
+            payload : {fileList:fileList,config :{
+              headers:{'Content-Type':'multipart/form-data'}
+            }
+            },
+            callback: (data) => {
+              dispatch({
+                type: 'assets.apply',
+                payload: { params :{ 
+                  tableModelId: tableModel.tableModelId,
+                  columnPositions: columnPositions,
+                  reason,
+                  expireDate,
+                },data:{
+                  id:data,
+                  name:fileList.name
+                }},
+                callback: () => {
+                  this.setState({ activeBtn: (activeBtn ^ 1) & 1 });
+                  message.success('申请成功');
+                }
+              });
+            }
+          })
+        }
+    }
+
+    const getTableModelColumns = function (privileged) {
+        return (state.dataDesc&&state.dataDesc.columns) ? state.dataDesc.columns.filter((o, i) => {
+          return o.privileged === privileged;
+        }) : [];
+    };
+
+    const IconText = ({ type, text }) => (
+        <span>
+            <Icon type={type} style={{ marginRight: 8 }} />
+            {text}
+        </span>
+    );
+
+    const onSubscribeModel=(item, tableModelId)=> {
+    
+        dispatch({
+          type: 'assets.subscribeTableModel',
+          payload: {params: { tableModelId }},
+          callback: () => {
+            item.subscribed = true;
+            updateItems && updateItems();
+            message.success("订阅成功!");
+          }
+        });
+    }
+
+    const onApplyModel=(item, tableModelId)=> {
+        dispatch({
+            type: 'assets.apply',
+            payload: {params: { tableModelId }},
+            callback: () => {
+                message.success("申请成功!");
+            }
+        });
+    }
+
+    const getActions = (item) => {
+
+        let actions = []
+  
+        if (subscribeTableModel) {
+            actions.push(
+                <>
+                {  
+                item.subscribed ? (
+                    <Button key="b1" size="small" type="link" icon="book" disabled>
+                    已订阅
+                    </Button>
+                ) : (
+                    <Button
+                        size="small"
+                        type="link"
+                        icon="book"
+                        key="b2"
+                        onClick={()=>{onSubscribeModel(item, item.tableModelId)}}
+                    >
+                        订阅
+                    </Button>
+                )
+                }
+                </>
+            );
+    
+            if (item.subscribed && subscrible) {
+                actions.push(
+                <Button
+                    size="small"
+                    type="link"
+                    icon="book"
+                    key="c1"
+                    onClick={e => {
+                    e.preventDefault();
+                    if (dispatch) {
+                        dispatch({
+                            type: 'assets.unSubscribeTableModel',
+                            payload: { params: { tableModelId: item.tableModelId }  },
+                            callback: (response) => {
+                                if (response !== null) {
+                                    message.success('取消订阅成功' );
+                                    if (updateItems) {
+                                        updateItems();
+                                    }
+                                }
+                            },
+                        });
+                    }
+                    }}
+                >
+                    取消订阅
+                </Button>
+                )
+            }
+            }
+    
+            actions.push(
+            <>
+            {  
+                item.privileged ? (
+                <Button key="d1" size="small" type="link" icon="setting" disabled>
+                    已申请
+                </Button>
+                ) : (
+                <Button
+                    key="d2"
+                    size="small"
+                    type="link"
+                    icon="setting"
+                    onClick={()=>{onApplyModel(item, item.tableModelId)}}
+                >
+                    权限申请
+                </Button>
+                )
+            }
+            </>
+            );
+            
+        return actions;
+    };
+
+    return(
+        <>
+            <Table
+                size="middle"
+                loading={loading}
+                dataSource={tableModels}
+                rowKey={"tableModelId"}
+                pagination={false}
+                scroll={{x:940,y:bodyheight}}
+                style={{marginBottom:10}}
+            >
+                <Column title="资产名称" align="left" key="displayName" dataIndex="displayName" width={200}
+                    render={(text,item)=>{
+                        return (
+                            <div
+                                className="pointer text-primary"
+                                onClick={e => {
+                                    setState({...state, showModal: true, tableModel: item });
+                                }}
+                            >
+                                {getIcon(item.dbType)}
+                                <span dangerouslySetInnerHTML={{ __html: item.displayName || '' }} />
+                            </div>
+                        )
+                    }}
+                />
+                <Column title="所属部门" key="department" dataIndex="department" width={120} />
+                <Column title="所属系统" key="system" dataIndex="system" width={120} />
+                <Column title="更新周期" key="updateCycle" dataIndex="updateCycle" width={120} />
+                <Column title="资产备注" key="remarks" dataIndex="remarks" width={180} />
+                <Column title="操作" key="action" fixed="right" width={220} render={(text,item)=>{
+                    return [
+                        <IconText type="eye" text={item.visitCount} key="list-eye" />,
+                        ...getActions(item)
+                    ]
+                }} />
+            </Table>
+            {state.tableModel && (
+                <Modal
+                    className="modal-lg"
+                    title={<span>数据资产详情：<span dangerouslySetInnerHTML={{ __html: state.tableModel.displayName }} /></span>}
+                    visible={state.showModal}
+                    width="calc(100vw - 50px)"
+                    onCancel={e => {
+                        setState({ ...state,showModal: false });
+                    }}
+                    footer={null}
+                >
+                    <DataDetail
+                        tableModel={state.tableModel}
+                        metaData={state.metedata || {}}
+                        showApplyButton={getTableModelColumns(false).length > 0}
+                        isAppling={state.activeBtn===1?true:false}
+                        onApply={ () => {
+                            setState({ ...state,activeBtn: (state.activeBtn ^ 1) & 1 });
+                        }}
+                    />
+                    {
+                        state.activeBtn===0&&<Tabs
+                            defaultActiveKey="description"
+                            activeKey={state.tabKey}
+                            onChange={key => {
+                                const type = 'tabKey';
+                                setState({ ...state,[type]: key });
+                            }}
+                        >
+                            <TabPane tab="数据概览" key="description">
+                                <DataDesc dataDesc={state.dataDesc}  />
+                            </TabPane>
+                            <TabPane tab="数据预览" key="preview">
+                                <DataPreview dataPreview={state.dataPreview} />
+                            </TabPane>
+                        </Tabs>
+                    }
+                    {
+                        state.activeBtn===1&&<ApplyDesc dataDesc={state.dataDesc} apply={apply} />
+                    }
+                </Modal>
+            )}
+        </>
+    )
+}
\ No newline at end of file

src/view/Manage/Assets/index.jsx

@@ -3,9 +3,11 @@ import { Row, Col, Card, Input, Pagination } from 'antd';
 
 import AssetTreeCOM from './components/AssetTree';
 import AssetListCOM from './components/AssetList';
+import AssetTable from "./components/AssetTable"
 import { dispatchLatest } from '../../../model';
 import PageHeaderWrapper from '../../../layout/PageHeaderWrapper';
 import './style.less';
+const bodyheight = document.body.clientHeight
 
 const { Search } = Input;
 
@@ -14,7 +16,7 @@ class Assets extends Component {
   constructor(props) {
     super(props);
 
-    this.state = { treeData: null, items: null, total: 0, keyword: '', pageNum: 1, pageSize: 10, currentNode: null, loading: false };
+    this.state = { treeData: null, items: null, total: 0, keyword: '', pageNum: 1, pageSize: 20, currentNode: null, loading: false };
   }
 
   componentDidMount() {
@@ -33,7 +35,7 @@ class Assets extends Component {
 
   }
 
-  getList = (node, pageNum = 1, pageSize = 10) => {
+  getList = (node, pageNum = 1, pageSize = 20) => {
     const { keyword } = this.state;
     if (node) {
       this.setState({ currentNode: node, pageNum, pageSize, loading: true });
@@ -82,10 +84,16 @@ class Assets extends Component {
           </Col>
           <Col md={19}>
             <Card bordered={false} className='asset-table'>
-              <AssetListCOM
+              {/* <AssetListCOM
                 loading={loading}
                 tableModels={items}
                 updateItems={this.updateItems.bind(this)}
+              /> */}
+              <AssetTable 
+                loading={loading}
+                tableModels={items}
+                updateItems={this.updateItems.bind(this)}
+                bodyheight={bodyheight-310}
               />
               <Pagination
                   className="text-center"

src/view/Manage/Search/index.jsx

@@ -2,17 +2,20 @@ import React, { Component } from "react";
 import { Card, Pagination } from 'antd';
 import { SearchBar } from './components/SearchHelper';
 import AssetListCOM from '../Assets/components/AssetList';
+import AssetTable from "../Assets/components/AssetTable"
 import { dispatchLatest } from '../../../model';
 import PageHeaderWrapper from '../../../layout/PageHeaderWrapper';
 import './style.less'; 
 
+const bodyheight = document.body.clientHeight
+
 class SearchResult extends Component {
   constructor(props) {
     super(props);
-    this.state = { items: null,loading: false, total: 0, pageNum: 1, pageSize: 10, keyword: '', domain: '' };
+    this.state = { items: null,loading: false, total: 0, pageNum: 1, pageSize: 20, keyword: '', domain: '' };
   }
 
-  getList = ( keyword, domain, pageNum = 1, pageSize = 10) => {
+  getList = ( keyword, domain, pageNum = 1, pageSize = 20) => {
     this.setState({ keyword, domain, pageNum, pageSize, loading: true },() => {
       dispatchLatest({
         type: 'assets.searchTableModelsByPage',
@@ -48,11 +51,15 @@ class SearchResult extends Component {
             onChange={this.onSearchBarChange} 
             {...this.props}
           />
-          <AssetListCOM
+          <AssetTable 
             loading={loading}
             tableModels={items}
             updateItems={this.updateItems.bind(this)}
+            bodyheight={bodyheight-420}
           />
+          {/* <AssetListCOM
+            
+          /> */}
           <Pagination
               className="text-center"
               showSizeChanger

src/view/Metadata/Indicator/components/MetadataList.js

 import React, { Component } from 'react';
 import {
   List,
-  Skeleton,
+  Table,
   Row,
   Col,
   Typography,
@@ -13,6 +13,9 @@ import '../style.less';
 
 const { Text } = Typography;
 const { TabPane } = Tabs;
+const { Column } = Table
+
+const bodyheight = document.body.clientHeight
 
 export default class MetadataListCOM extends Component {
 
@@ -80,7 +83,33 @@ export default class MetadataListCOM extends Component {
 
     return (
       <React.Fragment>
-        <List
+        <Table
+          loading={loading}
+          dataSource={_tableModels || []}
+          size={'middle'}
+          scroll={{y:bodyheight-300}}
+          pagination={false}
+          style={{marginBottom:8}}
+        >
+          <Column title={"名称"} dataIndex={'cnName'} key={'cnName'} render={
+            (text,item)=>{
+              return <div
+                className="pointer text-primary"
+                onClick={e => {
+                  this.setState({ showModal: true, tableModel: item });
+                }}
+              >
+                <span dangerouslySetInnerHTML={{ __html: item.cnName || '' }} />
+              </div>
+            }
+          } />
+          <Column title="类型" dataIndex="type" key="type" />
+          <Column title="标签编号" dataIndex="name" key="name" />
+          {/* <Column title="路径" dataIndex="path" key="path"  /> */}
+          <Column title="业务定义" dataIndex="comment" key="comment" width={'35%'} ellipsis={true} />
+          <Column title="更新时间" dataIndex="lastUpdateTime" key="lastUpdateTime" width={180} />
+        </Table>
+        {/* <List
           loading={loading}
           className='metadata-list'
           itemLayout="vertical"
@@ -104,7 +133,7 @@ export default class MetadataListCOM extends Component {
               </Skeleton>
             </List.Item>
           )}
-        />
+        /> */}
 
         {tableModel && (
           <Modal

src/view/Metadata/Indicator/index.jsx

@@ -15,10 +15,10 @@ export default class Indicator extends Component {
   constructor(props) {
     super(props);
 
-    this.state = { items: null, total: 0, keyword: '', pageNum: 1, pageSize: 10, loading: false, treeSelectId: '' };
+    this.state = { items: null, total: 0, keyword: '', pageNum: 1, pageSize: 20, loading: false, treeSelectId: '' };
   }
 
-  getList = (treeSelectId, pageNum = 1, pageSize = 10) => {
+  getList = (treeSelectId, pageNum = 1, pageSize = 20) => {
     const { keyword } = this.state;
     
     this.setState({ treeSelectId, pageNum, pageSize, loading: true });