routeAdd.tsx

/* eslint-disable no-param-reassign */
import React, {useEffect} from 'react';
import {Form, Modal, Button, message} from 'antd'
import {useRequest} from 'umi'
import {createSubmitForm} from "@/utils/createForm";
import {fetMenuEdit} from './basic'

type RouteAddProps = {
  visible: boolean;
  handleClose: () => void;
  level: 'same' | 'child';
  routeInfo?: any;
  platformType: '1' | '2' | '3';
  update: () => void
}

const RouteAdd: React.FC<RouteAddProps> = (props) => {
  const {visible, handleClose, level, routeInfo, platformType, update} = props;
  const [form] = Form.useForm();

  const closeModal = () => {
    handleClose();
    form.resetFields()
  }
  const menuEdit = useRequest(fetMenuEdit, {
    manual: true,
    onSuccess: () => {
      message.success((routeInfo.id && level === 'same') ? '编辑成功' : '添加成功');
      update()
      closeModal()
    }
  })

  useEffect(() => {
    if (Object.keys(routeInfo)?.length > 0 && level === 'same'){
      routeInfo.authorityList = routeInfo.authority
      form.setFieldsValue(routeInfo)
    }
  }, [routeInfo])


  const editPc =(data: any) => {
    const parentId = level === 'child' ? routeInfo?.id : routeInfo?.parentId
    return {...data, attributionUserTypes: 1, platformType: 1, parentId};
  }
  const editAndroid =(data: any) => {
    const parentId = level === 'child' ? routeInfo?.id : routeInfo?.parentId
    return {...data, attributionUserTypes: 2, platformType: 2, parentId};
  }
  const editIos =(data: any) => {
    const parentId = level === 'child' ? routeInfo?.id : routeInfo?.parentId
    return  {...data, attributionUserTypes: 1, platformType: 3, parentId};
  }


  const handleSubmit =  (e: React.FormEvent) => {
    e.preventDefault();
    form.validateFields().then(values => {
      if (routeInfo.id && level === 'same') values.id = routeInfo.id
      const submitMethod = {1: editPc, 2: editAndroid, 3: editIos}[platformType] || editPc
      const payload = submitMethod(values)
      menuEdit.run(payload)
      // console.log('values', payload)
    }).catch(() => {});
  };


  const allFormData = [
    { label: '菜单名称', name: 'name', type: 'input'},
    { label: '路由地址', name: 'path', type: 'input'},
    { label: '组件地址', name: 'component', type: 'input'},
    { label: '图标', name: 'icon', type: 'input'},
    { label: '权限编码', name: 'code', type: 'input'},
    { label: '是否隐藏', name: 'hideInMenu', type: 'switch'},
    { label: '是否权限菜单', name: 'authMenu', type: 'switch'}

  ]

  return (
    <Modal
      width={500}
      title='添加路由'
      visible={ visible }
      onCancel={ closeModal }
      centered
      footer={null}
      getContainer={false}
    >
      <Form form={form} onFinish={ handleSubmit } initialValues={{authorityList: [''], hideInMenu: false, authMenu: true}}>
        {allFormData?.map(item => createSubmitForm(item))}
        {/* <AuthorityList/> */}
        {/* {allFormData2?.map(item => createSubmitForm(item))} */}
        <div style={{ marginTop: 32, textAlign: 'right' }}>
          <Button style={{ width: 100, marginRight: 20 }} onClick={closeModal}>
            取消
          </Button>
          <Button style={{ width: 100}} type="primary" onClick={handleSubmit}>保存</Button>
        </div>
      </Form>

    </Modal>
  );
};

export default RouteAdd