DealModal.jsx

import React, { useContext, useState, useEffect, useRef } from 'react';
import { Upload, Form, Button, Select, Input, Modal, message } from 'antd';
import { connect, useRequest,history,useModel } from 'umi';
import { UploadOutlined } from '@ant-design/icons';
import { _apiUrl_ } from '@/utils/common';
import {
   dealAlarmMessage,
   dealBatAlarmMessage
} from '@/services/alarmService';
const { TextArea } = Input;
const {Option}=Select;

const DealModal = props => {
  const [form] = Form.useForm();
  const [fileList, setFileList] = useState([]);

  const [handleRowsId,setHandleRowsId] = useState([]);

  const { initialState, setInitialState } = useModel('@@initialState');

  const { currentUser } = initialState;

  const handleClose = () => {
    form.resetFields();
    setFileList([]);
    props.handleClose();
  };
  const { addType,detailInfo,selectIds,dealType, selectRows} = props;

  useEffect(() => {
    const handleRows = selectRows.filter(item => item.state.value === 'un_disposed');
    const tempHandleRowsId = handleRows.map(row => row.id);
    setHandleRowsId(tempHandleRowsId);
  }, [selectRows]);

    
  //执行添加请求
   const dealAlarmMessageRequest = useRequest(dealAlarmMessage, {
        manual: true,
        formatResult: (response) => {
            // 进行格式的转化
          return {
                ...response,
                status:response?.status,
                success: response.code === 'success' ? true : false,
            }
        },
      loadingDelay: 300,
      onSuccess: (data, params) => {
          message.success(addType === 'edit' ? '修改成功' : '操作成功', 2, () => {
            handleClose();
          });
      }
    });
  //执行批量请求
  const dealBatAlarmMessageRequest = useRequest(dealBatAlarmMessage, {
      manual: true,
      formatResult: (response) => {
          //进行格式的转化
        return {
              ...response,
              status:response?.status,
              success: response.code === 'success' ? true : false,
          }
      },
    loadingDelay: 300,
    onSuccess: (data, params) => {
        message.success(addType === 'edit' ? '批量修改告警成功' : '批量操作告警成功', 2, () => {
          handleClose();
        });
    }
  });

    


  const handleSubmit =  e => {
    e && e.preventDefault();
    form.validateFields().then((values) => {
      const { name }  = currentUser
      let attachedFileList = [];
        //提交内容信息
        if (fileList && fileList.length > 0) {
          attachedFileList = fileList.map(item => ({
            url: item.url,
            size: item.size,
            fileName:item.fileName
          }));
          values.attachedFile = attachedFileList;
          delete values.attachedFileInfo;
        };
        values.handler =  name;//添加处理人
        if(dealType === 'bat'){
          //批量告警处理
          values.ids = handleRowsId;
          dealBatAlarmMessageRequest.run(values);
        }else{
          //单个告警处理
          values.id = detailInfo?.id;
          dealAlarmMessageRequest.run(values);
        }
        props?.handleDealCancel()
    }).catch(() => {
    });
  };
  const { addDealVisible
  } = props;

  const formTailLayout = {
    labelCol: { span: 3 },
    wrapperCol: { span: 10 },
  };
  const formTailLayout2 = {
    labelCol: { span: 3 },
    wrapperCol: { span: 18 },
  };

   const uploadProps = {
      name: 'docFile',
      action: `${_apiUrl_}/account-service/file/document`,
      multiple: true,
      headers: {
        Authorization: 'bearer ' + localStorage.getItem("Authorization")
      },
      fileList,
    onChange(info) {
        if (info.file.status === 'done') {
          message.success(`${info.file.name} 上传成功!`);
        } else if (info.file.status === 'error' && info?.file?.response?.success === false) {
          message.error(`${info.file.name} 上传失败`);
        }
  
        let fileList = [...info.fileList];
        // fileList = fileList.slice(-1);
        fileList = fileList.map(file => {
          if (file.response) {
            // Component will show file.url as link
            file.url = file?.response?.data?.url;
            file.fileName = file?.name || file?.response?.data?.fileName;
            file.size = file?.response?.data?.size;
          }
          return file;
        });
       setFileList(fileList);
        form.setFieldsValue({
          attachedFileInfo:fileList
        });
      },
    };

  return (
    <Modal
      width={700}
      visible={addDealVisible}
      onCancel={handleClose}
      onOk={handleSubmit}
      title='处理'
      getContainer={false}
    >

      <Form form={form} onFinish={ handleSubmit }>
        {
          dealType === 'bat' && <Form.Item {...formTailLayout} label='已选数量'><span className='f16' style={{fontSize:16}}>{handleRowsId.length}</span></Form.Item>
        }
        <Form.Item name='state' label='解决状态' {...formTailLayout} rules={[{ required: true, message: `请选择状态` }]}>
          <Select placeholder='请选择' allowClear>
            <Option value={'disposed'}>已处理</Option>
            {/* <Option value={'order_converted'}>已转工单</Option> */}
            <Option value={'un_disposed'}>未处理</Option>
          </Select>
        </Form.Item>
        <Form.Item name='remarks' label='备注' {...formTailLayout2}>
          <TextArea rows={6} placeholder="请输入" />
        </Form.Item>
        <Form.Item  label='附件' {...formTailLayout} name='attachedFileInfo'>
          <Upload {...uploadProps} >
            <>
               <Button icon={<UploadOutlined />}>上传文件</Button>
               <div style={{marginTop:'5px'}}>
               <span>支持扩展名：.rar .zip .doc .docx .pdf .jpg...</span>
              </div>
            </>
          </Upload>
        </Form.Item>
      </Form>
    </Modal>
  )
}

export default DealModal;