plain-design 1.0.0-beta.146 → 1.0.0-beta.147

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

@@ -1,283 +1,283 @@
-import {reactive, useRefs} from "@peryl/react-compose";
-import {PlcCheck} from "../../Table/standard/PlcCheck/PlcCheck";
-import {deepcopy} from "@peryl/utils/deepcopy";
-import {$configuration} from "../../$configuration";
-import {plainDate} from "../../../utils/plainDate";
-import {delay} from "@peryl/utils/delay";
-import {$message} from "../../$message";
-import {eTableOptionSettingView} from "./useTableOption.setting.utils";
-import {ArrowStepGroup} from "../../ArrowStepGroup";
-import {ArrowStep} from "../../ArrowStep";
-import {RadioGroup} from "../../RadioGroup";
-import {Radio} from "../../Radio";
-import {Table} from "../../Table";
-import {Plc} from "../../Plc";
-import {Loading} from "../../Loading";
-import {Icon} from "../../Icon";
-import {Button} from "../../Button";
-import {iHttpRequestConfig} from "../../createHttp/http.utils";
-import {Checkbox} from "../../Checkbox";
-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 {
-    interface iTableOption {
-      settingExport: ReturnType<typeof useTableOptionSettingExport>;
-    }
-  }
-}
-
-interface ExportOption {
-  type: string,
-  title: string,
-  desc: string,
-  handler: (list: ExportPlcData[]) => Promise<void>,
-}
-
-interface ExportPlcData {
-  title?: string;
-  field: string;
-}
-
-export const useTableOptionSettingExport = AutoModule.createRegistration((
-  {
-    setting,
-    check,
-    state: tableState,
-    methods: tableMethods,
-    hooks,
-  }) => {
-
-  const { refs, onRef } = useRefs({
-    check: PlcCheck,
-  });
-
-  const freezeState = (() => {
-    Promise.resolve().then(() => {hooks.onBeforeLoad.use((val) => {freezeState.requestConfig = val;});});
-    return {
-      requestConfig: null as null | iHttpRequestConfig<any>,
-    };
-  })();
-
-  const state = (() => {
-    const initialState = {
-      exportType: 'export-page',                // 导出的数据的方式
-      step: 0,                                  // 当前操作的步骤
-      stepStatus: undefined as undefined | string, // 当前步骤的状态
-      exportDisplayValue: false,                // 导出显示值
-
-      plcList: [] as ExportPlcData[],           // 可选的导出的字段数组
-      selectPlcList: [] as ExportPlcData[],     // 已经选中的plc数组
-    };
-    const reset = () => {
-      Object.assign(state, deepcopy(initialState));
-    };
-    return reactive({
-      ...deepcopy(initialState),
-      reset,
-    });
-  })();
-
-  const exportOptions: ExportOption[] = (() => {
-
-    const save = async (rows: any[], exportPlcData: ExportPlcData[]) => {
-      let exportData = deepcopy(rows).map(row => {
-        const data: any = {};
-        exportPlcData.forEach(({ field }) => data[field] = row[field]);
-        return data;
-      });
-      if (!!state.exportDisplayValue) {
-        const sourcePlcList = await tableMethods.getSourceFlatPlcList();
-        exportData = await Promise.all(exportData.map(async row => {
-          await Promise.all(
-            sourcePlcList.map(async plc => {
-              if (!plc.props.field) {return;}
-              row[plc.props.field] = await getPlcDisplayValue({ plc, formData: { ...row } });
-            })
-          );
-          return row;
-        }));
-      }
-
-      await $file.export2file({ exportData, columns: exportPlcData.map(({ title, field }) => ({ header: title, key: field })) });
-    };
-
-    const exportPage: ExportOption = {
-      type: 'export-page',
-      title: i18n.$it('table.exportCurrentPageData').d('导出当前页数据'),
-      desc: i18n.$it('table.exportDataInTable').d('导出表格当前显示的数据'),
-      handler: async (exportPlcData) => {
-        await save(tableState.list, exportPlcData);
-      }
-    };
-
-    const exportAll: ExportOption = {
-      type: 'export-all',
-      title: i18n.$it('table.exportCurrentAllData').d('导出当前所有数据'),
-      desc: i18n.$it('table.exportAllDataWithFilterSortMaybeFailedWithLargeData').d('根据当前的筛选排序条件导出所有数据(数据量比较大的话可能会导出失败)'),
-      handler: async (exportPlcData) => {
-        // if (!freezeState.loadDataConfig) {return;}
-        // let { request, requestConfig } = freezeState.loadDataConfig!;
-        const data = await tableMethods.urlUtils.request({
-          type: 'query',
-          processRequestData: (requestData) => {
-            if (!freezeState.requestConfig) {return;}
-            const { data, params, method } = freezeState.requestConfig;
-            const saveRequestData = !method || method === 'post' ? data : params;
-            delete saveRequestData.query;
-            delete saveRequestData.size;
-            saveRequestData.all = true;
-            Object.assign(requestData, saveRequestData);
-          },
-          beforeRequest: async (requestConfig) => {
-            await hooks.onBeforeLoad.exec(requestConfig);
-          },
-        });
-        await save(data.list, exportPlcData);
-      },
-    };
-
-    const exportSelected: ExportOption = {
-      type: 'export-selected',
-      title: i18n.$it('table.selectDataToExport').d('选择需要导出的数据'),
-      desc: i18n.$it('table.customSelectDataToExport').d('自定义选择导出需要的数据'),
-      handler: async (exportPlcData) => {
-        setting.closeSetting();
-        await delay(400);
-        await save(await check.openToCheck(), exportPlcData);
-      }
-    };
-
-    return [exportPage, exportAll, exportSelected];
-  })();
-
-  const nextStep = async () => {
-    switch (state.step) {
-      case 0:
-        if (!state.exportType) {
-          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.$it('table.exportFields').d('请选择导出的字段'));
-        }
-        state.step++;
-        const exportType = exportOptions.find(i => i.type === state.exportType)!;
-        try {
-          await exportType.handler(state.selectPlcList);
-          state.stepStatus = 'success';
-        } catch (e) {
-          state.stepStatus = 'error';
-          console.error(e);
-        }
-
-        break;
-    }
-  };
-
-  const prevStep = () => {
-    if (state.step === 1) {
-      state.selectPlcList = refs.check!.getSelected() as any;
-    }
-    state.step--;
-  };
-
-  const restart = async () => {
-    state.reset();
-    state.plcList = (await tableMethods.getSourceFlatPlcList()).filter(i => !!i.props.field && !!i.props.title).map((i) => ({
-      title: i.props.title,
-      field: i.props.field!,
-    }));
-    // 默认选中所有字段
-    state.selectPlcList = deepcopy(state.plcList);
-  };
-
-  setting.useTableOptionSettingInner({
-    key: eTableOptionSettingView.export,
-    title: i18n.$it('table.exportData').d('导出数据'),
-    seq: 5,
-    beforeOpen() {
-      restart();
-    },
-    render: () => (
-      <div className="auto-table-setting-export">
-        <ArrowStepGroup style={{ marginBottom: '20px' }} current={state.step} currentStatus={state.stepStatus}>
-          <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 && (
-            <div className="auto-table-setting-export-1">
-              <RadioGroup v-model={state.exportType}>
-                {exportOptions.map((option, index) => (
-                  <div className="auto-table-setting-export-option" key={index} onClick={() => state.exportType = option.type}>
-                    <div className="auto-table-setting-export-option-radio">
-                      <Radio val={option.type} customReadonly/>
-                    </div>
-                    <div className="auto-table-setting-export-option-title">{option.title}</div>
-                    <div className="auto-table-setting-export-option-desc">{option.desc}</div>
-                  </div>
-                ))}
-              </RadioGroup>
-              <div className="auto-table-setting-export-display-checker">
-                <Checkbox v-model={state.exportDisplayValue} label={i18n.$it('table.exportShowData').d('导出显示值')}/>
-              </div>
-            </div>
-          )}
-          {state.step === 1 && (
-            <Table data={state.plcList} showRows={Math.max(state.plcList.length, 5)} size="small">
-              <PlcCheck
-                toggleOnClickRow
-                ref={onRef.check}
-                field="field"
-                v-model={state.selectPlcList}
-              />
-              <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.$it('table.exportingData').d('正在导出数据')}</span>
-              </>}
-              {state.stepStatus === 'success' && <>
-                <Icon icon="pi-check-circle-fill" status="success"/>
-                <span>{i18n.$it('table.exportCompleted').d('导出完毕')}</span>
-              </>}
-              {state.stepStatus === 'error' && <>
-                <Icon icon="pi-check-circle-fill" status="error"/>
-                <span>{i18n.$it('table.exportFailed').d('导出失败')}</span>
-              </>}
-              {!!state.stepStatus && (
-                <Button label={i18n.$it('table.exportAgain').d('再次导出')} onClick={restart}/>
-              )}
-            </div>
-          )}
-        </div>
-        <div className="auto-table-setting-export-foot">
-          {state.step === 1 && (
-            <Button onClick={prevStep}>
-              <Icon icon="pi-left"/>
-              <span>{i18n.$it('base.prevStep').d('上一步')}</span>
-            </Button>
-          )}
-          {state.step < 2 && (
-            <Button mode="fill" onClick={nextStep}>
-              <span>{i18n.$it('base.nextStep').d('下一步')}</span>
-              <Icon icon="pi-right"/>
-            </Button>
-          )}
-        </div>
-      </div>
-    )
-  });
-});
+import {reactive, useRefs} from "@peryl/react-compose";
+import {PlcCheck} from "../../Table/standard/PlcCheck/PlcCheck";
+import {deepcopy} from "@peryl/utils/deepcopy";
+import {$configuration} from "../../$configuration";
+import {plainDate} from "../../../utils/plainDate";
+import {delay} from "@peryl/utils/delay";
+import {$message} from "../../$message";
+import {eTableOptionSettingView} from "./useTableOption.setting.utils";
+import {ArrowStepGroup} from "../../ArrowStepGroup";
+import {ArrowStep} from "../../ArrowStep";
+import {RadioGroup} from "../../RadioGroup";
+import {Radio} from "../../Radio";
+import {Table} from "../../Table";
+import {Plc} from "../../Plc";
+import {Loading} from "../../Loading";
+import {Icon} from "../../Icon";
+import {Button} from "../../Button";
+import {iHttpRequestConfig} from "../../createHttp/http.utils";
+import {Checkbox} from "../../Checkbox";
+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 {
+    interface iTableOption {
+      settingExport: ReturnType<typeof useTableOptionSettingExport>;
+    }
+  }
+}
+
+interface ExportOption {
+  type: string,
+  title: string,
+  desc: string,
+  handler: (list: ExportPlcData[]) => Promise<void>,
+}
+
+interface ExportPlcData {
+  title?: string;
+  field: string;
+}
+
+export const useTableOptionSettingExport = AutoModule.createRegistration((
+  {
+    setting,
+    check,
+    state: tableState,
+    methods: tableMethods,
+    hooks,
+  }) => {
+
+  const { refs, onRef } = useRefs({
+    check: PlcCheck,
+  });
+
+  const freezeState = (() => {
+    Promise.resolve().then(() => {hooks.onBeforeLoad.use((val) => {freezeState.requestConfig = val;});});
+    return {
+      requestConfig: null as null | iHttpRequestConfig<any>,
+    };
+  })();
+
+  const state = (() => {
+    const initialState = {
+      exportType: 'export-page',                // 导出的数据的方式
+      step: 0,                                  // 当前操作的步骤
+      stepStatus: undefined as undefined | string, // 当前步骤的状态
+      exportDisplayValue: false,                // 导出显示值
+
+      plcList: [] as ExportPlcData[],           // 可选的导出的字段数组
+      selectPlcList: [] as ExportPlcData[],     // 已经选中的plc数组
+    };
+    const reset = () => {
+      Object.assign(state, deepcopy(initialState));
+    };
+    return reactive({
+      ...deepcopy(initialState),
+      reset,
+    });
+  })();
+
+  const exportOptions: ExportOption[] = (() => {
+
+    const save = async (rows: any[], exportPlcData: ExportPlcData[]) => {
+      let exportData = deepcopy(rows).map(row => {
+        const data: any = {};
+        exportPlcData.forEach(({ field }) => data[field] = row[field]);
+        return data;
+      });
+      if (!!state.exportDisplayValue) {
+        const sourcePlcList = await tableMethods.getSourceFlatPlcList();
+        exportData = await Promise.all(exportData.map(async row => {
+          await Promise.all(
+            sourcePlcList.map(async plc => {
+              if (!plc.props.field) {return;}
+              row[plc.props.field] = await getPlcDisplayValue({ plc, formData: { ...row } });
+            })
+          );
+          return row;
+        }));
+      }
+
+      await $file.export2file({ exportData, columns: exportPlcData.map(({ title, field }) => ({ header: title, key: field })) });
+    };
+
+    const exportPage: ExportOption = {
+      type: 'export-page',
+      title: i18n.$it('table.exportCurrentPageData').d('导出当前页数据'),
+      desc: i18n.$it('table.exportDataInTable').d('导出表格当前显示的数据'),
+      handler: async (exportPlcData) => {
+        await save(tableState.list, exportPlcData);
+      }
+    };
+
+    const exportAll: ExportOption = {
+      type: 'export-all',
+      title: i18n.$it('table.exportCurrentAllData').d('导出当前所有数据'),
+      desc: i18n.$it('table.exportAllDataWithFilterSortMaybeFailedWithLargeData').d('根据当前的筛选排序条件导出所有数据(数据量比较大的话可能会导出失败)'),
+      handler: async (exportPlcData) => {
+        // if (!freezeState.loadDataConfig) {return;}
+        // let { request, requestConfig } = freezeState.loadDataConfig!;
+        const data = await tableMethods.urlUtils.request({
+          type: 'query',
+          processRequestData: (requestData) => {
+            if (!freezeState.requestConfig) {return;}
+            const { data, params, method } = freezeState.requestConfig;
+            const saveRequestData = !method || method === 'post' ? data : params;
+            delete saveRequestData.query;
+            delete saveRequestData.size;
+            saveRequestData.all = true;
+            Object.assign(requestData, saveRequestData);
+          },
+          beforeRequest: async (requestConfig) => {
+            await hooks.onBeforeLoad.exec(requestConfig);
+          },
+        });
+        await save(data.list, exportPlcData);
+      },
+    };
+
+    const exportSelected: ExportOption = {
+      type: 'export-selected',
+      title: i18n.$it('table.selectDataToExport').d('选择需要导出的数据'),
+      desc: i18n.$it('table.customSelectDataToExport').d('自定义选择导出需要的数据'),
+      handler: async (exportPlcData) => {
+        setting.closeSetting();
+        await delay(400);
+        await save(await check.openToCheck(), exportPlcData);
+      }
+    };
+
+    return [exportPage, exportAll, exportSelected];
+  })();
+
+  const nextStep = async () => {
+    switch (state.step) {
+      case 0:
+        if (!state.exportType) {
+          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.$it('table.exportFields').d('请选择导出的字段'));
+        }
+        state.step++;
+        const exportType = exportOptions.find(i => i.type === state.exportType)!;
+        try {
+          await exportType.handler(state.selectPlcList);
+          state.stepStatus = 'success';
+        } catch (e) {
+          state.stepStatus = 'error';
+          console.error(e);
+        }
+
+        break;
+    }
+  };
+
+  const prevStep = () => {
+    if (state.step === 1) {
+      state.selectPlcList = refs.check!.getSelected() as any;
+    }
+    state.step--;
+  };
+
+  const restart = async () => {
+    state.reset();
+    state.plcList = (await tableMethods.getSourceFlatPlcList()).filter(i => !!i.props.field && !!i.props.title).map((i) => ({
+      title: i.props.title,
+      field: i.props.field!,
+    }));
+    // 默认选中所有字段
+    state.selectPlcList = deepcopy(state.plcList);
+  };
+
+  setting.useTableOptionSettingInner({
+    key: eTableOptionSettingView.export,
+    title: i18n.$it('table.exportData').d('导出数据'),
+    seq: 5,
+    beforeOpen() {
+      restart();
+    },
+    render: () => (
+      <div className="auto-table-setting-export">
+        <ArrowStepGroup style={{ marginBottom: '20px' }} current={state.step} currentStatus={state.stepStatus}>
+          <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 && (
+            <div className="auto-table-setting-export-1">
+              <RadioGroup v-model={state.exportType}>
+                {exportOptions.map((option, index) => (
+                  <div className="auto-table-setting-export-option" key={index} onClick={() => state.exportType = option.type}>
+                    <div className="auto-table-setting-export-option-radio">
+                      <Radio val={option.type} customReadonly/>
+                    </div>
+                    <div className="auto-table-setting-export-option-title">{option.title}</div>
+                    <div className="auto-table-setting-export-option-desc">{option.desc}</div>
+                  </div>
+                ))}
+              </RadioGroup>
+              <div className="auto-table-setting-export-display-checker">
+                <Checkbox v-model={state.exportDisplayValue} label={i18n.$it('table.exportShowData').d('导出显示值')}/>
+              </div>
+            </div>
+          )}
+          {state.step === 1 && (
+            <Table data={state.plcList} showRows={Math.max(state.plcList.length, 5)} size="small">
+              <PlcCheck
+                toggleOnClickRow
+                ref={onRef.check}
+                field="field"
+                v-model={state.selectPlcList}
+              />
+              <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.$it('table.exportingData').d('正在导出数据')}</span>
+              </>}
+              {state.stepStatus === 'success' && <>
+                <Icon icon="pi-check-circle-fill" status="success"/>
+                <span>{i18n.$it('table.exportCompleted').d('导出完毕')}</span>
+              </>}
+              {state.stepStatus === 'error' && <>
+                <Icon icon="pi-check-circle-fill" status="error"/>
+                <span>{i18n.$it('table.exportFailed').d('导出失败')}</span>
+              </>}
+              {!!state.stepStatus && (
+                <Button label={i18n.$it('table.exportAgain').d('再次导出')} onClick={restart}/>
+              )}
+            </div>
+          )}
+        </div>
+        <div className="auto-table-setting-export-foot">
+          {state.step === 1 && (
+            <Button onClick={prevStep}>
+              <Icon icon="pi-left"/>
+              <span>{i18n.$it('base.prevStep').d('上一步')}</span>
+            </Button>
+          )}
+          {state.step < 2 && (
+            <Button mode="fill" onClick={nextStep}>
+              <span>{i18n.$it('base.nextStep').d('下一步')}</span>
+              <Icon icon="pi-right"/>
+            </Button>
+          )}
+        </div>
+      </div>
+    )
+  });
+});