plain-design 0.0.97 → 1.0.0-beta.2

package/src/packages/components/AutoTable/filter/useTableOption.filter.search.tsx

@@ -0,0 +1,168 @@
+import {eAutoTableFilterMode} from "./useTableOption.filter.state";
+import {FilterFormSingle, iFilterFormSingleData} from "../../FilterFormSingle";
+import {computed, reactive, useRefs} from "plain-design-composition";
+import {deepcopy} from "plain-utils/object/deepcopy";
+import {$message} from "../../$message";
+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 {
+      filterSearch: ReturnType<typeof useTableOptionFilterSearch>;
+    }
+  }
+}
+export const useTableOptionFilterSearch = AutoModule.createRegistration((
+  {
+    hooks,
+    methods,
+    filterState,
+    config,
+  }
+) => {
+
+  const { refs, onRef } = useRefs({ filter: FilterFormSingle });
+
+  /**
+   * 绑定的筛选参数
+   * @author  韦胜健
+   * @date    2023.1.8 19:05
+   */
+  const state = reactive({
+    data: undefined as undefined | iFilterFormSingleData,
+  });
+
+  /**
+   * 搜索的字段信息
+   * @author  韦胜健
+   * @date    2023.1.8 19:06
+   */
+  const filterOptions = filterState.createComputedFilterOptions(eAutoTableFilterMode.filterSearch);
+
+  const handler = {
+    /**
+     * 当外部的搜索时
+     * 只所以直接调用reload，而不采取这里获取值的原因是因为，可能点击其他的查询按钮触发的reload，此时一样要获取最新的查询参数
+     * 取搜索值的时候固定取外部的filter form single的值
+     * @author  韦胜健
+     * @date    2023.1.8 19:06
+     */
+    onNormalSearch: () => {
+      methods.pageMethods.reload();
+    },
+    /**
+     * 当设置面板中的搜索栏值变化时取出来变化的值，更新到外部的filter form single组件实例中
+     * @author  韦胜健
+     * @date    2023.1.8 19:07
+     */
+    onSettingSearch: (val: iFilterFormSingleData) => {
+      refs.filter?.update(val);
+      methods.pageMethods.reload();
+    },
+  };
+
+  const filterSearch = { refs, onRef, filterOptions, handler, state, };
+
+  if (config.hideFilterSearch) {return filterSearch;}
+
+  /**
+   * 申请缓存
+   * @author  韦胜健
+   * @date    2023.1.8 19:08
+   */
+  filterState.useState<iFilterFormSingleData>({
+    seq: 1,
+    key: 'search-filter',
+    title: i18n('table.searchBar').d('搜索栏'),
+    getActiveFilterCount: () => {
+      const length = state.data?.filterQueryParam.queries?.length;
+      return length == null ? 0 : length;
+    },
+    applyCache({ cacheData }) {
+      state.data = cacheData;
+      refs.filter?.update(cacheData);
+    },
+    getCache: () => {
+      return state.data;
+    },
+    getDisplay: () => {
+      return () => (
+        !!filterOptions.value && (
+          <FilterFormSingle
+            filterOptions={filterOptions.value}
+            initialState={state.data}
+            onSearch={handler.onSettingSearch}
+            width="100%"
+          />
+        )
+      );
+    },
+    clear: () => {
+      if (!state.data) {return;}
+      state.data = undefined;
+      refs.filter?.update(undefined);
+    },
+  });
+
+  /**
+   * 获取查询参数时返回当前绑定的参数
+   * @author  韦胜健
+   * @date    2023.1.8 19:09
+   */
+  hooks.onQueryParam.use(async () => {
+    /*每次查询之前获取组件实例中最新的筛选参数*/
+    !!refs.filter && (state.data = deepcopy(await refs.filter!.getData()));
+
+    if (!!state.data && state.data.filterQueryParam && Object.keys(state.data.filterQueryParam).length > 0) {
+      return state.data.filterQueryParam;
+    }
+  });
+
+  /**
+   * 渲染左侧操作栏时渲染搜索表单
+   * @author  韦胜健
+   * @date    2023.1.8 19:09
+   */
+  hooks.onRenderLeftOperation.use({
+    processor: ({ list, render }) => {list.push({ seq: 0, key: 'search', render, });},
+    render: () => (
+      !!filterOptions.value && filterOptions.value.length > 0 && (
+        <FilterFormSingle
+          ref={onRef.filter}
+          {...{
+            filterOptions: filterOptions.value,
+            initialState: state.data,
+            onSearch: handler.onNormalSearch,
+            ...config.searchAttrs,
+          }}
+        />
+      )
+    )
+  });
+
+  const tips = computed((): TableOptionSpace.iTableOptionTipMeta | void | null => {
+    const data = state.data;
+    if (!data || !data.filterQueryParam.queries?.length || !filterOptions.value) {return;}
+    let filterOption = filterOptions.value.find(i => i.field === data.field);
+    if (!filterOption) {return;}
+    filterOption = { ...filterOption, filterHandler: data.filterHandler };
+    return TableOptionUtils.createTableOptionTipMeta({
+      filterOption,
+      formData: data.formData,
+      onClick: () => {$message(i18n('table.pleaseEditSearchParam').d('请直接编辑搜索栏筛选参数'));},
+      onClear: () => {
+        data.filterQueryParam = {};
+        refs.filter?.update({ ...data, });
+        methods.pageMethods.reload();
+      },
+    });
+  });
+
+  hooks.onTips.use((list) => {!!tips.value && list.push(tips.value);});
+
+  return filterSearch;
+});

package/src/packages/components/AutoTable/filter/useTableOption.filter.state.ts

@@ -0,0 +1,194 @@
+import {iTableOptionApplyCacheParam, iTableOptionGetCacheParam} from "../use/useTableOption.cache.utils";
+import {computed, reactive, RenderNode} from "plain-design-composition";
+import {tPlc} from "../../Table/plc/utils/plc.utils";
+import {createFilterOptions, iFilterOption} from "../../FilterService/utils/filter.service.utils";
+import {createEnum} from "plain-utils/utils/createEnum";
+import '../utils/TableOption.space';
+import {AutoModule} from "../utils/AutoModule";
+
+declare module '../utils/TableOption.space' {
+  namespace TableOptionSpace {
+    interface iTableOption {
+      filterState: ReturnType<typeof useTableOptionFilterState>;
+    }
+  }
+}
+
+/**
+ * 全局管理所有的筛选功能的内部状态
+ * @author  韦胜健
+ * @date    2023.1.3 21:28
+ */
+export const useTableOptionFilterState = AutoModule.createRegistration(({ hooks, methods, cache }) => {
+
+  const state = reactive({
+    getSourceFlatPlcList: null as null | (() => tPlc[]),
+    filters: [] as iFilterStateInitialization<any>[],                           // 已经注册的筛选类型
+    activeCount: 0,                                                             // 已经应用了查询的有效的筛选条件个数
+  });
+
+  /**
+   * 注册表明当前filter state模块需要缓存
+   * @author  韦胜健
+   * @date    2023.1.3 21:28
+   */
+  cache.registry<Record<string, any>>({
+    cacheKey: 'filter-state',
+    applyCache: ({ sourceList, plcList, cacheData }) => {
+      cacheData = cacheData || {};
+      state.filters.forEach(filter => {
+        filter.applyCache({
+          plcList,
+          sourceList,
+          cacheData: !cacheData ? undefined : cacheData[filter.key],
+        });
+      });
+    },
+    getCache: (param) => {
+      return state.filters.reduce((prev, item) => {
+        prev[item.key] = item.getCache(param);
+        return prev;
+      }, {} as Record<string, any>);
+    },
+  });
+
+  /**
+   * 每次查询的时候，统计有效的筛选数量
+   * @author  韦胜健
+   * @date    2023.1.3 21:28
+   */
+  hooks.onBeforeLoad.use(() => {
+    state.activeCount = state.filters.reduce((prev, i) => prev + i.getActiveFilterCount(), 0);
+  });
+
+  /**
+   * 收集列信息
+   * @author  韦胜健
+   * @date    2023.1.6 22:51
+   */
+  hooks.onCollectPlcData.use((plcData) => {state.getSourceFlatPlcList = () => plcData.sourceFlatPlcList;});
+
+  /**
+   * 注册一个筛选类型，并且返回初始筛选状态
+   * @author  韦胜健
+   * @date    2023.1.3 21:29
+   */
+  function useState<CacheData = any>(initialization: iFilterStateInitialization<CacheData>): void {
+    const data = reactive(initialization);
+    state.filters = [data, ...state.filters].sort((a, b) => a.seq - b.seq);
+    return data as any;
+  }
+
+  /**
+   * 清空所有筛选
+   * @author  韦胜健
+   * @date    2023.1.3 21:29
+   */
+  const clearAll = (reload?: boolean) => {
+    state.filters.forEach(i => i.clear());
+    reload !== false && methods.pageMethods.reload();
+  };
+
+  /**
+   * 清空某个筛选类型的筛选条件
+   * @author  韦胜健
+   * @date    2023.1.3 21:30
+   */
+  const clearFilter = (filter: iFilterStateInitialization<any>) => {
+    filter.clear();
+    methods.pageMethods.reload();
+  };
+
+  const sourceFlatPlcList = computed(() => state.getSourceFlatPlcList?.().filter(i => (!!i.props.searchField || !!i.props.field) && !i.props.noFilter));
+
+  const createComputedFilterOptions = (filterMode: typeof eAutoTableFilterMode.TYPE) => {
+    return computed(() => sourceFlatPlcList.value?.map((
+      {
+        props: {
+          title,
+          field,
+          searchField,
+          filterType,
+          filterHandler,
+          filterConfig,
+          defaultSearch,
+          defaultSearchValue,
+          createSearchFilterOption,
+          createFormFilterOption,
+          createColumnFilterOption,
+          createDistinctFilterOption,
+          createSeniorFilterOption,
+        }
+      }
+    ) => {
+      let option: iFilterOption = createFilterOptions({
+        label: title || '',
+        field: searchField || field!,
+        filterType,
+        filterHandler,
+        filterConfig,
+        defaultSearch,
+        defaultValue: defaultSearchValue,
+      });
+      if (!!createSearchFilterOption && filterMode === eAutoTableFilterMode.filterSearch) {
+        option = {
+          ...option,
+          ...createSearchFilterOption(),
+        };
+      }
+      if (!!createFormFilterOption && filterMode === eAutoTableFilterMode.filterForm) {
+        option = {
+          ...option,
+          ...createFormFilterOption(),
+        };
+      }
+      if (!!createColumnFilterOption && filterMode === eAutoTableFilterMode.filterColumn) {
+        option = {
+          ...option,
+          ...createColumnFilterOption(),
+        };
+      }
+      if (!!createDistinctFilterOption && filterMode === eAutoTableFilterMode.filterDistinct) {
+        option = {
+          ...option,
+          ...createDistinctFilterOption(),
+        };
+      }
+      if (!!createSeniorFilterOption && filterMode === eAutoTableFilterMode.filterSenior) {
+        option = {
+          ...option,
+          ...createSeniorFilterOption(),
+        };
+      }
+      return option;
+    }));
+  };
+
+  return { useState, state, clearAll, clearFilter, createComputedFilterOptions };
+});
+
+export type iTableOptionFilterState = ReturnType<typeof useTableOptionFilterState>
+
+export interface iFilterStateInitialization<CacheData> {
+  seq: number,                                                                    // 在filter all中的显示顺序
+  key: string,                                                                    // 每个筛选类型自己的唯一标识
+  title: string,                                                                  // 在filter all中的显示标题
+  applyCache: (param: iTableOptionApplyCacheParam<CacheData>) => void,            // 应用缓存
+  getCache: (param: iTableOptionGetCacheParam) => any,                            // 获取缓存
+  getActiveFilterCount: () => number,                                             // 显示当前有多少激活的筛选条件
+  getDisplay: () => (() => RenderNode),                                            // 在【所有筛选】面板中展示
+  clear: () => void,                                                              // 清空筛选条件
+}
+
+/**
+ * 筛选的功能类型
+ * @author  韦胜健
+ * @date    2023.1.11 21:27
+ */
+export const eAutoTableFilterMode = createEnum([
+  'filterSearch',   // 搜索栏
+  'filterForm',     // 表单搜索
+  'filterColumn',   // 列搜索
+  'filterDistinct', // 列去重查询
+  'filterSenior'    // 高级查询
+] as const);

package/src/packages/components/AutoTable/index.tsx

@@ -0,0 +1,4 @@
+import {AutoTable} from "./AutoTable";
+
+export default AutoTable;
+export {AutoTable};

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

@@ -0,0 +1,79 @@
+import {iFilterStateInitialization} from "../filter/useTableOption.filter.state";
+import {reactive, RenderNode} from "plain-design-composition";
+import {eTableOptionSettingView} from "./useTableOption.setting.utils";
+import {Empty} from "../../Empty";
+import {Button} from "../../Button";
+import '../utils/TableOption.space';
+import i18n from "../../i18n";
+import {AutoModule} from "../utils/AutoModule";
+
+declare module '../utils/TableOption.space' {
+  namespace TableOptionSpace {
+    interface iTableOption {
+      settingAllFilter: ReturnType<typeof useTableOptionSettingAllFilter>;
+    }
+  }
+}
+
+export const useTableOptionSettingAllFilter = AutoModule.createRegistration((
+  {
+    setting,
+    filterState,
+  }
+) => {
+
+  const state = reactive({
+    renderFilters: [] as { filter: iFilterStateInitialization<any>, display: () => RenderNode }[],
+  });
+
+  const removeAll = () => {
+    state.renderFilters = [];
+    filterState.clearAll();
+  };
+
+  const removeFilter = (filter: iFilterStateInitialization<any>) => {
+    state.renderFilters.splice(state.renderFilters.findIndex(i => i.filter === filter), 1);
+    filterState.clearFilter(filter);
+  };
+
+  setting.useTableOptionSettingInner({
+    key: eTableOptionSettingView.allFilter,
+    title: i18n('table.allFilter').d('所有筛选'),
+    seq: 0.9,
+    contentPending: false,
+    beforeOpen: () => {
+      state.renderFilters = filterState.state.filters.filter(i => i.getActiveFilterCount() > 0).map(filter => ({
+        filter,
+        display: filter.getDisplay(),
+      }));
+    },
+    render: () => (
+      <div className="auto-table-setting-all-filter">
+        {state.renderFilters.length === 0 && (
+          <div className="auto-table-setting-all-filter-empty">
+            <Empty label={i18n('table.noFilter').d('暂无筛选')}/>
+          </div>
+        )}
+        {state.renderFilters.length > 0 && (
+          <div>
+            <Button label={i18n('table.clearAll').d('全部清空')} icon="pi-delete" status="error" onClick={removeAll}/>
+          </div>
+        )}
+        {state.renderFilters.map(({ filter, display }, index) => {
+          return (
+            <div key={index} className="auto-table-setting-all-filter-item">
+              <div className="auto-table-setting-all-filter-item-head">
+                <span>{filter.title}</span>
+                <Button icon="pi-close-circle" label={i18n('base.edit.remove').d('删除')} status="error" onClick={() => removeFilter(filter)} mode="text"/>
+              </div>
+              <div className="auto-table-setting-all-filter-item-body">
+                {display()}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    )
+  });
+
+});

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

@@ -0,0 +1,145 @@
+import {reactive} from "plain-design-composition";
+import {iTableOptionCacheData, iTableOptionCacheItemData} from "../use/useTableOption.cache.utils";
+import {defer} from "plain-utils/utils/defer";
+import {$message} from "../../$message";
+import {$dialog} from "../../$dialog";
+import {deepcopy} from "plain-utils/object/deepcopy";
+import {eTableOptionSettingView} from "./useTableOption.setting.utils";
+import {Button} from "../../Button";
+import {Tooltip} from "../../Tooltip";
+import {Table} from "../../Table";
+import {Plc} from "../../Plc";
+import {Radio} from "../../Radio";
+import {iTableInnerOperationConfig} from "../../Table/standard/PlcOperation/PlcOperation.utils";
+import {PlcOperation} from "../../Table/standard/PlcOperation/PlcOperation";
+import {PlcIndex} from "../../Table/standard/PlcIndex";
+import {PlcTextarea} from "../../Table/editor/PlcTextarea";
+import '../utils/TableOption.space';
+import i18n from "../../i18n";
+import {AutoModule} from "../utils/AutoModule";
+
+declare module '../utils/TableOption.space' {
+  namespace TableOptionSpace {
+    interface iTableOption {
+      settingCache: ReturnType<typeof useTableOptionSettingCache>;
+    }
+  }
+}
+
+export const useTableOptionSettingCache = AutoModule.createRegistration((
+  {
+    setting,
+    cache,
+    config,
+  }
+) => {
+
+  const state = reactive({
+    editCacheData: {} as iTableOptionCacheData
+  });
+
+  const getConfigName = (initialName?: string) => {
+    const dfd = defer<string>();
+    $dialog({
+      editType: 'input',
+      status: null,
+      editValue: initialName,
+      title: i18n('table.pleaseInputThConfigurationName').d('请输入配置名称'),
+      confirmButton: true,
+      cancelButton: true,
+      size: config.size,
+      handleConfirm: async ({ editValue }) => {
+        if (editValue == null || String(editValue).trim().length === 0) {
+          $message(i18n('table.pleaseEnterNewConfigName').d('请输入新配置名称'));
+          return Promise.reject('invalid value!');
+        } else {
+          dfd.resolve(String(editValue));
+        }
+      },
+    });
+    return dfd.promise;
+  };
+
+  const newCache = async () => {
+    const cacheName = await getConfigName();
+    cache.createCache(cacheName);
+    state.editCacheData = deepcopy(cache.state.cacheData);
+  };
+
+  const renameCache = async (cacheItemData: iTableOptionCacheItemData) => {
+    const newCacheName = await getConfigName(cacheItemData.title);
+    cache.renameCache(cacheItemData.id, newCacheName);
+    state.editCacheData = deepcopy(cache.state.cacheData);
+  };
+
+  const deleteCache = async (cacheItemData: iTableOptionCacheItemData) => {
+    cache.deleteCache(cacheItemData.id);
+    state.editCacheData = deepcopy(cache.state.cacheData);
+  };
+
+  const copyConfig = async (cacheItemData: iTableOptionCacheItemData) => {
+    cache.copyCache(cacheItemData.id, await getConfigName(cacheItemData.title + '.' + i18n('table.bak').d('副本')));
+    state.editCacheData = deepcopy(cache.state.cacheData);
+  };
+
+  const overrideCache = async (cacheItemData: iTableOptionCacheItemData) => {
+    await $dialog.confirm({ message: i18n('table.areYouSureToOverrideTheConfiguration', { title: cacheItemData.title }).d('确定要覆盖配置"{title}"为当前最新的配置吗？') }, { size: config.size });
+    cache.overrideCache(cacheItemData.id);
+    state.editCacheData = deepcopy(cache.state.cacheData);
+  };
+
+  const applyCache = async (cacheItemData?: iTableOptionCacheItemData) => {
+    cache.applyCache(cacheItemData?.id);
+    state.editCacheData = deepcopy(cache.state.cacheData);
+  };
+
+  const innerOperationConfigs: iTableInnerOperationConfig[] = [
+    { label: i18n('base.edit.apply').d('应用'), position: 'inner', handler: ({ row }) => {applyCache(row as any);} },
+    { label: i18n('base.edit.rename').d('重命名'), position: 'inner', handler: ({ row }) => {renameCache(row as any);} },
+    { label: i18n('base.edit.remove').d('删除'), position: 'inner', handler: ({ row }) => {deleteCache(row as any);} },
+    { label: i18n('base.edit.override').d('覆盖'), position: 'inner', handler: ({ row }) => {overrideCache(row as any);} },
+    { label: i18n('base.edit.copy').d('复制'), position: 'inner', handler: ({ row }) => {copyConfig(row as any);} },
+  ];
+
+  setting.useTableOptionSettingInner({
+    key: eTableOptionSettingView.cache,
+    title: i18n('table.cacheSetting').d('缓存设置'),
+    seq: 4,
+    beforeOpen: () => {
+      state.editCacheData = deepcopy(cache.state.cacheData);
+    },
+    render: () => {
+      return (
+        <div className="auto-table-setting-cache">
+          <div className="auto-table-setting-cache-operation">
+            <Tooltip message={i18n('table.clearFilterSortAndConfiguration').d("不使用任何筛选、排序以及个性配置，相当于恢复原始状态")}>
+              <Button label={i18n('table.withoutAnyConfiguration').d('不使用任何缓存配置')} icon="pi-drive-file" style={{ marginLeft: '8px' }} onClick={() => applyCache()}/>
+            </Tooltip>
+            <Button label={i18n('table.saveToNewConfiguration').d('保存当前状态为新的缓存配置')} icon="pi-save" onClick={newCache} mode="fill"/>
+          </div>
+          <Table
+            key="cache"
+            data={state.editCacheData.data}
+            size="small"
+          >
+            <PlcIndex/>
+            <Plc
+              align="center"
+              title={i18n('base.main').d('主要')}
+              width={50}
+              noPadding
+              order={-9999}
+              v-slots={{
+                normal: ({ row }) => {
+                  return <Radio modelValue={row.id === state.editCacheData.activeId} customReadonly onClick={() => applyCache(row as any)}/>;
+                }
+              }}/>
+            <PlcTextarea title={i18n('table.cacheName').d('缓存名称')} field="title" fit width={120}/>
+            <Plc title={i18n('table.createTime').d('创建时间')} field="time" width={180}/>
+            <PlcOperation operations={innerOperationConfigs}/>
+          </Table>
+        </div>
+      );
+    },
+  });
+});