@cqsjjb/jjb-react-admin-component 3.0.11 → 3.0.13

package/Table/index.d.ts

@@ -6,6 +6,10 @@ import type { TableProps } from 'antd';
 interface OverTableProps extends TableProps {
   // 是否禁用内容区滚动，默认true
   disabledResizer?: boolean;
+  // 当一个路由下存在多个表格的情况下
+  // 需要给每一个表格设置一个唯一存储索引
+  // 若没有设置则使用默认索引，请注意缓存数据会被覆盖
+  storeIndex?: string;
 }
 
 interface TableFc extends React.FC<OverTableProps> {

package/Table/index.js

@@ -6,13 +6,16 @@ import { getElementAbsRect, antPrefix, className, setTableSize, getTableSize, ge
 import './index.less';
 require('use-antd-resizable-header/dist/style.css');
 export default function TablePro(props) {
-  const [size, setSize] = React.useState(getTableSize() || 'default');
+  const {
+    storeIndex
+  } = props;
+  const [size, setSize] = React.useState(getTableSize(storeIndex) || 'default');
   const [tableHeight, setTableHeight] = React.useState(0);
-  const persistenceKey = getPersistenceKey();
+  const persistenceKey = getPersistenceKey(storeIndex);
   React.useEffect(() => {
     let observer;
+    const table = document.querySelector(className('pro-table'));
     if (!props.disabledResizer) {
-      const table = document.querySelector(className('pro-table'));
       observer = new ResizeObserver(() => {
         setTimeout(() => {
           const tBody = document.querySelector(className('table-body'));
@@ -36,7 +39,7 @@ export default function TablePro(props) {
     };
   }, []);
   React.useEffect(() => {
-    setTableSize(size);
+    setTableSize(size, storeIndex);
   }, [size]);
   const {
     components,

package/Table/index.mjs

@@ -10,15 +10,17 @@ import './index.less';
 require('use-antd-resizable-header/dist/style.css');
 
 export default function TablePro(props) {
-  const [ size, setSize ] = React.useState(getTableSize() || 'default');
+  const { storeIndex } = props;
+  const [ size, setSize ] = React.useState(getTableSize(storeIndex) || 'default');
   const [ tableHeight, setTableHeight ] = React.useState(0);
 
-  const persistenceKey = getPersistenceKey();
+  const persistenceKey = getPersistenceKey(storeIndex);
 
   React.useEffect(() => {
     let observer;
+    const table = document.querySelector(className('pro-table'));
+
     if (!props.disabledResizer) {
-      const table = document.querySelector(className('pro-table'));
 
       observer = new ResizeObserver(() => {
         setTimeout(() => {
@@ -53,7 +55,7 @@ export default function TablePro(props) {
     };
   }, []);
   React.useEffect(() => {
-    setTableSize(size);
+    setTableSize(size, storeIndex);
   }, [ size ]);
 
   const {

package/Table/utils.js

@@ -80,20 +80,22 @@ export function className(name) {
   return `.${antPrefix}-${name}`;
 }
 
-export function getPersistenceKey() {
+export function getPersistenceKey(index) {
   const basename = process.env?.app?.basename;
   const pathname = decodeURIComponent(window.location.pathname);
+  const insertIndex = tools.isUndefined(index) ? '' : `#{${index}}`;
+  
   return {
-    size: `${basename}#${pathname}#size`,
-    resizable: `${basename}#${pathname}#resizable`,
-    columnState: `${basename}#${pathname}#columnState`
+    size: `${basename}#${pathname}${insertIndex}#size`,
+    resizable: `${basename}#${pathname}${insertIndex}#resizable`,
+    columnState: `${basename}#${pathname}${insertIndex}#columnState`
   };
 }
 
-export function getTableSize() {
-  return window.localStorage.getItem(getPersistenceKey().size);
+export function getTableSize(index) {
+  return window.localStorage.getItem(getPersistenceKey(index).size);
 }
 
-export function setTableSize(value) {
-  return window.localStorage.setItem(getPersistenceKey().size, value);
+export function setTableSize(value, index) {
+  return window.localStorage.setItem(getPersistenceKey(index).size, value);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cqsjjb/jjb-react-admin-component",
-  "version": "3.0.11",
+  "version": "3.0.13",
   "description": "jjb-react-admin-组件库@new",
   "main": "index.js",
   "author": "jjb-front-team",