需求:
1:textarea框里输入内容,根据内容自动生成表格table;
2:规定,根据输入的内容,按空格划分表格列,\n划分表格行;
3:表格第3列,内容可能是“待定”和“暂无”,如果不是这两个第3列的内容不允许重复;
handleCopy = (e) => {
let value = e.target.value;
//用来渲染table用的copyArr
let copyArr = [];
//根据\n换行
let rows = value.split("\n");
rows.forEach(function (item, index) {
//根据空格换列
if (item.replace(/\s*/g, "") == "") {
return;
}
let column = item.split(/\s+/);
copyArr.push(column);
})
this.setState({data:copyArr})
// 如果只是划分行划分列,到此数据应该就可以用了
//渲染完成,开始判断,判断需求有些复杂,自己整理过后看着依旧复杂。。。 记录下吧,防止以后找不到
this.handleJugement(rows)
}
// 当复制成功时,需要判断条件是否满足可以导入的情况
handleJugement = (rows) => {
const { dispatch } = this.props;
//存储代码数组,此数组过滤掉为“待定”情况,需要传到服务器判断是否有重复添加的代码
let bondCodeArr = [];
//把所有代码放一个数组中,判断是否有相等的,除了”待定“,为了精准到哪一行所以需要把所有的代码整合到一起
let bondCodeRepeatArr = [];
//去除所有行中,字符串中所有空格,为了对比数组中两个对象是否完全相等,完全相等不允许添加
let bondBependingRepeatArr = [];
for (let i = 0; i < rows.length; i++) {
if (rows[i].replace(/\s*/g, "") == "") {
continue;
}
let pattern = new RegExp("[`~!@#^&\\?~!@#&]");
// let dateregExp = /\b\d{4}\d{1,2}\d{1,2}\b/;
let column = rows[i].split(/\s+/);
if (column[0].replace(/\s*/g, "") == "") {
message.error("第" + (i + 1) + "行第一格不能为空格,请确认后重新导入");
this.setState({ isFalseData: true })
return false;
}
if (column[2] != "待定") {
bondCodeArr.push(column[2])
}
bondCodeRepeatArr.push(column[2]);
bondBependingRepeatArr.push(rows[i].replace(/\s*/g, ""))
//判断三个时间是否格式正确
// if (!dateregExp.test(column[0]) || !dateregExp.test(column[1]) || !dateregExp.test(column[7])) {
// message.error("第" + (i + 1) + "行簿记日期、缴款日、簿记时间日期格式为“YYYYMMDD”,请确认后重新导入");
// this.setState({ isFalseData: true })
// return false;
// }
//需要判断长度是否足够或者超过,需要判断两个数组的数据不能完全一致,期限,规模,利率区间不能有特殊字符
if (column.length > 20) {
if (column[20].trim() !== "") {
message.error("第" + (i + 1) + "行数据超出预期,请确认后重新导入");
this.setState({ isFalseData: true })
return false;
}
}
if (column.length < 20 || column[19].trim() == "") {
message.error("第" + (i + 1) + "行数据不完整,请确认后重新导入")
this.setState({ isFalseData: true })
return false;
}
if (pattern.test(column[8]) || pattern.test(column[9]) || pattern.test(column[13])) {
message.error("第" + (i + 1) + "行期限、规模、利率区间不能带有特殊字符,请确认后重新导入")
this.setState({ isFalseData: true })
return false;
}
else {
this.setState({ isFalseData: false })
}
}
/**
* 去除字符串中所有空格之后如果还想等则提示有重复数据
*/
if (this.isRepeat(bondCodeRepeatArr, '代码有重复项')) {
return false;
}
if (this.isRepeat(bondBependingRepeatArr, '内容全部重复')) {
return false;
}
//调接口判断是否跟数据库中的代码有重复,当这次修改并没有改动到代码时,则无需再次去掉接口
if (bondCodeArr.join('').trim() != this.state.bondCodeArrCompare.join('').trim()) {
dispatch({
type: 'newsinfo/searchRepeatBond',
payload: {
"bondCode": bondCodeArr.join(','),
},
callback: res => {
if (res.resultCode == "200") {
if (res.resultMsg.length > 0) {
let str = res.resultMsg + '代码有重复,请确认后重新导入'
message.error(str)
this.setState({ isFalseData: true, isRepeatBondcode: true, repeatStr: str })
return false;
} else {
this.setState({ isFalseData: false, isRepeatBondcode: false, repeatStr: '' })
}
}
}
})
this.setState({
bondCodeArrCompare: bondCodeArr
})
} else {
if (this.state.isRepeatBondcode) {
message.error(this.state.repeatStr)
this.setState({ isFalseData: true })
return false;
}
}
}
// 判断数组间的两个元素是否相等
isRepeat = (arr, str) => {
let hash = {};
for (let i in arr) {
if (hash[arr[i]]) {
if (arr[i] != "暂无" && arr[i] != "待定") {
message.error("第" + (Number(i) + 1) + `行${str},请确认后重新导入`);
this.setState({ isFalseData: true })
return true;
}
}
hash[arr[i]] = true;
}
return false;
}
render(){
return (
<Table loading={loading} bordered dataSource={data} rowKey={e => Math.random()} scroll={{ x: true }} pagination={false} size="middle" columns={columns} />
)
}