【HTML+REACT+ANTD 表格操作】处理(改变)数据，改变DOM
博主：_LJaXi
专栏： React | 前端框架
主要是一些表格DOM操作，数据更换
个人向
HTML
<!DOCTYPE html>
<html lang="en">
<link>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>生产监控</title>
<link rel="stylesheet" href="https://unpkg.com/antd@3.9.3/dist/antd.min.css" />
<link rel="stylesheet" href="/css/jiankongindex.css">
</link>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://unpkg.com/antd@3.9.3/dist/antd.min.js"></script>
<script src="/js/jquery.1.10.min.js"></script>
<script src="/js/appjs/shengchan/changeShifts/contant.js"></script>
</head>
<body>
<div id="root"></div>
<script th:inline="javascript" type="text/babel">
let collect = [[${collect}]];
let changeShifts = [[${changeShifts}]];
const ProductionMonitoring = () => {
'use strict';
let disposeArray = [];
const { useState, useEffect, useRef } = React;
const [someDay, setSomeDay] = useState(new Date());
const [startWorkshop, setStartWorkshop] = useState('');
const [maintenanceWorkshop, setMaintenanceWorkshop] = useState('');
const [footerDomWidth, setFooterDomWidth] = useState('');
const tableDOM = useRef(null);
const [selectValue, setSetlectValue] = useState('');
const [date, setDate] = useState('');
const [searchData, setSearchData] = useState([]);
useEffect(() => {
setStartWorkshop(changeShifts?.yproductionlog);
setMaintenanceWorkshop(changeShifts?.wproductionlog);
}, []);
useEffect(() => {
curstomFontColor();
if (tableDOM.current) {
countFootWidth()
}
windowResizeTableFooterWidth()
const rableBodyContainer = tableDOM.current.getPopupContainer().querySelector('.ant-table-tbody').children;
for (let i = 0; i < rableBodyContainer.length; i++) {
const trItem = rableBodyContainer[i];
const children = trItem.children;
for (let j = 0; j < children.length; j++) {
const childElement = children[j];
if (j === 1 || j === 2 || j === 4 || j === 5) {
childElement.style.backgroundColor = 'rgb(7,33,75)'
}
}
}
}, [searchData, setSearchData]);
const isToday = (date) => {
const today = new Date();
return today.getFullYear() === date.getFullYear() &&
today.getMonth() === date.getMonth() &&
today.getDate() === date.getDate()
};
const replaceString = (str) => {
const lastChar = str.slice(-1);
switch (lastChar) {
case "0":
return str.replace(lastChar, ": 停止");
case "1":
return str.replace(lastChar, ": 运行");
case "2":
return str.replace(lastChar, ": 故障");
default:
return str;
}
};
const concatArray = (arr_one, arr_two) => {
let concatedArray = [];
for (let i = 0; i < arr_one.length; i++) {
if (arr_one[i].name1 || arr_one[i].name2) {
for (let j = 0; j < arr_one[i].name1.length; j++) {
arr_one[i].name1[j] = replaceString(arr_one[i].name1[j])
}
for (let j = 0; j < arr_one[i].name2.length; j++) {
arr_one[i].name2[j] = replaceString(arr_one[i].name2[j])
}
}
}
disposeArray = arr_one;
for (let i = 0; i < 5; i++) {
let startIndexOne = JSON.parse(JSON.stringify(disposeArray[i]));
let startIndexTwo = JSON.parse(JSON.stringify(arr_two[i]));
concatedArray.push({ ...startIndexOne, ...startIndexTwo });
}
for (let i = 0; i < concatedArray.length; i++) {
const concatStringOne = concatedArray[i].name1.reduce((acc, curr, index) => {
return acc + curr + (index < concatedArray[i].name1.length - 1 ? '、' : '');
}, '');
const concatStringTwo = concatedArray[i].name2.reduce((acc, curr, index) => {
return acc + curr + (index < concatedArray[i].name2.length - 1 ? '、' : '');
}, '');
concatedArray[i].name1 = concatStringOne;
concatedArray[i].name2 = concatStringTwo;
}
return concatedArray;
};
const countFootWidth = () => {
const footDomWidth = tableDOM.current.getPopupContainer().querySelector('.ant-table-row').children[0].offsetWidth
setFooterDomWidth(footDomWidth);
};
const windowResizeTableFooterWidth = () => {
const handleResize = () => {
countFootWidth();
};
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
};
const selectChange = (e) => {
setSetlectValue(e)
};
const dateChange = (e) => {
let newDate = new Date(e._d);
setSomeDay(newDate);
let selectDateValue = newDate.getFullYear() + '-' + ((newDate.getMonth()
+ 1) < 10 ? '0' + (newDate.getMonth() + 1) : newDate.getMonth() + 1
) + '-' + (newDate.getDate() < 10 ? '0' + newDate.getDate() : newDate.getDate());
setDate(selectDateValue)
};
const submitTable = () => {
if (!selectValue) return alert("类型为必填项");
if (!date) return alert("时间为必填项");
$.ajax({
type: "POST",
url: "/shengchan/changeShifts/update",
data: JSON.stringify({ id: changeShifts.id, yproductionlog: startWorkshop, wproductionlog: maintenanceWorkshop }),
contentType: 'application/json;charset=utf-8',
})
};
const onSearch = async () => {
await $.ajax({
type: "POST",
url: "/shengchan/changeShifts/search",
data: JSON.stringify({id: changeShifts.id, datadate: date, atype: selectValue}),
contentType : 'application/json;charset=utf-8',
}).then(res => {
if ( Array.isArray(res?.collect)) {
const beforeClearArray = edTableColumnInnerHtml(edTableColumnInnerHtml(concatArray(res.collect, TABLE_DATA), 1), 2).slice();
setSearchData([{a: ''}]);
setSearchData(beforeClearArray);
}
});
};
const curstomFontColor = () => {
let tableColumnDOM = tableDOM.current?.getPopupContainer()?.querySelectorAll('td');
tableColumnDOM.forEach((node) => {
let handleData = handlerNodeStr(node.innerHTML.slice("、"));
node.innerHTML = handleData;
});
};
const handlerNodeStr = (node) => {
return node.replace(/</g, "<").replace(/>/g, ">");
};
const edTableColumnInnerHtml = (d, index) => {
for (let i = 0; i < d.length; i++) {
let splitArr = d[i][(`name${index}`)].split("、");
for (let j = 0; j < splitArr.length; j++) {
if (splitArr[j].slice(-2) === "运行") {
splitArr[j] = splitArr[j].replace(splitArr[j].slice(-2), `<span style="color: green">${splitArr[j].slice(-2)}</span>`)
} else if (splitArr[j].slice(-2) === "故障") {
splitArr[j] = splitArr[j].replace(splitArr[j].slice(-2), `<span style="color: orange">${splitArr[j].slice(-2)}</span>`)
} else if (splitArr[j].slice(-2) === "停止") {
splitArr[j] = splitArr[j].replace(splitArr[j].slice(-2), `<span style="color: red">${splitArr[j].slice(-2)}</span>`)
}
}
d[i][`name${index}`] = splitArr.join("、");
}
return d;
};
const FootDom = () => {
return (
<>
<div className="footer-container">
<div
className="footer-item"
style={{
width: `${footerDomWidth}px`,
borderRight: '1px solid #eee'
}}
>
<span className="content">
{FOOTER_OPERATION}
</span>
</div>
<div style={{ flex: 1 }}>
<antd.Input value={startWorkshop} className="w1 h1" placeholder="请输入" onChange={(e) => setStartWorkshop(e.target.value)} />
</div>
</div>
<div className="footer-container">
<div
className="footer-item"
style={{
width: `${footerDomWidth}px`,
borderRight: '1px solid #eee'
}}>
<span className="content">
{FOOTER_MAINTENANCE}
</span>
</div>
<div style={{ flex: 1 }}>
<antd.Input value={maintenanceWorkshop} className="w1 h1" placeholder="请输入" onChange={(e) => setMaintenanceWorkshop(e.target.value)} />
</div>
</div>
</>
)
};
return (
<div className="table-container">
<antd.Table
ref={tableDOM}
pagination={false}
columns={COLUMNS}
dataSource={searchData.length > 0 ? searchData : (edTableColumnInnerHtml(edTableColumnInnerHtml(concatArray(collect, TABLE_DATA), 1), 2))}
footer={() => FootDom()}
/>
<div className="operate-table">
<div className="operate-item">
<antd.DatePicker className="i1" onChange={dateChange} placeholder="选择日期" />
<antd.Select value={selectValue} onChange={selectChange} className="w1 i1">
<Option value="白班">白班</Option>
<Option value="夜班">夜班</Option>
</antd.Select>
<antd.Button className="w1 i1" type="primary" size="large" onClick={onSearch}>< img src="/img/search.png" className="icon" />搜索</antd.Button>
{isToday(someDay) && (
<antd.Button className="w1 i1" type="primary" size="large" onClick={submitTable}>< img src="/img/submit.png" className="icon" />提交</antd.Button>
)}
</div>
</div>
</div>
)
};
const container = document.getElementById('root');
ReactDOM.render(<ProductionMonitoring />, container)
</script>
</body>
</html>
js
const COLUMNS = [
{
title: '工艺段',
dataIndex: 'gyd1',
key: 'gyd1',
align: 'center'
},
{
title: '项目',
dataIndex: 'xm1',
key: 'xm1',
align: 'center'
},
{
title: '记录',
dataIndex: 'name1',
key: 'name1',
align: 'center'
},
{
title: '工艺段',
dataIndex: 'gyd2',
key: 'gyd2',
align: 'center'
},
{
title: '项目',
dataIndex: 'xm2',
key: 'xm2',
align: 'center'
},
{
title: '记录',
dataIndex: 'name2',
key: 'name2',
align: 'center'
}
]
const TABLE_DATA = [
{
key: '1',
gyd1: '一二期脱水机房',
xm1: '一二期脱水机、状态',
// name1: '',
gyd2: '聚铁加药间',
xm2: '聚铁加药间、状态',
// name2: ''
},
{
key: '2',
gyd1: '聚铁加药间',
xm1: '聚铁加药间、状态',
// name1: '',
gyd2: '一二期浓缩池',
xm2: '剩余污泥泵、状态',
// name2: ''
},
{
key: '3',
gyd1: '消化池',
xm1: '阀门、状态',
// name1: '',
gyd2: '三期浓缩池',
xm2: '排泥泵、状态',
// name2: ''
},
{
key: '4',
gyd1: '污泥浓缩机',
xm1: '污泥浓缩机、状态',
// name1: '',
gyd2: '一、二期剩余污泥泵',
xm2: '一、二期剩余污泥泵、状态',
// name2: ''
},
{
key: '5',
gyd1: '污泥料仓液位',
xm1: '污泥料仓液位、状态',
// name1: '',
gyd2: '脱水机房',
xm2: '柱塞泵、皮带机、螺旋、状态',
// name2: ''
}
]
const FOOTER_OPERATION = '运行车间、交班内容'
const FOOTER_MAINTENANCE = '维护车间、交班内容'
css
.ant-table-thead > tr > th {
color: #aadbfa;
background-color: #2b5689;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.ant-table-tbody > tr > td {
height: 80px;
color: #aadbfa;
background-color: #2b5689;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.footer-container {
display: flex;
min-height: 80px;
color: #aadbfa;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
background-color: #2b5689;
}
.ant-input {
color: #fff;
background-color: rgb(7,33,75);
}
.footer-container .footer-item {
position: relative;
max-height: 100px;
text-align: center;
}
.footer-container .footer-item .content {
display: inline-block;
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.ant-table-footer {
padding: 0 !important;
border-top: 0 !important;
}
.table-container {
display: flex;
}
.table-container .ant-table-wrapper {
flex: 1;
}
.table-container .operate-table {
padding: 8px;
min-width: 150px;
max-width: 150px;
color: #aadbfa;
background-color: #2b5689;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.operate-item {
/*display: flex;*/
/*flex-direction: column;*/
/*justify-content: space-between;*/
height: 170px;
}
.table-container .operate-table .w1 {
width: 100%;
}
.h1 {
height: 100%;
}
.i1 {
margin: 5px 0 5px 0;
}
.table-container .operate-table .icon {
width: 20px;
height: 20px;
margin: 0 10px 0 0;
}