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

1804 lines
62 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'
import { addTrademarkApplicant, trademarkApplicantList, deleteTrademarkApplicant } 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-13 16:43:21 +08:00
export default function EditThree(props: any) {
暂存
2025-06-21 10:25:29 +08:00
// 申请人信息
const [applicantData, setApplicantData] = useState({
name: '',
trademarkUserId: '',
})
const [trademarkUserId, setTrademarkUserId] = useState('')
const [selectPeopleModal, setSelectPeopleModal] = useState(false)
const [selectedRowKey, setSelectedRowKey] = useState('2');
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)
}}>编辑</Button>
<Button type="link" onClick={() => {
setDisabled(true)
setAddPeopleModal(true)
setTrademarkUserId(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 [selectKeyWords, setSelectKeyWords] = useState('');
const [tableData, setTableData] = useState<any>([])
// 获取申请人列表
const getTrademarkApplicantList = async (page: number) => {
try {
setListLoading(true);
const res: any = await trademarkApplicantList({
page,
rows: 5,
keywords: selectKeyWords
})
if (res.rows.length <= 0 && 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(() => {
const loadProvinces = async () => {
try {
// 假设传入空字符串获取省份列表
const res: any = await getCityList('0');
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);
}
}
};
loadProvinces();
}, []);
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-06-18 21:03:36 +08:00
console.log(values);
暂存
2025-06-21 10:25:29 +08:00
console.log(qualifications);
if (trademarkUserId) {
alert('编辑')
} 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('编辑')
} 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) => {
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;
}
}
暂存
2025-06-18 21:03:36 +08:00
const handleSubmit = () => {
暂存
2025-06-21 10:25:29 +08:00
// formA.submit();
暂存
2025-06-04 09:25:40 +08:00
props.setEditProcess(4);
};
暂存
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 (
<div className='editOneTwo'>
暂存
2025-06-21 10:25:29 +08:00
{contextHolder}
暂存
2025-06-04 09:25:40 +08:00
<div className='topLine'></div>
暂存
2025-06-13 16:43:21 +08:00
<div className='' style={{
暂存
2025-06-04 09:25:40 +08:00
height: height,
暂存
2025-06-13 16:43:21 +08:00
// background: 'pink'
padding: '50px 50px',
boxSizing: 'border-box',
}}>
暂存
2025-06-18 21:03:36 +08:00
<div>
<div className='editFormItem'>
<div className='editFormItemTitle'>
选择申请人<span className='redTitle' >*</span>：
</div>
<div style={{
// background:'pink',
position: 'relative'
暂存
2025-06-13 16:43:21 +08:00
}}>
暂存
2025-06-18 21:03:36 +08:00
<Input style={{
width: 300,
height: 46,
background: '#FFF',
// color: 'black'
}}
暂存
2025-06-21 10:25:29 +08:00
placeholder="选择申请人"
value={applicantData.name}
></Input>
暂存
2025-06-13 16:43:21 +08:00
<div style={{
position: 'absolute',
暂存
2025-06-18 21:03:36 +08:00
width: 290,
height: '46px',
暂存
2025-06-13 16:43:21 +08:00
top: '0',
right: '0',
// background: 'skyblue',
暂存
2025-06-18 21:03:36 +08:00
// textAlign: 'right',
// lineHeight: '42px',
暂存
2025-06-13 16:43:21 +08:00
cursor: 'pointer',
paddingRight: '10px',
color: '#1F79FF',
暂存
2025-06-21 10:25:29 +08:00
}}
onClick={() => {
setPage(1)
setSelectPeopleModal(true)
getTrademarkApplicantList(1)
}}
>
暂存
2025-06-13 16:43:21 +08:00
</div>
</div>
暂存
2025-06-18 21:03:36 +08:00
</div>
<div className='addPeopleBox' onClick={() => {
setAddPeopleModal(true)
暂存
2025-06-21 10:25:29 +08:00
setDisabled(false)
setTrademarkUserId('')
setShowBtn(true)
暂存
2025-06-18 21:03:36 +08:00
}}>
<div style={{
fontSize: 30,
暂存
2025-06-13 16:43:21 +08:00
暂存
2025-06-18 21:03:36 +08:00
}}><PlusOutlined /></div>
<div style={{
// fontSize:16
marginTop: 10
}}
暂存
2025-06-13 16:43:21 +08:00
暂存
2025-06-18 21:03:36 +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
</div>
暂存
2025-06-04 09:25:40 +08:00
<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>
暂存
2025-06-18 21:03:36 +08:00
<Modal title="新建申请人"
暂存
2025-06-13 16:43:21 +08:00
destroyOnClose
centered
暂存
2025-06-18 21:03:36 +08:00
open={addPeopleModal}
暂存
2025-06-21 10:25:29 +08:00
width={800}
footer={showBtn ? undefined : null}
onOk={() => {
if (applicantType == '1') {
formA.submit()
}
if (applicantType == '2') {
formB.submit()
}
}}
okText='保存'
cancelText='取消'
// 点击遮罩禁止关闭
maskClosable={false}
暂存
2025-06-13 16:43:21 +08:00
onCancel={() => {
暂存
2025-06-18 21:03:36 +08:00
setAddPeopleModal(false)
暂存
2025-06-21 10:25:29 +08:00
init()
暂存
2025-06-13 16:43:21 +08:00
}}>
暂存
2025-06-21 10:25:29 +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-18 21:03:36 +08:00
}}>
暂存
2025-06-21 10:25:29 +08:00
<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'>
{/* 申请人提交审核后，不支持修改类型:如需修改，请重新创建申请人 */}
暂存
2025-06-18 21:03:36 +08:00
</div>
<div style={{
暂存
2025-06-21 10:25:29 +08:00
display: applicantType == '1' ? 'unset' : 'none'
暂存
2025-06-18 21:03:36 +08:00
}}>
暂存
2025-06-21 10:25:29 +08:00
<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>
暂存
2025-06-18 21:03:36 +08:00
</div>
<div style={{
暂存
2025-06-21 10:25:29 +08:00
// display: qualifications == '1' ? 'unset' : 'none'
暂存
2025-06-18 21:03:36 +08:00
}}>
暂存
2025-06-21 10:25:29 +08:00
<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]);
}
});
暂存
2025-06-18 21:03:36 +08:00
}}
暂存
2025-06-21 10:25:29 +08:00
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>
暂存
2025-06-18 21:03:36 +08:00
暂存
2025-06-21 10:25:29 +08:00
</div>
<div style={{
marginLeft: '2px',
}}>
<div style={{
display: 'flex',
暂存
2025-06-18 21:03:36 +08:00
暂存
2025-06-21 10:25:29 +08:00
}}>
<Form.Item
name="identityPhoto"
rules={[{ required: true, message: '请上传身份证' }]}
暂存
2025-06-18 21:03:36 +08:00
暂存
2025-06-21 10:25:29 +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}
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)',
}}
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>
暂存
2025-06-13 16:43:21 +08:00
暂存
2025-06-18 21:03:36 +08:00
暂存
2025-06-21 10:25:29 +08:00
</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>
暂存
2025-06-18 21:03:36 +08:00
</div>
暂存
2025-06-21 10:25:29 +08:00
<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>
暂存
2025-06-18 21:03:36 +08:00
暂存
2025-06-21 10:25:29 +08:00
</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>
暂存
2025-06-18 21:03:36 +08:00
</div>
暂存
2025-06-21 10:25:29 +08:00
</Spin>
</Modal>
<Modal title="选择申请人"
destroyOnClose={true}
centered
open={selectPeopleModal}
// footer={null}
okText='确定'
cancelText='取消'
onCancel={() => { setSelectPeopleModal(false) }}
width={1200} >
<div>
<Button type='primary' onClick={() => {
setAddPeopleModal(true)
setDisabled(false)
setTrademarkUserId('')
setShowBtn(true)
}}>新建申请人</Button>
暂存
2025-06-18 21:03:36 +08:00
</div>
暂存
2025-06-21 10:25:29 +08:00
<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);
}
}
})}
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-13 16:43:21 +08:00
</Modal>
暂存
2025-06-21 10:25:29 +08:00
</div >
暂存
2025-06-04 09:25:40 +08:00
)
}
Reference in New Issue Copy Permalink