src/pages/ResearchGroup/components/ResearchGroupAddModal.tsx

import { RESPONSE_CODE } from '@/constants/enum';
import {
  postCanrdApiUserAddressList,
  postCanrdApiUserList,
  postResearchGroupsAdd,
  postResearchGroupsDetail,
  postResearchGroupsEdit,
} from '@/services';
import { getDefaultString, isEmpty } from '@/utils/StringUtil';
import { getRandomNumber } from '@/utils/numberUtil';
import { getSalesCodeOptions } from '@/utils/order';
import { validatePhoneNumberBool } from '@/utils/validators';
import {
  ModalForm,
  ProCard,
  ProForm,
  ProFormSelect,
  ProFormText,
} from '@ant-design/pro-components';
import { Button, Form, Spin, message } from 'antd';
import { cloneDeep } from 'lodash';
import { useEffect, useState } from 'react';
import '../index.less';
// import { cloneDeep } from 'lodash';
export default ({ setVisible, researchGroupId, onClose }) => {
  const [form] = Form.useForm();
  const [salesCodeOptions, setSalesCodeOptions] = useState([]);
  const [memberOptions, setMemberOptions] = useState<any[]>([]);
  const [accountOptions, setAccountOptions] = useState<any[]>([]);
  const [researchGroupInfo, setResearchGroupInfo] = useState<any>(null);
  const [modalLoading, setModalLoading] = useState(false);
  const groupId = cloneDeep(researchGroupId);
  const [requestCount, setRequestCount] = useState(1);
  /**
   * 获取课题组信息
   * @returns
   */
  const loadResearchGroupInfo = async () => {
    if (groupId === null) {
      return;
    }
    setModalLoading(true);
    let res = await postResearchGroupsDetail({ data: { id: groupId } });
    if (res && res.result === RESPONSE_CODE.SUCCESS) {
      setResearchGroupInfo(res.data);
    }
    setModalLoading(false);
  };
  /**
   * 获取销售代码枚举，在复制和编辑的时候判断是否为旧的代码
   */
  const loadSalesCodeOptions = async () => {
    let options = await getSalesCodeOptions();
    setSalesCodeOptions(options);
  };
  /**
   * 对options去重
   * @param options
   * @returns
   */
  function deduplicateOptions(options: any) {
    const seen = new Set();
    const result: any[] = [];
    options.forEach((option: any) => {
      const uniqueKey = `${option.realName}-${option.phone}`;
      if (!seen.has(uniqueKey)) {
        seen.add(uniqueKey);
        result.push(option);
      }
    });
    return result;
  }
  /**
   * 自动填充客户信息
   * @param option
   */
  function autoFillCustomerInfo(option: any) {
    if (!option) {
      return;
    }
    let realName = option.realName;
    let id = option.value;
    if (id === 3.1415926) {
      message.warning(
        '请填写下方的【客户名称】和【手机号】，填写完成确保信息无误后点击添加按钮。',
      );
      form.setFieldValue('realName', option.name);
      return;
    }
    //判断当前客户信息是否已添加过：id匹配或者option的phone匹配说明添加过了
    let memberIds = form.getFieldValue('members');
    if (!memberIds) {
      //表单项没值的时候默认是undefined。初始化为数组
      memberIds = [];
    }
    if (memberIds.includes(id)) {
      message.info(`${realName} 重复添加`);
      return;
    }
    //表单项的value添加当前option的value
    memberIds.push(id);
    form.setFieldValue('members', memberIds);
    message.success(`${realName} 添加成功`);
    //判断options中是否已经有这个option
    for (let memberOption of memberOptions) {
      if (
        memberIds.includes(memberOption.value) &&
        memberOption.phone === option.phone
      ) {
        return;
      }
    }
    //option添加到memberOptions中
    let newMemberOptions = [...memberOptions];
    newMemberOptions.push(option);
    setMemberOptions(newMemberOptions);
    //清空信息
    form.setFieldValue('realName', undefined);
    form.setFieldValue('phone', undefined);
    form.setFieldValue('customerName', null);
  }
  /**
   * 保存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);
  }
  /**
   * 添加自定义成员
   */
  function addCustomMember() {
    let realName = form.getFieldValue('realName');
    let phone = form.getFieldValue('phone');
    if (isEmpty(realName)) {
      message.error('请填写客户名称');
    }
    if (isEmpty(phone)) {
      message.error('请填写手机号');
    }
    if (!validatePhoneNumberBool(phone)) {
      message.error('请填写正确格式的手机号');
      return;
    }
    let customOption = {
      value: getRandomNumber(10),
      realName: realName,
      phone: phone,
    };
    autoFillCustomerInfo(customOption);
  }
  function parseFormValues(values: any) {
    if (!values) {
      return {};
    }
    let memberIds = values.members;
    let accountIds = values.accounts;
    values.id = groupId;
    //成员对象封装
    if (memberIds) {
      let memberObjs: any[] = [];
      for (let memberOption of memberOptions) {
        if (memberIds.includes(memberOption.value)) {
          memberObjs.push({
            memberName: memberOption.realName,
            memberPhone: memberOption.phone,
            id: memberOption.id,
            groupId: memberOption.groupId,
          });
        }
      }
      values.members = memberObjs;
    }
    //预存账号对象封装
    if (accountIds) {
      let accountObjs: any[] = [];
      for (let accountOption of accountOptions) {
        if (accountIds.includes(accountOption.uid)) {
          accountObjs.push({
            accountPhone: accountOption.phone,
            accountId: accountOption.uid,
            accountName: accountOption.realName,
            id: accountOption.id,
            groupId: accountOption.groupId,
          });
        }
      }
      values.accounts = accountObjs;
    }
    return values;
  }
  /**
   * 设置表单默认信息
   * @returns
   */
  const loadFormDefaultValue = async () => {
    if (!researchGroupInfo) {
      return;
    }
    let members = researchGroupInfo.members;
    if (members !== null) {
      let newMemberOptions = [];
      for (let member of members) {
        let name = member.memberName;
        let phone = member.memberPhone;
        let id = member.id;
        newMemberOptions.push({
          ...member,
          realName: name,
          phone: phone,
          value: id,
        });
      }
      setMemberOptions(newMemberOptions);
      form.setFieldValue(
        'members',
        members?.map((item: any) => {
          return item.id;
        }),
      );
    }
    let accounts = researchGroupInfo.accounts;
    if (accounts !== null) {
      let phones: any[] = [];
      let accountIds = accounts
        .filter((account: any) => {
          //id为空的按照手机号查询
          if (account.accountId === null) {
            phones.push(account.accountPhone);
            return false;
          }
          return true;
        })
        .map((item: any) => item.accountId);
      let uidIdMap = new Map(
        accounts.map((item: any) => [item.accountId, item.id]),
      );
      let data = {};
      if (accountIds.length > 0) {
        data = { ...data, uids: accountIds };
      }
      if (phones.length > 0) {
        data = { ...data, phones: phones };
      }
      let res = await postCanrdApiUserList({ data });
      if (res && res.result === RESPONSE_CODE.SUCCESS) {
        let accountList = res?.data?.data;
        console.log(accountList);
        let newAccountOptions = accountList?.map((item) => {
          item.value = uidIdMap.get(item.uid);
          return item;
        });
        console.log(newAccountOptions);
        setAccountOptions(newAccountOptions);
      }
      form.setFieldValue('accounts', accountIds);
    }
    form.setFieldValue('groupName', researchGroupInfo.groupName);
    form.setFieldValue('leaderName', researchGroupInfo.leaderName);
    form.setFieldValue('companyName', researchGroupInfo.companyName);
  };
  useEffect(() => {
    loadSalesCodeOptions();
    loadResearchGroupInfo();
  }, []);
  useEffect(() => {
    loadFormDefaultValue();
  }, [researchGroupInfo]);
  return (
    <div className="research-group-index">
      <ModalForm
        width={800}
        open
        title="新增/编辑课题组"
        form={form}
        autoFocusFirstInput
        submitter={{}}
        modalProps={{
          okText: '提交',
          cancelText: '关闭',
          destroyOnClose: true,
          onCancel: () => {
            setVisible(false);
          },
        }}
        onFinish={async (values) => {
          let newValues = parseFormValues(values);
          let res;
          if (researchGroupInfo === null) {
            res = await postResearchGroupsAdd({
              data: newValues,
            });
          } else {
            res = await postResearchGroupsEdit({
              data: newValues,
            });
          }
          if (res && res.result === RESPONSE_CODE.SUCCESS) {
            message.success(res.message);
            onClose();
          }
        }}
        onOpenChange={setVisible}
      >
        <Spin spinning={modalLoading} tip="加载中...">
          <ProForm.Group>
            <ProFormText
              name="groupName"
              label="课题组名称"
              placeholder="请输入课题组名称"
              rules={[{ required: true, message: '请输入课题组名称' }]}
            />
            <ProFormText
              name="companyName"
              label="单位名称"
              placeholder="请输入单位名称"
              rules={[{ required: true, message: '请输入单位名称' }]}
            />
            <ProFormSelect
              name="leaderName"
              key="leaderName"
              width="lg"
              showSearch
              label="负责人"
              placeholder="请输入课题组负责人"
              //rules={[{ required: true, message: '请输入课题组负责人' }]}
              options={salesCodeOptions}
            />
          </ProForm.Group>
          <ProFormSelect
            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={name}>
                    <span style={{ color: '#333333' }}>{name}</span>
                  </div>
                );
              },
            }}
            debounceTime={1000}
            request={async (value, {}) => {
              const keywords = value.keyWords;
              let body = {
                keywords: keywords,
                pageSize: 20,
                researchGroupId: undefined,
              };
              if (requestCount === 1) {
                body.researchGroupId = groupId;
              }
              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,
                };
              });
              setRequestCount(requestCount + 1);
              return options;
            }}
          />
          {groupId && (
            <ProFormSelect
              name="members"
              key="members"
              width="lg"
              showSearch
              label="课题组成员"
              placeholder="请添加课题组成员"
              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}
            />
          )}
          {groupId && (
            <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>
          )}
        </Spin>
      </ModalForm>
    </div>
  );
};