NG_Project/前端程序/ipd-frontend/src/pages/materialsSubstitution/PdiSmpNo.tsx

import { useState, useEffect } from 'react';
import React, { useMemo, useReducer } from 'react';
import { request } from '@/utils';
import {
  Input,
  Button,
  Row,
  Col,
  Form,
  DatePicker,
  Collapse,
  message,
  Table,
  Space,
  Modal,
  Card,
  Tooltip,
  Tabs,
  Select,
} from 'antd';
import {
  CheckCircleOutlined,
  FormOutlined,
  MinusCircleOutlined,
  PlusCircleOutlined,
  PrinterOutlined,
  SearchOutlined,
  UndoOutlined,
  CopyTwoTone,
  ZoomInOutlined,
  SplitCellsOutlined,
  ExclamationCircleOutlined,
  DownloadOutlined,
} from '@ant-design/icons';
import moment from 'moment';
import ReactEcharts from 'echarts-for-react';
import Dictionary from '@/components/Dictionary';
import { exportTable } from '@/utils/exportTable';
import styles from './index.less';
import useARH from '@minko-fe/use-antd-resizable-header';
import 'antd/dist/antd.css';
// import '@minko-fe/use-antd-resizable-header/dist/style.css';

import { KeepAlive } from 'umi';
import { ColumnsType } from 'antd/lib/table/interface';
import { ITableHeader, StudentInfo } from '@/types';
import * as ExcelJs from 'exceljs';
import {
  addHeaderStyle,
  DEFAULT_COLUMN_WIDTH,
  DEFAULT_ROW_HEIGHT,
  generateHeaders,
  getColumnNumber,
  mergeColumnCell,
  mergeRowCell,
  saveWorkbook,
} from '@/utils/indexs';
import { Worksheet } from 'exceljs';
interface MultiHeaderProps { }

const formRow = 1;
const SubHistory = () => {
  const { Item } = Form;
  const { Panel } = Collapse;
  const nowDate = new Date();
  const nowStartDate = parseInt(
    new Date(nowDate.setDate(nowDate.getDate() - 2)).getTime().toString(),
  ); // 当前时间-1天
  const nowEndDate = parseInt(new Date().getTime().toString()); // 当前时间
  const print = nowDate.toLocaleTimeString();
  const [dataSource, setDataSource] = useState([]);
  const [dataSource1, setDataSource1] = useState([]);
  const [Visible, setVisible] = useState(false);
  const [action, setAction] = useState('');
  const [loading, setLoading] = useState(false);
  const [numOption, setNumOption] = useState({});
  const [rateOption, setRateOption] = useState({});
  const [activeKey, setActiveKey] = useState('');
  const { TabPane } = Tabs;
  const [form] = Form.useForm();
  const [formData] = Form.useForm();
  const [selectedRow, setselectedRow] = useState([]);
  const [selectedKey, setselectedkey] = useState(0);
  const [list, setList] = useState<StudentInfo[]>([]);
  const [begin, setBegin] = useState('');
  const [end, setEnd] = useState('');
  const dateFormat = 'YYYY-MM-DD';
  const { RangePicker } = DatePicker;
  const [OPTIONS, setOptions] = useState([]);
  const [selectedItems, setSelectedItems] = useState<string[]>([]);
  const [selectedItems1, setSelectedItems1] = useState<string[]>([]);
  const filteredOptions = OPTIONS.filter((o) => !selectedItems.includes(o));
  const [CUVOPTIONS, setCuvOptions] = useState([]);
  const filteredOptions1 = CUVOPTIONS.filter((o) => !selectedItems1.includes(o));
  const [, forceRender] = useReducer((s) => s + 1, 0);
  const [deps, setDeps] = useState(0);
  // const [selectedRowKeys, setSelectedRowKeys] = useState([])
  // const onSelectChange = (selectedRowKeys:any, selectedRows:any) => {
  //   //setSelectedRows(selectedRows)
  //   setSelectedRowKeys(selectedRowKeys)   PROFIT
  // }

  //导出操作
  const onExportClick = () => {
    if (dataSource.length == 0) {
      message.error('暂无数据，请确认后重试！');
      return;
    }
    exportTable(columns, dataSource, '余材替代历史信息.xlsx');
  };

  useEffect(() => {
    generateData();
    ts();
    onSearchClick();
    iniClick();
    cuvClick();
  }, []);

  function generateData() {
    let arr: StudentInfo[] = [];
    for (let i = 0; i < 5; i++) {
      arr.push({
        id: i,
        name: ``,
        age: 8 + i,
        gender: i % 2 === 0 ? '' : '',
        english: 80 + i,
        math: 60 + i,
        physics: 70 + i,
        comment: ``,
      });
    }
    setList(arr);
  }

  function onExportMultiHeaderExcel() {
    // 创建工作簿
    const workbook = new ExcelJs.Workbook();
    // 添加sheet
    const worksheet = workbook.addWorksheet('sheet');
    // 设置 sheet 的默认行高
    worksheet.properties.defaultRowHeight = 20;
    // 解析 AntD Table 的 columns
    const headers = generateHeaders(columns);
    console.log({ headers });
    // 第一行表头
    const names1: string[] = [];
    // 第二行表头
    const names2: string[] = [];
    // 用于匹配数据的 keys
    const headerKeys: string[] = [];
    headers.forEach((item) => {
      if (item.children) {
        // 有 children 说明是多级表头，header name 需要两行
        item.children.forEach((child) => {
          names1.push(item.header);
          names2.push(child.header);
          headerKeys.push(child.key);
        });
      } else {
        const columnNumber = getColumnNumber(item.width);
        for (let i = 0; i < columnNumber; i++) {
          names1.push(item.header);
          names2.push(item.header);
          headerKeys.push(item.key);
        }
      }
    });
    handleHeader(worksheet, headers, names1, names2);
    // 添加数据
    addData2Table(worksheet, headerKeys, headers);
    // 给每列设置固定宽度
    worksheet.columns = worksheet.columns.map((col) => ({ ...col, width: DEFAULT_COLUMN_WIDTH }));
    // 导出
    saveWorkbook(workbook, print + '-' + '并样信息.xlsx');
  }

  function handleHeader(
    worksheet: Worksheet,
    headers: ITableHeader[],
    names1: string[],
    names2: string[],
  ) {
    // 判断是否有 children, 有的话是两行表头
    const isMultiHeader = headers?.some((item) => item.children);
    if (isMultiHeader) {
      // 加表头数据
      const rowHeader1 = worksheet.addRow(names1);
      const rowHeader2 = worksheet.addRow(names2);
      // 添加表头样式
      addHeaderStyle(rowHeader1, { color: 'dff8ff' });
      addHeaderStyle(rowHeader2, { color: 'dff8ff' });
      mergeColumnCell(headers, rowHeader1, rowHeader2, names1, names2, worksheet);
      return;
    }
    // 加表头数据
    const rowHeader = worksheet.addRow(names1);
    // 表头根据内容宽度合并单元格
    mergeRowCell(headers, rowHeader, worksheet);
    // 添加表头样式
    addHeaderStyle(rowHeader, { color: 'dff8ff' });
  }

  function addData2Table(worksheet: Worksheet, headerKeys: string[], headers: ITableHeader[]) {
    dataSource?.forEach((item: any) => {
      const rowData = headerKeys?.map((key) => item[key]);
      const row = worksheet.addRow(rowData);
      mergeRowCell(headers, row, worksheet);
      row.height = DEFAULT_ROW_HEIGHT;
      // 设置行样式, wrapText: 自动换行
      row.alignment = { vertical: 'middle', wrapText: false, shrinkToFit: false };
      row.font = { size: 11, name: '微软雅黑' };
    });
  }

  //数据源，字典查询
  const iniClick = () => {
    const sd = {
      CD_MANA_NO: 'TDZT',
    };
    const res = request.post(`/ipdApi/basic/getBasicCode`, sd).then((res) => {
      if (res.data.code == '1') {
        if (res.data.data) {
          const array = res.data.data.map((item: any) => {
            return item.CD;
          });
          setOptions(array);
        }
      }
    });
  };

  const cuvClick = () => {
    const sd = {
      CD_MANA_NO: 'CKKB',
    };
    const res = request.post(`/ipdApi/basic/getBasicCode`, sd).then((res) => {
      if (res.data.code == '1') {
        if (res.data.data) {
          const array = res.data.data.map((item: any) => {
            return item.CD;
          });
          setCuvOptions(array);
        }
      }
    });
  };

  //添加按钮打开添加Modal页面
  const onAddClick = () => {
    formData.resetFields();
    setVisible(true);
    setAction('新增');
  };
  //复制新增按钮按下时操作
  const onCopyAddClick = () => {
    if (dataSource.length == 0 || selectedRow.length != 1) {
      message.warn('请先选中一条数据');
      return;
    }
    formData.setFieldsValue(selectedRow[0]);
    setVisible(true);
    setAction('复制新增');
  };
  //修改按钮按下时操作
  const onEditClick = () => {
    formData.resetFields();
    if (dataSource.length == 0 || selectedRow.length != 1) {
      message.warn('请先选中一条数据');
      return;
    }
    formData.setFieldsValue(selectedRow[0]);
    setVisible(true);
    setAction('修改');
  };

  //导出操作
  // const onExportClick = () => {
  //   if (dataSource.length == 0) {
  //     message.error('暂无数据，请确认后重试！');
  //     return;
  //   }
  //   exportTable(columns, dataSource, '压缩比规范.xlsx');
  // };

  // 新增、复制新增、修改功能
  const modalSubmit = () => {
    const postData = formData.getFieldsValue();
    if (action == '新增' || action == '复制新增') {
      const res = request.post(`/ipdApi/hotRoll/addCompressionRatio`, postData).then((res) => {
        if (res.data.code == '1') {
          message.success('操作成功！');
          setVisible(false);
          onSearchClick();
          // setselectedkey(0)
        } else {
          message.error(res.data.msg);
        }
      });
    } else if (action == '修改') {
      // 因数据库表结构设计多主键，所以更新操作传值时需要将未修改前的数据与修改后的数据一并传到后台处理
      const requestData = selectedRow.map((item: any, index: any) => ({
        ...item,
      }));
      requestData.push(postData);
      const res = request.post(`/ipdApi/hotRoll/updCompressionRatio`, requestData).then((res) => {
        if (res.data.code == '1') {
          message.success('操作成功！');
          setselectedkey(0);
          setVisible(false);
          // onSearchClick();
        } else {
          message.error(res.data.msg);
          setVisible(false);
        }
        onSearchClick();
      });
    }
  };

  // 删除按钮按下时操作
  const onDeleteClick = () => {
    if (dataSource.length == 0 || selectedRow.length != 1) {
      message.warn('请选择要删除的数据！');
      return;
    }

    Modal.confirm({
      title: '确定要删除吗？',
      icon: <ExclamationCircleOutlined />,
      onOk: async () => {
        const res = request
          .post(`/ipdApi/hotRoll/delCompressionRatio`, selectedRow[0])
          .then((res) => {
            if (res.data.code == '1') {
              message.success('操作成功！');
              setselectedkey(0);
              setVisible(false);
              onSearchClick();
            } else {
              message.error(res.data.msg);
              setVisible(false);
            }
          });
      },
    });
  };
  const onTabChange = (key: any) => {
    if (key === '1') {
      setDataSource;
    }
    setActiveKey(key);
  };
  //容器头按钮
  const headerButtons = () => (
    <Space size={8}>
      <Button
        type="primary"
        size="small"
        icon={<SearchOutlined />}
        onClick={(event) => {
          ts();
          event.stopPropagation();
          onSearchClick();
        }}
        disabled={loading ? true : false}
      >
        查询
      </Button>
      <Button
        type="primary"
        danger
        size="small"
        icon={<UndoOutlined />}
        onClick={(event) => {
          event.stopPropagation();
          handleRest();
        }}
      >
        重置
      </Button>
      <Button
        type="primary"
        size="small"
        icon={<DownloadOutlined />}
        onClick={(event) => {
          event.stopPropagation();
          onExportMultiHeaderExcel();
        }}
      >
        导出
      </Button>
    </Space>
  );

  const columns = [
    {
      title: '序号',
      render: (text: any, record: any, index: any) => <div>{index + 1}</div>,
      width: 70,
    },
    { title: '钢板号', dataIndex: 'PLATE_NO', key: 'PLATE_NO', ellipsis: true,width: 150 },
    { title: '录入时间', dataIndex: 'SEND_DATE', key: 'SEND_DATE', ellipsis: true,width: 150 },
    { title: '轧批号', dataIndex: 'OUT_SHEET_NO', key: 'OUT_SHEET_NO', ellipsis: true,width: 150 },
    {
      title: '当前状态',
      ellipsis: true,
      dataIndex: 'age5',
      key: 'age5',
      children: [
        { title: '进程状态', dataIndex: 'PROC_CD_NOW', key: 'PROC_CD_NOW', ellipsis: true,width: 75 },
        { title: '试样号', dataIndex: 'SMP_NO_NOW', key: 'SMP_NO_NOW', ellipsis: true,width: 125 },
        { title: '取样实绩', dataIndex: 'ACT_SMP_FL_NOW', key: 'ACT_SMP_FL_NOW', ellipsis: true,width: 75 },
        // { title: '试样号状态', dataIndex: 'SMP_NO_STATE_NOW', key: 'SMP_NO_STATE_NOW', ellipsis: true,width: 150 },
        // { title: '委托单号', dataIndex: 'SMP_SEND_NO_NOW', key: 'SMP_SEND_NO_NOW', ellipsis: true,width: 150 },
      ],
    },
    { title: '原进程状态', dataIndex: 'PROC_CD', key: 'PROC_CD', ellipsis: true,width: 100 },
    { title: '客户交货期', dataIndex: 'DEL_TO_DATE', key: 'DEL_TO_DATE', ellipsis: true,width: 150 },
    { title: '标准号', dataIndex: 'APLY_STDSPEC', key: 'APLY_STDSPEC', ellipsis: true,width: 160 },
    { title: '厚度', dataIndex: 'THK', key: 'THK', ellipsis: true,width: 75 },
    { title: '宽度', dataIndex: 'WID', key: 'WID', ellipsis: true,width: 75 },
    { title: '长度', dataIndex: 'LEN', key: 'LEN', ellipsis: true,width: 75 },
    { title: '重量', dataIndex: 'WGT', key: 'WGT', ellipsis: true,width: 75 },
    { title: '产品等级', dataIndex: 'PROD_GRD', key: 'PROD_GRD', ellipsis: true,width: 150 },
    { title: '表面等级', dataIndex: 'SURF_GRD', key: 'SURF_GRD', ellipsis: true,width: 150 },
    { title: '试样代码', dataIndex: 'SMP_NO', key: 'SMP_NO', ellipsis: true,width: 150 },
    { title: '试样号状态', dataIndex: 'SMP_NO_TYPE', key: 'SMP_NO_TYPE', ellipsis: true,width: 150 },
    { title: '委托单号', dataIndex: 'SMP_SEND_NO', key: 'SMP_SEND_NO', ellipsis: true,width: 150 },
    { title: '试样处理方式', dataIndex: 'TYPES', key: 'TYPES', ellipsis: true,width: 150 },
    { title: '并号检索结果', dataIndex: 'RETRIEVAL', key: 'RETRIEVAL', ellipsis: true,width: 150 },
    { title: '生产厂', dataIndex: 'PLT', key: 'PLT', ellipsis: true,width: 150 },
    { title: '生产日期', dataIndex: 'PROD_DATE', key: 'PROD_DATE', ellipsis: true,width: 150 },
    { title: '轧制日期', dataIndex: 'MILL_END_DATE', key: 'MILL_END_DATE', ellipsis: true,width: 150 },
    { title: '综判时间', dataIndex: 'ORD_PROD_END_TIME', key: 'ORD_PROD_END_TIME', ellipsis: true,width: 150 },
    { title: '入库日期', dataIndex: 'IN_PLT_DATE', key: 'IN_PLT_DATE', ellipsis: true,width: 150 },
    { title: '发货时间', dataIndex: 'SHP_TIME', key: 'SHP_TIME', ellipsis: true,width: 150 },
    { title: '仓库', dataIndex: 'CUR_INV', key: 'CUR_INV', ellipsis: true,width: 150 },
    { title: '垛位号', dataIndex: 'LOC', key: 'LOC', ellipsis: true,width: 150 },
    { title: '订单号', dataIndex: 'ORD_NO', key: 'ORD_NO', ellipsis: true,width: 150 },
    { title: '订单序列号', dataIndex: 'ORD_ITEM', key: 'ORD_ITEM', ellipsis: true,width: 150 },
    { title: '原始订单号', dataIndex: 'ORG_ORD_NO', key: 'ORG_ORD_NO', ellipsis: true,width: 150 },
    { title: '原始订单序列号', dataIndex: 'ORG_ORD_ITEM', key: 'ORG_ORD_ITEM', ellipsis: true,width: 150 },
    { title: '订单材/余材', dataIndex: 'ORD_FL', key: 'ORD_FL', ellipsis: true,width: 150 },
    { title: '是否保性能', dataIndex: 'MATR_FL', key: 'MATR_FL', ellipsis: true,width: 150 },
    { title: '客户代码', dataIndex: 'CUST_CD', key: 'CUST_CD', ellipsis: true,width: 150 },
    { title: '客户', dataIndex: 'SUR_COM', key: 'SUR_COM', ellipsis: true,width: 150 },
    { title: '产品备注', dataIndex: 'PROD_REMARK', key: 'PROD_REMARK', ellipsis: true,width: 150 },
    { title: '订单备注', dataIndex: 'ORD_REM', key: 'ORD_REM', ellipsis: true,width: 150 },
    { title: '取样方式', dataIndex: 'SMP_LOT_UNIT', key: 'SMP_LOT_UNIT', ellipsis: true,width: 150 },
    { title: '余材原因', dataIndex: 'WOO_RSN', key: 'WOO_RSN', ellipsis: true,width: 150 },
    { title: '余材责任单位', dataIndex: 'ORD_FL', key: 'ORD_FL', ellipsis: true,width: 150 },
    { title: '处置', dataIndex: 'DISPOSE', key: 'DISPOSE', ellipsis: true,width: 150 },
    { title: '进程代码', dataIndex: 'PROC_CD', key: 'PROC_CD', ellipsis: true,width: 150 },
    { title: '节约费用', dataIndex: 'COSTS', key: 'COSTS', ellipsis: true,width: 150 },
    { title: '证书', dataIndex: 'CERT', key: 'CERT', ellipsis: true,width: 150 },
    { title: '是否发送', dataIndex: 'IS_PDI', key: 'IS_PDI', ellipsis: true,width: 100 },
  ];
  // 点击重置按钮
  const handleRest = (): any => {
    form.resetFields();
  };
  const ts = () => {
    message.info('数据查询中,请勿重复点击~', 2);
  };
  const onSearchClick = (): any => {
    setLoading(false);
    // const sd = form.getFieldsValue();
    const pro = form.getFieldsValue();
    const obj = { START_TIME: begin, END_TIME: end };
    const sd = Object.assign(pro, obj);
    //sd.PROC_CD = sd.PROC_CD && sd.PROC_CD.join(',');
    // sd.GP_CUR_INV = sd.GP_CUR_INV && sd.GP_CUR_INV.join(',');
    const res = request.post(`/ipdPsApi/GetPDI_SMP_NO`, sd).then((res) => {
      if (res.data.code == '1') {
        const result = res.data.data.map((item: any, index: any) => ({
          ...item,
          PK: index,
        }));
        setDataSource(result);
        setLoading(false);
      } else {
        setDataSource([]);
        setLoading(false);
      }
    });

  };

  const onRangeChange = (value: any, dateString: any) => {
    setBegin(dateString[0]);
    setEnd(dateString[1]);
  };

  const { components, resizableColumns, tableWidth, ...others } = useARH({
    columns: useMemo(() => columns, [deps]),
    minConstraints: 50,
  });

  return (
    <>
      <Card>
        <Form
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
          form={form}
          onFinish={onSearchClick}
        >
          <Collapse defaultActiveKey={['1']}>
            <Panel key="1" header="查询条件" extra={headerButtons()}>
              <Row gutter={[16, 8]} justify="start" style={{ flexWrap: 'wrap', marginBottom: '-25px' }}>

                <Col xs={24} sm={12} md={8} lg={6} xl={4}>
                  <Item
                    label="订单号"
                    name="ORD_NO"
                    style={{ color: '#ccc', width: '100%' }}
                  >
                    <Input
                      prefix={<SearchOutlined />}
                      style={{ color: '#ccc' }}
                      allowClear
                      defaultValue=""
                      placeholder="请输入"
                    />
                  </Item>
                </Col>

                <Col xs={24} sm={12} md={8} lg={6} xl={4}>
                  <Item label="项次号" name="ORD_ITEM" style={{ color: '#ccc', width: '100%' }}>
                    <Input
                      prefix={<SearchOutlined />}
                      style={{ color: '#ccc', width: '100%' }}
                      allowClear
                      defaultValue=""
                      placeholder="请输入"
                    />
                  </Item>
                </Col>
                <Col xs={24} sm={12} md={8} lg={6} xl={3}>
                  <Item
                    label="生产厂"
                    name="PLT"
                    style={{ color: '#ccc', width: '100%' }}>
                    <Dictionary
                      placeholder="请选择"
                      dict="B0033"
                      form={form}
                      style={{ color: '#ccc', width: '100%' }}
                      valueName="PLT"
                      labelName="PLT"
                    />
                  </Item>
                </Col>
                <Col xs={24} sm={12} md={8} lg={6} xl={4}>
                  <Item label="标准号" name="APLY_STDSPEC" style={{ color: '#ccc', width: '100%' }}>
                    <Input
                      prefix={<SearchOutlined />}
                      style={{ color: '#ccc', width: '100%' }}
                      allowClear
                      defaultValue=""
                      placeholder="请输入"
                    />
                  </Item>
                </Col>
                <Col xs={24} sm={12} md={8} lg={6} xl={4}>
                  <Item label="原始订单号" name="ORG_ORD_NO" style={{ color: '#ccc', width: '300px', marginLeft: '10px' }}>
                    <Input
                      prefix={<SearchOutlined />}
                      style={{ color: '#ccc', width: '65%', marginLeft: '10px' }}
                      allowClear
                      defaultValue=""
                      placeholder="请输入"
                    />
                  </Item>
                </Col>
                <Col xs={24} sm={12} md={8} lg={6} xl={4}>
                  <Item label="原始项次号" name="ORG_ORD_ITEM" style={{ color: '#ccc', width: '300px', marginLeft: '10px' }}>
                    <Input
                      prefix={<SearchOutlined />}
                      style={{ color: '#ccc', width: '65%', marginLeft: '10px' }}
                      allowClear
                      defaultValue=""
                      placeholder="请输入"
                    />
                  </Item>
                </Col>
                <Col xs={24} sm={12} md={8} lg={6} xl={4}>
                  <Item label="钢板号" name="PLATE_NO" style={{ color: '#ccc', width: '100%' }}>
                    <Input
                      prefix={<SearchOutlined />}
                      style={{ color: '#ccc', width: '100%' }}
                      allowClear
                      defaultValue=""
                      placeholder="请输入"
                    />
                  </Item>
                </Col>
                {/* <Col xs={24} sm={12} md={8} lg={6} xl={2}>
                  <Item label="状态：" name="PROC_CD" style={{ color: '#ccc', width: '120px', marginLeft: '-10px' }}>
                    <Select
                      mode="multiple"
                      showArrow={true}
                      placeholder="请选择"
                      value={selectedItems}
                      allowClear
                      onChange={setSelectedItems}
                      style={{ color: '#ccc', width: '90%', marginLeft: '10px' }}
                    >
                      {filteredOptions.map((item) => (
                        <Select.Option key={item} value={item}>
                          {item}
                        </Select.Option>
                      ))}
                    </Select>
                  </Item>
                </Col> */}
                 <Col xs={24} sm={12} md={8} lg={6} xl={2}>
                  <Item
                    label="状态"
                    name="PROC_CD"
                    style={{ color: '#ccc', width: '100%' }}>
                    <Dictionary
                      placeholder="请选择"
                      dict="TDZT"
                      form={form}
                      style={{ color: '#ccc', width: '100%' }}
                      valueName="PROC_CD"
                      labelName="PROC_CD"
                    />
                  </Item>
                </Col>

                <Col xs={24} sm={12} md={8} lg={6} xl={4}>
                  <Item label="堆放仓库" name="CUR_INV" style={{ color: '#ccc', width: '100%' }}>
                    <Select
                      mode="multiple"
                      showArrow={true}
                      placeholder="请选择"
                      value={selectedItems1}
                      allowClear
                      onChange={setSelectedItems1}
                      style={{ color: '#ccc', width: '70%', marginLeft: '10px' }}
                    >
                      {filteredOptions1.map((item: any) => (
                        <Select.Option key={item} value={item}>
                          {item}
                        </Select.Option>
                      ))}
                    </Select>
                  </Item>
                </Col>
                <Col xs={24} sm={12} md={8} lg={6} xl={4} >
                  <Form.Item label="处理日期" name="" style={{ marginLeft: '-44px' }}>
                    <RangePicker
                      onChange={onRangeChange}
                      style={{ width: '226px' }}
                      defaultValue={[moment(nowStartDate), moment(nowEndDate)]}
                    />
                  </Form.Item>
                </Col>
                <Col xs={24} sm={12} md={8} lg={6} xl={5}>
                  <Item
                    label="试样处理方式"
                    name="TYPES"
                    // style={{ color: '#ccc', width: '100%',marginLeft:'30px' }}
                    style={{ color: '#ccc', width: '350px', marginLeft: '30px' }}
                  >
                    <Dictionary
                      placeholder="请选择"
                      dict="SYCL"
                      form={form}
                      valueName="TYPES"
                      labelName="TYPES"
                      style={{ color: '#ccc', width: '65%', marginLeft: '10px' }}
                    />
                  </Item>
                </Col>
                <Col xs={24} sm={12} md={8} lg={6} xl={5}>
                  <Item label="并号检索结果" name="RETRIEVAL" style={{ color: '#ccc', width: '350px' }}>
                    <Input
                      prefix={<SearchOutlined />}
                      style={{ color: '#ccc', width: '65%', marginLeft: '10px' }}
                      allowClear
                      defaultValue=""
                      placeholder="请输入"
                    />
                  </Item>
                </Col>
              </Row>
            </Panel>
          </Collapse>
        </Form>
      </Card>

      <Card style={{ marginTop: 20 }}>
        <Tabs onChange={onTabChange} defaultActiveKey="1" type="card">
          <TabPane tab="替代历史信息" key="1" forceRender={true}>
            <Table
              // pagination={{pageSize:50}}
              bordered
              components={components}
              columns={resizableColumns}
              className={styles.benchtable}
              loading={loading}
              dataSource={dataSource}
              size="small"
              pagination={{ defaultPageSize: 50 }}
              onRow={(record: any) => {
                return {
                  // onClick: (event: any) => {
                  //   event.currentTarget.getElementsByTagName('label')[0].click();
                  // },
                  // onClick: () => onSelectRow(record)
                };
              }}
              rowSelection={{
                columnWidth: '40px',
                type: 'radio',
                //selectedRowKeys,
                onChange: (selectedRowKeys: any, selectedRows: any) => {
                  setselectedRow(selectedRows), setselectedkey(selectedRowKeys);
                },
                //onChange: onSelectChange
              }}
              rowKey="ID"
              scroll={{ x: tableWidth, y: 550 }}
            ></Table>
          </TabPane>
        </Tabs>
      </Card>
      <Modal
        title={`【${action}】 `}
        forceRender={true}
        maskClosable={false}
        centered
        width="800px"
        visible={Visible}
        onOk={modalSubmit}
        onCancel={() => {
          setVisible(false);
        }}
      >
        <Form
          form={formData}
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 18 }}
          onFinish={(values) => {
            console.log('values', values);
          }}
        >
          <Row gutter={[20, 0]}>
            <Col span={24 / formRow}>
              <Form.Item label="工厂" name="PLT" rules={[{ required: true, message: '必填' }]}>
                <Dictionary
                  placeholder="请输入"
                  dict="B0033"
                  form={formData}
                  valueName="PLT"
                  labelName="PLT"
                />
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Modal>
    </>
  );
};
//export default SubHistory;
export default function () {
  return (
    <KeepAlive>
      <SubHistory />
    </KeepAlive>
  );
}