plain-design 0.0.97 → 1.0.0-beta.10

package/src/packages/components/AutoTable/use/useTableOption.column.popper.tsx

@@ -0,0 +1,490 @@
+import {findParentElement} from "../../../utils/findParentElement";
+import {hasClass} from "plain-utils/dom/hasClass";
+import {tPlc} from "../../Table/plc/utils/plc.utils";
+import {computed, designComponent, getComponentCls, iMouseEvent, PropType, reactive, toRaw} from "plain-design-composition";
+import {eAutoTableFilterMode} from "../filter/useTableOption.filter.state";
+import {FilterFormSingle, iFilterFormSingleData} from "../../FilterFormSingle";
+import {ButtonGroup} from "../../ButtonGroup";
+import {Button} from "../../Button";
+import {Tooltip} from "../../Tooltip";
+import {iFilterOption, iFilterQueryParam} from "../../FilterService/utils/filter.service.utils";
+import {mergeQueryParam} from "../../FilterService/utils/mergeQueryParam";
+import {$dialog} from "../../$dialog";
+import {AutoTable} from "../index";
+import {PlainObject} from "plain-utils/utils/event";
+import {RenderTableOptionTips} from "./useTableOption.tips";
+import {eTableOptionSortMode} from "./useTableOption.sort";
+import {FilterService} from "../../FilterService";
+import {PlcCheck} from "../../Table/standard/PlcCheck/PlcCheck";
+import {nextPlcExcludeCode, PlcExclusion} from "../../Table/standard/PlcExclusion";
+import {deepCloneRenderNode} from "../../../utils/deepCloneRenderNode";
+import {PlcIndex} from "../../Table/standard/PlcIndex";
+import {TableOptionSpace} from "../utils/TableOption.space";
+import '../utils/TableOption.space';
+import {TableOptionUtils} from "../utils/TableOption.utils";
+import i18n from "../../i18n";
+import {AutoModule} from "../utils/AutoModule";
+import {createPopupEditor, iPopupEditor, iPopupEditorUseOption} from "../../usePopupEditor";
+
+declare module '../utils/TableOption.space' {
+  namespace TableOptionSpace {
+    interface iTableOption {
+      columnPopper: ReturnType<typeof useTableOptionColumnPopper>;
+    }
+  }
+}
+
+export const useTableOptionColumnPopper = AutoModule.createRegistration((
+  {
+    hooks,
+    methods,
+    filterState,
+    config,
+    clone,
+    sortState,
+  }
+) => {
+
+  /**
+   * 列搜索状态控制
+   * @author  韦胜健
+   * @date    2023.1.14 22:49
+   */
+  const searchHandler = (() => {
+    const columnFilterOptions = filterState.createComputedFilterOptions(eAutoTableFilterMode.filterColumn);
+
+    const innerState = reactive({
+      data: {} as Record<string, undefined | iFilterFormSingleData>,
+    });
+    const onSearch = (val: iFilterFormSingleData) => {
+      innerState.data[val.field] = val;
+      methods.pageMethods.reload();
+    };
+    hooks.onQueryParam.use(() => {
+      const queryParamList = Object.values(innerState.data).map(i => i?.filterQueryParam).filter(Boolean) as iFilterQueryParam[];
+      return mergeQueryParam(...queryParamList);
+    });
+    filterState.useState<Record<string, undefined | iFilterFormSingleData>>({
+      seq: 1,
+      key: 'column-search',
+      title: i18n('table.columnFilter').d('列搜索'),
+      getActiveFilterCount: () => {
+        return Object.values(innerState.data).reduce((prev, item) => {
+          return prev + (item?.filterQueryParam.queries?.length || 0);
+        }, 0);
+      },
+      applyCache: ({ cacheData }) => {innerState.data = cacheData || {};},
+      getCache: () => {return innerState.data;},
+      clear: () => {innerState.data = {};},
+      getDisplay: () => {
+        const valList = Object.values(innerState.data).filter(Boolean) as iFilterFormSingleData[];
+        if (valList.length === 0) {return () => null;}
+        const contentList = valList.map(singleData => {
+          const filterOption = columnFilterOptions.value?.find(i => i.field === singleData.field);
+          return !filterOption ? null : (
+            <FilterFormSingle
+              key={singleData.field}
+              initialState={innerState.data[singleData.field]}
+              filterOptions={[filterOption]}
+              width="100%"
+              onSearch={onSearch}
+            />
+          );
+        }).filter(Boolean);
+        return () => contentList;
+      },
+    });
+    const tips = computed((): TableOptionSpace.iTableOptionTipMeta[] => {
+      const list: TableOptionSpace.iTableOptionTipMeta[] = [];
+      if (!columnFilterOptions.value) {return list;}
+      Object.values(innerState.data).forEach(singleData => {
+        if (!singleData) {return;}
+        const { formData, filterHandler, filterQueryParam, field } = singleData;
+        if (!filterQueryParam.queries?.length) {return; }
+        let filterOption = columnFilterOptions.value!.find(i => i.field === field);
+        if (!filterOption) {return;}
+        filterOption = { ...filterOption, filterHandler };
+        const meta = TableOptionUtils.createTableOptionTipMeta({
+          filterOption,
+          formData,
+          onClick: () => {/*do nothing*/},
+          onClear: () => {
+            singleData.filterQueryParam = {};
+            methods.pageMethods.reload();
+          },
+        });
+        !!meta && list.push(meta);
+      });
+      return list;
+    });
+    hooks.onTips.use(list => {!!tips.value && list.push(...tips.value);});
+
+    function getFilterOption(plc: tPlc): iFilterOption | null {
+      const searchField = plc.props.searchField || plc.props.field;
+      if (!searchField) {return null;}
+      return columnFilterOptions.value?.find(i => i.field === searchField) || null;
+    }
+
+    return {
+      innerState,
+      onSearch,
+      getFilterOption,
+    };
+  })();
+
+  /**
+   * 去重筛选状态控制
+   * @author  韦胜健
+   * @date    2023.1.14 22:51
+   */
+  const distinctHandler = ((() => {
+    /**
+     * 可用的去重筛选字段
+     * @author  韦胜健
+     * @date    2023.1.14 22:51
+     */
+    const distinctFilterOptions = filterState.createComputedFilterOptions(eAutoTableFilterMode.filterDistinct);
+
+    function getFilterOption(plc: tPlc): iFilterOption | null {
+      const searchField = plc.props.searchField || plc.props.field;
+      if (!searchField) {return null;}
+      return distinctFilterOptions.value?.find(i => i.field === searchField) || null;
+    }
+
+    const innerState = reactive({
+      data: {} as Record<string, undefined | PlainObject[]>,
+      /*调用 methods.pageMethods.loadQueryParam时要忽略 要打开的那个字段的筛选参数*/
+      ignoreDistinctFilterField: null as null | string,
+    });
+
+    const onConfirm = (field: string, selected: PlainObject[]) => {
+      innerState.data[field!] = selected;
+      methods.pageMethods.reload();
+    };
+
+    hooks.onQueryParam.use(async () => {
+      if (!distinctFilterOptions.value) {return;}
+      const queryParamList = await Promise.all(
+        Object.entries(innerState.data).map(async ([field, selected]) => {
+          if (!selected || selected.length === 0 || field === innerState.ignoreDistinctFilterField) {return;}
+          return { queries: [{ id: `distinct_filter_${field}`, field, operator: 'in' as const, value: selected.map(i => i[field]).join(',') }] };
+        })
+      );
+      return mergeQueryParam(...queryParamList);
+    });
+
+    filterState.useState<Record<string, undefined | PlainObject[]>>({
+      seq: 1,
+      key: 'distinct-search',
+      title: i18n('table.distinctFilter').d('去重筛选'),
+      getActiveFilterCount: () => {
+        return Object.values(innerState.data).reduce((prev, item) => {
+          return prev + ((!!item && item.length > 0) ? 1 : 0);
+        }, 0);
+      },
+      applyCache: ({ cacheData }) => {innerState.data = cacheData || {};},
+      getCache: () => {return innerState.data;},
+      clear: () => {innerState.data = {};},
+      getDisplay: () => {
+        // todo
+        return () => (
+          <RenderTableOptionTips tips={tips.value} hideClearButton/>
+        );
+      },
+    });
+
+    const tips = computed((): TableOptionSpace.iTableOptionTipMeta[] => {
+      const list: TableOptionSpace.iTableOptionTipMeta[] = [];
+
+      Object.entries(innerState.data).forEach(([field, value]) => {
+        if (!distinctFilterOptions.value || !value || value.length === 0) {return;}
+        let filterOption = distinctFilterOptions.value.find(i => i.field === field)!;
+        filterOption = { ...filterOption, filterHandler: 'in' };
+        const handler = FilterService.getHandler(filterOption);
+        const vals = value.map(i => i[field]).join(',');
+        const onClick = async () => {
+          const plc = (await methods.getSourceFlatPlcList()).find(i => i.props.searchField === field || i.props.field === field);
+          !!plc && open(plc);
+        };
+        const onClear = (e?: iMouseEvent) => {
+          e?.stopPropagation();
+          innerState.data[field] = undefined;
+          methods.pageMethods.reload();
+        };
+        if (!handler) {
+          list.push({
+            display: () => i18n('table.filterTipInclude', { field: filterOption.label, val: vals }).d(`${filterOption.label}包含${vals}`),
+            onClick,
+            onClear,
+          });
+        } else {
+          const meta = TableOptionUtils.createTableOptionTipMeta({
+            filterOption,
+            formData: { [field]: vals },
+            onClick,
+            onClear,
+          });
+          !!meta && list.push(meta);
+        }
+      });
+      return list;
+    });
+    hooks.onTips.use(list => {!!tips.value && list.push(...tips.value);});
+
+    const open = async (plc: tPlc) => {
+      popperHandler.close();
+      const wrapperStyles = { width: '400px' };
+      const field = plc.props.searchField || plc.props.field;
+      if (!field) {return;}
+      const excludeCode = nextPlcExcludeCode();
+      /*用排除法来去掉不显示的列*/
+      const isExclude = (i: tPlc): boolean => {
+        if (i.props.excludeCode === excludeCode) {
+          return false;
+        }
+        if (i.props.title === plc.props.title && i.props.field === plc.props.field && i.props.searchField == plc.props.searchField) {
+          return false;
+        }
+        return true;
+      };
+
+      const openState = reactive({ data: innerState.data[field!] || [] });
+      innerState.ignoreDistinctFilterField = field;
+      try {
+        const externalQueryParam = await methods.pageMethods.getLoadQueryParam();
+        // console.log(externalQueryParam);
+
+        $dialog({
+          title: i18n('table.distinctFilter').d('去重筛选'),
+          size: config.size,
+          confirmButton: true,
+          cancelButton: true,
+          handleConfirm: () => {onConfirm(field, openState.data);},
+          render: () => {
+            return (
+              <div style={wrapperStyles}>
+                <PlcExclusion isExclude={isExclude}>
+                  <DistinctAutoTable
+                    externalQueryParam={externalQueryParam}
+                    distinctField={field}
+                    cloneOption={clone as any}
+                    excludeCode={excludeCode}
+                  >
+                    <PlcCheck
+                      excludeCode={excludeCode}
+                      v-model={openState.data}
+                      field={plc.props.field!}
+                      toggleOnClickRow
+                    />
+                    {deepCloneRenderNode(hooks.onRenderColumns.exec())}
+                  </DistinctAutoTable>
+                </PlcExclusion>
+              </div>
+            );
+          }
+        });
+      } finally {
+        innerState.ignoreDistinctFilterField = null;
+      }
+    };
+
+    const clear = (field: string) => {
+      innerState.data[field] = [];
+      methods.pageMethods.reload();
+    };
+
+    return {
+      getFilterOption,
+      innerState,
+      open,
+      clear,
+    };
+  })());
+
+  /**
+   * column popper 控制
+   * @author  韦胜健
+   * @date    2023.1.14 10:34
+   */
+  const popperHandler = (() => {
+
+    const innerState = reactive({
+      data: null as null | {
+        // filterOption: iFilterOption | null,
+        getOption: () => { el: HTMLElement, plc: tPlc },
+        popper: iPopupEditor,
+      }
+    });
+
+    const getPopperAttrs = (): iPopupEditorUseOption => ({ arrowSize: 0, size: config.size });
+
+    const open = ({ el, plc }: { el: HTMLElement, plc: tPlc }) => {
+      if (((!plc.props.field && !plc.props.searchField) || plc.props.noFilter) || plc.props.noSort) {
+        return;
+      }
+      if (!!innerState.data) {
+        const option = innerState.data.getOption();
+        if (toRaw(option.el) === toRaw(el) && toRaw(plc) === toRaw(option.plc)) {
+          /*已经打开，并且打开的是同一个列，则直接切换显示*/
+          return;
+        } else {
+          innerState.data.popper.methods.dispose();
+        }
+      }
+
+      const filterOption = searchHandler.getFilterOption(plc);
+      /*selectFilterOptions只计算一次，避免每次给FilterFormSingle传递变化的options导致重置filterHandler*/
+      const selectFilterOptions = !filterOption ? null : [filterOption];
+
+      innerState.data = {
+        getOption: () => ({ el, plc }),
+        popper: createPopupEditor({
+          option: {
+            alwaysShowOnClickReference: () => false,
+            popperAttrs: getPopperAttrs,
+            reference: () => el,
+            popper: () => {
+              const columnFilterContent = (() => {
+                if (!selectFilterOptions || selectFilterOptions.length === 0) {return null;}
+                return (
+                  <FilterFormSingle
+                    width="360px"
+                    filterOptions={selectFilterOptions}
+                    initialState={searchHandler.innerState.data[selectFilterOptions[0].field]}
+                    onSearch={searchHandler.onSearch}
+                    hideFieldSelector
+                  />
+                );
+              })();
+              const distinctFilterContent = (() => {
+                if (!filterOption) {return null;}
+                return (
+                  <ButtonGroup className="auto-table-column-popper-button-group" size={config.size}>
+                    <Button label={i18n('table.distinctFilter').d('去重筛选')} icon="pi-select-all" size={config.size} onClick={() => distinctHandler.open(plc)}/>
+                    <Tooltip message={i18n('table.clearDistinctFilter').d('清空去重筛选')}><Button icon="pi-delete" size={config.size} onClick={() => distinctHandler.clear(filterOption.field)}/></Tooltip>
+                  </ButtonGroup>
+                );
+              })();
+              return (
+                <div className={getComponentCls('auto-table-column-popper')}>
+                  <SortSwitcher
+                    type={(() => {
+                      if (sortState.state.data.sortMode === eTableOptionSortMode.single) {
+                        if (!!sortState.state.data.singleParam) {
+                          if (sortState.state.data.singleParam.field === plc.props.field) {
+                            return sortState.state.data.singleParam.desc ? 'desc' : 'asc';
+                          }
+                        }
+                      } else {
+                        if (!!sortState.state.data.seniorParam?.length) {
+                          const findParam = sortState.state.data.seniorParam?.find(i => i.field === plc.props.field);
+                          if (!!findParam) {
+                            return findParam.desc ? 'desc' : 'asc';
+                          }
+                        }
+                      }
+                      return undefined;
+                    })()}
+                    onChange={(type) => sortState.useSingle({ field: plc.props.field!, desc: type === 'desc' })}
+                  />
+                  {columnFilterContent}
+                  {distinctFilterContent}
+                </div>
+              );
+            }
+          },
+        }),
+      };
+      innerState.data.popper.methods.show();
+    };
+
+    const close = () => innerState.data?.popper.methods.hide();
+
+    return { open, close };
+  })();
+
+  /**
+   * 点击列标题的时候打开column popper
+   * @author  韦胜健
+   * @date    2023.1.14 10:33
+   */
+  hooks.onClickHead.use(({ e, plc }) => {
+    if (plc.group) {return;}
+    const target = e.target as HTMLElement;
+    const cellEl = hasClass(target, 'plt-head-cell') ? target : findParentElement(target, i => hasClass(i, 'plt-head-cell'));
+    if (!cellEl) {return;}
+    popperHandler.open({ el: cellEl, plc });
+  });
+
+  return {};
+});
+
+const SortSwitcher = designComponent({
+  name: 'sort-switcher',
+  props: {
+    type: { type: String as PropType<'asc' | 'desc'> },
+  },
+  emits: {
+    onChange: (type: 'asc' | 'desc') => true,
+  },
+  setup({ props, event: { emit } }) {
+    const emitAsc = () => emit.onChange('asc');
+    const emitDesc = () => emit.onChange('desc');
+    return () => (
+      <div className="auto-table-sort-switcher">
+        <Button label={i18n('base.asc').d('升序')} icon="pi-sort-descending" status={props.type === 'asc' ? 'primary' : undefined} onClick={emitAsc}/>
+        <Button label={i18n('base.desc').d('降序')} icon="pi-sort-ascending" status={props.type === 'desc' ? 'primary' : undefined} onClick={emitDesc}/>
+      </div>
+    );
+  },
+});
+
+const DistinctAutoTable = designComponent({
+  name: 'distinct-auto-table',
+  props: {
+    distinctField: { type: String, required: true },
+    cloneOption: { type: Function as PropType<TableOptionSpace.iTableOptionClone>, required: true },
+    externalQueryParam: {},
+    excludeCode: { type: String, required: true },
+  },
+  emits: {},
+  slots: ['default'],
+  setup({ props, slots }) {
+
+    const option = props.cloneOption(useConfig => {
+      useConfig.showRows = 10;
+      useConfig.fill = false;
+      useConfig.showRowsMode = 'fixed';
+      useConfig.hideFilterForm = true;
+      if (!useConfig.permit) {useConfig.permit = {};}
+      useConfig.permit.show = {
+        insert: false,
+        update: false,
+        delete: false,
+        other: false,
+      };
+      useConfig.searchAttrs = {
+        ...useConfig.searchAttrs,
+        hideFieldSelector: true,
+        width: '100%',
+      };
+      useConfig.paginationAttrs = {
+        ...useConfig.paginationAttrs,
+        layout: 'sizes,prev,next,jumper',
+      };
+    });
+    option.hooks.onQueryParam.use(() => {
+      return { distinctFields: [props.distinctField], ...props.externalQueryParam as any };
+    });
+
+    return () => (
+      <AutoTable option={option}>
+        <PlcIndex
+          start={(option.pagination.state.page - 1) * option.pagination.state.size}
+          excludeCode={props.excludeCode}
+        />
+        {slots.default()}
+      </AutoTable>
+    );
+  },
+});

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

@@ -0,0 +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('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('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('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,
+}