Tenlion/system-copyright-react
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
4fae300362
system-copyright-react/src/route/TrademarkMall/components/EditThree/EditThree.tsx

2164 lines
76 KiB
TypeScript
Raw Normal View History

暂存
2025-06-21 10:25:29 +08:00
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'
暂存
2025-06-23 15:05:13 +08:00
import { addTrademarkApplicant, trademarkApplicantList, deleteTrademarkApplicant, trademarkApplicantDetails, updateTrademarkApplicant, submitTrademarkApplicant } from '../../../../request/api'
暂存
2025-06-18 21:03:36 +08:00
import {
PlusOutlined
} from '@ant-design/icons';
import './edit-three.css'
暂存
2025-06-21 10:25:29 +08:00
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;
// }
暂存
2025-06-23 15:05:13 +08:00
const { Search } = Input;
暂存
2025-06-13 16:43:21 +08:00
export default function EditThree(props: any) {
暂存
2025-06-21 10:25:29 +08:00
// 申请人信息
暂存
2025-06-23 17:59:26 +08:00
暂存
2025-06-23 15:05:13 +08:00
// const [applicantData, setApplicantData] = useState({
// name: '',
// trademarkUserId: '',
// })
// 获取联系人详情
const getContactDetails = async (trademarkUserId: string) => {
try {
const res: any = await trademarkApplicantDetails(trademarkUserId)
去除打印
2025-07-09 14:01:47 +08:00
// console.log(res);
暂存
2025-06-23 15:05:13 +08:00
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)
}
}
暂存
2025-06-21 10:25:29 +08:00
const [trademarkUserId, setTrademarkUserId] = useState('')
const [selectPeopleModal, setSelectPeopleModal] = useState(false)
暂存
2025-06-23 15:05:13 +08:00
const [selectedRowKey, setSelectedRowKey] = useState('');
// 临时选择的申请人信息
const [nowSelectPeopleData, setNowSelectPeopleData] = useState({
trademarkUserId: '',
name: '',
});
// 确定选择的申请人信息
const [confirmSelectPeopleData, setConfirmSelectPeopleData] = useState({
trademarkUserId: '',
name: '',
});
暂存
2025-06-23 17:59:26 +08:00
useEffect(() => {
if (props.editThreeData.trademarkUserId) {
setConfirmSelectPeopleData({
trademarkUserId: props.editThreeData.trademarkUserId,
name: props.editThreeData.name,
})
}
}, [props.editThreeData])
暂存
2025-06-21 10:25:29 +08:00
const [disabled, setDisabled] = useState(false)
const [showBtn, setShowBtn] = useState(true)
const columns: TableColumnsType<any> = [
// 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) => <a>{text}</a>,
},
// {
// title: '证件号',
// align: 'center',
// dataIndex: 'identity',
// // render: (text: string) => <a>{text}</a>,
// },
{
title: '申请人类型',
dataIndex: 'type',
align: 'center',
render: (text: string) => <span>{text == '1' ? '个人/个体工商户' : '企业'}</span>,
},
{
title: '联系人',
dataIndex: 'contactName',
align: 'center',
},
{
title: '联系人电话',
dataIndex: 'contactPhone',
align: 'center',
},
{
title: '操作',
align: 'center',
dataIndex: 'operation',
render: (text: string, record: any) => {
return (
<div className="ant-table-cell-operations">
<Button type="link" onClick={() => {
// setApplicantData({
// name: record.name,
// trademarkUserId: record.key as string,
// })
setTrademarkUserId(record.trademarkUserId)
setDisabled(false)
setAddPeopleModal(true)
setShowBtn(true)
暂存
2025-06-23 15:05:13 +08:00
getContactDetails(record.trademarkUserId)
暂存
2025-06-21 10:25:29 +08:00
}}>编辑</Button>
<Button type="link" onClick={() => {
setDisabled(true)
setAddPeopleModal(true)
setTrademarkUserId(record.trademarkUserId)
暂存
2025-06-23 15:05:13 +08:00
getContactDetails(record.trademarkUserId)
暂存
2025-06-21 10:25:29 +08:00
setShowBtn(false)
}}>查看</Button>
<Button type="link" onClick={() => {
setTrademarkUserId(record.trademarkUserId)
setDeleteModal(true)
}}>删除</Button>
</div>
)
}
}
];
const [page, setPage] = useState(1);
const [total, setTotal] = useState(0);
const [listLoading, setListLoading] = useState(false);
暂存
2025-06-23 15:05:13 +08:00
const [nowSearchKeyWords, setNowSearchKeyWords] = useState('');
const [searchKeyWords, setSearchKeyWords] = useState('');
暂存
2025-06-21 10:25:29 +08:00
const [tableData, setTableData] = useState<any>([])
// 获取申请人列表
const getTrademarkApplicantList = async (page: number) => {
try {
setListLoading(true);
const res: any = await trademarkApplicantList({
page,
rows: 5,
暂存
2025-06-23 15:05:13 +08:00
keywords: searchKeyWords
暂存
2025-06-21 10:25:29 +08:00
})
if (res.rows.length <= 0 && page > 1) {
暂存
2025-06-23 15:05:13 +08:00
setPage(page - 1)
暂存
2025-06-21 10:25:29 +08:00
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(() => {
暂存
2025-06-23 15:05:13 +08:00
getTrademarkApplicantList(1)
setPage(1)
}, [searchKeyWords])
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
// 加载省份数据
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')
暂存
2025-06-21 10:25:29 +08:00
}, []);
const [messageApi, contextHolder] = useMessage();
// 省市
const [areaArray, setAreaArray] = useState<Option[]>([]);
// 加载城市列表
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')
暂存
2025-06-18 21:03:36 +08:00
// const [form] = Form.useForm();
暂存
2025-06-21 10:25:29 +08:00
const [formA] = Form.useForm<any>();
const [addLoading, setAddLoading] = useState(false)
const onFinishA = async (values: any) => {
去除打印
2025-07-09 14:01:47 +08:00
// console.log(values);
// console.log(qualifications);
暂存
2025-06-21 10:25:29 +08:00
if (trademarkUserId) {
暂存
2025-06-23 15:05:13 +08:00
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)
}
暂存
2025-06-21 10:25:29 +08:00
} 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<any>();
const onFinishB = async (values: any) => {
去除打印
2025-07-09 14:01:47 +08:00
// console.log(values);
暂存
2025-06-21 10:25:29 +08:00
if (trademarkUserId) {
暂存
2025-06-23 15:05:13 +08:00
// 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)
}
暂存
2025-06-21 10:25:29 +08:00
} 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)
}
}
暂存
2025-06-18 21:03:36 +08:00
}
暂存
2025-06-04 09:25:40 +08:00
const height = window.innerHeight - 350;
暂存
2025-06-18 21:03:36 +08:00
const [addPeopleModal, setAddPeopleModal] = useState(false)
暂存
2025-06-21 10:25:29 +08:00
const [deleteModal, setDeleteModal] = useState(false)
暂存
2025-06-18 21:03:36 +08:00
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)
}
暂存
2025-06-21 10:25:29 +08:00
const [upLoading, setUpLoading] = useState(false)
// 个人身份证图片信息
const [personalIdCard, setPersonalIdCard] = useState<any>([])
const personalIdCardChange = (info: any) => {
去除打印
2025-07-09 14:01:47 +08:00
// console.log(info.file.status);
暂存
2025-06-21 10:25:29 +08:00
if (info.file.status === 'uploading') {
// setFileList([])
setUpLoading(true)
return;
}
if (info.file.status === 'done') {
去除打印
2025-07-09 14:01:47 +08:00
// console.log(info);
暂存
2025-06-21 10:25:29 +08:00
setUpLoading(false)
// const fileId = info.file.response.data.fileId;
// // console.log(downloadUrl(fileId));
// const url = showImage(fileId, false);
去除打印
2025-07-09 14:01:47 +08:00
// console.log(info.file.response.data.fileId);
暂存
2025-06-21 10:25:29 +08:00
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<any>([])
const personalLicenseChange = (info: any) => {
if (info.file.status === 'uploading') {
// setFileList([])
setUpPersonalLicenseLoading(true)
return;
}
if (info.file.status === 'done') {
去除打印
2025-07-09 14:01:47 +08:00
// console.log(info);
暂存
2025-06-21 10:25:29 +08:00
setUpPersonalLicenseLoading(false)
// const fileId = info.file.response.data.fileId;
// // console.log(downloadUrl(fileId));
// const url = showImage(fileId, false);
去除打印
2025-07-09 14:01:47 +08:00
// console.log(info.file.response.data.fileId);
暂存
2025-06-21 10:25:29 +08:00
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<any>([])
const enterpriseLicenseChange = (info: any) => {
if (info.file.status === 'uploading') {
// setFileList([])
setUpEnterpriseLicenseLoading(true)
return;
}
if (info.file.status === 'done') {
去除打印
2025-07-09 14:01:47 +08:00
// console.log(info);
暂存
2025-06-21 10:25:29 +08:00
setUpEnterpriseLicenseLoading(false)
// const fileId = info.file.response.data.fileId;
// // console.log(downloadUrl(fileId));
// const url = showImage(fileId, false);
去除打印
2025-07-09 14:01:47 +08:00
// console.log(info.file.response.data.fileId);
暂存
2025-06-21 10:25:29 +08:00
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;
}
}
暂存
2025-06-23 15:05:13 +08:00
const [subLoading, setSubLoading] = useState(false)
暂存
2025-06-23 17:59:26 +08:00
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;
}
暂存
2025-06-23 15:05:13 +08:00
const handleSubmit = async () => {
暂存
2025-06-23 17:59:26 +08:00
if (deepCompareObjects(confirmSelectPeopleData, props.editThreeData)) {
props.setEditProcess(4);
return;
}
暂存
2025-06-21 10:25:29 +08:00
// formA.submit();
暂存
2025-06-23 15:05:13 +08:00
// props.setEditProcess(4);
// console.log(confirmSelectPeopleData);
if (confirmSelectPeopleData.name) {
去除打印
2025-07-09 14:01:47 +08:00
// console.log(confirmSelectPeopleData);
暂存
2025-06-23 15:05:13 +08:00
try {
setSubLoading(true)
await submitTrademarkApplicant(props.trademarkId, {
trademarkUserId: confirmSelectPeopleData.trademarkUserId,
})
setSubLoading(false)
props.setEditProcess(4);
暂存
2025-06-23 17:59:26 +08:00
props.setEditThreeData({
trademarkUserId: confirmSelectPeopleData.trademarkUserId,
name: confirmSelectPeopleData.name,
})
暂存
2025-06-23 15:05:13 +08:00
} 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('请选择申请人')
}
暂存
2025-06-04 09:25:40 +08:00
};
暂存
2025-06-21 10:25:29 +08:00
//重置新建申请人信息
const init = () => {
setApplicantType('1')
setQualifications('1')
formA.resetFields();
formB.resetFields();
setPersonalIdCard([])
setPersonalLicense([])
setEnterpriseLicense([])
}
暂存
2025-06-18 21:03:36 +08:00
暂存
2025-06-04 09:25:40 +08:00
return (
暂存
2025-06-23 15:05:13 +08:00
<Spin tip="正在提交，请稍后..." size="small" spinning={subLoading}>
<div className='editOneTwo'>
{contextHolder}
<div className='topLine'></div>
<div className='' style={{
height: height,
// background: 'pink'
padding: '50px 50px',
boxSizing: 'border-box',
}}>
<div>
<div className='editFormItem'>
<div className='editFormItemTitle'>
选择申请人<span className='redTitle' >*</span>：
</div>
<div style={{
// background:'pink',
position: 'relative'
}}>
<Input style={{
width: 300,
height: 46,
background: '#FFF',
// color: 'black'
}}
placeholder="选择申请人"
value={confirmSelectPeopleData.name}
></Input>
<div style={{
position: 'absolute',
width: 290,
height: '46px',
top: '0',
right: '0',
// background: 'skyblue',
textAlign: 'right',
// lineHeight: '42px',
cursor: 'pointer',
paddingRight: '10px',
color: '#1F79FF',
display: confirmSelectPeopleData.name ? 'none' : 'unset'
}}
onClick={() => {
setPage(1)
setSelectPeopleModal(true)
getTrademarkApplicantList(1)
setNowSelectPeopleData({
trademarkUserId: '',
name: '',
})
if (confirmSelectPeopleData.trademarkUserId) {
setSelectedRowKey(confirmSelectPeopleData.trademarkUserId)
} else {
setSelectedRowKey('')
}
}}
>
选择
</div>
<div style={{
position: 'absolute',
width: 290,
height: '46px',
top: '0',
right: '0',
// background: 'skyblue',
// textAlign: 'right',
// lineHeight: '42px',
// cursor: 'pointer',
paddingRight: '10px',
color: '#1F79FF',
display: confirmSelectPeopleData.name ? 'unset' : 'none',
}}
// onClick={() => {
// setPage(1)
// setSelectPeopleModal(true)
// getTrademarkApplicantList(1)
// setNowSelectPeopleData({
// trademarkUserId: '',
// name: '',
// })
// if (confirmSelectPeopleData.trademarkUserId) {
// setSelectedRowKey(confirmSelectPeopleData.trademarkUserId)
// } else {
// setSelectedRowKey('')
// }
// }}
>
<div style={{
// background: 'skyblue',
textAlign: 'right'
}}>
<span style={{
// background: 'red',
height: 46,
// lineHeight:'46px',
display: 'inline-block',
padding: '0 10px',
cursor: 'pointer'
}}
onClick={() => {
setPage(1)
setSelectPeopleModal(true)
getTrademarkApplicantList(1)
setNowSelectPeopleData({
trademarkUserId: '',
name: '',
})
if (confirmSelectPeopleData.trademarkUserId) {
setSelectedRowKey(confirmSelectPeopleData.trademarkUserId)
} else {
setSelectedRowKey('')
}
}}>重选</span>
</div>
</div>
</div>
暂存
2025-06-18 21:03:36 +08:00
</div>
暂存
2025-06-23 15:05:13 +08:00
<div className='addPeopleBox' onClick={() => {
setAddPeopleModal(true)
setDisabled(false)
setTrademarkUserId('')
setShowBtn(true)
暂存
2025-06-13 16:43:21 +08:00
}}>
<div style={{
暂存
2025-06-23 15:05:13 +08:00
fontSize: 30,
}}><PlusOutlined /></div>
<div style={{
// fontSize:16
marginTop: 10
暂存
2025-06-21 10:25:29 +08:00
}}
暂存
2025-06-13 16:43:21 +08:00
暂存
2025-06-23 15:05:13 +08:00
>添加新申请人</div>
暂存
2025-06-13 16:43:21 +08:00
</div>
暂存
2025-06-18 21:03:36 +08:00
</div>
暂存
2025-06-13 16:43:21 +08:00
暂存
2025-06-23 15:05:13 +08:00
</div>
<div className='topLine'></div>
<div style={{
marginTop: '8px',
display: 'flex',
justifyContent: 'flex-end',
}}>
<Button
style={{
width: '100px',
height: '40px',
borderRadius: '5px',
暂存
2025-06-18 21:03:36 +08:00
}}
暂存
2025-06-23 15:05:13 +08:00
onClick={() => {
props.setEditProcess(2)
}}
>上一步</Button>
<Button
type='primary'
style={{
width: '100px',
height: '40px',
borderRadius: '5px',
marginLeft: '10px',
}}
onClick={() => {
handleSubmit()
}}
>下一步</Button>
暂存
2025-06-18 21:03:36 +08:00
</div>
暂存
2025-06-23 15:05:13 +08:00
<Modal title={disabled ? '查看申请人' : trademarkUserId ? '编辑申请人' : '新建申请人'}
destroyOnClose
centered
open={addPeopleModal}
width={800}
footer={showBtn ? undefined : null}
onOk={() => {
if (applicantType == '1') {
formA.submit()
}
if (applicantType == '2') {
formB.submit()
}
暂存
2025-06-04 09:25:40 +08:00
}}
暂存
2025-06-23 15:05:13 +08:00
okText='保存'
cancelText='取消'
// 点击遮罩禁止关闭
maskClosable={false}
onCancel={() => {
setAddPeopleModal(false)
init()
暂存
2025-06-13 16:43:21 +08:00
暂存
2025-06-23 15:05:13 +08:00
}}>
<Spin tip='正在保存' size="small" spinning={addLoading} >
<div
className='editThreeAddPeopleBox'
style={{
height: height + 100,
overflow: 'auto',
// width: '100%',
// display: 'flex',
// justifyContent:'center'
paddingLeft: 50
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-18 21:03:36 +08:00
}}>
暂存
2025-06-23 15:05:13 +08:00
<div>
<div className='addPeopleTitle'>申请人信息</div>
暂存
2025-06-21 10:25:29 +08:00
<div className='addPeopleItem' style={{
暂存
2025-06-23 15:05:13 +08:00
marginTop: 10
暂存
2025-06-21 10:25:29 +08:00
}}>
<div className='addPeopleItemTitle'>
暂存
2025-06-23 15:05:13 +08:00
<span className='redTitle'>*</span>申请人类型：
暂存
2025-06-21 10:25:29 +08:00
</div>
<div style={{
marginLeft: '2px',
}}>
<Radio.Group
暂存
2025-06-23 15:05:13 +08:00
onChange={applicantTypeChange} value={applicantType}
暂存
2025-06-21 10:25:29 +08:00
disabled={disabled}
>
暂存
2025-06-23 15:05:13 +08:00
<Radio value="1">个人/个体工商户</Radio>
<Radio value="2">企业</Radio>
暂存
2025-06-21 10:25:29 +08:00
</Radio.Group>
</div>
暂存
2025-06-18 21:03:36 +08:00
</div>
暂存
2025-06-23 15:05:13 +08:00
<div className='redTips'>
营业执照类型为(个体工商户)，请选择:(个人/个体工商户) 营业执照类型为(公司企业)，请选择:(企业)
</div>
<div className='redTips'>
{/* 申请人提交审核后，不支持修改类型:如需修改，请重新创建申请人 */}
</div>
暂存
2025-06-18 21:03:36 +08:00
<div style={{
暂存
2025-06-23 15:05:13 +08:00
display: applicantType == '1' ? 'unset' : 'none'
暂存
2025-06-18 21:03:36 +08:00
}}>
暂存
2025-06-23 15:05:13 +08:00
<div className='addPeopleItem' style={{
}}>
<div className='addPeopleItemTitle'>
<span className='redTitle'>*</span>资质类型：
</div>
<div style={{
marginLeft: '2px',
暂存
2025-06-21 10:25:29 +08:00
}}>
暂存
2025-06-23 15:05:13 +08:00
<Radio.Group
onChange={qualificationsChange} value={qualifications}
disabled={disabled}
>
<Radio value="1">个人</Radio>
<Radio value="2">个体工商户</Radio>
</Radio.Group>
</div>
</div>
<div style={{
// display: qualifications == '1' ? 'unset' : 'none'
}}>
<Form
name="FormA"
form={formA}
onFinish={onFinishA}
onFinishFailed={(errorInfo) => {
// console.log(errorInfo)
// message.error('请填写完整的信息!')
errorInfo.errorFields.forEach((field) => {
if (field.errors.length > 0) {
// 显示每条错误信息
message.error(field.errors[0]);
}
});
}}
initialValues={{ softWare: '' }}
style={{ marginTop: 20 }}
>
<div className='addPeopleFormItem' style={{
alignItems: 'flex-start',
// marginTop:0,
暂存
2025-06-21 10:25:29 +08:00
}}>
暂存
2025-06-23 15:05:13 +08:00
<div className='addPeopleItemTitle addFormItemTitle' style={{
// background: 'pink'
}}>
<span className='redTitle'>*</span>身份证
<span style={{
fontSize: 14,
color: 'red',
marginTop: 10
}}>(注 ：身份证正反面复印件并在空白处签名)</span>
暂存
2025-06-18 21:03:36 +08:00
暂存
2025-06-23 15:05:13 +08:00
</div>
暂存
2025-06-21 10:25:29 +08:00
<div style={{
暂存
2025-06-23 15:05:13 +08:00
marginLeft: '2px',
暂存
2025-06-21 10:25:29 +08:00
}}>
暂存
2025-06-23 15:05:13 +08:00
<div style={{
display: 'flex',
}}>
<Form.Item
name="identityPhoto"
rules={[{ required: true, message: '请上传身份证' }]}
暂存
2025-06-18 21:03:36 +08:00
暂存
2025-06-21 10:25:29 +08:00
>
暂存
2025-06-23 15:05:13 +08:00
<Upload
name='image'
showUploadList={false}
action={uploadImageUrl()}
// defaultFileList={upImgArray}
beforeUpload={(file) => {
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}
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
headers={{ 'Auth': `Bearer ${token}` }}
disabled={personalIdCard.length > 0 || disabled}
>
<Spin tip="正在提交，请稍后..." size="small" spinning={upLoading}>
{
personalIdCard.length > 0 ?
暂存
2025-06-21 10:25:29 +08:00
<div style={{
暂存
2025-06-23 15:05:13 +08:00
position: 'relative',
}}>
<div className='editThreeUpBox'>
<Image
src={personalIdCard[0].url}
style={{
height: '150px',
maxWidth: '300px'
}}
/>
暂存
2025-06-21 10:25:29 +08:00
</div>
<div style={{
position: 'absolute',
top: 0,
right: 0,
color: 'red',
cursor: 'pointer',
padding: '2px 5px',
backgroundColor: 'rgba(168, 168, 168, 0.5)',
暂存
2025-06-23 15:05:13 +08:00
display: disabled ? 'none' : 'unset'
暂存
2025-06-21 10:25:29 +08:00
}}
onClick={() => {
暂存
2025-06-23 15:05:13 +08:00
setPersonalIdCard([])
formA.setFieldsValue({ identityPhoto: '' });
暂存
2025-06-21 10:25:29 +08:00
}}
>删除</div>
</div>
:
<div style={{
display: 'flex'
}}>
<div className='editThreeUpBox' >
<div style={{
fontSize: 30,
}}>
<PlusOutlined />
</div>
<div style={{
marginTop: 10,
}}>
暂存
2025-06-23 15:05:13 +08:00
上传身份证
暂存
2025-06-21 10:25:29 +08:00
</div>
</div>
</div>
}
</Spin>
</Upload>
</Form.Item>
暂存
2025-06-23 15:05:13 +08:00
<div style={{
}}>
<div className='exampleImg'>
<Image src={personCard} height={120}></Image>
<div style={{
color: 'red'
}}>
示例图片
</div>
</div>
</div>
暂存
2025-06-21 10:25:29 +08:00
</div>
暂存
2025-06-23 15:05:13 +08:00
</div>
</div>
<div className='addPeopleFormItem ' >
<div className='addPeopleItemTitle addFormItemTitle' style={{
marginTop: 6
}}>
<span className='redTitle' >*</span>身份证件号码
</div>
<div style={{
}}>
<Form.Item
name="identity"
rules={[{ required: true, message: '请输入身份证上登记的证件号码，务必保持一致' }]}
>
<Input style={{
width: 520,
height: 42,
background: '#FFF',
color: 'black'
}}
disabled={disabled}
// placeholder="证件号码"
placeholder='请输入身份证上登记的证件号码，务必保持一致'
>
</Input>
</Form.Item>
</div>
</div>
<div className='addPeopleFormItem' style={{
alignItems: 'flex-start',
// marginTop:0,
}}>
<div className='addPeopleItemTitle addFormItemTitle' style={{
// background: 'pink'
}}>
<span className='redTitle'>*</span>个体工商户营业执照
{/* <span style={{
fontSize: 14,
color: 'red',
marginTop: 10
}}>(注 ：上传图片的尺寸最小为600*600)</span> */}
</div>
<div style={{
marginLeft: '2px',
}}>
暂存
2025-06-21 10:25:29 +08:00
<div style={{
暂存
2025-06-23 15:05:13 +08:00
display: 'flex',
暂存
2025-06-21 10:25:29 +08:00
}}>
暂存
2025-06-23 15:05:13 +08:00
<div>
<Form.Item
name="businessLicense"
rules={[{ required: true, message: '个体工商户营业执照' }]}
>
<Upload
name='image'
showUploadList={false}
action={uploadImageUrl()}
// defaultFileList={upImgArray}
beforeUpload={(file) => {
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}
>
<Spin tip="正在提交，请稍后..." size="small" spinning={upPersonalLicenseLoading}>
{
personalLicense.length > 0 ?
<div style={{
position: 'relative',
}}>
<div className='editThreeUpBox'>
<Image
src={personalLicense[0].url}
style={{
height: '150px',
maxWidth: '300px'
}}
/>
</div>
<div style={{
position: 'absolute',
top: 0,
right: 0,
color: 'red',
cursor: 'pointer',
padding: '2px 5px',
backgroundColor: 'rgba(168, 168, 168, 0.5)',
display: disabled ? 'none' : 'unset'
}}
onClick={() => {
setPersonalLicense([])
formA.setFieldsValue({ businessLicense: '' });
}}
>删除</div>
</div>
:
<div style={{
display: 'flex'
}}>
<div className='editThreeUpBox' >
<div style={{
fontSize: 30,
}}>
<PlusOutlined />
</div>
<div style={{
marginTop: 10,
}}>
上传营业执照
</div>
</div>
</div>
}
</Spin>
</Upload>
</Form.Item>
</div>
<div style={{
}}>
<div className='exampleImg'>
<Image src={qualifications == '1' ? personLicense : individualLicense} height={120}></Image>
<div style={{
color: 'red'
}}>
示例图片
</div>
暂存
2025-06-21 10:25:29 +08:00
</div>
暂存
2025-06-23 15:05:13 +08:00
暂存
2025-06-21 10:25:29 +08:00
</div>
</div>
</div>
</div>
暂存
2025-06-23 15:05:13 +08:00
<div className='addPeopleFormItem'>
<div className='addPeopleItemTitle addFormItemTitle' style={{
marginTop: 6
}}>
<span className='redTitle' >*</span>统一社会信用代码
</div>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
<div style={{
}}>
<Form.Item
name="businessLicenseIdcard"
rules={[{ required: true, message: '请输入统一社会信用代码' }]}
暂存
2025-06-21 10:25:29 +08:00
>
暂存
2025-06-23 15:05:13 +08:00
<Input style={{
width: 520,
height: 42,
background: '#FFF',
color: 'black'
}}
disabled={disabled}
placeholder='请输入统一社会信用代码'
>
</Input>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
</Form.Item>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
</div>
暂存
2025-06-21 10:25:29 +08:00
</div>
暂存
2025-06-23 15:05:13 +08:00
<div className='addPeopleFormItem'>
<div className='addPeopleItemTitle addFormItemTitle' style={{
marginTop: 6
}}>
<span className='redTitle' >*</span>申请人名称
</div>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
<div style={{
}}>
<Form.Item
name="name"
rules={[{ required: true, message: qualifications == '1' ? '请输入个体工商户经营者或法人姓名' : '请输入营业执照名称' }]}
暂存
2025-06-21 10:25:29 +08:00
>
暂存
2025-06-23 15:05:13 +08:00
<Input style={{
width: 520,
height: 42,
background: '#FFF',
color: 'black'
}}
disabled={disabled}
placeholder={qualifications == '1' ? '请输入个体工商户经营者或法人姓名' : '请输入营业执照名称'}
>
</Input>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
</Form.Item>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
</div>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
</div>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
<div className='addPeopleFormItem'>
<div className='addPeopleItemTitle addFormItemTitle' style={{
marginTop: 6
}}>
<span className='redTitle' >*</span>申请人地址
<span style={{
fontSize: 14,
color: 'red',
marginTop: 10
}}>(注 ：省/自治区/直辖市请下拉选择，无需重复填写)</span>
</div>
暂存
2025-06-21 10:25:29 +08:00
<div style={{
display: 'flex',
}}>
暂存
2025-06-23 15:05:13 +08:00
<Form.Item
name="rangeAddress"
rules={[{ required: true, message: '请选择省市' }]}
暂存
2025-06-21 10:25:29 +08:00
>
暂存
2025-06-23 15:05:13 +08:00
<Cascader options={areaArray}
allowClear
style={{ height: '42px', width: 200 }}
loadData={loadCityList}
placeholder="请选择省市"
changeOnSelect
disabled={disabled}
/>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
</Form.Item>
<div style={{
height: '42px',
// background:'pink',
display: 'flex',
alignItems: 'center'
}}>
<div className='addressLine'></div>
</div>
<Form.Item
name="address"
rules={[{ required: true, message: qualifications == '1' ? '请输入身份证地址' : '请输入营业执照地址' }]}
>
<Input style={{
width: 300,
height: 42,
background: '#FFF',
color: 'black'
}}
disabled={disabled}
placeholder={qualifications == '1' ? '请输入身份证地址' : '请输入营业执照地址'}
>
</Input>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
</Form.Item>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
</div>
暂存
2025-06-21 10:25:29 +08:00
</div>
暂存
2025-06-23 15:05:13 +08:00
<div className='addPeopleTitle'>联系信息
<span style={{
fontSize: 14,
color: '#979797',
marginTop: 10,
fontWeight: 200
}}>(联系信息仅供与您联系，非递交商标局信息。)</span>
</div>
<div className='addPeopleFormItem'>
<div className='addPeopleItemTitle addFormItemTitle' style={{
marginTop: 6
}}>
<span className='redTitle' >*</span>联系人姓名
</div>
<div style={{
}}>
<Form.Item
name="contactName"
rules={[{ required: true, message: '请输入联系人姓名' }]}
暂存
2025-06-21 10:25:29 +08:00
>
暂存
2025-06-23 15:05:13 +08:00
<Input style={{
width: 520,
height: 42,
background: '#FFF',
color: 'black'
}}
disabled={disabled}
placeholder='请输入联系人姓名'
>
</Input>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
</Form.Item>
暂存
2025-06-13 16:43:21 +08:00
暂存
2025-06-18 21:03:36 +08:00
暂存
2025-06-23 15:05:13 +08:00
</div>
暂存
2025-06-21 10:25:29 +08:00
</div>
暂存
2025-06-23 15:05:13 +08:00
<div className='addPeopleFormItem'>
<div className='addPeopleItemTitle addFormItemTitle' style={{
marginTop: 6
}}>
<span className='redTitle' >*</span>联系人电话
</div>
<div style={{
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
}}>
<Form.Item
name="contactPhone"
rules={[{ required: true, message: '请输入联系人电话' }]}
暂存
2025-06-21 10:25:29 +08:00
>
暂存
2025-06-23 15:05:13 +08:00
<Input style={{
width: 520,
height: 42,
background: '#FFF',
color: 'black'
}}
disabled={disabled}
placeholder='请输入联系人电话'
>
</Input>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
</Form.Item>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
</div>
暂存
2025-06-21 10:25:29 +08:00
</div>
暂存
2025-06-23 15:05:13 +08:00
<div className='addPeopleFormItem'>
<div className='addPeopleItemTitle addFormItemTitle' style={{
marginTop: 6
}}>
<span className='redTitle' >*</span>联系人邮箱
</div>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
<div style={{
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
}}>
<Form.Item
name="contactEmail"
rules={[{ required: true, message: '请输入联系人邮箱' }]}
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
>
<Input style={{
width: 520,
height: 42,
background: '#FFF',
color: 'black'
}}
disabled={disabled}
placeholder='请输入联系人邮箱'
>
</Input>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
</Form.Item>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
</div>
暂存
2025-06-21 10:25:29 +08:00
</div>
暂存
2025-06-23 15:05:13 +08:00
<div className='addPeopleFormItem'>
<div className='addPeopleItemTitle addFormItemTitle' style={{
marginTop: 6
}}>
<span className='redTitle' >*</span>联系人地址
</div>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
<div style={{
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
}}>
<Form.Item
name="contactAddress"
rules={[{ required: true, message: '请输入联系人地址' }]}
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
>
<Input style={{
width: 520,
height: 42,
background: '#FFF',
color: 'black'
}}
disabled={disabled}
placeholder='请输入联系人地址'
>
</Input>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
</Form.Item>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
</div>
暂存
2025-06-21 10:25:29 +08:00
</div>
暂存
2025-06-23 15:05:13 +08:00
<div className='addPeopleFormItem'>
<div className='addPeopleItemTitle addFormItemTitle' style={{
marginTop: 6
}}>
<span className='redTitle' >*</span>联系人邮编
</div>
<div style={{
}}>
<Form.Item
name="contactEmailCode"
rules={[{ required: true, message: '请输入联系人邮编' }]}
暂存
2025-06-21 10:25:29 +08:00
>
暂存
2025-06-23 15:05:13 +08:00
<Input style={{
width: 520,
height: 42,
background: '#FFF',
color: 'black'
}}
disabled={disabled}
placeholder='请输入联系人邮编'
>
</Input>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
</Form.Item>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
</div>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
</div>
</Form>
</div>
暂存
2025-06-21 10:25:29 +08:00
</div>
暂存
2025-06-18 21:03:36 +08:00
暂存
2025-06-21 10:25:29 +08:00
<div style={{
暂存
2025-06-23 15:05:13 +08:00
display: applicantType == '2' ? 'unset' : 'none'
暂存
2025-06-21 10:25:29 +08:00
}}>
暂存
2025-06-23 15:05:13 +08:00
<div style={{
// display: qualifications == '1' ? 'unset' : 'none'
}}>
<Form
name="FormB"
form={formB}
onFinish={onFinishB}
onFinishFailed={(errorInfo) => {
// console.log(errorInfo)
// message.error('请填写完整的信息!')
errorInfo.errorFields.forEach((field) => {
if (field.errors.length > 0) {
// 显示每条错误信息
message.error(field.errors[0]);
}
});
}}
initialValues={{ softWare: '' }}
style={{ marginTop: 20 }}
>
<div className='addPeopleFormItem' style={{
alignItems: 'flex-start',
// marginTop:0,
暂存
2025-06-21 10:25:29 +08:00
}}>
暂存
2025-06-23 15:05:13 +08:00
<div className='addPeopleItemTitle addFormItemTitle' style={{
// background: 'pink'
}}>
<span className='redTitle'>*</span>营业执照
{/* <span style={{
暂存
2025-06-21 10:25:29 +08:00
fontSize: 14,
color: 'red',
marginTop: 10
}}>(注 ：上传图片的尺寸最小为600*600)</span> */}
暂存
2025-06-23 15:05:13 +08:00
</div>
暂存
2025-06-21 10:25:29 +08:00
<div style={{
暂存
2025-06-23 15:05:13 +08:00
marginLeft: '2px',
暂存
2025-06-21 10:25:29 +08:00
}}>
暂存
2025-06-23 15:05:13 +08:00
<div style={{
display: 'flex',
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
}}>
<div>
<Form.Item
name="businessLicense"
rules={[{ required: true, message: '个体工商户营业执照' }]}
暂存
2025-06-21 10:25:29 +08:00
>
暂存
2025-06-23 15:05:13 +08:00
<Upload
name='image'
showUploadList={false}
action={uploadImageUrl()}
// defaultFileList={upImgArray}
beforeUpload={(file) => {
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}
>
<Spin tip="正在提交，请稍后..." size="small" spinning={upEnterpriseLicenseLoading}>
{
enterpriseLicense.length > 0 ?
暂存
2025-06-21 10:25:29 +08:00
<div style={{
暂存
2025-06-23 15:05:13 +08:00
position: 'relative',
}}>
<div className='editThreeUpBox'>
<Image
src={enterpriseLicense[0].url}
style={{
height: '150px',
maxWidth: '300px'
}}
/>
暂存
2025-06-21 10:25:29 +08:00
</div>
<div style={{
暂存
2025-06-23 15:05:13 +08:00
position: 'absolute',
top: 0,
right: 0,
color: 'red',
cursor: 'pointer',
padding: '2px 5px',
backgroundColor: 'rgba(168, 168, 168, 0.5)',
display: disabled ? 'none' : 'unset'
}}
onClick={() => {
setPersonalLicense([])
formB.setFieldsValue({ businessLicense: '' });
}}
>删除</div>
暂存
2025-06-21 10:25:29 +08:00
</div>
暂存
2025-06-23 15:05:13 +08:00
:
<div style={{
display: 'flex'
}}>
<div className='editThreeUpBox' >
<div style={{
fontSize: 30,
}}>
<PlusOutlined />
</div>
<div style={{
marginTop: 10,
}}>
上传营业执照
</div>
</div>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
</div>
}
</Spin>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
</Upload>
</Form.Item>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
</div>
<div style={{
}}>
<div className='exampleImg'>
<Image src={individualLicense} height={120}></Image>
<div style={{
color: 'red'
}}>
示例图片
</div>
暂存
2025-06-21 10:25:29 +08:00
</div>
暂存
2025-06-23 15:05:13 +08:00
暂存
2025-06-21 10:25:29 +08:00
</div>
</div>
</div>
</div>
暂存
2025-06-23 15:05:13 +08:00
<div className='addPeopleFormItem'>
<div className='addPeopleItemTitle addFormItemTitle' style={{
marginTop: 6
}}>
<span className='redTitle' >*</span>申请人名称
</div>
<div style={{
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
}}>
<Form.Item
name="name"
rules={[{ required: true, message: '请输入申请人名称,申请人名称必须与公司名称一致' }]}
暂存
2025-06-21 10:25:29 +08:00
>
暂存
2025-06-23 15:05:13 +08:00
<Input style={{
width: 520,
height: 42,
background: '#FFF',
color: 'black'
}}
disabled={disabled}
placeholder='申请人名称必须与公司名称一致'
>
</Input>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
</Form.Item>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
</div>
暂存
2025-06-21 10:25:29 +08:00
</div>
暂存
2025-06-23 15:05:13 +08:00
<div className='addPeopleFormItem'>
<div className='addPeopleItemTitle addFormItemTitle' style={{
marginTop: 6
}}>
<span className='redTitle' >*</span>统一社会信用代码
</div>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
<div style={{
}}>
<Form.Item
name="businessLicenseIdcard"
rules={[{ required: true, message: '请输入统一社会信用代码' }]}
暂存
2025-06-21 10:25:29 +08:00
>
暂存
2025-06-23 15:05:13 +08:00
<Input style={{
width: 520,
height: 42,
background: '#FFF',
color: 'black'
}}
disabled={disabled}
placeholder='请输入统一社会信用代码'
>
</Input>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
</Form.Item>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
</div>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-18 21:03:36 +08:00
暂存
2025-06-23 15:05:13 +08:00
</div>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
<div className='addPeopleFormItem'>
<div className='addPeopleItemTitle addFormItemTitle' style={{
marginTop: 6
}}>
<span className='redTitle' >*</span>申请人地址
<span style={{
fontSize: 14,
color: 'red',
marginTop: 10
}}>(注 ：省/自治区/直辖市请下拉选择，无需重复填写)</span>
</div>
暂存
2025-06-21 10:25:29 +08:00
<div style={{
display: 'flex',
}}>
暂存
2025-06-23 15:05:13 +08:00
<Form.Item
name="rangeAddress"
rules={[{ required: true, message: '请选择省市' }]}
暂存
2025-06-21 10:25:29 +08:00
>
暂存
2025-06-23 15:05:13 +08:00
<Cascader options={areaArray}
allowClear
style={{ height: '42px', width: 200 }}
loadData={loadCityList}
placeholder="请选择省市"
changeOnSelect
disabled={disabled}
/>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
</Form.Item>
<div style={{
height: '42px',
// background:'pink',
display: 'flex',
alignItems: 'center'
}}>
<div className='addressLine'></div>
</div>
<Form.Item
name="address"
rules={[{ required: true, message: '请输入营业执照地址' }]}
>
<Input style={{
width: 300,
height: 42,
background: '#FFF',
color: 'black'
}}
disabled={disabled}
placeholder={'请输入营业执照地址'}
>
</Input>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
</Form.Item>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
</div>
暂存
2025-06-21 10:25:29 +08:00
</div>
暂存
2025-06-23 15:05:13 +08:00
<div className='addPeopleTitle'>联系信息
<span style={{
fontSize: 14,
color: '#979797',
marginTop: 10,
fontWeight: 200
}}>(联系信息仅供与您联系，非递交商标局信息。)</span>
</div>
<div className='addPeopleFormItem'>
<div className='addPeopleItemTitle addFormItemTitle' style={{
marginTop: 6
}}>
<span className='redTitle' >*</span>联系人姓名
</div>
<div style={{
}}>
<Form.Item
name="contactName"
rules={[{ required: true, message: '请输入联系人姓名' }]}
暂存
2025-06-21 10:25:29 +08:00
>
暂存
2025-06-23 15:05:13 +08:00
<Input style={{
width: 520,
height: 42,
background: '#FFF',
color: 'black'
}}
disabled={disabled}
placeholder='请输入联系人姓名'
>
</Input>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
</Form.Item>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
</div>
暂存
2025-06-21 10:25:29 +08:00
</div>
暂存
2025-06-23 15:05:13 +08:00
<div className='addPeopleFormItem'>
<div className='addPeopleItemTitle addFormItemTitle' style={{
marginTop: 6
}}>
<span className='redTitle' >*</span>联系人电话
</div>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
<div style={{
}}>
<Form.Item
name="contactPhone"
rules={[{ required: true, message: '请输入联系人电话' }]}
暂存
2025-06-21 10:25:29 +08:00
>
暂存
2025-06-23 15:05:13 +08:00
<Input style={{
width: 520,
height: 42,
background: '#FFF',
color: 'black'
}}
disabled={disabled}
placeholder='请输入联系人电话'
>
</Input>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
</Form.Item>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
</div>
暂存
2025-06-21 10:25:29 +08:00
</div>
暂存
2025-06-23 15:05:13 +08:00
<div className='addPeopleFormItem'>
<div className='addPeopleItemTitle addFormItemTitle' style={{
marginTop: 6
}}>
<span className='redTitle' >*</span>联系人邮箱
</div>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
<div style={{
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
}}>
<Form.Item
name="contactEmail"
rules={[{ required: true, message: '请输入联系人邮箱' }]}
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
>
<Input style={{
width: 520,
height: 42,
background: '#FFF',
color: 'black'
}}
disabled={disabled}
placeholder='请输入联系人邮箱'
>
</Input>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
</Form.Item>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
</div>
暂存
2025-06-21 10:25:29 +08:00
</div>
暂存
2025-06-23 15:05:13 +08:00
<div className='addPeopleFormItem'>
<div className='addPeopleItemTitle addFormItemTitle' style={{
marginTop: 6
}}>
<span className='redTitle' >*</span>联系人地址
</div>
<div style={{
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
}}>
<Form.Item
name="contactAddress"
rules={[{ required: true, message: '请输入联系人地址' }]}
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
>
<Input style={{
width: 520,
height: 42,
background: '#FFF',
color: 'black'
}}
disabled={disabled}
placeholder='请输入联系人地址'
>
</Input>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
</Form.Item>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
</div>
暂存
2025-06-21 10:25:29 +08:00
</div>
暂存
2025-06-23 15:05:13 +08:00
<div className='addPeopleFormItem'>
<div className='addPeopleItemTitle addFormItemTitle' style={{
marginTop: 6
}}>
<span className='redTitle' >*</span>联系人邮编
</div>
<div style={{
}}>
<Form.Item
name="contactEmailCode"
rules={[{ required: true, message: '请输入联系人邮编' }]}
暂存
2025-06-21 10:25:29 +08:00
>
暂存
2025-06-23 15:05:13 +08:00
<Input style={{
width: 520,
height: 42,
background: '#FFF',
color: 'black'
}}
disabled={disabled}
placeholder='请输入联系人邮编'
>
</Input>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
</Form.Item>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
</div>
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
</div>
</Form>
</div>
暂存
2025-06-21 10:25:29 +08:00
</div>
</div>
</div>
暂存
2025-06-23 15:05:13 +08:00
</Spin>
</Modal>
<Modal title="选择申请人"
destroyOnClose={true}
centered
open={selectPeopleModal}
// footer={null}
okText='确定'
cancelText='取消'
onCancel={() => { setSelectPeopleModal(false) }}
onOk={() => {
if (nowSelectPeopleData.name) {
setConfirmSelectPeopleData(nowSelectPeopleData)
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
}
setSelectPeopleModal(false)
// console.log(nowSelectPeopleData);
}}
width={1200} >
<div style={{
marginBottom: 10
}}>
<Button type='primary' onClick={() => {
setAddPeopleModal(true)
setDisabled(false)
setTrademarkUserId('')
setShowBtn(true)
}}>新建申请人</Button>
<Search placeholder="输入关键字"
value={nowSearchKeyWords}
onSearch={() => {
setSearchKeyWords(nowSearchKeyWords)
}}
onChange={(e) => {
setNowSearchKeyWords(e.target.value)
if (e.target.value === '') {
setSearchKeyWords('')
暂存
2025-06-21 10:25:29 +08:00
}
暂存
2025-06-23 15:05:13 +08:00
}}
className='searchInputmedia'
style={{
// maxWidth: '200px',
width: '170px',
height: '31px',
marginLeft: '5px'
}}
allowClear
/>
</div>
<Spin tip='正在加载' size="small" spinning={listLoading} >
<Table<any>
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,
})
}
暂存
2025-06-21 10:25:29 +08:00
暂存
2025-06-23 15:05:13 +08:00
}
})}
rowKey='trademarkUserId'
/>
</Spin>
</Modal>
<Modal title="提示"
destroyOnClose={true}
centered
open={deleteModal}
okButtonProps={{
style: {
backgroundColor: '#ff4d4f', // 红色背景
borderColor: '#ff4d4f', // 红色边框
},
}}
// footer={null}
okText='确定'
cancelText='取消'
onCancel={() => { 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)
暂存
2025-06-21 10:25:29 +08:00
}
}
暂存
2025-06-23 15:05:13 +08:00
}}
>
删除后无记录?确定删除吗?
</Modal>
</div >
</Spin>
暂存
2025-06-04 09:25:40 +08:00
)
}
Reference in New Issue Copy Permalink