变更目录

src/view/Manage/AssetResourceManage/change-catalog.jsx

+import React from 'react'
+import { Button, Modal, Spin, Tree, AutoComplete } from 'antd'
+
+import { dispatch } from '../../../model'
+import { generateList } from './tree'
+import produce from 'immer'
+import { highlightSearchContentByTerms, showMessage } from '../../../util'
+
+const FC = (props) => {
+  const { visible, items, onCancel } = props
+  const [waiting, setWaiting] = React.useState(false)
+  const [loading, setLoading] = React.useState(false)
+
+  const basicRef = React.useRef()
+
+  const close = (refresh = false) => {
+    setWaiting(false)
+    setLoading(false)
+    onCancel?.(refresh)
+  }
+
+  const save = () => {
+
+  }
+
+  const footer = React.useMemo(() => {
+    return [
+      <Button key={'cancel'}
+        onClick={() => close()}
+      >取消</Button>,
+      <Button key={'save'} type='primary'
+        disabled={waiting}
+        onClick={() => save()}
+      >保存</Button>
+    ]
+  }, [close, save, waiting])
+
+  return (
+    <Modal
+      visible={visible}
+      footer={footer}
+      width='400px'
+      bodyStyle={{ padding: '15px 15px 0px 15px', overflowX: 'auto', maxHeight: '80vh', height: 500 }}
+      title='变更目录'
+      centered destroyOnClose
+      onCancel={() => { close() }}
+    >
+      <Spin spinning={loading || waiting}>
+        <Basic ref={basicRef} items={items} />
+      </Spin>
+    </Modal>
+  )
+}
+
+export default FC
+
+const Basic = React.forwardRef(function ({ items }, ref) {
+  const [data, setData] = React.useState()
+  const [dataList, setDataList] = React.useState()
+  const [loading, setLoading] = React.useState(false)
+  const [checkedKeys, setCheckedKeys] = React.useState()
+  const [expandedKeys, setExpandedKeys] = React.useState([])
+  const [autoExpandParent, setAutoExpandParent] = React.useState(false)
+  const [options, setOptions] = React.useState()
+  const [keyword, setKeyword] = React.useState()
+
+  React.useEffect(() => {
+    getTreeData()
+  }, [])
+
+  const treeData = React.useMemo(() => {
+    if (data) {
+      const newTreeData = produce(data, draft => {
+        const setNode = (g) => {
+          g.key = g.nodeId
+          g.title = g.text
+          g.children?.forEach((child) => {
+            setNode(child)
+          })
+        }
+
+        draft.forEach((child) => {
+          setNode(child)
+        })
+      })
+  
+      return newTreeData
+    }
+
+    return []
+  }, [data])
+
+  const getTreeData = () => {
+    setLoading(true)
+    dispatch({
+      type: 'assetmanage.queryResourceDirectoryAsTree',
+      callback: data => {
+        setLoading(false)
+        setData(data)
+        if ((data??[]).length > 0) {
+          const newDataList = []
+          generateList(data, newDataList)
+          setDataList(newDataList)
+
+          const firstNode = data[0]
+          setExpandedKeys([firstNode.nodeId])
+          setAutoExpandParent(true)
+        }
+      },
+      error: () => {
+        setLoading(false)
+      }
+    })
+  }
+
+  const onTreeExpand = (expandedKeys) => {
+    setExpandedKeys(expandedKeys)
+    setAutoExpandParent(false)
+  }
+
+  const onTreeCheck = (values, e) => {
+    //同一主题下只能挂载一个目录
+    if (e.node?.level === 1) {
+      showMessage('warn', '栏目不允许勾选')
+      return
+    }
+
+    const newCheckedKeys = values.checked??[]
+    if (e.checked) {
+      const index = (dataList??[]).findIndex(item => item.nodeId === e.node?.key)
+      if (index !== -1) {
+        const currentRootNodeId = dataList[index].rootNodeId
+        const filterChecktedKeys = newCheckedKeys.filter(key => {
+          if (key !== e.node?.key) {
+            const index = (dataList??[]).findIndex(item => item.nodeId === key)
+            if (index !== -1) {
+              return (dataList[index].rootNodeId !== currentRootNodeId)
+            } else {
+              return false
+            }
+          }
+          
+          return true
+        })
+        
+        setCheckedKeys(filterChecktedKeys)
+      }
+    } else {  
+      setCheckedKeys(newCheckedKeys)
+    }
+  }
+
+  const onAutoCompleteSearch = (searchText) => {
+    setKeyword(searchText)
+    setOptions(!searchText?[]:(dataList||[]).filter(item => item.value.indexOf(searchText)!==-1))
+  }
+
+  const onAutoCompleteSelect = (value, option) => {
+    const paths = value.split('/')
+    setKeyword(paths[paths.length-1])
+    const newExpandedKeys = [...expandedKeys, option.key]
+    setExpandedKeys(Array.from(new Set(newExpandedKeys)))
+    setAutoExpandParent(true)
+  } 
+
+  return (
+    <Spin spinning={loading}>
+      <AutoComplete
+        allowClear
+        value={keyword}
+        style={{ marginBottom: 10, width: '100%' }}
+        onSelect={onAutoCompleteSelect}
+        onSearch={onAutoCompleteSearch}
+        onClear={() => {
+          setKeyword()
+        }}
+      >
+      {
+        (options||[]).map((item, index) => {
+          return (
+            <AutoComplete.Option key={item.key} value={item.value}>
+              <div style={{ whiteSpace: 'normal' }}>
+              {highlightSearchContentByTerms(item.value, [keyword])}
+              </div>
+            </AutoComplete.Option>
+          );
+        })
+      }  
+      </AutoComplete>
+      <Tree
+        checkable
+        checkStrictly
+        showLine 
+        showIcon={false} 
+        treeData={treeData}
+        autoExpandParent={autoExpandParent}
+        expandedKeys={expandedKeys}
+        checkedKeys={checkedKeys}
+        onExpand={onTreeExpand}
+        onCheck={onTreeCheck}
+      />
+    </Spin> 
+  )
+})
\ No newline at end of file

src/view/Manage/AssetResourceManage/table.jsx

 import React from 'react'
 import classNames from 'classnames'
-import { Tooltip, Typography, Space, Dropdown, Button, Menu, Checkbox, Input, Select } from 'antd'
+import { Tooltip, Typography, Space, Dropdown, Button, Menu, Checkbox, Input, Select, Modal } from 'antd'
 import ResizeObserver from 'rc-resize-observer'
 import { debounceTime, Subject } from 'rxjs'
 
 import { defaultPage, usePage } from '../../../util/hooks/page'
 import Table from '../../../util/Component/Table'
 import { dispatch } from '../../../model'
-import { getAssetRange, getAssetType, isSzseEnv } from '../../../util'
+import { getAssetRange, getAssetType, isSzseEnv, showMessage, showNotifaction } from '../../../util'
 import { ResourceManageReference } from '../../../util/constant'
 import PermissionButton from '../../../util/Component/PermissionButton'
 import PermissionMenuItem from '../../../util/Component/PermissionMenuItem'
 import { FullScreenSvg, CancelFullScreenSvg } from '../AssetManage/Component/AssetSvg'
+import AddAsset from '../AssetManage/Component/AddAssetModel'
+import ImportAsset from '../AssetManage/Component/ImportAssetDrawer'
+import ChangeCatalog from './change-catalog'
+import AssetDelete from '../AssetManage/Component/AssetDeleteModal'
+import FilterElement from '../AssetManage/Component/FilterElementModal'
 
 import '../AssetManage/Component/AssetTable.less'
 
-
 const FC = (props) => {
   const { type = ResourceManageReference, node, onClick, onFullScreenChange } = props
   const [args, setArgs] = React.useState(() => ({
@@ -40,8 +44,29 @@ const FC = (props) => {
   const $keyword = React.useMemo(() => new Subject(), [])
   const [keyword, setKeyword] = React.useState()
   const [searchType, setSearchType] = React.useState('keyword')
+  const [addAssetParams, setAddAssetParams] = React.useState({
+    visible: false,
+    nodeId: undefined
+  })
+  const [importAssetParams, setImportAssetParams] = React.useState({
+    visible: false,
+    nodeId: undefined
+  })
+  const [changeCatalogParams, setChangeCatalogParams] = React.useState({
+    visible: false,
+    items: undefined
+  })
+  const [assetDeleteParams, setAssetDeleteParams] = React.useState({
+    visible: false
+  })
+  const [filterElementParams, setFilterElementParams] = React.useState({
+    visible: false,
+    type: undefined,
+    reference: undefined
+  })
 
   const [page, setPage] = usePage()
+  const [ modal, contextHolder ] = Modal.useModal()
 
   const setArgsAndPage = React.useCallback((params) => {
     // 设置查询参数时将分页置为1
@@ -241,7 +266,7 @@ const FC = (props) => {
         setData(data?.data)
         setTotal(data?.total)
         setRow(prevRow => {
-          if (!prevRow) {
+          if (!prevRow || (data?.data??[]).findIndex(item => item.id === prevRow.id) === -1) {
             if ((data?.data??[]).length > 0) {
               onClick?.(data?.data[0])
               return data?.data[0]
@@ -249,7 +274,7 @@ const FC = (props) => {
               onClick?.(undefined)
               return undefined
             }
-          }
+          } 
           
           return prevRow
         })
@@ -261,7 +286,10 @@ const FC = (props) => {
   }
 
   const onAddClick = () => {
-
+    setAddAssetParams({
+      visible: true,
+      nodeId: node?.nodeId
+    })
   }
 
   const onAddToAssetClick = () => {
@@ -285,23 +313,83 @@ const FC = (props) => {
   }
 
   const onImportClick = () => {
-
+    setImportAssetParams({
+      visible: true,
+      nodeId: node?.nodeId
+    })
   }
 
   const onExportClick = () => {
-
+    if ((selectedRows??[]).length === 0) {
+      modal.confirm({
+        title: '提示',
+        content: '是否导出选中目录下的所有资产?',
+        onOk: () => {
+          window.open(`/api/dataassetmanager/dataAssetApi/exportByDataAssetIds?dirId=${node?.nodeId}&recursive=${args.params.catalogType === 'currentRecursive'}`);
+        }
+      })
+    } else {
+      window.open(`/api/dataassetmanager/dataAssetApi/exportByDataAssetIds?dataAssetIds=${selectedRows.map(item => item.id).join(',')}`);
+    }
   }
 
   const onChangeDirectoryClick = () => {
-
+    setChangeCatalogParams({
+      visible: true,
+      items: selectedRows
+    })
   }
 
   const onDeleteClick = () => {
-
+    setAssetDeleteParams({
+      visible: true
+    })
   }
 
   const onFilterElementClick = () => {
+    setFilterElementParams({
+      visible: true,
+      type: (type === ResourceManageReference) ? 'admin' : 'user',
+      reference: type
+    })
+  }
+
+  const deleteAssets = () => {
+    setAssetDeleteParams({
+      visible: false
+    })
 
+    dispatch({
+      type: 'assetmanage.unloadDataAssets',
+      payload: {
+        data: (selectedRows??[]).map(item => {
+          return { dataAssetId: item.id, dirId: item.dirId }
+        })
+      },
+      callback: () => {
+        showMessage("success","删除成功")
+        getAssets()
+        setSelectedRows([])
+      }
+    })
+  }
+
+  const deleteAssetsFromAllDirs = () => {
+    setAssetDeleteParams({
+      visible: false
+    })
+
+    dispatch({
+      type: 'assetmanage.unloadDataAssetsFromAllDirs',
+      payload: {
+        data: (selectedRows??[]).map(item => item.id)
+      },
+      callback: () => {
+        showMessage("success","删除成功")
+        getAssets()
+        setSelectedRows([])
+      }
+    })
   }
 
   const onMenuClick = ({ key }) => {
@@ -563,6 +651,64 @@ const FC = (props) => {
           />
         </ResizeObserver>
       </div>
+
+      <AddAsset
+        {...addAssetParams}
+        onCancel={(refresh = false) => {
+          setAddAssetParams({
+            visible: false,
+            nodeId: undefined
+          })
+          refresh && getAssets()
+        }}
+      />
+      <ImportAsset
+        {...importAssetParams}
+        onCancel={() => {
+          setImportAssetParams({
+            visible: false,
+            nodeId: undefined
+          })
+        }}
+        onSuccess={(tip = '') => {
+          getAssets()
+          if (tip) {
+            showNotifaction('导入提示', tip, 5)
+          }
+        }}
+      />
+      <ChangeCatalog 
+        {...changeCatalogParams}
+        onCancel={(refresh = false) => {
+          setChangeCatalogParams({
+            visible: false,
+            items: undefined
+          })
+          refresh && getAssets()
+        }}
+      />
+      <AssetDelete
+        {...assetDeleteParams}
+        onCancel={() => {
+          setAssetDeleteParams({
+            visible: false
+          })
+        }}
+        onDelete={deleteAssets}
+        onDeleteAll={deleteAssetsFromAllDirs}
+      />
+      <FilterElement
+        {...filterElementParams}
+        onCancel={(refresh = false) => {
+          setFilterElementParams({
+            visible: false,
+            type: undefined,
+            reference: undefined
+          })
+          refresh && getElements()
+        }}
+      />
+      {contextHolder}
     </div>
   )
 }

src/view/Manage/AssetResourceManage/tree.jsx

@@ -13,13 +13,13 @@ import CustomNode from '../AssetManage/Component/CustomDirectoryModal'
 
 import './tree.less'
 
-const generateList = (data, list, path = null) => {
+export const generateList = (data, list, path = null, rootNodeId = null) => {
   for (const node of data??[]) {
     if (node.resourceType !== 'custom') {
       const newPath = path?`${path}/${node.text}`:node.text
-      list.push({...node, key: node.nodeId, value: newPath})
+      list.push({...node, key: node.nodeId, value: newPath, rootNodeId: rootNodeId??node.nodeId})
       if (node.children) {
-        generateList(node.children, list, newPath)
+        generateList(node.children, list, newPath, rootNodeId??node.nodeId)
       }
     }
   }