339 lines
9.7 KiB
JavaScript
339 lines
9.7 KiB
JavaScript
// DangerJob.js - 危险作业页面组件
|
||
import React from 'react';
|
||
import { Table, Select, Pagination } from 'antd';
|
||
import styles from './../fullinter.less';
|
||
|
||
const { Option } = Select;
|
||
|
||
class DangerJob extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
currentPage: 1,
|
||
pageSize: 20,
|
||
};
|
||
this.isUnmounted = false;
|
||
}
|
||
|
||
// 生成公司选项（与 TrainingContent 保持一致）
|
||
getCompanyOptions = () => {
|
||
const { companyData } = this.props;
|
||
if (!companyData || companyData.length === 0) {
|
||
return <Option value="">暂无公司</Option>;
|
||
}
|
||
return companyData.map((company, index) => (
|
||
<Option key={company.ID || index} value={company.ID}>
|
||
{' '}
|
||
{/* 使用 ID 作为 value，与 TrainingContent 一致 */}
|
||
{company.NAME}
|
||
</Option>
|
||
));
|
||
};
|
||
|
||
// 处理公司筛选变化
|
||
handleCompanyChange = (value) => {
|
||
const { onCompanyChange } = this.props;
|
||
this.setState({ currentPage: 1 }, () => {
|
||
if (onCompanyChange) {
|
||
onCompanyChange(value);
|
||
}
|
||
});
|
||
};
|
||
|
||
// 处理页码变化
|
||
handlePageChange = (page, pageSize) => {
|
||
this.setState({ currentPage: page, pageSize });
|
||
};
|
||
|
||
// 处理每页条数变化
|
||
handleShowSizeChange = (current, size) => {
|
||
this.setState({ currentPage: 1, pageSize: size });
|
||
};
|
||
|
||
// 获取过滤后的数据（添加类型检查和默认值）
|
||
getFilteredData = () => {
|
||
const { dangerSubData, selectedCompany, companyData } = this.props;
|
||
|
||
// 确保 dangerSubData 是数组
|
||
let dataArray = Array.isArray(dangerSubData) ? dangerSubData : [];
|
||
|
||
if (dataArray.length === 0) {
|
||
return [];
|
||
}
|
||
|
||
// 根据选中的公司进行过滤（使用 ID 进行匹配）
|
||
if (selectedCompany) {
|
||
// 查找选中的公司名称
|
||
const selectedCompanyObj = companyData?.find((company) => company.ID === selectedCompany);
|
||
const selectedCompanyName = selectedCompanyObj?.NAME;
|
||
|
||
if (selectedCompanyName) {
|
||
return dataArray.filter((item) => item.companyName === selectedCompanyName);
|
||
}
|
||
}
|
||
return dataArray;
|
||
};
|
||
|
||
// 获取当前页数据
|
||
getCurrentPageData = () => {
|
||
const { currentPage, pageSize } = this.state;
|
||
const filteredData = this.getFilteredData();
|
||
// 确保 filteredData 是数组
|
||
const dataArray = Array.isArray(filteredData) ? filteredData : [];
|
||
const startIndex = (currentPage - 1) * pageSize;
|
||
const endIndex = startIndex + pageSize;
|
||
return {
|
||
data: dataArray.slice(startIndex, endIndex),
|
||
total: dataArray.length,
|
||
};
|
||
};
|
||
|
||
// 渲染危险作业表格
|
||
renderDangerTable = () => {
|
||
const { selectedCompany, companyData } = this.props;
|
||
const { currentPage, pageSize } = this.state;
|
||
const { data: tableData, total } = this.getCurrentPageData();
|
||
|
||
if (!tableData || tableData.length === 0) {
|
||
// 获取选中的公司名称用于显示
|
||
let companyName = '';
|
||
if (selectedCompany && companyData) {
|
||
const selectedCompanyObj = companyData.find((company) => company.ID === selectedCompany);
|
||
companyName = selectedCompanyObj?.NAME || '';
|
||
}
|
||
return (
|
||
<div
|
||
style={{
|
||
textAlign: 'center',
|
||
padding: '50px',
|
||
color: '#999',
|
||
fontSize: '26px',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
flex: 1,
|
||
}}
|
||
>
|
||
{selectedCompany ? `${companyName}暂无危险作业数据` : '暂无危险作业数据'}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// 表格列配置
|
||
const columns = [
|
||
{
|
||
title: '公司',
|
||
dataIndex: 'companyName',
|
||
key: 'companyName',
|
||
align: 'center',
|
||
width: 120,
|
||
fixed: 'left',
|
||
render: (text) => <strong>{text}</strong>,
|
||
},
|
||
{
|
||
title: '开始时间',
|
||
dataIndex: 'startDate',
|
||
key: 'startDate',
|
||
align: 'center',
|
||
width: 160,
|
||
render: (text) => <span>{text || '-'}</span>,
|
||
},
|
||
{
|
||
title: '结束时间',
|
||
dataIndex: 'endDate',
|
||
key: 'endDate',
|
||
align: 'center',
|
||
width: 160,
|
||
render: (text) => <span>{text || '-'}</span>,
|
||
},
|
||
{
|
||
title: '作业名称',
|
||
dataIndex: 'jobName',
|
||
key: 'jobName',
|
||
align: 'center',
|
||
minWidth: 120,
|
||
render: (text) => <span style={{ fontWeight: 'bold' }}>{text || '-'}</span>,
|
||
},
|
||
{
|
||
title: '作业区域',
|
||
dataIndex: 'areaName',
|
||
key: 'areaName',
|
||
align: 'center',
|
||
minWidth: 120,
|
||
render: (text) => <span>{text || '-'}</span>,
|
||
},
|
||
{
|
||
title: '作业地点',
|
||
dataIndex: 'place',
|
||
key: 'place',
|
||
align: 'center',
|
||
minWidth: 150,
|
||
render: (text) => <span>{text || '-'}</span>,
|
||
},
|
||
{
|
||
title: '作业人员',
|
||
dataIndex: 'users',
|
||
key: 'users',
|
||
align: 'center',
|
||
minWidth: 150,
|
||
render: (text) => <span>{text || '-'}</span>,
|
||
},
|
||
{
|
||
title: '监护人',
|
||
dataIndex: 'monitor',
|
||
key: 'monitor',
|
||
align: 'center',
|
||
width: 120,
|
||
render: (text) => <span>{text || '-'}</span>,
|
||
},
|
||
{
|
||
title: '审批领导',
|
||
dataIndex: 'approveUsers',
|
||
key: 'approveUsers',
|
||
align: 'center',
|
||
minWidth: 150,
|
||
render: (text) => <span>{text || '-'}</span>,
|
||
},
|
||
];
|
||
|
||
// 计算横向滚动宽度（如果列数过多）
|
||
const scrollX = columns.reduce((sum, col) => sum + (col.width || 120), 0);
|
||
const scrollConfig = scrollX > 1200 ? { x: scrollX } : {};
|
||
|
||
// 表格数据转换（添加唯一key）
|
||
const dataSource = tableData.map((item, index) => ({
|
||
key: `${item.companyName}_${item.startDate}_${index}`,
|
||
companyName: item.companyName,
|
||
startDate: item.startDate,
|
||
endDate: item.endDate,
|
||
jobName: item.jobName,
|
||
areaName: item.areaName,
|
||
place: item.place,
|
||
users: item.users,
|
||
monitor: item.monitor,
|
||
approveUsers: item.approveUsers,
|
||
}));
|
||
|
||
return (
|
||
<div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
|
||
<div
|
||
style={{
|
||
textAlign: 'center',
|
||
padding: '20px 0 0 0',
|
||
fontWeight: 'bold',
|
||
fontSize: '17px',
|
||
color: '#000',
|
||
}}
|
||
>
|
||
当日各公司危险作业清单
|
||
</div>
|
||
<div style={{ flex: 1, padding: '10px' }}>
|
||
<Table
|
||
columns={columns}
|
||
dataSource={dataSource}
|
||
pagination={false}
|
||
scroll={scrollConfig}
|
||
size="small"
|
||
bordered
|
||
className={styles.certificateTable}
|
||
/>
|
||
</div>
|
||
{/* 分页组件 */}
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
padding: '12px 16px',
|
||
borderTop: '1px solid #f0f0f0',
|
||
backgroundColor: '#fff',
|
||
}}
|
||
>
|
||
{/* 自定义每页条数选择器 */}
|
||
<div>
|
||
<span style={{ marginRight: '8px' }}>每页显示：</span>
|
||
<Select
|
||
value={pageSize}
|
||
onChange={(size) => {
|
||
this.setState({ currentPage: 1, pageSize: size });
|
||
}}
|
||
style={{ width: 80 }}
|
||
>
|
||
<Option value={10}>10条</Option>
|
||
<Option value={20}>20条</Option>
|
||
</Select>
|
||
</div>
|
||
<Pagination
|
||
current={currentPage}
|
||
pageSize={pageSize}
|
||
total={total}
|
||
// showSizeChanger
|
||
showQuickJumper
|
||
showTotal={(total) => `共 ${total} 条记录`}
|
||
onChange={this.handlePageChange}
|
||
onShowSizeChange={false}
|
||
// pageSizeOptions={['10', '20']}
|
||
/>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
componentDidMount() {
|
||
this.isUnmounted = false;
|
||
}
|
||
|
||
componentDidUpdate(prevProps) {
|
||
// 当筛选条件变化时，重置到第一页
|
||
if (prevProps.selectedCompany !== this.props.selectedCompany) {
|
||
this.setState({ currentPage: 1 });
|
||
}
|
||
// 当数据变化时，如果当前页没有数据且不是第一页，重置到第一页
|
||
if (prevProps.dangerSubData !== this.props.dangerSubData) {
|
||
const { currentPage } = this.state;
|
||
const filteredData = this.getFilteredData();
|
||
const dataArray = Array.isArray(filteredData) ? filteredData : [];
|
||
const maxPage = Math.ceil(dataArray.length / this.state.pageSize) || 1;
|
||
if (currentPage > maxPage) {
|
||
this.setState({ currentPage: 1 });
|
||
}
|
||
}
|
||
}
|
||
|
||
componentWillUnmount() {
|
||
this.isUnmounted = true;
|
||
}
|
||
|
||
render() {
|
||
const { companyData, selectedCompany } = this.props;
|
||
|
||
return (
|
||
<div className={styles.trainingContentWrapper}>
|
||
<div className={styles.trainingGrid}>
|
||
<div className={styles.trainingRow}>
|
||
<div className={styles.trainingCard}>
|
||
{/* 公司筛选器 */}
|
||
<div className={styles.monthSelectorWrapper}>
|
||
<span className={styles.monthSelectorLabel}>选择公司：</span>
|
||
<Select
|
||
value={selectedCompany}
|
||
onChange={this.handleCompanyChange}
|
||
style={{ width: 150 }}
|
||
className={styles.monthSelect}
|
||
allowClear
|
||
placeholder="全部公司"
|
||
>
|
||
{this.getCompanyOptions()}
|
||
</Select>
|
||
</div>
|
||
{this.renderDangerTable()}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
}
|
||
|
||
export default DangerJob;
|