资源列表

src/util/Component/Table.less

+// @import (reference) "@/less" 只导入变量
+@ant-prefix: foobar;
+
+.ssetable {
+  .react-resizable{
+    position: relative;
+    background-clip: padding-box;
+    user-select: none;
+  }
+  
+  .react-resizable-handle {
+    position: absolute;
+    width: 10px;
+    height: 100%;
+    bottom: 0;
+    right: -5px;
+    cursor: col-resize;
+    // background: red;
+    z-index: 999;
+  }
+
+  .@{ant-prefix}-table-thead > tr > th {
+    padding: 8px 8px !important;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+    
+  // .@{ant-prefix}-table-tbody > tr > td  {
+  //     padding: 12px 8px !important;
+  // }
+    
+  .@{ant-prefix}-table-tbody > .@{ant-prefix}-table-measure-row > td  {
+      padding: 0px !important;
+  }
+    
+  .@{ant-prefix}-table-tbody > tr .@{ant-prefix}-table-row-selected > td {
+      background: #fff !important;
+  }
+    
+  tr.@{ant-prefix}-table-expanded-row > td {
+      background: #fff !important;
+  }
+    
+  .@{ant-prefix}-table-thead > tr > th {
+      background-color: #F2F5FC !important;
+  }
+}

src/util/Component/Table.tsx

+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { PaginationProps, Table, TableColumnType, TableProps } from 'antd'
+import type { SortOrder, ColumnGroupType, ColumnType } from 'antd/lib/table/interface'
+import { Resizable } from 'react-resizable'
+import ResizeObserver from 'rc-resize-observer'
+import produce from 'immer'
+import { nanoid } from 'nanoid'
+import { getScrollbarWidth } from '..'
+import { defaultPageSizeOptions } from '../hooks/page'
+import ToolTip from './Tooltip'
+import { Menu, useContextMenu } from 'react-contexify'
+import { generateUUID } from ".."
+import PermissionRcItem from './PermissionRcItem'
+
+import 'react-contexify/dist/ReactContexify.css'
+import './Table.less'
+
+interface Props<RowType> {
+  width: number
+  maxHeight?: string | number
+  pageSize: number
+  pageNum: number
+  total: number
+  pageSizeOptions: string[] | number[]
+  onPaginate: PaginationProps["onChange"]
+  rowSelection?: TableProps<RowType>
+  bodyCell: any
+  extraColWidth?: number
+  menuData: string[] 
+  menuPermissions: string[]
+  onMenuItemClick: Function
+  onRowClick: Function
+  shouldRowContextMenu: Function
+}
+
+const scrollbarWidth = getScrollbarWidth()
+
+
+function FC<RowType extends object = any>({ width, maxHeight, pageSize, pageNum, total, pageSizeOptions, onPaginate, columns, bodyCell, extraColWidth = 0, menuData, menuPermissions, onMenuItemClick, onRowClick, shouldRowContextMenu, ...rest }: TableProps<RowType> & Props<RowType>) {
+  type Columns = typeof columns
+  const MENU_ID = generateUUID()
+  const [tableWidth, setTableWidth] = useState(0)
+
+  const { show } = useContextMenu({
+    id: MENU_ID,
+  })
+
+  const paddingCol = useRef<TableColumnType<any>>({
+    key: 'padding',
+    width: 0,
+    render: () => undefined
+  })
+
+  const handleResize = (index: number) => (e: any, { size }: any) => {
+    setCols((prevCols) => {
+      const nextColumns = [...(prevCols ?? [])];
+      nextColumns[index] = {
+        ...nextColumns[index],
+        width: size.width,
+      };
+      return nextColumns;
+    });
+  };
+
+  const [cols, setCols] = useState<Columns>()
+  useEffect(() => {
+    if (!!columns && tableWidth > 0) {
+      const contentWidth = getWidth(width ?? tableWidth,extraColWidth)
+      setDefaultWidth(columns, contentWidth)
+      paddingCol.current.width = 0
+
+      const cols = columns
+        .map((col, index) => {
+          const render = getRender(col);
+          const colWidth = col.width ?? 100;
+          return {
+            ...col, /* colRef: createRef(), */ width: colWidth, render, ellipsis: true,
+            onHeaderCell: (column: any) => ({
+              width: column.width,
+              // colRef: column.colRef,
+              onResize: handleResize(index),
+            }),
+          };
+        })
+      setCols(cols)
+    }
+  }, [columns, tableWidth, width, extraColWidth])
+
+  // add padding column
+  const cols1 = useMemo(() => !!cols ? [...cols, paddingCol.current] : undefined, [cols, pageSize, pageNum])
+
+  const scroll = useMemo(() => (maxHeight === undefined || total === 0 /* fix 暂无数据显示滚动条? */ ? { x: '100%' } : { y: maxHeight, x: '100%' /* 'max-content' 所有列显示全宽*/ }), [maxHeight, total])
+  const ref = useRef<HTMLDivElement>(null)
+
+  const [rightClickNode, setRightClickNode] = React.useState(undefined)
+
+  const handleContextMenu = (event, node) => {
+    show(event, {
+      position: {
+        x: event.clientX + 30,
+        y: event.clientY - 10
+      }
+    })
+  }
+
+  return (
+    <ResizeObserver
+      onResize={(size) => {
+        setTableWidth(size?.width)
+      }}
+    >
+      <Table<RowType>
+        ref={ref}
+        className="ssetable"
+        size='middle'
+        rowKey="id" // could be overrided in rest.
+        showSorterTooltip={false}
+        columns={cols1}
+        pagination={{
+          pageSizeOptions: pageSizeOptions ?? defaultPageSizeOptions, showSizeChanger: true,
+          position: ['bottomCenter'], pageSize, current: pageNum, total, onChange: onPaginate,
+          showTotal: total => `共 ${total} 条`,
+        }}
+        components={{
+          body: {
+            cell: bodyCell ?? null
+          },
+          header: {
+            cell: ResizableTitle,
+          },
+        }}
+        onRow={(record, index) => {
+          return {
+            onClick: event => {
+              onRowClick?.(event,record)
+            },
+            onContextMenu: event => {
+              setRightClickNode(record)
+              if (shouldRowContextMenu?.(record)) {
+                handleContextMenu(event, record)
+              } 
+            },
+          }
+        }}
+        scroll={scroll}
+        {...rest}
+      />
+      <Menu id={MENU_ID}>
+       {
+         menuData?.map(item => <PermissionRcItem 
+          key={item} 
+          id={item} 
+          disabled={rightClickNode?.[`${item}`]?.disabled}
+          tip={rightClickNode?.[`${item}`]?.tip}
+          permissions={rightClickNode?.permissions||menuPermissions}
+          permissionKey={item}
+          onClick={() => onMenuItemClick?.(item, rightClickNode)}>
+            {item}
+          </PermissionRcItem>)
+       }
+      </Menu>
+    </ResizeObserver>
+  )
+}
+
+
+// 可变列宽
+const ResizableTitle = (props: any) => {
+  const { onResize, width, ...restProps } = props;
+
+  if (!width) {
+    return <th {...restProps} />;
+  }
+
+  return (
+    <Resizable
+      width={width}
+      height={0}
+      handle={
+        <span
+          className="react-resizable-handle"
+          onClick={e => {
+            e.stopPropagation();
+          }}
+        />
+      }
+      onResize={onResize}
+      draggableOpts={{ enableUserSelectHack: false }}
+    >
+      <th {...restProps} />
+    </Resizable>
+  );
+};
+
+function setDefaultWidth(columns: any[], width: number) {
+  let rowWidth = 0, count = 0
+  for (const col of columns) {
+    if (typeof col.width === 'number') {
+      rowWidth += col.width
+    } else {
+      count++
+    }
+  }
+  if (count > 0) {
+    const defaultW = (rowWidth > width ? 0 : width - rowWidth) / count
+    for (const col of columns) {
+      if (typeof col.width !== 'number') {
+        col.width = (defaultW < 100) ? 100 : defaultW
+      }
+    }
+  }
+}
+
+function getWidth(tableWidth: number, extraColWidth: number): number {
+  return tableWidth - scrollbarWidth - extraColWidth // scrollbar width, checkbox column
+}
+
+function getRender<T>(col: ColumnGroupType<T> | ColumnType<T>) {
+  return (value: any, record: T, index: number) => {
+    // 用户自定render
+    if (col.render) {
+      const rs = col.render(value, record, index)
+      if (typeof rs === 'string') {
+        return (<ToolTip msg={rs} defaultStyle />)
+      }
+      return rs
+    } else {
+      return (<ToolTip msg={value} defaultStyle />)
+    }
+  }
+}
+
+export default FC
+
+export function getStringSorter<T>(k: keyof T) {
+  return (a: T, b: T, sortOrder?: SortOrder) => {
+    const aVal = a[k], bVal = b[k]
+    if (typeof aVal === 'string' && typeof bVal === 'string')
+      return aVal.localeCompare(bVal);
+    return 0
+  }
+}
+
+export function getNumberSorter<T>(k: keyof T) {
+  return (a: T, b: T, sortOrder?: SortOrder) => {
+    const aVal = a[k], bVal = b[k]
+    if (typeof aVal === 'number' && typeof bVal === 'number')
+      return aVal - bVal;
+    return 0
+  }
+}
+
+export function generateId<T = any>(data: T[], id = 'id') {
+  return produce(data, (draft) => {
+    draft?.forEach((row: any) => {
+      row[id] = nanoid()
+    })
+  })
+}
+
+export function generateIdFromArrayRow<T extends unknown[]>(data?: T[], id = 'id'): unknown[] | undefined {
+  return data?.map((row, i) => {
+    const obj: { [key: string]: unknown } = { [id]: nanoid() }
+    row.forEach((cell, j) => {
+      obj[j] = cell
+    })
+    return obj
+  })
+}
+
+export function filterRows<RowType = unknown>(rows: RowType[] | undefined, filter: (row: RowType) => boolean) {
+  if (rows) {
+    const matched = rows.filter(filter)
+    return matched
+  }
+  return rows
+}
\ No newline at end of file

src/util/Component/Tooltip.tsx

+import React, { CSSProperties, HTMLAttributes, useEffect, useRef, useState } from "react";
+import { Tooltip as Tooltip_, TooltipProps } from "antd";
+import type { TooltipPlacement } from "antd/es/tooltip";
+
+
+const DefaultStyle: CSSProperties = {
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+  textOverflow: "ellipsis",
+  // backgroundColor: "red"
+}
+
+export default function ({ msg, defaultStyle, style, placement, children, ...rest }: { msg: string | JSX.Element, defaultStyle?: boolean, placement?: TooltipPlacement } & HTMLAttributes<any>) {
+  const wrapper = useRef<HTMLDivElement>(null);
+  const text = useRef<HTMLSpanElement>(null);
+  const [toolTip, setToolTip] = useState(false);
+
+  useEffect(() => {
+
+    const wrapperRect = wrapper.current!.getBoundingClientRect(),
+      textRect = text.current!.getBoundingClientRect();
+
+    if (wrapperRect.width < textRect.width) {
+      setToolTip(true);
+    }
+  }, [msg]);
+
+  const _text = (
+    <div
+      ref={wrapper}
+      style={defaultStyle ? { ...DefaultStyle, ...style } : style}
+      {...rest}
+    >
+      <span ref={text}>{children ?? msg}</span>
+      {/* {msg} */}
+    </div>
+  );
+
+  if (toolTip) {
+    return <Tooltip_ title={msg} placement={placement} /* color="#fff" overlayInnerStyle={{ color: '#000' }} */ >{_text}</Tooltip_>;
+  } else {
+    return _text;
+  }
+}
+
+export const Tooltip = ({ children, color, ...props }: TooltipProps) => {
+  return <Tooltip_ /* color="#fff" overlayInnerStyle={{ color: '#000' }} */ {...props} >{children}</Tooltip_>
+}
\ No newline at end of file

src/util/hooks/page.ts

+import { useState } from "react"
+
+export interface Page {
+  pageSize: number
+  pageNum: number
+}
+
+export const defaultPageSize = 20
+export const defaultPageSizeOptions = [10, 20, 50, 100]
+export type PageSizeOptions = typeof defaultPageSizeOptions[number]
+
+export const defaultPage = {
+  pageSize: defaultPageSize,
+  pageNum: 1
+}
+export function usePage(pageSize?: number): [Page, React.Dispatch<React.SetStateAction<Page>>, (pageNum: number) => void] {
+  const [page, setPage] = useState<Page>(() => ({
+    pageSize: pageSize ?? defaultPageSize, pageNum: 1,
+  }))
+  const gotoPage = (pageNum: number) => {
+    setPage(prev => ({ ...prev, pageNum }))
+  }
+  return [page, setPage, gotoPage]
+}
+
+export type PageType = ReturnType<typeof usePage>[0]
+
+
+export function paginate<T>(list: T[] | undefined, page: Page) {
+  if (list) { 
+    const { pageSize, pageNum } = page
+    const start = (pageNum - 1) * pageSize
+    const end = start + pageSize
+    return list.slice(start, end)
+  }
+  return list
+}
\ No newline at end of file

src/util/index.js

@@ -467,4 +467,27 @@ export function checkMenuAdmit(menuinfo) {
   }
 
   return false;
+}
+
+export function getScrollbarWidth() {
+
+  // Creating invisible container
+  const outer = document.createElement('div');
+  outer.style.visibility = 'hidden';
+  outer.style.overflow = 'scroll'; // forcing scrollbar to appear
+  outer.style.msOverflowStyle = 'scrollbar'; // needed for WinJS apps
+  document.body.appendChild(outer);
+
+  // Creating inner element and placing it in the container
+  const inner = document.createElement('div');
+  outer.appendChild(inner);
+
+  // Calculating difference between container's full width and the child width
+  const scrollbarWidth = (outer.offsetWidth - inner.offsetWidth);
+
+  // Removing temporary elements from the DOM
+  outer.parentNode?.removeChild(outer);
+
+  return scrollbarWidth;
+
 }
\ No newline at end of file

src/view/Manage/AssetResourceManage/index.jsx

@@ -6,6 +6,7 @@ import { CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons'
 import Tree from './tree'
 import Separate from '../AssetManage/Component/Separate'
 import NodeDetail from '../AssetManage/Component/AssetDirectory'
+import ResourceList from './table'
 
 import '../AssetManage/index.less'
 import { ResourceManageReference } from "../../../util/constant"
@@ -48,6 +49,8 @@ const FC = (props) => {
       }
       <div className={middleClasses}>
         <NodeDetail reference={ResourceManageReference} id={node?.nodeId} assetCount={node?.dataAssetAndSubDirCount}/>
+        <Separate height={15} />
+        <ResourceList node={node} />
         <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 { defaultPage, usePage } from '../../../util/hooks/page'
+import Table from '../../../util/Component/Table'
+import { dispatch } from '../../../model'
+import { isSzseEnv } from '../../../util'
+
+const FC = (props) => {
+  const { node } = props
+  const [args, setArgs] = React.useState(() => ({
+    params: {
+      page: defaultPage.pageNum, 
+      size: defaultPage.pageSize,
+      onlyPending: false,
+      fullSearch: false,
+      keyword: undefined,
+    },
+  }))
+  const [fullScreen, setFullScreen] = React.useState(false)
+  const [compact, setCompact] = React.useState(false)
+  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 [page, setPage] = usePage()
+
+  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.useMemo(() => {
+    if (node) {
+      setSelectedRows([])
+      setPageAndArgs({ pageNum: 1, pageSize: page.pageSize })
+    }
+  }, [node])
+
+  React.useEffect(() => {
+    if (node?.nodeId) {
+      getElements()
+      getAssets()
+    }
+  }, [args])
+
+  const columns = React.useMemo(() => {
+    const newColumns = []
+    let index = 0 
+    for (const attrItem of (elements??[])) {
+      for (const name of attrItem.names??[]) {
+        const col = {
+          title: name,
+          dataIndex: `element${++index}`,
+          ellipsis: true,
+          width: 120,
+          render: (text, record) => {
+            return (
+              <Tooltip title={text}>
+                <Typography.Text ellipsis={true}>
+                {text}
+                </Typography.Text>
+              </Tooltip>
+            );
+          }
+        }
+        if (name === '编号') {
+          col.width = 60
+        } else if (name === '中文名称') {
+          col.width = isSzseEnv ? 230 : 160
+        } else if (name === '英文名称') {
+          col.width = isSzseEnv ? 224 : 160
+        } else if (name === '资源项') {
+          col.width = isSzseEnv ? 250 : 120
+        } else if (name === '资源路径') {
+          
+        }
+
+        newColumns.push(col)
+      }
+    }
+    
+    return newColumns
+  }, [elements])
+
+  const tableData = React.useMemo(() => {
+    const newTableData = []
+    for (const item of (data??[])) {
+      const newAsset = {}
+      let index = 0
+      for (const elementValue of (item.elementValues??[])) {
+        for (const value of (elementValue.values??[])) {
+          newAsset[`element${++index}`] = value
+        }
+      }
+      newTableData.push(newAsset)
+    }
+
+    return newTableData
+  }, [data])
+
+  const getElements = () => {
+    setLoadingElements(true)
+    dispatch({
+      type: 'assetmanage.listFilterElementsGroupByType',
+      payload: {
+        range: 'dataAsset_dataAssetManage'
+      },
+      callback: data => {
+        setLoadingElements(false)
+        setElements(data)
+      },
+      error: () => {
+        setLoadingElements(false)
+      }
+    })
+  }
+
+  const getAssets = () => {
+    setLoading(true)
+    dispatch({
+      type: 'assetmanage.listDataAssetsByPage',
+      payload: {
+        dirId: node?.nodeId,
+        pageNum: args.params.page,
+        pageSize: args.params.size,
+        keyword: args.params.keyword,
+        range: 'dataAsset_dataAssetManage',
+      },
+      callback: data => {
+        setLoading(false)
+        setData(data?.data)
+        setTotal(data?.total)
+      },
+      error: () => {
+        setLoading(false)
+      }
+    })
+  }
+
+  return (
+    <div className='px-3 pt-3'>
+      <Table
+        maxHeight='400px'
+        loading={loading||loadingElements}
+        columns={columns}
+        dataSource={tableData}
+        pageSize={page.pageSize} pageNum={page.pageNum} total={total??0}
+        onPaginate={(page, pageSize) => {
+          setPageAndArgs({ pageNum: page, pageSize })
+        }}
+        rowSelection={{
+          selectedRowKeys: (selectedRows??[]).map(item => item.id),
+          onChange: (selectedRowKeys, selectedRows) => {
+           setSelectedRows(selectedRows)
+          },
+        }}
+      />
+    </div>
+  )
+}
+
+export default FC
\ No newline at end of file