plain-design 1.0.0-beta.16 → 1.0.0-beta.161

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

@@ -1,8 +1,8 @@
-import {reactive} from "plain-design-composition";
+import {reactive} from "@peryl/react-compose";
 import {tPlc} from "../../Table/plc/utils/plc.utils";
 import {getPlcKey} from "../../Table/plc/use/usePlcPropsState";
 import {iTableOptionApplyCacheParam} from "../use/useTableOption.cache.utils";
-import {delay} from "plain-utils/utils/delay";
+import {delay} from "@peryl/utils/delay";
 import {eTableOptionSettingView} from "./useTableOption.setting.utils";
 import {Button} from "../../Button";
 import {Table} from "../../Table";
@@ -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;}
@@ -164,7 +218,7 @@ export const useTableOptionSettingConfig = AutoModule.createRegistration((
 
   setting.useTableOptionSettingInner({
     key: eTableOptionSettingView.config,
-    title: i18n('table.customSetting').d('个性设置'),
+    title: i18n.$it('table.customSetting').d('个性设置'),
     seq: 3,
     beforeOpen: () => {
       utils.resetData();
@@ -172,23 +226,23 @@ export const useTableOptionSettingConfig = AutoModule.createRegistration((
     render: () => (
       <div className="auto-table-setting-config">
         <div className="auto-table-setting-config-button">
-          <Button label={i18n('base.reset').d('重置')} onClick={handler.reset}/>
-          <Button label={i18n('base.edit.apply').d('应用')} mode="fill" onClick={handler.apply}/>
+          <Button label={i18n.$it('base.reset').d('重置')} onClick={handler.reset}/>
+          <Button label={i18n.$it('base.edit.apply').d('应用')} mode="fill" onClick={handler.apply}/>
         </div>
         <Table key="config" data={state.data} showRows={Math.max(5, state.data.length)} defaultEditable editSourceData>
           <PlcIndex/>
           <PlcDraggier v-model={state.data}/>
-          <PlcInput title={i18n('table.title').d('标题')} field="title"/>
-          <PlcSelect title={i18n('table.alignType').d('对齐方式')} field="align" width={100}>
-            <SelectOption label={i18n('table.alignLeft').d('左对齐')} val="left"/>
-            <SelectOption label={i18n('table.alignCenter').d('居中对齐')} val="center"/>
-            <SelectOption label={i18n('table.alignRight').d('右对齐')} val="right"/>
+          <PlcInput title={i18n.$it('table.title').d('标题')} field="title"/>
+          <PlcSelect title={i18n.$it('table.alignType').d('对齐方式')} field="align" width={100}>
+            <SelectOption label={i18n.$it('table.alignLeft').d('左对齐')} val="left"/>
+            <SelectOption label={i18n.$it('table.alignCenter').d('居中对齐')} val="center"/>
+            <SelectOption label={i18n.$it('table.alignRight').d('右对齐')} val="right"/>
           </PlcSelect>
-          <PlcNumber title={i18n('base.width').d('宽度')} field="width" width={130}/>
-          <Plc title={i18n('base.fixed').d('固定')} width={60} align="center" field="fixed" addEditPadding v-slots={{
+          <PlcNumber title={i18n.$it('base.width').d('宽度')} field="width" width={130}/>
+          <Plc title={i18n.$it('base.fixed').d('固定')} width={60} align="center" field="fixed" addEditPadding v-slots={{
             normal: ({ row }) => <Checkbox modelValue={row.fixed === 'left'} customReadonly onClick={() => (row.fixed = (row.fixed === 'left' ? undefined : 'left'), handler.onFixed(row as any))}/>
           }}/>
-          <Plc title={i18n('base.hide').d('隐藏')} width={60} align="center" field="hide" addEditPadding v-slots={{
+          <Plc title={i18n.$it('base.hide').d('隐藏')} width={60} align="center" field="hide" addEditPadding v-slots={{
             normal: ({ row }) => <Checkbox modelValue={row.hide === true} customReadonly onClick={() => (row.hide = (row.hide === true ? undefined : true))}/>
           }}/>
           <Plc title={' '} fit width={10}/>
@@ -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

@@ -1,9 +1,9 @@
-import {reactive, useRefs} from "plain-design-composition";
+import {reactive, useRefs} from "@peryl/react-compose";
 import {PlcCheck} from "../../Table/standard/PlcCheck/PlcCheck";
-import {deepcopy} from "plain-utils/object/deepcopy";
+import {deepcopy} from "@peryl/utils/deepcopy";
 import {$configuration} from "../../$configuration";
 import {plainDate} from "../../../utils/plainDate";
-import {delay} from "plain-utils/utils/delay";
+import {delay} from "@peryl/utils/delay";
 import {$message} from "../../$message";
 import {eTableOptionSettingView} from "./useTableOption.setting.utils";
 import {ArrowStepGroup} from "../../ArrowStepGroup";
@@ -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,39 +103,13 @@ 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 = {
       type: 'export-page',
-      title: i18n('table.exportCurrentPageData').d('导出当前页数据'),
-      desc: i18n('table.exportDataInTable').d('导出表格当前显示的数据'),
+      title: i18n.$it('table.exportCurrentPageData').d('导出当前页数据'),
+      desc: i18n.$it('table.exportDataInTable').d('导出表格当前显示的数据'),
       handler: async (exportPlcData) => {
         await save(tableState.list, exportPlcData);
       }
@@ -142,8 +117,8 @@ export const useTableOptionSettingExport = AutoModule.createRegistration((
 
     const exportAll: ExportOption = {
       type: 'export-all',
-      title: '导出当前所有数据',
-      desc: i18n('table.exportAllDataWithFilterSortMaybeFailedWithLargeData').d('根据当前的筛选排序条件导出所有数据(数据量比较大的话可能会导出失败)'),
+      title: i18n.$it('table.exportCurrentAllData').d('导出当前所有数据'),
+      desc: i18n.$it('table.exportAllDataWithFilterSortMaybeFailedWithLargeData').d('根据当前的筛选排序条件导出所有数据(数据量比较大的话可能会导出失败)'),
       handler: async (exportPlcData) => {
         // if (!freezeState.loadDataConfig) {return;}
         // let { request, requestConfig } = freezeState.loadDataConfig!;
@@ -168,8 +143,8 @@ export const useTableOptionSettingExport = AutoModule.createRegistration((
 
     const exportSelected: ExportOption = {
       type: 'export-selected',
-      title: '选择需要导出的数据',
-      desc: i18n('table.selectDataToExport').d('自定义选择导出需要的数据'),
+      title: i18n.$it('table.selectDataToExport').d('选择需要导出的数据'),
+      desc: i18n.$it('table.customSelectDataToExport').d('自定义选择导出需要的数据'),
       handler: async (exportPlcData) => {
         setting.closeSetting();
         await delay(400);
@@ -184,14 +159,14 @@ export const useTableOptionSettingExport = AutoModule.createRegistration((
     switch (state.step) {
       case 0:
         if (!state.exportType) {
-          return $message.error(i18n('table.selectExportType').d('请选择导出方式'));
+          return $message.error(i18n.$it('table.selectExportType').d('请选择导出方式'));
         }
         state.step++;
         break;
       case 1:
         state.selectPlcList = (refs.check!.getSelected() as ExportPlcData[]).sort((a, b) => state.plcList.indexOf(a) - state.plcList.indexOf(b));
         if (state.selectPlcList.length === 0) {
-          return $message.error(i18n('table.exportFields').d('请选择导出的字段'));
+          return $message.error(i18n.$it('table.exportFields').d('请选择导出的字段'));
         }
         state.step++;
         const exportType = exportOptions.find(i => i.type === state.exportType)!;
@@ -226,7 +201,7 @@ export const useTableOptionSettingExport = AutoModule.createRegistration((
 
   setting.useTableOptionSettingInner({
     key: eTableOptionSettingView.export,
-    title: i18n('table.exportData').d('导出数据'),
+    title: i18n.$it('table.exportData').d('导出数据'),
     seq: 5,
     beforeOpen() {
       restart();
@@ -234,9 +209,9 @@ export const useTableOptionSettingExport = AutoModule.createRegistration((
     render: () => (
       <div className="auto-table-setting-export">
         <ArrowStepGroup style={{ marginBottom: '20px' }} current={state.step} currentStatus={state.stepStatus}>
-          <ArrowStep title={i18n('table.exportType').d('导出方式')}/>
-          <ArrowStep title={i18n('table.exportFields').d('导出字段')}/>
-          <ArrowStep title={i18n('table.exportData').d('导出数据')}/>
+          <ArrowStep title={i18n.$it('table.exportType').d('导出方式')}/>
+          <ArrowStep title={i18n.$it('table.exportFields').d('导出字段')}/>
+          <ArrowStep title={i18n.$it('table.exportData').d('导出数据')}/>
         </ArrowStepGroup>
         <div>
           {state.step === 0 && (
@@ -253,7 +228,7 @@ export const useTableOptionSettingExport = AutoModule.createRegistration((
                 ))}
               </RadioGroup>
               <div className="auto-table-setting-export-display-checker">
-                <Checkbox v-model={state.exportDisplayValue} label={i18n('table.exportShowData').d('导出显示值')}/>
+                <Checkbox v-model={state.exportDisplayValue} label={i18n.$it('table.exportShowData').d('导出显示值')}/>
               </div>
             </div>
           )}
@@ -265,25 +240,25 @@ export const useTableOptionSettingExport = AutoModule.createRegistration((
                 field="field"
                 v-model={state.selectPlcList}
               />
-              <Plc title={i18n('table.fieldName').d('字段名称')} field="title"/>
+              <Plc title={i18n.$it('table.fieldName').d('字段名称')} field="title"/>
             </Table>
           )}
           {state.step === 2 && (
             <div className="auto-table-setting-export-loading">
               {!state.stepStatus && <>
                 <Loading status="primary"/>
-                <span>{i18n('table.exportingData').d('正在导出数据')}</span>
+                <span>{i18n.$it('table.exportingData').d('正在导出数据')}</span>
               </>}
               {state.stepStatus === 'success' && <>
                 <Icon icon="pi-check-circle-fill" status="success"/>
-                <span>{i18n('table.exportCompleted').d('导出完毕')}</span>
+                <span>{i18n.$it('table.exportCompleted').d('导出完毕')}</span>
               </>}
               {state.stepStatus === 'error' && <>
                 <Icon icon="pi-check-circle-fill" status="error"/>
-                <span>{i18n('table.exportFailed').d('导出失败')}</span>
+                <span>{i18n.$it('table.exportFailed').d('导出失败')}</span>
               </>}
               {!!state.stepStatus && (
-                <Button label={i18n('table.exportAgain').d('再次导出')} onClick={restart}/>
+                <Button label={i18n.$it('table.exportAgain').d('再次导出')} onClick={restart}/>
               )}
             </div>
           )}
@@ -292,12 +267,12 @@ export const useTableOptionSettingExport = AutoModule.createRegistration((
           {state.step === 1 && (
             <Button onClick={prevStep}>
               <Icon icon="pi-left"/>
-              <span>{i18n('base.prevStep').d('上一步')}</span>
+              <span>{i18n.$it('base.prevStep').d('上一步')}</span>
             </Button>
           )}
           {state.step < 2 && (
             <Button mode="fill" onClick={nextStep}>
-              <span>{i18n('base.nextStep').d('下一步')}</span>
+              <span>{i18n.$it('base.nextStep').d('下一步')}</span>
               <Icon icon="pi-right"/>
             </Button>
           )}

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

@@ -1,10 +1,10 @@
-import {reactive} from "plain-design-composition";
+import {reactive} from "@peryl/react-compose";
 import {Upload, UploadFile} from "../../Upload";
 import {eTableOptionSettingView} from "./useTableOption.setting.utils";
-import {delay} from "plain-utils/utils/delay";
+import {delay} from "@peryl/utils/delay";
 import {tPlc} from "../../Table/plc/utils/plc.utils";
 import {$configuration} from "../../$configuration";
-import {defer} from "plain-utils/utils/defer";
+import {defer} from "@peryl/utils/defer";
 import '../utils/TableOption.space';
 import i18n from "../../i18n";
 import {AutoModule} from "../utils/AutoModule";
@@ -82,7 +82,7 @@ export const useTableOptionSettingImport = AutoModule.createRegistration((
 
   setting.useTableOptionSettingInner({
     key: eTableOptionSettingView.import,
-    title: i18n('table.importData').d('导入数据'),
+    title: i18n.$it('table.importData').d('导入数据'),
     seq: 4,
     beforeOpen() {
       state.uploadFiles = [];