AddFeeModal.jsx

import React, { useState, useEffect } from 'react';
import { Modal, Form, Select, Input, Button, Row, Col } from 'antd'
import { UploadOutlined, CloseOutlined, LinkOutlined } from '@ant-design/icons'
import { history, connect } from 'umi'

import UploadFile from '@/components/UploadFile';
import style from "../index.less"
import { dispatchHandle } from '@/utils/publicHandle';
import { dicFindUtils, DictBizType } from '@/utils/utils'

const { Option } = Select;
const { TextArea } = Input;

const AddFeeModal = (props) => {
    const {
        dispatch,
        id,
        editId,
        feevisible,
        setFeeVisible,
        type,
        search,
        dict: {
            dicTotalsList
        },
    } = props;
    // 费用对话框事件方法
    const [form] = Form.useForm()
    // 上传文件
    const [imgList, setImgList] = useState([]);
    const [fileList, setfileList] = useState();
    // upload
    const changeUpload = (files, fileInfo) => {
        console.log(files, fileInfo);
        const value = String(files);
        const filesList = fileInfo.fileList;
        setImgList(filesList);
        setfileList(value)
    }
    const feeHandleOk = e => {
        // 点击弹框确定按钮
        e.preventDefault();
        form.validateFields()
            .then((values) => {
                const arr = imgList.length > 0 && imgList.map(item => ({
                    url: item.response.data.url || '',
                    enclosurName: item.name
                }))
                const payload = {
                    ...values,
                    taskId: id,
                    expensesEnclosurs: arr
                }
                delete payload.annex;
                if (editId) {
                    payload.id = editId;
                    dispatchHandle(
                        dispatch,
                        'maintaining/operation_service_m_curing_task_expensesAddEdit_patch',
                        payload,
                        () => {
                            search.refresh()
                        }
                    )
                } else {
                    dispatchHandle(
                        dispatch,
                        'maintaining/operation_service_m_curing_task_expensesAddEdit_patch',
                        payload,
                        () => {
                            search.refresh()
                        }
                    )
                }
                form.resetFields()
                setImgList([]);
                setFeeVisible(false)
            })
            .catch(() => {
                form.resetFields()
            });
    };
    const feeHandleCancel = () => {
        form.resetFields()
        setImgList([]);
        setFeeVisible(false)
    };
    useEffect(() => {
        if (feevisible && type === 'edit') {
            dispatchHandle(
                dispatch,
                'maintaining/operation_service_m_curing_task_costDetail_id_get',
                { id: editId },
                res => {
                    if (res) {
                        form.setFieldsValue({ ...res })
                        if (res.expenseso && res.expenseso.length > 0) {
                            const arr = res.expenseso.map(item => ({
                                name: item?.enclosurName,
                                response: {
                                    data: {
                                        url: item?.url
                                    }
                                }
                            }))
                            setImgList(arr)
                        }
                    }
                }
            )
        }
    }, [feevisible])
    const deleteImgAction = (name) => {
        const arr = imgList.filter(item => item.name !== name)
        setImgList(arr)
    }
    const checkAnnexAction = (url) => {
        dispatchHandle(
            dispatch,
            'universal/account_service_file_online_preview_url_post',
            { name: url },
            res => {
                if (res) {
                    window.open(res)
                }
            }
        )
    }
    const formItemLayout = {
        labelCol: {
            span: 6
        },
        wrapperCol: {
            span: 18
        }
    }
    const outFeeType = dicFindUtils(dicTotalsList, DictBizType.outFeeType)
    const unitMetering = dicFindUtils(dicTotalsList, DictBizType.unitMetering)
    return <Modal
        title="添加费用"
        visible={feevisible}
        onOk={feeHandleOk}
        onCancel={feeHandleCancel}
        className={style.add_fee}
        destroyOnClose={true}
        getContainer={false}
    >
        <Form form={form} {...formItemLayout} className={style.add_fee_modal}>
            <Form.Item label="费用类型" name="usageTypeId" rules={[{ required: true, message: "费用类型不能为空!" }]}>
                <Select placeholder="请选择" allowClear>
                    {
                        outFeeType && outFeeType.length > 0 && outFeeType.map(i => <Option value={i.id} key={i.id}>{i.dicValue}</Option>)
                    }
                </Select>
            </Form.Item>
            <Form.Item label="需求数量" name="demandQuantity" rules={[{ required: true, message: "需求数量不能为空!" }]}>
                <Input placeholder="请输入" allowClear />
            </Form.Item>
            <Form.Item label="单位" name="companyId" rules={[{ required: true, message: "单位不能为空!" }]}>
                <Select placeholder="请选择" allowClear>
                    {
                        unitMetering && unitMetering.length > 0 && unitMetering.map(i => <Option value={i.id} key={i.id}>{i.dicValue}</Option>)
                    }
                </Select>
            </Form.Item>
            <Form.Item label="单价" name="unitPrice" rules={[{ required: true, message: "单位不能为空!" }]}>
                <Input
                    placeholder="请输入"
                    className={style.unitPrice}
                    allowClear
                />
            </Form.Item>
            {/* <Form.Item label="使用人" name="user" rules={[{ required: true, message: "使用人不能为空!" }]}>
                <Input placeholder="请输入" allowClear />
            </Form.Item> */}
            <Form.Item label="费用说明" name="costDescription">
                <TextArea placeholder="请输入" rows={4} allowClear />
            </Form.Item>
            <Form.Item className={style.add_fee_annex} label="附件：" name="annex" style={{ marginBottom: 10 }}>
                <UploadFile
                    fileType="document"
                    onChange={changeUpload}
                    showUploadList={false}
                >
                    <Button><UploadOutlined />上传文档</Button>
                </UploadFile>
            </Form.Item>
            <Form.Item label=" " colon={false}>
                <ul style={{ display: 'flex', flexWrap: 'wrap' }}>
                    {
                        imgList && imgList.length > 0 && imgList.map(item => (
                            <li style={{ marginRight: 5, cursor: 'pointer', display: 'flex', alignItems: 'center' }}>
                                <span onClick={()=>checkAnnexAction(item?.response?.data?.url)} style={{ display: 'flex', alignItems: 'center', }}>
                                    <LinkOutlined />
                                    <span style={{ margin: '0 5px 0' }}>{item?.name}</span>
                                </span>
                                <CloseOutlined style={{ fontSize: '12px' }} onClick={() => deleteImgAction(item.name)} />
                            </li>
                        ))
                    }
                </ul>
                <i>支持扩展名：.rar .zip .doc .docx .pdf .png</i>
            </Form.Item>
        </Form>
    </Modal>
}

export default connect(({ maintaining, user, dict,universal , loading }) => ({
    user,universal,
    dict,
    maintaining,
}))(AddFeeModal)