mh_jy_safe_web/src/layout/FullOther/DangerJob.js

// 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;