可见列设置

src/model/datamodel.js

@@ -110,6 +110,14 @@ export function* getSupportedIndextypes() {
   return yield call(datamodelerService.getSupportedIndextypes);
 }
 
+export function* savePreference(payload) {
+  return yield call(datamodelerService.savePreference, payload);
+} 
+
+export function* getPreference() {
+  return yield call(datamodelerService.getPreference);
+} 
+
 export function* extractExcelContent(payload) {
   return yield call(datamodelerService.extractExcelContent, payload);
 }

src/service/datamodeler.js

@@ -67,6 +67,14 @@ export function getSupportedIndextypes() {
   return GetJSON("/datamodeler/easyDataModelerCURD/getSupportedIndextypes");
 }
 
+export function savePreference(payload) {
+  return PostJSON("/datamodeler/easyDataModelerCURD/savePreference", payload);
+}
+
+export function getPreference() {
+  return GetJSON("/datamodeler/easyDataModelerCURD/getPreference");
+}
+
 export function extractExcelContent(payload) {
   return PostFile("/datamodeler/easyDataModelerDesign/kickStart", payload);
 }

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

+import { useState, useEffect } from 'react';
+import { Modal, Button, Switch, Row, Col, Checkbox, Typography } from 'antd';
+
+import { dispatch } from '../../../../model';
+
+const cols = [
+  {title: '模型名称', require: true},
+  {title: '中文名称'},
+  {title: '状态'},
+  {title: '创建人'},
+  {title: '版本号'},
+  {title: '模型描述'},
+];
+
+const ColSettingModal = (props) => {
+  const {visible, onCancel} = props;
+
+  const [checkedKeys, setCheckedKeys] = useState([]);
+  const [confirmLoading, setConfirmLoading] = useState(false);
+
+  useEffect(() => {
+
+    if (visible) {
+      getPreference();
+    }
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visible]);
+
+  const getPreference = () => {
+    dispatch({
+      type: 'datamodel.getPreference',
+      callback: data => {
+        if ((data.cols||'') === '') {
+          onCheckAllChange(true);
+        } else {
+          setCheckedKeys(data.cols.split(','));
+        }
+      }
+    })
+  }
+
+  const onCheckAllChange = (checked) => {
+    const newCheckedKeys = [];
+
+    if (checked) {
+      cols.forEach(col => {
+        newCheckedKeys.push(col.title);
+      });
+    } else {
+      cols.forEach(col => {
+        if (col.require) {
+          newCheckedKeys.push(col.title);
+        }
+      });
+    }
+
+    setCheckedKeys(newCheckedKeys);
+  }
+
+  const onCheckChange = (e) => {
+    if (e.target.checked) {
+      setCheckedKeys([...checkedKeys, e.target.value]);
+    } else {
+      const index = checkedKeys.findIndex(key => key === e.target.value);
+      const newCheckedKeys = [...checkedKeys];
+      newCheckedKeys.splice(index, 1)
+      setCheckedKeys(newCheckedKeys);
+    }
+  }
+
+  const onModalCancel = () => {
+    onCancel && onCancel();
+  }
+
+  const onModalOk = () => {
+    setConfirmLoading(true);
+    dispatch({
+      type: 'datamodel.savePreference',
+      payload: { 
+        data: {
+          cols: checkedKeys.join(',')
+        }
+      },
+      callback: () => {
+        setConfirmLoading(false);
+        onCancel && onCancel(true);
+      },
+      error: () => {
+        setConfirmLoading(false);
+      }
+    })
+  }
+
+  return (
+    <Modal
+      title='可见列设置'
+      visible={visible}
+      onCancel={onModalCancel}
+      footer={[ 
+        <Button
+          key="0" 
+          onClick={onModalCancel}
+        >
+        取消
+        </Button>,
+        <Button
+          key="1" 
+          type="primary"
+          onClick={onModalOk}
+          loading={confirmLoading}
+        >
+        确定
+        </Button>,
+      ]}
+    >
+      <div className='d-flex'>
+        <Switch 
+          checkedChildren="全不选" 
+          unCheckedChildren="全选" 
+          onChange={onCheckAllChange}
+          style={{ marginLeft: 'auto' }}
+        />
+      </div>
+      <div className='mt-3' style={{ maxHeight: 450, overflow: 'auto' }}>
+        <Row>
+        {
+          cols.map((col, index) => {
+            return (
+              <Col className='mb-3' key={index} md={6}>
+                <div className='d-flex'>
+                  <Checkbox checked={ checkedKeys.indexOf(col.title||'')!==-1 } value={col.title} onChange={onCheckChange} disabled={col.require} >
+                  </Checkbox>
+                  <Typography.Paragraph className='ml-1' title={col.title} ellipsis>
+                  {col.title}
+                  </Typography.Paragraph>
+                </div>
+              </Col>
+            )
+          })
+        }
+        </Row>
+      </div>
+    </Modal>
+  )
+}
+
+export default ColSettingModal;
\ No newline at end of file

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

@@ -124,7 +124,7 @@ const ResizeableHeaderCell = props => {
 
 const ExpandedModelTable = (props) => {
 
-  const { onItemAction, onExpandedSelect, onExpandedChange, keyword, id = null, pid = null, view, checked, dataMap, onContextMenu, user } = props;
+  const { onItemAction, onExpandedSelect, onExpandedChange, id = null, pid = null, checked, dataMap, onContextMenu, user, visibleColNames } = props;
   
   const [ tableWidth, setTableWidth ] = useState(0);
   const [ selectedRowKeys, setSelectedRowKeys ] = useState([]);
@@ -250,9 +250,13 @@ const ExpandedModelTable = (props) => {
   }, [])
 
   useEffect(() => {
-    if (tableWidth>0 && columns.length===0) {
+    if (tableWidth>0) {
       let newColumns = [...cols];
 
+      if ((visibleColNames||[]).length > 0) {
+        newColumns = newColumns.filter(col => visibleColNames.indexOf(col.title)!==-1);
+      }
+
       newColumns.forEach((column, index) => {
         if (!column.width) {
           const rowWidth = (newColumns.reduce((preVal, col) => (col.width?col.width:0) + preVal, 0)) + 97;
@@ -268,7 +272,7 @@ const ExpandedModelTable = (props) => {
       setColumns([ ...newColumns, <Column key='auto' />]);
     }
     //eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ tableWidth ])
+  }, [ tableWidth, visibleColNames ])
 
   const getCheckoutDataModel = () => {
     dispatch({

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

@@ -94,7 +94,7 @@ const ModelNameColumn = (props) => {
 }
 
 const ModelTable = (props) => {
-  const { data, onChange, onItemAction, onSelect, onHistory, catalogId, keyword, onAutoCreateTable, offset = null, view, modelState, user, selectModelerIds } = props;
+  const { data, onChange, onItemAction, onSelect, onHistory, catalogId, keyword, onAutoCreateTable, offset = null, view, modelState, user, selectModelerIds, visibleColNames } = props;
   
   const [ selectedRowKeys, setSelectedRowKeys ] = useState([]);
   const [ expandedSelectedRowKeys, setExpandedSelectedRowKeys ] = useState([]);
@@ -216,6 +216,20 @@ const ModelTable = (props) => {
     },
   ];
 
+  const columns = useMemo(() => {
+    let newCols = [...cols];
+    if ((visibleColNames||[]).length > 0) {
+      newCols = newCols.filter(col => visibleColNames.indexOf(col.name)!==-1 || col.name==='序号');
+
+      if (visibleColNames.indexOf('模型描述') === -1) {
+        newCols[newCols.length-1].width = null;
+      }
+    }
+
+    return newCols;
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visibleColNames])
+
   const summarySelectedCount = useMemo(() => {
     let newSelectedRowKeys = Array.from(new Set([...selectedRowKeys, ...expandedSelectedRowKeys]));
 
@@ -396,6 +410,7 @@ const ModelTable = (props) => {
               checked={expandedSelectedRowKeys.indexOf(row?.checkedOutId)!==-1}
               onContextMenu={onExpandedTableContextMenu}
               dataMap={expandedDataMapRef.current}
+              visibleColNames={visibleColNames}
               onExpandedSelect={onExpandedTableSelectChange}
               onExpandedChange={onExpandedDataMapChange}
               {...props} 
@@ -481,7 +496,7 @@ const ModelTable = (props) => {
         gridRef={gridRef}
         style={{ blockSize: 'calc(100vh - 94px - 37px - 57px - 24px - 32px)' }}
         checkable
-        columns={cols}
+        columns={columns}
         rows={data||[]}
         rowHeight={51}
         rowClassName={(row) => {

src/view/Manage/Model/index.jsx

@@ -19,6 +19,7 @@ import { dispatch, dispatchLatestHomepage } from '../../../model';
 import { Action, CatalogId, ModelerId, Hints, ModelerData, PermitCheckOut, Editable, StateId, Holder, DDL, DataModelerRoleReader, ReadOnly } from '../../../util/constant';
 import { AppContext } from '../../../App';
 import DebounceInput from './Component/DebounceInput';
+import ColSettingModal from './Component/ColSettingModal';
 
 import './index.less';
 
@@ -56,11 +57,14 @@ class Model extends React.Component {
       offset: null,
       expandTree: true,
       showDeleteTip: false,
+      colSettingModalVisible: false,
+      visibleColNames: [],
     }
   }
   
   componentDidMount() {
     this.getModelStates();
+    this.getPreference();
 
     window?.addEventListener("storage", this.modelEventChange);
   }
@@ -92,6 +96,20 @@ class Model extends React.Component {
     })
   }
 
+  getPreference = () => {
+    dispatch({
+      type: 'datamodel.getPreference',
+      callback: data => {
+        this.setState();
+        if ((data.cols||'') === '') {
+          this.setState({visibleColNames: []});
+        } else {
+          this.setState({visibleColNames: data.cols.split(',')});
+        }
+      }
+    })
+  }
+
   onViewChange = (value) => {
     this.setState({ currentView: value });
   }
@@ -265,6 +283,10 @@ class Model extends React.Component {
     this.setState({ showDeleteTip: true });
   }
 
+  onVisibleColSettingClick = () => {
+    this.setState({colSettingModalVisible: true});
+  }
+
   onAutoCreateTable = (item) => {
 
     this.setState({ exportDDLModalVisible: true, selectModelerNames: [item.name||''], exportDDLModalReference: 'createTable', currentModel: item });
@@ -433,8 +455,16 @@ class Model extends React.Component {
     }
   }
 
+  onColSettingModalCancel = (refresh = false) => {
+    this.setState({ colSettingModalVisible: false }, () => {
+      if (refresh) {
+        this.getPreference();
+      }
+    });
+  }
+
   render() {
-    const { importModalVisible, catalogId, loadingTableData, selectModelerIds, keyword, filterTableData, selectModelerNames, exportDDLModalVisible, exportOtherModalVisible, importStockWordDrawerVisible , loadingStates, modelStates, currentModelState, currentView, recatalogModalVisible, exportDDLModalReference, currentModel, offset, historyAndVersionDrawerVisible, modelerId, startFlowModalVisible, expandTree, showDeleteTip } = this.state;
+    const { importModalVisible, catalogId, loadingTableData, selectModelerIds, keyword, filterTableData, selectModelerNames, exportDDLModalVisible, exportOtherModalVisible, importStockWordDrawerVisible , loadingStates, modelStates, currentModelState, currentView, recatalogModalVisible, exportDDLModalReference, currentModel, offset, historyAndVersionDrawerVisible, modelerId, startFlowModalVisible, expandTree, showDeleteTip, colSettingModalVisible, visibleColNames } = this.state;
 
     const classes = classNames('data-model', {
       'data-model-collapse': !expandTree
@@ -506,6 +536,9 @@ class Model extends React.Component {
                     <Button onClick={this.onBatchDeleteBtnClick} disabled={(selectModelerIds||[]).length===0}>删除</Button>
                   </Tooltip>
                 </Space>
+                <Space>
+                  <Button onClick={this.onVisibleColSettingClick}>可见列设置</Button>
+                </Space>
                 </React.Fragment>
             }
             </Space>
@@ -556,6 +589,7 @@ class Model extends React.Component {
               offset={offset}
               keyword={keyword}
               selectModelerIds={selectModelerIds}
+              visibleColNames={visibleColNames}
               onChange={this.onTableChange} 
               onSelect={this.onTableSelect} 
               onItemAction={this.onTableItemAction} 
@@ -619,6 +653,11 @@ class Model extends React.Component {
           tip='您确定要删除这些模型吗?'
           onCancel={this.onDeleteTipModalCancel}
         /> 
+
+        <ColSettingModal 
+          visible={colSettingModalVisible}
+          onCancel={this.onColSettingModalCancel}
+        />
       </div>
       }
       </AppContext.Consumer>