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 });
};
欢迎指正,交流。