OperationalService/web-network/client/src/sections/fillion/components/task/addTaskModal.js

import React, { useState, useEffect, useRef } from 'react';
import { Modal, Form, Input, Select, Button } from 'antd';
import { connect } from 'react-redux';
import { getRoadway } from '../../actions/infor'
import { getUserList } from '../../actions/patrol';
import { editTask } from '../../actions/task';

const AddModal = (props) => {
    const { dispatch, recordRow, visible, onClose, user, lookVal } = props
    const { TextArea } = Input
    const [form] = Form.useForm()
    const [inputVal, setIputVal] = useState(undefined)
    const [selectVal, setSelectVal] = useState('')
    const [roadRes, setRoadRes] = useState([])//路线列表
    const [userList, setUserList] = useState([])//用户列表
    useEffect(async () => {
        const res = await dispatch(getUserList())
        setUserList(res?.payload.data)
    }, [true])

    const onChange = () => {
        form.resetFields(['code'])//清空具体某个表单的值
    }
    useEffect(() => {
        form.setFieldsValue(recordRow ? { 'name': recordRow?.road.id, 'code': recordRow?.road.id, 'danger': recordRow?.dangerDescription, 'user': recordRow?.user.id } : {})
    }, [recordRow])
    useEffect(async () => {
        const res = await dispatch(getRoadway({}))
        setRoadRes(res?.payload.data)
    }, [])
    //新增和修改
    const handleSaveUpdate = () => {
        form.validateFields().then((values) => {
            //console.log('values', recordRow)
            //console.log('values', values)
            const val = {
                dangerDescription: values.danger,
                userId: values.user,
                routeId: values.name,
                id: recordRow?.id
            }
            dispatch(editTask(val)).then(res => {
                if (res.success) {
                    onClose()
                    form.resetFields()
                }
            })
        })
    }

    return (
        <Modal visible={visible}
            title={lookVal ? '查看' : recordRow ? '编辑任务' : '新增数据'}
            onCancel={() => {
                onClose()
                form.resetFields()//清空所有个表单的值
                setSelectVal('')//置空路线代码的选择
            }}
            onOk={
                handleSaveUpdate
            }
            footer={
                lookVal ? null : [
                    <Button onClick={() => { onClose(); form.resetFields(); setSelectVal('') }}>取消</Button>,
                    <Button type='primary' onClick={handleSaveUpdate}>确认</Button>
                ]
            }
        >
            <Form form={form}>
                <Form.Item
                    label="路线名称"
                    name="name"
                    //initialValues={recordRow?.road.routeName}
                    rules={[{ required: true, message: '路线名称' }]} >
                    <Select
                        disabled={lookVal ? true : false}
                        allowClear='true'
                        showSearch
                        placeholder="请输入关键词"
                        onChange={(value) => {
                            onChange()
                            setSelectVal(value)
                        }}
                        filterOption={(input, option) =>
                            (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
                        }
                        options={roadRes?.map((item) => ({
                            label: item.routeName,
                            value: item.id
                        })
                        )}
                    />
                </Form.Item>
                <Form.Item
                    label="路线代码"
                    name="code"
                    rules={[{ required: true, message: '路线代码' }]}>
                    <Select
                        disabled={lookVal ? true : false}
                        placeholder="请输入关键词"
                        value={selectVal}
                    >
                        <Select.Option key={selectVal}>{selectVal}</Select.Option>
                    </Select>
                </Form.Item>
                <Form.Item
                    label="隐患说明"
                    name="danger"
                    rules={[{ required: true, message: '隐患说明' }]}>
                    <TextArea disabled={lookVal ? true : false} />
                </Form.Item>
                <Form.Item
                    label="责任人"
                    name="user"
                    rules={[{ required: true, message: '责任人' }]}>
                    <Select
                        disabled={lookVal ? true : false}
                        allowClear='true'
                        showSearch
                        placeholder="请输入负责人"
                        options={userList?.map((item) => ({
                            label: item.name,
                            value: item.id
                        })
                        )}
                    />
                </Form.Item>
                {lookVal ? <Form.Item
                    label="下发时间"
                    name="issuanceTime"
                >
                    <Input disabled={lookVal ? true : false} />
                </Form.Item> : ''}
                {lookVal ? <Form.Item
                    label="图片说明"
                    name="picture"
                >
                    <Input disabled={lookVal ? true : false} />
                </Form.Item> : ''}
            </Form>
        </Modal >

    )
}
function mapStateToProps(state) {
    const { auth } = state
    return {
        user: auth.user,
    }
}

export default connect(mapStateToProps)(AddModal)