plain-design 1.0.0-beta.72 → 1.0.0-beta.74

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

@@ -1,122 +1,122 @@
-import {createEnum} from "plain-utils/utils/createEnum";
-import {reactive, toRaw} from "plain-design-composition";
-import {iTableOuterOperationConfig} from "../../Table/standard/PlcOperation/PlcOperation.utils";
-import '../utils/TableOption.space';
-import i18n from "../../i18n";
-import {AutoModule} from "../utils/AutoModule";
-
-declare module '../utils/TableOption.space' {
-  namespace TableOptionSpace {
-    interface iTableOption {
-      confirm: ReturnType<typeof useTableOptionConfirm>;
-    }
-  }
-}
-
-export const useTableOptionConfirm = AutoModule.createRegistration(({ hooks }) => {
-
-  const state = reactive({
-    status: eTableOptionStatus.normal as typeof eTableOptionStatus.TYPE,
-    handlers: [] as iHandler[],
-  });
-
-  const close = {
-    confirm: async (handlers?: iHandler[]) => {
-      await Promise.all((handlers || state.handlers).map(async (handler) => {
-        await handler.onConfirm?.();
-        state.handlers = state.handlers.filter(i => toRaw(i) !== toRaw(handler));
-        if (state.handlers.length === 0) {
-          state.status = eTableOptionStatus.normal;
-        }
-      }));
-    },
-    cancel: (handlers?: iHandler[]) => {
-      Promise.all((handlers || state.handlers).map(async (handler) => {
-        handler.onCancel?.();
-        state.handlers = state.handlers.filter(i => toRaw(i) !== toRaw(handler));
-        if (state.handlers.length === 0) {
-          state.status = eTableOptionStatus.normal;
-        }
-      }));
-    },
-    clear: () => {
-      state.handlers = [];
-      state.status = eTableOptionStatus.normal;
-    },
-  };
-
-  const open = async (status: typeof eTableOptionStatus.TYPE, handler: iHandler) => {
-    if (!(state.status === eTableOptionStatus.normal || state.status === status)) {
-      return Promise.reject('table option status mismatch!');
-    }
-    state.status = status;
-    state.handlers.push(handler);
-    return () => {state.handlers = state.handlers.filter(i => toRaw(i) !== toRaw(handler));};
-  };
-
-  const checkEditable = (status: typeof eTableOptionStatus.TYPE) => {
-    if (state.status === eTableOptionStatus.select) {
-      close.cancel();
-      return true;
-    } else {
-      return state.status === eTableOptionStatus.normal || state.status === status;
-    }
-  };
-
-  hooks.onOuterButtons.use((prev: iTableOuterOperationConfig[]): iTableOuterOperationConfig[] => {
-    if (state.status === eTableOptionStatus.normal) {return prev;}
-    const buttons: iTableOuterOperationConfig[] = [
-      {
-        label: state.handlers.length === 1 && !!state.handlers[0].cancelText ? state.handlers[0].cancelText : i18n.$it('base.cancel').d('取消'),
-        position: 'outer',
-        code: 'outer-cancel',
-        icon: 'pi-undo',
-        keyboard: 'esc',
-        handler: () => close.cancel(),
-      },
-      {
-        label: state.handlers.length === 1 && !!state.handlers[0].confirmText ? state.handlers[0].confirmText : i18n.$it('base.confirm').d('保存'),
-        mode: 'fill',
-        position: 'outer',
-        code: 'outer-confirm',
-        icon: 'pi-save',
-        keyboard: 'alt+s',
-        handler: () => close.confirm(),
-      }
-    ];
-    if (state.status === eTableOptionStatus.insert || state.status === eTableOptionStatus.batchInsert) {
-      buttons.unshift({
-        label: i18n.$it('table.continueCreate').d('继续新建'),
-        position: 'outer',
-        code: 'outer-next-insert',
-        icon: 'pi-plus',
-        handler: async () => {await hooks.onTriggerInsert.exec(undefined);},
-      });
-    }
-    return buttons;
-  });
-
-  return {
-    state,
-    open,
-    close,
-    checkEditable,
-  };
-});
-
-export const eTableOptionStatus = createEnum([
-  'normal',
-  'insert',
-  'batchInsert',
-  'update',
-  'batchUpdate',
-  'select',
-] as const);
-
-interface iHandler {
-  data?: any,
-  onConfirm?: () => void,
-  onCancel?: () => void,
-  confirmText?: string,
-  cancelText?: string,
-}
+import {createEnum} from "plain-utils/utils/createEnum";
+import {reactive, toRaw} from "plain-design-composition";
+import {iTableOuterOperationConfig} from "../../Table/standard/PlcOperation/PlcOperation.utils";
+import '../utils/TableOption.space';
+import i18n from "../../i18n";
+import {AutoModule} from "../utils/AutoModule";
+
+declare module '../utils/TableOption.space' {
+  namespace TableOptionSpace {
+    interface iTableOption {
+      confirm: ReturnType<typeof useTableOptionConfirm>;
+    }
+  }
+}
+
+export const useTableOptionConfirm = AutoModule.createRegistration(({ hooks }) => {
+
+  const state = reactive({
+    status: eTableOptionStatus.normal as typeof eTableOptionStatus.TYPE,
+    handlers: [] as iHandler[],
+  });
+
+  const close = {
+    confirm: async (handlers?: iHandler[]) => {
+      await Promise.all((handlers || state.handlers).map(async (handler) => {
+        await handler.onConfirm?.();
+        state.handlers = state.handlers.filter(i => toRaw(i) !== toRaw(handler));
+        if (state.handlers.length === 0) {
+          state.status = eTableOptionStatus.normal;
+        }
+      }));
+    },
+    cancel: (handlers?: iHandler[]) => {
+      Promise.all((handlers || state.handlers).map(async (handler) => {
+        handler.onCancel?.();
+        state.handlers = state.handlers.filter(i => toRaw(i) !== toRaw(handler));
+        if (state.handlers.length === 0) {
+          state.status = eTableOptionStatus.normal;
+        }
+      }));
+    },
+    clear: () => {
+      state.handlers = [];
+      state.status = eTableOptionStatus.normal;
+    },
+  };
+
+  const open = async (status: typeof eTableOptionStatus.TYPE, handler: iHandler) => {
+    if (!(state.status === eTableOptionStatus.normal || state.status === status)) {
+      return Promise.reject('table option status mismatch!');
+    }
+    state.status = status;
+    state.handlers.push(handler);
+    return () => {state.handlers = state.handlers.filter(i => toRaw(i) !== toRaw(handler));};
+  };
+
+  const checkEditable = (status: typeof eTableOptionStatus.TYPE) => {
+    if (state.status === eTableOptionStatus.select) {
+      close.cancel();
+      return true;
+    } else {
+      return state.status === eTableOptionStatus.normal || state.status === status;
+    }
+  };
+
+  hooks.onOuterButtons.use((prev: iTableOuterOperationConfig[]): iTableOuterOperationConfig[] => {
+    if (state.status === eTableOptionStatus.normal) {return prev;}
+    const buttons: iTableOuterOperationConfig[] = [
+      {
+        label: state.handlers.length === 1 && !!state.handlers[0].cancelText ? state.handlers[0].cancelText : i18n.$it('base.cancel').d('取消'),
+        position: 'outer',
+        code: 'outer-cancel',
+        icon: 'pi-undo',
+        keyboard: 'esc',
+        handler: () => close.cancel(),
+      },
+      {
+        label: state.handlers.length === 1 && !!state.handlers[0].confirmText ? state.handlers[0].confirmText : i18n.$it('base.confirm').d('保存'),
+        mode: 'fill',
+        position: 'outer',
+        code: 'outer-confirm',
+        icon: 'pi-save',
+        keyboard: 'alt+s',
+        handler: () => close.confirm(),
+      }
+    ];
+    if (state.status === eTableOptionStatus.insert || state.status === eTableOptionStatus.batchInsert) {
+      buttons.unshift({
+        label: i18n.$it('table.continueCreate').d('继续新建'),
+        position: 'outer',
+        code: 'outer-next-insert',
+        icon: 'pi-plus',
+        handler: async () => {await hooks.onTriggerInsert.exec(undefined);},
+      });
+    }
+    return buttons;
+  });
+
+  return {
+    state,
+    open,
+    close,
+    checkEditable,
+  };
+});
+
+export const eTableOptionStatus = createEnum([
+  'normal',
+  'insert',
+  'batchInsert',
+  'update',
+  'batchUpdate',
+  'select',
+] as const);
+
+interface iHandler {
+  data?: any,
+  onConfirm?: () => void,
+  onCancel?: () => void,
+  confirmText?: string,
+  cancelText?: string,
+}

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

@@ -1,153 +1,153 @@
-import {defer} from "plain-utils/utils/defer";
-import {removeUnit} from "plain-utils/string/removeUnit";
-import {iTableRefer} from "../../Table/table/Table";
-import {delay} from "plain-utils/utils/delay";
-import {onBeforeUnmount, reactive} from "plain-design-composition";
-import {createEffects} from "plain-utils/utils/createEffects";
-import {debounce} from "plain-utils/utils/debounce";
-import '../utils/TableOption.space';
-import {AutoModule} from "../utils/AutoModule";
-
-declare module '../utils/TableOption.space' {
-  namespace TableOptionSpace {
-    interface iTableOption {
-      fill: ReturnType<typeof useTableOptionFill>;
-    }
-  }
-}
-
-export const useTableOptionFill = AutoModule.createRegistration((
-  {
-    hooks,
-    pagination,
-    config,
-    methods: tableMethods,
-    state: tableState,
-  }
-) => {
-
-  const state = reactive({
-    /**
-     * 当前的showRows，默认去config.showRows
-     * @author  韦胜健
-     * @date    2023/1/19 11:06
-     */
-    showRows: config.showRows,
-    /**
-     * 标记当前是否已经初始化完毕，如果config.fill==false，则标记为立即初始化，不做其他处理
-     * @author  韦胜健
-     * @date    2023/1/19 11:07
-     */
-    init: !config.fill,
-  });
-
-  const { effects } = createEffects();
-
-  const utils = {
-    /*获取table的引用，以便于或者bodyRowHeight，这个bodyRowHeight一般情况下是根据表格大小自动计算的*/
-    getTableRefer: (() => {
-      const dfd = defer<iTableRefer>();
-      hooks.onRefBaseTable.use((refer) => {!!refer && dfd.resolve(refer);});
-      return () => dfd.promise;
-    })()
-  };
-  const methods = {
-    refresh: async (el?: HTMLElement, reload?: boolean) => {
-      if (!el) {
-        el = tableState.getAutoTable()!.refs.el!;
-      }
-      if (state.init) {
-        state.init = false;
-        await delay();
-      }
-      /*等待查询表单等内容初始化完毕*/
-      const [{ numberState: { bodyRowHeight } }] = await Promise.all([
-        utils.getTableRefer(),
-        delay(),
-      ]);
-      /*解析auto-table的根节点的父节点信息，这个节点一定有一个高度，无论是通过height设置还是min-height设置，必须得有个高度*/
-      const parentInfo = (() => {
-        const parentElement = el.parentElement as HTMLElement;
-        const { height, top } = parentElement.getBoundingClientRect();
-        const { paddingBottom } = window.getComputedStyle(parentElement);
-        return {
-          /*父节点的高度*/
-          height,
-          /*父节点的top定位*/
-          top,
-          /*父节点的底部内边距*/
-          paddingBottom: Number(removeUnit(paddingBottom)),
-        };
-      })();
-
-      await delay(73)
-      /**
-       * 计算可以用来渲染行的高度
-       * parent.top+parent.height可以得到父节点底边界的top值；
-       * el.top+el.height可以得到auto-table节点底边界的top值（此时state.init=false，BaseTable的showRows应该是0，所以此时不会有固定的高度，此时的高度就只有表头的高度）
-       * 父节点底边界的top值 -  auto-table底边界的top值，就可以得到可以用来渲染表体的高度，通过这个高度除以行高就可以得到撑满高度的行数
-       * @author  韦胜健
-       * @date    2023/1/19 11:12
-       */
-      let availableHeight =
-        (parentInfo.top + parentInfo.height - parentInfo.paddingBottom) -
-        (el.getBoundingClientRect().top + el.offsetHeight);
-
-      /*console.log({
-        'parentInfo.top': parentInfo.top,
-        'parentInfo.height': parentInfo.height,
-        'parentInfo.paddingBottom': parentInfo.paddingBottom,
-        'el.getBoundingClientRect().top': el.getBoundingClientRect().top,
-        'el.offsetHeight': el.offsetHeight
-      });*/
-
-      /*计算撑满高度的行数*/
-      const showRows = Math.floor(availableHeight / bodyRowHeight);
-
-      /*更新分页查询信息*/
-      pagination.state.size = showRows;
-      pagination.state.pageSizeOptions.indexOf(showRows) === -1 && (pagination.state.pageSizeOptions.unshift(showRows));
-      state.showRows = showRows;
-      state.init = true;
-      init.resolve();
-
-      !!reload && await tableMethods.pageMethods.reload();
-    },
-  };
-
-  /*onBeginLoad要等这个init执行完毕才能开始发送请求*/
-  const init = defer();
-
-  if (!config.fill) {
-    /*不需要自动计算行数，则立即标记为完成状态*/
-    init.resolve();
-  } else {
-    /*等state.showRows计算完毕再发送请求*/
-    effects.push(hooks.onBeginLoad.use(async () => {await init.promise;}));
-
-    /**
-     * 当获取到auto-table的根节点引用的时候，开始执行初始化state.showRows
-     * @author  韦胜健
-     * @date    2023/1/19 11:09
-     */
-    effects.push(hooks.onRefAutoTableEl.use(async el => {
-      if (!config.fill || !el) {return;}
-      await methods.refresh(el);
-    }));
-
-    /**
-     * 当窗口大小变化的时候，重新计算要填充的行高
-     * @author  韦胜健
-     * @date    2023/1/19 11:52
-     */
-    config.fill && effects.push((() => {
-      const onResize = debounce(() => {methods.refresh(undefined, true);}, 200);
-      window.addEventListener('resize', onResize);
-      return () => window.removeEventListener('resize', onResize);
-    })());
-  }
-
-  onBeforeUnmount(() => effects.clear());
-
-  return { state, methods };
-});
+import {defer} from "plain-utils/utils/defer";
+import {removeUnit} from "plain-utils/string/removeUnit";
+import {iTableRefer} from "../../Table/table/Table";
+import {delay} from "plain-utils/utils/delay";
+import {onBeforeUnmount, reactive} from "plain-design-composition";
+import {createEffects} from "plain-utils/utils/createEffects";
+import {debounce} from "plain-utils/utils/debounce";
+import '../utils/TableOption.space';
+import {AutoModule} from "../utils/AutoModule";
+
+declare module '../utils/TableOption.space' {
+  namespace TableOptionSpace {
+    interface iTableOption {
+      fill: ReturnType<typeof useTableOptionFill>;
+    }
+  }
+}
+
+export const useTableOptionFill = AutoModule.createRegistration((
+  {
+    hooks,
+    pagination,
+    config,
+    methods: tableMethods,
+    state: tableState,
+  }
+) => {
+
+  const state = reactive({
+    /**
+     * 当前的showRows，默认去config.showRows
+     * @author  韦胜健
+     * @date    2023/1/19 11:06
+     */
+    showRows: config.showRows,
+    /**
+     * 标记当前是否已经初始化完毕，如果config.fill==false，则标记为立即初始化，不做其他处理
+     * @author  韦胜健
+     * @date    2023/1/19 11:07
+     */
+    init: !config.fill,
+  });
+
+  const { effects } = createEffects();
+
+  const utils = {
+    /*获取table的引用，以便于或者bodyRowHeight，这个bodyRowHeight一般情况下是根据表格大小自动计算的*/
+    getTableRefer: (() => {
+      const dfd = defer<iTableRefer>();
+      hooks.onRefBaseTable.use((refer) => {!!refer && dfd.resolve(refer);});
+      return () => dfd.promise;
+    })()
+  };
+  const methods = {
+    refresh: async (el?: HTMLElement, reload?: boolean) => {
+      if (!el) {
+        el = tableState.getAutoTable()!.refs.el!;
+      }
+      if (state.init) {
+        state.init = false;
+        await delay();
+      }
+      /*等待查询表单等内容初始化完毕*/
+      const [{ numberState: { bodyRowHeight } }] = await Promise.all([
+        utils.getTableRefer(),
+        delay(),
+      ]);
+      /*解析auto-table的根节点的父节点信息，这个节点一定有一个高度，无论是通过height设置还是min-height设置，必须得有个高度*/
+      const parentInfo = (() => {
+        const parentElement = el.parentElement as HTMLElement;
+        const { height, top } = parentElement.getBoundingClientRect();
+        const { paddingBottom } = window.getComputedStyle(parentElement);
+        return {
+          /*父节点的高度*/
+          height,
+          /*父节点的top定位*/
+          top,
+          /*父节点的底部内边距*/
+          paddingBottom: Number(removeUnit(paddingBottom)),
+        };
+      })();
+
+      await delay(73)
+      /**
+       * 计算可以用来渲染行的高度
+       * parent.top+parent.height可以得到父节点底边界的top值；
+       * el.top+el.height可以得到auto-table节点底边界的top值（此时state.init=false，BaseTable的showRows应该是0，所以此时不会有固定的高度，此时的高度就只有表头的高度）
+       * 父节点底边界的top值 -  auto-table底边界的top值，就可以得到可以用来渲染表体的高度，通过这个高度除以行高就可以得到撑满高度的行数
+       * @author  韦胜健
+       * @date    2023/1/19 11:12
+       */
+      let availableHeight =
+        (parentInfo.top + parentInfo.height - parentInfo.paddingBottom) -
+        (el.getBoundingClientRect().top + el.offsetHeight);
+
+      /*console.log({
+        'parentInfo.top': parentInfo.top,
+        'parentInfo.height': parentInfo.height,
+        'parentInfo.paddingBottom': parentInfo.paddingBottom,
+        'el.getBoundingClientRect().top': el.getBoundingClientRect().top,
+        'el.offsetHeight': el.offsetHeight
+      });*/
+
+      /*计算撑满高度的行数*/
+      const showRows = Math.floor(availableHeight / bodyRowHeight);
+
+      /*更新分页查询信息*/
+      pagination.state.size = showRows;
+      pagination.state.pageSizeOptions.indexOf(showRows) === -1 && (pagination.state.pageSizeOptions.unshift(showRows));
+      state.showRows = showRows;
+      state.init = true;
+      init.resolve();
+
+      !!reload && await tableMethods.pageMethods.reload();
+    },
+  };
+
+  /*onBeginLoad要等这个init执行完毕才能开始发送请求*/
+  const init = defer();
+
+  if (!config.fill) {
+    /*不需要自动计算行数，则立即标记为完成状态*/
+    init.resolve();
+  } else {
+    /*等state.showRows计算完毕再发送请求*/
+    effects.push(hooks.onBeginLoad.use(async () => {await init.promise;}));
+
+    /**
+     * 当获取到auto-table的根节点引用的时候，开始执行初始化state.showRows
+     * @author  韦胜健
+     * @date    2023/1/19 11:09
+     */
+    effects.push(hooks.onRefAutoTableEl.use(async el => {
+      if (!config.fill || !el) {return;}
+      await methods.refresh(el);
+    }));
+
+    /**
+     * 当窗口大小变化的时候，重新计算要填充的行高
+     * @author  韦胜健
+     * @date    2023/1/19 11:52
+     */
+    config.fill && effects.push((() => {
+      const onResize = debounce(() => {methods.refresh(undefined, true);}, 200);
+      window.addEventListener('resize', onResize);
+      return () => window.removeEventListener('resize', onResize);
+    })());
+  }
+
+  onBeforeUnmount(() => effects.clear());
+
+  return { state, methods };
+});