FinalReport.jsx

import React, { useState, useEffect } from 'react';
import { Card, Form, Input, Button, Table, Divider, Tabs, InputNumber, Popover } from 'antd';
import { connect } from 'umi';
import moment from 'moment'
import style from '../index.less'
import { dispatchHandle } from '@/utils/publicHandle';

const FinalReport = (props) => {
    const {
        dispatch,
        title,
        record,
        type,
        search
    } = props
    const [form] = Form.useForm()
    const [visible, setVisible] = useState(false)
    const [reportDetail, setReportDetail] = useState([])
    const onVisibleChange = (visible) => {
        setVisible(visible)
    }
    const handleSubmit = () => {
        form.validateFields().then(values => {
            const payload = { ...values }
            if (type === 'maintenance') {
                payload.dateTimeStr = search?.data?.createTimeStr || '';
                payload.deviceTypeId = record?.deviceTypeId || '';
                payload.maintainVendorId = record?.maintainVendorId || '';
            }
            // 添加id
            if (type !== 'maintenance') {
                payload.id = record?.id;
            }
            dispatchHandle(
                dispatch,
                {
                    'consume': 'fee/operation_service_consumables_update_closing_patch',
                    'maintenance': 'fee/operation_service_maintain_save_closing_patch',
                    'sporadic': 'fee/operation_service_sporadic_repairs_patch'
                }[type],
                payload,
                () => {
                    setTimeout(()=> {
                        search.refresh()
                    }, 500)
                }
            )
            setVisible(false)
        })
            .catch(() => { })
    }
    useEffect(() => {
        if (visible) {
            form.setFieldsValue(record)
            if (type === 'maintenance') {
                dispatchHandle(
                    dispatch,
                    'fee/operation_service_maintain_maintain_closing_record_post',
                    { deviceTypeId: record?.deviceTypeId, maintainVendorId: record.maintainVendorId },
                    res => {
                        if (res) {
                            // console.log(res)
                            setReportDetail(res)
                        }
                    }
                )
            }
            if (type === 'sporadic') {
                console.log(type)
                dispatchHandle(
                    dispatch,
                    'fee/operation_service_sporadic_repairs_closing_record_sporadicRepairsId_patch',
                    { sporadicRepairsId: record?.id },
                    res => {
                        if (res) {
                            setReportDetail(res)
                        }
                    }
                )
            }
        }
    }, [visible])
    const content = (<Form form={form}>
        <div style={{ padding: '16px 16px 0' }}>
            <Form.Item name="closingOrder" rules={[{ required: true, message: '请输入结报单号' }]}>
                <Input allowClear placeholder="请输入结报单号" />
            </Form.Item>
            <Form.Item name="closingAmount" rules={[{ required: true, message: '请输入结报金额' }]}>
                <InputNumber min={1} allowClear placeholder="请输入结报金额" style={{ width: '100%' }} />
            </Form.Item>
        </div>
        {
            ((type === 'maintenance' || type === 'sporadic') && reportDetail?.length > 0) && (<>
                <p style={{ padding: '0 16px 5px', textAlign: 'center', borderBottom: '1px solid #ededed', marginBottom: 16 }}>历史结报</p>
                <div style={{ background: '#d0d0d0', color: '#fff', overflowY: 'auto', maxHeight: 183 }}>
                    {
                        reportDetail?.map((item, index) => (
                            <div key={index} style={{padding: '8px 16px', borderBottom: '1px solid #fff'}}>
                                <p style={{ display: 'flex', justifyContent: 'space-between' }}>
                                    <span>{item?.closingOrder || ''}</span>
                                    <span>{item?.closingAmount ? `￥${item?.closingAmount}` : ''}</span>
                                </p>
                                <p style={{ textAlign: 'right' }}>{item?.createTime ? moment(item?.createTime).format('YYYY/MM/DD HH:mm:ss') : '--'}</p>
                            </div>
                        ))
                    }
                </div>
            </>)
        }
        <div style={{ display: 'flex', justifyContent: 'space-between', padding: 16 }}>
            <Button onClick={() => setVisible(false)}>取消</Button>
            <Button onClick={handleSubmit} type="primary">保存</Button>
        </div>
    </Form>)
    return <Popover
        title={<p style={{ textAlign: 'center' }}>本次结报</p>}
        placement="right"
        content={content}
        trigger="click"
        onVisibleChange={onVisibleChange}
        visible={visible}
        overlayClassName={style.popover_card}
    >
        <a>{title ? `￥${title}` : '未结报'}</a>
    </Popover>
}

export default connect(({ fee, loading }) => ({
    fee,
}))(FinalReport);