浏览

src/view/Manage/AssetBrowse/index.jsx

@@ -6,7 +6,7 @@ import { ResizableBox } from 'react-resizable';
 import AssetTree from '../AssetManage/Component/AssetTree';
 import AssetDirectory from '../AssetManage/Component/AssetDirectory';
 import RelationContainer from './Component/RelationContainer';
-import AssetTable from "../AssetManage/Component/AssetTable";
+import AssetTable from "./table";
 import Separate from '../AssetManage/Component/Separate';
 
 import { AssetBrowseReference } from '../../../util/constant';
@@ -14,9 +14,6 @@ import { AssetBrowseReference } from '../../../util/constant';
 import './index.less';
 
 const AssetBrowse = (props) => {
-
-  const { reference = AssetBrowseReference } = props;
-
   const [ nodeParams, setNodeParams ] = useState({ centerId: '', expandId: '', nodeType: '' });
   const [ expandTree, setExpandTree ] = useState(true);
   const [ expandRelation, setExpandRelation ] = useState(true);
@@ -77,25 +74,25 @@ const AssetBrowse = (props) => {
           axis='x'
           minConstraints={[230, Infinity]} maxConstraints={[Infinity, Infinity]}          
         >
-        <AssetTree centerId={centerId} onSelect={onTreeSelect} reference={reference} {...props} />
+        <AssetTree centerId={centerId} onSelect={onTreeSelect} reference={AssetBrowseReference} {...props} />
       </ResizableBox>
       {
         expandTree && <Separate width={15} />
       }
       <div className={rightClasses}>
-        <AssetDirectory id={nodeId} assetCount={assetCount} reference={reference} nodeType={nodeParams.nodeType} />
+        <AssetDirectory id={nodeId} assetCount={assetCount} reference={AssetBrowseReference} nodeType={nodeParams.nodeType} />
         <Separate height={15} />
         <div className='flex' style={{ flex: 1, height: '100%', overflow: 'hidden' }}>
           {
             expandRelation && <React.Fragment>
               <div style={{ flex: 1, height: '100%', overflow: 'hidden' }}>
-                <RelationContainer reference={reference} nodeParams={nodeParams} onChange={onRelationChange} resize={resizeRelation} />
+                <RelationContainer reference={AssetBrowseReference} nodeParams={nodeParams} onChange={onRelationChange} resize={resizeRelation} />
               </div>
               <Separate width={15} />
             </React.Fragment>
           }
           <div style={{ flex: 1, overflow: 'hidden' }}>
-            <AssetTable nodeId={nodeId} nodeType={nodeParams.nodeType} reference={reference} onCountChange={onAssetCountChange} onFullScreenChange={onFullScreenChange} {...props} />
+            <AssetTable node={{ nodeId }} onFullScreenChange={onFullScreenChange} {...props} />
           </div>          
         </div>
         <div className='tree-toggle' onClick={treeToggleClick}>

src/view/Manage/AssetBrowse/table.jsx

+import React from 'react'
+import classNames from 'classnames'
+import { Tooltip, Typography, Space, Dropdown, Button, Menu, Checkbox, Input, Select, Modal, Table as AntdTable } from 'antd'
+import ResizeObserver from 'rc-resize-observer'
+import { debounceTime, Subject } from 'rxjs'
+import { DownOutlined, UpOutlined } from "@ant-design/icons"
+import LocalStorage from 'local-storage'
+
+import { defaultPage, usePage } from '../../../util/hooks/page'
+import Table from '../../../util/Component/Table'
+import { dispatch } from '../../../model'
+import { getAssetRange, getAssetType, getQueryParam, IsArr, isSzseEnv, showMessage, showNotifaction } from '../../../util'
+import { AssetBrowseReference } from '../../../util/constant'
+import PermissionButton from '../../../util/Component/PermissionButton'
+import PermissionMenuItem from '../../../util/Component/PermissionMenuItem'
+import { FullScreenSvg, CancelFullScreenSvg } from '../AssetManage/Component/AssetSvg'
+
+import FilterElement from '../AssetManage/Component/FilterElementModal'
+import FilterElementValue from '../AssetResourceManage/filter-element-value'
+import { AssetDirectorySubject } from '../AssetManage/Component/AssetDirectory'
+import { AssetActionSubject } from '../AssetManage/Component/AssetAction'
+import TagCell from '../Model/Component/tag-help'
+import { MetadataColumn } from '../AssetResourceManage/table'
+import AssetDetailDrawer from '../AssetManage/Component/AssetDetailDrawer'
+
+import '../AssetManage/Component/AssetTable.less'
+
+const FC = (props) => {
+  const { node, onFullScreenChange } = props
+  const [args, setArgs] = React.useState(() => ({
+    params: {
+      page: defaultPage.pageNum, 
+      size: defaultPage.pageSize,
+      catalogType: 'currentRecursive',
+      keyword: undefined,
+      elementValueFilters: []
+    },
+  }))
+  const [fullScreen, setFullScreen] = React.useState(false)
+  const [loading, setLoading] = React.useState(false)
+  const [loadingElements, setLoadingElements] = React.useState(false)
+  const [columns, setColumns] = React.useState()
+  const [elements, setElements] = React.useState()
+  const [data, setData] = React.useState()
+  const [total, setTotal] = React.useState()
+  const [row, setRow] = React.useState()
+  const $keyword = React.useMemo(() => new Subject(), [])
+  const [keyword, setKeyword] = React.useState()
+  const [searchType, setSearchType] = React.useState('keyword')
+  const [resoureTagMap, setResourceTagMap] = React.useState()
+  const [filterElementParams, setFilterElementParams] = React.useState({
+    visible: false,
+    type: undefined,
+    reference: undefined
+  })
+  const [filterElementValueParams, setFilterElementValueParams] = React.useState({
+    visible: false,
+    type: undefined,
+    defaultValue: undefined,
+  })
+  const [assetDetailParams, setAssetDetailParams] = React.useState({
+    visible: false,
+    id: undefined,
+    dirId: undefined,
+    reference: undefined,
+  })
+
+  const [page, setPage] = usePage()
+  const [modal, contextHolder] = Modal.useModal()
+
+  const locationIdRef = React.useRef(getQueryParam('id', props?.location?.search))
+  const locationDidRef = React.useRef(getQueryParam('did', props?.location?.search))
+
+  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
+  }, [])
+
+  const storageChange = (e) => {
+    if (e.key === 'editAssetsChange') {
+      getAssets()
+    } else if (e.key === 'assetRelationOnClickEvent') {
+      locationIdRef.current = e.relation?.dataAssetId
+      locationDidRef.current = e.relation?.dirId
+    } else if (e.key === 'assetPathOnClickEvent') {
+      locationIdRef.current = e.id
+      locationDidRef.current = e.dirId
+    }
+  }
+
+  React.useEffect(() => {
+    getElements()
+
+    const $$keyword = $keyword.pipe(debounceTime(1000)).subscribe((keyword) => {
+      setArgsAndPage({ keyword })
+    })
+
+    window?.addEventListener("storage", storageChange)
+
+    return () => {
+      $$keyword.unsubscribe()
+      window?.removeEventListener("storage", storageChange)
+    }
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+  
+  React.useEffect(() => {
+    if (node) {
+      setRow()
+      if (locationIdRef.current && locationDidRef.current) {
+        getDataAssetLocation()
+      } else {
+        setPageAndArgs({ pageNum: 1, pageSize: page.pageSize })
+      }
+    }
+  }, [node])
+
+  React.useEffect(() => {
+    if (node?.nodeId) {
+      getAssets()
+    }
+  }, [args])
+
+  React.useEffect(() => {
+    if (data) {
+      getResourceTag()
+    }
+  }, [data])
+
+  const notElementCol = [
+    {
+      title: '标签',
+      dataIndex: 'tag',
+      width: 360,
+      className: 'table-tag-cell',
+      render: (_, record) => <div onClick={(e) => {e?.stopPropagation()}}>
+        <TagCell 
+          id={record.id}
+          did={record.dirId}
+          type='dataAsset'
+          tags={resoureTagMap?.[`${record.id}`]}
+        />
+        </div>
+    }
+  ]
+
+  React.useEffect(() => {
+    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)
+    }
+    
+    setColumns([...newColumns, ...notElementCol])
+  }, [elements, resoureTagMap])
+
+  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 tableMaxHeight = React.useMemo(() => {
+    return fullScreen ? 'calc(100vh - 209px - 72px)' : 'calc(100vh - 209px - 123px - 15px - 72px)'
+  }, [fullScreen])
+
+  const getElements = () => {
+    setLoadingElements(true)
+    dispatch({
+      type: 'assetmanage.listFilterElements',
+      payload: {
+        range: getAssetRange(AssetBrowseReference),
+        dataAssetType: getAssetType(AssetBrowseReference)
+      },
+      callback: data => {
+        setLoadingElements(false)
+        setElements(data)
+      },
+      error: () => {
+        setLoadingElements(false)
+      }
+    })
+  }
+
+  const getAssets = () => {
+    setLoading(true)
+
+    let [recursive, dirId] = [true, node?.nodeId]
+    if (args.params.catalogType === 'current') {
+      recursive = false
+    }
+    if (args.params.catalogType === 'fullSearch') {
+      dirId = ''
+    }
+
+    dispatch({
+      type: 'assetmanage.listDataAssetsByPage',
+      payload: {
+        data: args.params.elementValueFilters??[],
+        params: {
+          dirId,
+          pageNum: args.params.page,
+          pageSize: args.params.size,
+          keyword: args.params.keyword,
+          range: getAssetRange(AssetBrowseReference),
+          recursive,
+        }
+      },
+      callback: data => {
+        setLoading(false)
+        setData(data?.data)
+        setTotal(data?.total)
+
+        if (locationIdRef.current) {
+          const index = (data?.data??[]).findIndex(item => item.id === locationIdRef.current)
+          
+          if (index !== -1) {
+            setRow(data?.data[index])
+          }         
+
+          setTimeout(() => {
+            var anchor = document.getElementById(`${locationIdRef.current}`)
+            anchor?.scrollIntoView()
+            locationIdRef.current = null
+            locationDidRef.current = null
+          }, 500)
+        } 
+      },
+      error: () => {
+        setLoading(false)
+        locationIdRef.current = null
+        locationDidRef.current = null
+      }
+    })
+  }
+
+  const getResourceTag = () => {
+    const ids = (data??[]).map(item => item.id)
+    if (ids.length > 0) {
+      dispatch({
+        type: 'tag.getResourceTagIn',
+        payload: {
+          params: {
+            resourceIds: ids,
+            includeAll: true,
+            includePrivate: true
+          }
+        },
+        callback: data => {
+          setResourceTagMap(data?.data)
+        }
+      });
+    } else {
+      setResourceTagMap()
+    }
+  }
+
+  const getDataAssetLocation = () => {
+    setLoading(true)
+    dispatch({
+      type: 'assetmanage.getDataAssetLocation',
+      payload: {
+        dataAssetId: locationIdRef.current,
+        dirId: locationDidRef.current,
+      },
+      callback: data => {
+        const newPageNum = parseInt(data.offset/page.pageSize + ((data.offset%page.pageSize===0)?0:1))
+        setPageAndArgs({ ...page, pageNum: newPageNum })
+      },
+      error: () => {
+        setLoading(false)
+        locationIdRef.current = null
+        locationDidRef.current = null
+        setPageAndArgs({ ...page, pageNum: 1 })
+      }
+    })
+  }
+
+  const onFilterElementClick = () => {
+    setFilterElementParams({
+      visible: true,
+      type: 'user',
+      reference: AssetBrowseReference
+    })
+  }
+
+  const classes = classNames('asset-list', {
+    'asset-list-fullscreen': fullScreen,
+  });  
+
+  return (
+    <div className={classes}>
+      <div 
+        className='flex'
+        style={{
+          padding: '20px 15px 5px',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        }}
+      >
+        <Space className='mr-3' style={{ flex: 0, paddingBottom: 15 }}>
+          <Button onClick={onFilterElementClick}>可见列设置</Button>
+        </Space>
+        <div className='flex' style={{ flex: 1, overflow: 'auto', paddingBottom: 15 }}>
+          <div style={{ flex: 1 }}></div>
+          <Space style={{ flex: 0 }}>
+          <Select 
+            value={args.params.catalogType}
+            onChange={(value) => {
+              setArgsAndPage({ catalogType: value })
+            }}
+            style={{ width: 170 }}
+          >
+            <Select.Option value='currentRecursive'>
+              当前目录(含子目录)
+            </Select.Option>
+            <Select.Option value='current'>
+              当前目录
+            </Select.Option>
+            <Select.Option value='fullSearch'>
+              全部数据
+            </Select.Option>
+          </Select>
+          <Input size="middle"
+            addonBefore={
+              <Select 
+                value={searchType}
+                onChange={(value) => {
+                  setSearchType(value)
+                  if (value === 'attribute') {
+                    setFilterElementValueParams({
+                      visible: true,
+                      type: AssetBrowseReference,
+                      defaultValue: args.params.elementValueFilters
+                    })
+                  }
+                }}
+                style={{ width: 120 }} 
+              >
+                <Select.Option value='keyword'>
+                  关键字搜索
+                </Select.Option>
+                <Select.Option value='attribute'>
+                  属性值过滤
+                </Select.Option>
+              </Select>
+            }
+            placeholder="资产要素值/任务"
+            value={keyword}
+            bordered={true} allowClear
+            onChange={(e) => {
+              const keyword = e.target.value
+              setKeyword(keyword)
+              $keyword.next((keyword??'').trim())
+            }} 
+            style={{ width: 270 }}
+          />
+          <Tooltip title={fullScreen?'取消全屏':'全屏'}>
+            <Button 
+              onClick={() => {
+                setFullScreen(!fullScreen)
+                onFullScreenChange?.(!fullScreen)
+              }} 
+              icon={fullScreen ?<CancelFullScreenSvg style={{ width: 20, height: 20, marginTop: 2 }} /> : <FullScreenSvg style={{ width: 20, height: 20, marginTop: 2 }} />} 
+              type='text' 
+            />
+          </Tooltip>
+        </Space>
+      </div>  
+      </div>
+      <div className='px-3'>
+        <Table
+          maxHeight={tableMaxHeight}
+          loading={loading||loadingElements}
+          columns={columns}
+          dataSource={tableData}
+          pageSize={page.pageSize} pageNum={page.pageNum} total={total??0}
+          onRowClick={(event, value) => {
+            setRow(value)
+            setAssetDetailParams({
+              visible: true,
+              id: value?.id,
+              dirId: value?.dirId,
+              reference: AssetBrowseReference
+            })
+          }}
+          rowClassName={(record, index) => (record?.id === row?.id) ? 'yy-table-select-row' : ''}
+          onPaginate={(page, pageSize) => {
+            setRow()
+            setPageAndArgs({ pageNum: page, pageSize })
+          }}
+        />
+      </div>
+      <FilterElement
+        {...filterElementParams}
+        onCancel={(refresh = false) => {
+          setFilterElementParams({
+            visible: false,
+            type: undefined,
+            reference: undefined
+          })
+          if (refresh) {
+            getElements()
+            getAssets()
+          }
+        }}
+      />
+      <FilterElementValue
+        {...filterElementValueParams}
+        onCancel={(refresh, val) => {
+          setFilterElementValueParams({
+            visible: false,
+            type: undefined,
+            defaultValue: undefined,
+          })
+          setSearchType('keyword')
+
+          if (refresh) {
+            setArgsAndPage({ elementValueFilters: val })
+          }
+        }}
+      />
+      <AssetDetailDrawer
+        {...assetDetailParams}
+        onCancel={() => {
+          setAssetDetailParams({
+            visible: false,
+            id: undefined,
+            dirId: undefined,
+            reference: undefined
+          })
+        }}
+      />
+      {contextHolder}
+    </div>
+  )
+}
+
+export default FC
\ No newline at end of file

src/view/Manage/AssetManage/table.jsx

@@ -61,8 +61,6 @@ const FC = (props) => {
   const [permissions, setPermissions] = React.useState([])
   const [loadingPublishStatus, setLoadingPublishStatus] = React.useState(false)
   const [publishStatus, setPublishStatus] = React.useState()
-  const [loadingRelatedMetadataStatus, setLoadingRelatedMetadataStatus] = React.useState(false)
-  const [relatedMetadataStatus, setRelatedMetadataStatus] = React.useState()
   const $keyword = React.useMemo(() => new Subject(), [])
   const [keyword, setKeyword] = React.useState()
   const [searchType, setSearchType] = React.useState('keyword')
@@ -146,7 +144,6 @@ const FC = (props) => {
   React.useEffect(() => {
     getElements()
     getPublishStatus()
-    getResourceRelatedMetadataStatus()
 
     const $$keyword = $keyword.pipe(debounceTime(1000)).subscribe((keyword) => {
       setArgsAndPage({ keyword })
@@ -379,20 +376,6 @@ const FC = (props) => {
     })
   }
 
-  const getResourceRelatedMetadataStatus = () => {
-    setLoadingRelatedMetadataStatus(true)
-    dispatch({
-      type: 'assetmanage.getResourceRelatedMetadataStatus',
-      callback: data => {
-        setLoadingRelatedMetadataStatus(false)
-        setRelatedMetadataStatus(data)
-      },
-      error: () => {
-        setLoadingRelatedMetadataStatus(false)
-      }
-    })
-  }
-
   const getElements = () => {
     setLoadingElements(true)
     dispatch({

src/view/Manage/AssetResourceBrowse/index.jsx

-import React from 'react';
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import { CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons';
+import { ResizableBox } from 'react-resizable';
 
-import AssetBrowse from '../AssetBrowse';
+import AssetTree from '../AssetManage/Component/AssetTree';
+import AssetDirectory from '../AssetManage/Component/AssetDirectory';
+import RelationContainer from '../AssetBrowse/Component/RelationContainer';
+import AssetTable from "./table";
+import Separate from '../AssetManage/Component/Separate';
 import { ResourceBrowseReference } from '../../../util/constant';
 
-const AssetResourceBrowse = (props) => {
+import '../AssetBrowse/index.less';
+
+const FC = (props) => {
+  const [ nodeParams, setNodeParams ] = useState({ centerId: '', expandId: '', nodeType: '' });
+  const [ expandTree, setExpandTree ] = useState(true);
+  const [ expandRelation, setExpandRelation ] = useState(true);
+  const [ assetCount, setAssetCount ] = useState(0);
+  const [ resizeRelation, setResizeRelation ] = useState(false);
+  const [ assetFullScreen, setAssetFullScreen ] = useState(false);
+
+  const { centerId, expandId } = nodeParams;
+
+  const onTreeSelect = (value, type) => {
+    setNodeParams({ centerId: value||'', expandId: '', nodeType: type });
+  }
+
+  const treeToggleClick = () => {
+    setExpandTree(!expandTree);
+    setResizeRelation(!resizeRelation);
+  }
+
+  const relationToggleClick = () => {
+    setExpandRelation(!expandRelation);
+    setResizeRelation(!resizeRelation);
+  }
+
+  const onRelationChange = (data) => {
+    setNodeParams(data);
+  }
+
+  const onAssetCountChange = (count) => {
+    setAssetCount(count);
+  }
+
+  const onFullScreenChange = (value) => {
+    setAssetFullScreen(value);
+  }
+
+  let nodeId = '';
+  if ((expandId||'') !== '') {
+    nodeId = expandId;
+  } else {
+    nodeId = centerId;
+  }
+
+  const classes = classNames('asset-browse', {
+    'asset-browse-tree-collapse': !expandTree,
+    'asset-browse-relation-collapse': !expandRelation,
+  }); 
+  
+  const rightClasses = classNames('right', {
+    'right-fullscreen': assetFullScreen
+  }); 
+
   return (
-    <AssetBrowse reference={ResourceBrowseReference} {...props} />
+    <div className={classes}>
+      <ResizableBox 
+          className='left' 
+          width={230} 
+          height={Infinity}
+          axis='x'
+          minConstraints={[230, Infinity]} maxConstraints={[Infinity, Infinity]}          
+        >
+        <AssetTree centerId={centerId} onSelect={onTreeSelect} reference={ResourceBrowseReference} {...props} />
+      </ResizableBox>
+      {
+        expandTree && <Separate width={15} />
+      }
+      <div className={rightClasses}>
+        <AssetDirectory id={nodeId} assetCount={assetCount} reference={ResourceBrowseReference} nodeType={nodeParams.nodeType} />
+        <Separate height={15} />
+        <div className='flex' style={{ flex: 1, height: '100%', overflow: 'hidden' }}>
+          {
+            expandRelation && <React.Fragment>
+              <div style={{ flex: 1, height: '100%', overflow: 'hidden' }}>
+                <RelationContainer reference={ResourceBrowseReference} nodeParams={nodeParams} onChange={onRelationChange} resize={resizeRelation} />
+              </div>
+              <Separate width={15} />
+            </React.Fragment>
+          }
+          <div style={{ flex: 1, overflow: 'hidden' }}>
+            <AssetTable node={{ nodeId }} onFullScreenChange={onFullScreenChange} {...props} />
+          </div>          
+        </div>
+        <div className='tree-toggle' onClick={treeToggleClick}>
+        { expandTree ? <CaretLeftOutlined /> : <CaretRightOutlined /> }
+        </div>
+        <div className='relation-toggle' onClick={relationToggleClick}>
+          { expandRelation ? <CaretLeftOutlined /> : <CaretRightOutlined /> }
+        </div>
+      </div>
+    </div>
   )
 }
 
-export default AssetResourceBrowse;
\ No newline at end of file
+export default FC;
\ No newline at end of file

src/view/Manage/AssetResourceBrowse/table.jsx

+import React from 'react'
+import classNames from 'classnames'
+import { Tooltip, Typography, Space, Dropdown, Button, Menu, Checkbox, Input, Select, Modal, Table as AntdTable } from 'antd'
+import ResizeObserver from 'rc-resize-observer'
+import { debounceTime, Subject } from 'rxjs'
+import { DownOutlined, UpOutlined } from "@ant-design/icons"
+import LocalStorage from 'local-storage'
+
+import { defaultPage, usePage } from '../../../util/hooks/page'
+import Table from '../../../util/Component/Table'
+import { dispatch } from '../../../model'
+import { getAssetRange, getAssetType, getQueryParam, IsArr, isSzseEnv, showMessage, showNotifaction } from '../../../util'
+import { ResourceBrowseReference } from '../../../util/constant'
+import PermissionButton from '../../../util/Component/PermissionButton'
+import PermissionMenuItem from '../../../util/Component/PermissionMenuItem'
+import { FullScreenSvg, CancelFullScreenSvg } from '../AssetManage/Component/AssetSvg'
+
+import FilterElement from '../AssetManage/Component/FilterElementModal'
+import FilterElementValue from '../AssetResourceManage/filter-element-value'
+import { AssetDirectorySubject } from '../AssetManage/Component/AssetDirectory'
+import { AssetActionSubject } from '../AssetManage/Component/AssetAction'
+import TagCell from '../Model/Component/tag-help'
+import { MetadataColumn } from '../AssetResourceManage/table'
+import AssetDetailDrawer from '../AssetManage/Component/AssetDetailDrawer'
+
+import '../AssetManage/Component/AssetTable.less'
+
+const FC = (props) => {
+  const { node, onFullScreenChange } = props
+  const [args, setArgs] = React.useState(() => ({
+    params: {
+      page: defaultPage.pageNum, 
+      size: defaultPage.pageSize,
+      catalogType: 'currentRecursive',
+      keyword: undefined,
+      elementValueFilters: []
+    },
+  }))
+  const [fullScreen, setFullScreen] = React.useState(false)
+  const [loading, setLoading] = React.useState(false)
+  const [loadingElements, setLoadingElements] = React.useState(false)
+  const [columns, setColumns] = React.useState()
+  const [elements, setElements] = React.useState()
+  const [data, setData] = React.useState()
+  const [total, setTotal] = React.useState()
+  const [row, setRow] = React.useState()
+  const $keyword = React.useMemo(() => new Subject(), [])
+  const [keyword, setKeyword] = React.useState()
+  const [searchType, setSearchType] = React.useState('keyword')
+  const [resoureTagMap, setResourceTagMap] = React.useState()
+  const [filterElementParams, setFilterElementParams] = React.useState({
+    visible: false,
+    type: undefined,
+    reference: undefined
+  })
+  const [filterElementValueParams, setFilterElementValueParams] = React.useState({
+    visible: false,
+    type: undefined,
+    defaultValue: undefined,
+  })
+  const [assetDetailParams, setAssetDetailParams] = React.useState({
+    visible: false,
+    id: undefined,
+    dirId: undefined,
+    reference: undefined,
+  })
+
+  const [page, setPage] = usePage()
+  const [modal, contextHolder] = Modal.useModal()
+
+  const locationIdRef = React.useRef(getQueryParam('id', props?.location?.search))
+  const locationDidRef = React.useRef(getQueryParam('did', props?.location?.search))
+
+  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
+  }, [])
+
+  const storageChange = (e) => {
+    if (e.key === 'editAssetsChange') {
+      getAssets()
+    } else if (e.key === 'assetRelationOnClickEvent') {
+      locationIdRef.current = e.relation?.dataAssetId
+      locationDidRef.current = e.relation?.dirId
+    } else if (e.key === 'assetPathOnClickEvent') {
+      locationIdRef.current = e.id
+      locationDidRef.current = e.dirId
+    }
+  }
+
+  React.useEffect(() => {
+    getElements()
+
+    const $$keyword = $keyword.pipe(debounceTime(1000)).subscribe((keyword) => {
+      setArgsAndPage({ keyword })
+    })
+
+    window?.addEventListener("storage", storageChange)
+
+    return () => {
+      $$keyword.unsubscribe()
+      window?.removeEventListener("storage", storageChange)
+    }
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+  
+  React.useEffect(() => {
+    if (node) {
+      setRow()
+      if (locationIdRef.current && locationDidRef.current) {
+        getDataAssetLocation()
+      } else {
+        setPageAndArgs({ pageNum: 1, pageSize: page.pageSize })
+      }
+    }
+  }, [node])
+
+  React.useEffect(() => {
+    if (node?.nodeId) {
+      getAssets()
+    }
+  }, [args])
+
+  React.useEffect(() => {
+    if (data) {
+      getResourceTag()
+    }
+  }, [data])
+
+  const notElementCol = [
+    {
+      title: '标签',
+      dataIndex: 'tag',
+      width: 360,
+      className: 'table-tag-cell',
+      render: (_, record) => <div onClick={(e) => {e?.stopPropagation()}}>
+        <TagCell 
+          id={record.id}
+          did={record.dirId}
+          type='dataAsset'
+          tags={resoureTagMap?.[`${record.id}`]}
+        />
+        </div>
+    }
+  ]
+
+  React.useEffect(() => {
+    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)
+    }
+    
+    setColumns([...newColumns, ...notElementCol])
+  }, [elements, resoureTagMap])
+
+  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 tableMaxHeight = React.useMemo(() => {
+    return fullScreen ? 'calc(100vh - 209px - 72px)' : 'calc(100vh - 209px - 123px - 15px - 72px)'
+  }, [fullScreen])
+
+  const getElements = () => {
+    setLoadingElements(true)
+    dispatch({
+      type: 'assetmanage.listFilterElements',
+      payload: {
+        range: getAssetRange(ResourceBrowseReference),
+        dataAssetType: getAssetType(ResourceBrowseReference)
+      },
+      callback: data => {
+        setLoadingElements(false)
+        setElements(data)
+      },
+      error: () => {
+        setLoadingElements(false)
+      }
+    })
+  }
+
+  const getAssets = () => {
+    setLoading(true)
+
+    let [recursive, dirId] = [true, node?.nodeId]
+    if (args.params.catalogType === 'current') {
+      recursive = false
+    }
+    if (args.params.catalogType === 'fullSearch') {
+      dirId = ''
+    }
+
+    dispatch({
+      type: 'assetmanage.listDataResourcesByPage',
+      payload: {
+        data: args.params.elementValueFilters??[],
+        params: {
+          dirId,
+          pageNum: args.params.page,
+          pageSize: args.params.size,
+          keyword: args.params.keyword,
+          range: getAssetRange(ResourceBrowseReference),
+          recursive,
+        }
+      },
+      callback: data => {
+        setLoading(false)
+        setData(data?.data)
+        setTotal(data?.total)
+
+        if (locationIdRef.current) {
+          const index = (data?.data??[]).findIndex(item => item.id === locationIdRef.current)
+          
+          if (index !== -1) {
+            setRow(data?.data[index])
+          }         
+
+          setTimeout(() => {
+            var anchor = document.getElementById(`${locationIdRef.current}`)
+            anchor?.scrollIntoView()
+            locationIdRef.current = null
+            locationDidRef.current = null
+          }, 500)
+        } 
+      },
+      error: () => {
+        setLoading(false)
+        locationIdRef.current = null
+        locationDidRef.current = null
+      }
+    })
+  }
+
+  const getResourceTag = () => {
+    const ids = (data??[]).map(item => item.id)
+    if (ids.length > 0) {
+      dispatch({
+        type: 'tag.getResourceTagIn',
+        payload: {
+          params: {
+            resourceIds: ids,
+            includeAll: true,
+            includePrivate: true
+          }
+        },
+        callback: data => {
+          setResourceTagMap(data?.data)
+        }
+      });
+    } else {
+      setResourceTagMap()
+    }
+  }
+
+  const getDataAssetLocation = () => {
+    setLoading(true)
+    dispatch({
+      type: 'assetmanage.getDataAssetLocation',
+      payload: {
+        dataAssetId: locationIdRef.current,
+        dirId: locationDidRef.current,
+      },
+      callback: data => {
+        const newPageNum = parseInt(data.offset/page.pageSize + ((data.offset%page.pageSize===0)?0:1))
+        setPageAndArgs({ ...page, pageNum: newPageNum })
+      },
+      error: () => {
+        setLoading(false)
+        locationIdRef.current = null
+        locationDidRef.current = null
+        setPageAndArgs({ ...page, pageNum: 1 })
+      }
+    })
+  }
+
+  const onFilterElementClick = () => {
+    setFilterElementParams({
+      visible: true,
+      type: 'user',
+      reference: ResourceBrowseReference
+    })
+  }
+
+  const classes = classNames('asset-list', {
+    'asset-list-fullscreen': fullScreen,
+  });  
+
+  return (
+    <div className={classes}>
+      <div 
+        className='flex'
+        style={{
+          padding: '20px 15px 5px',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        }}
+      >
+        <Space className='mr-3' style={{ flex: 0, paddingBottom: 15 }}>
+          <Button onClick={onFilterElementClick}>可见列设置</Button>
+        </Space>
+        <div className='flex' style={{ flex: 1, overflow: 'auto', paddingBottom: 15 }}>
+          <div style={{ flex: 1 }}></div>
+          <Space style={{ flex: 0 }}>
+          <Select 
+            value={args.params.catalogType}
+            onChange={(value) => {
+              setArgsAndPage({ catalogType: value })
+            }}
+            style={{ width: 170 }}
+          >
+            <Select.Option value='currentRecursive'>
+              当前目录(含子目录)
+            </Select.Option>
+            <Select.Option value='current'>
+              当前目录
+            </Select.Option>
+            <Select.Option value='fullSearch'>
+              全部数据
+            </Select.Option>
+          </Select>
+          <Input size="middle"
+            addonBefore={
+              <Select 
+                value={searchType}
+                onChange={(value) => {
+                  setSearchType(value)
+                  if (value === 'attribute') {
+                    setFilterElementValueParams({
+                      visible: true,
+                      type: ResourceBrowseReference,
+                      defaultValue: args.params.elementValueFilters
+                    })
+                  }
+                }}
+                style={{ width: 120 }} 
+              >
+                <Select.Option value='keyword'>
+                  关键字搜索
+                </Select.Option>
+                <Select.Option value='attribute'>
+                  属性值过滤
+                </Select.Option>
+              </Select>
+            }
+            placeholder="资产要素值/任务"
+            value={keyword}
+            bordered={true} allowClear
+            onChange={(e) => {
+              const keyword = e.target.value
+              setKeyword(keyword)
+              $keyword.next((keyword??'').trim())
+            }} 
+            style={{ width: 270 }}
+          />
+          <Tooltip title={fullScreen?'取消全屏':'全屏'}>
+            <Button 
+              onClick={() => {
+                setFullScreen(!fullScreen)
+                onFullScreenChange?.(!fullScreen)
+              }} 
+              icon={fullScreen ?<CancelFullScreenSvg style={{ width: 20, height: 20, marginTop: 2 }} /> : <FullScreenSvg style={{ width: 20, height: 20, marginTop: 2 }} />} 
+              type='text' 
+            />
+          </Tooltip>
+        </Space>
+      </div>  
+      </div>
+      <div className='px-3'>
+        <Table
+          maxHeight={tableMaxHeight}
+          loading={loading||loadingElements}
+          columns={columns}
+          dataSource={tableData}
+          pageSize={page.pageSize} pageNum={page.pageNum} total={total??0}
+          onRowClick={(event, value) => {
+            setRow(value)
+            setAssetDetailParams({
+              visible: true,
+              id: value?.id,
+              dirId: value?.dirId,
+              reference: ResourceBrowseReference
+            })
+          }}
+          rowClassName={(record, index) => (record?.id === row?.id) ? 'yy-table-select-row' : ''}
+          onPaginate={(page, pageSize) => {
+            setRow()
+            setPageAndArgs({ pageNum: page, pageSize })
+          }}
+        />
+      </div>
+      <FilterElement
+        {...filterElementParams}
+        onCancel={(refresh = false) => {
+          setFilterElementParams({
+            visible: false,
+            type: undefined,
+            reference: undefined
+          })
+          if (refresh) {
+            getElements()
+            getAssets()
+          }
+        }}
+      />
+      <FilterElementValue
+        {...filterElementValueParams}
+        onCancel={(refresh, val) => {
+          setFilterElementValueParams({
+            visible: false,
+            type: undefined,
+            defaultValue: undefined,
+          })
+          setSearchType('keyword')
+
+          if (refresh) {
+            setArgsAndPage({ elementValueFilters: val })
+          }
+        }}
+      />
+      <AssetDetailDrawer
+        {...assetDetailParams}
+        onCancel={() => {
+          setAssetDetailParams({
+            visible: false,
+            id: undefined,
+            dirId: undefined,
+            reference: undefined
+          })
+        }}
+      />
+      {contextHolder}
+    </div>
+  )
+}
+
+export default FC
\ No newline at end of file

src/view/Manage/AssetResourceManage/add-to-asset.jsx

@@ -240,7 +240,7 @@ export const Basic = React.forwardRef(function ({ items, defaultValue }, ref) {
             label='资产信息'
             rules={[{ required: true, message: '请填写资产信息!' }]}
           >
-            <AssetInfoItem />
+            <AssetInfoItem elements={defaultValue} />
           </Form.Item>
         </React.Fragment> : <React.Fragment>
           <Form.Item
@@ -264,9 +264,8 @@ export const Basic = React.forwardRef(function ({ items, defaultValue }, ref) {
   )
 })
 
-const AssetInfoItem = ({ value, onChange }) => {
+const AssetInfoItem = ({ value, elements, onChange }) => {
   const [loading, setLoading] = React.useState(false)
-  const [elements, setElements] = React.useState()
   const [groups, setGroups] = React.useState()
 
   const [form] = Form.useForm()
@@ -280,29 +279,8 @@ const AssetInfoItem = ({ value, onChange }) => {
   }, [value])
 
   React.useEffect(() => {
-    getElements()
-  }, [])
-  
-  const getElements = () => {
-    setLoading(true)
-    dispatch({
-      type: 'assetmanage.listElements',
-      payload: {
-        params: {
-          range: getAssetRange(ResourceManageReference),
-          dataAssetType: getAssetType(ResourceManageReference),
-        }
-      },
-      callback: data => {
-        setLoading(false)
-        setElements(data)
-        setGroups(Array.from(new Set((data??[]).map(item => item.type))))
-      },
-      error: () => {
-        setLoading(false)
-      }
-    })
-  }
+    setGroups(Array.from(new Set((elements??[]).map(item => item.type))))
+  }, [elements])
 
   const onValuesChange = (changedValues, allValues) => {
     const newElements = [...elements]