react中的 Modal.confirm

改引入的还要引入

import React from 'react';
import { ElSearchTable } from '@/components/el';
import EditModal from './EditModal/index';
import { commonExport } from '@/utils/utils'; // 导出
import {
  getTableSearchFormItems,
  InvalidBounced, // 作废弹框查询
  getTableColumns,
  getTableActionButtons
} from './definitConfig';
import CancellationModal from './CancellationModal'; // 作废弹框
import dayjs from 'dayjs';
import { ElNotification } from '@/components/el';
import { Spin, Modal,Input } from 'antd';
import { getPrepaidType, rejected, review } from './service';
import * as service from './service';
import { history } from 'react-router-dom';

interface State {
  editData: object;
  modalVisible: Boolean,
  mark: String,
  data: any;
  formRef: any; //表单的ref
  selectedRowKeys: any;// 表格勾选行keys
  selectedRows: any;// 表格勾选行rows
  loading: boolean;
  MessageModalLoading: boolean, //消息弹框的loading
  areaValue: string; //  接收的原因说明字段
}

class PurcStatementDefinit extends React.Component<Props, State> {
  tableRef: any;
  modalRef: any;
  constructor(props) {
    super(props);
    this.state = {
      editData: null,
      mark: 'create', // creact新增， edit编辑
      modalVisible: false,
      data: null,
      formRef: null, //表单的ref
      selectedRowKeys: [], // 表格勾选行keys
      selectedRows: [], // 表格勾选行rows
      loading: false,
      MessageModalLoading: false, //消息弹框的loading
      areaValue: '' // 接收的原因说明字段
    };
  }

/**
   * 点击审核拒绝
   * @param rowKeys 选择行的keys 
   * @param rows 选择的行
   * @returns 
   */
  handleApproveRefused = async (rowKeys, rows) => { // 接收选中行的参数，进行判断
    console.log(rows[0].id ,  ‘如果支持多选，可以直接打印roeKeys看看是不是一个数组形式的，我这里接收的是选中的单个id值’)
    if (!(rows[0].invState === '1')) {
    // if (rows.some(val => val.state !== 'DRAFT')) { // 或者是这种写法判断
      return ElNotification({
        type: 'warning',
        message: '请选择<状态>为【待审批】的单据！'
      });
    }
    const { TextArea } = Input // 引入antd中的组件
    Modal.confirm({
      width: 500,
      maskClosable: true,
      centered: true,
      title: '审批拒绝理由',
      onOk: (e) => this.refused(e, rows[0].id), // 点击确定时要执行的事件
      onCancel: () => { return },
      content: ( // 执行的内容
        <TextArea
          onChange={this.areaChange} // 改变事件
          autoSize={{ minRows: 8, maxRows: 10 }}
          placeholder='请输入理由（一百个字以内）'
        />
      ),
      cancelText: '取消',
      okText: '确认'
    });
  }

  /**
   * 审批拒绝确认
   * @param e 
   * @param rowKeys 选择行的keys
   */
  async refused(e, rowKeys) {
    if (!this.state.areaValue) {
      ElNotification({
        type: 'warning',
        message: '请填写拒绝理由'
      })
      e.preventDefault()
    } else if (this.state.areaValue.length > 100) {
      ElNotification({
        type: 'warning',
        message: '拒绝理由超过一百个字'
      })
      e.preventDefault()
    } else {
      const params = { 
      	id: rowKeys,  // 接收单选非数组 
      	reason: this.state.areaValue }
      const res = await rejected(params)
      if (res && res.success) {
        ElNotification({
          type: 'success',
          message: res.msg || '操作成功'
        })
        this.tableRef.getTableData()
      } else {
        ElNotification({
          type: 'error',
          message: res.msg || '操作失败'
        })
      }
    }
  }

  /**
   * 审核拒绝理由改变
   * @param param0 
   */
  areaChange = ({ target: { value } }) => {
    this.setState({ areaValue: value });
  };

欢迎指正，交流。