aldehyde 0.2.97 → 0.2.99

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

@@ -1,364 +1,447 @@
-import React from 'react'
+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";
+  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;
+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,
-};
+  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;
-};
-
-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,
-    }
+  inputMaxMsgCount?: number;
+  maxMsgCount?: number;
+  percent?: number;
+  statusMsg?: string;
+  importStatus?: string;
+  showLogLevelList?: LogLevel[];
+  logSetterOpen?: boolean;
+  logs?: any[];
+  importFile?: any;
+  logSerialId?: string;
+  ltmplConfig?: LtmplConfig;
+}
 
-    timerId = undefined;
+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,
+  };
+  static contextType = LocaleContext;
+  context: React.ContextType<typeof LocaleContext>;
 
-    async componentDidMount() {
-        const {sourceId, serverKey} = this.props;
+  timerId = undefined;
 
-        let ltmplConfigRes = await HCDataSource.requestLtmplConfig(serverKey, sourceId);
+  async componentDidMount() {
+    const { sourceId, serverKey } = this.props;
 
-        this.setState({
-            ltmplConfig: ltmplConfigRes.ltmplConfig,
-        })
+    let ltmplConfigRes = await HCDataSource.requestLtmplConfig(
+      serverKey,
+      sourceId
+    );
 
-    }
+    this.setState({
+      ltmplConfig: ltmplConfigRes.ltmplConfig,
+    });
+  }
 
-    componentWillUnmount() {
-        if (this.timerId) {
-            clearInterval(this.timerId);
-        }
+  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());
 
-    handleUpload = () => {
-        const {sourceId, serverKey} = this.props;
-        const {importFile} = this.state;
-        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('失败！');
-                this.setState({
-                    importStatus: 'fail',
-                });
-            }
-        })
-    }
-
-    handleStopImport = () => {
+    Super.super(
+      {
+        url: `/v3/ltmpl/importer`,
+        serverKey,
+        method: "POST",
+        data: formData,
+      },
+      "formdata"
+    ).then((res) => {
+      //console.log(res)
+      if (res.status === "success") {
         this.setState({
-            importStatus: 'stop',
+          importStatus: "importing",
         });
-    }
+        this.timerId = setInterval(() => this.handleStatus(res.importId), 500);
+      } else {
+        message.error(translate("${失败}!"));
+        this.setState({
+          importStatus: "fail",
+        });
+      }
+    });
+  };
 
-    handleStatus = (importId) => {
-        const {serverKey} = this.props;
-        const {maxMsgCount, importStatus, logs} = this.state
-        Super.super({
-            url: `/v3/importer/status`,
-            serverKey,
-            method: 'GET',
-            query: {
-                importId: importId,
-                msgIndex: 0,
-                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 = '成功';
-                            } else if (item.type === "INFO") {
-                                color = "black"
-                                logLevel = '常规';
-                            } else if (item.type === "ERROR") {
-                                color = "red"
-                                logLevel = '错误';
-                            } else if (item.type === "WARN") {
-                                color = "rgb(250, 225, 4)"
-                                logLevel = '警告';
-                            }
-                            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('导入完成！');
-                            this.setState({
+  handleStopImport = () => {
+    this.setState({
+      importStatus: "stop",
+    });
+  };
 
-                            });
-                        }
-                        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,
-                        percent,
-                        importStatus: percent==100?'success':'importing',
-                        logs: loggs,
-                    })
-                }
+  handleStatus = (importId) => {
+    const { serverKey } = this.props;
+    const { maxMsgCount, importStatus, logs } = this.state;
+    const { translate } = this.context;
+    Super.super(
+      {
+        url: `/v3/importer/status`,
+        serverKey,
+        method: "GET",
+        query: {
+          importId: importId,
+          msgIndex: 0,
+          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("${警告}");
             }
-        )
-    }
-    onChangeShowLogLevelList = (showLogLevelList) => { //日志checkbox选择
+            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({
-            showLogLevelList,
+          statusMsg: res.message,
+          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("刷新成功！")
-    }
+  fresh = () => {
+    // this.setState({
+    //     fileList:[],
+    //     uploading: false,
+    //     statusMsg:"",
+    //     begin:true,
+    //     importAgain:"none",
+    //     importbtn:"block",
+    //     percent:0,
+    //     messages:[]
+    // })
+    // message.success("刷新成功！")
+  };
 
-    handleLogSetter = () => {
-        const {inputMaxMsgCount} = this.state
-        this.setState({
-            maxMsgCount: inputMaxMsgCount,
-            logSetterOpen: false,
-        })
-        message.success("设置成功！")
-    }
-    changeLogSetterOpen = open => {
-        this.setState({logSetterOpen: open});
-    };
-    download = () => {
-        const {sourceId, serverKey} = this.props;
-        const hydrocarbonToken = Units.hydrocarbonToken();
-        Units.downloadFile(Units.joinPath(Units.api(serverKey), `/v3/ltmpl/importer/template?sourceId=${sourceId}&@token=${hydrocarbonToken}&@programToken=${Units.programCode(serverKey)}`), "导入模板")
-    }
+  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.hydrocarbonToken();
+    Units.downloadFile(
+      Units.joinPath(
+        Units.api(serverKey),
+        `/v3/ltmpl/importer/template?sourceId=${sourceId}&@token=${hydrocarbonToken}&@programToken=${Units.programCode(
+          serverKey
+        )}`
+      ),
+      "导入模板"
+    );
+  };
 
-    render() {
-        const {ltmplConfig, importFile, maxMsgCount, percent, importStatus, showLogLevelList, logSetterOpen, logs} = this.state;
+  render() {
+    const {
+      ltmplConfig,
+      importFile,
+      maxMsgCount,
+      percent,
+      importStatus,
+      showLogLevelList,
+      logSetterOpen,
+      logs,
+    } = this.state;
 
-        let showLogs = [];
+    let showLogs = [];
 
-        for (let log of logs) {
-            if (showLogLevelList.includes(log.level)) {
-                showLogs.push(log.msg);
-            }
-        }
+    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: () => {
+    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>
 
-            },
-            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 content = (
-            <div>
-                <label>日志消息数上限：</label>
-                <InputNumber
-                    defaultValue={maxMsgCount}
-                    onChange={(value) => this.setState({inputMaxMsgCount: value})}
-                />
-                <Button
+              <Progress percent={percent} size="small" status="active" />
+              <div className="importBtns">
+                <Space>
+                  <Button
                     type="primary"
-                    style={{marginLeft: '10px'}}
-                    onClick={this.handleLogSetter}
-                >确定</Button>
-            </div>
-        )
-        return (
-            <div className="importData">
-                <h3>
-                    {'导入 -> '}{ltmplConfig ? ltmplConfig.title : ""}
-                    <p className="fr">
-                        <Button
-                            className="hoverbig"
-                            title="刷新"
-                            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/>选择导入文件
-                                    </Button>
-                                </Upload>
-                                <Button onClick={this.download}>
-                                    <DownloadOutlined/>下载导入模板
-                                </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' ? '正在导入' : importStatus == 'stop' ? '重新导入' : '开始导入'}
-                                </Button>
-                                <Button
-                                    onClick={this.handleStopImport}
-                                    disabled={importStatus != 'importing'}
-                                >
-                                    {'停止导入'}
-                                </Button></Space>
-                            </div>
-                            <List
-                                header={
-                                    <div className="listHeader">
-                                        <h4>导入日志</h4>
-                                        <div className="checks">
-                                            <CheckboxGroup value={showLogLevelList}
-                                                           onChange={this.onChangeShowLogLevelList}>
-                                                <Checkbox value="INFO" className="infoColor">常规</Checkbox>
-                                                <Checkbox value="SUC" className="sucColor">成功</Checkbox>
-                                                <Checkbox value="ERROR" className="errorColor">错误</Checkbox>
-                                                <Checkbox value="WARN" className="warnColor">警告</Checkbox>
-                                            </CheckboxGroup>
-                                            <div className="btns">
-                                                <Popover
-                                                    content={content}
-                                                    title="日志设置"
-                                                    trigger="click"
-                                                    placement="top"
-                                                    open={logSetterOpen}
-                                                    overlayStyle={{width: 350}}
-                                                    onOpenChange={this.changeLogSetterOpen}
-                                                >
-                                                    <Button title="日志设置" 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>
-        )
-    }
+                    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>
+    );
+  }
 }