feat(ResearchGroup): 新增预存账号申请功能

- 在成员申请弹窗中添加预存账号选择功能 - 新增申请类型字段，区分新增成员和新增预存账号 - 修改弹窗显示逻辑，根据申请类型显示不同表单内容 - 优化成员选择和客户信息搜索功能

feat(ResearchGroup): 新增预存账号申请功能
- 在成员申请弹窗中添加预存账号选择功能 - 新增申请类型字段，区分新增成员和新增预存账号 - 修改弹窗显示逻辑，根据申请类型显示不同表单内容 - 优化成员选择和客户信息搜索功能
曾国涛
1 parent 9eb4ffda
Showing 3 changed files with 288 additions and 136 deletions
src/pages/ResearchGroup/components/ResearchGroupMemberRequestAddModal.tsx
src/pages/ResearchGroup/constant.tsx
src/pages/ResearchGroup/index.tsx
 import { RESPONSE_CODE } from '@/constants/enum';
 import {
-  postCanrdApiUserAddressList,
+  postCanrdApiUserAddressList, postCanrdApiUserList,
   postResearchGroupMemberRequestsAdd,
   postResearchGroupMemberRequestsDetail,
   postResearchGroupMemberRequestsEdit,
@@ -25,15 +25,39 @@ import { useEffect, useState } from &#39;react&#39;;
 import '../index.less';
  
 // import { cloneDeep } from 'lodash';
-export default ({ setVisible, requestId, onClose }) => {
+export default ({ setVisible, requestId, onClose,type }) => {
   const [form] = Form.useForm();
   const [memberOptions, setMemberOptions] = useState<any[]>([]);
   const [requestInfo, setRequestInfo] = useState<any>(null);
   const [modalLoading, setModalLoading] = useState(false);
   const [groupOption, setGroupOption] = useState<any>(null);
   const copyRequestId = cloneDeep(requestId);
+  const [requestCount, setRequestCount] = useState(1);
+  const [accountOptions, setAccountOptions] = useState<any[]>([]);
  
   /**
+   * 保存account的options
+   * @param option
+   * @returns
+   */
+  function autoAccountSelectOptions(option: any) {
+    if (!option) {
+      return;
+    }
+    let id = option.value;
+    //判断当前客户信息是否已添加过：id匹配或者option的phone匹配说明添加过了
+    let accountIds = form.getFieldValue('accounts');
+    if (!accountIds) {
+      //表单项没值的时候默认是undefined。初始化为数组
+      accountIds = [];
+    }
+    if (accountIds.includes(id)) {
+      return;
+    }
+    //option添加到accountOptions中
+    setAccountOptions(option);
+  }
+  /**
    * 获取课题组信息
    * @returns
    */
@@ -177,7 +201,23 @@ export default ({ setVisible, requestId, onClose }) =&gt; {
       }
       values.members = memberObjs;
     }
-
+//预存账号对象封装
+    if (values.accounts) {
+      let accountObjs: any[] = [];
+      for (let accountOption of accountOptions) {
+        if (values.accounts.includes(accountOption.uid)) {
+          accountObjs.push({
+            accountPhone: accountOption.phone,
+            accountId: accountOption.uid,
+            accountName: accountOption.realName,
+            id: accountOption.id,
+            groupId: accountOption.groupId,
+          });
+        }
+      }
+      values.accounts = accountObjs;
+    }
+    values.requestType = type;
     //课题组信息封装
     if (groupOption) {
       values.groupName = groupOption.groupName;
@@ -309,145 +349,214 @@ export default ({ setVisible, requestId, onClose }) =&gt; {
               }}
             />
           </ProForm.Group>
-
-          <ProFormSelect
-            name="members"
-            key="members"
-            width="lg"
-            showSearch
-            label="课题组成员"
-            placeholder="请添加课题组成员"
-            rules={[{ required: true, message: '请至少添加一个成员' }]}
-            fieldProps={{
-              mode: 'multiple',
-              filterOption() {
-                return true;
-              },
-              optionItemRender(item: any) {
-                let name = item.realName + ' | ' + item.phone;
-                return (
-                  <div title={name}>
-                    <span style={{ color: '#333333' }}>{name}</span>
-                  </div>
-                );
-              },
-            }}
-            options={memberOptions}
-          />
-
-          <ProCard
-            title="选择或自定义课题组成员信息"
-            bordered
-            tooltip="从【客户信息】选择框中可以直接搜索客户，选中后自动添加到【课题组成员】中。也可以自定义输入【客户名称】和【手机号】，点击添加按钮手动添加到【课题组成员】中。"
-          >
-            <ProForm.Group>
+          {type==='ADD_ACCOUNT'&&
               <ProFormSelect
-                key="customerName"
-                label="客户信息（选择）"
-                width="lg"
-                showSearch
-                name="customerName"
-                placeholder="请选择客户信息"
-                onChange={(_, option) => {
-                  autoFillCustomerInfo(option);
-                }}
-                fieldProps={{
-                  filterOption() {
-                    return true;
-                  },
-                  optionItemRender(item: any) {
-                    if (item.type === 'add') {
+                  name="accounts"
+                  key="accounts"
+                  width="lg"
+                  showSearch
+                  label="绑定预存账号（可多选）"
+                  placeholder="请选择预存账号"
+                  onChange={(_, option) => {
+                    autoAccountSelectOptions(option);
+                  }}
+                  //rules={[{ required: true, message: '请至少选择绑定一个预存账号' }]}
+                  fieldProps={{
+                    mode: 'multiple',
+                    filterOption() {
+                      return true;
+                    },
+                    optionItemRender(item: any) {
+                      let name =
+                          item.label +
+                          ' | ' +
+                          item.institution +
+                          ' | ' +
+                          item.nowMoney +
+                          '￥' +
+                          ' | ' +
+                          item.phone;
                       return (
-                        <div title={item.name + '（新增客户）'}>
-                          <span style={{ color: '#333333' }}>{item.name}</span>
-                          {' | '}
-                          <span style={{ color: 'orange' }}>自定义</span>
-                        </div>
+                          <div title={name}>
+                            <span style={{ color: '#333333' }}>{name}</span>
+                          </div>
                       );
+                    },
+                  }}
+                  rules={[{ required: true, message: '请至少添加一个账号' }]}
+                  debounceTime={1000}
+                  request={async (value, {}) => {
+                    const keywords = value.keyWords;
+                    let body = {
+                      keywords: keywords,
+                      pageSize: 20,
+                      researchGroupId: undefined,
+                    };
+
+                    if (requestCount === 1) {
+                      body.researchGroupId = form.getFieldValue('groupId');
                     }
  
-                    let title = '';
-                    let spanText = '';
-                    let realName = item.realName;
-                    let phone = item.phone;
-
-                    title =
-                      getDefaultString(realName) +
-                      '|' +
-                      getDefaultString(phone);
-
-                    spanText =
-                      getDefaultString(realName) +
-                      '|' +
-                      getDefaultString(phone);
-                    return (
-                      <div title={title}>
-                        <span style={{ color: '#333333' }}>{spanText}</span>
-                      </div>
-                    );
-                  },
-                }}
-                debounceTime={1000}
-                request={async (value, {}) => {
-                  const keywords = value.keyWords;
-                  if (keywords === '') {
-                    return [];
-                  }
-                  const res = await postCanrdApiUserAddressList({
-                    data: { keywords: keywords },
-                  });
-                  let options = res?.data?.map((c: any) => {
-                    return {
-                      ...c,
-                      label: c.name,
-                      value: c.id,
-                      key: c.id,
-                    };
-                  });
-
-                  //对options去重，realName和phone唯一
-                  options = deduplicateOptions(options);
-
-                  //第一个商品默认为要新增客户
-                  if (keywords.trim() !== '') {
-                    options.unshift({
-                      name: keywords,
-                      type: 'add',
-                      label: keywords,
-                      value: 3.1415926,
-                      key: keywords,
+                    const res = await postCanrdApiUserList({
+                      data: body,
+                    });
+                    let options = res?.data?.data?.map((c: any) => {
+                      return {
+                        ...c,
+                        label: c.realName,
+                        value: c.uid,
+                        key: c.uid,
+                      };
                     });
-                  }
  
-                  return options;
-                }}
-              />
-            </ProForm.Group>
-
-            <ProForm.Group>
-              <ProFormText
-                name="realName"
-                label="客户名称（自定义）"
-                placeholder="请输入客户名称"
-                rules={[{ required: false, message: '请输入客户名称' }]}
+                    setRequestCount(requestCount + 1);
+                    return options;
+                  }}
               />
-              <ProFormText
-                name="phone"
-                label="手机号（自定义）"
-                width="md"
-                placeholder="请输入手机号"
-                rules={[{ required: false, message: '请输入手机号' }]}
-              />
-            </ProForm.Group>
-            <Button
-              type="primary"
-              onClick={() => {
-                addCustomMember();
-              }}
-            >
-              添加
-            </Button>
-          </ProCard>
+          }
+          {
+            type!=='ADD_ACCOUNT'&&
+              <>
+                <ProFormSelect
+                  name="members"
+                  key="members"
+                  width="lg"
+                  showSearch
+                  label="课题组成员"
+                  placeholder="请添加课题组成员"
+                  rules={[{ required: true, message: '请至少添加一个成员' }]}
+                  fieldProps={{
+                    mode: 'multiple',
+                    filterOption() {
+                      return true;
+                    },
+                    optionItemRender(item: any) {
+                      let name = item.realName + ' | ' + item.phone;
+                      return (
+                          <div title={name}>
+                            <span style={{ color: '#333333' }}>{name}</span>
+                          </div>
+                      );
+                    },
+                  }}
+                  options={memberOptions}
+                />
+
+                <ProCard
+                    title="选择或自定义课题组成员信息"
+                    bordered
+                    tooltip="从【客户信息】选择框中可以直接搜索客户，选中后自动添加到【课题组成员】中。也可以自定义输入【客户名称】和【手机号】，点击添加按钮手动添加到【课题组成员】中。"
+                >
+                  <ProForm.Group>
+                    <ProFormSelect
+                        key="customerName"
+                        label="客户信息（选择）"
+                        width="lg"
+                        showSearch
+                        name="customerName"
+                        placeholder="请选择客户信息"
+                        onChange={(_, option) => {
+                          autoFillCustomerInfo(option);
+                        }}
+                        fieldProps={{
+                          filterOption() {
+                            return true;
+                          },
+                          optionItemRender(item: any) {
+                            if (item.type === 'add') {
+                              return (
+                                  <div title={item.name + '（新增客户）'}>
+                                    <span style={{ color: '#333333' }}>{item.name}</span>
+                                    {' | '}
+                                    <span style={{ color: 'orange' }}>自定义</span>
+                                  </div>
+                              );
+                            }
+
+                            let title = '';
+                            let spanText = '';
+                            let realName = item.realName;
+                            let phone = item.phone;
+
+                            title =
+                                getDefaultString(realName) +
+                                '|' +
+                                getDefaultString(phone);
+
+                            spanText =
+                                getDefaultString(realName) +
+                                '|' +
+                                getDefaultString(phone);
+                            return (
+                                <div title={title}>
+                                  <span style={{ color: '#333333' }}>{spanText}</span>
+                                </div>
+                            );
+                          },
+                        }}
+                        debounceTime={1000}
+                        request={async (value, {}) => {
+                          const keywords = value.keyWords;
+                          if (keywords === '') {
+                            return [];
+                          }
+                          const res = await postCanrdApiUserAddressList({
+                            data: { keywords: keywords },
+                          });
+                          let options = res?.data?.map((c: any) => {
+                            return {
+                              ...c,
+                              label: c.name,
+                              value: c.id,
+                              key: c.id,
+                            };
+                          });
+
+                          //对options去重，realName和phone唯一
+                          options = deduplicateOptions(options);
+
+                          //第一个商品默认为要新增客户
+                          if (keywords.trim() !== '') {
+                            options.unshift({
+                              name: keywords,
+                              type: 'add',
+                              label: keywords,
+                              value: 3.1415926,
+                              key: keywords,
+                            });
+                          }
+
+                          return options;
+                        }}
+                    />
+                  </ProForm.Group>
+
+                  <ProForm.Group>
+                    <ProFormText
+                        name="realName"
+                        label="客户名称（自定义）"
+                        placeholder="请输入客户名称"
+                        rules={[{ required: false, message: '请输入客户名称' }]}
+                    />
+                    <ProFormText
+                        name="phone"
+                        label="手机号（自定义）"
+                        width="md"
+                        placeholder="请输入手机号"
+                        rules={[{ required: false, message: '请输入手机号' }]}
+                    />
+                  </ProForm.Group>
+                  <Button
+                      type="primary"
+                      onClick={() => {
+                        addCustomMember();
+                      }}
+                  >
+                    添加
+                  </Button>
+                </ProCard>
+              </>
+          }
  
           <ProFormTextArea
             name="requestNotes"
@@ -162,6 +162,12 @@ export const RESEARCH_GROUP_MEMBER_REQUEST_COLUMNS = [
     hideInTable: true,
   },
   {
+    title: '申请类型',
+    dataIndex: 'requestTypeText',
+    key: 'requestTypeText',
+    hideInSearch: true,
+  },
+  {
     title: '课题组名称',
     dataIndex: 'groupName',
     key: 'groupName',
@@ -211,6 +217,23 @@ export const RESEARCH_GROUP_MEMBER_REQUEST_COLUMNS = [
     hideInTable: true,
   },
   {
+    title: '申请类型',
+    dataIndex: 'requestType',
+    key: 'requestType',
+    valueType: 'select',
+    valueEnum: {
+      ADD_MEMBER: {
+        text: '新增成员',
+        status: 'ADD_MEMBER'
+      },
+      ADD_ACCOUNT: {
+        text: '新增课题组',
+        status: 'ADD_ACCOUNT'
+      },
+    },
+    hideInTable: true,
+  },
+  {
     title: '申请备注',
     dataIndex: 'requestNotes',
     key: 'requestNotes',
@@ -44,6 +44,7 @@ const PrepaidPage = () =&gt; {
   const [importModalVisible, setImportModalVisible] = useState(false);
   const [auditIds, setAuditIds] = useState<any[]>([]);
   const [auditModalVisible, setAuditModalVisible] = useState(false);
+  const [requestType, setRequestType] = useState(null);
   const [
     researchGroupMemberRequestAddModalVisible,
     setResearchGroupMemberRequestAddModalVisible,
@@ -436,6 +437,7 @@ const PrepaidPage = () =&gt; {
               type="link"
               onClick={() => {
                 setResearchGroupMemberRequestAddModalVisible(true);
+                setRequestType(record?.requestType)
                 setOptRecordId(record?.id);
               }}
             >
@@ -659,16 +661,31 @@ const PrepaidPage = () =&gt; {
             let btns = [];
             btns.push(
               <Button
-                key="button"
+                key="abutton"
                 icon={<PlusOutlined />}
                 onClick={() => {
+                  setRequestType('ADD_ACCOUNT');
                   setResearchGroupMemberRequestAddModalVisible(true);
                 }}
                 type="primary"
               >
-                新建
+                新增预存账号申请
               </Button>,
             );
+            btns.push(
+                <Button
+                    key="button"
+                    icon={<PlusOutlined />}
+                    onClick={() => {
+                      setRequestType(null);
+                      setResearchGroupMemberRequestAddModalVisible(true);
+                    }}
+                    type="primary"
+                >
+                  新增成员申请
+                </Button>,
+            );
+
             return btns;
           }}
           rowSelection={{
@@ -753,6 +770,7 @@ const PrepaidPage = () =&gt; {
  
       {researchGroupMemberRequestAddModalVisible && (
         <ResearchGroupMemberRequestAddModal
+
           setVisible={(val: boolean) => {
             setResearchGroupMemberRequestAddModalVisible(val);
             if (!val) {
@@ -761,10 +779,12 @@ const PrepaidPage = () =&gt; {
           }}
           requestId={optRecordId}
           onClose={() => {
+            setRequestType(null)
             setResearchGroupMemberRequestAddModalVisible(false);
             setOptRecordId(null);
             reloadMemberApplyTable();
           }}
+          type={requestType}
         />
       )}