行展开

src/view/Manage/Model/Component/ModelTable.jsx

@@ -99,7 +99,7 @@ const ModelNameColumn = (props) => {
 
 const ModelTable = (props) => {
 
-  const { data, onChange, onItemAction, onSelect, onHistory, catalogId, keyword, onAutoCreateTable, offset = null, modelId = null, modelPid = null, view, selectModelerIds, onSubSelect, modelState, user } = props;
+  const { data, onChange, onItemAction, onSelect, onHistory, catalogId, keyword, onAutoCreateTable, offset = null, modelId = null, modelPid = null, view, selectModelerIds, onSubSelect, modelState, user, dataMap, onDataMapChange, globalSelectRows } = props;
 
   const MENU_ID = (((modelId||'') !== '') ? `model-table-contextmenu-${modelId}` : 'model-table-contextmenu');
 
@@ -112,6 +112,7 @@ const ModelTable = (props) => {
   const [ subSelectedRowKeys, setSubSelectedRowKeys ] = useState([]);
   const [ filterData, setFilterData ] = useState([]);
   const [ subData, setSubData ] = useState([]);
+  const [ subDataMap, setSubDataMap ] = useState(new Map());
 
   const cols = [
     {
@@ -220,8 +221,8 @@ const ModelTable = (props) => {
   
   const [modal, contextHolder] = Modal.useModal();
 
-  const anchorId = getQueryParam(AnchorId, props.location.search);
-  const anchorTimestamp = getQueryParam(AnchorTimestamp, props.location.search);
+  const anchorId = getQueryParam(AnchorId, props?.location?.search);
+  const anchorTimestamp = getQueryParam(AnchorTimestamp, props?.location?.search);
 
   const shouldScrollRef = useRef(false);
 
@@ -265,7 +266,17 @@ const ModelTable = (props) => {
         setPagination({...pagination, pageNum: 1 });
       }
     } else {
-      getCheckoutDataModel();
+      if (dataMap.has(modelId)) {
+        setSubData([dataMap.get(modelId)]);
+      } else {
+        getCheckoutDataModel();
+      }
+
+      if (globalSelectRows.indexOf(modelId) !== -1) {
+        setSelectedRowKeys([modelId]);
+      } else {
+        setSelectedRowKeys([]);
+      }
     }
     //eslint-disable-next-line react-hooks/exhaustive-deps
   }, [ catalogId, keyword, offset, modelState ]);
@@ -315,6 +326,7 @@ const ModelTable = (props) => {
       },
       callback: data => {
         setSubData(data?[data]:[]);
+        onDataMapChange && onDataMapChange(modelId, data);
       },
       error: () => {
 
@@ -428,7 +440,7 @@ const ModelTable = (props) => {
     setSelectedRowKeys(keys);
 
     if ((modelId||'') !== '') {
-      onSubSelect && onSubSelect(keys, subData[0].id);
+      onSubSelect && onSubSelect(keys, modelId);
     } else {
       onSelect && onSelect([...subSelectedRowKeys, ...keys]);
     }
@@ -443,10 +455,15 @@ const ModelTable = (props) => {
       onSelect && onSelect([...newSubSelectedRowKeys, ...selectedRowKeys]);
     } else {
       const newSubSelectedRowKeys = [...subSelectedRowKeys, id];
+      setSubSelectedRowKeys(newSubSelectedRowKeys);
       onSelect && onSelect([...newSubSelectedRowKeys, ...selectedRowKeys]);
     }
   }
 
+  const onSubDataMapChange = (id, value) => {
+    subDataMap.set(id, value);
+  }
+
   const classes = classnames('model-table', {
     'model-table-sub': modelId
   });  
@@ -469,7 +486,10 @@ const ModelTable = (props) => {
             <ModelTable 
               modelId={row?.checkedOutId}
               modelPid={row?.id}
+              globalSelectRows={[...subSelectedRowKeys, ...selectedRowKeys]}
+              dataMap={subDataMap}
               onSubSelect={onSubSelectChange}
+              onDataMapChange={onSubDataMapChange}
               {...props} 
             />
           </div>
@@ -578,8 +598,8 @@ const ModelTable = (props) => {
         contextMenu={{
           menu: onMenuRender
         }}
-        // expandRow={expandRow}
-        selectedRows={modelId?subSelectedRowKeys:selectedRowKeys}
+        expandRow={expandRow}
+        selectedRows={selectedRowKeys}
         onSelectedRowsChange={onSelectChange}
         getComparator={getComparator}
       />

src/view/Manage/VirtualTable/test-table.tsx

@@ -70,6 +70,7 @@ export function getExpandingCol<Row extends RowData, SR>({ colSpan, expand, expa
   expand?: (pid: string, row: Row) => React.ReactElement
   expandable?: (row: Row) => Boolean
 }) {
+  console.log('span', colSpan());
   const col: Column<Row, SR> = {
     key: 'expanded',
     name: '',
@@ -137,7 +138,7 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
         rows.splice(indexes[0] + 1, 1); // 删除下一行
       } else {
         rows.splice(indexes[0] + 1, 0, { // 插入下一行
-          id: nanoid(), __type__: RowType.Detail, __pid__: row.id, __row__: row,
+          id: `${row.id}-detail`, __type__: RowType.Detail, __pid__: row.id, __row__: row,
         });
       }
     } else if (row.__action__ === RowAction.Select) {
@@ -181,18 +182,18 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
   const cols = useMemo(() => {
     if (expandRow && checkable) {
       const cols: readonly Column<Row, SR>[] = [
+        { ...SelectColumn, key: 'select', frozen: false },
         getExpandingCol<Row, SR>({
-          colSpan: () => cols.length, expand: expandRow, expandable: rowExpandable
+          colSpan: () => columns.length+1, expand: expandRow, expandable: rowExpandable
         }),
-        { ...SelectColumn, key: 'select', frozen: false },
+        // { ...SelectColumn, key: 'select', frozen: false },
         ...columns,
-
       ]
       return cols
     } else if (expandRow) {
       const cols: readonly Column<Row, SR>[] = [
         getExpandingCol<Row, SR>({
-          colSpan: () => cols.length, expand: expandRow, expandable: rowExpandable
+          colSpan: () => columns.length+1, expand: expandRow, expandable: rowExpandable
         }),
         ...columns,
 
@@ -200,7 +201,7 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
       return cols
     } else if (checkable) {
       const cols: readonly Column<Row, SR>[] = [
-        { ...SelectColumn, key: 'select', frozen: false },
+        { ...SelectColumn, frozen: false },
         ...columns,
       ]
       return cols
@@ -271,6 +272,7 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
 
         selectedRows={new Set(selectedRows||[])}
         onSelectedRowsChange={(values: Set<any>) => {
+          console.log('values', values);
           onSelectedRowsChange && onSelectedRowsChange(Array.from(values));
         }}
         // 滚动