plain-design 1.0.0-beta.146 → 1.0.0-beta.147

package/src/packages/components/AutoTable/use/useTableOption.pagination.tsx

@@ -1,191 +1,191 @@
-import {Pagination} from "../../Pagination";
-import {computed, reactive} from "@peryl/react-compose";
-import {iAutoTablePageData} from "../utils/AutoTable.utils";
-import $notice from "../../$notice";
-import {deepcopy} from "@peryl/utils/deepcopy";
-
-import '../utils/TableOption.space';
-import i18n from "../../i18n";
-import {AutoModule} from "../utils/AutoModule";
-
-declare module '../utils/TableOption.space' {
-  namespace TableOptionSpace {
-    interface iTableOption {
-      pagination: ReturnType<typeof useTableOptionPagination>;
-    }
-  }
-}
-
-export const useTableOptionPagination = AutoModule.createRegistration((
-  {
-    state: tableState,
-    hooks,
-    methods: tableMethods,
-    config,
-    keyboard,
-  }
-) => {
-
-  const methods = {
-    createInitialData: (): iAutoTablePageData => {
-      return {
-        page: 1,
-        size: config.pageSize || config.showRows,
-        hasNext: true,
-        total: null as null | number,
-      };
-    },
-    changeSize: async (size: number) => {await tableMethods.pageMethods.reload({ size });},
-    jump: async (page: number) => {
-      if (page == state.page) {
-        return;
-      }
-      if (page < 0) {
-        page = 1;
-        return tableMethods.pageMethods.load({ page });
-      }
-      if (page <= totalPage.value) {
-        return tableMethods.pageMethods.load({ page });
-      } else {
-        if (state.total != null) {
-          if (page > totalPage.value) {
-            page = totalPage.value;
-          }
-          return tableMethods.pageMethods.load({ page });
-        } else {
-          const total = await tableMethods.pageMethods.queryCount();
-          if (!total) {
-            const msg = i18n.$it('table.queryTotalFailed').d('查询总数失败');
-            $notice.error(msg);
-            throw new Error(msg);
-          }
-          if (page > totalPage.value) {page = totalPage.value;}
-          return tableMethods.pageMethods.load({ page });
-        }
-      }
-    },
-  };
-
-  const state = reactive({
-    ...methods.createInitialData(),
-    pageSizeOptions: deepcopy(config.pageSizeOptions),
-  });
-
-  if (!!config.showRows && state.pageSizeOptions.indexOf(config.showRows) === -1) {
-    const index = state.pageSizeOptions.findIndex(i => i > config.showRows);
-    state.pageSizeOptions.splice(index, 0, config.showRows);
-  }
-
-  const handler = {
-    onSizeChange: async (size: number) => {await methods.changeSize(size);},
-    onJump: async (page: number) => {await methods.jump(page);},
-  };
-
-  const total = computed(() => {
-    if (state.total != null) {
-      return state.total;
-    }
-    if (state.hasNext) {
-      return (state.page) * state.size + 1;
-    } else {
-      return (state.page - 1) * state.size + tableState.list.length;
-    }
-  });
-
-  const totalPage = computed(() => Math.ceil(total.value / state.size));
-
-  hooks.onGetPageState.use(() => {return state;});
-
-  hooks.onTableRender.use({
-    processor: ({ list, render }) => {list.push({ key: 'pagination', seq: 6, render });},
-    render: () => (
-      <div className="auto-table-pagination-bar">
-        <Pagination
-          {...{
-            pageSize: state.size,
-            currentPage: state.page,
-            total: total.value,
-            limitJumpPageByTotalPage: false,
-            layout: "blank,sizes,pager,prev,next,loading,jumper,slot",
-            pageSizes: state.pageSizeOptions,
-            onSizeChange: handler.onSizeChange,
-            onJump: handler.onJump,
-            onCurrentChange: handler.onJump,
-            ...config.paginationAttrs,
-          }}
-        >
-          <span>{i18n.$it('base.total').d('总共')}</span>
-          {state.total == null ?
-            <span className="auto-table-pagination-total-number" onClick={tableMethods.pageMethods.queryCount}>
-              {total.value}+
-              </span> :
-            total.value}
-          <span>{i18n.$it('base.data').d('条数据')}</span>
-        </Pagination>
-      </div>
-    ),
-  });
-
-  hooks.onBeforeReload.use(() => {
-    state.hasNext = true;
-    state.total = null;
-  });
-
-  hooks.onPageDataChange.use((pageData) => {
-    if (!pageData) {
-      pageData = methods.createInitialData();
-    }
-    state.page = pageData.page;
-    state.size = pageData.size;
-    if (state.total != null) {
-      /*已经得到总数*/
-      return;
-    }
-    if (!pageData.hasNext) {
-      /*没有更多数据了*/
-      state.hasNext = false;
-      state.total = (state.page - 1) * state.size + tableState.list.length;
-    }
-  });
-
-  hooks.onQueryCount.use(({ total }) => {
-    state.total = total;
-    state.hasNext = false;
-  });
-
-  keyboard.on('left', () => {methods.jump(state.page - 1);});
-  keyboard.on('right', () => {methods.jump(state.page + 1);});
-
-  keyboard.on('up', async () => {
-    try {
-      const node = await tableMethods.utils.getCurrentNode();
-      const nextRowKey = tableState.list[node.state.index - 1]?.[config.keyField];
-      if (node.state.index - 1 === -1 && state.page !== 1) {
-        return methods.jump(state.page - 1);
-      }
-      if (!!nextRowKey) {
-        await tableMethods.utils.selectCurrent(nextRowKey);
-      }
-    } catch (e) {/*do nothing*/}
-  });
-
-  keyboard.on('down', async () => {
-    try {
-      const node = await tableMethods.utils.getCurrentNode();
-      if (node.state.index + 1 === tableState.list.length && state.hasNext) {
-        return methods.jump(state.page + 1);
-      }
-      const nextRowKey = tableState.list[node.state.index + 1]?.[config.keyField];
-      if (!!nextRowKey) {
-        await tableMethods.utils.selectCurrent(nextRowKey);
-      }
-    } catch (e) {/*do nothing*/}
-  });
-
-  return {
-    state,
-    methods,
-  };
-});
-
-export type iTableOptionPagination = ReturnType<typeof useTableOptionPagination>
+import {Pagination} from "../../Pagination";
+import {computed, reactive} from "@peryl/react-compose";
+import {iAutoTablePageData} from "../utils/AutoTable.utils";
+import $notice from "../../$notice";
+import {deepcopy} from "@peryl/utils/deepcopy";
+
+import '../utils/TableOption.space';
+import i18n from "../../i18n";
+import {AutoModule} from "../utils/AutoModule";
+
+declare module '../utils/TableOption.space' {
+  namespace TableOptionSpace {
+    interface iTableOption {
+      pagination: ReturnType<typeof useTableOptionPagination>;
+    }
+  }
+}
+
+export const useTableOptionPagination = AutoModule.createRegistration((
+  {
+    state: tableState,
+    hooks,
+    methods: tableMethods,
+    config,
+    keyboard,
+  }
+) => {
+
+  const methods = {
+    createInitialData: (): iAutoTablePageData => {
+      return {
+        page: 1,
+        size: config.pageSize || config.showRows,
+        hasNext: true,
+        total: null as null | number,
+      };
+    },
+    changeSize: async (size: number) => {await tableMethods.pageMethods.reload({ size });},
+    jump: async (page: number) => {
+      if (page == state.page) {
+        return;
+      }
+      if (page < 0) {
+        page = 1;
+        return tableMethods.pageMethods.load({ page });
+      }
+      if (page <= totalPage.value) {
+        return tableMethods.pageMethods.load({ page });
+      } else {
+        if (state.total != null) {
+          if (page > totalPage.value) {
+            page = totalPage.value;
+          }
+          return tableMethods.pageMethods.load({ page });
+        } else {
+          const total = await tableMethods.pageMethods.queryCount();
+          if (!total) {
+            const msg = i18n.$it('table.queryTotalFailed').d('查询总数失败');
+            $notice.error(msg);
+            throw new Error(msg);
+          }
+          if (page > totalPage.value) {page = totalPage.value;}
+          return tableMethods.pageMethods.load({ page });
+        }
+      }
+    },
+  };
+
+  const state = reactive({
+    ...methods.createInitialData(),
+    pageSizeOptions: deepcopy(config.pageSizeOptions),
+  });
+
+  if (!!config.showRows && state.pageSizeOptions.indexOf(config.showRows) === -1) {
+    const index = state.pageSizeOptions.findIndex(i => i > config.showRows);
+    state.pageSizeOptions.splice(index, 0, config.showRows);
+  }
+
+  const handler = {
+    onSizeChange: async (size: number) => {await methods.changeSize(size);},
+    onJump: async (page: number) => {await methods.jump(page);},
+  };
+
+  const total = computed(() => {
+    if (state.total != null) {
+      return state.total;
+    }
+    if (state.hasNext) {
+      return (state.page) * state.size + 1;
+    } else {
+      return (state.page - 1) * state.size + tableState.list.length;
+    }
+  });
+
+  const totalPage = computed(() => Math.ceil(total.value / state.size));
+
+  hooks.onGetPageState.use(() => {return state;});
+
+  hooks.onTableRender.use({
+    processor: ({ list, render }) => {list.push({ key: 'pagination', seq: 6, render });},
+    render: () => (
+      <div className="auto-table-pagination-bar">
+        <Pagination
+          {...{
+            pageSize: state.size,
+            currentPage: state.page,
+            total: total.value,
+            limitJumpPageByTotalPage: false,
+            layout: "blank,sizes,pager,prev,next,loading,jumper,slot",
+            pageSizes: state.pageSizeOptions,
+            onSizeChange: handler.onSizeChange,
+            onJump: handler.onJump,
+            onCurrentChange: handler.onJump,
+            ...config.paginationAttrs,
+          }}
+        >
+          <span>{i18n.$it('base.total').d('总共')}</span>
+          {state.total == null ?
+            <span className="auto-table-pagination-total-number" onClick={tableMethods.pageMethods.queryCount}>
+              {total.value}+
+              </span> :
+            total.value}
+          <span>{i18n.$it('base.data').d('条数据')}</span>
+        </Pagination>
+      </div>
+    ),
+  });
+
+  hooks.onBeforeReload.use(() => {
+    state.hasNext = true;
+    state.total = null;
+  });
+
+  hooks.onPageDataChange.use((pageData) => {
+    if (!pageData) {
+      pageData = methods.createInitialData();
+    }
+    state.page = pageData.page;
+    state.size = pageData.size;
+    if (state.total != null) {
+      /*已经得到总数*/
+      return;
+    }
+    if (!pageData.hasNext) {
+      /*没有更多数据了*/
+      state.hasNext = false;
+      state.total = (state.page - 1) * state.size + tableState.list.length;
+    }
+  });
+
+  hooks.onQueryCount.use(({ total }) => {
+    state.total = total;
+    state.hasNext = false;
+  });
+
+  keyboard.on('left', () => {methods.jump(state.page - 1);});
+  keyboard.on('right', () => {methods.jump(state.page + 1);});
+
+  keyboard.on('up', async () => {
+    try {
+      const node = await tableMethods.utils.getCurrentNode();
+      const nextRowKey = tableState.list[node.state.index - 1]?.[config.keyField];
+      if (node.state.index - 1 === -1 && state.page !== 1) {
+        return methods.jump(state.page - 1);
+      }
+      if (!!nextRowKey) {
+        await tableMethods.utils.selectCurrent(nextRowKey);
+      }
+    } catch (e) {/*do nothing*/}
+  });
+
+  keyboard.on('down', async () => {
+    try {
+      const node = await tableMethods.utils.getCurrentNode();
+      if (node.state.index + 1 === tableState.list.length && state.hasNext) {
+        return methods.jump(state.page + 1);
+      }
+      const nextRowKey = tableState.list[node.state.index + 1]?.[config.keyField];
+      if (!!nextRowKey) {
+        await tableMethods.utils.selectCurrent(nextRowKey);
+      }
+    } catch (e) {/*do nothing*/}
+  });
+
+  return {
+    state,
+    methods,
+  };
+});
+
+export type iTableOptionPagination = ReturnType<typeof useTableOptionPagination>

package/src/packages/components/AutoTable/use/useTableOption.parent.tsx

@@ -1,134 +1,134 @@
-import {iUrlResponseData} from "../utils/TableOption.url";
-import {eTableOptionStatus} from "./useTableOption.confirm";
-import {createEffects} from "@peryl/utils/createEffects";
-import {onBeforeUnmount} from "@peryl/react-compose";
-import {TableOptionSpace} from "../utils/TableOption.space";
-import '../utils/TableOption.space';
-import {AutoModule} from "../utils/AutoModule";
-import {delay} from "@peryl/utils/delay";
-
-declare module '../utils/TableOption.space' {
-  namespace TableOptionSpace {
-    interface iTableOption {
-      parent: ReturnType<typeof useTableOptionParent>;
-    }
-  }
-}
-
-export const useTableOptionParent = AutoModule.createRegistration((
-  {
-    config,
-    hooks,
-    state,
-    methods,
-    pagination,
-  }
-) => {
-
-  const { effects } = createEffects();
-  const parentMap = config.parentMap;
-  const parentOption = config.parentOption as TableOptionSpace.iTableOption;
-
-  if (!parentOption || !parentMap) {
-    return;
-  }
-
-  const isDestroy = () => !state.getAutoTable();
-
-  /*自己不加载数据，等父表选中数据之后再加载*/
-  config.loadOnStart = false;
-
-  /*父表切换选中行之后，重新加载数据*/
-  effects.push(
-    parentOption.hooks.onCurrentChange.use(async (selectData) => {
-      if (isDestroy()) {return;}
-      const noParentData = !selectData || (() => {
-        return Object.values(parentMap).every(parentKey => selectData[parentKey] == null);
-      })();
-
-      if (noParentData) {
-        /*父表没有值，则清空行数据*/
-        let responseData: iUrlResponseData['query'] = {
-          success: true,
-          code: "200",
-          list: [],
-          hasNext: false,
-        };
-        responseData = await hooks.onAfterLoad.exec(responseData);
-        responseData = await hooks.onLoaded.exec(responseData);
-        if (!(state.list.length === 0 && responseData.list.length === 0)) {
-          state.list = responseData.list;
-        }
-        hooks.onPageDataChange.exec({
-          ...pagination.methods.createInitialData(),
-          size: pagination.state.size,
-          hasNext: false,
-          total: null,
-        });
-        await hooks.onLoaded.exec(responseData);
-      } else {
-        await methods.pageMethods.reload();
-      }
-    })
-  );
-  /*子表查询之前，带上父表的查询参数*/
-  effects.push(
-    hooks.onQueryParam.use(async () => {
-      if (isDestroy()) {return;}
-      /*这里等待下一个宏任务执行，等 option.state.currentNode 刷新*/
-      await delay(0);
-      const currentNode = await parentOption.methods.utils.getCurrentNode();
-      return {
-        queries: Object.entries(parentMap).map(([childKey, parentKey], index) => ({
-          id: `parent_filter_${index}`,
-          field: childKey,
-          value: currentNode.data[parentKey],
-          operator: '='
-        }))
-      };
-    })
-  );
-  /*子表新建数据的时候，从父表拿到关联字段的值*/
-  effects.push(
-    hooks.onHandleNewRow.use(async row => {
-      if (isDestroy()) {return;}
-      const parentNode = await parentOption.methods.utils.getCurrentNode();
-      if (!parentNode) {
-        console.log(parentOption);
-        throw new Error('TableOption: parent option has no current node when create new record in child option!');
-      }
-      const { data } = parentNode;
-      Object.entries(parentMap).forEach(([childKey, parentKey]) => {
-        row[childKey] = data[parentKey];
-      });
-    })
-  );
-
-  effects.push(
-    hooks.onPermitConfig.use((permit) => {
-      if (isDestroy()) {return;}
-      const parents: TableOptionSpace.iTableOption[] = (() => {
-        let list: TableOptionSpace.iTableOption[] = [];
-        let option = parentOption;
-        while (!!option) {
-          list.push(option);
-          option = option.config.parentOption as any;
-        }
-        return list;
-      })();
-
-      if (parents.some(i => i.confirm.state.status !== eTableOptionStatus.normal)) {
-        if (!permit.disabled) {permit.disabled = {};}
-        permit.disabled.insert = true;
-        permit.disabled.update = true;
-        permit.disabled.delete = true;
-      } else {
-        return;
-      }
-    })
-  );
-
-  onBeforeUnmount(() => {effects.clear();});
-
-  return {};
-});
+import {iUrlResponseData} from "../utils/TableOption.url";
+import {eTableOptionStatus} from "./useTableOption.confirm";
+import {createEffects} from "@peryl/utils/createEffects";
+import {onBeforeUnmount} from "@peryl/react-compose";
+import {TableOptionSpace} from "../utils/TableOption.space";
+import '../utils/TableOption.space';
+import {AutoModule} from "../utils/AutoModule";
+import {delay} from "@peryl/utils/delay";
+
+declare module '../utils/TableOption.space' {
+  namespace TableOptionSpace {
+    interface iTableOption {
+      parent: ReturnType<typeof useTableOptionParent>;
+    }
+  }
+}
+
+export const useTableOptionParent = AutoModule.createRegistration((
+  {
+    config,
+    hooks,
+    state,
+    methods,
+    pagination,
+  }
+) => {
+
+  const { effects } = createEffects();
+  const parentMap = config.parentMap;
+  const parentOption = config.parentOption as TableOptionSpace.iTableOption;
+
+  if (!parentOption || !parentMap) {
+    return;
+  }
+
+  const isDestroy = () => !state.getAutoTable();
+
+  /*自己不加载数据，等父表选中数据之后再加载*/
+  config.loadOnStart = false;
+
+  /*父表切换选中行之后，重新加载数据*/
+  effects.push(
+    parentOption.hooks.onCurrentChange.use(async (selectData) => {
+      if (isDestroy()) {return;}
+      const noParentData = !selectData || (() => {
+        return Object.values(parentMap).every(parentKey => selectData[parentKey] == null);
+      })();
+
+      if (noParentData) {
+        /*父表没有值，则清空行数据*/
+        let responseData: iUrlResponseData['query'] = {
+          success: true,
+          code: "200",
+          list: [],
+          hasNext: false,
+        };
+        responseData = await hooks.onAfterLoad.exec(responseData);
+        responseData = await hooks.onLoaded.exec(responseData);
+        if (!(state.list.length === 0 && responseData.list.length === 0)) {
+          state.list = responseData.list;
+        }
+        hooks.onPageDataChange.exec({
+          ...pagination.methods.createInitialData(),
+          size: pagination.state.size,
+          hasNext: false,
+          total: null,
+        });
+        await hooks.onLoaded.exec(responseData);
+      } else {
+        await methods.pageMethods.reload();
+      }
+    })
+  );
+  /*子表查询之前，带上父表的查询参数*/
+  effects.push(
+    hooks.onQueryParam.use(async () => {
+      if (isDestroy()) {return;}
+      /*这里等待下一个宏任务执行，等 option.state.currentNode 刷新*/
+      await delay(0);
+      const currentNode = await parentOption.methods.utils.getCurrentNode();
+      return {
+        queries: Object.entries(parentMap).map(([childKey, parentKey], index) => ({
+          id: `parent_filter_${index}`,
+          field: childKey,
+          value: currentNode.data[parentKey],
+          operator: '='
+        }))
+      };
+    })
+  );
+  /*子表新建数据的时候，从父表拿到关联字段的值*/
+  effects.push(
+    hooks.onHandleNewRow.use(async row => {
+      if (isDestroy()) {return;}
+      const parentNode = await parentOption.methods.utils.getCurrentNode();
+      if (!parentNode) {
+        console.log(parentOption);
+        throw new Error('TableOption: parent option has no current node when create new record in child option!');
+      }
+      const { data } = parentNode;
+      Object.entries(parentMap).forEach(([childKey, parentKey]) => {
+        row[childKey] = data[parentKey];
+      });
+    })
+  );
+
+  effects.push(
+    hooks.onPermitConfig.use((permit) => {
+      if (isDestroy()) {return;}
+      const parents: TableOptionSpace.iTableOption[] = (() => {
+        let list: TableOptionSpace.iTableOption[] = [];
+        let option = parentOption;
+        while (!!option) {
+          list.push(option);
+          option = option.config.parentOption as any;
+        }
+        return list;
+      })();
+
+      if (parents.some(i => i.confirm.state.status !== eTableOptionStatus.normal)) {
+        if (!permit.disabled) {permit.disabled = {};}
+        permit.disabled.insert = true;
+        permit.disabled.update = true;
+        permit.disabled.delete = true;
+      } else {
+        return;
+      }
+    })
+  );
+
+  onBeforeUnmount(() => {effects.clear();});
+
+  return {};
+});