修改sha1字段为hash
This commit is contained in:
wangsongsole
parent
fce9d9898a
commit
9097e7775c
|
|
@ -1,154 +1,154 @@
|
|||
import React, { useState } from "react";
|
||||
import { Button, Icon, BlockLoading, Notify, Grid } from "zent";
|
||||
import { bachUploadAll, handelResponse } from "../../assets/api.js";
|
||||
import "./style.less";
|
||||
import React, { useState } from 'react'
|
||||
import { Button, Icon, BlockLoading, Notify, Grid } from 'zent'
|
||||
import { bachUploadAll, handelResponse } from '../../assets/api.js'
|
||||
import './style.less'
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "行号",
|
||||
name: "id",
|
||||
title: '行号',
|
||||
name: 'id'
|
||||
},
|
||||
{
|
||||
title: "key",
|
||||
name: "key",
|
||||
title: 'key',
|
||||
name: 'key'
|
||||
},
|
||||
{
|
||||
title: "错误原因",
|
||||
name: "msg",
|
||||
},
|
||||
];
|
||||
title: '错误原因',
|
||||
name: 'msg'
|
||||
}
|
||||
]
|
||||
|
||||
const UseUploadExcel = (props) => {
|
||||
const { title = "提示", onClose, onImport, visible = false, url } = props;
|
||||
const { title = '提示', onClose, onImport, visible = false, url } = props
|
||||
|
||||
const [fileState, setFilesState] = useState(null); // 文件
|
||||
const [filesName, setFilesName] = useState(""); // 文件名
|
||||
const [filesTip, setFilesTip] = useState(2); // 解析 tip 0失败 1部分成功 200全部成功
|
||||
const [loading, setLoading] = useState(false); // 解析 loading
|
||||
const [sha1, setSha1] = useState(""); // 后端值
|
||||
const [disabledSureBtn, setDisabledSureBtn] = useState(true); // 导入 按钮
|
||||
const [partSuccessTag, setPartSuccessTag] = useState(false); // 部分成功
|
||||
const [showUpType, setShowUpType] = useState(false); // false无文件上传 true文件上传
|
||||
const [totalData, setTotalData] = useState(0);
|
||||
const [errCoun, setErrCoun] = useState(0);
|
||||
const [tableData, setTableData] = useState([]);
|
||||
const [fileState, setFilesState] = useState(null) // 文件
|
||||
const [filesName, setFilesName] = useState('') // 文件名
|
||||
const [filesTip, setFilesTip] = useState(2) // 解析 tip 0失败 1部分成功 200全部成功
|
||||
const [loading, setLoading] = useState(false) // 解析 loading
|
||||
const [hash, setHash] = useState('') // 后端值
|
||||
const [disabledSureBtn, setDisabledSureBtn] = useState(true) // 导入 按钮
|
||||
const [partSuccessTag, setPartSuccessTag] = useState(false) // 部分成功
|
||||
const [showUpType, setShowUpType] = useState(false) // false无文件上传 true文件上传
|
||||
const [totalData, setTotalData] = useState(0)
|
||||
const [errCoun, setErrCoun] = useState(0)
|
||||
const [tableData, setTableData] = useState([])
|
||||
|
||||
const bachUploadState_200 = (res) => {
|
||||
setFilesTip(200);
|
||||
setSha1(res.data.sha1);
|
||||
setDisabledSureBtn(false);
|
||||
console.log("res => 成功", res);
|
||||
};
|
||||
setFilesTip(200)
|
||||
setHash(res.data.hash)
|
||||
setDisabledSureBtn(false)
|
||||
console.log('res => 成功', res)
|
||||
}
|
||||
|
||||
const bachUploadState_0 = (res) => {
|
||||
setFilesTip(0);
|
||||
};
|
||||
setFilesTip(0)
|
||||
}
|
||||
|
||||
const erObj = (data) => {
|
||||
let msgObj = "";
|
||||
let msgObj = ''
|
||||
for (let key in data) {
|
||||
msgObj += data[key] + " ";
|
||||
msgObj += data[key] + ' '
|
||||
}
|
||||
return msgObj
|
||||
}
|
||||
return msgObj;
|
||||
};
|
||||
|
||||
const bachUploadState_1 = (res) => {
|
||||
setPartSuccessTag(true);
|
||||
let rowError = res.data.rowError;
|
||||
setTotalData(rowError.total);
|
||||
setErrCoun(rowError.error_count);
|
||||
setSha1(rowError.sha1);
|
||||
let errArr = [];
|
||||
setPartSuccessTag(true)
|
||||
let rowError = res.data.rowError
|
||||
setTotalData(rowError.total)
|
||||
setErrCoun(rowError.error_count)
|
||||
setHash(rowError.hash)
|
||||
let errArr = []
|
||||
for (let key in rowError.error) {
|
||||
errArr.push(rowError.error[key]);
|
||||
errArr.push(rowError.error[key])
|
||||
}
|
||||
errArr = errArr.map((item, index) => {
|
||||
return {
|
||||
key: item.key,
|
||||
id: index + 1,
|
||||
msg: erObj(item.msg),
|
||||
};
|
||||
});
|
||||
setTableData(errArr);
|
||||
};
|
||||
msg: erObj(item.msg)
|
||||
}
|
||||
})
|
||||
setTableData(errArr)
|
||||
}
|
||||
|
||||
/**
|
||||
* 文件后端解析
|
||||
*/
|
||||
const excelParseFun = async (file) => {
|
||||
setLoading(true);
|
||||
let formdata = new FormData();
|
||||
formdata.append("file", file);
|
||||
setLoading(true)
|
||||
let formdata = new FormData()
|
||||
formdata.append('file', file)
|
||||
|
||||
bachUploadAll(url, formdata).then((res) => {
|
||||
setLoading(false);
|
||||
setLoading(false)
|
||||
if (res.code === 200 || res.code === 0 || res.code === 1) {
|
||||
switch (res.code) {
|
||||
case 200:
|
||||
bachUploadState_200(res);
|
||||
return;
|
||||
bachUploadState_200(res)
|
||||
return
|
||||
case 0:
|
||||
bachUploadState_0(res);
|
||||
return;
|
||||
bachUploadState_0(res)
|
||||
return
|
||||
case 1:
|
||||
bachUploadState_1(res);
|
||||
return;
|
||||
bachUploadState_1(res)
|
||||
return
|
||||
default:
|
||||
return;
|
||||
return
|
||||
}
|
||||
} else {
|
||||
console.log("res =>", res);
|
||||
Notify.error(res.message);
|
||||
setFilesTip(0);
|
||||
console.log('res =>', res)
|
||||
Notify.error(res.message)
|
||||
setFilesTip(0)
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* input 文件改变
|
||||
* @param {file} e
|
||||
*/
|
||||
const fileChange = (e) => {
|
||||
let my_file = e.target.files[0];
|
||||
setFilesState(my_file);
|
||||
setFilesName(my_file.name);
|
||||
setShowUpType(true);
|
||||
excelParseFun(my_file); // 文件解析
|
||||
console.log("file =>", my_file);
|
||||
};
|
||||
let my_file = e.target.files[0]
|
||||
setFilesState(my_file)
|
||||
setFilesName(my_file.name)
|
||||
setShowUpType(true)
|
||||
excelParseFun(my_file) // 文件解析
|
||||
console.log('file =>', my_file)
|
||||
}
|
||||
|
||||
/**
|
||||
* 表格文件模版下载
|
||||
*/
|
||||
const downloadMBExcel = () => {
|
||||
window.location.href =
|
||||
"http://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/key%E6%A8%A1%E7%89%88.xlsx";
|
||||
};
|
||||
'http://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/key%E6%A8%A1%E7%89%88.xlsx'
|
||||
}
|
||||
|
||||
/**
|
||||
* 确定导入
|
||||
*/
|
||||
const importBtn = () => {
|
||||
if (sha1 !== "") {
|
||||
bachOnClose();
|
||||
onImport(sha1);
|
||||
if (hash !== '') {
|
||||
bachOnClose()
|
||||
onImport(hash)
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 重新上传
|
||||
*/
|
||||
const resetUpload = () => {
|
||||
setPartSuccessTag(false);
|
||||
setFilesTip(0);
|
||||
};
|
||||
setPartSuccessTag(false)
|
||||
setFilesTip(0)
|
||||
}
|
||||
|
||||
const bachOnClose = () => {
|
||||
setFilesTip(2);
|
||||
setPartSuccessTag(false);
|
||||
setShowUpType(false);
|
||||
onClose();
|
||||
};
|
||||
setFilesTip(2)
|
||||
setPartSuccessTag(false)
|
||||
setShowUpType(false)
|
||||
onClose()
|
||||
}
|
||||
|
||||
/**
|
||||
* 弹窗 顶部信息
|
||||
|
|
@ -157,23 +157,23 @@ const UseUploadExcel = (props) => {
|
|||
const uploadTop = () => {
|
||||
return (
|
||||
<div>
|
||||
<div className="step-bar">
|
||||
<div className="step-group">
|
||||
<div className="step-code active">1</div>
|
||||
<span className="step-label active">上传文件</span>
|
||||
<div className='step-bar'>
|
||||
<div className='step-group'>
|
||||
<div className='step-code active'>1</div>
|
||||
<span className='step-label active'>上传文件</span>
|
||||
</div>
|
||||
<div className="step-center">
|
||||
<div className="step-line"></div>
|
||||
<div className='step-center'>
|
||||
<div className='step-line'></div>
|
||||
</div>
|
||||
<div className="step-group">
|
||||
<div className="step-code">2</div>
|
||||
<span className="step-label">导入完成</span>
|
||||
<div className='step-group'>
|
||||
<div className='step-code'>2</div>
|
||||
<span className='step-label'>导入完成</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="upload-panel1">
|
||||
<div className="upload-label">直接上传</div>
|
||||
<div className="upload-info">
|
||||
<div className='upload-panel1'>
|
||||
<div className='upload-label'>直接上传</div>
|
||||
<div className='upload-info'>
|
||||
<div> - 支持文件类型：xls，xlsx，csv</div>
|
||||
<div>
|
||||
- 支持所有基础字段的导入，一次至多导入 10000
|
||||
|
|
@ -182,8 +182,8 @@ const UseUploadExcel = (props) => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 无，文件上传
|
||||
|
|
@ -191,25 +191,24 @@ const UseUploadExcel = (props) => {
|
|||
*/
|
||||
const uploadExcel = () => {
|
||||
return (
|
||||
<div className="upload-excel-01">
|
||||
<div className='upload-excel-01'>
|
||||
<input
|
||||
type="file"
|
||||
accept=".xls,.xlsx,.csv"
|
||||
className="upload-input"
|
||||
type='file'
|
||||
accept='.xls,.xlsx,.csv'
|
||||
className='upload-input'
|
||||
onChange={(e) => fileChange(e)}
|
||||
/>
|
||||
<Button
|
||||
style={{
|
||||
background: "#1890ff",
|
||||
color: "#FFFFFF",
|
||||
border: "none",
|
||||
}}
|
||||
>
|
||||
background: '#1890ff',
|
||||
color: '#FFFFFF',
|
||||
border: 'none'
|
||||
}}>
|
||||
上传文件
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 解析 tip
|
||||
|
|
@ -217,20 +216,20 @@ const UseUploadExcel = (props) => {
|
|||
*/
|
||||
const tipSuccess = () => {
|
||||
return (
|
||||
<div className="upload-success">
|
||||
<Icon type="check-circle" className="success-icon" />
|
||||
<div className='upload-success'>
|
||||
<Icon type='check-circle' className='success-icon' />
|
||||
<span>文件解析成功， 点击 "确定导入" 即可导入</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
const tipErr = () => {
|
||||
return (
|
||||
<div className="upload-error">
|
||||
<Icon type="error-circle" className="error-icon" />
|
||||
<div className='upload-error'>
|
||||
<Icon type='error-circle' className='error-icon' />
|
||||
<span>文件解析失败, 请查看导入规则并更新文件</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 文件上传
|
||||
|
|
@ -238,20 +237,20 @@ const UseUploadExcel = (props) => {
|
|||
*/
|
||||
const upFilesExcel = () => {
|
||||
return (
|
||||
<div className="up-files-excel">
|
||||
<div className="user-file-box">
|
||||
<p className="user-file-name">
|
||||
<Icon type="text-guide-o" />
|
||||
<div className='up-files-excel'>
|
||||
<div className='user-file-box'>
|
||||
<p className='user-file-name'>
|
||||
<Icon type='text-guide-o' />
|
||||
{filesName}
|
||||
</p>
|
||||
<div className="file-update-box">
|
||||
<div className='file-update-box'>
|
||||
<input
|
||||
type="file"
|
||||
accept=".xls,.xlsx,.csv"
|
||||
className="upload-input1"
|
||||
type='file'
|
||||
accept='.xls,.xlsx,.csv'
|
||||
className='upload-input1'
|
||||
onChange={(e) => fileChange(e)}
|
||||
/>
|
||||
<Icon type="up-circle-o" />
|
||||
<Icon type='up-circle-o' />
|
||||
<span>更新文件</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -259,16 +258,16 @@ const UseUploadExcel = (props) => {
|
|||
{(() => {
|
||||
switch (filesTip) {
|
||||
case 0:
|
||||
return tipErr();
|
||||
return tipErr()
|
||||
case 200:
|
||||
return tipSuccess();
|
||||
return tipSuccess()
|
||||
default:
|
||||
return;
|
||||
return
|
||||
}
|
||||
})()}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 底部
|
||||
|
|
@ -276,43 +275,41 @@ const UseUploadExcel = (props) => {
|
|||
*/
|
||||
const uploadFooter = () => {
|
||||
return (
|
||||
<div className="upload-panel1">
|
||||
<div className="upload-label">下载模板并填写后上传</div>
|
||||
<div className="upload-info">
|
||||
<div className='upload-panel1'>
|
||||
<div className='upload-label'>下载模板并填写后上传</div>
|
||||
<div className='upload-info'>
|
||||
<div>
|
||||
请先下载「数字世界营销管理系统_keys_模板」并按照模板填写后再上传。
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
type="default"
|
||||
className="btn-upload1"
|
||||
onClick={() => downloadMBExcel()}
|
||||
>
|
||||
type='default'
|
||||
className='btn-upload1'
|
||||
onClick={() => downloadMBExcel()}>
|
||||
下载模板
|
||||
</Button>
|
||||
|
||||
<div className="btn-group">
|
||||
<Button type="default" onClick={() => bachOnClose()}>
|
||||
<div className='btn-group'>
|
||||
<Button type='default' onClick={() => bachOnClose()}>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
type='primary'
|
||||
disabled={disabledSureBtn}
|
||||
onClick={(e) => {
|
||||
importBtn(e);
|
||||
importBtn(e)
|
||||
}}
|
||||
style={{
|
||||
background: "#1890ff",
|
||||
color: "#FFFFFF",
|
||||
border: "none",
|
||||
}}
|
||||
>
|
||||
background: '#1890ff',
|
||||
color: '#FFFFFF',
|
||||
border: 'none'
|
||||
}}>
|
||||
确定导入
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 全部错误和全部正确
|
||||
|
|
@ -324,8 +321,8 @@ const UseUploadExcel = (props) => {
|
|||
{showUpType ? upFilesExcel() : uploadExcel()}
|
||||
{uploadFooter()}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 部分正确
|
||||
|
|
@ -333,64 +330,62 @@ const UseUploadExcel = (props) => {
|
|||
const partSuccess = () => {
|
||||
return (
|
||||
<div>
|
||||
<div className="file-upload-tip">
|
||||
<div className='file-upload-tip'>
|
||||
文件上传成功.共 {totalData} 条手机号,其中 {totalData - errCoun}
|
||||
条可成功导入
|
||||
</div>
|
||||
<div className="file-errmsg1">
|
||||
<div className='file-errmsg1'>
|
||||
发现以下 {errCoun} 条不符合要求,将不会被导入
|
||||
</div>
|
||||
|
||||
<div className="gridpanel1">
|
||||
<div className='gridpanel1'>
|
||||
<Grid
|
||||
columns={columns}
|
||||
datasets={tableData}
|
||||
scroll={{ y: 250 }}
|
||||
size="large"
|
||||
size='large'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="foot-bar">
|
||||
<div className="btn-group">
|
||||
<div className='foot-bar'>
|
||||
<div className='btn-group'>
|
||||
<Button
|
||||
type="default"
|
||||
type='default'
|
||||
onClick={(e) => {
|
||||
resetUpload();
|
||||
}}
|
||||
>
|
||||
resetUpload()
|
||||
}}>
|
||||
重新上传
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
type='primary'
|
||||
onClick={(e) => {
|
||||
importBtn(e);
|
||||
importBtn(e)
|
||||
}}
|
||||
style={{
|
||||
background: "#1890ff",
|
||||
color: "#FFFFFF",
|
||||
border: "none",
|
||||
}}
|
||||
>
|
||||
background: '#1890ff',
|
||||
color: '#FFFFFF',
|
||||
border: 'none'
|
||||
}}>
|
||||
确定导入
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{visible ? (
|
||||
<div>
|
||||
<div className="modal"></div>
|
||||
<div className="import-excel" style={{ height: "auto" }}>
|
||||
<BlockLoading loading={loading} iconText="解析中..." icon="circle">
|
||||
<div className="import-header">
|
||||
<div className="import-title">{title}</div>
|
||||
<div className='modal'></div>
|
||||
<div className='import-excel' style={{ height: 'auto' }}>
|
||||
<BlockLoading loading={loading} iconText='解析中...' icon='circle'>
|
||||
<div className='import-header'>
|
||||
<div className='import-title'>{title}</div>
|
||||
<Icon
|
||||
type="close"
|
||||
className="import-close"
|
||||
type='close'
|
||||
className='import-close'
|
||||
onClick={() => bachOnClose()}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -400,7 +395,7 @@ const UseUploadExcel = (props) => {
|
|||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default UseUploadExcel;
|
||||
export default UseUploadExcel
|
||||
|
|
|
|||
|
|
@ -193,17 +193,18 @@ export default class acclist extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
iptsureFn(sha1) {
|
||||
iptsureFn(hash) {
|
||||
let status = this.state.status > 0 ? this.state.status : null
|
||||
this.setState({ page: 1 })
|
||||
this.setState({ limit: 10 })
|
||||
this.setState({ page: 1, limit: 10 })
|
||||
let data = {
|
||||
page: 1,
|
||||
limit: 10,
|
||||
sha1
|
||||
limit: 10
|
||||
}
|
||||
if (status) {
|
||||
data.status = status
|
||||
/* 兼容不同参数 当进行倒入操作时hash为字符串否则为object */
|
||||
if (typeof hash !== 'string') {
|
||||
data = { ...data, ...hash }
|
||||
} else {
|
||||
data = { ...data, hash }
|
||||
}
|
||||
if (status) {
|
||||
data.status = status
|
||||
|
|
@ -393,7 +394,7 @@ export default class acclist extends React.Component {
|
|||
}
|
||||
|
||||
if (this.state.bachApiType === 2) {
|
||||
batchUploadVoid({ sha1: data }).then((res) => {
|
||||
batchUploadVoid({ hash: data }).then((res) => {
|
||||
handelResponse(
|
||||
res,
|
||||
(req, msg) => {
|
||||
|
|
@ -408,7 +409,7 @@ export default class acclist extends React.Component {
|
|||
}
|
||||
|
||||
if (this.state.bachApiType === 3) {
|
||||
batchUploadUsed({ sha1: data }).then((res) => {
|
||||
batchUploadUsed({ hash: data }).then((res) => {
|
||||
handelResponse(
|
||||
res,
|
||||
(req, msg) => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue