可见列设置

src/model/pds.js

@@ -119,4 +119,12 @@ export function* saveOwner(payload) {
 
 export function* changeOwner(payload) {
   return yield call(pds.changeOwner, payload)
+}
+
+export function* saveCols(payload) {
+  return yield call(pds.saveCols, payload);
+}
+
+export function* getCols(payload) {
+  return yield call(pds.getCols, payload);
 }
\ No newline at end of file

src/service/pds.js

@@ -118,4 +118,12 @@ export function saveOwner(payload) {
 
 export function changeOwner(payload) {
   return PostJSON("/pdataservice/pdsCURD/changeOwnerOfDataService", payload)
+}
+
+export function saveCols(payload) {
+  return PostJSON("/pdataservice/pdsModel/saveVisibleTitle", payload);
+}
+
+export function getCols(payload) {
+  return GetJSON("/pdataservice/pdsModel/getVisibleTitle", payload);
 }
\ No newline at end of file

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

@@ -4,13 +4,14 @@ import { Modal, Button, Switch, Row, Col, Checkbox, Typography } from 'antd';
 import { dispatch } from '../../../../model';
 
 const cols = [
-  {title: '模型名称', require: true},
+  {title: '服务名称'},
   {title: '中文名称'},
   {title: '路径'},
   {title: '状态'},
-  {title: '创建人'},
+  {title: '管理人'},
+  {title: '是否启动OData'},
   {title: '版本号'},
-  {title: '模型描述'},
+  {title: '服务描述'},
 ];
 
 const ColSettingModal = (props) => {
@@ -20,22 +21,19 @@ const ColSettingModal = (props) => {
   const [confirmLoading, setConfirmLoading] = useState(false);
 
   useEffect(() => {
-
     if (visible) {
       getPreference();
     }
-    //eslint-disable-next-line react-hooks/exhaustive-deps
   }, [visible]);
 
   const getPreference = () => {
     dispatch({
-      type: 'datamodel.getPreference',
+      type: 'pds.getCols',
+      payload: {
+        modelName: 'DataServiceCol'
+      },
       callback: data => {
-        if ((data.cols||'') === '') {
-          onCheckAllChange(true);
-        } else {
-          setCheckedKeys(data.cols.split(','));
-        }
+        setCheckedKeys(data?.map(item => item.titleCnName));
       }
     })
   }
@@ -76,11 +74,12 @@ const ColSettingModal = (props) => {
   const onModalOk = () => {
     setConfirmLoading(true);
     dispatch({
-      type: 'datamodel.savePreference',
+      type: 'pds.saveCols',
       payload: { 
-        data: {
-          cols: checkedKeys.join(',')
-        }
+        params: {modelName: 'DataServiceCol'},
+        data: checkedKeys?.map(item => {
+          return { titleCnName: item }
+        })
       },
       callback: () => {
         setConfirmLoading(false);

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

-import React, { useState, useEffect, useRef, useContext } from "react";
-import { Tooltip, Modal, Pagination, Table, Typography } from 'antd';
+import React, { useState, useEffect, useRef, useContext, useMemo } from "react";
+import { Tooltip, Modal, Pagination, Typography } from 'antd';
 import { DownOutlined, UpOutlined } from '@ant-design/icons';
 import SmoothScroll from 'smooth-scroll';
 import classnames from 'classnames';
@@ -9,6 +9,7 @@ import ResizeObserver from 'rc-resize-observer';
 import ServiceDetail from './ServiceDetailModal';
 import SampleModal from './SampleModal';
 import ExchangeOwnerModal from './ExchangeOwner';
+import Table from '../../ResizeableTable';
 
 import { dispatch } from '../../../../model'; 
 import { showMessage, getQueryParam, paginate, isSzseEnv, formatDate, getDataModelerRole } from '../../../../util';
@@ -130,7 +131,7 @@ const ResizeableHeaderCell = props => {
 
 const ModelTable = (props) => {
 
-  const { data, onChange, onItemAction, onSelect, onHistory, catalogId, keyword, onAutoCreateTable, offset = null, modelId = null, modelPid = null, view, selectModelerIds, onSubSelect, modelState, user, isOnlyEnding } = props;
+  const { data, onChange, onItemAction, onSelect, onHistory, catalogId, keyword, onAutoCreateTable, offset = null, modelId = null, modelPid = null, view, selectModelerIds, onSubSelect, modelState, user, isOnlyEnding, visibleColNames } = props;
 
   const MENU_ID = (((modelId||'') !== '') ? `model-table-contextmenu-${modelId}` : 'model-table-contextmenu');
 
@@ -172,28 +173,28 @@ const ModelTable = (props) => {
         return (<ModelNameColumn text={text} record={record} detailItem={detailItem} />);
       }
     },
-    {
-      title: 'URI',
-      dataIndex: 'odata',
-      ellipsis: true,
-      width: 170,
-      render: (text, _, __) => {
-        return (
-          <React.Fragment>
-          {
-            text ? <div className='flex'> 
-              <Tooltip title={text||''} overlayClassName='tooltip-common'>
-                <Text ellipsis={true}>
-                {text||''}
-                </Text>
-              </Tooltip>
-              <Text copyable={{ text }}></Text>
-            </div> : ''
-          }
-          </React.Fragment>
-        );
-      }
-    },
+    // {
+    //   title: 'URI',
+    //   dataIndex: 'odata',
+    //   ellipsis: true,
+    //   width: 170,
+    //   render: (text, _, __) => {
+    //     return (
+    //       <React.Fragment>
+    //       {
+    //         text ? <div className='flex'> 
+    //           <Tooltip title={text||''} overlayClassName='tooltip-common'>
+    //             <Text ellipsis={true}>
+    //             {text||''}
+    //             </Text>
+    //           </Tooltip>
+    //           <Text copyable={{ text }}></Text>
+    //         </div> : ''
+    //       }
+    //       </React.Fragment>
+    //     );
+    //   }
+    // },
     {
       title: '中文名称',
       dataIndex: 'cnName',
@@ -309,7 +310,7 @@ const ModelTable = (props) => {
     },
   ];
 
-  const [ columns, setColumns ] = useState([]);
+  // const [ columns, setColumns ] = useState([]);
   // const [ includePathColumns, setIncludePathColumns ] = useState([]);
   const [ pagination, setPagination ] = useState( { pageNum: 1, pageSize: 20 } );
   const [ currentItem, setCurrentItem ] = useState(null);
@@ -422,53 +423,17 @@ const ModelTable = (props) => {
     //eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data, pagination, sortRule])
 
-  useEffect(() => {
-    if (tableWidth>0 && columns.length===0) {
-      let newColumns = [];
-
-      let newCols = [...cols];
-      if ((modelId||'') !== '') {
-        newCols = cols.filter(item => item.dataIndex!=='key');
-      }
-
-      newCols.forEach((column, index) => {
-        const newColumn = {...column}; 
-        if (!newColumn.width) {
-          const rowWidth = (newCols.reduce((preVal, col) => (col.width?col.width:0) + preVal, 0)) + 97; //展开50 勾选32 滚动条15
-          
-          if (tableWidth - rowWidth > 200) {
-            newColumn.width = tableWidth - rowWidth;        
-          } else {
-            newColumn.width = 200;
-          }
-        }
-
-        newColumns.push(newColumn);
-      });
-
-      // const includePathCols = [...cols];
-      // includePathCols.splice(3, 0, pathColumn);
-
-      // includePathCols.forEach((column, index) => {
-      //   const newColumn = {...column}; 
-      //   if (!newColumn.width) {
-      //     const rowWidth = (includePathCols.reduce((preVal, col) => (col.width?col.width:0) + preVal, 0)) + 97;
-          
-      //     if (tableWidth - rowWidth > 200) {
-      //       newColumn.width = tableWidth-rowWidth;        
-      //     } else {
-      //       newColumn.width = 200;
-      //     }
-      //   }
-
-      //   newIncludePathColumns.push(newColumn);
-      // });
-
-      setColumns([ ...newColumns, <Column key='auto' />]);
-      // setIncludePathColumns([ ...newIncludePathColumns, <Column key='auto' />]);
+  const columns = useMemo(() => {
+    let newCols = [...cols];
+    if ((visibleColNames||[]).length > 0) {
+      newCols = newCols.filter(col => visibleColNames.indexOf(col.title)!==-1 || col.title==='序号');
+    }
+    if (modelId) {
+      newCols.filter(col => col.title !=='序号');
     }
-    //eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ tableWidth ])
+
+    return newCols;
+  }, [visibleColNames, modelId])
 
   const modelEventChange = (e) => {
     if (e.key === 'modelChange') {
@@ -682,21 +647,6 @@ const ModelTable = (props) => {
     }
   }
 
-  const handleResize = index => (e, { size }) => {
-    let nextColumns = [...columns];
-
-    // if ((modelId||'')==='' && (view==='state'||(keyword||'')!=='')) {
-    //   nextColumns = [...includePathColumns];
-    // }
-    
-    nextColumns[index] = {
-      ...nextColumns[index],
-      width: size.width,
-    };
-
-    setColumns(nextColumns);
-  };
-
   const onTableChange = (pagination, filters, sorter, extra) => {
     if (sorter) {
       setSortRule(sorter);
@@ -845,23 +795,6 @@ const ModelTable = (props) => {
     refresh && onChange?.();
   }
 
-  const mergedColumns = () => {
-    let newColumns = [...columns];
-    // if ((modelId||'')==='' && (view==='state'||(keyword||'')!=='')) {
-    //   newColumns = [...includePathColumns];
-    // }
-
-    return (
-      newColumns.map((col, index) => ({
-        ...col,
-        onHeaderCell: column => ({
-          width: column.width,
-          onResize: handleResize(index),
-        }),
-      }))
-    );
-  }
-
   let disableEdit = false, disableDelete = false, editTip = '', deleteTip = '', editMenuTitle = '编辑';
 
   if (!currentItem?.editable && currentItem?.state?.id!=='4') {
@@ -890,58 +823,47 @@ const ModelTable = (props) => {
 
   return (
     <div className={classes}>
-      <ResizeObserver
-        onResize={({ width }) => {
-          setTableWidth(width);
+      <Table
+        rowSelection={view!=='grant'?rowSelection:undefined} 
+        rowKey={'id'}
+        columns={columns||[]}
+        dataSource={modelId?(subData||[]):(filterData||[])}
+        pagination={false}
+        size={modelId?'small':'default'}
+        rowClassName={(record, index) => 'cursor-contextmenu'}
+        onRow={(record, index) => {
+          return {
+            id: `data-model-${record?.id}`,
+            style: { backgroundColor: (record?.id===anchorId)?'#e7f7ff':'transparent' },
+            onContextMenu: event => {
+              setCurrentItem(record);
+              displayMenu(event);
+            },
+          }
         }}
-      >
-        <Table
-          rowSelection={view!=='grant'?rowSelection:undefined} 
-          components={{
-            header: {
-              cell: ResizeableHeaderCell,
-            }
+        scroll={{ y: modelId?null:((filterData||[]).length===0?null:'calc(100vh - 121px - 57px - 24px - 38px - 44px)') }}
+        onChange={onTableChange}
+        expandable={!isOnlyEnding ? expandable : undefined}
+      />
+      {
+        !modelId && (data||[]).length>0 && <Pagination
+          className="text-center mt-3"
+          showSizeChanger
+          showQuickJumper
+          onChange={(_pageNum, _pageSize) => {
+            setPagination({ pageNum: _pageNum, pageSize: _pageSize || 20 });
           }}
-          columns={mergedColumns()}
-          rowKey={'id'}
-          dataSource={modelId?(subData||[]):(filterData||[])}
-          pagination={false}
-          size={modelId?'small':'default'}
-          rowClassName={(record, index) => 'cursor-contextmenu'}
-          onRow={(record, index) => {
-            return {
-              id: `data-model-${record?.id}`,
-              style: { backgroundColor: (record?.id===anchorId)?'#e7f7ff':'transparent' },
-              onContextMenu: event => {
-                setCurrentItem(record);
-                displayMenu(event);
-              },
-            }
+          onShowSizeChange={(_pageNum, _pageSize) => {
+            setPagination({ pageNum: 1, pageSize: _pageSize });
           }}
-          scroll={{ y: modelId?null:((filterData||[]).length===0?null:'calc(100vh - 121px - 57px - 24px - 38px - 44px)') }}
-          onChange={onTableChange}
-          expandable={!isOnlyEnding ? expandable : undefined}
+          current={pageNum}
+          pageSize={pageSize}
+          defaultCurrent={1}
+          total={(data||[]).length}
+          pageSizeOptions={[10,20,50]}
+          showTotal={total => `共 ${total} 条`}
         />
-      </ResizeObserver>
-        {
-          !modelId && (data||[]).length>0 && <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]}
-            showTotal={total => `共 ${total} 条`}
-          />
-        }
+      }
       <RcMenu id={MENU_ID}>
         {
           (getDataModelerRole(user)!==DataModelerRoleReader) && view!=='grant' && !isOnlyEnding && <RcItem id="edit" disabled={!currentItem?.editable&&!currentItem?.permitCheckOut} onClick={handleItemClick}>

src/view/Manage/Model/index.jsx

@@ -74,7 +74,7 @@ class Model extends React.Component {
   
   componentDidMount() {
     this.getModelStates();
-    // this.getPreference();
+    this.getPreference();
 
     window?.addEventListener("storage", this.modelEventChange);
   }
@@ -111,14 +111,12 @@ class Model extends React.Component {
 
   getPreference = () => {
     dispatch({
-      type: 'datamodel.getPreference',
+      type: 'pds.getCols',
+      payload: {
+        modelName: 'DataServiceCol'
+      },
       callback: data => {
-        this.setState();
-        if ((data.cols||'') === '') {
-          this.setState({visibleColNames: []});
-        } else {
-          this.setState({visibleColNames: data.cols.split(',')});
-        }
+        this.setState({visibleColNames: data?.map(item => item.titleCnName)});
       }
     })
   }
@@ -679,9 +677,9 @@ class Model extends React.Component {
                     <Button onClick={this.onBatchDeleteBtnClick} disabled={(selectModelerIds||[]).length===0}>删除</Button>
                   </Tooltip>
                 </Space> */}
-                {/* <Space>
+                <Space>
                   <Button onClick={this.onVisibleColSettingClick}>可见列设置</Button>
-                </Space> */}
+                </Space>
                 </React.Fragment>
             }
             {
@@ -795,6 +793,11 @@ class Model extends React.Component {
           ids={selectModelerIds}
           onCancel={this.onOfflineCancel}
         />
+
+        <ColSettingModal
+          visible={colSettingModalVisible}
+          onCancel={this.onColSettingModalCancel}
+        />
       </div>
     );
   }