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 groupName = value.keyWords; let body = { groupName: groupName, 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> ); };