ykzz-web/src/views/Sbwh/Ssgcjl/form.js

import React, { useEffect, useState, useMemo, useRef } from 'react';
import { Form, Button, Input, Row, Upload, Col, Table, DatePicker, InputNumber, message, Image, Modal, Typography, Popconfirm } from 'antd';
import { formItemLayout, btnItemLayout } from '../../../components/crud/FormLayoutProps';
import apiurl from '../../../service/apiurl';
import FileUpload from '../../../components/fileUpload';
import NormalSelect from '../../../components/Form/NormalSelect';
import { httppost2 } from '../../../utils/request';
import "./index.less"
import moment from 'moment';
const { RangePicker } = DatePicker
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"

const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
  const types = [
    {
      label: "技术难题",
      value: 0
    },
    {
      label: "安全事故",
      value: 1
    }, {
      label: "质量问题",
      value: 2
    },
  ]
  const [form] = Form.useForm();
  const [fileIds, setFileIds] = useState()
  const onfinish = (values) => {
    const userId = localStorage.getItem('userId')
    const userName = localStorage.getItem('userName')
    values.createUserId = userId;
    values.createUserName = userName;
    values.startTime = values.tm ? moment(values.tm[0]).format("YYYY-MM-DD 00:00:00") : '';
    values.endTime = values.tm ? moment(values.tm[1]).format("YYYY-MM-DD 00:00:00") : '';
    if (mode === 'edit') {
      values.files = fileIds;
      values.id = record.id;
      onEdit(apiurl.sbwh.ssgcjl.edit, values)
    }
    if (mode === 'save') {
      values.files = fileIds
      onSave(apiurl.sbwh.ssgcjl.save, values)
    }
  }
    const [faList, setFaList] = useState([])
    // 获取方案list
    const getFaList = async () => {
      try {
        const res = await httppost2(apiurl.sbwh.ssgcjl.list)
        if (res.code == 200) {
          setFaList(res.data.map(item => ({label:item.planName,value:item.id})));
        }
      } catch (error) {
        console.log(error);
        
      }
    }
  useEffect(() => {
    if (mode != 'save') {
      let dataSo = record.startTime && record.endTime ?
        [moment(record.startTime), moment(record.endTime)] : ''
      form.setFieldValue("tm", dataSo)
    }
  }, [record, mode])

  useEffect(() => {
    getFaList()
  }, [])
  
  return (
    <>
      <Form
        form={form}
        {...formItemLayout}
        onFinish={onfinish}
        initialValues={record}
      >
        <Row>
          <Col span={12}>
            <Form.Item
              label="项目名称"
              name="projectName"
              rules={[{ required: true }]}
            >
              <Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="方案名称"
              name="planId"
              rules={[{ required: true }]}
            >
               <NormalSelect
                allowClear
                disabled={mode === 'view'}
                style={{ width: "100%" }}
                options={faList}
              />
            </Form.Item>
          </Col>

        </Row>
        <Row>
          <Col span={12}>
            <Form.Item
              label="过程名称"
              name="processName"
              rules={[{ required: true }]}
            >
              <Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="完成情况（%）"
              name="completeStatus"
            >
              <InputNumber min={0} max={100} disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item
              label="问题类型"
              name="problemType"
            >
              <NormalSelect
                allowClear
                disabled={mode === 'view'}
                style={{ width: "100%" }}
                options={types}
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="问题发生时间"
              name="tm"
              getValueFromEvent={(e, dateString) => dateString}
              getValueProps={(value) => {
                return {
                  value: value ? [value[0] && moment(value[0]), value[1] && moment(value[1])] : undefined
                };
              }}
            >
              <RangePicker disabled={mode === 'view'} format={'YYYY-MM-DD'} style={{ width: '100%' }} allowClear />
            </Form.Item>
          </Col>
        </Row>

        <Row>
          <Col span={24}>
            <Form.Item
              label="问题描述"
              name="problemDesc"
              labelCol={{ span: 3 }}
              wrapperCol={{ span: 19 }}
            >
              <Input.TextArea disabled={mode === 'view'} style={{ width: '100%', minHeight: '100px' }} allowClear />
            </Form.Item>
          </Col>
        </Row>


        <Row>
          <Col span={24}>
            <Form.Item
              label="附件"
              name="fieldId"
              labelCol={{ span: 3 }}
              wrapperCol={{ span: 19 }}
            >
              <FileUpload
                uploadUrl={apiurl.sbwh.ssgcjl.uploadUrl}
                downloadUrl={apiurl.sbwh.ssgcjl.downloadUrl}
                mode={mode}
                files={record?.files}
                setFileIds={setFileIds}
              />
            </Form.Item>
          </Col>
        </Row>
        {
          mode === 'view' ? null : (
            <>
              <Form.Item {...btnItemLayout}>
                <Button type="primary" htmlType="submit">
                  {mode === 'save' ? '提交' : '修改'}
                </Button>
              </Form.Item>
            </>
          )
        }
      </Form>

    </>
  );
}

export default ModalForm;