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

import React,{useEffect,useMemo,useState} from 'react';
import { Form, Button, Row, Col, Divider, message,TreeSelect } from 'antd';
import { formItemLayout, btnItemLayout } from '../../../components/crud/FormLayoutProps';
import { createCrudService } from '../../../components/crud/_';
import { getDictService,getDutyTypeService } from '../../../service/SelectValue'
import apiurl from '../../../service/apiurl';
import NormalSelect from '../../../components/Form/NormalSelect'
import { disable } from 'ol/rotationconstraint';
import { httpget2,xyt_httpget2 } from '../../../utils/request';

const ModalForm = ({ mode, record,onEdit,onSave,close,onCrudSuccess }) => {
  const [form] = Form.useForm();
  const treeData = [
    {
      value: 'parent 1',
      title: 'parent 1',
      disable:true,
      children: [
        {
          value: 'parent 1-0',
          title: 'parent 1-0',
          disable:true,
          children: [
            {
              value: 'leaf1',
              title: 'leaf1',
              disable:false,
              children:[]
            },
            {
              value: 'leaf2',
              title: 'leaf2',
              disable:false,
              children:[]
            },
          ],
        },
        {
          value: 'parent 1-1',
          title: 'parent 1-1',
          children: [
            {
              value: 'leaf3',
              title: (
                <b
                  style={{
                    color: '#08c',
                  }}
                >
                  leaf3
                </b>
              ),
              children:[]
            },
          ],
        },
      ],
    },
  ];
  console.log(record);
  const [value, setValue] = useState({});
  const [isHoliday, setIsHoliday] = useState(0)
  const [deptList, setDeptList] = useState([])
  const [deptUserList, setDeptUserList] = useState([])
  /**
   * @description 表单重置
   */
  const onReset = () => {
    form.resetFields();
  };
  const onFinish = (values) => {
    let params = {
      isHoliday,
      rotaDate: record.time,
      userDtoList:Object.keys(values).map(item => ({
        rotaType: item == "1" ? 1 :
          item == "2" ? 2 :
            item == "3" ? 3 : 4,
        userId : values[item]
      }))
    }
    if (mode == "save") {
      onSave(apiurl.fxzb.zbb.edit,params)
    }
    if (mode == "edit") {
      onEdit(apiurl.fxzb.zbb.edit,params)
    }
  }

  /**
   * @description 设置放假日
   */
  
  const handleHoliday = () => {
    setIsHoliday(1)
    form.submit()
  }

  // 获取部门数据
  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() => {
    try {
      const result = await xyt_httpget2(apiurl.rcgl.zbgl.zbb.userList, {pageNum:1,pageSize:999});
      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])
  useEffect(() => {
    if (mode == "edit") {
      let initialValues = {
        "1": record.shiftLeader.userId,
        "2": record.dutyLeader.userId,
      }
      console.log(initialValues);
      form.setFieldsValue(initialValues);
    }
  }, [record])
  
useEffect(() => {
  getDeptList()
  // getDeptUser()
}, [])

  return (
    <Form form={form} {...formItemLayout} onFinish={onFinish} >
      <Row>
        <Col span={24}>
            <Form.Item
              label="带班领导"
              name="1"
            >
                <TreeSelect
                   showSearch
                   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="2"
            >
                <TreeSelect
                   showSearch
                   style={{
                     width: '100%',
                   }}
                   dropdownStyle={{
                     maxHeight: 400,
                     overflow: 'auto',
                   }}
                   allowClear
                   value="leaf3"
                   treeDefaultExpandAll
              treeData={treeList}
              treeNodeFilterProp='title'
               />
            </Form.Item>
        </Col>
      </Row>
      {/* <Row>
        <Col span={24}>
            <Form.Item
              label="白班"
              name="3"
            >
                <TreeSelect
                   showSearch
                   style={{
                     width: '100%',
                   }}
                   dropdownStyle={{
                     maxHeight: 400,
                     overflow: 'auto',
                   }}
                   allowClear
                   treeDefaultExpandAll
              treeData={record.tree}
              treeNodeFilterProp='title'
               />
            </Form.Item>
        </Col>
      </Row>
      <Row>
        <Col span={24}>
            <Form.Item
              label="晚班"
              name="4"
            >
                <TreeSelect
                   showSearch
                   style={{
                     width: '100%',
                   }}
                   dropdownStyle={{
                     maxHeight: 400,
                     overflow: 'auto',
                   }}
                   allowClear
                   treeDefaultExpandAll
              treeData={record.tree}
              treeNodeFilterProp='title'
               />
            </Form.Item>
        </Col>
      </Row> */}
      {
        mode==='view'?null:(
          <>
          <Form.Item wrapperCol={{ span: 15, offset: 9 }}>
              <Button
                type='primary'
                onClick={handleHoliday}
                style={{ marginRight: 10 }}>
              设为放假日
            </Button>
            <Button onClick={onReset} style={{marginRight:10}}>
              重置
            </Button>
            <Button type="primary" htmlType="submit">
              {mode === 'save' ? '提交' : '修改'}
            </Button>
          </Form.Item>
          </>
        )
      }
    </Form>
  );
}

export default ModalForm;