Inspection/web/client/src/sections/patrolManage/components/addReportRulesModal.js

import { Button, Form, Input, Modal, Select, DatePicker,message } from 'antd'
import React, { useState, useEffect } from 'react'
import { connect } from 'react-redux'
import Uploads from '$components/Uploads'
const { RangePicker } = DatePicker
import moment from 'moment'

const AddReportRulesModal = props => {
  const [form] = Form.useForm()
  const { user, visible, cancelHandle, actions, dispatch, onOk, modalData,typeList,structAll} = props
  const [systemList, setSystemList] = useState([{ value: 1, label: '动力系统' },{ value: 2, label: '网络系统' }])
  const { patrolManage } = actions
  const [type, setType] = useState(0)
  const [system,setSystem]=useState(0)//system
  const [isShow, setIsShow] = useState(false)
  const [structlist, setStructlist] = useState([])//结构物列表(只包括id和name)
  // const [startTime,setStartTime]=useState('')
  // const [endTime,setEndTime]=useState('')
  useEffect(()=>{
    if(modalData){
      setType(modalData.type)
    }
  },[modalData])
  const typeChange = e => {
    setType(e)
    form.setFieldValue('system', '')
    form.setFieldValue('structure', undefined)
  }
  useEffect(()=>{
    if(type){
      if(type==1){
        const list = structAll.filter(v => v.type === '管廊')?.map(k => {
          return {
              value: k.id,
              label: k.name
          }
      })
      setStructlist(list)
      }
    }
  },[type])
  useEffect(()=>{
      //过滤管廊类型的数据
      const list = structAll.filter(v => v.type === '管廊')?.map(k => {
        return {
            value: k.id,
            label: k.name
        }
    })
    setStructlist(list)
  },[])
  
  useEffect(() => {
    // setPic(modalData?.reportpic)
    form.setFieldsValue({
      structure: null,
      pic: null,
      name: null,
      type: null,
      timeRange: null,
    })
    form.setFieldsValue({
      structure: modalData?.structure,
      name: modalData?.name,
      type: modalData?.type,
      system:modalData?.system,
      pic: modalData?.reportpic?.map(item=>{return {storageUrl:item}}),
      timeRange: modalData?.startTime ? [moment(modalData?.startTime), moment(modalData?.endTime)] : [],
    })
  }, [visible])
  const timeChane = e => {}
  const okHandler = () => {
    form
      .validateFields()
      .then(values => {
        if(values.pic?.length<4){
            message.warning(`最少选择4张图片`)
            return 
        }
        const params = {
          id: modalData?.id,
          name: values.name,
          type: values.type,
          system:values.system,
          structure: Array.isArray(values.structure) ? [...values.structure] : [values.structure],
          endTime: moment(values.timeRange[1]).endOf('day').format('YYYY-MM-DD HH:mm:ss'),
          startTime: moment(values.timeRange[0]).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
          reportpic: values?.pic[0]?.name ? values?.pic.map(u => u.storageUrl) : modalData?.reportpic,
        }
        dispatch(patrolManage.postReport(params)).then(res => {
          if (res.success) {
            // form.resetFields()
            cancelHandle()
            onOk()
            setType(null)
          }
        })
      })
      .catch(info => {
        console.log('Validate Failed:', info)
      })
  }
  //use 
  // const structChange=(e)=>{
  //   setStructObj(structAll.find(item=>item.id==e))
  // }
  // useEffect(()=>{
  //   if(strcutObj){
  //     if(strcutObj.subType.includes('供配电系统')||strcutObj.subType.includes('防雷')){
  //       setSystemList([{ value: 1, label: '动力系统' }])
  //       setIsShow(true)
  //     }else if(strcutObj.subType.includes('指挥中心')||strcutObj.subType.includes('安防'))
  //       setSystemList([{ value: 2, label: '网络系统' }])
  //       setIsShow(true)
  //     }
      
  // },[strcutObj])

  const systemChange=(e)=>{
    setSystem(e)
    // setType(null)
    form.setFieldValue('structure', undefined)
    if(e==1){
      const list=structAll.filter(v => v.type === '管廊')?.filter(item=>item.subType.includes('供配电系统')||item.subType.includes('防雷'))
      if(list&&list.length){
        setStructlist( list?.map(item=>{
          return {value: item.id,
            label: item.name}
        }))
       
      }else{
        setStructlist([])
      }
    }else if(e==2){
        const list=structAll.filter(v => v.type === '管廊')?.filter(item=>item.subType.includes('指挥中心')||item.subType.includes('安防'))
        if(list&&list.length){
          setStructlist( list?.map(item=>{
            return {value: item.id,
              label: item.name}
          }))
         
        }else{
          setStructlist([])
        }
      }



  }

  return (
    <>
      <Modal
        destroyOnClose
        title={modalData ? '编辑报表规则' : '新建报表规则'}
        visible={visible}
        onCancel={() => {
          cancelHandle()
          setIsShow(false)
          setType(0)
          form.setFieldsValue({
            structure: null,
            pic: null,
            name: null,
            type: null,
            timeRange: null,
          })
          // form.resetFields()
        }}
        onOk={okHandler}>
        <Form
          form={form}
          labelCol={{
            span: 5,
          }}
          initialValues={
            {
              // structure:modalData?.structure,
              // pic:modalData?.reportpic,
              // name:modalData?.name,
              // type:modalData?.type,
              // timeRange:[moment(modalData?.startTime),moment(modalData?.endTime)]
            }
          }>
          <Form.Item label='报表名称' name='name' rules={[{ required: true, message: '请输入报表名称' }]}>
            <Input />
          </Form.Item>
          <Form.Item label='报表类型' name='type' rules={[{ required: true, message: '请选择报表类型' }]}>
            <Select onChange={typeChange}>
              {typeList?.map(g => {
                return (
                  <Option key={g.value} value={g.value} label={g.label}>
                    <div
                      style={{
                        display: 'flex',
                        justifyContent: 'space-between',
                      }}>
                      {g.label}
                    </div>
                  </Option>
                )
              })}
            </Select>
          </Form.Item>
          {type===2?
          <Form.Item label='系统' name='system' rules={[{ required: true, message: '请选择系统' }]}>
            <Select onChange={systemChange} >
              {systemList?.map(g => {
                return (
                  <Option key={g.value} value={g.value} label={g.label}>
                    <div
                      style={{
                        display: 'flex',
                        justifyContent: 'space-between',
                      }}>
                      {g.label}
                    </div>
                  </Option>
                )
              })}
            </Select>
          </Form.Item>:''}
          <Form.Item label='关联结构物' name='structure' rules={[{ required: true, message: '请选择结构物' }]}>
            <Select mode={type === 2 ? 'multiple' : undefined}>
              {structlist?.map(g => {
                return (
                  <Option key={g.value} value={g.value} label={g.label}>
                    <div
                      style={{
                        display: 'flex',
                        justifyContent: 'space-between',
                      }}>
                      {g.label}
                    </div>
                  </Option>
                )
              })}
            </Select>
          </Form.Item>
        
          <Form.Item label='生成时间' name='timeRange' rules={[{ required: true, message: '请选择时间' }]}>
            <RangePicker onChange={timeChane} />
          </Form.Item>
          <Form.Item label='发现问题上传:' name='pic' rules={[{ required: true, message: '请选择图片' }]}>
            <Uploads
              listType='picture-card'
              uploadType='project'
              maxFilesNum={15}
              maxFileSize={10}
              isQiniu={true}
              // disabled={true}
              fileTypes={['png', 'jpg']}
              fileList={modalData?.reportpic}
              defaultValue={(() => {
                let nextV = []
                for (let s of modalData?.reportpic || []) {
                  if (s) {
                    nextV.push({
                      url: s,
                      storageUrl: s,
                    })
                  }
                }
                return nextV
              })()}
            />
          </Form.Item>
        </Form>
      </Modal>
    </>
  )
}

function mapStateToProps(state) {
  const { auth, global } = state
  return {
    user: auth.user,
    actions: global.actions,
  }
}
export default connect(mapStateToProps)(AddReportRulesModal)