plain-design 0.0.97 → 1.0.0-beta.2

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

@@ -0,0 +1,131 @@
+import {iUrlResponseData} from "../utils/TableOption.url";
+import {eTableOptionStatus} from "./useTableOption.confirm";
+import {createEffects} from "plain-utils/utils/createEffects";
+import {onBeforeUnmount} from "plain-design-composition";
+import {TableOptionSpace} from "../utils/TableOption.space";
+import '../utils/TableOption.space';
+import {AutoModule} from "../utils/AutoModule";
+
+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;}
+      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 {};
+});

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

@@ -0,0 +1,16 @@
+import {useOperationPermission} from "../../Table/standard/PlcOperation/useOperationPermission";
+import {deepcopy} from "plain-utils/object/deepcopy";
+import '../utils/TableOption.space';
+import {AutoModule} from "../utils/AutoModule";
+
+declare module '../utils/TableOption.space' {
+  namespace TableOptionSpace {
+    interface iTableOption {
+      permission: ReturnType<typeof useTableOptionPermission>;
+    }
+  }
+}
+
+export const useTableOptionPermission = AutoModule.createRegistration(({ hooks, config }) => {
+  return useOperationPermission(() => hooks.onPermitConfig.exec(deepcopy(config.permit || {})));
+});

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

@@ -0,0 +1,34 @@
+import '../utils/TableOption.space';
+import {AutoModule} from "../utils/AutoModule";
+
+declare module '../utils/TableOption.space' {
+  namespace TableOptionSpace {
+    interface iTableOption {
+      render: ReturnType<typeof useTableOptionRender>;
+    }
+  }
+}
+
+export const useTableOptionRender = AutoModule.createRegistration(({ state, config }) => {
+
+  const render = {
+    default: () => {
+      if (state.getAutoTable()?.slots.default.isExist()) {
+        return state.getAutoTable()!.slots.default();
+      }
+      if (config.render) {
+        if (typeof config.render === "function") {
+          return config.render();
+        } else {
+          const { render } = config;
+          if (!!render.default) {
+            return render.default();
+          }
+        }
+      }
+      return null;
+    },
+  };
+
+  return render;
+});

package/src/packages/components/AutoTable/use/useTableOption.sort.ts

@@ -0,0 +1,197 @@
+import {iMouseEvent, reactive} from "plain-design-composition";
+import {deepcopy} from "plain-utils/object/deepcopy";
+import {createEnum} from "plain-utils/utils/createEnum";
+import {PartialFields} from "../../../utils/type";
+import {eTableOptionSettingView} from "../setting/useTableOption.setting.utils";
+import {TableOptionSpace} from "../utils/TableOption.space";
+import '../utils/TableOption.space';
+import {toArray} from "plain-utils/utils/toArray";
+import i18n from "../../i18n";
+import {AutoModule} from "../utils/AutoModule";
+
+declare module '../utils/TableOption.space' {
+  namespace TableOptionSpace {
+    interface iTableOption {
+      sortState: ReturnType<typeof useTableOptionSortState>;
+    }
+  }
+}
+
+/**
+ * 字段高级排序处理
+ * @author  韦胜健
+ * @date    2023.1.3 21:38
+ */
+export const useTableOptionSortState = AutoModule.createRegistration((
+  { hooks, methods, cache, config, filterState, state: tableState, setting }) => {
+
+  const utils = {
+    createInitialData: (): iTableOptionSortData => {
+      return !config.sort || !Array.isArray(config.sort) ? {
+        sortMode: eTableOptionSortMode.single,
+        singleParam: config.sort,
+        seniorParam: [],
+      } : {
+        sortMode: eTableOptionSortMode.senior,
+        singleParam: null,
+        seniorParam: config.sort,
+      };
+    },
+  };
+
+  const state = reactive({
+    data: utils.createInitialData()
+  });
+
+  /**
+   * 排序缓存
+   * @author  韦胜健
+   * @date    2023.1.3 21:40
+   */
+  cache.registry<iTableOptionSortData>({
+    cacheKey: 'sort-state',
+    getCache: () => {
+      return deepcopy(state.data);
+    },
+    applyCache: ({ cacheData }) => {
+      state.data = cacheData || utils.createInitialData();
+    },
+  });
+
+  const useSingle = (sortParam: PartialFields<TableOptionSpace.iTableOptionSortParam, 'desc'>) => {
+    if (state.data.sortMode === eTableOptionSortMode.single && state.data.singleParam && sortParam.field === state.data.singleParam.field && sortParam.desc === state.data.singleParam.desc) {
+      return;
+    }
+    state.data.sortMode = eTableOptionSortMode.single;
+    state.data.singleParam = sortParam.desc != null ? sortParam as TableOptionSpace.iTableOptionSortParam : {
+      field: sortParam.field,
+      desc: !!state.data.singleParam && state.data.singleParam.field === sortParam.field ? !state.data.singleParam.desc : true,
+    };
+    methods.pageMethods.reload();
+  };
+
+  const useSenior = (sortMetas: iTableOptionSortMeta[]) => {
+    state.data.sortMode = eTableOptionSortMode.senior;
+    state.data.seniorParam = sortMetas.map(({ field, desc }) => ({ field, desc }));
+    methods.pageMethods.reload();
+  };
+
+  filterState.useState({
+    seq: 1,
+    key: 'option-sort',
+    title: i18n('base.sort').d('排序'),
+    getActiveFilterCount: () => 0,
+    applyCache() {/*do nothing*/},
+    getCache: () => {/*do nothing*/},
+    getDisplay: () => () => null,
+    clear: () => {
+      state.data.sortMode = eTableOptionSortMode.single;
+      state.data.singleParam = null;
+      state.data.seniorParam = [];
+      methods.pageMethods.reload();
+    },
+  });
+
+  hooks.onQueryParam.use(() => {
+    if (state.data.sortMode === eTableOptionSortMode.single) {
+      if (!!state.data.singleParam) {
+        return { orders: [state.data.singleParam] };
+      }
+    } else {
+      if (!!state.data.seniorParam?.length) {
+        return { orders: [...state.data.seniorParam] };
+      }
+    }
+  });
+
+  /*config.sort作为默认的排序参数*/
+  hooks.onCollectSortData.use(prev => {
+    if (!config.sort) {return prev;}
+    return [...prev, ...toArray(config.sort)];
+  });
+
+  hooks.onBaseTableAttrs.use((attrs) => {
+    if (state.data.sortMode === eTableOptionSortMode.single) {
+      if (!!state.data.singleParam) {
+        attrs.sort = [state.data.singleParam];
+      }
+    } else {
+      if (!!state.data.seniorParam?.length) {
+        attrs.sort = [...state.data.seniorParam];
+      }
+    }
+  });
+
+  hooks.onTips.use(list => {
+    if (state.data.sortMode === eTableOptionSortMode.single) {
+      if (!!state.data.singleParam) {
+        const { field, desc } = state.data.singleParam;
+        const title = tableState.getSourceFlatPlcList().find(i => i.props.field === field)?.props.title;
+        const sortType = desc ? i18n('base.desc').d('降序') : i18n('base.asc').d('升序');
+        list.push({
+          display: () => i18n('table.sortInTypeOrderOfField', { description: title + sortType }).d(`按照${title}${sortType}排序`),
+          onClear: (e?: iMouseEvent) => {
+            e?.stopPropagation();
+            state.data.singleParam = null;
+            methods.pageMethods.reload();
+          },
+          onClick: () => {setting.openSetting(eTableOptionSettingView.sort);},
+        });
+      }
+    } else {
+      if (!!state.data.seniorParam?.length) {
+        const description = state.data.seniorParam!.map(({ field, desc }) => {
+          const title = tableState.getSourceFlatPlcList().find(i => i.props.field === field)?.props.title;
+          const sortType = desc ? i18n('base.desc').d('降序') : i18n('base.asc').d('升序');
+          return `${title}${sortType}`;
+        }).join(',');
+        list.push({
+          display: () => i18n('table.sortInTypeOrderOfField', { description }).d(`按照${description}排序`),
+          onClear: (e?: iMouseEvent) => {
+            e?.stopPropagation();
+            state.data.seniorParam = [];
+            methods.pageMethods.reload();
+          },
+          onClick: () => {setting.openSetting(eTableOptionSettingView.sort);},
+        });
+      }
+    }
+  });
+
+  return {
+    state,
+    useSingle,
+    useSenior,
+  };
+});
+
+/**
+ * 排序参数（用来显示的排序参数数据结构）
+ * @author  韦胜健
+ * @date    2021/7/18 10:10
+ */
+export interface iTableOptionSortMeta {
+  field: string,
+  title: string,
+  desc: boolean,
+}
+
+/**
+ * table option sort模块的状态类型
+ * @author  韦胜健
+ * @date    2023.1.17 22:14
+ */
+export interface iTableOptionSortData {
+  sortMode: typeof eTableOptionSortMode.TYPE,
+  singleParam: TableOptionSpace.iTableOptionSortParam | null | undefined,
+  seniorParam: TableOptionSpace.iTableOptionSortParam[] | undefined | null,
+}
+
+/**
+ * 排序模式
+ * single 单个字段排序
+ * senior 多个字段排序，高级排序
+ * @author  韦胜健
+ * @date    2023.1.17 22:12
+ */
+export const eTableOptionSortMode = createEnum(['single', 'senior'] as const);

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

@@ -0,0 +1,30 @@
+import {TableOptionSpace} from "../utils/TableOption.space";
+import {computed, reactive} from "plain-design-composition";
+import {iTableNode} from "../../Table/table/utils/table.utils";
+import '../utils/TableOption.space';
+import {AutoModule} from "../utils/AutoModule";
+
+declare module '../utils/TableOption.space' {
+  namespace TableOptionSpace {
+    interface iTableOption {
+      state: TableOptionSpace.iTableOptionState;
+    }
+  }
+}
+
+export const useTableOptionState = AutoModule.createRegistration(({ config, hooks }) => {
+  const state: TableOptionSpace.iTableOptionState = reactive({
+    getTable: () => null,
+    getAutoTable: () => null,
+    list: [],
+    editingWhenAddRow: !!config.defaultEditable,
+    getSourceFlatPlcList: () => [],
+    currentNode: computed((): iTableNode | null | undefined => {
+      const table = state.getTable();
+      if (!table) {return null;}
+      return table.current.getNode();
+    }),
+    sortData: computed(() => hooks.onCollectSortData.exec([])),
+  });
+  return state;
+});

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

@@ -0,0 +1,78 @@
+import {Table} from "../../Table";
+import {iTableNode} from "../../Table/table/utils/table.utils";
+import {tPlcType} from "../../Table/plc/utils/plc.utils";
+import {PlainObject} from "plain-utils/utils/event";
+import '../utils/TableOption.space';
+import {PlcIndex} from "../../Table/standard/PlcIndex";
+import {AutoModule} from "../utils/AutoModule";
+import {iMouseEvent} from "plain-design-composition";
+
+declare module '../utils/TableOption.space' {
+  namespace TableOptionSpace {
+    interface iTableOption {
+      table: ReturnType<typeof useTableOptionTable>;
+    }
+  }
+}
+
+export const useTableOptionTable = AutoModule.createRegistration((
+  {
+    state,
+    config,
+    hooks,
+    cache,
+    fill,
+    render,
+    pagination,
+  }
+) => {
+
+  const onRefTable = (refer: any) => {
+    hooks.onRefBaseTable.exec(refer);
+    state.getTable = () => refer;
+  };
+
+  const handler = {
+    onClickRow: (node: iTableNode, e: iMouseEvent) => {hooks.onClickRow.exec({ node, e });},
+    onDblclickRow: (node: iTableNode, e: iMouseEvent) => {hooks.onDblclickRow.exec({ node, e });},
+    onClickCell: (node: iTableNode, e: iMouseEvent) => {hooks.onClickCell.exec({ node, e });},
+    onDblclickCell: (node: iTableNode, e: iMouseEvent) => {hooks.onDblclickCell.exec({ node, e });},
+    onClickHead: (plc: tPlcType, e: iMouseEvent) => {hooks.onClickHead.exec({ plc, e });},
+    onCurrentChange: (data: PlainObject | null) => {hooks.onCurrentChange.exec(data);},
+    onCollectPlcData: hooks.onCollectPlcData.exec,
+    onSetup: hooks.onBaseTableSetup.exec,
+  };
+
+  hooks.onRenderColumns.use({
+    processor: ({ list, render }) => {list.push({ key: 'index', seq: 0, render });},
+    render: () => <>
+      {config.indexing != false && <PlcIndex start={(pagination.state.page - 1) * pagination.state.size}/>}
+      {render.default()}
+    </>
+  });
+
+  hooks.onTableRender.use({
+    processor: ({ list, render }) => {list.push({ key: 'table', seq: 5, render });},
+    render: () => {
+      return (
+        <Table
+          {...hooks.onBaseTableAttrs.exec({
+            data: state.list,
+            showRows: !fill.state.init ? 0 : (config.showRowsMode === 'fixed' ? fill.state.showRows : 'auto'),
+            minShowRows: !fill.state.init ? 0 : config.minShowRows,
+            ref: onRefTable,
+            defaultEditable: state.editingWhenAddRow,
+            editSourceData: config.editSourceData,
+            config: cache.tablePropsConfig,
+            headRowHeight: config.headRowHeight,
+            bodyRowHeight: config.bodyRowHeight,
+            ...handler,
+          })}
+          v-slots={{ default: () => hooks.onRenderColumns.exec(), }}
+        />
+      );
+    },
+  });
+
+  return {};
+});

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

@@ -0,0 +1,87 @@
+import {Icon} from "../../Icon";
+import {designComponent, getComponentCls, PropType, useRefs} from "plain-design-composition";
+import Button from "../../Button";
+import {useTooltip} from "../../useTooltip";
+import {useStyle} from "../../../uses/useStyle";
+import {TableOptionSpace} from "../utils/TableOption.space";
+import '../utils/TableOption.space';
+import i18n from "../../i18n";
+import {AutoModule} from "../utils/AutoModule";
+
+declare module '../utils/TableOption.space' {
+  namespace TableOptionSpace {
+    interface iTableOption {
+      tips: ReturnType<typeof useTableOptionTips>;
+    }
+  }
+}
+
+export const useTableOptionTips = AutoModule.createRegistration((
+  {
+    hooks,
+    filterState,
+  }
+) => {
+
+  hooks.onTableRender.use({
+    processor: ({ list, render }) => {list.push({ key: 'tips', seq: 4.7, render });},
+    render: () => {
+      const tips = hooks.onTips.exec([]);
+      if (tips.length === 0) {return null;}
+      return (
+        <RenderTableOptionTips tips={tips} onClearAll={filterState.clearAll}/>
+      );
+    },
+  });
+
+  return {};
+});
+
+export const RenderTableOptionTips = designComponent({
+  props: {
+    tips: { type: Array as PropType<TableOptionSpace.iTableOptionTipMeta[]>, required: true },
+    hideClearButton: { type: Boolean }
+  },
+  emits: {
+    onClearAll: () => true,
+  },
+  setup({ props, event: { emit } }) {
+    return () => {
+      const tips = props.tips;
+      if (tips.length === 0) {return null;}
+      return (
+        <div className={getComponentCls('auto-table-tips')}>
+          {tips.map((tip, index) => (
+            <RenderTableOptionTipItem tip={tip} key={index}/>
+          ))}
+          {!props.hideClearButton && <Button mode="text" icon="pi-delete" label={i18n('table.clearAll').d('全部清空')} onClick={emit.onClearAll}/>}
+        </div>
+      );
+    };
+  },
+});
+
+export const RenderTableOptionTipItem = designComponent({
+  props: {
+    tip: { type: Object as PropType<TableOptionSpace.iTableOptionTipMeta>, required: true },
+  },
+  setup({ props }) {
+    const { refs, onRef } = useRefs({ el: HTMLElement });
+    const { styleComputed } = useStyle();
+    useTooltip({
+      overflow: true,
+      tooltip: () => ({
+        popperSize: styleComputed.value.size,
+        reference: refs.el,
+        message: props.tip.display(),
+      }),
+    });
+    return () => (
+      <div onClick={props.tip.onClick} className="auto-table-tips-item">
+        <span className="auto-table-tips-label" ref={onRef.el}>{props.tip.display()}</span>
+        <div className="auto-table-tips-separator"/>
+        {!!props.tip.onClear && <Icon className="auto-table-tips-close" icon="pi-close" onClick={props.tip.onClear}/>}
+      </div>
+    );
+  },
+});

package/src/packages/components/AutoTable/use/useTableOptionKeyboard.tsx

@@ -0,0 +1,102 @@
+import {onBeforeUnmount, SimpleFunction} from "plain-design-composition";
+import {KeyBoardMap} from "../../KeyboardService";
+import '../utils/TableOption.space';
+import {AutoModule} from "../utils/AutoModule";
+
+declare module '../utils/TableOption.space' {
+  namespace TableOptionSpace {
+    interface iTableOption {
+      keyboard: ReturnType<typeof useTableOptionKeyboard>;
+    }
+  }
+}
+
+export const useTableOptionKeyboard = AutoModule.createRegistration(({ hooks }) => {
+
+  const staticState = {
+    clearTableEnterEvent: null as null | SimpleFunction,    // 清理table el的鼠标移入移出监听
+    clearTableKeydownEvent: null as null | SimpleFunction,  // 清理document.body的按键监听
+    listeners: [] as iTableOptionKeyboardListener[],        // 监听的函数
+  };
+
+  const utils = {
+    getMatchHandler: (e: KeyboardEvent) => {
+      if (e.currentTarget !== e.target) return;
+      const names = [] as string[];
+      (e.metaKey || e.ctrlKey) && names.push('ctrl');
+      e.shiftKey && names.push('shift');
+      e.altKey && names.push('alt');
+      names.push((KeyBoardMap as any)[e.keyCode]);
+      const compositionKeyName = names.join('+');
+
+      const listener = [...staticState.listeners];
+      let item = listener.shift();
+      while (!!item) {
+        const { name, handler } = item;
+        if (name === compositionKeyName) {
+          return handler;
+        } else {
+          item = listener.shift();
+        }
+      }
+      return;
+    },
+    initTableElEnterEvent: (el: HTMLDivElement) => {
+      staticState.clearTableEnterEvent?.();
+      const onEnter = () => utils.initTableKeydownEvent();
+      const onLeave = () => staticState.clearTableKeydownEvent?.();
+      el.addEventListener('mouseenter', onEnter);
+      el.addEventListener('mouseleave', onLeave);
+
+      staticState.clearTableEnterEvent = () => {
+        el.removeEventListener('mouseenter', onEnter);
+        el.removeEventListener('mouseleave', onLeave);
+      };
+
+      return staticState.clearTableEnterEvent;
+    },
+    initTableKeydownEvent: () => {
+      staticState.clearTableKeydownEvent?.();
+      const onKeydown = (e: KeyboardEvent) => {
+        const handler = utils.getMatchHandler(e);
+        if (!!handler) {
+          e.stopPropagation();
+          e.preventDefault();
+          handler(e);
+        }
+      };
+      document.body.addEventListener('keydown', onKeydown);
+      staticState.clearTableKeydownEvent = () => {document.body.removeEventListener('keydown', onKeydown);};
+      return staticState.clearTableKeydownEvent;
+    },
+  };
+
+  hooks.onRefAutoTableEl.use((el) => {
+    staticState.clearTableEnterEvent?.();
+    !!el && utils.initTableElEnterEvent(el);
+  });
+
+  onBeforeUnmount(() => {
+    staticState.clearTableEnterEvent?.();
+    staticState.clearTableKeydownEvent?.();
+  });
+
+  const on = (name: string, handler: (e: KeyboardEvent) => void) => {
+    staticState.listeners.push({ name, handler });
+    return () => {
+      const index = staticState.listeners.findIndex(i => i.name === name && i.handler === handler);
+      index > -1 && (staticState.listeners.splice(index, 1));
+    };
+  };
+
+  return {
+    on, utils, staticState,
+  };
+});
+
+export type iTableOptionKeyboardListener = {
+  name: string,
+  handler: (e: KeyboardEvent) => void
+}
+
+export type iTableOptionKeyboard = ReturnType<typeof useTableOptionKeyboard>

package/src/packages/components/AutoTable/utils/AutoModule.ts

@@ -0,0 +1,10 @@
+import {createModule} from 'plain-design-composition';
+import {TableOptionSpace} from "./TableOption.space";
+
+export const AutoModule = createModule</*@formatter:off*/
+  TableOptionSpace.iTableOptionDefaultConfig,
+  TableOptionSpace.iTableOptionCustomConfig,
+  TableOptionSpace.iTableOptionUseConfig,
+  TableOptionSpace.iTableOptionConfig,
+  TableOptionSpace.iTableOption
+/*@formatter:on*/>('AutoTable');