financial_audit_console/src/pages/Project/Management/Detail/components/RolePerm.tsx

import ProForm from '@ant-design/pro-form'
import type { ProFormInstance } from '@ant-design/pro-form'
import React, { useEffect, useRef } from 'react'
import { useRequest } from 'umi'
import { setProjectPersonor } from '@/services/api/project'
import { Card, Form, message } from 'antd'
import TreeNodeSelect from '../../List/components/TreeNodeSelect'

type RolePermProps = {
  dataID: string
  defaultFormData: {
    createdID: string
    reportAccount: string[]
  }
}
export default function RolePerm(props: RolePermProps) {
  const { dataID, defaultFormData } = props
  const ref = useRef<ProFormInstance>(null)
  const { run: trySetProjectPersonor } = useRequest(setProjectPersonor, {
    manual: true,
    onSuccess: () => {
      message.success('提交成功')
    }
  })
  useEffect(() => {
    if (dataID) {
      ref.current?.setFieldsValue({ ...defaultFormData })
    }
  }, [dataID])

  return (
    <Card>
      <div className="max-w-320px">
        <ProForm
          formRef={ref}
          onFinish={formData => trySetProjectPersonor({ ...formData, ID: dataID })}>
          <Form.Item
            tooltip="创建项目、管理编辑者、上传项目数据、编制项目、添加批注"
            label="创建人"
            name="createdID"
            rules={[{ required: true, message: '请选择创建人' }]}>
            <TreeNodeSelect params={{ isCreated: 1 }} />
          </Form.Item>
          <Form.Item label="编辑者" name="reportAccount" tooltip="编制项目、上传项目数据、添加批注">
            <TreeNodeSelect multiple />
          </Form.Item>
        </ProForm>
      </div>
    </Card>
  )
}