我的空间服务

src/view/Manage/Model/Component/GrantedList.jsx

-import React, { useEffect, useState, useContext } from 'react';
-import { Spin } from 'antd';
+import React, { useEffect, useState, useContext, useMemo } from 'react';
+import { Spin, Tooltip, Typography, Pagination, Table } from 'antd';
 
 import { AppContext } from '../../../../App';
 import { dispatch } from '../../../../model';
-import ModelTable from "./ModelTable";
-import HistoryAndVersionDrawer from './HistoryAndVersionDrawer';
+import { paginate } from '../../../../util';
 
 const FC = (props) => {
   const app = useContext(AppContext);
   const [loading, setLoading] = useState(false);
   const [data, setData] = useState([]);
-  const [historyParams, setHistoryParams] = useState({visible: false, id: undefined })
+  const [pagination, setPagination] = useState({pageNum: 1, pageSize: 20});
+  const {pageNum, pageSize} = pagination;
+
+  const cols = [
+    {
+      title: '序号',
+      dataIndex: 'key',
+      render: (text, record, index) => {
+        return (index+1).toString();
+      },
+      width: 60,
+      ellipsis: true,
+    },
+    {
+      title: '数据服务资产编码',
+      dataIndex: 'code',
+      ellipsis: true,
+    },
+    {
+      title: '数据服务名称',
+      dataIndex: 'name',
+      ellipsis: true,
+    },
+    {
+      title: 'URI',
+      dataIndex: 'odata',
+      ellipsis: true,
+      render: (text, _, __) => {
+        return (
+          <React.Fragment>
+          {
+            text ? <div className='flex'> 
+              <Tooltip title={text||''} overlayClassName='tooltip-common'>
+                <Typography.Text ellipsis={true}>
+                {text||''}
+                </Typography.Text>
+              </Tooltip>
+              <Typography.Text copyable={{ text }}></Typography.Text>
+            </div> : ''
+          }
+          </React.Fragment>
+        );
+      }
+    },
+    {
+      title: '操作',
+      dataIndex: 'action',
+      width: 60,
+      fixed: 'right',
+      render: (_, record) => {
+        return (
+          <a onClick={() => {
+            app.openDetail?.({ service: record })
+          }}>详情</a>
+        )
+      }
+    }
+  ];
 
   useEffect(() => {
     getServices();
   }, [])
 
+  const tableData = useMemo(() => {
+    if (data) {
+      return paginate(data, pagination.pageNum, pagination.pageSize);
+    }
+
+    return [];
+  }, [data, pagination])
+
   const getServices = () => {
     setLoading(true);
     dispatch({
@@ -33,28 +97,32 @@ const FC = (props) => {
     });
   }
 
-  const onHistory = (id) => {
-    setHistoryParams({visible: true, id});
-  }
-
-  const onHistoryCancel = () => {
-    setHistoryParams({visible: false, id: undefined});
-  }
-
   return (
     <div>
-      <Spin spinning={loading}>
-        <ModelTable 
-          user={app?.user} 
-          view='grant'
-          data={data} 
-          onHistory={onHistory}
-          {...props} />
-      </Spin>
-      <HistoryAndVersionDrawer
-        id={historyParams?.id}
-        visible={historyParams?.visible}
-        onCancel={onHistoryCancel}
+      <Table 
+        extraColWidth={10}
+        loading={loading}
+        columns={cols||[]}
+        dataSource={tableData}
+        pagination={false}
+        scroll={{y: (tableData||[]).length===0?null:'calc(100vh - 121px - 57px - 24px - 38px - 44px)'}}
+      />
+      <Pagination
+        className="text-center mt-3"
+        showSizeChanger
+        showQuickJumper
+        onChange={(_pageNum, _pageSize) => {
+          setPagination({ pageNum: _pageNum, pageSize: _pageSize || 20 });
+        }}
+        onShowSizeChange={(_pageNum, _pageSize) => {
+          setPagination({ pageNum: 1, pageSize: _pageSize });
+        }}
+        current={pageNum}
+        pageSize={pageSize}
+        defaultCurrent={1}
+        total={(data||[]).length}
+        pageSizeOptions={[10,20,50,100]}
+        showTotal={total => `共 ${total} 条`}
       />
     </div>
   )

src/view/Manage/Model/Component/ModelTable.jsx

@@ -510,7 +510,7 @@ const ModelTable = (props) => {
         }; 
       }
 
-      if (item.key === 'itStaff' || item.key === 'keyUsers' || item.key === 'owner') {
+      if (item.userSelected === true) {
         col.render = (_, record) => {
           const user = users?.filter((user)=>(user.pernr===record.basicInfo?.[item.key]));
           if (user && user.length > 0) {