AuditModal.jsx 3.61 KB
import React, { useState, useEffect } from 'react';
import { TreeSelect, Modal, Form, Input, Button, Select, Row, Col,Alert } from 'antd';
import useFormTable from '@/useHooks/useFormTable';
import { connect } from 'umi';
import { dispatchHandle } from "@/utils/publicHandle";
import useUpdateEffect from '@/useHooks/useUpdateEffect';
import TreeSelector from '@/components/Customized/PersonSelect/TreeSelector';
import { dicFindUtils,DictBizType,ApproveType } from '@/utils/utils';
const { Option } = Select;
const { TreeNode } = TreeSelect;
const { TextArea } = Input;

const AuditModal = (props) => {
    const [form] = Form.useForm();
    const [have, setHave] = useState([]);
    const {
        dispatch,
        modalType,
        modalVisible,
        dict:{dicTotalsList}
    } = props;
    const rejectedType = dicFindUtils(dicTotalsList, DictBizType.rejectedType); //驳回类型
    console.log(`modalVisible is:===========>`, modalVisible);
    const handleClose = () => {
        //form.resetFields();
        props.handleClose();
    }
    const handleSubmit = e => {
        e.preventDefault();
        form.validateFields().then((values) => {
            props.handleSubmit(values);
        }).catch(() => {});
    }


    const formItemLayout = {
        labelCol: { span: 10 },
        wrapperCol: { span: 12 }
    };
    const formItemLayout2 = {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 }
    }

    useUpdateEffect(() => {
        form.resetFields();
    }, [modalVisible]);
    return (
        <Modal
            title={modalType === 'ok' ? '审批通过' : '审批驳回'}
            visible={ modalVisible }
            width={700}
            footer={null}
            closable={false}
        >
            <Form form={form}>
                <div style={{padding:'20px 0'}}>
                    {modalType === 'ok' && <Alert type='success' showIcon style={{ margin: 0,paddingBottom:10,fontSize:14}} message='您将审核通过该单据信息' />}
                    { modalType === 'no' && <Alert type="warning" showIcon style={{ margin: 0,paddingBottom:10,fontSize:14}} message='您驳回了该单据的请求信息' />}
                </div>
                <Row>
                   {
                    modalType === 'no' && <Col span={24}>
                        <Form.Item name='rejectionType' label='驳回类型' {...formItemLayout2} rules={[{ required: true, message: `驳回类型` }]}>
                            <Select placeholder='请选择'>
                                    {
                                        rejectedType && rejectedType.map(item => {
                                            return <Option key = { item.id } value ={ item.id } >{ item.dicValue }</Option>
                                        })
                                    }
                            </Select> 
                        </Form.Item>
                    </Col>
                    }
                    <Col span={24}>
                        <Form.Item name='remarks' label={ `${ modalType === 'ok' ? '审批意见' : '驳回意见'}`} {...formItemLayout2} >
                            <TextArea showCount maxLength = { 200 } rows={ 6 }  />
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
            <div style={{ textAlign: 'end', paddingTop:20 }}>
                <Button onClick={handleClose} style={{ marginRight: '20px' }}>取消</Button>
                <Button type='primary' onClick={handleSubmit}>确定</Button>
            </div>
        </Modal>
    )
}

export default connect(({dict, loading }) => ({
    dict,
    loading,
}))(AuditModal);