tsg-web/src/views/zbgl/zbrz/form.js

import React,{useEffect,useState,useMemo} from 'react';
import { Form, Button, Input, Row, Col, DatePicker, TreeSelect,Image,message,Upload } from 'antd';
import { formItemLayout, btnItemLayout } from '../../../components/crud/FormLayoutProps';
import apiurl from '../../../service/apiurl';
import { httpget2, httppost2,xyt_httpget2 } from '../../../utils/request';
import "./index.less"
import moment from 'moment';
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
const { Dragger } = Upload;

const ModalForm = ({ mode, record,onEdit,onSave,onCrudSuccess }) => {
  const [form] = Form.useForm();
  const [deptList, setDeptList] = useState([])
  const [deptUserList, setDeptUserList] = useState([])

   // 获取部门数据
   const getDeptList = async() => {
    try {
      const result = await xyt_httpget2(apiurl.rcgl.zbgl.zbb.deptlist);
      if (result.code == 200) {
        setDeptList(result.data);
        getDeptUser()
      }
      
    } catch (error) {
      console.log(error);
    }
  }

  // 获取部门人员数据
  const getDeptUser = async(deptId) => {
    try {
      const result = await xyt_httpget2(apiurl.rcgl.zbgl.zbb.userList, {pageNum:1,pageSize:9999});
      if (result.code == 200) {
        setDeptUserList(result.rows)
      }
    } catch (error) {
      console.log(error);
    }
  }


  const buildTree = (data, parentId) => {
    let tree = [];
    data.forEach((node) => {
        node.title = node.deptName;
        node.key = node.deptId;
        
        if (node.parentId === parentId) {
        let children = buildTree(data, node.deptId);
        if (children.length) {
            node.children = children;
        }
        tree.push(node);
        }
    });
    return tree;
}
  const handleTreeList = (dept, user) => {
    const deptArr = dept.map(item => {
      return {
        ...item,
        value: item.deptId,
        title: item.deptName,
        disabled: item.userId ? false : true,
        children: user.filter(u => u.deptId == item.deptId).map(u => ({
          ...u,
          value: u.userId,
          title: u.nickName
        }))
      }
    }) 
    console.log("deptArr",deptArr);
    const treelist = buildTree(deptArr,0)
    return treelist
  }
  const treeList = useMemo(() => {
    if (deptUserList?.length > 0 && deptList?.length > 0) {
        return handleTreeList(deptList,deptUserList)
    } else {
      return []
    }
  },[deptUserList,deptList])

  const onFinish = async (values) => {
    if (mode === 'edit') {
      values.id = record?.id
      onEdit(apiurl.rcgl.zbgl.zbrz.edit,values)
    }
    if (mode === 'save') {
      onSave(apiurl.rcgl.zbgl.zbrz.save,values)
    }
  }
  useEffect(() => {
    getDeptList()
    // getDeptUser()
  }, [])
  
  return (
    <>
      <Form
        form={form}
        {...formItemLayout}
        onFinish={onFinish}
        initialValues={record}
      >
      <Row>
          <Col span={12}>
          <Form.Item
                label="值班日期"
                 name="rotaDate"
                rules={[{ required: true }]}
                getValueFromEvent={(e, dateString) => dateString}
                getValueProps={value => ({
                value: value ? moment(value) : undefined
                })}
            >
               <DatePicker allowClear style={{ width: '100%' }} disabled={mode==='view'} />
              </Form.Item>
          </Col>
          <Col span={12}>
              <Form.Item
                label="天气"
                name="weather"
              >
                <Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
              </Form.Item>
          </Col>
      </Row>
      <Row>
        <Col span={12}>
            <Form.Item
              label="值班人员"
              name="dutyUserId"
              rules={[{ required: true }]}

            >
                <TreeSelect
                   showSearch
                   style={{
                     width: '100%',
                   }}
                   disabled={mode==='view'}
                   dropdownStyle={{
                     maxHeight: 400,
                     overflow: 'auto',
                   }}
                   allowClear
                   treeDefaultExpandAll
                   treeData={treeList}
                   treeNodeFilterProp='title'
               />
            </Form.Item>
        </Col>
        <Col span={12}>
            <Form.Item
              label="值班领导"
              name="leaderUserId"
            >
                <TreeSelect
                   showSearch
                   disabled={mode==='view'}
                   style={{
                     width: '100%',
                   }}
                   dropdownStyle={{
                     maxHeight: 400,
                     overflow: 'auto',
                   }}
                   allowClear
                   treeDefaultExpandAll
                   treeData={treeList}
                   treeNodeFilterProp='title'
               />
            </Form.Item>
        </Col>
      </Row>
      <Row>
          <Col span={24}>
              <Form.Item
                label="值班情况"
                name="dutySituation"
                labelCol={{ span: 3 }}
                wrapperCol={{ span: 19 }}
                rules={[{ required: true }]}
                
              >
                <Input.TextArea disabled={mode==='view'} style={{width:'100%'}} allowClear />
              </Form.Item>
          </Col>
      </Row>
      <Row>
          <Col span={24}>
              <Form.Item
                label="待处理事项"
                name="todoList"
                labelCol={{ span: 3 }}
                wrapperCol={{ span: 19 }}
              >
                <Input.TextArea disabled={mode==='view'} style={{width:'100%'}} allowClear />
              </Form.Item>
          </Col>
      </Row>
      {
        mode==='view'?null:(
          <>
          <Form.Item {...btnItemLayout}>
            <Button type="primary" htmlType="submit">
              {mode === 'save' ? '提交' : '修改'}
            </Button>
          </Form.Item>
          </>
        )
      }
      </Form>
  
    </>
  );
}

export default ModalForm;