2164 lines
76 KiB
TypeScript
2164 lines
76 KiB
TypeScript
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<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)
|
||
getContactDetails(record.trademarkUserId)
|
||
}}>编辑</Button>
|
||
<Button type="link" onClick={() => {
|
||
setDisabled(true)
|
||
setAddPeopleModal(true)
|
||
setTrademarkUserId(record.trademarkUserId)
|
||
getContactDetails(record.trademarkUserId)
|
||
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);
|
||
const [nowSearchKeyWords, setNowSearchKeyWords] = useState('');
|
||
const [searchKeyWords, setSearchKeyWords] = useState('');
|
||
const [tableData, setTableData] = useState<any>([])
|
||
// 获取申请人列表
|
||
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<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')
|
||
// const [form] = Form.useForm();
|
||
const [formA] = Form.useForm<any>();
|
||
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<any>();
|
||
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<any>([])
|
||
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<any>([])
|
||
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<any>([])
|
||
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 (
|
||
<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>
|
||
</div>
|
||
<div className='addPeopleBox' onClick={() => {
|
||
setAddPeopleModal(true)
|
||
setDisabled(false)
|
||
setTrademarkUserId('')
|
||
setShowBtn(true)
|
||
}}>
|
||
<div style={{
|
||
fontSize: 30,
|
||
|
||
}}><PlusOutlined /></div>
|
||
<div style={{
|
||
// fontSize:16
|
||
marginTop: 10
|
||
}}
|
||
|
||
>添加新申请人</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div className='topLine'></div>
|
||
<div style={{
|
||
marginTop: '8px',
|
||
display: 'flex',
|
||
justifyContent: 'flex-end',
|
||
}}>
|
||
<Button
|
||
style={{
|
||
width: '100px',
|
||
height: '40px',
|
||
borderRadius: '5px',
|
||
}}
|
||
onClick={() => {
|
||
props.setEditProcess(2)
|
||
}}
|
||
>上一步</Button>
|
||
<Button
|
||
type='primary'
|
||
style={{
|
||
width: '100px',
|
||
height: '40px',
|
||
borderRadius: '5px',
|
||
marginLeft: '10px',
|
||
}}
|
||
onClick={() => {
|
||
handleSubmit()
|
||
}}
|
||
>下一步</Button>
|
||
</div>
|
||
<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()
|
||
}
|
||
}}
|
||
okText='保存'
|
||
cancelText='取消'
|
||
// 点击遮罩禁止关闭
|
||
maskClosable={false}
|
||
onCancel={() => {
|
||
setAddPeopleModal(false)
|
||
init()
|
||
|
||
}}>
|
||
<Spin tip='正在保存' size="small" spinning={addLoading} >
|
||
|
||
<div
|
||
className='editThreeAddPeopleBox'
|
||
style={{
|
||
height: height + 100,
|
||
overflow: 'auto',
|
||
// width: '100%',
|
||
// display: 'flex',
|
||
// justifyContent:'center'
|
||
paddingLeft: 50
|
||
|
||
}}>
|
||
<div>
|
||
<div className='addPeopleTitle'>申请人信息</div>
|
||
<div className='addPeopleItem' style={{
|
||
marginTop: 10
|
||
}}>
|
||
<div className='addPeopleItemTitle'>
|
||
<span className='redTitle'>*</span>申请人类型：
|
||
</div>
|
||
<div style={{
|
||
marginLeft: '2px',
|
||
}}>
|
||
<Radio.Group
|
||
onChange={applicantTypeChange} value={applicantType}
|
||
disabled={disabled}
|
||
>
|
||
<Radio value="1">个人/个体工商户</Radio>
|
||
<Radio value="2">企业</Radio>
|
||
</Radio.Group>
|
||
</div>
|
||
</div>
|
||
<div className='redTips'>
|
||
营业执照类型为(个体工商户)，请选择:(个人/个体工商户) 营业执照类型为(公司企业)，请选择:(企业)
|
||
</div>
|
||
<div className='redTips'>
|
||
{/* 申请人提交审核后，不支持修改类型:如需修改，请重新创建申请人 */}
|
||
</div>
|
||
<div style={{
|
||
display: applicantType == '1' ? 'unset' : 'none'
|
||
}}>
|
||
<div className='addPeopleItem' style={{
|
||
}}>
|
||
<div className='addPeopleItemTitle'>
|
||
<span className='redTitle'>*</span>资质类型：
|
||
</div>
|
||
<div style={{
|
||
marginLeft: '2px',
|
||
}}>
|
||
<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,
|
||
}}>
|
||
<div className='addPeopleItemTitle addFormItemTitle' style={{
|
||
// background: 'pink'
|
||
}}>
|
||
<span className='redTitle'>*</span>身份证
|
||
<span style={{
|
||
fontSize: 14,
|
||
color: 'red',
|
||
marginTop: 10
|
||
}}>(注 ：身份证正反面复印件并在空白处签名)</span>
|
||
|
||
</div>
|
||
<div style={{
|
||
marginLeft: '2px',
|
||
}}>
|
||
<div style={{
|
||
display: 'flex',
|
||
|
||
}}>
|
||
<Form.Item
|
||
name="identityPhoto"
|
||
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={personalIdCardChange}
|
||
|
||
headers={{ 'Auth': `Bearer ${token}` }}
|
||
disabled={personalIdCard.length > 0 || disabled}
|
||
>
|
||
<Spin tip="正在提交，请稍后..." size="small" spinning={upLoading}>
|
||
{
|
||
personalIdCard.length > 0 ?
|
||
<div style={{
|
||
position: 'relative',
|
||
}}>
|
||
<div className='editThreeUpBox'>
|
||
<Image
|
||
src={personalIdCard[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={() => {
|
||
setPersonalIdCard([])
|
||
formA.setFieldsValue({ identityPhoto: '' });
|
||
}}
|
||
>删除</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 style={{
|
||
}}>
|
||
<div className='exampleImg'>
|
||
<Image src={personCard} height={120}></Image>
|
||
<div style={{
|
||
color: 'red'
|
||
}}>
|
||
示例图片
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</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',
|
||
}}>
|
||
<div style={{
|
||
display: 'flex',
|
||
|
||
}}>
|
||
<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>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className='addPeopleFormItem'>
|
||
<div className='addPeopleItemTitle addFormItemTitle' style={{
|
||
marginTop: 6
|
||
}}>
|
||
<span className='redTitle' >*</span>统一社会信用代码
|
||
</div>
|
||
|
||
<div style={{
|
||
|
||
}}>
|
||
<Form.Item
|
||
name="businessLicenseIdcard"
|
||
rules={[{ required: true, message: '请输入统一社会信用代码' }]}
|
||
|
||
>
|
||
<Input style={{
|
||
width: 520,
|
||
height: 42,
|
||
background: '#FFF',
|
||
color: 'black'
|
||
}}
|
||
disabled={disabled}
|
||
placeholder='请输入统一社会信用代码'
|
||
>
|
||
</Input>
|
||
|
||
</Form.Item>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
<div className='addPeopleFormItem'>
|
||
<div className='addPeopleItemTitle addFormItemTitle' style={{
|
||
marginTop: 6
|
||
}}>
|
||
<span className='redTitle' >*</span>申请人名称
|
||
</div>
|
||
|
||
<div style={{
|
||
|
||
}}>
|
||
<Form.Item
|
||
name="name"
|
||
rules={[{ required: true, message: qualifications == '1' ? '请输入个体工商户经营者或法人姓名' : '请输入营业执照名称' }]}
|
||
|
||
>
|
||
<Input style={{
|
||
width: 520,
|
||
height: 42,
|
||
background: '#FFF',
|
||
color: 'black'
|
||
}}
|
||
disabled={disabled}
|
||
placeholder={qualifications == '1' ? '请输入个体工商户经营者或法人姓名' : '请输入营业执照名称'}
|
||
>
|
||
</Input>
|
||
|
||
</Form.Item>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
<div className='addPeopleFormItem'>
|
||
<div className='addPeopleItemTitle addFormItemTitle' style={{
|
||
marginTop: 6
|
||
}}>
|
||
<span className='redTitle' >*</span>申请人地址
|
||
<span style={{
|
||
fontSize: 14,
|
||
color: 'red',
|
||
marginTop: 10
|
||
}}>(注 ：省/自治区/直辖市请下拉选择，无需重复填写)</span>
|
||
</div>
|
||
|
||
<div style={{
|
||
display: 'flex',
|
||
}}>
|
||
<Form.Item
|
||
name="rangeAddress"
|
||
rules={[{ required: true, message: '请选择省市' }]}
|
||
>
|
||
<Cascader options={areaArray}
|
||
allowClear
|
||
style={{ height: '42px', width: 200 }}
|
||
loadData={loadCityList}
|
||
placeholder="请选择省市"
|
||
changeOnSelect
|
||
disabled={disabled}
|
||
/>
|
||
|
||
</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>
|
||
|
||
</Form.Item>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
<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: '请输入联系人姓名' }]}
|
||
|
||
>
|
||
<Input style={{
|
||
width: 520,
|
||
height: 42,
|
||
background: '#FFF',
|
||
color: 'black'
|
||
}}
|
||
disabled={disabled}
|
||
placeholder='请输入联系人姓名'
|
||
>
|
||
</Input>
|
||
|
||
</Form.Item>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
<div className='addPeopleFormItem'>
|
||
<div className='addPeopleItemTitle addFormItemTitle' style={{
|
||
marginTop: 6
|
||
}}>
|
||
<span className='redTitle' >*</span>联系人电话
|
||
</div>
|
||
|
||
<div style={{
|
||
|
||
}}>
|
||
<Form.Item
|
||
name="contactPhone"
|
||
rules={[{ required: true, message: '请输入联系人电话' }]}
|
||
|
||
>
|
||
<Input style={{
|
||
width: 520,
|
||
height: 42,
|
||
background: '#FFF',
|
||
color: 'black'
|
||
}}
|
||
disabled={disabled}
|
||
placeholder='请输入联系人电话'
|
||
>
|
||
</Input>
|
||
|
||
</Form.Item>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
<div className='addPeopleFormItem'>
|
||
<div className='addPeopleItemTitle addFormItemTitle' style={{
|
||
marginTop: 6
|
||
}}>
|
||
<span className='redTitle' >*</span>联系人邮箱
|
||
</div>
|
||
|
||
<div style={{
|
||
|
||
}}>
|
||
<Form.Item
|
||
name="contactEmail"
|
||
rules={[{ required: true, message: '请输入联系人邮箱' }]}
|
||
|
||
>
|
||
<Input style={{
|
||
width: 520,
|
||
height: 42,
|
||
background: '#FFF',
|
||
color: 'black'
|
||
}}
|
||
disabled={disabled}
|
||
placeholder='请输入联系人邮箱'
|
||
>
|
||
</Input>
|
||
|
||
</Form.Item>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
<div className='addPeopleFormItem'>
|
||
<div className='addPeopleItemTitle addFormItemTitle' style={{
|
||
marginTop: 6
|
||
}}>
|
||
<span className='redTitle' >*</span>联系人地址
|
||
</div>
|
||
|
||
<div style={{
|
||
|
||
}}>
|
||
<Form.Item
|
||
name="contactAddress"
|
||
rules={[{ required: true, message: '请输入联系人地址' }]}
|
||
|
||
>
|
||
<Input style={{
|
||
width: 520,
|
||
height: 42,
|
||
background: '#FFF',
|
||
color: 'black'
|
||
}}
|
||
disabled={disabled}
|
||
placeholder='请输入联系人地址'
|
||
>
|
||
</Input>
|
||
|
||
</Form.Item>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
<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: '请输入联系人邮编' }]}
|
||
|
||
>
|
||
<Input style={{
|
||
width: 520,
|
||
height: 42,
|
||
background: '#FFF',
|
||
color: 'black'
|
||
}}
|
||
disabled={disabled}
|
||
placeholder='请输入联系人邮编'
|
||
>
|
||
</Input>
|
||
|
||
</Form.Item>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</Form>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<div style={{
|
||
display: applicantType == '2' ? 'unset' : 'none'
|
||
}}>
|
||
|
||
<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,
|
||
}}>
|
||
<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',
|
||
}}>
|
||
<div style={{
|
||
display: 'flex',
|
||
|
||
}}>
|
||
<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={enterpriseLicenseChange}
|
||
|
||
headers={{ 'Auth': `Bearer ${token}` }}
|
||
disabled={enterpriseLicense.length > 0 || disabled}
|
||
>
|
||
<Spin tip="正在提交，请稍后..." size="small" spinning={upEnterpriseLicenseLoading}>
|
||
{
|
||
enterpriseLicense.length > 0 ?
|
||
<div style={{
|
||
position: 'relative',
|
||
}}>
|
||
<div className='editThreeUpBox'>
|
||
<Image
|
||
src={enterpriseLicense[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([])
|
||
formB.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={individualLicense} height={120}></Image>
|
||
<div style={{
|
||
color: 'red'
|
||
}}>
|
||
示例图片
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className='addPeopleFormItem'>
|
||
<div className='addPeopleItemTitle addFormItemTitle' style={{
|
||
marginTop: 6
|
||
}}>
|
||
<span className='redTitle' >*</span>申请人名称
|
||
</div>
|
||
|
||
<div style={{
|
||
|
||
}}>
|
||
<Form.Item
|
||
name="name"
|
||
rules={[{ required: true, message: '请输入申请人名称,申请人名称必须与公司名称一致' }]}
|
||
|
||
>
|
||
<Input style={{
|
||
width: 520,
|
||
height: 42,
|
||
background: '#FFF',
|
||
color: 'black'
|
||
}}
|
||
disabled={disabled}
|
||
placeholder='申请人名称必须与公司名称一致'
|
||
>
|
||
</Input>
|
||
|
||
</Form.Item>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
<div className='addPeopleFormItem'>
|
||
<div className='addPeopleItemTitle addFormItemTitle' style={{
|
||
marginTop: 6
|
||
}}>
|
||
<span className='redTitle' >*</span>统一社会信用代码
|
||
</div>
|
||
|
||
<div style={{
|
||
|
||
}}>
|
||
<Form.Item
|
||
name="businessLicenseIdcard"
|
||
rules={[{ required: true, message: '请输入统一社会信用代码' }]}
|
||
|
||
>
|
||
<Input style={{
|
||
width: 520,
|
||
height: 42,
|
||
background: '#FFF',
|
||
color: 'black'
|
||
}}
|
||
disabled={disabled}
|
||
placeholder='请输入统一社会信用代码'
|
||
>
|
||
</Input>
|
||
|
||
</Form.Item>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<div className='addPeopleFormItem'>
|
||
<div className='addPeopleItemTitle addFormItemTitle' style={{
|
||
marginTop: 6
|
||
}}>
|
||
<span className='redTitle' >*</span>申请人地址
|
||
<span style={{
|
||
fontSize: 14,
|
||
color: 'red',
|
||
marginTop: 10
|
||
}}>(注 ：省/自治区/直辖市请下拉选择，无需重复填写)</span>
|
||
</div>
|
||
|
||
<div style={{
|
||
display: 'flex',
|
||
}}>
|
||
<Form.Item
|
||
name="rangeAddress"
|
||
rules={[{ required: true, message: '请选择省市' }]}
|
||
>
|
||
<Cascader options={areaArray}
|
||
allowClear
|
||
style={{ height: '42px', width: 200 }}
|
||
loadData={loadCityList}
|
||
placeholder="请选择省市"
|
||
changeOnSelect
|
||
disabled={disabled}
|
||
/>
|
||
|
||
</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>
|
||
|
||
</Form.Item>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
<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: '请输入联系人姓名' }]}
|
||
|
||
>
|
||
<Input style={{
|
||
width: 520,
|
||
height: 42,
|
||
background: '#FFF',
|
||
color: 'black'
|
||
}}
|
||
disabled={disabled}
|
||
placeholder='请输入联系人姓名'
|
||
>
|
||
</Input>
|
||
|
||
</Form.Item>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
<div className='addPeopleFormItem'>
|
||
<div className='addPeopleItemTitle addFormItemTitle' style={{
|
||
marginTop: 6
|
||
}}>
|
||
<span className='redTitle' >*</span>联系人电话
|
||
</div>
|
||
|
||
<div style={{
|
||
|
||
}}>
|
||
<Form.Item
|
||
name="contactPhone"
|
||
rules={[{ required: true, message: '请输入联系人电话' }]}
|
||
|
||
>
|
||
<Input style={{
|
||
width: 520,
|
||
height: 42,
|
||
background: '#FFF',
|
||
color: 'black'
|
||
}}
|
||
disabled={disabled}
|
||
placeholder='请输入联系人电话'
|
||
>
|
||
</Input>
|
||
|
||
</Form.Item>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
<div className='addPeopleFormItem'>
|
||
<div className='addPeopleItemTitle addFormItemTitle' style={{
|
||
marginTop: 6
|
||
}}>
|
||
<span className='redTitle' >*</span>联系人邮箱
|
||
</div>
|
||
|
||
<div style={{
|
||
|
||
}}>
|
||
<Form.Item
|
||
name="contactEmail"
|
||
rules={[{ required: true, message: '请输入联系人邮箱' }]}
|
||
|
||
>
|
||
<Input style={{
|
||
width: 520,
|
||
height: 42,
|
||
background: '#FFF',
|
||
color: 'black'
|
||
}}
|
||
disabled={disabled}
|
||
placeholder='请输入联系人邮箱'
|
||
>
|
||
</Input>
|
||
|
||
</Form.Item>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
<div className='addPeopleFormItem'>
|
||
<div className='addPeopleItemTitle addFormItemTitle' style={{
|
||
marginTop: 6
|
||
}}>
|
||
<span className='redTitle' >*</span>联系人地址
|
||
</div>
|
||
|
||
<div style={{
|
||
|
||
}}>
|
||
<Form.Item
|
||
name="contactAddress"
|
||
rules={[{ required: true, message: '请输入联系人地址' }]}
|
||
|
||
>
|
||
<Input style={{
|
||
width: 520,
|
||
height: 42,
|
||
background: '#FFF',
|
||
color: 'black'
|
||
}}
|
||
disabled={disabled}
|
||
placeholder='请输入联系人地址'
|
||
>
|
||
</Input>
|
||
|
||
</Form.Item>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
<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: '请输入联系人邮编' }]}
|
||
|
||
>
|
||
<Input style={{
|
||
width: 520,
|
||
height: 42,
|
||
background: '#FFF',
|
||
color: 'black'
|
||
}}
|
||
disabled={disabled}
|
||
placeholder='请输入联系人邮编'
|
||
>
|
||
</Input>
|
||
|
||
</Form.Item>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</Form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Spin>
|
||
|
||
</Modal>
|
||
<Modal title="选择申请人"
|
||
destroyOnClose={true}
|
||
centered
|
||
open={selectPeopleModal}
|
||
// footer={null}
|
||
okText='确定'
|
||
cancelText='取消'
|
||
onCancel={() => { setSelectPeopleModal(false) }}
|
||
onOk={() => {
|
||
if (nowSelectPeopleData.name) {
|
||
setConfirmSelectPeopleData(nowSelectPeopleData)
|
||
|
||
}
|
||
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('')
|
||
}
|
||
}}
|
||
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,
|
||
})
|
||
}
|
||
|
||
}
|
||
})}
|
||
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)
|
||
}
|
||
}
|
||
}}
|
||
>
|
||
删除后无记录?确定删除吗?
|
||
</Modal>
|
||
</div >
|
||
</Spin>
|
||
)
|
||
}
|