完成编辑

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

@@ -4,7 +4,6 @@ import { PlusOutlined, ImportOutlined,ExportOutlined,ReloadOutlined, SettingOutl
 import classNames from 'classnames';
 import { useContextMenu, Menu as RcMenu, Item as RcItem } from "react-contexify";
 import LocalStorage from 'local-storage';
-
 import { dispatch } from '../../../../model';
 import ImportDirectory from './ImportDirectory'; 
 import UpdateDirectoryModal from './UpdateDirectoryModal';
@@ -13,7 +12,7 @@ import { showMessage, getQueryParam, getAssetRange } from '../../../../util';
 import { AnchorTimestamp, AnchorId, AssetManageReference, AssetBrowseReference, ResourceBrowseReference, AssetMountReference, AnchorDirId, AnchorTemplateType } from '../../../../util/constant';
 import { highlightSearchContentByTerms } from '../../../../util';
 import { listSubject } from './AssetTable';
-
+import Overview from './overview';
 import './AssetManageTree.less';
 import 'react-contexify/dist/ReactContexify.css';
 import { appId } from '../../../../App';
@@ -74,6 +73,10 @@ const AssetManageTree = (props) => {
   const [ updateDirectoryModalVisible, setUpdateDirectoryModalVisible ] = useState(false);
   const [ updateDirectoryAction, setUpdateDirectoryAction ] = useState('');
   const [ customDirectoryModalVisible, setCustomDirectoryModalVisible ] = useState(false);
+  const [customOverview,setCustomOverview] = useState({
+    visible:false,
+    customItem:null
+  })
   const [ customDirectoryAction, setCustomDirectoryAction ] = useState('');
   const [options, setOptions] = useState([]);
   const [ loadedKeys, setLoadedKeys ] = useState([]);
@@ -517,6 +520,13 @@ const AssetManageTree = (props) => {
     }
   }
 
+  const previewCustom = ()=>{
+    setCustomOverview({
+      visible: true,
+      customItem: currentRightClickDir
+    })
+  }
+
   const deleteDir = () => {  
     console.log('currentRightClickDir', currentRightClickDir)  
     if (currentRightClickDir.nodeId) {
@@ -985,6 +995,16 @@ const AssetManageTree = (props) => {
         action={ customDirectoryAction }
         dirId= { currentDirId }
       />
+      <Overview   
+        visible={ customOverview.visible }
+        onCancel={()=>{ 
+          setCustomOverview({
+            visible:false,
+            customItem:null
+          })
+        }}
+        customItem= { customOverview.customItem }
+      />
       {
         (reference!==AssetMountReference) && <RcMenu id={MENU_ID}>
           {
@@ -1000,6 +1020,16 @@ const AssetManageTree = (props) => {
               </RcItem> 
             </React.Fragment>
           }
+          {
+            viewSelectedKeyRef.current==='custom' && <React.Fragment>
+              <RcItem id="edit" onClick={previewCustom}>
+                预览
+              </RcItem>
+              <RcItem id="edit" >
+                编辑
+              </RcItem>
+            </React.Fragment>
+          }
           <RcItem id="delete" onClick={deleteDir}>
             删除目录
           </RcItem>

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

@@ -163,6 +163,7 @@ class PreviewTree extends React.Component {
 
   layoutGraph = () => {
     const { data } = this.props;
+    console.log('PreviewTree layoutGraph data:', data);
     
     if(graph && data){
       graph.data(data);

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

+import React, { useEffect, useState } from "react";
+import PreviewTree from "./PreviewTree";
+import { Modal, Spin } from "antd";
+import { dispatchLatest } from "@/model";
+
+const Overview = ({ visible, customItem, onCancel }) => {
+  const [previewTreeData, setPreviewTreeData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    if (visible) {
+      let url = "assetmanage.previewTreeByCustomElements";
+      let payload = {
+        data: customItem?.elementIds,
+      };
+      setLoading(true)
+      dispatchLatest({
+        type: url,
+        payload,
+        callback: (data) => {
+          setPreviewTreeData((data || []).length > 0 ? data[0] : {});
+          setLoading(false)
+        },
+      });
+    }
+  }, [visible, customItem]);
+  return (
+    <Modal
+      width={1000}
+      title="预览"
+      visible={visible}
+      onCancel={onCancel}
+      footer={null}
+    >
+      <div style={{ height: 800, width: "100%" }}>
+        {loading ? <Spin style={{ height: "100%", width: "100%" }} /> : <PreviewTree data={previewTreeData} />}
+      </div>
+    </Modal>
+  );
+};
+
+export default Overview;