aldehyde 0.0.1

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

@@ -0,0 +1,316 @@
+import React from 'react'
+import {Card,Button,Upload,message,Progress,List,Checkbox,Row,Col,Modal,Popover,InputNumber } from 'antd'
+import {SyncOutlined,ReloadOutlined ,SnippetsOutlined,UploadOutlined,CopyOutlined,SettingOutlined} from '@ant-design/icons';
+import Super from "../tmpl/superagent"
+import Units from "../units"
+import './index.css'
+import {LtmplConfig, QueryKey, SelectedRow, SourceName, TmplBaseProps} from "../tmpl/interface";
+import moment from "moment";
+import HCDataSource from "../tmpl/hc-data-source";
+
+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';
+
+interface ExcelImportProps  {
+    sourceId:string,
+};
+
+interface ExcelImportStat {
+    inputMaxMsgCount:number;
+    maxMsgCount:number;
+    percent:number;
+    statusMsg:string;
+    importStatus:string,
+    showLogLevelList: LogLevel[],
+    logSetterVisible: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,
+        logSetterVisible:false,
+        showLogLevelList:[...logLevelList],
+        logSerialId:undefined,
+        ltmplConfig:undefined,
+    }
+
+    timerId=undefined;
+
+   async componentDidMount(){
+       const {sourceId}=this.props;
+
+        let ltmplConfigRes = await HCDataSource.requestLtmplConfig(sourceId);
+
+        this.setState({
+            ltmplConfig:ltmplConfigRes.ltmplConfig,
+        })
+
+    }
+    componentWillUnmount(){
+        if(this.timerId){
+            clearInterval(this.timerId);
+        }
+    }
+
+
+
+    handleUpload = () => {
+        const {sourceId}=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`,
+            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=()=>{
+        this.setState({
+            importStatus: 'stop',
+        });
+    }
+
+    handleStatus=(importId)=>{
+        const {maxMsgCount,importStatus}=this.state
+        Super.super({
+            url:`/v3/importer/status`,
+            method:'GET',
+            query:{
+                importId:importId,
+                msgIndex:0,
+                maxMsgCount,
+                interrupted: importStatus=='stop',
+            }          
+        },"","none").then((res)=>{
+            const MSG=[]
+            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})
+            }
+
+            this.setState({
+                statusMsg:res.message,
+                percent:Math.floor((res.current/res.totalCount)*100),
+                logs:MSG,
+            })
+            if(res.completed===true){
+                clearInterval(this.timerId);
+                message.success('导入完成！');
+                this.setState({
+                    importStatus:'success'
+                });
+            }
+            if(importStatus=='stop'){
+                clearInterval(this.timerId);
+            }
+
+        })
+    } 
+    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
+        this.setState({
+            maxMsgCount:inputMaxMsgCount,
+            logSetterVisible:false,
+        })
+        message.success("设置成功！")
+    }
+    changeLogSetterVisible = visible => {
+        this.setState({ logSetterVisible:visible });
+      };
+
+
+    render(){
+        const { ltmplConfig,importFile,maxMsgCount ,percent,importStatus,showLogLevelList,logSetterVisible,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 content=(
+            <div>
+                <label>日志消息数上限：</label>
+                <InputNumber 
+                    defaultValue={maxMsgCount} 
+                    onChange={(value)=>this.setState({inputMaxMsgCount:value})}
+                    />
+                <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 style={{minWidth:600}}>
+                            <Upload {...props}>
+                                <Button>
+                                    <UploadOutlined />选择导入文件
+                                </Button>
+                            </Upload>
+                            <Progress percent={percent} size="small" status="active" />
+                            <div className="importBtns">
+                                <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>
+
+                            </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" 
+                                                    visible={logSetterVisible}
+                                                    overlayStyle={{width:350}}
+                                                    onVisibleChange={this.changeLogSetterVisible}
+                                                    >
+                                                    <Button title="日志设置" type="primary" size="small">
+                                                        <SettingOutlined />
+                                                    </Button>
+                                                </Popover>
+                                            </div>
+                                        </div>
+                                    </div>
+                                }
+                                footer={<div>{importStatus}</div>}
+                                bordered
+                                dataSource={showLogs}
+                                renderItem={item => (<List.Item>{item}</List.Item>)}
+                                className="importList"
+                                />
+                        </Card>
+                    </Col>
+                </Row>
+            </div>
+        )
+    }
+}

package/src/components/import/index.css

@@ -0,0 +1,54 @@
+.importBtns button{
+    margin:15px 0 10px 0
+}
+.importList .ant-spin-container{
+    height:300px;
+    overflow: auto
+}
+.ant-list-item-content p{
+    margin-bottom: 0;
+}
+.listHeader h4{
+    display: inline;
+}
+.listHeader .checks{
+    float:right;
+    position: relative;
+    padding-right: 62px
+}
+.listHeader .btns{
+    position: absolute;
+    right:-22px;
+    top:0;
+}
+.infoColor{
+    color:black;
+}
+.infoColor .ant-checkbox-checked .ant-checkbox-inner{
+    background-color:black;
+    border-color: black;
+}
+.sucColor{
+    color:green;
+}
+.sucColor .ant-checkbox-checked .ant-checkbox-inner{
+    background-color:green;
+    border-color: green;
+}
+.errorColor{
+    color:red;
+}
+.errorColor .ant-checkbox-checked .ant-checkbox-inner{
+    background-color:red;
+    border-color: red;
+}
+.warnColor{
+    color:rgb(250, 225, 4);
+}
+.warnColor .ant-checkbox-checked .ant-checkbox-inner{
+    background-color:rgb(250, 225, 4);
+    border-color: rgb(250, 225, 4);
+}
+.importData h3{
+    font-size: 18px
+}