gt_client_pad/src/pages/EqSelfInspection/components/Table/WarningTable.js

import ThresholdDetail from '@/components/ThresholdDetail';
import ThresholdModal from '@/components/ThresholdDetail/ThresholdModal';
import { changeRecordStatus } from '@/services/eqSelfInspection';
import { Table, message } from 'antd';
import { useState } from 'react';
import styles from '../PatrolReportDetail.less';
import Empty from './Empty';
import ErrorHandleModal from './ErrorHandleModal';

export default function WarningTable(props) {
  const { data, userList, items, mandate = [] } = props;
  const [loading, setLoading] = useState(false);
  const [visible, setVisible] = useState(false);
  const [errVisible, setErrVisible] = useState(false);
  const [currentItem, setCurrentItem] = useState({});

  const handleError = async (values) => {
    setLoading(true);
    var res = await changeRecordStatus({
      ...values,
      Id: currentItem.Id,
      DeviceCode: currentItem.DeviceCode,
      DeviceName: currentItem.DeviceName,
      RecordId: data.Id,
      RepairMan: values.RepairMan * 1,
    });
    setLoading(false);
    if (res) {
      message.success('操作成功');
      setErrVisible(false);
    }
  };
  const columns = [
    {
      title: '设备名称',
      width: '20%',
      dataIndex: 'DeviceName',
    },
    {
      title: '巡检项',
      dataIndex: ['TemplateItem', 'Name'],
    },
    {
      title: '设定值范围',
      width: '30%',
      render: (record) => (
        <ThresholdDetail current={record.Value || 0} data={record || {}} />
      ),
    },
    {
      title: '状态',
      dataIndex: 'Status',
      width: '1.25rem',
      render: (Status) => {
        switch (Status) {
          case -1:
          case 0:
            return (
              <div>
                <i
                  className={styles.iconStatus}
                  style={{ background: '#12CEB3' }}
                ></i>
                正常
              </div>
            );
          case 1:
            return (
              <div>
                <i
                  className={styles.iconStatus}
                  style={{ background: '#FE5850' }}
                ></i>
                异常
              </div>
            );
          case 2:
            return (
              <div>
                <i
                  className={styles.iconStatus}
                  style={{ background: '#FFE26D' }}
                ></i>
                警告
              </div>
            );
        }
      },
    },
    {
      title: '关联任务',
      render: (record) => <a>{mandate?.find(item => item.source == record.Id)?.id}</a>,
    },
  ];

  return (
    <div>
      <Table
        columns={columns}
        dataSource={items}
        rowKey="Id"
        locale={{
          emptyText: <Empty />,
        }}
        pagination={false}
      />
      <ThresholdModal
        open={visible}
        data={currentItem.JsonNumThreshold}
        onClose={() => setVisible(false)}
      />
      <ErrorHandleModal
        open={errVisible}
        userList={userList}
        onCancel={() => setErrVisible(false)}
        onOk={handleError}
      />
    </div>
  );
}