feat: 完善门户管理新增

src/components/AddressSelect/components/AreaSelect/index.tsx

@@ -18,7 +18,7 @@ interface AreaSelectProps {
   onChange?: (value: AreaSelectValueType[]) => void,
 }
 
-const MAX = 4;  // 到街道
+const MAX = 3;  // 到街道
 
 const AreaSelect: React.FC<AreaSelectProps> = (props) => {
   const {
@@ -56,7 +56,7 @@ const AreaSelect: React.FC<AreaSelectProps> = (props) => {
     }
 
     // 全部选择了才触发 onChange
-    if (newInnerValues.length === MAX) {
+    if (newInnerValues.length >= MAX) {
       triggerChange(newInnerValues);
     } else {
       setInnerValues(newInnerValues);

src/pages/authConfig/portalSystem/add.tsx

 import React, { Fragment } from 'react';
-import { Form } from 'antd';
+import { Button, Form } from 'antd';
 import PeripheralLayout from '@/pages/transaction/components/detailLayout';
 import BasicLayout from './components/basicLayout';
 import ContactLayout from './components/contactLayout';
@@ -19,16 +19,25 @@ const PortalSystemAdded: React.FC<{}> = () => {
     { id: 'address2', title: '发货(自提)地址' },
   ]
 
+  const [form] = Form.useForm();
+
+  const handleSubmit = () => {
+    form.validateFields().then(res => {
+      console.log(res)
+    })
+  }
+
   return (
     <Fragment>
       <PeripheralLayout
         detail='新增门户'
         tabLink={Tablink}
         hideBreak
+        effect={<Button type='primary' onClick={() => handleSubmit()}>保存</Button>}
         components={
-          <Form {...layout}>
+          <Form {...layout} form={form}>
             <BasicLayout />
-            <ContactLayout />
+            <ContactLayout form={form} />
             <AddressLayout id='address1' title='收货地址' />
             <AddressLayout id='address2' title='发货(自提)地址' />
           </Form>

src/pages/authConfig/portalSystem/components/contactLayout.tsx

-import React from 'react';
-import { Button, Col, Form, Input, Row, Select } from 'antd';
+import React, { useState } from 'react';
+import { Button, Col, Form, FormInstance, Input, Modal, Row, Select } from 'antd';
 import CardLayout from '@/pages/transaction/components/card'
 import { LinkOutlined } from '@ant-design/icons';
 import AreaSelect from '@/components/AddressSelect/components/AreaSelect';
+import TabTree, { createTreeActions } from '@/components/AntTree';
+import { useTreeTabs } from '@/hooks/useTreeTabs';
+import { getMemberOrgTree } from '@/services/MemberV2Api';
+import { getIntl } from 'umi';
 
-const ContactLayout: React.FC<{}> = () => {
+const intl = getIntl();
+const originTreeActions = createTreeActions()
 
+interface ContactProps {
+  /** form 实例 */
+  form?: FormInstance
+}
+
+const ContactLayout: React.FC<ContactProps> = (props) => {
+  const { form } = props;
+  const [originVisible, setOriginVisible] = useState(false);
+  const [originSelectNode, setOriginSelectNode] = useState<any>();
+
+  const fetchOriginTreeData = async (params?) => { // 平台后台树
+    const res = await getMemberOrgTree({}, { ttl: 10, useCache: true })
+    return res
+  }
+
+  const {
+    treeData: originTreeData,
+  } = useTreeTabs({
+    fetchMenuData: fetchOriginTreeData,
+  })
   const code = ['86']
 
+  const handlePlateformSelect = (key, node) => {
+    setOriginSelectNode({ id: key * 1, name: node._title })
+  }
+
+  const handleOrigin = () => {
+    setOriginVisible(false)
+    setOriginVisible(false)
+    if (originSelectNode?.id) {
+      form.setFieldsValue({
+        'orgName': originTreeActions.getParentPath(originSelectNode.id),
+        'orgId': originSelectNode.id
+      })
+    }
+  }
+
+  const openOriginTree = () => {
+    setOriginVisible(true)
+  }
+
   return (
     <CardLayout
       id='contactLayout'
@@ -15,23 +59,23 @@ const ContactLayout: React.FC<{}> = () => {
     >
       <Row gutter={[48, 24]}>
         <Col span={12}>
-          <Form.Item label='门店地址' name='areaSelect' required>
-            <AreaSelect />
+          <Form.Item label='门店地址' name='areaSelect' rules={[{ required: true, message: '请选择省/市/区' }]}>
+            <AreaSelect onChange={(e) => console.log(e)} />
           </Form.Item>
-          <Form.Item label='详细地址' name='address' rules={[{ required: true, message: '' }]}>
+          <Form.Item label='详细地址' name='address' rules={[{ required: true, message: '请填写详细地址，路名、门牌号等' }]}>
             <Input.TextArea autoSize maxLength={30} placeholder='请填写详细地址，路名、门牌号等' />
           </Form.Item>
-          <Form.Item label='联系人姓名' name='contactName' rules={[{ required: true, message: '' }]}>
-            <Input placeholder='请输入您的姓名' maxLength={8} />
+          <Form.Item label='联系人姓名' name='contactName' rules={[{ required: true, message: '请输入联系人姓名' }]}>
+            <Input placeholder='请输入联系人姓名' maxLength={8} />
           </Form.Item>
           <Form.Item label='联系电话' required>
             <Row gutter={16}>
               <Col span={8}>
                 <Form.Item
                   name='countryCode'
-                  rules={[{ required: true, message: '请选择' }]}
+                  rules={[{ required: true, message: '请选择区号' }]}
                 >
-                  <Select>
+                  <Select placeholder='请选择区号'>
                     {code.map(item => (
                       <Select.Option key={item} value={item}>{item}</Select.Option>
                     ))}
@@ -41,9 +85,9 @@ const ContactLayout: React.FC<{}> = () => {
               <Col span={16}>
                 <Form.Item
                   name='phone'
-                  rules={[{ required: true, message: '请选择' }]}
+                  rules={[{ required: true, message: '请输入手机号码' }]}
                 >
-                  <Input type='number' maxLength={11} />
+                  <Input placeholder='请输入手机号码' type='number' maxLength={11} />
                 </Form.Item>
               </Col>
             </Row>
@@ -51,19 +95,41 @@ const ContactLayout: React.FC<{}> = () => {
         </Col>
         <Col span={12}>
           <Form.Item label='邮箱' name='email'>
-            <Input placeholder='请输入' />
+            <Input placeholder='请输入邮箱' />
           </Form.Item>
           <Form.Item label='邮编' name='postalCode'>
-            <Input placeholder='请输入' maxLength={6} />
+            <Input placeholder='请输入邮编' maxLength={6} />
+          </Form.Item>
+          <Form.Item label='职位' name='position' rules={[{ required: true, message: '请输入职位' }]}>
+            <Input placeholder='请输入职位' maxLength={10} />
           </Form.Item>
-          <Form.Item label='职位' name='position' rules={[{ required: true, message: '' }]}>
-            <Input placeholder='请输入' maxLength={10} />
+          <Form.Item label='所属组织机构' name='orgName' rules={[{ required: true, message: '请选择所属组织机构' }]}>
+            <Input.Search placeholder='请选择所属组织机构' readOnly enterButton={<Button style={{ backgroundColor: '#00a98f' }} type='primary' onClick={() => openOriginTree()} icon={<LinkOutlined style={{ marginRight: 4 }} />}>选择</Button>} />
           </Form.Item>
-          <Form.Item label='所属组织机构' name='orgId' rules={[{ required: true, message: '' }]}>
-            <Input.Search readOnly enterButton={<div className='connectBtn'><LinkOutlined style={{ marginRight: 4 }} /></div>} />
+          <Form.Item hidden label='所属组织机构' name='orgId' rules={[{ required: true, message: '请选择所属组织机构' }]}>
+            <Input />
           </Form.Item>
         </Col>
       </Row>
+
+      <Modal
+        title={intl.formatMessage({ id: 'authConfig.chooseOrganization' })}
+        visible={originVisible}
+        onOk={handleOrigin}
+        onCancel={() => setOriginVisible(false)}
+        okText={intl.formatMessage({ id: 'authConfig.confirm' })}
+        cancelText={intl.formatMessage({ id: 'authConfig.cancel' })}
+        getContainer='#root'
+      >
+        <TabTree
+          fetchData={params => fetchOriginTreeData(params)}
+          treeData={originTreeData}
+          handleSelect={(key, node) => handlePlateformSelect(key, node)}
+          actions={originTreeActions}
+          customKey="id"
+        />
+      </Modal>
+
     </CardLayout>
   )
 }