plain-design 0.0.97 → 1.0.0-beta.10

package/src/packages/components/AutoTable/setting/useTableOption.setting.senior.filter.tsx

@@ -0,0 +1,385 @@
+import {eAutoTableFilterMode} from "../filter/useTableOption.filter.state";
+import {computed, Fragment, iMouseEvent, reactive, RenderNode, useRefList} from "plain-design-composition";
+import {FilterFormSingle, iFilterFormSingleData} from "../../FilterFormSingle";
+import {eTableOptionSettingView} from "./useTableOption.setting.utils";
+import {Button} from "../../Button";
+import {Checkbox} from "../../Checkbox";
+import {Input} from "../../Input";
+import {Empty} from "../../Empty";
+import {iFilterQueryMeta} from "../../FilterService/utils/filter.service.utils";
+import {$message} from "../../$message";
+import {delay} from "plain-utils/utils/delay";
+import {Icon} from "../../Icon";
+import {doNothing} from "../../../utils/doNothing";
+import {deepcopy} from "plain-utils/object/deepcopy";
+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";
+
+declare module '../utils/TableOption.space' {
+  namespace TableOptionSpace {
+    interface iTableOption {
+      settingSeniorFilter: ReturnType<typeof useTableOptionSettingSeniorFilter>;
+    }
+  }
+}
+
+export const useTableOptionSettingSeniorFilter = AutoModule.createRegistration((
+  {
+    cache,
+    setting,
+    hooks,
+    methods,
+    filterState,
+  }
+) => {
+
+  const { refList, onRefList } = useRefList(FilterFormSingle);
+
+  const filterOptions = filterState.createComputedFilterOptions(eAutoTableFilterMode.filterSenior);
+
+  const utils = {
+    nextId: (() => {
+      const maxCount = computed(() => {
+        const max = edit.state.metas.reduce((prev, item) => {
+          let [_, val] = item.id.split('_');
+          const v = Number(val);
+          return !isNaN(v) && v > prev ? v : prev;
+        }, 0);
+        return Math.max(max, edit.state.metas.length);
+      });
+      return () => `F_${maxCount.value + 1}`;
+    })(),
+    resetOperator: () => {
+      edit.state.expression = edit.defaultExpression.value;
+    },
+    createState: () => {
+      const state: iTableOptionSeniorData = reactive({
+        metas: [],
+        expression: null,
+        isCustomExpression: false,
+      });
+      const defaultExpression = computed(() => state.metas.map(i => i.id).join(` ${DEFAULT_EXPRESSION_JOIN} `));
+      return {
+        state, defaultExpression,
+      };
+    },
+  };
+
+  /**
+   * 查询的时候的数据
+   * @author  韦胜健
+   * @date    2021/7/22 21:05
+   */
+  const query = (() => {
+    const { state, defaultExpression } = utils.createState();
+
+    const apply = async () => {
+      await delay();
+      const dataList = refList.length === 0 ? [] : await Promise.all(refList.map(i => i.getData()));
+      const metas = !isSettingSeniorOpen() ? edit.state.metas : dataList.map((data, index) => ({ data, id: edit.state.metas[index].id }));
+      const invalidIndex = metas.findIndex(i => !i.data || !i.data.filterQueryParam || !i.data.filterQueryParam.queries?.length);
+      if (invalidIndex > -1) {
+        $message.error(i18n('table.pleaseEnterCompleteParamsForCondition').d(`第${invalidIndex + 1}个条件请输入完整参数！`));
+        return;
+      }
+      state.metas = metas;
+      state.expression = edit.state.expression;
+      state.isCustomExpression = edit.state.isCustomExpression;
+      await methods.pageMethods.reload();
+    };
+
+    return {
+      state,
+      defaultExpression,
+      apply,
+    };
+  })();
+
+  /**
+   * 编辑的时候的数据
+   * @author  韦胜健
+   * @date    2021/7/22 21:05
+   */
+  const edit = (() => {
+
+    /**
+     * 状态需要与query同步初始化，因为应用的时候可能filter form single没有初始化，此时应该用edit的状态
+     * 因为 edit.remove 删除的是edit内部的状态
+     * @author  韦胜健
+     * @date    2023.1.15 22:11
+     */
+    const { state, defaultExpression } = {
+      state: reactive(deepcopy(query.state)),
+      defaultExpression: query.defaultExpression,
+    };
+
+    const add = () => {
+      const id = utils.nextId();
+      if (state.metas.length === 0) {
+        state.expression = id;
+      } else {
+        state.expression += ` ${DEFAULT_EXPRESSION_JOIN} ${id}`;
+      }
+      state.metas.push({ id, data: undefined });
+    };
+
+    const remove = (index: number) => {
+      const isMatchDefaultOperator = !!state.expression && state.expression.trim() === defaultExpression.value;
+      state.metas.splice(index, 1);
+      if (isMatchDefaultOperator) {state.expression = defaultExpression.value;}
+    };
+
+    const clear = () => {
+      state.metas = [];
+      state.expression = null;
+      query.apply();
+    };
+
+    return {
+      state,
+      defaultExpression,
+      add,
+      remove,
+      clear,
+    };
+  })();
+
+  cache.registry<iTableOptionSeniorData>({
+    cacheKey: 'filter-state-senior',
+    applyCache: ({ plcList, cacheData }) => {
+      query.state.isCustomExpression = !cacheData ? false : cacheData.isCustomExpression;
+      query.state.expression = !cacheData ? null : cacheData.expression;
+      query.state.metas = !cacheData ? [] : cacheData.metas.map(item => {
+        /*有些字段可能从代码中去掉了，这里将无效的字段对应的缓存筛选条件去除*/
+        if (!item.data?.field) {return null;}
+        const { field } = item.data || {};
+        const plc = plcList.find(i => i.props.searchField === field || i.props.field === field);
+        if (!plc) {return null;}
+        return item;
+      }).filter(Boolean) as iTableOptionSeniorFilterMeta[];
+      /*同步edit与query的状态*/
+      edit.state.metas = deepcopy(query.state.metas);
+      edit.state.expression = query.state.expression;
+      edit.state.isCustomExpression = query.state.isCustomExpression;
+    },
+    getCache: () => {
+      return {
+        expression: query.state.expression,
+        metas: query.state.metas,
+        isCustomExpression: query.state.isCustomExpression,
+      };
+    },
+  });
+
+  const { isOpen: isSettingSeniorOpen } = setting.useTableOptionSettingInner({
+    key: eTableOptionSettingView.seniorFilter,
+    title: i18n('table.seniorFilter').d('高级筛选'),
+    seq: 1,
+    beforeOpen: () => {
+      edit.state.metas = deepcopy(query.state.metas);
+      edit.state.expression = query.state.expression;
+      edit.state.isCustomExpression = query.state.isCustomExpression;
+    },
+    render: () => {
+      refList.splice(0, refList.length);
+      return (
+        <div className="auto-table-setting-senior-filter">
+          <div className="auto-table-setting-senior-filter-button">
+            <div>
+              <Button label={i18n('base.edit.apply').d('应用')} onClick={query.apply} mode="fill" icon="pi-find-replace"/>
+              <Button label={i18n('base.edit.add').d('添加')} onClick={edit.add} icon="pi-plus"/>
+            </div>
+            <Button label={i18n('base.clear').d('清空')} icon="pi-delete" status="error" onClick={edit.clear}/>
+          </div>
+          <div className="auto-table-setting-senior-filter-list">
+            {edit.state.metas.length === 0 ? (
+              <Empty noData label={i18n('table.pleaseAddFilterCondition').d('请添加筛选条件')}/>
+            ) : (
+              edit.state.metas.map((meta, index) => (
+                <div key={meta.id} className="auto-table-setting-senior-filter-list-item">
+                  <FilterFormSingle
+                    ref={onRefList(index)}
+                    filterOptions={filterOptions.value}
+                    initialState={meta.data}
+                    onSearch={query.apply}
+                    width="calc(100% - 40px)"
+                    hideSearchButton
+                    v-slots={{
+                      prepend: () => (<Input readonly modelValue={meta.id} width={60}/>)
+                    }}
+                  />
+                  <Button icon="pi-delete" onClick={() => edit.remove(index)}/>
+                </div>
+              ))
+            )}
+          </div>
+          <div className="auto-table-setting-senior-filter-expression-header">
+            <div className="auto-table-setting-senior-filter-expression-title">{i18n('table.expression').d('表达式')}</div>
+          </div>
+          <Input textarea v-model={edit.state.expression} disabled={!edit.state.isCustomExpression}/>
+          <Checkbox label={i18n('base.custom').d('自定义')} v-model={edit.state.isCustomExpression} onChange={utils.resetOperator}/>
+        </div>
+      );
+    },
+  });
+
+  /**
+   * 获取查询参数时返回当前绑定的参数
+   * @author  韦胜健
+   * @date    2023.1.8 19:09
+   */
+  hooks.onQueryParam.use(async () => {
+    let expression = !query.state.isCustomExpression || !query.state.expression ? query.defaultExpression.value : query.state.expression;
+    /*处理空格*/
+    expression = expression.replace(/\s*(\|\||&&|或者|并且|or|and)\s*/gi, ' $1 ').replace(/\s+/, ' ');
+    /*目标queries数组*/
+    const resultQueries: iFilterQueryMeta[] = [];
+
+    /*id映射senior meta查询参数*/
+    const idToSeniorMeta: Record<string, iTableOptionSeniorFilterMeta & { index: number }> = query.state.metas.reduce((prev, item) => {
+      prev[item.id] = item;
+      return prev;
+    }, {} as any);
+
+    expression = expression.replace(/\w+/g, (input) => {
+      if (ExpressionJoins.indexOf(input) > -1) {return input;}
+      const senior = idToSeniorMeta[input];
+      if (!senior || !senior.data) {return input;}
+      const { queries } = senior.data.filterQueryParam;
+      if (!queries || queries.length === 0) {return input;}
+      if (queries.length === 1) {
+        queries[0].id = input;
+        resultQueries.push(...queries);
+        return input;
+      }
+      const itemQueryIds: string[] = [];
+      queries.forEach((i, idx) => {
+        const itemId = `${input}-${idx + 1}`;
+        itemQueryIds.push(itemId);
+        resultQueries.push({
+          ...i,
+          id: itemId,
+        });
+      });
+      return `(${itemQueryIds.join(' 并且 ')})`;
+    });
+
+    // console.log(resultQueries.length === 0 ? null : { queries: resultQueries, expression: expression });
+
+    return resultQueries.length === 0 ? null : { queries: resultQueries, expression: expression };
+  });
+
+  /*只显示激活的筛选条件*/
+  filterState.useState<any>({
+    seq: Infinity,
+    key: 'senior-filter',
+    title: i18n('table.seniorQuery').d('高级查询'),
+    applyCache: () => null,
+    getCache: () => null,
+    getDisplay: () => () => (
+      <Button onClick={() => setting.openSetting(eTableOptionSettingView.seniorFilter)}>
+        <span>{i18n('table.configSeniorFilter').d('配置高级筛选')}</span>
+        <Icon icon="pi-arrow-right"/>
+      </Button>
+    ),
+    clear: () => null,
+    getActiveFilterCount: () => query.state.metas.length
+  });
+
+  const tips = computed((): TableOptionSpace.iTableOptionTipMeta[] => {
+    const list: TableOptionSpace.iTableOptionTipMeta[] = [];
+    const { metas, expression, isCustomExpression } = query.state;
+    if (!metas.length || !filterOptions.value) {return list;}
+    if (metas.every(i => !i.data?.filterQueryParam.queries?.length)) {return list;}
+    if (!isCustomExpression) {
+      metas.forEach((meta, index) => {
+        if (!meta.data) {return;}
+        const { field, filterHandler, formData } = meta.data;
+        let filterOption = filterOptions.value!.find(i => i.field === field);
+        if (!filterOption) {return;}
+        filterOption = { ...filterOption, filterHandler };
+        const tip = TableOptionUtils.createTableOptionTipMeta({
+          formData,
+          filterOption,
+          onClear: async () => {
+            edit.remove(index);
+            await delay();
+            await query.apply();
+          },
+          onClick: () => {setting.openSetting(eTableOptionSettingView.seniorFilter);},
+        });
+        !!tip && list.push(tip);
+      });
+    } else {
+      if (!expression || !filterOptions.value.length) {return list;}
+      /*id映射senior meta查询参数*/
+      const idToSeniorMeta: Record<string, iTableOptionSeniorFilterMeta & { index: number }> = query.state.metas.reduce((prev, item) => {
+        prev[item.id] = item;
+        return prev;
+      }, {} as any);
+      const renderList: (() => RenderNode)[] = [];
+      expression.split(' ').forEach(work => {
+        if (!work.trim().length) {return; }
+        if (ExpressionJoins.indexOf(work) > -1) {
+          renderList.push(() => work);
+          return;
+        }
+        const senior = idToSeniorMeta[work];
+        if (!senior || !senior.data) {
+          renderList.push(() => work);
+          return;
+        }
+        const { filterHandler, field, formData } = senior.data;
+        let filterOption = filterOptions.value!.find(i => i.field === field);
+        if (!filterOption) {
+          renderList.push(() => work);
+          return;
+        }
+        filterOption = { ...filterOption, filterHandler };
+        const tip = TableOptionUtils.createTableOptionTipMeta({
+          filterOption,
+          formData,
+          onClick: doNothing,
+          onClear: doNothing,
+        });
+        if (!tip) {
+          renderList.push(() => work);
+          return;
+        }
+        renderList.push(tip.display);
+      });
+      list.push({
+        display: () => renderList.map((i, index) => <Fragment key={index}>{i()}</Fragment>),
+        onClear: async (e: iMouseEvent) => {
+          e.stopPropagation();
+          Object.assign(edit.state, utils.createState().state);
+          await query.apply();
+        },
+        onClick: () => {setting.openSetting(eTableOptionSettingView.seniorFilter);},
+      });
+    }
+    return list;
+  });
+
+  hooks.onTips.use(list => {
+    !!tips.value.length && list.push(...tips.value);
+  });
+});
+
+export type iTableOptionSeniorFilterMeta = {
+  id: string,
+  data: undefined | iFilterFormSingleData,
+}
+
+export interface iTableOptionSeniorData {
+  metas: iTableOptionSeniorFilterMeta[],
+  expression: null | string,
+  isCustomExpression: boolean,
+}
+
+const ExpressionJoins = ['&&', '||', 'and', 'or', '并且', '或者'];
+
+const DEFAULT_EXPRESSION_JOIN = '或者';

package/src/packages/components/AutoTable/setting/useTableOption.setting.senior.sort.tsx

@@ -0,0 +1,116 @@
+import {eTableOptionSettingView} from "./useTableOption.setting.utils";
+import {eTableOptionSortMode, iTableOptionSortMeta} from "../use/useTableOption.sort";
+import {computed, reactive} from "plain-design-composition";
+import {Table} from "../../Table";
+import {PlcDraggier} from "../../Table/standard/PlcDraggier/PlcDraggier";
+import {Plc} from "../../Plc";
+import {PlcOperation} from "../../Table/standard/PlcOperation/PlcOperation";
+import {iTableInnerOperationConfig} from "../../Table/standard/PlcOperation/PlcOperation.utils";
+import {PlcCheckbox} from "../../Table/editor/PlcCheckbox";
+import {Button} from "../../Button";
+import {tPlc} from "../../Table/plc/utils/plc.utils";
+import {Dropdown} from "../../Dropdown";
+import {DropdownOption} from "../../DropdownOption";
+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 {
+      settingSeniorSort: ReturnType<typeof useTableOptionSettingSeniorSort>;
+    }
+  }
+}
+
+export const useTableOptionSettingSeniorSort = AutoModule.createRegistration((
+  {
+    setting,
+    sortState,
+    methods,
+  }
+) => {
+
+  const state = reactive({
+    data: [] as iTableOptionSortMeta[],
+    getSourceFlatPlcList: () => [] as tPlc[],
+  });
+
+  const availablePlcOptions = computed(() => {
+    return state.getSourceFlatPlcList()
+      .filter(({ props: { field, noSort } }) => !noSort && !state.data.find(i => i.field === field))
+      .map(({ props: { title, field } }): { title: string, field: string } => {
+        return { title: title!, field: field! };
+      });
+  });
+
+  const innerOperations: iTableInnerOperationConfig[] = [
+    {
+      label: i18n('base.edit.remove').d('删除'),
+      position: 'inner',
+      type: 'delete',
+      handler: ({ node }) => {handler.remove(node.state.index);},
+    }
+  ];
+
+  const handler = {
+    add: (val: { field: string, title: string }) => {state.data.push({ ...val, desc: true });},
+    remove: (index: number) => {state.data.splice(index, 1);},
+    apply: () => {
+      sortState.useSenior([...state.data]);
+    },
+    clear: () => {
+      state.data = [];
+      handler.apply();
+    },
+  };
+
+  setting.useTableOptionSettingInner({
+    key: eTableOptionSettingView.sort,
+    title: i18n('table.seniorSort').d('高级排序'),
+    seq: 2,
+    beforeOpen: async () => {
+      const sourceFlatPlcList = await methods.getSourceFlatPlcList();
+      state.getSourceFlatPlcList = () => sourceFlatPlcList;
+      const { sortMode, singleParam, seniorParam } = sortState.state.data;
+      state.data = ((sortMode === eTableOptionSortMode.single ? [singleParam] : (seniorParam || [])).filter(Boolean) as TableOptionSpace.iTableOptionSortParam[])
+        .map(({ field, desc }): iTableOptionSortMeta => {
+          return {
+            title: sourceFlatPlcList.find(i => i.props.field === field)?.props.title || '',
+            desc: desc,
+            field,
+          };
+        });
+    },
+    render: () => {
+      return (
+        <div className="auto-table-setting-senior-sort" key="senior-sort">
+          <div className="auto-table-setting-senior-sort-header">
+            <div>
+              <Button label={i18n('base.edit.apply').d("应用")} mode="fill" icon="pi-find-replace" onClick={handler.apply}/>
+              {!!availablePlcOptions.value.length && (
+                <Dropdown
+                  v-slots={{
+                    reference: () => <Button label={i18n('base.edit.add').d('添加')} icon="pi-plus"/>,
+                    popper: () => availablePlcOptions.value.map((i) => (
+                      <DropdownOption key={i.field} label={i.title} onClick={() => handler.add(i)}/>
+                    ))
+                  }}
+                />
+              )}
+            </div>
+            <Button label={i18n('base.clear').d("清空")} icon="pi-delete" status="error" onClick={handler.clear}/>
+          </div>
+          <Table data={state.data} defaultEditable editSourceData>
+            <PlcDraggier v-model={state.data}/>
+            <Plc field="title" title={i18n('table.title').d('标题')}/>
+            <PlcCheckbox field="desc" title={i18n('table.ascOrDesc').d('升序还是降序')} trueValue={true} falseValue={false}/>
+            <PlcOperation operations={innerOperations}/>
+          </Table>
+        </div>
+      );
+    },
+  });
+
+});

package/src/packages/components/AutoTable/setting/useTableOption.setting.tsx

@@ -0,0 +1,109 @@
+import {classnames, computed, getComponentCls, reactive, SimpleFunction} from "plain-design-composition";
+import {iTableOptionSettingConfig, iTableOptionSettingInnerUser} from "./useTableOption.setting.utils";
+import {$dialog} from "../../$dialog";
+import {Scroll} from "../../Scroll";
+import '../utils/TableOption.space';
+import i18n from "../../i18n";
+import {AutoModule} from "../utils/AutoModule";
+
+declare module '../utils/TableOption.space' {
+  namespace TableOptionSpace {
+    interface iTableOption {
+      setting: ReturnType<typeof useTableOptionSetting>;
+    }
+  }
+}
+
+export const useTableOptionSetting = AutoModule.createRegistration((
+  {
+    config,
+  }
+) => {
+
+  const state = reactive({
+    settingConfigs: [] as iTableOptionSettingConfig[],
+    activeKey: null as null | string,
+    closeSetting: null as null | SimpleFunction,
+  });
+
+  const isOpen = computed(() => !!state.closeSetting);
+
+  const useTableOptionSettingInner: iTableOptionSettingInnerUser = (config) => {
+    state.settingConfigs.push(config);
+    return { isOpen: () => isOpen.value && state.activeKey === config.key };
+  };
+
+  const openSetting = async (key: string) => {
+
+    const settingConfigs = state.settingConfigs.sort((a, b) => a.seq - b.seq);
+    const showConfig = state.settingConfigs.find(i => i.key === key);
+    !!showConfig && showConfig.beforeOpen && (await showConfig.beforeOpen());
+    state.activeKey = key;
+
+    /*已经打开就不用在打开一个dialog了，直接切换activeKey*/
+    if (isOpen.value) {return state.closeSetting;}
+
+    state.closeSetting = $dialog({
+      status: null,
+      size: config.size,
+      position: 'right',
+      width: null as any,
+      destroyOnClose: false,
+      footAlign: 'left',
+      noContentPadding: true,
+      externalClass: getComponentCls('auto-table-setting-dialog'),
+      title: i18n('base.setting').d('设置'),
+      cancelButton: true,
+      cancelButtonText: i18n('base.close').d('关闭'),
+      onHide: () => {state.closeSetting = null;},
+      render: () => {
+        return (
+          <div className={'auto-table-setting-wrapper'}>
+            <div className="auto-table-setting-nav">
+              {[null, ...settingConfigs, null].map((item, index) => (
+                <div key={index} className={classnames([
+                  'auto-table-setting-nav-item',
+                  {
+                    'auto-table-setting-nav-item-active': !!item && item.key === state.activeKey,
+                    'auto-table-setting-nav-item-prev': !!settingConfigs[index] && settingConfigs[index].key === state.activeKey,
+                    'auto-table-setting-nav-item-next': !!settingConfigs[index - 2] && settingConfigs[index - 2].key === state.activeKey,
+                  }
+                ])} onClick={async () => {
+                  if (!item) {return;}
+                  !!item.beforeOpen && (await item.beforeOpen());
+                  state.activeKey = item.key;
+                }}>
+                  <div className="auto-table-setting-nav-item-inner">
+                    {item?.title}
+                  </div>
+                </div>
+              ))}
+            </div>
+            <div className="auto-table-setting-body">
+              <Scroll>
+                <div className="auto-table-setting-body-inner">
+                  {(() => {
+                    const r = settingConfigs.find(i => i.key === state.activeKey);
+                    if (!r) {return null;}
+                    const content = !!r.render && r.render();
+                    return (
+                      <div className={classnames(['auto-table-setting-content', { 'auto-table-setting-content-pending': !!r && r.contentPending !== false }])}>
+                        {content}
+                      </div>
+                    );
+                  })()}
+                </div>
+              </Scroll>
+            </div>
+          </div>
+        );
+      },
+    });
+
+    return closeSetting;
+  };
+
+  const closeSetting = () => state.closeSetting?.();
+
+  return { openSetting, closeSetting, useTableOptionSettingInner };
+});

package/src/packages/components/AutoTable/setting/useTableOption.setting.utils.ts

@@ -0,0 +1,40 @@
+import {RenderNode} from "plain-design-composition";
+import {createEnum} from "plain-utils/utils/createEnum";
+
+/**
+ * 在自定义面板中注册一个面板的参数类型
+ * @author  韦胜健
+ * @date    2023.1.3 21:31
+ */
+export interface iTableOptionSettingConfig {
+  key: typeof eTableOptionSettingView.TYPE,
+  title: string,
+  seq: number,
+  render: () => RenderNode,
+  beforeOpen?: () => void | Promise<void>,
+  contentPending?: boolean,
+}
+
+/**
+ * 注册面板函数类型
+ * @author  韦胜健
+ * @date    2023.1.3 21:31
+ */
+export interface iTableOptionSettingInnerUser {
+  (config: iTableOptionSettingConfig): { isOpen: () => boolean };
+}
+
+/**
+ * 面板的类型
+ * @author  韦胜健
+ * @date    2023.1.3 21:31
+ */
+export const eTableOptionSettingView = createEnum([
+  'seniorFilter',
+  'allFilter',
+  'sort',
+  'config',
+  'cache',
+  'import',
+  'export',
+] as const);