canrd-main / canrd-erp-front · Files

import { RESPONSE_CODE } from '@/constants/enum';
import {
  postCanrdApiUserAddressList,
  postResearchGroupMemberRequestsAdd,
  postResearchGroupMemberRequestsDetail,
  postResearchGroupMemberRequestsEdit,
  postResearchGroupsDetail,
  postResearchGroupsList,
} from '@/services';
import { getDefaultString, isEmpty } from '@/utils/StringUtil';
import { getRandomNumber } from '@/utils/numberUtil';

import { validatePhoneNumberBool } from '@/utils/validators';
import {
  ModalForm,
  ProCard,
  ProForm,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
} 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, requestId, onClose }) => {
  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);

  /**
   * 获取课题组信息
   * @returns
   */
  const loadRequestInfo = async () => {
    if (copyRequestId === null) {
      return;
    }
    setModalLoading(true);
    let res = await postResearchGroupMemberRequestsDetail({
      data: { id: copyRequestId },
    });
    if (res && res.result === RESPONSE_CODE.SUCCESS) {
      setRequestInfo(res.data);
    }
    setModalLoading(false);
  };

  /**
   * 对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);

    //如果是编辑，每次只保存一个
    if (requestInfo !== null) {
      form.setFieldValue('members', [id]);
    } else {
      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);
  }

  /**
   * 添加自定义成员
   */
  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;
    values.id = copyRequestId;

    //成员对象封装
    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.memberName = memberOption.realName;
          values.memberPhone = memberOption.phone;
        }
      }
      values.members = memberObjs;
    }

    //课题组信息封装
    if (groupOption) {
      values.groupName = groupOption.groupName;
    }

    return values;
  }

  /**
   * 设置表单默认信息
   * @returns
   */
  const loadFormDefaultValue = async () => {
    if (!requestInfo) {
      return;
    }

    let groupId = requestInfo.groupId;
    if (groupId !== null) {
      let res = await postResearchGroupsDetail({ data: { id: groupId } });
      if (res && res.result === RESPONSE_CODE.SUCCESS) {
        setGroupOption(res.data);
      }

      form.setFieldValue('groupId', groupId);
    }

    form.setFieldValue('requestNotes', requestInfo.requestNotes);

    let memberName = requestInfo.memberName;
    let memberPhone = requestInfo.memberPhone;

    let uid = getRandomNumber(10);
    let newMemberOption = [
      { realName: memberName, phone: memberPhone, uid: uid, value: uid },
    ];
    setMemberOptions(newMemberOption);
    //编辑只能选一个member
    form.setFieldValue('members', [uid]);
  };

  useEffect(() => {
    loadRequestInfo();
  }, []);

  useEffect(() => {
    loadFormDefaultValue();
  }, [requestInfo]);

  return (
    <div className="research-group-index">
      <ModalForm
        width={800}
        open
        title={requestInfo !== null ? '编辑申请信息' : '新增申请'}
        form={form}
        autoFocusFirstInput
        submitter={{}}
        modalProps={{
          okText: '提交',
          cancelText: '关闭',
          destroyOnClose: true,
          onCancel: () => {
            setVisible(false);
          },
        }}
        onFinish={async (values) => {
          let newValues = parseFormValues(values);
          let res;
          if (requestInfo === null) {
            res = await postResearchGroupMemberRequestsAdd({
              data: newValues,
            });
          } else {
            res = await postResearchGroupMemberRequestsEdit({
              data: newValues,
            });
          }
          if (res && res.result === RESPONSE_CODE.SUCCESS) {
            message.success(res.message);
            onClose();
          }
        }}
        onOpenChange={setVisible}
      >
        <Spin spinning={modalLoading} tip="加载中...">
          <ProForm.Group>
            <ProFormSelect
              name="groupId"
              key="groupId"
              width="lg"
              showSearch
              label="课题组"
              placeholder="请选择课题组"
              rules={[{ required: true, message: '请选择课题组' }]}
              onChange={(_, option) => {
                setGroupOption(option);
              }}
              fieldProps={{
                filterOption() {
                  return true;
                },
                optionItemRender(item: any) {
                  let name = item.groupName + ' | ' + item.leaderName;
                  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 };

                const res = await postResearchGroupsList({
                  data: body,
                });
                let options = res?.data?.data?.map((c: any) => {
                  return {
                    ...c,
                    label: c.groupName,
                    value: c.id,
                    key: c.id,
                  };
                });
                return options;
              }}
            />
          </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>
              <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"
            key="requestNotes"
            label="申请备注"
          />
        </Spin>
      </ModalForm>
    </div>
  );
};