plain-design 1.0.0-beta.133 → 1.0.0-beta.135

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

@@ -86,7 +86,8 @@ export const useTableOptionFilterState = AutoModule.createRegistration(({ hooks,
    */
   const clearAll = async (reload?: boolean) => {
     await hooks.onClearFilter.exec(undefined);
-    state.filters.forEach(i => i.clear());
+    /*等待所有filtersClear之后自动reload*/
+    await Promise.all(state.filters.map(i => i.clear()));
     reload !== false && await methods.pageMethods.reload();
   };
 
@@ -177,8 +178,8 @@ export interface iFilterStateInitialization<CacheData> {
   applyCache: (param: iTableOptionApplyCacheParam<CacheData>) => void,            // 应用缓存
   getCache: (param: iTableOptionGetCacheParam) => any,                            // 获取缓存
   getActiveFilterCount: () => number,                                             // 显示当前有多少激活的筛选条件
-  getDisplay: () => (() => RenderNode),                                            // 在【所有筛选】面板中展示
-  clear: () => void,                                                              // 清空筛选条件
+  getDisplay: () => (() => RenderNode),                                           // 在【所有筛选】面板中展示
+  clear: () => void | Promise<void>,                                              // 清空筛选条件
 }
 
 /**

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

@@ -17,6 +17,8 @@ import {SelectOption} from "../../SelectOption";
 import '../utils/TableOption.space';
 import i18n from "../../i18n";
 import {AutoModule} from "../utils/AutoModule";
+import {insertSort} from "@peryl/utils/insertSort";
+import {iPlcConfigData, iPlcCustomData} from "../utils/AutoTable.utils";
 
 declare module '../utils/TableOption.space' {
   namespace TableOptionSpace {
@@ -47,6 +49,7 @@ export const useTableOptionSettingConfig = AutoModule.createRegistration((
       const sourceFlatPlcList = (await methods.getSourceFlatPlcList()).filter(i => !!i.props.field);
       state.getSourceFlatPlcList = () => sourceFlatPlcList;
       state.data = sourceFlatPlcList.map((plc, index): iPlcConfigData => ({
+        field: plc.props.field || "",
         title: plc.props.title,
         order: index,
         align: plc.props.align || 'left',
@@ -114,8 +117,59 @@ export const useTableOptionSettingConfig = AutoModule.createRegistration((
 
   const handler = {
     apply: () => {
-      const hasOrderChange = state.data.some((i, idx) => i.order !== idx);
-      state.data.forEach((item, index) => {
+      handler.updateItemPlc({ plcConfigData: state.data });
+    },
+    updateItemPlc: async (data: {
+      /*自定义的配置数据，可以仅配置部分字段*/
+      customData?: iPlcCustomData[],
+      /*如果配置的数据有调整字段的顺序，那么会按照customData来对字段进行排序*/
+      customSort?: boolean,
+
+      /*按照个性配置面板中的数据对字段进行配置*/
+      plcConfigData?: iPlcConfigData[],
+    }) => {
+      if (!state.data.length) {
+        await utils.resetData();
+      }
+      /*
+      * 如果传递了plcConfigData，则使用这个数据来更新配置；
+      * 否则如果传递了自定义数据customData，则用customData来生成plcConfigData
+      */
+      const plcConfigData: iPlcConfigData[] = data.plcConfigData || (() => {
+        if (!data.customData) {return [];}
+        const field2custom = data.customData.reduce((prev, item) => {
+          prev[item.field] = item;
+          return prev;
+        }, {} as Record<string, undefined | iPlcCustomData>);
+        return state.data.map((stateDataItem): iPlcConfigData => {
+          const customItemData: iPlcCustomData | undefined = !stateDataItem.field ? undefined : field2custom[stateDataItem.field];
+          if (!customItemData) {
+            return stateDataItem;
+          } else {
+            return {
+              ...stateDataItem,
+              ...customItemData,
+            };
+          }
+        });
+      })();
+
+      console.log({ customData: data.customData, plcConfigData });
+
+      if (!!data.customSort && !!data.customData) {
+        const field2customIndex = data.customData.reduce((prev, item, index) => {
+          prev[item.field] = index;
+          return prev;
+        }, {} as Record<string, undefined | number>);
+        insertSort(plcConfigData, (a, b) => {
+          const aIndex = field2customIndex[a.field] || 0;
+          const bIndex = field2customIndex[b.field] || 0;
+          return aIndex > bIndex;
+        });
+      }
+
+      const hasOrderChange = plcConfigData.some((i, idx) => i.order !== idx);
+      plcConfigData.forEach((item, index) => {
         const plcState = item.plcRef().getState();
         const plcProps = item.plcRef().props;
         if (hasOrderChange) {plcState.order = index;}
@@ -197,22 +251,10 @@ export const useTableOptionSettingConfig = AutoModule.createRegistration((
     )
   });
 
-  return {};
+  return { methods: handler };
 });
 
 
-interface iPlcConfigData {
-  title?: string,
-  order: number,
-  align: string,
-  width: number,
-  fixed: string,
-  hide?: boolean,
-
-  plcRef: () => tPlc,
-  key: string,
-}
-
 interface iPlcConfigCacheData {
   [k: string]: Partial<Omit<iPlcConfigData, 'plcRef'>>;
 }

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

@@ -21,6 +21,7 @@ import {getPlcDisplayValue} from "../../Table/plc/utils/plc.utils";
 import '../utils/TableOption.space';
 import i18n from "../../i18n";
 import {AutoModule} from "../utils/AutoModule";
+import $file from "../../$file";
 
 declare module '../utils/TableOption.space' {
   namespace TableOptionSpace {
@@ -102,33 +103,7 @@ export const useTableOptionSettingExport = AutoModule.createRegistration((
         }));
       }
 
-      // 导出excel
-      const [ExcelJs, FileSaver] = await Promise.all([
-        $configuration.get('getExcelJS')?.(),
-        $configuration.get('getFileSaver')?.()
-      ]);
-      if (!ExcelJs) {
-        throw new Error('请在$configuration中提供exceljs依赖');
-      }
-      if (!FileSaver) {
-        throw new Error('请在$configuration中提供filesaver依赖');
-      }
-      const workbook = new ExcelJs.Workbook();
-      const worksheet = workbook.addWorksheet('sheet');
-      worksheet.columns = [
-        { header: 'Id', key: 'id', width: 10 },
-        { header: 'Name', key: 'name', width: 32 },
-        { header: 'D.O.B.', key: 'DOB', width: 10, outlineLevel: 1 }
-      ];
-      worksheet.columns = exportPlcData.map(({ title, field }) => ({ header: title, key: field }));
-      exportData.forEach(data => {
-        worksheet.addRow(data);
-      });
-      const buffer = await workbook.xlsx.writeBuffer();
-      FileSaver.saveAs(
-        new Blob([buffer], { type: 'application/vnd.ms-excel' }),
-        `${plainDate.today('', 'YYYY-MM-DD').getValue()}.xlsx`
-      );
+      await $file.export2file({ exportData, columns: exportPlcData.map(({ title, field }) => ({ header: title, key: field })) });
     };
 
     const exportPage: ExportOption = {

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

@@ -41,6 +41,7 @@ export const useTableOptionSettingSeniorFilter = AutoModule.createRegistration((
   const filterOptions = filterState.createComputedFilterOptions(eAutoTableFilterMode.filterSenior);
 
   const utils = {
+    /*按照F_1, F_2, F_3...的规则生成ID*/
     nextId: (() => {
       const maxCount = computed(() => {
         const max = edit.state.metas.reduce((prev, item) => {
@@ -52,18 +53,24 @@ export const useTableOptionSettingSeniorFilter = AutoModule.createRegistration((
       });
       return () => `F_${maxCount.value + 1}`;
     })(),
+    /*重置查询表达式*/
     resetOperator: () => {
-      edit.state.expression = edit.defaultExpression.value;
+      edit.state.expression = edit.getDefaultExpression();
     },
+    /*创建初始状态变量*/
     createState: () => {
       const state: iTableOptionSeniorData = reactive({
+        /*iTableOptionSeniorFilterMeta*/
         metas: [],
+        /*查询表达式*/
         expression: null,
-        isCustomExpression: false,
+        /*当前是否开启自定义表达式*/
+        isCustomExpression: true,
       });
-      const defaultExpression = computed(() => state.metas.map(i => i.id).join(` ${DEFAULT_EXPRESSION_JOIN} `));
+      /*默认的查询表达式*/
+      const getDefaultExpression = (): string => state.metas.map(i => i.id).join(` ${DEFAULT_EXPRESSION_JOIN} `);
       return {
-        state, defaultExpression,
+        state, getDefaultExpression,
       };
     },
   };
@@ -74,26 +81,28 @@ export const useTableOptionSettingSeniorFilter = AutoModule.createRegistration((
    * @date    2021/7/22 21:05
    */
   const query = (() => {
-    const { state, defaultExpression } = utils.createState();
+    const { state, getDefaultExpression } = utils.createState();
 
-    const apply = async () => {
+    const apply = async (autoReload: boolean) => {
       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.$it('table.pleaseEnterCompleteParamsForCondition').d(`第${invalidIndex + 1}个条件请输入完整参数！`));
+        $message.error(i18n.$it('table.pleaseEnterCompleteParamsForCondition', { invalidIndex: invalidIndex + 1 }).d(`第${invalidIndex + 1}个条件请输入完整参数！`));
         return;
       }
       state.metas = metas;
       state.expression = edit.state.expression;
       state.isCustomExpression = edit.state.isCustomExpression;
-      await methods.pageMethods.reload();
+
+      if (autoReload) {await methods.pageMethods.reload();}
     };
 
     return {
       state,
-      defaultExpression,
+      getDefaultExpression,
       apply,
     };
   })();
@@ -111,10 +120,8 @@ export const useTableOptionSettingSeniorFilter = AutoModule.createRegistration((
      * @author  韦胜健
      * @date    2023.1.15 22:11
      */
-    const { state, defaultExpression } = {
-      state: reactive(deepcopy(query.state)),
-      defaultExpression: query.defaultExpression,
-    };
+    const { state, getDefaultExpression } = utils.createState();
+    Object.assign(state, query.state);
 
     const add = () => {
       const id = utils.nextId();
@@ -127,20 +134,20 @@ export const useTableOptionSettingSeniorFilter = AutoModule.createRegistration((
     };
 
     const remove = (index: number) => {
-      const isMatchDefaultOperator = !!state.expression && state.expression.trim() === defaultExpression.value;
+      const isMatchDefaultOperator = !!state.expression && state.expression.trim() === getDefaultExpression();
       state.metas.splice(index, 1);
-      if (isMatchDefaultOperator) {state.expression = defaultExpression.value;}
+      if (isMatchDefaultOperator) {state.expression = getDefaultExpression();}
     };
 
-    const clear = () => {
-      state.metas = [];
-      state.expression = null;
-      query.apply();
+    const clear = async (autoReload: boolean) => {
+      Object.assign(state, utils.createState().state);
+      await query.apply(autoReload);
     };
 
     return {
       state,
-      defaultExpression,
+      getDefaultExpression,
+
       add,
       remove,
       clear,
@@ -185,14 +192,18 @@ export const useTableOptionSettingSeniorFilter = AutoModule.createRegistration((
     },
     render: () => {
       refList.splice(0, refList.length);
+
+      const apply = () => query.apply(true);
+      const clear = () => edit.clear(true);
+
       return (
         <div className="auto-table-setting-senior-filter">
           <div className="auto-table-setting-senior-filter-button">
             <div>
-              <Button label={i18n.$it('base.edit.apply').d('应用')} onClick={query.apply} mode="fill" icon="pi-find-replace"/>
+              <Button label={i18n.$it('base.edit.apply').d('应用')} onClick={apply} mode="fill" icon="pi-find-replace"/>
               <Button label={i18n.$it('base.edit.add').d('添加')} onClick={edit.add} icon="pi-plus"/>
             </div>
-            <Button label={i18n.$it('base.clear').d('清空')} icon="pi-delete" status="error" onClick={edit.clear}/>
+            <Button label={i18n.$it('base.clear').d('清空')} icon="pi-delete" status="error" onClick={clear}/>
           </div>
           <div className="auto-table-setting-senior-filter-list">
             {edit.state.metas.length === 0 ? (
@@ -204,7 +215,7 @@ export const useTableOptionSettingSeniorFilter = AutoModule.createRegistration((
                     ref={onRefList(index)}
                     filterOptions={filterOptions.value}
                     initialState={meta.data}
-                    onSearch={query.apply}
+                    onSearch={apply}
                     width="calc(100% - 40px)"
                     hideSearchButton
                     v-slots={{
@@ -232,7 +243,7 @@ export const useTableOptionSettingSeniorFilter = AutoModule.createRegistration((
    * @date    2023.1.8 19:09
    */
   hooks.onQueryParam.use(async () => {
-    let expression = !query.state.isCustomExpression || !query.state.expression ? query.defaultExpression.value : query.state.expression;
+    let expression = !query.state.isCustomExpression || !query.state.expression ? query.getDefaultExpression() : query.state.expression;
     /*处理空格*/
     expression = expression.replace(/\s*(\|\||&&|或者|并且|or|and)\s*/gi, ' $1 ').replace(/\s+/, ' ');
     /*目标queries数组*/
@@ -285,88 +296,77 @@ export const useTableOptionSettingSeniorFilter = AutoModule.createRegistration((
         <Icon icon="pi-arrow-right"/>
       </Button>
     ),
-    clear: () => null,
+    clear: () => edit.clear(false),
     getActiveFilterCount: () => query.state.metas.length
   });
 
   const tips = computed((): TableOptionSpace.iTableOptionTipMeta[] => {
     const list: TableOptionSpace.iTableOptionTipMeta[] = [];
-    const { metas, expression, isCustomExpression } = query.state;
+    const { metas } = 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);},
+
+    let expression = !query.state.isCustomExpression || !query.state.expression ? query.getDefaultExpression() : query.state.expression;
+    /*处理空格*/
+    expression = expression.replace(/\s*(\|\||&&|或者|并且|or|and)\s*/gi, ' $1 ').replace(/\s+/, ' ');
+
+    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();
+        await edit.clear(true);
+      },
+      onClick: () => {setting.openSetting(eTableOptionSettingView.seniorFilter);},
+    });
+
     return list;
   });
 
   hooks.onTips.use(list => {
     !!tips.value.length && list.push(...tips.value);
   });
+
+  return {
+    query,
+    edit,
+  };
 });
 
 export type iTableOptionSeniorFilterMeta = {

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

@@ -57,15 +57,21 @@ export const useTableOptionSettingSeniorSort = AutoModule.createRegistration((
   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]);
+    apply: (autoReload: boolean) => {
+      sortState.useSenior([...state.data], autoReload);
     },
-    clear: () => {
-      state.data = [];
-      handler.apply();
+    update(sortData: iTableOptionSortMeta[], autoReload: boolean) {
+      state.data = sortData;
+      handler.apply(autoReload);
+    },
+    clear: (autoReload: boolean) => {
+      handler.update([], autoReload);
     },
   };
 
+  const applyAndReload = () => handler.apply(true);
+  const clearAndReload = () => handler.clear(true);
+
   setting.useTableOptionSettingInner({
     key: eTableOptionSettingView.sort,
     title: i18n.$it('table.seniorSort').d('高级排序'),
@@ -88,7 +94,7 @@ export const useTableOptionSettingSeniorSort = AutoModule.createRegistration((
         <div className="auto-table-setting-senior-sort" key="senior-sort">
           <div className="auto-table-setting-senior-sort-header">
             <div>
-              <Button label={i18n.$it('base.edit.apply').d("应用")} mode="fill" icon="pi-find-replace" onClick={handler.apply}/>
+              <Button label={i18n.$it('base.edit.apply').d("应用")} mode="fill" icon="pi-find-replace" onClick={applyAndReload}/>
               {!!availablePlcOptions.value.length && (
                 <Dropdown
                   v-slots={{
@@ -100,7 +106,7 @@ export const useTableOptionSettingSeniorSort = AutoModule.createRegistration((
                 />
               )}
             </div>
-            <Button label={i18n.$it('base.clear').d("清空")} icon="pi-delete" status="error" onClick={handler.clear}/>
+            <Button label={i18n.$it('base.clear').d("清空")} icon="pi-delete" status="error" onClick={clearAndReload}/>
           </div>
           <Table data={state.data} defaultEditable editSourceData>
             <PlcDraggier v-model={state.data}/>
@@ -113,4 +119,5 @@ export const useTableOptionSettingSeniorSort = AutoModule.createRegistration((
     },
   });
 
+  return { methods: handler };
 });