资产管理

src/view/Manage/AssetManage/Component/AssetAction.jsx

@@ -9,7 +9,7 @@ import { unfoldedElements } from '../util';
 
 const AssetAction = (props) => {
 
-  const { id, dirId, action, terms } = props;
+  const { id, dirId, action, terms, onChange } = props;
 
   const [ currentAction, setCurrentAction ] = useState(action);
   const [ assetParams, setAssetParams ] = useState({ assets: [], attributes: [], attributesFoldMap: {} });
@@ -17,6 +17,7 @@ const AssetAction = (props) => {
   const [ metadataId, setMetadataId ] = useState('');
   const [ loading, setLoading ] = useState(false);
   const [ confirmLoading, setConfirmLoading ] = useState(false);
+  const [ fullScreen, setFullScreen ] = useState(false);
 
   const { assets, attributes, attributesFoldMap } = assetParams;
 
@@ -149,6 +150,7 @@ const AssetAction = (props) => {
           setCurrentAction('detail');
           getAsset();
           showMessage("success",(action==='add')?"新增成功":"修改成功");
+          onChange && onChange();
         },
         error: () => {
           setConfirmLoading(false);
@@ -168,6 +170,10 @@ const AssetAction = (props) => {
     setAssetParams({...assetParams, attributesFoldMap: newAttributesFoldMap});
   }
 
+  const onFullScreenClick = () => {
+    setFullScreen(!fullScreen);
+  }
+
   const formItemLayout = {
     labelCol: {
       xs: { span: 24 },
@@ -184,7 +190,14 @@ const AssetAction = (props) => {
       className='flex'
       style={{
         height: '100%',
-        flexDirection: 'column'
+        flexDirection: 'column',
+        position: fullScreen?'absolute':'relative',
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+        backgroundColor: '#fff',
+        zIndex: fullScreen?100:0,
       }}
     >
       <div
@@ -199,17 +212,20 @@ const AssetAction = (props) => {
         <div style={{ color: 'rgba(0,0,0,0.75)' }}>资产详情</div>
         <Space>
           <Button loading={confirmLoading} onClick={onActionButtonClick}>{ currentAction==='detail'?'编辑':'保存'}</Button>
+
+          <Button onClick={onFullScreenClick}>全屏</Button>
         </Space>
       </div>
       
       <div
         style={{
           flex: 1,
-          overflow: 'auto'
+          overflow: 'auto',
         }}
       >
         <Spin 
           spinning={loading}
+          style={{ marginTop: 30 }}
         >
           {
             (attributes||[]).map((attribute, index) => {

src/view/Manage/AssetManage/Component/AssetDirectory.jsx

@@ -6,7 +6,7 @@ import { dispatch } from '../../../../model';
 import record from '../../../../assets/record.png'; 
 
 const AssetDirectory = (props) => {
-  const { id } = props;
+  const { id, directoryChanged, assetCount } = props;
   const [ dir, setDir ] = useState(null);
   const [ loading, setLoading ] = useState(false);
 
@@ -15,7 +15,7 @@ const AssetDirectory = (props) => {
       getDirectory();
     }
     //eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ id ])
+  }, [ id, directoryChanged ])
 
   const getDirectory = () => {
     setLoading(true);
@@ -70,7 +70,7 @@ const AssetDirectory = (props) => {
           <img src={record} style={{ width: 30, height: 30 }} alt="" />
           <div>
             <div>记录数</div>
-            <div>0</div>
+            <div>{assetCount}</div>
           </div>
         </div>
       </div>

src/view/Manage/AssetManage/Component/AssetTable.jsx

@@ -12,10 +12,11 @@ import { showMessage, showNotifaction, getQueryParam, inputWidth, isSzseEnv } fr
 import { AnchorId, AnchorTimestamp } from '../../../../util/constant';
 
 import "./AssetTable.less";
+import { select } from "redux-saga/effects";
 
 const AssetTable = (props) => {
 
-  const { readOnly = false, className, nodeId, nodeType, onSelect } = props;
+  const { readOnly = false, className, nodeId, nodeType, elementsChanged, assetActionChanged, onSelect, onCountChange } = props;
   const [ loading, setLoading ] = useState(false);
   const [ columns, setColumns ] = useState([]);
   const [ assets, setAssets ] = useState([]);
@@ -32,6 +33,7 @@ const AssetTable = (props) => {
   const { pageNum, pageSize } = pagination;
   const [ keyword, setKeyword ] = useState('');
   const [ batchCatalogChange, setBatchCatalogChange ] = useState(false);
+  const [ fullScreen, setFullScreen ] = useState(false);
 
   const [ modal, contextHolder ] = Modal.useModal();
   const anchorId = getQueryParam(AnchorId, props.location.search);
@@ -42,6 +44,9 @@ const AssetTable = (props) => {
 
   useEffect(() => {
     if ((nodeId||'') !== '' ) {
+      setKeyword('');
+      setSelectKey('');
+      setCheckedKeys([]);
 
       if (shouldScrollRef.current === true) {
 
@@ -52,9 +57,6 @@ const AssetTable = (props) => {
         setPagination({ ...pagination, pageNum: 1 });
       }
 
-      setKeyword('');
-      setCheckedKeys([]);
-
     }
     //eslint-disable-next-line react-hooks/exhaustive-deps
   }, [ nodeId ])
@@ -73,7 +75,7 @@ const AssetTable = (props) => {
       getFilterElementsGroupThenGetDataAssets();
     }
     //eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ keyword, pagination ])
+  }, [ keyword, pagination, elementsChanged, assetActionChanged ])
 
   useEffect(() => {
     if (shouldScrollRef.current) {
@@ -244,9 +246,21 @@ const AssetTable = (props) => {
         })
         
         setAssets(_assets);
-        setSelectKey(_assets.length>0?_assets[0].id:'');
-        onSelect && onSelect(_assets.length>0?_assets[0].id:'')
+
+        if ((selectKey||'') !=='') {
+          const index = _assets.findIndex((asset) => asset.id === selectKey);
+
+          if (index === -1) {
+            setSelectKey(_assets.length>0?_assets[0].id:'');
+            onSelect && onSelect(_assets.length>0?_assets[0].id:'');
+          }
+        } else {
+          setSelectKey(_assets.length>0?_assets[0].id:'');
+          onSelect && onSelect(_assets.length>0?_assets[0].id:'');
+        }
+
         setTotal(data.total||0);
+        onCountChange && onCountChange(data.total||0);
         setLoading(false);
       },
       error: () => {
@@ -352,13 +366,18 @@ const AssetTable = (props) => {
     setCheckedKeys(keys);
   };
 
+  const onFullScreenClick = () => {
+    setFullScreen(!fullScreen);
+  }
+
   const rowSelection = {
     selectedRowKeys: checkedKeys,
     onChange: onSelectChange,
   };
 
   const classes = classNames('asset-list', className, {
-    'asset-list-read-only': readOnly
+    'asset-list-read-only': readOnly,
+    'asset-list-fullscreen': fullScreen,
   });  
 
   return(
@@ -369,7 +388,8 @@ const AssetTable = (props) => {
           alignItems: 'center',
           justifyContent: 'space-between',
           borderBottom: '1px solid #EFEFEF',
-          height: 52
+          height: 52,
+          padding: fullScreen?'0 15px': '0'
         }}
       > 
         <Space>
@@ -395,17 +415,20 @@ const AssetTable = (props) => {
             </Tooltip>
           }
         </Space>
-        <Input 
-          placeholder="请输入资产要素值" 
-          allowClear 
-          value={keyword}
-          onChange={onSearchInputChange} 
-          style={{ width: inputWidth }}
-        />
+        <Space>
+          <Input 
+            placeholder="请输入资产要素值" 
+            allowClear 
+            value={keyword}
+            onChange={onSearchInputChange} 
+            style={{ width: inputWidth }}
+          />
+          <Button onClick={onFullScreenClick}>全屏</Button>
+        </Space>
       </div>
       <div
         style={{
-          padding: '12px 0 0',
+          padding: fullScreen?'12px 15px 0':'12px 0 0',
         }}
       >
         <Table
@@ -432,7 +455,7 @@ const AssetTable = (props) => {
           dataSource={assets}
           pagination={false}
           size='default'
-          scroll={{ x: 1000, y: (assets||[]).length>0?'calc(100vh - 182px - 52px - 52px - 84px - 12px)':null }}
+          scroll={{ x: 1000, y: (assets||[]).length>0?(fullScreen?'calc(100vh - 182px - 12px - 50px)':'calc(100vh - 182px - 52px - 52px - 84px - 12px)'):null }}
         />
       </div> 
       <Pagination

src/view/Manage/AssetManage/Component/AssetTable.less

 @import '../../../../variables.less';
 
 .asset-list {
+    background-color: #fff;
+    z-index: 0;
     .highlight-row {
         .yy-table-cell {
             background-color: #e7f7ff !important;
         }
     }  
+}
+
+.asset-list-fullscreen {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 100;
 }
\ No newline at end of file

src/view/Manage/AssetManage/Component/AssetTree.jsx

@@ -13,7 +13,7 @@ import './AssetTree.less';
 
 const AssetTree = (props) => {
 
-  const { readOnly = false, checkable = false, onSelect, className, onCheck, tableId, reference='', showCustom=true } = props; 
+  const { readOnly = false, checkable = false, onSelect, className, onCheck, tableId, reference='', showCustom=true, onDirectoryChange } = props; 
   const [ keyword, setKeyword ] = useState('');
   const [ loading, setLoading ] = useState(false);
   const [ treeData, setTreeData ] = useState([]);
@@ -388,7 +388,13 @@ const AssetTree = (props) => {
 
   const onUpdateDirectoryCancel = (refresh=false) => {
     setUpdateDirectoryModalVisible(false);
-    refresh && getAllDirectoryAsTree(false);
+    if (refresh) {
+      getAllDirectoryAsTree(false);
+
+      if (updateDirectoryAction === 'edit') {
+        onDirectoryChange && onDirectoryChange();
+      }
+    }
   }
 
   const onImportDirectoryCancel = (refresh=false, resetCurrentDirId=false) => {

src/view/Manage/AssetManage/Component/ElementManage.jsx

@@ -6,6 +6,8 @@ import AttributeRelationModal from "./AttributeRelationModal";
 import { showNotifaction } from '../../../../util';
 
 const ElementManage = (props) => {
+  const { onChange } = props;
+
   const [ importElementVisible, setImportElementVisible ] = useState(false);
   const [ attributeRelationModalVisible, setAttributeRelationModalVisible ] = useState(false);
 
@@ -21,9 +23,13 @@ const ElementManage = (props) => {
     setAttributeRelationModalVisible(true);
   }
 
-  const onImportElementCancel = (visible = false, tip = '') => {
+  const onImportElementCancel = (visible = false, change = false, tip = '') => {
     setImportElementVisible(visible);
 
+    if (change) {
+      onChange && onChange();
+    }
+
     if (tip && tip!== '') {
       showNotifaction('导入提示', tip, 5);
     }

src/view/Manage/AssetManage/Component/FilterElementModal.jsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState }  from 'react';
 import { Row, Col, Checkbox, Typography, Button, Switch, Modal } from 'antd';
 
 import { dispatch } from '../../../../model';
+import { requireElements } from '../util';
 import './FilterElementModal.less';
 
 const FilterElementModal = (props) => {
@@ -79,7 +80,7 @@ const FilterElementModal = (props) => {
       });
     } else {
       (elements||[]).forEach(element => {
-        if ((element.name||'')==='中文名称' || (element.name||'')==='资产项') {
+        if (requireElements.indexOf(element.name||'')!==-1) {
           _selectedKeys.push(element.id||'');
         }
       });
@@ -165,7 +166,7 @@ const FilterElementModal = (props) => {
                   return (
                     <Col className='mb-3' key={_index} md={6}>
                       <div className='d-flex'>
-                      <Checkbox checked={ selectedKeys.indexOf(element.id||'')!==-1 } value={element.id||''} onChange={onCheckChange} disabled={(element.name||'')==='中文名称'||(element.name||'')==='资产项'} >
+                      <Checkbox checked={ selectedKeys.indexOf(element.id||'')!==-1 } value={element.id||''} onChange={onCheckChange} disabled={requireElements.indexOf(element.name)!==-1} >
                       </Checkbox>
                       <Typography.Paragraph className='ml-1' title={element.name||''} ellipsis>
                       {element.name||''}

src/view/Manage/AssetManage/Component/ImportElement.jsx

@@ -46,7 +46,7 @@ const ImportElement = (props) => {
       callback: data => {
         setConfirmLoading(false);
         reset();
-        onCancel && onCancel(false, data);
+        onCancel && onCancel(false, true, data);
       },
       error: () => {
         setConfirmLoading(false);

src/view/Manage/AssetManage/index.jsx

@@ -17,6 +17,11 @@ const AssetManage = (props) => {
   const [ assetId, setAssetId ] = useState('');
   const [ expandTree, setExpandTree ] = useState(true);
 
+  const [ assetCount, setAssetCount ] = useState(0);
+  const [ directoryChanged, setDirectoryChanged ] = useState(false);
+  const [ elementsChanged, setElementsChanged ] = useState(false);
+  const [ assetActionChanged, setAssetActionChanged ] = useState(false);
+
   const onTreeSelect = (value, type) => {
 
     setNodeId(value||'');
@@ -31,6 +36,22 @@ const AssetManage = (props) => {
     setExpandTree(!expandTree);
   }
 
+  const onElementsChange = () => {
+    setElementsChanged(!elementsChanged);
+  }
+
+  const onDirectoryChange = () => {
+    setDirectoryChanged(!directoryChanged);
+  }
+
+  const onAssetActionChange = () => {
+    setAssetActionChanged(!assetActionChanged);
+  }
+
+  const onAssetCountChange = (count) => {
+    setAssetCount(count);
+  }
+
   const classes = classNames('asset-manage', {
     'asset-manage-collapse': !expandTree
   });  
@@ -38,7 +59,7 @@ const AssetManage = (props) => {
   return (
     <div className={classes}>
       <div className='left'>
-        <AssetTree onSelect={onTreeSelect} {...props} />
+        <AssetTree onSelect={onTreeSelect} onDirectoryChange={onDirectoryChange} {...props} />
       </div>
       <div className='tree-toggle-wrap'>
         <div className='tree-toggle' onClick={treeToggleClick}>
@@ -46,13 +67,14 @@ const AssetManage = (props) => {
         </div>
       </div>
       <div className='middle'>
-        <ElementManage />
-        <AssetDirectory id={nodeId} />
-        <AssetTable nodeId={nodeId} nodeType={nodeType} onSelect={onTableSelect} {...props} />
+        <ElementManage onChange={onElementsChange} />
+        <AssetDirectory id={nodeId} assetCount={assetCount} directoryChanged={directoryChanged} />
+        <AssetTable nodeId={nodeId} nodeType={nodeType} elementsChanged={elementsChanged} assetActionChanged={assetActionChanged} onSelect={onTableSelect} onCountChange={onAssetCountChange} {...props} />
       </div>
       <div className='right'>
-        <AssetAction id={assetId} dirId={nodeId} action='detail' />
+        <AssetAction id={assetId} dirId={nodeId} action='detail' onChange={onAssetActionChange} />
       </div>
+
     </div>
   )
 }

src/view/Manage/AssetManage/index.less

 .asset-manage {
   display: flex;
+  position: relative;
   background-color: #fff;
   height: 100%;