aldehyde 0.2.480 → 0.2.481

package/src/aldehyde/import/excel-import.tsx

@@ -1,450 +1,450 @@
-import React from "react";
-import {
-  Button,
-  Card,
-  Checkbox,
-  Col,
-  InputNumber,
-  List,
-  message,
-  Popover,
-  Progress,
-  Row,
-  Space,
-  Typography,
-  Upload,
-} from "antd";
-import {
-  DownloadOutlined,
-  ReloadOutlined,
-  SettingOutlined,
-  UploadOutlined,
-} from "@ant-design/icons";
-import Super from "../tmpl/superagent";
-import Units from "../units";
-import "./index.css";
-import { LtmplConfig } from "../tmpl/interface";
-import HCDataSource from "../tmpl/hc-data-source";
-import { LocaleContext } from "../locale/LocaleProvider";
-
-const CheckboxGroup = Checkbox.Group;
-const logLevelList: LogLevel[] = ["INFO", "SUC", "ERROR", "WARN"];
-let totalMSG = [];
-type LogLevel = "INFO" | "SUC" | "ERROR" | "WARN";
-type ImportStatus =
-  | "waitingFile"
-  | "fileSelected"
-  | "importing"
-  | "success"
-  | "fail"
-  | "stop";
-const { Text } = Typography;
-
-interface ExcelImportProps {
-  serverKey?: string;
-  sourceId: string;
-}
-
-interface ExcelImportStat {
-  inputMaxMsgCount?: number;
-  maxMsgCount?: number;
-  percent?: number;
-  statusMsg?: string;
-  importStatus?: string;
-  showLogLevelList?: LogLevel[];
-  logSetterOpen?: boolean;
-  logs?: any[];
-  importFile?: any;
-  logSerialId?: string;
-  ltmplConfig?: LtmplConfig;
-  msgIndex?: number;
-}
-
-export default class ExcelImport extends React.PureComponent<
-  ExcelImportProps,
-  ExcelImportStat
-> {
-  state = {
-    maxMsgCount: 100,
-    inputMaxMsgCount: 100,
-    importStatus: "waitingFile",
-    importFile: undefined,
-    logs: [],
-    percent: 0,
-    statusMsg: undefined,
-    logSetterOpen: false,
-    showLogLevelList: [...logLevelList],
-    logSerialId: undefined,
-    ltmplConfig: undefined,
-    msgIndex: 0,
-  };
-  static contextType = LocaleContext;
-  context: React.ContextType<typeof LocaleContext>;
-
-  timerId = undefined;
-
-  async componentDidMount() {
-    const { sourceId, serverKey } = this.props;
-
-    let ltmplConfigRes = await HCDataSource.requestLtmplConfig(
-      serverKey,
-      sourceId
-    );
-
-    this.setState({
-      ltmplConfig: ltmplConfigRes.ltmplConfig,
-    });
-  }
-
-  componentWillUnmount() {
-    if (this.timerId) {
-      clearInterval(this.timerId);
-    }
-  }
-
-  handleUpload = () => {
-    const { sourceId, serverKey } = this.props;
-    const { importFile } = this.state;
-    const { translate } = this.context;
-    const formData = new FormData();
-    formData.append("file", importFile);
-    formData.append("sourceId", sourceId.toString());
-
-    Super.super(
-      {
-        url: `/v3/ltmpl/importer`,
-        serverKey,
-        method: "POST",
-        data: formData,
-      },
-      "formdata"
-    ).then((res) => {
-      //console.log(res)
-      if (res.status === "success") {
-        this.setState({
-          importStatus: "importing",
-        });
-        this.timerId = setInterval(() => this.handleStatus(res.importId), 500);
-      } else {
-        message.error(translate("${失败}!"), 5);
-        this.setState({
-          importStatus: "fail",
-        });
-      }
-    });
-  };
-
-  handleStopImport = () => {
-    this.setState({
-      importStatus: "stop",
-    });
-  };
-
-  handleStatus = (importId) => {
-    const { serverKey } = this.props;
-    const { maxMsgCount, importStatus, logs, msgIndex } = this.state;
-    const { translate } = this.context;
-    Super.super(
-      {
-        url: `/v3/importer/status`,
-        serverKey,
-        method: "GET",
-        query: {
-          importId: importId,
-          msgIndex,
-          maxMsgCount,
-          interrupted: importStatus == "stop",
-        },
-      },
-      "",
-      "none"
-    ).then((res) => {
-      const MSG = [];
-      if (res.status === "error") {
-        clearInterval(this.timerId);
-      } else {
-        if (res.messageSequence.messages) {
-          for (let item of res.messageSequence.messages) {
-            let color = "";
-            let logLevel = "";
-            let createTime = Units.formateDate(item.createTime);
-            if (item.type === "SUC") {
-              color = "green";
-              logLevel = translate("${成功}");
-            } else if (item.type === "INFO") {
-              color = "black";
-              logLevel = translate("${常规}");
-            } else if (item.type === "ERROR") {
-              color = "red";
-              logLevel = translate("${错误}");
-            } else if (item.type === "WARN") {
-              color = "rgb(250, 225, 4)";
-              logLevel = translate("${警告}");
-            }
-            const msg = (
-              <div>
-                <p>{createTime}</p>
-                <p style={{ color: color }}>{`【${logLevel}】` + item.text}</p>
-              </div>
-            );
-            MSG.push({ level: item.type, msg });
-          }
-        }
-        // if(){
-        //
-        // }
-        //
-        let percent = Math.floor((res.current / res.totalCount) * 100);
-        if (res.completed == true) {
-          if (this.timerId) {
-            clearInterval(this.timerId);
-            this.timerId = undefined;
-            message.success(translate("${导入完成}!"));
-            this.setState({});
-          }
-          percent = 100;
-        }
-        if (importStatus == "stop") {
-          clearInterval(this.timerId);
-        }
-        let loggs = [...logs, ...MSG];
-        loggs =
-          loggs.length > maxMsgCount
-            ? loggs.slice(logs.length - maxMsgCount)
-            : loggs;
-        this.setState({
-          statusMsg: res.message,
-          msgIndex: res.messageSequence?.messages?.length ? msgIndex + res.messageSequence?.messages.length : msgIndex,
-          percent,
-          importStatus: percent == 100 ? "success" : "importing",
-          logs: loggs,
-        });
-      }
-    });
-  };
-  onChangeShowLogLevelList = (showLogLevelList) => {
-    //日志checkbox选择
-    this.setState({
-      showLogLevelList,
-    });
-  };
-
-  fresh = () => {
-    // this.setState({
-    //     fileList:[],
-    //     uploading: false,
-    //     statusMsg:"",
-    //     begin:true,
-    //     importAgain:"none",
-    //     importbtn:"block",
-    //     percent:0,
-    //     messages:[]
-    // })
-    // message.success("刷新成功！")
-  };
-
-  handleLogSetter = () => {
-    const { inputMaxMsgCount } = this.state;
-    const { translate } = this.context;
-    this.setState({
-      maxMsgCount: inputMaxMsgCount,
-      logSetterOpen: false,
-    });
-    message.success(translate("${设置成功}!"));
-  };
-  changeLogSetterOpen = (open) => {
-    this.setState({ logSetterOpen: open });
-  };
-  download = () => {
-    const { sourceId, serverKey } = this.props;
-    const hydrocarbonToken = Units.serverHydrocarbonToken(serverKey);
-    Units.downloadFile(
-      Units.joinPath(
-        Units.api(serverKey),
-        `/v3/ltmpl/importer/template?sourceId=${sourceId}&@token=${hydrocarbonToken}&@programToken=${Units.programCode(
-          serverKey
-        )}&@applicationToken=${Units.applicationCode(serverKey)}`
-      ),
-      "导入模板.xlsx"
-    );
-  };
-
-  render() {
-    const {
-      ltmplConfig,
-      importFile,
-      maxMsgCount,
-      percent,
-      importStatus,
-      showLogLevelList,
-      logSetterOpen,
-      logs,
-    } = this.state;
-
-    let showLogs = [];
-
-    for (let log of logs) {
-      if (showLogLevelList.includes(log.level)) {
-        showLogs.push(log.msg);
-      }
-    }
-
-    const props = {
-      accept:
-        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel,application/vnd.ms-excel",
-      onChange: () => { },
-      onRemove: (file) => {
-        this.setState({
-          importFile: undefined,
-          importStatus: "waitingFile",
-          percent: 0,
-        });
-      },
-      beforeUpload: (file) => {
-        this.setState({
-          percent: 0,
-          importFile: file,
-          importStatus: "fileSelected",
-        });
-        return false;
-      },
-      fileList: importFile ? [importFile] : undefined,
-    };
-    const { translate } = this.context;
-    const content = (
-      <div>
-        <label>{translate("${日志消息数上限}: ")}</label>
-        <InputNumber
-          defaultValue={maxMsgCount}
-          onChange={(value) => this.setState({ inputMaxMsgCount: value })}
-        />
-        <Button
-          type="primary"
-          style={{ marginLeft: "10px" }}
-          onClick={this.handleLogSetter}
-        >
-          {translate("${确定}: ")}
-        </Button>
-      </div>
-    );
-    return (
-      <div className="importData">
-        <h3>
-          {translate("${导入} -> ")}
-          {ltmplConfig ? ltmplConfig.title : ""}
-          <p className="fr">
-            <Button
-              className="hoverbig"
-              title={translate("${刷新}")}
-              onClick={this.fresh}
-            >
-              <ReloadOutlined />
-            </Button>
-          </p>
-        </h3>
-        <Row>
-          <Col span={14} offset={5}>
-            <Card size={"small"} style={{ minWidth: 600 }}>
-              <Space>
-                <Upload {...props}>
-                  <Button type={"primary"}>
-                    <UploadOutlined />
-                    {translate("${选择导入文件}")}
-                  </Button>
-                </Upload>
-                <Button onClick={this.download}>
-                  <DownloadOutlined />
-                  {translate("${下载导入模板}")}
-                </Button>
-              </Space>
-
-              <Progress percent={percent} size="small" status="active" />
-              <div className="importBtns">
-                <Space>
-                  <Button
-                    type="primary"
-                    onClick={this.handleUpload}
-                    disabled={!["fileSelected", "stop"].includes(importStatus)}
-                    loading={importStatus == "importing"}
-                  >
-                    {importStatus == "importing"
-                      ? translate("${正在导入}")
-                      : importStatus == "stop"
-                        ? translate("${重新导入}")
-                        : translate("${开始导入}")}
-                  </Button>
-                  <Button
-                    onClick={this.handleStopImport}
-                    disabled={importStatus != "importing"}
-                  >
-                    {translate("${停止导入}")}
-                  </Button>
-                </Space>
-              </div>
-              <List
-                header={
-                  <div className="listHeader">
-                    <h4>{translate("${导入日志}")}</h4>
-                    <div className="checks">
-                      <CheckboxGroup
-                        value={showLogLevelList}
-                        onChange={this.onChangeShowLogLevelList}
-                      >
-                        <Checkbox value="INFO" className="infoColor">
-                          {translate("${常规}")}
-                        </Checkbox>
-                        <Checkbox value="SUC" className="sucColor">
-                          {translate("${成功}")}
-                        </Checkbox>
-                        <Checkbox value="ERROR" className="errorColor">
-                          {translate("${错误}")}
-                        </Checkbox>
-                        <Checkbox value="WARN" className="warnColor">
-                          {translate("${警告}")}
-                        </Checkbox>
-                      </CheckboxGroup>
-                      <div className="btns">
-                        <Popover
-                          content={content}
-                          title={translate("${日志设置}")}
-                          trigger="click"
-                          placement="top"
-                          open={logSetterOpen}
-                          overlayStyle={{ width: 350 }}
-                          onOpenChange={this.changeLogSetterOpen}
-                        >
-                          <Button
-                            title={translate("${日志设置}")}
-                            type="primary"
-                            size="small"
-                          >
-                            <SettingOutlined />
-                          </Button>
-                        </Popover>
-                      </div>
-                    </div>
-                  </div>
-                }
-                footer={
-                  <Text
-                    type={
-                      importStatus == "fail" || importStatus == "stop"
-                        ? "danger"
-                        : "success"
-                    }
-                  >
-                    {importStatus}
-                  </Text>
-                }
-                bordered
-                dataSource={showLogs}
-                renderItem={(item) => <List.Item>{item}</List.Item>}
-                className="importList"
-              />
-            </Card>
-          </Col>
-        </Row>
-      </div>
-    );
-  }
-}
+import React from "react";
+import {
+  Button,
+  Card,
+  Checkbox,
+  Col,
+  InputNumber,
+  List,
+  message,
+  Popover,
+  Progress,
+  Row,
+  Space,
+  Typography,
+  Upload,
+} from "antd";
+import {
+  DownloadOutlined,
+  ReloadOutlined,
+  SettingOutlined,
+  UploadOutlined,
+} from "@ant-design/icons";
+import Super from "../tmpl/superagent";
+import Units from "../units";
+import "./index.css";
+import { LtmplConfig } from "../tmpl/interface";
+import HCDataSource from "../tmpl/hc-data-source";
+import { LocaleContext } from "../locale/LocaleProvider";
+
+const CheckboxGroup = Checkbox.Group;
+const logLevelList: LogLevel[] = ["INFO", "SUC", "ERROR", "WARN"];
+let totalMSG = [];
+type LogLevel = "INFO" | "SUC" | "ERROR" | "WARN";
+type ImportStatus =
+  | "waitingFile"
+  | "fileSelected"
+  | "importing"
+  | "success"
+  | "fail"
+  | "stop";
+const { Text } = Typography;
+
+interface ExcelImportProps {
+  serverKey?: string;
+  sourceId: string;
+}
+
+interface ExcelImportStat {
+  inputMaxMsgCount?: number;
+  maxMsgCount?: number;
+  percent?: number;
+  statusMsg?: string;
+  importStatus?: string;
+  showLogLevelList?: LogLevel[];
+  logSetterOpen?: boolean;
+  logs?: any[];
+  importFile?: any;
+  logSerialId?: string;
+  ltmplConfig?: LtmplConfig;
+  msgIndex?: number;
+}
+
+export default class ExcelImport extends React.PureComponent<
+  ExcelImportProps,
+  ExcelImportStat
+> {
+  state = {
+    maxMsgCount: 100,
+    inputMaxMsgCount: 100,
+    importStatus: "waitingFile",
+    importFile: undefined,
+    logs: [],
+    percent: 0,
+    statusMsg: undefined,
+    logSetterOpen: false,
+    showLogLevelList: [...logLevelList],
+    logSerialId: undefined,
+    ltmplConfig: undefined,
+    msgIndex: 0,
+  };
+  static contextType = LocaleContext;
+  context: React.ContextType<typeof LocaleContext>;
+
+  timerId = undefined;
+
+  async componentDidMount() {
+    const { sourceId, serverKey } = this.props;
+
+    let ltmplConfigRes = await HCDataSource.requestLtmplConfig(
+      serverKey,
+      sourceId
+    );
+
+    this.setState({
+      ltmplConfig: ltmplConfigRes.ltmplConfig,
+    });
+  }
+
+  componentWillUnmount() {
+    if (this.timerId) {
+      clearInterval(this.timerId);
+    }
+  }
+
+  handleUpload = () => {
+    const { sourceId, serverKey } = this.props;
+    const { importFile } = this.state;
+    const { translate } = this.context;
+    const formData = new FormData();
+    formData.append("file", importFile);
+    formData.append("sourceId", sourceId.toString());
+
+    Super.super(
+      {
+        url: `/v3/ltmpl/importer`,
+        serverKey,
+        method: "POST",
+        data: formData,
+      },
+      "formdata"
+    ).then((res) => {
+      //console.log(res)
+      if (res.status === "success") {
+        this.setState({
+          importStatus: "importing",
+        });
+        this.timerId = setInterval(() => this.handleStatus(res.importId), 500);
+      } else {
+        message.error(translate("${失败}!"), 5);
+        this.setState({
+          importStatus: "fail",
+        });
+      }
+    });
+  };
+
+  handleStopImport = () => {
+    this.setState({
+      importStatus: "stop",
+    });
+  };
+
+  handleStatus = (importId) => {
+    const { serverKey } = this.props;
+    const { maxMsgCount, importStatus, logs, msgIndex } = this.state;
+    const { translate } = this.context;
+    Super.super(
+      {
+        url: `/v3/importer/status`,
+        serverKey,
+        method: "GET",
+        query: {
+          importId: importId,
+          msgIndex,
+          maxMsgCount,
+          interrupted: importStatus == "stop",
+        },
+      },
+      "",
+      "none"
+    ).then((res) => {
+      const MSG = [];
+      if (res.status === "error") {
+        clearInterval(this.timerId);
+      } else {
+        if (res.messageSequence.messages) {
+          for (let item of res.messageSequence.messages) {
+            let color = "";
+            let logLevel = "";
+            let createTime = Units.formateDate(item.createTime);
+            if (item.type === "SUC") {
+              color = "green";
+              logLevel = translate("${成功}");
+            } else if (item.type === "INFO") {
+              color = "black";
+              logLevel = translate("${常规}");
+            } else if (item.type === "ERROR") {
+              color = "red";
+              logLevel = translate("${错误}");
+            } else if (item.type === "WARN") {
+              color = "rgb(250, 225, 4)";
+              logLevel = translate("${警告}");
+            }
+            const msg = (
+              <div>
+                <p>{createTime}</p>
+                <p style={{ color: color }}>{`【${logLevel}】` + item.text}</p>
+              </div>
+            );
+            MSG.push({ level: item.type, msg });
+          }
+        }
+        // if(){
+        //
+        // }
+        //
+        let percent = Math.floor((res.current / res.totalCount) * 100);
+        if (res.completed == true) {
+          if (this.timerId) {
+            clearInterval(this.timerId);
+            this.timerId = undefined;
+            message.success(translate("${导入完成}!"));
+            this.setState({});
+          }
+          percent = 100;
+        }
+        if (importStatus == "stop") {
+          clearInterval(this.timerId);
+        }
+        let loggs = [...logs, ...MSG];
+        loggs =
+          loggs.length > maxMsgCount
+            ? loggs.slice(logs.length - maxMsgCount)
+            : loggs;
+        this.setState({
+          statusMsg: res.message,
+          msgIndex: res.messageSequence?.messages?.length ? msgIndex + res.messageSequence?.messages.length : msgIndex,
+          percent,
+          importStatus: percent == 100 ? "success" : "importing",
+          logs: loggs,
+        });
+      }
+    });
+  };
+  onChangeShowLogLevelList = (showLogLevelList) => {
+    //日志checkbox选择
+    this.setState({
+      showLogLevelList,
+    });
+  };
+
+  fresh = () => {
+    // this.setState({
+    //     fileList:[],
+    //     uploading: false,
+    //     statusMsg:"",
+    //     begin:true,
+    //     importAgain:"none",
+    //     importbtn:"block",
+    //     percent:0,
+    //     messages:[]
+    // })
+    // message.success("刷新成功！")
+  };
+
+  handleLogSetter = () => {
+    const { inputMaxMsgCount } = this.state;
+    const { translate } = this.context;
+    this.setState({
+      maxMsgCount: inputMaxMsgCount,
+      logSetterOpen: false,
+    });
+    message.success(translate("${设置成功}!"));
+  };
+  changeLogSetterOpen = (open) => {
+    this.setState({ logSetterOpen: open });
+  };
+  download = () => {
+    const { sourceId, serverKey } = this.props;
+    const hydrocarbonToken = Units.serverHydrocarbonToken(serverKey);
+    Units.downloadFile(
+      Units.joinPath(
+        Units.api(serverKey),
+        `/v3/ltmpl/importer/template?sourceId=${sourceId}&@token=${hydrocarbonToken}&@programToken=${Units.programCode(
+          serverKey
+        )}&@applicationToken=${Units.applicationCode(serverKey)}`
+      ),
+      "导入模板.xlsx"
+    );
+  };
+
+  render() {
+    const {
+      ltmplConfig,
+      importFile,
+      maxMsgCount,
+      percent,
+      importStatus,
+      showLogLevelList,
+      logSetterOpen,
+      logs,
+    } = this.state;
+
+    let showLogs = [];
+
+    for (let log of logs) {
+      if (showLogLevelList.includes(log.level)) {
+        showLogs.push(log.msg);
+      }
+    }
+
+    const props = {
+      accept:
+        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel,application/vnd.ms-excel",
+      onChange: () => { },
+      onRemove: (file) => {
+        this.setState({
+          importFile: undefined,
+          importStatus: "waitingFile",
+          percent: 0,
+        });
+      },
+      beforeUpload: (file) => {
+        this.setState({
+          percent: 0,
+          importFile: file,
+          importStatus: "fileSelected",
+        });
+        return false;
+      },
+      fileList: importFile ? [importFile] : undefined,
+    };
+    const { translate } = this.context;
+    const content = (
+      <div>
+        <label>{translate("${日志消息数上限}: ")}</label>
+        <InputNumber
+          defaultValue={maxMsgCount}
+          onChange={(value) => this.setState({ inputMaxMsgCount: value })}
+        />
+        <Button
+          type="primary"
+          style={{ marginLeft: "10px" }}
+          onClick={this.handleLogSetter}
+        >
+          {translate("${确定}: ")}
+        </Button>
+      </div>
+    );
+    return (
+      <div className="importData">
+        <h3>
+          {translate("${导入} -> ")}
+          {ltmplConfig ? ltmplConfig.title : ""}
+          <p className="fr">
+            <Button
+              className="hoverbig"
+              title={translate("${刷新}")}
+              onClick={this.fresh}
+            >
+              <ReloadOutlined />
+            </Button>
+          </p>
+        </h3>
+        <Row>
+          <Col span={14} offset={5}>
+            <Card size={"small"} style={{ minWidth: 600 }}>
+              <Space>
+                <Upload {...props}>
+                  <Button type={"primary"}>
+                    <UploadOutlined />
+                    {translate("${选择导入文件}")}
+                  </Button>
+                </Upload>
+                <Button onClick={this.download}>
+                  <DownloadOutlined />
+                  {translate("${下载导入模板}")}
+                </Button>
+              </Space>
+
+              <Progress percent={percent} size="small" status="active" />
+              <div className="importBtns">
+                <Space>
+                  <Button
+                    type="primary"
+                    onClick={this.handleUpload}
+                    disabled={!["fileSelected", "stop"].includes(importStatus)}
+                    loading={importStatus == "importing"}
+                  >
+                    {importStatus == "importing"
+                      ? translate("${正在导入}")
+                      : importStatus == "stop"
+                        ? translate("${重新导入}")
+                        : translate("${开始导入}")}
+                  </Button>
+                  <Button
+                    onClick={this.handleStopImport}
+                    disabled={importStatus != "importing"}
+                  >
+                    {translate("${停止导入}")}
+                  </Button>
+                </Space>
+              </div>
+              <List
+                header={
+                  <div className="listHeader">
+                    <h4>{translate("${导入日志}")}</h4>
+                    <div className="checks">
+                      <CheckboxGroup
+                        value={showLogLevelList}
+                        onChange={this.onChangeShowLogLevelList}
+                      >
+                        <Checkbox value="INFO" className="infoColor">
+                          {translate("${常规}")}
+                        </Checkbox>
+                        <Checkbox value="SUC" className="sucColor">
+                          {translate("${成功}")}
+                        </Checkbox>
+                        <Checkbox value="ERROR" className="errorColor">
+                          {translate("${错误}")}
+                        </Checkbox>
+                        <Checkbox value="WARN" className="warnColor">
+                          {translate("${警告}")}
+                        </Checkbox>
+                      </CheckboxGroup>
+                      <div className="btns">
+                        <Popover
+                          content={content}
+                          title={translate("${日志设置}")}
+                          trigger="click"
+                          placement="top"
+                          open={logSetterOpen}
+                          overlayStyle={{ width: 350 }}
+                          onOpenChange={this.changeLogSetterOpen}
+                        >
+                          <Button
+                            title={translate("${日志设置}")}
+                            type="primary"
+                            size="small"
+                          >
+                            <SettingOutlined />
+                          </Button>
+                        </Popover>
+                      </div>
+                    </div>
+                  </div>
+                }
+                footer={
+                  <Text
+                    type={
+                      importStatus == "fail" || importStatus == "stop"
+                        ? "danger"
+                        : "success"
+                    }
+                  >
+                    {importStatus}
+                  </Text>
+                }
+                bordered
+                dataSource={showLogs}
+                renderItem={(item) => <List.Item>{item}</List.Item>}
+                className="importList"
+              />
+            </Card>
+          </Col>
+        </Row>
+      </div>
+    );
+  }
+}