fix: 自动填写昵称

src/pages/Customer/Client/components/AddClient/index.jsx

@@ -1,7 +1,12 @@
 import React, { useRef, useState, useEffect } from 'react'
 import { Form, Row, Col, Button } from 'antd'
 import LazyCascader from '@/components/LazyCascader'
-import { ProFormSelect, ProFormText, ProFormTextArea } from '@ant-design/pro-form'
+import {
+  ProFormSelect,
+  ProFormText,
+  ProFormTextArea,
+  ProFormDependency
+} from '@ant-design/pro-form'
 import { Plus } from '@icon-park/react'
 import { useDispatch, connect } from 'umi'
 import { ChangeCompMap } from '@/pages/Customer/Company/components/ChangeCompany'
@@ -35,37 +40,43 @@ const AddClient = props => {
       })
     }
   }, [])
-  const handleChange = () => {
-    if (clientName !== '') {
-      const clientNameNum = clientName.value.split('')
-      const clientText = '工'
-      const symbolBefore = '（'
-      const symbolAfter = '）'
-      if (clientNameNum?.length < 3) {
-        const clientNameTwo = clientNameNum[1]
-        const newClientName =
-          clientNameNum[0] + symbolBefore + clientNameTwo + symbolAfter + clientText
-        niceName.value = newClientName
-      } else if (clientNameNum?.length < 4) {
-        const clientNameTwo = clientNameNum[1] + clientNameNum[2]
-        const newClientName =
-          clientNameNum[0] + symbolBefore + clientNameTwo + symbolAfter + clientText
-        niceName.value = newClientName
-      } else if (clientNameNum?.length < 5) {
-        const clientNameTwo = clientNameNum[1] + clientNameNum[2] + clientNameNum[3]
-        const newClientName =
-          clientNameNum[0] + symbolBefore + clientNameTwo + symbolAfter + clientText
-        niceName.value = newClientName
-      } else {
-        niceName.value = ''
-      }
-    }
-    if (qq !== '') {
-      const emailText = 'qq.com'
-      const emailNew = qq.value + emailText
-      email.value = emailNew
-    }
-  }
+  // const handleChange = () => {
+  //   if (clientName !== '') {
+  //     const clientNameNum = clientName.value.split('')
+  //     const clientText = '工'
+  //     const symbolBefore = '（'
+  //     const symbolAfter = '）'
+  //     if (clientNameNum?.length < 3) {
+  //       const clientNameTwo = clientNameNum[1]
+  //       const newClientName =
+  //         clientNameNum[0] + symbolBefore + clientNameTwo + symbolAfter + clientText
+  //       niceName.value = newClientName
+  //     } else if (clientNameNum?.length < 4) {
+  //       const clientNameTwo = clientNameNum[1] + clientNameNum[2]
+  //       const newClientName =
+  //         clientNameNum[0] + symbolBefore + clientNameTwo + symbolAfter + clientText
+  //       niceName.value = newClientName
+  //     } else if (clientNameNum?.length < 5) {
+  //       const clientNameTwo = clientNameNum[1] + clientNameNum[2] + clientNameNum[3]
+  //       const newClientName =
+  //         clientNameNum[0] + symbolBefore + clientNameTwo + symbolAfter + clientText
+  //       niceName.value = newClientName
+  //     } else {
+  //       niceName.value = ''
+  //     }
+  //   }
+  //   if (qq !== '') {
+  //     const emailText = 'qq.com'
+  //     const emailNew = qq.value + emailText
+  //     email.value = emailNew
+  //   }
+  // }
+  // const handleChange = () => {
+  //   const newEmail = `${email.value}@qq.com`
+  //   formRef.current?.setFieldsValue({
+  //     email: newEmail
+  //   })
+  // }
   return (
     <ModalDragForm
       {...layout}
@@ -104,7 +115,6 @@ const AddClient = props => {
           ) : null
         ]
       }}
-      onChange={handleChange}
       onFinish={async values => {
         await onConfirm(values)
         formRef.current?.resetFields()
@@ -155,7 +165,25 @@ const AddClient = props => {
           />
         </Col>
         <Col span={12}>
-          <ProFormText label="昵称" name="niceName" placeholder="" />
+          <ProFormDependency name={['clientName']}>
+            {({ clientName, newClientName }) => {
+              if (!clientName === false) {
+                const clientNameNum = clientName.split('')
+                const [firstName, ...lastName] = clientNameNum
+                const nameAfter = `（${lastName.join('')}）`
+                // eslint-disable-next-line no-param-reassign
+                newClientName = `${firstName + nameAfter}工`
+              }
+              return (
+                <ProFormText
+                  label="昵称"
+                  name="niceName"
+                  placeholder=""
+                  value={`${newClientName || ''}`}
+                />
+              )
+            }}
+          </ProFormDependency>
           <ProFormText label="职位" name="position" placeholder="" />
           <ProFormText label="QQ" name="qq" placeholder="" />
           <ProFormText label="邮箱" name="email" placeholder="" />