资产添加资源

src/model/assetmanage.js

@@ -172,6 +172,10 @@ export function* loadDataAssets(payload) {
   return yield call(service.loadDataAssets, payload);
 }
 
+export function* dataAssetAddResources(payload) {
+  return yield call(service.dataAssetAddResources, payload);
+}
+
 export function* unloadDataAssets(payload) {
   return yield call(service.unloadDataAssets, payload);
 }

src/service/dataassetmanager.js

@@ -88,6 +88,10 @@ export function loadDataAssets(payload) {
   return PostJSON("/dataassetmanager/dataAssetApi/loadDataAssets", payload);
 }
 
+export function dataAssetAddResources(payload) {
+  return PostJSON("/dataassetmanager/dataAssetApi/addResources", payload);
+}
+
 export function unloadDataAssets(payload) {
   return PostJSON("/dataassetmanager/dataAssetApi/unloadDataAssetsByDataAssetIdAndDirId", payload);
 }

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

@@ -39,7 +39,7 @@ const ResourceItem = ({ data, config, terms }) => {
       {
         (typeof data === 'string') ? <span style={{ marginRight: 5 }}>
           {highlightSearchContentByTerms(data, terms)}
-        </span> : (IsArr(data) ? <span>
+        </span> : ((IsArr(data)&&data.length>0) ? <span>
           <Tooltip
             overlayClassName='tooltip-common'
             title={<MetadataColumnTooltipTitle data={data} />}

src/view/Manage/AssetManage/add-resources.jsx

+import React from "react"
+import { Modal, Button, Spin, Row, Col, Tree, Tooltip, Typography, Input } from "antd"
+import { debounceTime, Subject } from 'rxjs'
+import produce from 'immer'
+
+import { dispatch } from '../../../model'
+import { getAssetRange, getAssetType, inputWidth, isSzseEnv, showMessage } from "../../../util"
+import { AssetManageReference, ResourceManageReference } from "../../../util/constant"
+import Table from '../../../util/Component/Table'
+import { defaultPage, usePage } from '../../../util/hooks/page'
+import { MetadataColumn } from "../AssetResourceManage/table"
+
+import './add-resources.less'
+
+const FC = (props) => {
+  const { visible, item, onCancel } = props
+  const [waiting, setWaiting] = React.useState(false)
+
+  const basicRef = React.useRef()
+
+  const close = (refresh = false) => {
+    setWaiting(false)
+    onCancel?.(refresh)
+  }
+
+  const save = () => {
+    const selectedRows = basicRef.current?.selectedRows
+    if ((selectedRows??[]).length === 0) {
+      showMessage('warn', '请先选择资源')
+      return
+    }
+
+    setWaiting(true)
+    dispatch({
+      type: 'assetmanage.dataAssetAddResources',
+      payload: {
+        params: {
+          dataAssetId: item?.id,
+          resourceIds: (selectedRows??[]).map(item => item.id).toString()
+        }
+      },
+      callback: data => {
+        setWaiting(false)
+        close(true)
+      },
+      error: () => {
+        setWaiting(false)
+      }
+    })
+  }
+
+  const footer = React.useMemo(() => {
+    return [
+      <Button key={'cancel'}
+        onClick={() => close()}
+      >取消</Button>,
+      <Button key={'save'} type='primary'
+        onClick={() => save()}
+      >确定</Button>
+    ]
+  }, [close, save])
+
+  return (
+    <Modal
+      className='add-resources'
+      visible={visible}
+      footer={footer}
+      width='90%'
+      bodyStyle={{ padding: '15px 15px 0px 15px', overflowX: 'auto', height: '80vh' }}
+      title='新增资源'
+      centered destroyOnClose
+      onCancel={() => { close() }}
+    >
+      <Spin spinning={waiting} >
+        <Basic ref={basicRef} />
+      </Spin>
+    </Modal>  
+  )
+}
+
+export default FC
+
+export const Basic = React.forwardRef(function ({ }, ref) {
+  const [args, setArgs] = React.useState(() => ({
+    params: {
+      page: defaultPage.pageNum, 
+      size: defaultPage.pageSize,
+      keyword: undefined,
+    },
+  }))
+  const [loadingTreeData, setLoadingTreeData] = React.useState(false)
+  const [treeData, setTreeData] = React.useState()
+  const [node, setNode] = React.useState()
+
+  const [loading, setLoading] = React.useState(false)
+  const [loadingElements, setLoadingElements] = React.useState(false)
+  const [elements, setElements] = React.useState()
+  const [data, setData] = React.useState()
+  const [total, setTotal] = React.useState()
+  const [selectedRows, setSelectedRows] = React.useState([])
+  const $keyword = React.useMemo(() => new Subject(), [])
+  const [keyword, setKeyword] = React.useState()
+  const [page, setPage] = usePage()
+  const [expandedKeys, setExpandedKeys] = React.useState([])
+  const [autoExpandParent, setAutoExpandParent] = React.useState(false)
+
+  React.useImperativeHandle(ref, () => ({
+    selectedRows
+  }), [selectedRows])
+
+  React.useEffect(() => {
+    getTreeData()
+  }, [])
+
+  React.useEffect(() => {
+    if (node) {
+      setSelectedRows([])
+      setPageAndArgs({ pageNum: 1, pageSize: page.pageSize })
+    }
+  }, [node])
+
+  const treeData1 = React.useMemo(() => {
+    if (treeData) {
+      const newTreeData = produce(treeData, 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 undefined
+  }, [treeData])
+
+  const columns = React.useMemo(() => {
+    const newColumns = []
+    let index = 0 
+    for (const element of elements??[]) {
+      const col = {
+        title: element.name,
+        dataIndex: `element${++index}`,
+        ellipsis: true,
+        width: 120,
+        render: (text, record) => {
+          return (
+            <Tooltip title={text}>
+              <Typography.Text ellipsis={true}>
+              {text}
+              </Typography.Text>
+            </Tooltip>
+          );
+        }
+      }
+      if (element.name === '编号') {
+        col.width = 60
+      } else if (element.name === '中文名称') {
+        col.width = isSzseEnv ? 230 : 160
+      } else if (element.name === '英文名称') {
+        col.width = isSzseEnv ? 224 : 160
+      } else if (element.name === '资源路径') {
+        col.render = (text, record) => {
+          return (
+            <Tooltip title={text}>
+              <Typography.Text ellipsis={true}>
+                <a onClick={()=>{
+                  let event = new Event('storage')
+                  event.key = 'assetDirChangeEvent'
+                  event.dirId = record.dirId
+                  window?.dispatchEvent(event)
+                }}>
+                {text}
+                </a>
+              </Typography.Text>
+            </Tooltip>
+          )
+        }
+      } else if (element.metadataItem === '是') {
+        col.width = isSzseEnv ? 250 : 120
+        col.render = (text, record) => <MetadataColumn data={text} />
+      }
+
+      newColumns.push(col)
+    }
+    
+    return newColumns
+  }, [elements])
+
+  const tableData = React.useMemo(() => {
+    const newTableData = []
+    for (const item of (data??[])) {
+      const newAsset = {...item}
+      let index = 0
+      for (const elementValue of (item.elementValues??[])) {
+        newAsset[`element${++index}`] = elementValue
+      }
+      newTableData.push(newAsset)
+    }
+
+    return newTableData
+  }, [data])
+
+  const setArgsAndPage = React.useCallback((params) => {
+    // 设置查询参数时将分页置为1
+    setPage(prevpg => {
+
+      setArgs((prev) => {
+        const newparams = params ? { ...prev.params, ...params } : undefined
+        return { params: { ...newparams, page: 1, size: prevpg.pageSize } }
+      })
+
+      return ({ ...prevpg, pageNum: 1 })
+    })
+    //eslint-disable-next-line react-hooks/exhaustive-deps    
+  }, [])
+
+  const setPageAndArgs = React.useCallback((page) => {
+    setPage(prev => ({ ...prev, ...page }))
+    setArgs((prev) => {
+      return { params: { ...prev.params, page: page.pageNum, size: page.pageSize } }
+    })
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  React.useEffect(() => {
+    const $$keyword = $keyword.pipe(debounceTime(1000)).subscribe((keyword) => {
+      setArgsAndPage({ keyword })
+    })
+
+    return () => {
+      $$keyword.unsubscribe()
+    }
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  React.useEffect(() => {
+    if (node?.nodeId) {
+      getElements()
+      getAssets()
+    }
+  }, [args])
+
+  const getTreeData = () => {
+    setLoadingTreeData(true)
+    dispatch({
+      type: 'assetmanage.queryResourceManageTree',
+      callback: data => {
+        setLoadingTreeData(false)
+        setTreeData(data)
+        if ((data??[]).length > 0) {
+          const firstNode = data[0]
+          setNode(firstNode)
+          setExpandedKeys([firstNode.nodeId])
+          setAutoExpandParent(true)
+        }
+      },
+      error: () => {
+        setLoadingTreeData(false)
+      }
+    }) 
+  }
+
+  const getElements = () => {
+    setLoadingElements(true)
+    dispatch({
+      type: 'assetmanage.listFilterElements',
+      payload: {
+        range: getAssetRange(ResourceManageReference),
+        dataAssetType: getAssetType(ResourceManageReference)
+      },
+      callback: data => {
+        setLoadingElements(false)
+        setElements(data)
+      },
+      error: () => {
+        setLoadingElements(false)
+      }
+    })
+  }
+
+  const getAssets = () => {
+    setLoading(true)
+    dispatch({
+      type: 'assetmanage.listDataResourcesByPage',
+      payload: {
+        data: [],
+        params: {
+          dirId: node?.nodeId,
+          pageNum: args.params.page,
+          pageSize: args.params.size,
+          keyword: args.params.keyword,
+          range: getAssetRange(ResourceManageReference),
+        }
+      },
+      callback: data => {
+        setLoading(false)
+        setData(data?.data)
+        setTotal(data?.total)
+      },
+      error: () => {
+        setLoading(false)
+      }
+    })
+  }
+
+  const onTreeExpand = (expandedKeys) => {
+    setExpandedKeys(expandedKeys)
+    setAutoExpandParent(false)
+  }
+
+  const onTreeSelect = (selectedKeys, { selectedNodes }) => {
+    if (selectedKeys.length === 0 || selectedNodes.length === 0) {
+      return
+    }
+
+    setNode(selectedNodes[0])
+  }
+
+  return (
+    <Row>
+      <Col span={4}>
+        <Spin spinning={loadingTreeData}>
+          <Tree
+            className='tree'
+            showLine 
+            showIcon={false} 
+            autoExpandParent={autoExpandParent}
+            treeData={treeData1}
+            selectedKeys={node?[node.nodeId]:[]}
+            expandedKeys={expandedKeys}
+            onSelect={onTreeSelect}
+            onExpand={onTreeExpand}
+          />
+        </Spin>
+      </Col>
+      <Col span={20}>
+        <div className='flex'
+          style={{
+            padding: '0px 0px 15px',
+            alignItems: 'center',
+            justifyContent: 'end',
+          }}>
+          <Input size="middle"
+            placeholder="资源要素值搜索"
+            value={keyword}
+            bordered={true} allowClear
+            onChange={(e) => {
+              const keyword = e.target.value
+              setKeyword(keyword)
+              $keyword.next((keyword??'').trim())
+            }} 
+            style={{ width: inputWidth }}
+          />
+        </div>
+        <Table
+          maxHeight='calc(80vh - 155px)'
+          loading={loading||loadingElements}
+          columns={columns}
+          dataSource={tableData}
+          pageSize={page.pageSize} pageNum={page.pageNum} total={total??0}
+          onPaginate={(page, pageSize) => {
+            setSelectedRows([])
+            setPageAndArgs({ pageNum: page, pageSize })
+          }}
+          rowSelection={{
+            selectedRowKeys: (selectedRows??[]).map(item => item.id),
+            onChange: (selectedRowKeys, selectedRows) => {
+              setSelectedRows(selectedRows)
+            },
+          }}
+        />
+      </Col>
+    </Row>
+  )
+})
\ No newline at end of file

src/view/Manage/AssetManage/add-resources.less

+.add-resources {
+  .tree {
+    height: calc(80vh - 30px);
+    overflow: auto;
+  }
+}
\ No newline at end of file

src/view/Manage/AssetManage/table.jsx

@@ -15,6 +15,7 @@ import PermissionButton from '../../../util/Component/PermissionButton'
 import PermissionMenuItem from '../../../util/Component/PermissionMenuItem'
 import { FullScreenSvg, CancelFullScreenSvg } from './Component/AssetSvg'
 
+import AddResources from './add-resources'
 import ImportAsset from './Component/ImportAssetDrawer'
 import ChangeCatalog from './change-catalog'
 import AssetDelete from './Component/AssetDeleteModal'
@@ -64,10 +65,9 @@ const FC = (props) => {
   const [keyword, setKeyword] = React.useState()
   const [searchType, setSearchType] = React.useState('keyword')
   const [resoureTagMap, setResourceTagMap] = React.useState()
-  const [addAssetParams, setAddAssetParams] = React.useState({
+  const [addResourcesParams, setAddResourcesParams] = React.useState({
     visible: false,
-    reference: undefined,
-    nodeId: undefined
+    item: undefined
   })
   const [importAssetParams, setImportAssetParams] = React.useState({
     visible: false,
@@ -555,10 +555,9 @@ const FC = (props) => {
   }
 
   const onAddClick = () => {
-    setAddAssetParams({
+    setAddResourcesParams({
       visible: true,
-      reference: AssetManageReference,
-      nodeId: node?.nodeId
+      item: undefined,
     })
   }
 
@@ -896,6 +895,17 @@ const FC = (props) => {
           />
         </ResizeObserver>
       </div>
+      <AddResources
+        {...addResourcesParams}
+        onCancel={(refresh) => {
+          setAddResourcesParams({
+            visible: false,
+            item: undefined
+          })
+
+          refresh && getAssets()
+        }}
+      />
       <ImportAsset
         {...importAssetParams}
         onCancel={() => {