AddStandard.jsx 8.71 KB
import React, { useEffect, useState } from 'react'
import { Modal, Form, Input, Select, Button, InputNumber, TreeSelect } from 'antd';
import { connect } from 'umi'
import { UploadOutlined, LinkOutlined, CloseOutlined } from '@ant-design/icons';

import { dispatchHandle } from "@/utils/publicHandle";
import { dicFindUtils, DictBizType, batchDicData } from '@/utils/utils'
import useUpdateEffect from '@/useHooks/useUpdateEffect';
import UploadFile from '@/components/ImgUploadFile'
import { isImg } from '../../utils/util'
import _ from 'lodash'

import style from '../index.less'

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

const AddStandard = (props) => {
    const {
        dispatch,
        visible,
        search,
        setVisible,
        id,
        type,
        dict: {
            dicTotalsList
        },
        user: { userTree },
    } = props;
    console.log(props)
    const [form] = Form.useForm();
    // 标准用时单位
    const [loading, setLoading] = useState(false)
    const [imgList, setImgList] = useState([]);
    const [fileList, setfileList] = useState();
    const handleOk = () => {
        setLoading(true)
        form.validateFields().then(values => {
            console.log(values)
            const enclosure = imgList.length > 0 && imgList.map(item => ({
                enclosureName: item?.name || '',
                enclosureUrl: item?.response?.data?.url || '',
            })) || []
            if (type === 'edit') {
                const payload = {
                    ...values,
                    id,
                    enclosure
                }
                delete payload.annex
                dispatchHandle(
                    dispatch,
                    'maintaining/operation_service_m_curing_standard_saveOrUpdate_patch',
                    payload,
                    () => {
                        setVisible(false)
                        setLoading(false)
                        form.resetFields()
                        search.refresh();
                    }
                )
            } else {
                const payload = { ...values, enclosure }
                delete payload.annex
                dispatchHandle(
                    dispatch,
                    'maintaining/operation_service_m_curing_standard_saveOrUpdate_patch',
                    payload,
                    () => {
                        setVisible(false)
                        setLoading(false)
                        form.resetFields()
                        search.refresh();
                    }
                )
            }
        })
            .catch(err => { })
    }
    const handleCancel = () => {
        form.resetFields()
        setVisible(false)
        setLoading(false)
        setImgList([])
    }
    useEffect(() => {
        if (visible && type === 'edit') {
            dispatchHandle(
                dispatch,
                'maintaining/operation_service_m_curing_standard_detail_id_get',
                { id: props?.id },
                res => {
                    if (res) {
                        form.setFieldsValue({ ...res })
                        const arr = res?.enclosureBOList?.map(item=>({
                            name: item?.enclosureName,
                            response: {
                                data: {
                                    url: item?.enclosureUrl
                                }
                            }
                        }))
                        setImgList(arr)
                    }
                }
            )
        }
    }, [visible])
    const uploadChange = (files, fileInfo) => {
        const value = String(files);
        const filesList = fileInfo.fileList;
        const arr = _.differenceBy(
            filesList, 
            imgList,
            'name'
        )
        console.log(arr , `00000000`, imgList)
        setImgList([...imgList , ...arr]);
        setfileList(value)
    }
    const deleteImgAction = (indexs) => {
        const arr = imgList.filter((item, index) => index !== indexs)
        setImgList(arr)
    }
    const checkAnnexAction = (item) => {
        const url = item?.enclosureUrl || item?.response?.data?.url || '';
        dispatchHandle(
            dispatch,
            'maintaining/account_service_file_online_preview_url_post',
            { name: url },
            result => {
                console.log(result)
                if (result) {
                    window.open(result)
                }
            }
        )
    }
    const { deviceType } = batchDicData(
        ['deviceType'],
        dicTotalsList
    )
    const formItemLayout = {
        labelCol: {
            span: 6
        },
        wrapperCol: {
            span: 18
        }
    }
    // 所属设备类型
    // const deviceType = dicFindUtils(dicTotalsList, DictBizType.deviceType);
    const timeType = dicFindUtils(dicTotalsList, DictBizType.timeType);
    return <Modal
        title={`${type === 'edit' ? '编辑' : '新增'}标准`}
        visible={visible}
        onOk={handleOk}
        onCancel={handleCancel}
        className={style.add_standard_modal}
        width="35%"
        confirmLoading={loading}
        getContainer={false}
    >
        <Form form={form}>
            <Form.Item label="标准名称" name="standardName" {...formItemLayout} rules={[{ required: true, message: "标准名称不能为空!" }]}>
                <Input placeholder="请输入" allowClear />
            </Form.Item>
            <Form.Item label="标准编号" name="standardNumber" {...formItemLayout} rules={[{ required: true, message: "标准编号不能为空!" }]}>
                <Input placeholder="请输入" allowClear />
            </Form.Item>
            <Form.Item label="所属设备类型" name="equipmentTypeId" {...formItemLayout} rules={[{ required: true, message: "所属设备类型不能为空!" }]}>
                <TreeSelect
                    allowClear
                    showSearch
                    treeNodeFilterProp="title"
                    treeData={deviceType?.selectData || []}
                    placeholder="请输入"
                />
            </Form.Item>
            <Form.Item label="质量标准" name="qualityStandard" {...formItemLayout} rules={[{ required: true, message: "质量标准不能为空!" }]}>
                <TextArea rows={5} placeholder="请输入" allowClear />
            </Form.Item>
            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                <Form.Item label="标准参考用时" name="standardReferenceTime" labelCol={{ span: 7 }} style={{ flex: 1, marginRight: 7 }}>
                    <InputNumber style={{ width: '100%' }} placeholder="请输入" />
                </Form.Item>
                <Form.Item style={{ minWidth: '18%' }} name="standardReferenceTimeUnitId">
                    <Select placeholder="请选择" allowClear>
                        {
                            timeType && timeType.length > 0 && timeType.map(i => <Option value={i.id} key={i.id}>{i.dicValue}</Option>)
                        }
                    </Select>
                </Form.Item>
            </div>
            <Form.Item label="附件" name="annex" {...formItemLayout} style={{marginBottom: 10}}>
                <UploadFile
                    // fileType='document'
                    onChange={uploadChange}
                    showUploadList={false}
                >
                    <Button icon={<UploadOutlined />}>上传附件</Button>
                </UploadFile>
            </Form.Item>
            {
                imgList && imgList?.length > 0 && (
                    <Form.Item label=" " colon={false} {...formItemLayout} style={{ margin: 0 }}>
                        <ul style={{ display: 'flex' , flexWrap: 'wrap' , flexDirection: 'column',textAlign: 'left' }}>
                            {
                                imgList?.map((item, index) => (
                                    <li key={index} style={{ color: '#2a7e1d' }}>
                                        <LinkOutlined /> <span onClick={() => checkAnnexAction(item)}>{item?.name}</span><CloseOutlined style={{marginLeft: 5 , fontSize: 12}} onClick={() => deleteImgAction(index)} /></li>
                                ))
                            }
                        </ul>
                    </Form.Item>
                )
            }
        </Form>
        <Form.Item label=" " colon={false} {...formItemLayout} style={{ margin: 0 }}>
            <p>支持扩展名:.rar .zip .doc .docx .pdf .png...</p>
        </Form.Item>
    </Modal>
}

export default connect(({ maintaining, dict, user, loading }) => ({
    user,
    dict,
    maintaining,
    loading: loading.effects['maintaining/operation_service_m_curing_standard_pageList_post']
}))(AddStandard)