资源管理样式调整

src/view/Manage/AssetResourceManage/index.jsx

@@ -26,10 +26,13 @@ const FC = (props) => {
   }
 
   const onResourceListClick = (value) => {
-    console.log('value', value)
     setAsset(value)
   }
 
+  const onResourceListFullScreenChange = (value) => {
+    setAssetListFullScreen(value)
+  }
+
   const treeToggleClick = () => {
     setCollapseTree(!collapseTree)
   }
@@ -60,7 +63,11 @@ const FC = (props) => {
       <div className={middleClasses}>
         <NodeDetail reference={ResourceManageReference} id={node?.nodeId} assetCount={node?.dataAssetAndSubDirCount}/>
         <Separate height={15} />
-        <ResourceList node={node} onClick={onResourceListClick} />
+        <ResourceList 
+          node={node} 
+          onClick={onResourceListClick} 
+          onFullScreenChange={onResourceListFullScreenChange}
+        />
         <div className='tree-toggle' onClick={treeToggleClick}>
         { !collapseTree ? <CaretLeftOutlined /> : <CaretRightOutlined /> }
         </div>

src/view/Manage/AssetResourceManage/table.jsx

 import React from 'react'
-import { Tooltip, Typography } from 'antd'
+import classNames from 'classnames'
+import { Tooltip, Typography, Space, Dropdown, Button, Menu, Checkbox, Input, Select } 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 { isSzseEnv } from '../../../util'
+import { getAssetRange, isSzseEnv } 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 '../AssetManage/Component/AssetTable.less'
+
 
 const FC = (props) => {
-  const { node, onClick } = props
+  const { type = ResourceManageReference, node, onClick, onFullScreenChange } = props
   const [args, setArgs] = React.useState(() => ({
     params: {
       page: defaultPage.pageNum, 
       size: defaultPage.pageSize,
       onlyPending: false,
-      fullSearch: false,
+      catalogType: 'current',
       keyword: undefined,
     },
   }))
@@ -26,6 +36,11 @@ const FC = (props) => {
   const [total, setTotal] = React.useState()
   const [selectedRows, setSelectedRows] = React.useState([])
   const [row, setRow] = React.useState()
+  const [permissions, setPermissions] = React.useState([])
+  const $keyword = React.useMemo(() => new Subject(), [])
+  const [keyword, setKeyword] = React.useState()
+  const [searchType, setSearchType] = React.useState('keyword')
+
   const [page, setPage] = usePage()
 
   const setArgsAndPage = React.useCallback((params) => {
@@ -50,11 +65,23 @@ const FC = (props) => {
     //eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  React.useMemo(() => {
+  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) {
       setRow()
       setSelectedRows([])
       setPageAndArgs({ pageNum: 1, pageSize: page.pageSize })
+      getPermissions()
     }
   }, [node])
 
@@ -65,6 +92,49 @@ const FC = (props) => {
     }
   }, [args])
 
+  const [addAble, importAble, exportAble, changeDirectoryAble, deleteAble] = React.useMemo(() => {
+    let [_addAble, _importAble, _exportAble, _changeDiretoryAble, _deleteAble] = [false, false, false, false, false]
+
+    _addAble = (permissions??[]).findIndex(item => item==='add') !== -1
+
+    if ((selectedRows??[]).length === 0) {
+      _importAble = (permissions??[]).findIndex(item => item==='import') !== -1
+      _exportAble = (permissions??[]).findIndex(item => item==='export') !== -1
+    } else {
+      let [allowImport, allowExport] = [true, true]
+      for (const row of selectedRows) {
+        const importIndex = (row.allowButtons??[]).findIndex(item => item==='import')
+        const exportIndex = (row.allowButtons??[]).findIndex(item => item==='export')
+        if (importIndex === -1) {
+          allowImport = false
+        }
+        if (exportIndex === -1) {
+          allowExport = false
+        }
+      }
+
+      _importAble = allowImport
+      _exportAble = allowExport
+    }
+
+    let [allowChangeDirectory, allowDelete] = [true, true]
+    for (const row of selectedRows) {
+      const changeDirecotoryIndex = (row.allowButtons??[]).findIndex(item => item==='changeDir')
+      const deleteIndex = (row.allowButtons??[]).findIndex(item => item==='delete')
+      if (changeDirecotoryIndex === -1) {
+        allowChangeDirectory = false
+      }
+      if (deleteIndex === -1) {
+        allowDelete = false
+      }
+    }
+
+    _changeDiretoryAble = allowChangeDirectory
+    _deleteAble = allowDelete
+
+    return [_addAble, _importAble, _exportAble, _changeDiretoryAble, _deleteAble]
+  }, [permissions, selectedRows])
+
   const columns = React.useMemo(() => {
     const newColumns = []
     let index = 0 
@@ -120,6 +190,23 @@ const FC = (props) => {
     return newTableData
   }, [data])
 
+  const tableMaxHeight = React.useMemo(() => {
+    return fullScreen ? 'calc(100vh - 209px - 72px)' : 'calc(100vh - 209px - 123px - 15px - 72px)'
+  }, [fullScreen])
+
+  const getPermissions = () => {
+    dispatch({
+      type: 'assetmanage.getPrivilegeByRangeAndDirId',
+      payload: {
+        range: getAssetRange(type),
+        optionId: node?.nodeId
+      },
+      callback: data => {
+        setPermissions(data)
+      }
+    })
+  }
+
   const getElements = () => {
     setLoadingElements(true)
     dispatch({
@@ -172,10 +259,225 @@ const FC = (props) => {
     })
   }
 
+  const onAddClick = () => {
+
+  }
+
+  const onImportClick = () => {
+
+  }
+
+  const onExportClick = () => {
+
+  }
+
+  const onChangeDirectoryClick = () => {
+
+  }
+
+  const onDeleteClick = () => {
+
+  }
+
+  const onFilterElementClick = () => {
+
+  }
+
+  const onMenuClick = ({ key }) => {
+    if (key === 'import') {
+      onImportClick()
+    } else if (key === 'export') {
+      onExportClick()
+    } else if (key === 'changeDir') {
+      onChangeDirectoryClick()
+    } else if (key === 'delete') {
+      onDeleteClick()
+    } else if (key === 'colConfig') {
+      onFilterElementClick()
+    }
+  }
+
+  const moreMenu = (
+    <Menu onClick={onMenuClick}>
+      {
+        (node?.resourceType !== 'custom' && node?.type !== 'custom') && <PermissionMenuItem key='import' defaultPermission={importAble}>
+          <div className='text-center'>
+            导入
+          </div>
+        </PermissionMenuItem>
+      }
+      <PermissionMenuItem key='export' defaultPermission={exportAble}>
+        <div className='text-center'>
+          导出
+        </div>
+      </PermissionMenuItem>
+      <PermissionMenuItem 
+        key='changeDir'
+        defaultPermission={changeDirectoryAble} 
+        disabled={(selectedRows??[]).length===0}
+        tip={(selectedRows??[]).length===0?'请先选择资产':''}
+      >
+        <div className='text-center'>
+        变更目录
+        </div>
+      </PermissionMenuItem>
+      {
+        (node?.resourceType !== 'custom' && node?.type !== 'custom') && <PermissionMenuItem 
+          key='delete'
+          defaultPermission={deleteAble} 
+          disabled={(selectedRows??[]).length===0}
+          tip={(selectedRows??[]).length===0?'请先选择资产':''}
+        >
+          <div className='text-center'>
+            删除
+          </div>
+        </PermissionMenuItem>
+      }   
+      <Menu.Item key='colConfig'>
+        <div className='text-center'>
+          可见列设置
+        </div>
+      </Menu.Item>
+    </Menu>
+  )
+
+  const classes = classNames('asset-list', {
+    'asset-list-fullscreen': fullScreen,
+  });  
+
   return (
-    <div className='px-3 pt-3'>
+    <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 }}>
+        {
+          (type === ResourceManageReference && node?.level !== 1 && node?.resourceType !== 'custom' && node?.type !== 'custom') && <PermissionButton
+            defaultPermission={addAble}
+            onClick={onAddClick}
+          >
+            新增
+          </PermissionButton>
+        }
+        {
+          compact ? <Dropdown overlay={moreMenu} placement="bottomCenter"> 
+            <Button>更多</Button>
+          </Dropdown> : <React.Fragment>
+            {
+              (node?.resourceType !== 'custom' && node?.type !== 'custom') && <PermissionButton 
+                defaultPermission={importAble} 
+                onClick={onImportClick}>
+                导入
+              </PermissionButton>
+            }
+            <PermissionButton 
+              defaultPermission={exportAble} 
+              onClick={onExportClick}>
+              导出
+            </PermissionButton>
+            <PermissionButton 
+              defaultPermission={changeDirectoryAble} 
+              tip={(selectedRows??[]).length===0?'请先选择资产':''}
+              onClick={onChangeDirectoryClick} 
+              disabled={(selectedRows??[]).length===0} 
+            >
+              变更目录
+            </PermissionButton>
+            {
+              (node?.resourceType !== 'custom' && node?.type !== 'custom') && <PermissionButton 
+                defaultPermission={deleteAble} 
+                tip={(selectedRows??[]).length===0?'请先选择资产':''}
+                onClick={onDeleteClick} 
+                disabled={(selectedRows??[]).length===0} 
+              >
+                删除
+              </PermissionButton>
+            }
+            <Button onClick={onFilterElementClick}>可见列设置</Button>
+          </React.Fragment>
+        }
+        </Space>
+        <div className='flex' style={{ flex: 1, overflow: 'auto', paddingBottom: 15 }}>
+          <div style={{ flex: 1 }}></div>
+          <Space style={{ flex: 0 }}>
+            <Checkbox 
+              onChange={(e) => {
+                setArgsAndPage({ onlyPending: e.target.checked })
+              }}
+              style={{ width: 102 }}
+            >
+              仅看待处理
+            </Checkbox>
+            <Select 
+              value={args.params.catalogType}
+              onChange={(value) => {
+                setArgsAndPage({ catalogType: value })
+              }}
+              style={{ width: 140 }}
+            >
+              <Select.Option value='current'>
+                当前目录
+              </Select.Option>
+              <Select.Option value='currentRecursive'>
+                当前及子孙目录
+              </Select.Option>
+              <Select.Option value='fullSearch'>
+                全部数据
+              </Select.Option>
+            </Select>
+            <Input size="middle"
+              addonBefore={
+                <Select 
+                  value={searchType}
+                  onChange={(value) => {
+                    setSearchType(value)
+                  }}
+                  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'>
+        <ResizeObserver
+          onResize={({ width }) => {
+            setCompact(width < 1030)
+          }}
+        >
           <Table
-        maxHeight='400px'
+            maxHeight={tableMaxHeight}
             loading={loading||loadingElements}
             columns={columns}
             dataSource={tableData}
@@ -197,6 +499,8 @@ const FC = (props) => {
               },
             }}
           />
+        </ResizeObserver>
+      </div>
     </div>
   )
 }