资产挂载到不同目录

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

 import React,{ useState, useEffect, useRef } from "react";
 import { Card, Checkbox, Button, List, Pagination, Space, Modal, Switch, Tooltip, Popover, Input, Spin } from "antd";
-import { EditOutlined, ReconciliationOutlined, DeleteOutlined  } from '@ant-design/icons';
+import { EditOutlined, ReconciliationOutlined, DeleteOutlined, UndoOutlined } from '@ant-design/icons';
 import classNames from 'classnames';
 import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
 import VList from 'react-virtualized/dist/commonjs/List';
@@ -8,6 +8,7 @@ import { CellMeasurer, CellMeasurerCache } from 'react-virtualized/dist/commonjs
 
 import ImportElement from './ImportElement';
 import FilterElement from './FilterElement';
+import AssetMount from '../../AssetRecycle/Component/AssetMount';
 import ImportAsset from './ImportAsset';
 import AssetEdit from './AssetEdit';
 import AssetDetail from "./AssetDetail";
@@ -33,6 +34,7 @@ const AssetTable = (props) => {
   const [ filterElementVisible, setFilterElementVisible ] = useState(false);
   const [ assetEditVisible, setAssetEditVisible ] = useState(false);
   const [ assetDetailVisible, setAssetDetailVisible ] = useState(false);
+  const [ assetMountVisible, setAssetMountVisible ] = useState(false);
   const [ currentAssetId, setCurrentAssetId ] = useState('');
   const [ assetEditAction, setAssetEditAction ] = useState('');
   const [ pagination, setPagination ] = useState( { pageNum: 1, pageSize: 20 } );
@@ -197,6 +199,16 @@ const AssetTable = (props) => {
     setAssetEditVisible(true);
   }
 
+  const mountAsset = (item) => {
+    setCurrentAssetId(item.id);
+    setAssetMountVisible(true);
+  }
+
+  const onAssetMountCancel = (refresh = false) => {
+    setAssetMountVisible(false);
+    refresh && getDataAssets();
+  }
+
   const deleteAsset = (item) =>{
     modal.confirm({
       title: '提示',
@@ -456,6 +468,11 @@ const AssetTable = (props) => {
                                       <Button icon={<ReconciliationOutlined />} size='small' onClick={() => { detailAsset(item); }} />
                                     </Tooltip>
                                   {
+                                    !readOnly && <Tooltip placement='bottom' title={'挂载'}>
+                                      <Button icon={<UndoOutlined />} size='small' onClick={() => { mountAsset(item); }} />
+                                    </Tooltip>
+                                  } 
+                                  {
                                     !readOnly && <Tooltip placement='bottom' title={'删除'}>
                                       <Button icon={<DeleteOutlined />} size='small' onClick={() => { deleteAsset(item); }} />
                                     </Tooltip>
@@ -513,6 +530,12 @@ const AssetTable = (props) => {
         nodeId={nodeId}
         onCancel={onImportAssetCancel}
       />
+      <AssetMount
+        visible={ assetMountVisible }
+        id={ currentAssetId }
+        onCancel={ onAssetMountCancel }
+        {...props}
+      />
       {contextHolder}
     </Card>
   )

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

@@ -13,12 +13,14 @@ import './AssetTree.less';
 
 const AssetTree = (props) => {
 
-  const { readOnly = false, onSelect, className } = props; 
+  const { readOnly = false, checkable = false, onSelect, className, onCheck, tableId } = props; 
   const [ keyword, setKeyword ] = useState('');
   const [ loading, setLoading ] = useState(false);
   const [ treeData, setTreeData ] = useState([]);
   const [ dataList, setDataList ] = useState([]);
+  const [ groupIds, setGroupIds ] = useState([]);
   const [ expandedKeys, setExpandedKeys ] = useState([]);
+  const [ checkedKeys, setCheckedKeys ] = useState([]);
   const [ autoExpandParent, setAutoExpandParent ] = useState(false);
   const [ currentDirId, setCurrentDirId ] = useState('');
   const [ currentDirType, setCurrentDirType ] = useState('');
@@ -42,6 +44,11 @@ const AssetTree = (props) => {
     //eslint-disable-next-line react-hooks/exhaustive-deps
   }, [timestamp])
 
+  useEffect(() => {
+    getTableDirIds();
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tableId])
+
   const getDataAssetLocationThenGetTreeData = () => {
     setLoading(true);
     dispatch({
@@ -58,6 +65,18 @@ const AssetTree = (props) => {
     });
   }
 
+  const getTableDirIds = () => {
+    dispatch({
+      type: 'assetmanage.getDataAssetDetail',
+      payload: {
+        dataAssetId: tableId
+      },
+      callback: data => {
+        setCheckedKeys(data.dirIds||[]);
+      },
+    })
+  }
+
   const getAllDirectoryAsTree = (resetCurrentDirId=true, defaultSelectedId='') => {
     setLoading(true);
     if (resetCurrentDirId) {
@@ -70,9 +89,11 @@ const AssetTree = (props) => {
         setLoading(false);
         setTreeData(data);
 
-        const _dataList = [];
+        const _dataList = [], _groupIds = [];
         generateList(data, _dataList);
+        generateGroupIds(data, _groupIds);
         setDataList(_dataList);
+        setGroupIds(_groupIds);
 
         let defaultItem = null;
 
@@ -143,6 +164,32 @@ const AssetTree = (props) => {
     }
   };
 
+  const generateGroupIds = (treeData, list) => {
+    
+    function generateGroupItem(data, list) {
+      for (let i = 0; i < data.length; i++) {
+        const node = data[i];
+        list.push(node.nodeId);
+        if (node.children) {
+          generateGroupItem(node.children, list);
+        }
+      }
+    }
+   
+    for (let i = 0; i < treeData.length; i++) {
+      const node = treeData[i];
+      const { nodeId } = node;
+
+      const groupItem = [nodeId];
+      if (node.children) {
+        generateGroupItem(node.children, groupItem);
+      }
+
+      list.push(groupItem);
+    }
+
+  };
+
   const getParentKey = (key, tree) => {
     let parentKey;
     for (let i = 0; i < tree.length; i++) {
@@ -293,6 +340,32 @@ const AssetTree = (props) => {
     setCurrentDirType(getCurrentType(keys[0], treeData));
     onSelect && onSelect(keys[0]);
   }
+  
+  const onTreeCheck = (values, e) => {
+    const _checkedKeysValue = [...(values.checked||[])];
+
+    if (e.checked) {
+      const _currentNodeId = e.node?.key;
+      let _groupItem = [];
+
+      groupIds.forEach(groupItem => {
+        groupItem.forEach(id => {
+          if (id === _currentNodeId) {
+            _groupItem = groupItem;
+          }
+        })
+      })
+
+      const _filterKeys = (_checkedKeysValue.filter(item => item===_currentNodeId || !(_groupItem.includes(item))));
+      
+      setCheckedKeys(_filterKeys);
+      onCheck && onCheck(_filterKeys);
+    } else {  
+      setCheckedKeys(_checkedKeysValue);
+      onCheck && onCheck(_checkedKeysValue);
+    }
+
+  }
 
   const onExpand = (expandedKeys) => {
     setExpandedKeys(expandedKeys);
@@ -407,6 +480,7 @@ const AssetTree = (props) => {
           onChange={(e) => { onChange(e) }}
         />
         <Tree
+          checkable={checkable}
           showLine={true}
           showIcon={false}
           onExpand={onExpand}
@@ -415,7 +489,10 @@ const AssetTree = (props) => {
           treeData={loop(treeData)}
           selectedKeys={[currentDirId||'']} 
           onSelect={onTreeSelect} 
-        />
+          onCheck={onTreeCheck}
+          checkedKeys={checkedKeys}
+          checkStrictly
+          />
       </Spin>
 
       <UpdateDirectoryModal 

src/view/Manage/AssetRecycle/Component/AssetMount.jsx

@@ -8,11 +8,15 @@ import { showMessage } from '../../../../util';
 const AssetMount = (props) => {
   
   const { onCancel, visible, id } = props;
-  const [ nodeId, setNodeId ] = useState(null);
+  const [ ids, setIds ] = useState([]);
   const [ confirmLoading, setConfirmLoading ] = useState(false);
 
+  const onCheck = (values) => {
+    setIds(values||[]);
+  }
+
   const onOk = () => {
-    if (!nodeId) {
+    if ((ids||[]).length === 0) {
       showMessage('warn', '请先选择资产目录');
       return;
     }
@@ -22,13 +26,14 @@ const AssetMount = (props) => {
       type: 'assetmanage.loadDataAssets',
       payload: {
         params: {
-          dirId: nodeId,
+          dirId: ids.join(","),
         },
-        data: [ id||'' ]
+        data: [id||'']
       },
       callback: data => {
         setConfirmLoading(false);
 
+        reset();
         onCancel && onCancel(true);
       },
       error: () => {
@@ -37,21 +42,35 @@ const AssetMount = (props) => {
     })
   }
 
+  const reset = () => {
+    setConfirmLoading(false);
+    setIds([]);
+  }
+
   return(
-    <Modal
-      title='挂载详情'
-      visible={ visible }
-      width={ 400 }
-      confirmLoading={ confirmLoading }
-      onCancel={()=>{ onCancel && onCancel()}}
-      onOk={ onOk }
-    >
-      <AssetTree 
-        readOnly={true} 
-        onSelect={(value) => setNodeId(value) }
-        {...props} 
-      />
-    </Modal>
+    <div>
+    {
+      visible && <Modal
+        title='挂载详情'
+        visible={ visible }
+        width={ 400 }
+        confirmLoading={ confirmLoading }
+        onCancel={()=>{ 
+          reset();
+          onCancel && onCancel()
+        }}
+        onOk={ onOk }
+      >
+        <AssetTree 
+          readOnly={true} 
+          checkable={true}
+          onCheck={onCheck}
+          tableId={id}
+          {...props} 
+        /> 
+      </Modal>
+    }
+    </div>
   )
 }