import { useState, useEffect } from 'react' import { Button, Form, Input, message, Modal, Radio, Upload, Image, Spin, Cascader, Table } from "antd" import type { TableColumnsType } from 'antd'; import { uploadImageUrl, showImage } from '../../../../request/request' import { addTrademarkApplicant, trademarkApplicantList, deleteTrademarkApplicant, trademarkApplicantDetails, updateTrademarkApplicant, submitTrademarkApplicant } from '../../../../request/api' import { PlusOutlined } from '@ant-design/icons'; import './edit-three.css' import personCard from '../../../../static/editThree/personCard.png' import personLicense from '../../../../static/editThree/personLicense.png' import individualLicense from '../../../../static/editThree/individualLicense.png' import { getCityList } from '../../../../request/api' interface Option { value?: string | number | null; label: React.ReactNode; children?: Option[]; isLeaf?: boolean; // id: string; // pId: string; } import useMessage from "antd/es/message/useMessage"; // interface DataType { // key: React.Key; // name: string; // age: number; // address: string; // trademarkUserId: string; // } const { Search } = Input; export default function EditThree(props: any) { // 申请人信息 // const [applicantData, setApplicantData] = useState({ // name: '', // trademarkUserId: '', // }) // 获取联系人详情 const getContactDetails = async (trademarkUserId: string) => { try { const res: any = await trademarkApplicantDetails(trademarkUserId) // console.log(res); if (res.type == '1') { setApplicantType('1') setQualifications(res.subType) setPersonalIdCard([ { uid: res.identityPhoto, name: res.identityPhoto, status: 'done', url: showImage(res.identityPhoto, false) } ]) setPersonalLicense([ { uid: res.businessLicense, name: res.businessLicense, status: 'done', url: showImage(res.businessLicense, false) } ]) // console.log(res.rangeAddress.split(',')[0]); const rangeAddressArray = res.rangeAddress.split(','); // 检查省份 ID 是否存在 if (rangeAddressArray.length > 0) { const provinceId = rangeAddressArray[0]; const provinceOption = areaArray.find(option => option.value === provinceId); if (provinceOption) { // 加载该省份下的城市 loadCityList([provinceOption]); } } // getLoadProvinces(res.rangeAddress.split(',')[0]) // 给formA表单赋值 formA.setFieldsValue({ identityPhoto: res.identityPhoto, identity: res.identity, businessLicense: res.businessLicense, businessLicenseIdcard: res.businessLicenseIdcard, name: res.name, rangeAddress: res.rangeAddress.split(','), address: res.address, contactName: res.contactName, contactPhone: res.contactPhone, contactEmail: res.contactEmail, contactAddress: res.contactAddress, contactEmailCode: res.contactEmailCode, }) } if (res.type == '2') { setApplicantType('2') setEnterpriseLicense([ { uid: res.businessLicense, name: res.businessLicense, status: 'done', url: showImage(res.businessLicense, false) } ]) const rangeAddressArray = res.rangeAddress.split(','); // 检查省份 ID 是否存在 if (rangeAddressArray.length > 0) { const provinceId = rangeAddressArray[0]; const provinceOption = areaArray.find(option => option.value === provinceId); if (provinceOption) { // 加载该省份下的城市 loadCityList([provinceOption]); } } formB.setFieldsValue({ // identityPhoto: res.identityPhoto, // identity: res.identity, businessLicense: res.businessLicense, name: res.name, businessLicenseIdcard: res.businessLicenseIdcard, rangeAddress: res.rangeAddress.split(','), address: res.address, contactName: res.contactName, contactPhone: res.contactPhone, contactEmail: res.contactEmail, contactAddress: res.contactAddress, contactEmailCode: res.contactEmailCode, }) } } catch (error: any) { // setAddLoading(false) if (error.response) { const data = error.response.data; messageApi.open({ type: 'error', content: data.msg ? data.msg : `${data.path}(${data.status})`, }); } else { console.error(error) } } finally { // setAddLoading(false) } } const [trademarkUserId, setTrademarkUserId] = useState('') const [selectPeopleModal, setSelectPeopleModal] = useState(false) const [selectedRowKey, setSelectedRowKey] = useState(''); // 临时选择的申请人信息 const [nowSelectPeopleData, setNowSelectPeopleData] = useState({ trademarkUserId: '', name: '', }); // 确定选择的申请人信息 const [confirmSelectPeopleData, setConfirmSelectPeopleData] = useState({ trademarkUserId: '', name: '', }); useEffect(() => { if (props.editThreeData.trademarkUserId) { setConfirmSelectPeopleData({ trademarkUserId: props.editThreeData.trademarkUserId, name: props.editThreeData.name, }) } }, [props.editThreeData]) const [disabled, setDisabled] = useState(false) const [showBtn, setShowBtn] = useState(true) const columns: TableColumnsType = [ // title: '名称', // dataIndex: 'invoiceName', // align: 'center', // width: 180 { title: '序号', align: 'center', dataIndex: 'trademarkUserId', render: (_text, _record, index) => (page - 1) * 5 + index + 1, // 显示序号，从1开始 }, { title: '申请人', align: 'center', dataIndex: 'name', // render: (text: string) => {text}, }, // { // title: '证件号', // align: 'center', // dataIndex: 'identity', // // render: (text: string) => {text}, // }, { title: '申请人类型', dataIndex: 'type', align: 'center', render: (text: string) => {text == '1' ? '个人/个体工商户' : '企业'}, }, { title: '联系人', dataIndex: 'contactName', align: 'center', }, { title: '联系人电话', dataIndex: 'contactPhone', align: 'center', }, { title: '操作', align: 'center', dataIndex: 'operation', render: (text: string, record: any) => { return (
) } } ]; const [page, setPage] = useState(1); const [total, setTotal] = useState(0); const [listLoading, setListLoading] = useState(false); const [nowSearchKeyWords, setNowSearchKeyWords] = useState(''); const [searchKeyWords, setSearchKeyWords] = useState(''); const [tableData, setTableData] = useState([]) // 获取申请人列表 const getTrademarkApplicantList = async (page: number) => { try { setListLoading(true); const res: any = await trademarkApplicantList({ page, rows: 5, keywords: searchKeyWords }) if (res.rows.length <= 0 && page > 1) { setPage(page - 1) getTrademarkApplicantList(page - 1) } else { setTableData(res.rows) setTotal(res.total) setListLoading(false); } } catch (error: any) { setListLoading(false) if (error.response) { const data = error.response.data; messageApi.open({ type: 'error', content: data.msg ? data.msg : `${data.path}(${data.status})`, }); } else { console.error(error) } } finally { setListLoading(false) } } useEffect(() => { getTrademarkApplicantList(1) setPage(1) }, [searchKeyWords]) // 加载省份数据 const getLoadProvinces = async (cityId: string) => { try { // 假设传入空字符串获取省份列表 const res: any = await getCityList(cityId); const provinces = res.map((province: any) => ({ value: province.areaId, label: province.areaName, children: [], // 标记有子节点 isLeaf: false, })); setAreaArray(provinces); } catch (error: any) { if (error.response) { const data = error.response.data; messageApi.open({ type: 'error', content: data.msg ? data.msg : `${data.path}(${data.status})`, }); } else { console.error(error); } } } useEffect(() => { getLoadProvinces('0') }, []); const [messageApi, contextHolder] = useMessage(); // 省市 const [areaArray, setAreaArray] = useState([]); // 加载城市列表 const loadCityList = async (selectedOptions: Option[]) => { const targetOption = selectedOptions[selectedOptions.length - 1]; // console.log('targetOption', targetOption.children); try { const res: any = await getCityList(targetOption.value as string); // console.log('城市列表', res); const cities = res.map((city: any) => ({ value: city.areaId, label: city.areaName, })); targetOption.children = cities; // 更新 areaArray 状态 setAreaArray([...areaArray]); } catch (error: any) { if (error.response) { const data = error.response.data; messageApi.open({ type: 'error', content: data.msg ? data.msg : `${data.path}(${data.status})`, }); } else { console.error(error) } } }; const token = sessionStorage.getItem('token') // const [form] = Form.useForm(); const [formA] = Form.useForm(); const [addLoading, setAddLoading] = useState(false) const onFinishA = async (values: any) => { // console.log(values); // console.log(qualifications); if (trademarkUserId) { try { setAddLoading(true) const newValues = { ...values }; newValues.rangeAddress = newValues.rangeAddress.join(','); await updateTrademarkApplicant(trademarkUserId, { type: applicantType, subType: qualifications, // trademarkId: props.trademarkId, nationality: '大陆', ...newValues }) getTrademarkApplicantList(page) setAddLoading(false) setAddPeopleModal(false) } catch (error: any) { setAddLoading(false) if (error.response) { const data = error.response.data; messageApi.open({ type: 'error', content: data.msg ? data.msg : `${data.path}(${data.status})`, }); } else { console.error(error) } } finally { setAddLoading(false) } } else { try { setAddLoading(true) const newValues = { ...values }; newValues.rangeAddress = newValues.rangeAddress.join(','); await addTrademarkApplicant({ type: applicantType, subType: qualifications, // trademarkId: props.trademarkId, nationality: '大陆', ...newValues }) getTrademarkApplicantList(1) setPage(1) setAddLoading(false) setAddPeopleModal(false) init() messageApi.open({ type: 'success', content: '新增成功', }); } catch (error: any) { setAddLoading(false) if (error.response) { const data = error.response.data; messageApi.open({ type: 'error', content: data.msg ? data.msg : `${data.path}(${data.status})`, }); } else { console.error(error) } } finally { setAddLoading(false) } } } const [formB] = Form.useForm(); const onFinishB = async (values: any) => { // console.log(values); if (trademarkUserId) { // alert('编辑') try { setAddLoading(true) const newValues = { ...values }; newValues.rangeAddress = newValues.rangeAddress.join(','); await updateTrademarkApplicant(trademarkUserId, { type: applicantType, // subType: qualifications, // trademarkId: props.trademarkId, nationality: '大陆', ...newValues }) getTrademarkApplicantList(page) setAddLoading(false) setAddPeopleModal(false) } catch (error: any) { setAddLoading(false) if (error.response) { const data = error.response.data; messageApi.open({ type: 'error', content: data.msg ? data.msg : `${data.path}(${data.status})`, }); } else { console.error(error) } } finally { setAddLoading(false) } } else { try { setAddLoading(true) const newValues = { ...values }; newValues.rangeAddress = newValues.rangeAddress.join(','); await addTrademarkApplicant({ type: applicantType, // subType: qualifications, // trademarkId: props.trademarkId, nationality: '大陆', ...newValues }) getTrademarkApplicantList(1) setPage(1) setAddLoading(false) setAddPeopleModal(false) init() messageApi.open({ type: 'success', content: '新增成功', }); } catch (error: any) { setAddLoading(false) if (error.response) { const data = error.response.data; messageApi.open({ type: 'error', content: data.msg ? data.msg : `${data.path}(${data.status})`, }); } else { console.error(error) } } finally { setAddLoading(false) } } } const height = window.innerHeight - 350; const [addPeopleModal, setAddPeopleModal] = useState(false) const [deleteModal, setDeleteModal] = useState(false) const [applicantType, setApplicantType] = useState('1') //申请人类型 const applicantTypeChange = (e: any) => { setApplicantType(e.target.value) } const [qualifications, setQualifications] = useState('1') //资质类型 const qualificationsChange = (e: any) => { setQualifications(e.target.value) } const [upLoading, setUpLoading] = useState(false) // 个人身份证图片信息 const [personalIdCard, setPersonalIdCard] = useState([]) const personalIdCardChange = (info: any) => { // console.log(info.file.status); if (info.file.status === 'uploading') { // setFileList([]) setUpLoading(true) return; } if (info.file.status === 'done') { // console.log(info); setUpLoading(false) // const fileId = info.file.response.data.fileId; // // console.log(downloadUrl(fileId)); // const url = showImage(fileId, false); // console.log(info.file.response.data.fileId); setPersonalIdCard([ { uid: info.file.response.data.fileId, name: info.file.response.data.fileName, status: 'done', url: showImage(info.file.response.data.fileId, false) } ]) // 修改为设置 applicantcard 字段的值 formA.setFieldsValue({ identityPhoto: info.file.response.data.fileId }); return; } if (info.file.status === 'error') { formA.setFieldsValue({ identityPhoto: '' }); setUpLoading(false) message.error(`上传失败`); return; } } const [upPersonalLicenseLoading, setUpPersonalLicenseLoading] = useState(false) // 个体营业执照 const [personalLicense, setPersonalLicense] = useState([]) const personalLicenseChange = (info: any) => { if (info.file.status === 'uploading') { // setFileList([]) setUpPersonalLicenseLoading(true) return; } if (info.file.status === 'done') { // console.log(info); setUpPersonalLicenseLoading(false) // const fileId = info.file.response.data.fileId; // // console.log(downloadUrl(fileId)); // const url = showImage(fileId, false); // console.log(info.file.response.data.fileId); setPersonalLicense([ { uid: info.file.response.data.fileId, name: info.file.response.data.fileName, status: 'done', url: showImage(info.file.response.data.fileId, false) } ]) // 修改为设置 applicantcard 字段的值 formA.setFieldsValue({ businessLicense: info.file.response.data.fileId }); return; } if (info.file.status === 'error') { setUpPersonalLicenseLoading(false) formA.setFieldsValue({ businessLicense: '' }); message.error(`上传失败`); return; } } const [upEnterpriseLicenseLoading, setUpEnterpriseLicenseLoading] = useState(false) // 企业营业执照 const [enterpriseLicense, setEnterpriseLicense] = useState([]) const enterpriseLicenseChange = (info: any) => { if (info.file.status === 'uploading') { // setFileList([]) setUpEnterpriseLicenseLoading(true) return; } if (info.file.status === 'done') { // console.log(info); setUpEnterpriseLicenseLoading(false) // const fileId = info.file.response.data.fileId; // // console.log(downloadUrl(fileId)); // const url = showImage(fileId, false); // console.log(info.file.response.data.fileId); setEnterpriseLicense([ { uid: info.file.response.data.fileId, name: info.file.response.data.fileName, status: 'done', url: showImage(info.file.response.data.fileId, false) } ]) // 修改为设置 applicantcard 字段的值 formB.setFieldsValue({ businessLicense: info.file.response.data.fileId }); } if (info.file.status === 'error') { setUpEnterpriseLicenseLoading(false) formB.setFieldsValue({ businessLicense: '' }); message.error(`上传失败`); return; } } const [subLoading, setSubLoading] = useState(false) function deepCompareObjects(obj1: any, obj2: any): boolean { // 若两个值严格相等，直接返回 true if (obj1 === obj2) { return true; } // 若其中一个值为 null 或不是对象类型，返回 false if (typeof obj1 !== 'object' || obj1 === null || typeof obj2 !== 'object' || obj2 === null) { return false; } // 获取两个对象的键数组 const keys1 = Object.keys(obj1); const keys2 = Object.keys(obj2); // 若键的数量不同，返回 false if (keys1.length !== keys2.length) { return false; } // 遍历键，递归比较对应的值 for (const key of keys1) { if (!keys2.includes(key) || !deepCompareObjects(obj1[key], obj2[key])) { return false; } } return true; } const handleSubmit = async () => { if (deepCompareObjects(confirmSelectPeopleData, props.editThreeData)) { props.setEditProcess(4); return; } // formA.submit(); // props.setEditProcess(4); // console.log(confirmSelectPeopleData); if (confirmSelectPeopleData.name) { // console.log(confirmSelectPeopleData); try { setSubLoading(true) await submitTrademarkApplicant(props.trademarkId, { trademarkUserId: confirmSelectPeopleData.trademarkUserId, }) setSubLoading(false) props.setEditProcess(4); props.setEditThreeData({ trademarkUserId: confirmSelectPeopleData.trademarkUserId, name: confirmSelectPeopleData.name, }) } catch (error: any) { setSubLoading(false) if (error.response) { const data = error.response.data; messageApi.open({ type: 'error', content: data.msg ? data.msg : `${data.path}(${data.status})`, }); } else { console.error(error) } } finally { setSubLoading(false) } } else { message.error('请选择申请人') } }; //重置新建申请人信息 const init = () => { setApplicantType('1') setQualifications('1') formA.resetFields(); formB.resetFields(); setPersonalIdCard([]) setPersonalLicense([]) setEnterpriseLicense([]) } return (
{contextHolder}
选择申请人*：
{ setPage(1) setSelectPeopleModal(true) getTrademarkApplicantList(1) setNowSelectPeopleData({ trademarkUserId: '', name: '', }) if (confirmSelectPeopleData.trademarkUserId) { setSelectedRowKey(confirmSelectPeopleData.trademarkUserId) } else { setSelectedRowKey('') } }} > 选择
{ // setPage(1) // setSelectPeopleModal(true) // getTrademarkApplicantList(1) // setNowSelectPeopleData({ // trademarkUserId: '', // name: '', // }) // if (confirmSelectPeopleData.trademarkUserId) { // setSelectedRowKey(confirmSelectPeopleData.trademarkUserId) // } else { // setSelectedRowKey('') // } // }} >
{ setPage(1) setSelectPeopleModal(true) getTrademarkApplicantList(1) setNowSelectPeopleData({ trademarkUserId: '', name: '', }) if (confirmSelectPeopleData.trademarkUserId) { setSelectedRowKey(confirmSelectPeopleData.trademarkUserId) } else { setSelectedRowKey('') } }}>重选
{ setAddPeopleModal(true) setDisabled(false) setTrademarkUserId('') setShowBtn(true) }}>
添加新申请人
{ if (applicantType == '1') { formA.submit() } if (applicantType == '2') { formB.submit() } }} okText='保存' cancelText='取消' // 点击遮罩禁止关闭 maskClosable={false} onCancel={() => { setAddPeopleModal(false) init() }}>
申请人信息
*申请人类型：
个人/个体工商户 企业
营业执照类型为(个体工商户)，请选择:(个人/个体工商户) 营业执照类型为(公司企业)，请选择:(企业)
{/* 申请人提交审核后，不支持修改类型:如需修改，请重新创建申请人 */}
*资质类型：
个人 个体工商户
{ // console.log(errorInfo) // message.error('请填写完整的信息!') errorInfo.errorFields.forEach((field) => { if (field.errors.length > 0) { // 显示每条错误信息 message.error(field.errors[0]); } }); }} initialValues={{ softWare: '' }} style={{ marginTop: 20 }} >
*身份证 (注 ：身份证正反面复印件并在空白处签名)
{ const isPNG = file.type === 'image/png'; const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg'; if (!isPNG && !isJPG) { // console.error('仅支持 PNG、PDF、JPG 格式的文件!'); message.error('仅支持 PNG、JPG 格式的文件!'); } return isPNG || isJPG; }} onChange={personalIdCardChange} headers={{ 'Auth': `Bearer ${token}` }} disabled={personalIdCard.length > 0 || disabled} > { personalIdCard.length > 0 ?
{ setPersonalIdCard([]) formA.setFieldsValue({ identityPhoto: '' }); }} >删除
:
上传身份证
}
示例图片
*身份证件号码
*个体工商户营业执照 {/* (注 ：上传图片的尺寸最小为600*600) */}
{ const isPNG = file.type === 'image/png'; const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg'; if (!isPNG && !isJPG) { // console.error('仅支持 PNG、PDF、JPG 格式的文件!'); message.error('仅支持 PNG、JPG 格式的文件!'); } return isPNG || isJPG; }} onChange={personalLicenseChange} headers={{ 'Auth': `Bearer ${token}` }} disabled={personalLicense.length > 0 || disabled} > { personalLicense.length > 0 ?
{ setPersonalLicense([]) formA.setFieldsValue({ businessLicense: '' }); }} >删除
:
上传营业执照
}
示例图片
*统一社会信用代码
*申请人名称
*申请人地址 (注 ：省/自治区/直辖市请下拉选择，无需重复填写)
联系信息 (联系信息仅供与您联系，非递交商标局信息。)
*联系人姓名
*联系人电话
*联系人邮箱
*联系人地址
*联系人邮编
{ // console.log(errorInfo) // message.error('请填写完整的信息!') errorInfo.errorFields.forEach((field) => { if (field.errors.length > 0) { // 显示每条错误信息 message.error(field.errors[0]); } }); }} initialValues={{ softWare: '' }} style={{ marginTop: 20 }} >
*营业执照 {/* (注 ：上传图片的尺寸最小为600*600) */}
{ const isPNG = file.type === 'image/png'; const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg'; if (!isPNG && !isJPG) { // console.error('仅支持 PNG、PDF、JPG 格式的文件!'); message.error('仅支持 PNG、JPG 格式的文件!'); } return isPNG || isJPG; }} onChange={enterpriseLicenseChange} headers={{ 'Auth': `Bearer ${token}` }} disabled={enterpriseLicense.length > 0 || disabled} > { enterpriseLicense.length > 0 ?
{ setPersonalLicense([]) formB.setFieldsValue({ businessLicense: '' }); }} >删除
:
上传营业执照
}
示例图片
*申请人名称
*统一社会信用代码
*申请人地址 (注 ：省/自治区/直辖市请下拉选择，无需重复填写)
联系信息 (联系信息仅供与您联系，非递交商标局信息。)
*联系人姓名
*联系人电话
*联系人邮箱
*联系人地址
*联系人邮编
{ setSelectPeopleModal(false) }} onOk={() => { if (nowSelectPeopleData.name) { setConfirmSelectPeopleData(nowSelectPeopleData) } setSelectPeopleModal(false) // console.log(nowSelectPeopleData); }} width={1200} >
{ setSearchKeyWords(nowSearchKeyWords) }} onChange={(e) => { setNowSearchKeyWords(e.target.value) if (e.target.value === '') { setSearchKeyWords('') } }} className='searchInputmedia' style={{ // maxWidth: '200px', width: '170px', height: '31px', marginLeft: '5px' }} allowClear />
rowSelection={{ type: 'radio', selectedRowKeys: [selectedRowKey], onChange: (selectedRowKeys: React.Key[]) => { setSelectedRowKey(selectedRowKeys[0] as string); }, }} // 设置分页 pagination={{ total: total, pageSize: 5, current: page, // 取消设置每显示几条 showSizeChanger: false, // 点击分页按钮 onChange: (page: number) => { setPage(page); getTrademarkApplicantList(page) } }} columns={columns} dataSource={tableData} onRow={(record) => ({ style: { cursor: 'pointer', }, onClick: (event) => { // 检查点击的元素是否属于操作列 const isOperationColumn = (event.target as HTMLElement).closest('.ant-table-cell-operations'); if (!isOperationColumn) { setSelectedRowKey(record.trademarkUserId); setNowSelectPeopleData({ trademarkUserId: record.trademarkUserId, name: record.name, }) } } })} rowKey='trademarkUserId' /> { setDeleteModal(false) }} onOk={async () => { try { await deleteTrademarkApplicant(trademarkUserId) getTrademarkApplicantList(page) setDeleteModal(false) } catch (error: any) { if (error.response) { const data = error.response.data; messageApi.open({ type: 'error', content: data.msg ? data.msg : `${data.path}(${data.status})`, }); } else { console.error(error) } } }} > 删除后无记录?确定删除吗?
) }