2482 lines
90 KiB
TypeScript
2482 lines
90 KiB
TypeScript
import { useState, useEffect } from 'react'
|
||
import { Button, Radio, Form, Input, Upload, message, Image, Spin, Modal } from 'antd'
|
||
import './EditOne.css'
|
||
import { uploadFileUrl, showImage, uploadImageAddUrl, downloadAuthBookUrl, uploadDeputeFileUrl } from '../../../../request/request'
|
||
import { trademarkBaseInfo, aiGenerateImage, fileDetail } from '../../../../request/api'
|
||
import {
|
||
// DeleteOutlined,
|
||
LoadingOutlined,
|
||
UploadOutlined
|
||
} from '@ant-design/icons';
|
||
import { useNavigate } from 'react-router-dom'; // 引入 useNavigate
|
||
const { TextArea } = Input;
|
||
import type { UploadProps } from 'antd';
|
||
export default function EditOne(props: any) {
|
||
const nav = useNavigate(); // 调用 useNavigate
|
||
const token = sessionStorage.getItem('token')
|
||
const [messageApi, contextHolder] = message.useMessage();
|
||
const [formA] = Form.useForm<any>(); // 文字商标表单
|
||
const [formB] = Form.useForm<any>(); // 图形商标表单
|
||
const [formC] = Form.useForm<any>(); // 图形商标表单
|
||
const [upFileAModal, setUpFileAModal] = useState(false)
|
||
const [upFileAType, setUpFileAType] = useState('姓名授权书')
|
||
const [fileAName, setFileAName] = useState<any>([]); //A姓名授权书
|
||
const [fileAFace, setFileAFace] = useState<any>([]); //A肖像授权书
|
||
const [fileABook, setFileABook] = useState<any>([]); //A期刊证明
|
||
const [fileA, setFileA] = useState<any>([]); //A提交文件数组
|
||
// 当以下三个发生改变时候
|
||
useEffect(() => {
|
||
setFileA([
|
||
fileAName.length > 0 ? fileAName[0].uid : '',
|
||
fileAFace.length > 0 ? fileAFace[0].uid : '',
|
||
fileABook.length > 0 ? fileABook[0].uid : '',
|
||
].filter(uid => uid !== ''))
|
||
}, [fileAName, fileAFace, fileABook])
|
||
const onUpChangeA = (e: any) => {
|
||
setUpFileAType(e.target.value)
|
||
}
|
||
|
||
const [upFileCModal, setUpFileCModal] = useState(false)
|
||
const [upFileCType, setUpFileCType] = useState('姓名授权书')
|
||
|
||
const [fileCName, setFileCName] = useState<any>([]); //C姓名授权书
|
||
const [fileCFace, setFileCFace] = useState<any>([]); //C肖像授权书
|
||
const [fileCBook, setFileCBook] = useState<any>([]); //C期刊证明
|
||
const [fileC, setFileC] = useState<any>([]); //C提交文件数组
|
||
// 当以下三个发生改变时候
|
||
useEffect(() => {
|
||
setFileC([
|
||
fileCName.length > 0 ? fileCName[0].uid : '',
|
||
fileCFace.length > 0 ? fileCFace[0].uid : '',
|
||
fileCBook.length > 0 ? fileCBook[0].uid : '',
|
||
].filter(uid => uid !== ''))
|
||
}, [fileCName, fileCFace, fileCBook])
|
||
const onUpChangeC = (e: any) => {
|
||
setUpFileCType(e.target.value)
|
||
}
|
||
const height = window.innerHeight - 350;
|
||
// 查看表单数据是否发生改变
|
||
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 [goodsType, setGoodsType] = useState('text')
|
||
// 生成方式
|
||
const [generateType, setGenerateType] = useState('1')
|
||
const handleSubmit = () => {
|
||
// console.log(form);
|
||
// console.log(goodsType);
|
||
// props.setEditProcess(2);
|
||
// 调用表单实例的 submit 方法
|
||
if (goodsType === 'text') {
|
||
formA.submit();
|
||
} else if (goodsType === 'image') {
|
||
formB.submit();
|
||
} else if (goodsType === 'text-image') {
|
||
formC.submit();
|
||
} else {
|
||
props.setEditProcess(2);
|
||
}
|
||
// props.setEditProcess(2);
|
||
|
||
|
||
};
|
||
const [disabled, setDisabled] = useState(false)
|
||
// 文字商标 若设计肖像上传得文件
|
||
// const [fileList, setFileList] = useState<any>([]);
|
||
// const handleChange: UploadProps['onChange'] = (info) => {
|
||
// const { fileList } = info;
|
||
// setFileAName(fileList);
|
||
// console.log(info.file.status);
|
||
// if (info.file.status === 'uploading') {
|
||
// // setFileList([])
|
||
// setDisabled(true)
|
||
// return;
|
||
// }
|
||
// if (info.file.status === 'done') {
|
||
|
||
|
||
// // const fileId = info.file.response.data.fileId;
|
||
// // // console.log(downloadUrl(fileId));
|
||
// setDisabled(false)
|
||
// // const url = showImage(fileId, false);
|
||
// setFileAName([
|
||
// {
|
||
// uid: info.file.response.data.fileId,
|
||
// name: info.file.response.data.fileName,
|
||
// status: 'done',
|
||
// url: showImage(info.file.response.data.fileId, false)
|
||
// }
|
||
// ])
|
||
|
||
// return;
|
||
// }
|
||
// if (info.file.status === 'error') {
|
||
// setDisabled(false)
|
||
// message.error(`上传失败`);
|
||
// return;
|
||
// }
|
||
// };
|
||
// 文字图形组合商标 若涉及肖像上传得文件
|
||
// const [fileListC, setFileListC] = useState<any>([]);
|
||
// const handleChangeC: UploadProps['onChange'] = (info) => {
|
||
// // console.log(info.file.status);
|
||
|
||
|
||
// if (info.file.status === 'uploading') {
|
||
// // setFileList([])
|
||
// return;
|
||
// }
|
||
// if (info.file.status === 'done') {
|
||
|
||
// // const fileId = info.file.response.data.fileId;
|
||
// // // console.log(downloadUrl(fileId));
|
||
|
||
// // const url = showImage(fileId, false);
|
||
// setFileListC([
|
||
// {
|
||
// uid: info.file.response.data.fileId,
|
||
// name: info.file.response.data.fileName,
|
||
// status: 'done',
|
||
// url: showImage(info.file.response.data.fileId, false)
|
||
// }
|
||
// ])
|
||
|
||
// return;
|
||
// }
|
||
// if (info.file.status === 'error') {
|
||
// message.error(`上传失败`);
|
||
// return;
|
||
// }
|
||
// };
|
||
// 自动生成的img
|
||
const [generateImgId, setGenerateImgId] = useState<any>('')
|
||
const [imgList, setImgList] = useState<any>([])
|
||
// 上传商标文字图片
|
||
const [textLodaing, setTextLodaing] = useState(false)
|
||
const upImgHandleChange: UploadProps['onChange'] = (info) => {
|
||
console.log(info.file.status);
|
||
|
||
|
||
if (info.file.status === 'uploading') {
|
||
// setFileList([])
|
||
setTextLodaing(true)
|
||
return;
|
||
}
|
||
if (info.file.status === 'done') {
|
||
console.log(info);
|
||
|
||
setTextLodaing(false)
|
||
// const fileId = info.file.response.data.fileId;
|
||
// // console.log(downloadUrl(fileId));
|
||
|
||
// const url = showImage(fileId, false);
|
||
console.log(info.file.response.data.fileId);
|
||
|
||
setImgList([
|
||
{
|
||
uid: info.file.response.data.fileId,
|
||
name: info.file.response.data.fileName,
|
||
status: 'done',
|
||
url: showImage(info.file.response.data.fileId, false)
|
||
}
|
||
])
|
||
formA.setFieldsValue({ trademarkPhoto: info.file.response.data.fileId })
|
||
|
||
return;
|
||
}
|
||
if (info.file.status === 'error') {
|
||
setTextLodaing(false)
|
||
message.error(`上传失败`);
|
||
return;
|
||
}
|
||
};
|
||
|
||
// 上传图形商标图片
|
||
const [imgLodaing, setImgLodaing] = useState(false)
|
||
const [upImglist, setUpImglist] = useState<any>([])
|
||
|
||
// 点击下一步如果需要保存的Loading
|
||
const [upLodaing, setUpLoading] = useState(false)
|
||
const onFinishA = async (values: any) => {
|
||
|
||
const dataInfo = {
|
||
...values,
|
||
trademarkType: goodsType, // 商标类型
|
||
trademarkFile: fileAName.length > 0 ? fileAName[0].uid : '', // 姓名授权
|
||
trademarkFile1: fileAFace.length > 0 ? fileAFace[0].uid : '', // 肖像授权声明书
|
||
trademarkFile2: fileABook.length > 0 ? fileABook[0].uid : '', // 期刊
|
||
trademarkPhotoType: generateType, // 1 自动生成 2 手动上传
|
||
// trademarkId: props.trademarkId ? props.trademarkId : '', // 商标id
|
||
|
||
}
|
||
// console.log(dataInfo);
|
||
// console.log(props.editOneData);
|
||
// console.log(deepCompareObjects(dataInfo, props.editOneData));
|
||
if (deepCompareObjects(dataInfo, props.editOneData)) {
|
||
props.setEditProcess(2);
|
||
return;
|
||
}
|
||
// return;
|
||
|
||
try {
|
||
setUpLoading(true)
|
||
const res: any = await trademarkBaseInfo({
|
||
...values,
|
||
trademarkFile: fileAName.length > 0 ? fileAName[0].uid : '', // 姓名授权
|
||
trademarkFile1: fileAFace.length > 0 ? fileAFace[0].uid : '', // 肖像授权声明书
|
||
trademarkFile2: fileABook.length > 0 ? fileABook[0].uid : '', // 期刊
|
||
trademarkId: props.trademarkId ? props.trademarkId : '', // 商标id
|
||
trademarkMode: props.trademarkMode, // 申请类型id
|
||
trademarkModeName: props.trademarkModeName, // 申请类型名称
|
||
trademarkPhotoType: generateType, // 1 自动生成 2 手动上传
|
||
trademarkType: goodsType, // 商标类型
|
||
})
|
||
setUpLoading(false)
|
||
props.setEditOneData({
|
||
trademarkType: goodsType, // 商标类型
|
||
trademarkName: values.trademarkName, // 商标名称
|
||
trademarkDescription: values.trademarkDescription, // 商标描述
|
||
trademarkFile: fileAName.length > 0 ? fileAName[0].uid : '', // 姓名授权
|
||
trademarkFile1: fileAFace.length > 0 ? fileAFace[0].uid : '', // 肖像授权声明书
|
||
trademarkFile2: fileABook.length > 0 ? fileABook[0].uid : '', // 期刊
|
||
trademarkPhotoType: generateType, // 1 自动生成 2 手动上传
|
||
trademarkPhoto: values.trademarkPhoto, // 商标图样
|
||
})
|
||
props.setEditProcess(2);
|
||
|
||
if (res.data) {
|
||
props.setTrademarkId(res.data)
|
||
nav(`/trademark-ai-edit/${res.data}`)
|
||
|
||
}
|
||
console.log('结果', res);
|
||
} catch (error: any) {
|
||
setUpLoading(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 {
|
||
setUpLoading(false)
|
||
}
|
||
|
||
// props.setEditProcess(2);
|
||
|
||
}
|
||
|
||
|
||
const onFinishB = async (values: any) => {
|
||
console.log(values); //trademarkDescription trademarkPhoto
|
||
console.log(upImglist); //商标图样
|
||
const dataInfo = {
|
||
...values,
|
||
trademarkType: goodsType, // 商标类型
|
||
trademarkFile: '', // 授权声明书
|
||
trademarkFile1: '',
|
||
trademarkFile2: '',
|
||
trademarkPhotoType: '2', // 1 自动生成 2 手动上传
|
||
trademarkName: '',
|
||
}
|
||
console.log(dataInfo);
|
||
console.log(props.editOneData);
|
||
// 去除 trademarkName 项
|
||
// return;
|
||
|
||
|
||
|
||
// return
|
||
if (deepCompareObjects(dataInfo, props.editOneData)) {
|
||
props.setEditProcess(2);
|
||
return;
|
||
}
|
||
try {
|
||
setUpLoading(true)
|
||
|
||
const res = await trademarkBaseInfo({
|
||
...values,
|
||
trademarkId: props.trademarkId ? props.trademarkId : '', // 商标id
|
||
trademarkMode: props.trademarkMode, // 申请类型id
|
||
trademarkModeName: props.trademarkModeName, // 申请类型名称
|
||
trademarkType: goodsType, // 商标类型
|
||
trademarkPhotoType: '2',
|
||
// trademarkName: '',
|
||
})
|
||
setUpLoading(false)
|
||
props.setEditOneData({
|
||
trademarkType: goodsType, // 商标类型
|
||
trademarkName: '', // 商标名称
|
||
trademarkDescription: values.trademarkDescription, // 商标描述
|
||
trademarkFile: '', // 授权声明书
|
||
trademarkPhotoType: '2', // 1 自动生成 2 手动上传
|
||
trademarkPhoto: values.trademarkPhoto, // 商标图样
|
||
})
|
||
props.setEditProcess(2);
|
||
if (res.data) {
|
||
props.setTrademarkId(res.data)
|
||
nav(`/trademark-ai-edit/${res.data}`)
|
||
|
||
}
|
||
|
||
} catch (error: any) {
|
||
setUpLoading(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 {
|
||
setUpLoading(false)
|
||
}
|
||
// props.setEditProcess(2);
|
||
|
||
}
|
||
// 上传文字与图形商标图片
|
||
const [imgLodaingC, setImgLodaingC] = useState(false)
|
||
const [upImglistC, setUpImglistC] = useState<any>([])
|
||
const onFinishC = async (values: any) => {
|
||
console.log(values);
|
||
// props.setEditProcess(2);
|
||
// console.log(upImglistC); //商标图样
|
||
// console.log(fileListC); // 上传的授权声明书模板
|
||
const dataInfo = {
|
||
...values,
|
||
trademarkType: goodsType, // 商标类型
|
||
trademarkFile: fileCName.length > 0 ? fileCName[0].uid : '', // 姓名授权
|
||
trademarkFile1: fileCFace.length > 0 ? fileCFace[0].uid : '', // 肖像授权声明书
|
||
trademarkFile2: fileCBook.length > 0 ? fileCBook[0].uid : '', // 期刊
|
||
trademarkPhotoType: '2', // 1 自动生成 2 手动上传
|
||
// trademarkId: props.trademarkId ? props.trademarkId : '', // 商标id
|
||
|
||
}
|
||
console.log(dataInfo);
|
||
console.log(props.editOneData);
|
||
if (deepCompareObjects(dataInfo, props.editOneData)) {
|
||
props.setEditProcess(2);
|
||
return;
|
||
}
|
||
// return
|
||
try {
|
||
setUpLoading(true)
|
||
const res = await trademarkBaseInfo({
|
||
...values,
|
||
trademarkFile: fileCName.length > 0 ? fileCName[0].uid : '', // 姓名授权
|
||
trademarkFile1: fileCFace.length > 0 ? fileCFace[0].uid : '', // 肖像授权声明书
|
||
trademarkFile2: fileCBook.length > 0 ? fileCBook[0].uid : '', // 期刊
|
||
trademarkId: props.trademarkId ? props.trademarkId : '', // 商标id
|
||
trademarkMode: props.trademarkMode, // 申请类型id
|
||
trademarkModeName: props.trademarkModeName, // 申请类型名称
|
||
|
||
// trademarkModeName: props.trademarkModeName, // 申请类型名称
|
||
trademarkType: goodsType, // 商标类型
|
||
trademarkPhotoType: '2',
|
||
})
|
||
// console.log('结果', res);
|
||
props.setEditOneData({
|
||
trademarkType: goodsType, // 商标类型
|
||
trademarkName: values.trademarkName, // 商标名称
|
||
trademarkDescription: values.trademarkDescription, // 商标描述
|
||
trademarkFile: fileCName.length > 0 ? fileCName[0].uid : '', // 姓名授权
|
||
trademarkFile1: fileCFace.length > 0 ? fileCFace[0].uid : '', // 肖像授权声明书
|
||
trademarkFile2: fileCBook.length > 0 ? fileCBook[0].uid : '', // 期刊
|
||
trademarkPhotoType: '2', // 1 自动生成 2 手动上传
|
||
trademarkPhoto: values.trademarkPhoto, // 商标图样
|
||
})
|
||
setUpLoading(false)
|
||
props.setEditProcess(2);
|
||
if (res.data) {
|
||
props.setTrademarkId(res.data)
|
||
nav(`/trademark-ai-edit/${res.data}`)
|
||
|
||
}
|
||
|
||
} catch (error: any) {
|
||
setUpLoading(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 {
|
||
setUpLoading(false)
|
||
}
|
||
|
||
}
|
||
const onChange = (e: any) => {
|
||
setGoodsType(e.target.value)
|
||
};
|
||
const generateTypeChange = (e: any) => {
|
||
setGenerateType(e.target.value)
|
||
|
||
// console.log(e.target.value);
|
||
// console.log('generateImgId', generateImgId);
|
||
// console.log('imgUrl', imgList[0]?.uid);
|
||
// return
|
||
// 给FormA表单的imgUrl赋值
|
||
// if (e.target.value == '1') {
|
||
// formA.setFieldsValue({ imgUrl: generateImgId })
|
||
// }
|
||
// if (e.target.value == '2') {
|
||
// formA.setFieldsValue({ imgUrl: imgList[0]?.uid })
|
||
// }
|
||
// formA.setFieldsValue({ trademarkPhoto: '' })
|
||
// setGenerateImgId('')
|
||
// setImgList([])
|
||
}
|
||
useEffect(() => {
|
||
if (generateType == '1') {
|
||
formA.setFieldsValue({ trademarkPhoto: generateImgId ? generateImgId : '' })
|
||
}
|
||
if (generateType == '2') {
|
||
formA.setFieldsValue({ trademarkPhoto: imgList[0]?.uid ? imgList[0]?.uid : '' })
|
||
}
|
||
}, [generateType])
|
||
const getNameAfileDetail = async (fileId: string) => {
|
||
try {
|
||
const res: any = await fileDetail(fileId)
|
||
// console.log('文件详情', res);
|
||
setFileAName([{
|
||
uid: res[0].fileId, // 手动上传的
|
||
name: res[0].fileName, // 手动上传的
|
||
status: 'done', // 手动上传的
|
||
url: showImage(res[0].fileId, 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)
|
||
}
|
||
}
|
||
}
|
||
const getFaceAfileDetail = async (fileId: string) => {
|
||
try {
|
||
const res: any = await fileDetail(fileId)
|
||
// console.log('文件详情', res);
|
||
setFileAFace([{
|
||
uid: res[0].fileId, // 手动上传的
|
||
name: res[0].fileName, // 手动上传的
|
||
status: 'done', // 手动上传的
|
||
url: showImage(res[0].fileId, 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)
|
||
}
|
||
}
|
||
}
|
||
const getBookAfileDetail = async (fileId: string) => {
|
||
try {
|
||
const res: any = await fileDetail(fileId)
|
||
// console.log('文件详情', res);
|
||
setFileABook([{
|
||
uid: res[0].fileId, // 手动上传的
|
||
name: res[0].fileName, // 手动上传的
|
||
status: 'done', // 手动上传的
|
||
url: showImage(res[0].fileId, 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)
|
||
}
|
||
}
|
||
}
|
||
const getNameCfileDetail = async (fileId: string) => {
|
||
try {
|
||
const res: any = await fileDetail(fileId)
|
||
setFileCName([{
|
||
uid: res[0].fileId, // 手动上传的
|
||
name: res[0].fileName, // 手动上传的
|
||
status: 'done', // 手动上传的
|
||
url: showImage(res[0].fileId, 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)
|
||
}
|
||
}
|
||
}
|
||
const getFaceCfileDetail = async (fileId: string) => {
|
||
try {
|
||
const res: any = await fileDetail(fileId)
|
||
// console.log('文件详情', res);
|
||
setFileCFace([{
|
||
uid: res[0].fileId, // 手动上传的
|
||
name: res[0].fileName, // 手动上传的
|
||
status: 'done', // 手动上传的
|
||
url: showImage(res[0].fileId, 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)
|
||
}
|
||
}
|
||
}
|
||
const getBookCfileDetail = async (fileId: string) => {
|
||
try {
|
||
const res: any = await fileDetail(fileId)
|
||
// console.log('文件详情', res);
|
||
setFileCBook([{
|
||
uid: res[0].fileId, // 手动上传的
|
||
name: res[0].fileName, // 手动上传的
|
||
status: 'done', // 手动上传的
|
||
url: showImage(res[0].fileId, 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)
|
||
}
|
||
}
|
||
}
|
||
useEffect(() => {
|
||
// console.log('传递one的数据', props.editOneData);
|
||
const { trademarkName, trademarkDescription, trademarkPhoto, trademarkPhotoType, trademarkType, trademarkFile, trademarkFile1, trademarkFile2 } = props.editOneData;
|
||
if (trademarkType) {
|
||
console.log(1);
|
||
|
||
// 赋值方式
|
||
setGoodsType(trademarkType)
|
||
setGenerateType(trademarkPhotoType)
|
||
|
||
if (trademarkType == 'text') {
|
||
formA.setFieldsValue({
|
||
trademarkName: trademarkName, // 商标名称
|
||
trademarkDescription: trademarkDescription, // 商标描述
|
||
trademarkPhoto: trademarkPhoto, // 商标图样
|
||
})
|
||
// setFileA([
|
||
// trademarkFile,
|
||
// trademarkFile1,
|
||
// trademarkFile2
|
||
// ].filter(uid => uid !== ''))
|
||
if (trademarkPhotoType == '1') { // 自动生成
|
||
setGenerateImgId(trademarkPhoto) // 自动生成的
|
||
}
|
||
if (trademarkPhotoType == '2') { // 自动生成
|
||
setImgList([{
|
||
uid: trademarkPhoto, // 手动上传的
|
||
name: trademarkPhoto, // 手动上传的
|
||
status: 'done', // 手动上传的
|
||
url: showImage(trademarkPhoto, false) // 手动上传的
|
||
}]) // 手动上传的
|
||
}
|
||
if (trademarkFile) {
|
||
getNameAfileDetail(trademarkFile)
|
||
}
|
||
if (trademarkFile1) {
|
||
getFaceAfileDetail(trademarkFile1)
|
||
}
|
||
if (trademarkFile2) {
|
||
getBookAfileDetail(trademarkFile2)
|
||
}
|
||
|
||
}
|
||
if (trademarkType == 'image') {
|
||
formB.setFieldsValue({
|
||
trademarkDescription: trademarkDescription, // 商标描述
|
||
trademarkPhoto: trademarkPhoto, // 商标图样
|
||
})
|
||
setUpImglist([{
|
||
uid: trademarkPhoto, // 手动上传的
|
||
name: trademarkPhoto, // 手动上传的
|
||
status: 'done', // 手动上传的
|
||
url: showImage(trademarkPhoto, false) // 手动上传的
|
||
}]) // 手动上传的
|
||
}
|
||
if (trademarkType == 'text-image') {
|
||
formC.setFieldsValue({
|
||
trademarkName: trademarkName, // 商标名称
|
||
trademarkDescription: trademarkDescription, // 商标描述
|
||
trademarkPhoto: trademarkPhoto, // 商标图样
|
||
})
|
||
setUpImglistC([{
|
||
uid: trademarkPhoto, // 手动上传的
|
||
name: trademarkPhoto, // 手动上传的
|
||
status: 'done', // 手动上传的
|
||
url: showImage(trademarkPhoto, false) // 手动上传的
|
||
}])
|
||
|
||
if (trademarkFile) {
|
||
getNameCfileDetail(trademarkFile)
|
||
}
|
||
if (trademarkFile1) {
|
||
getFaceCfileDetail(trademarkFile1)
|
||
}
|
||
if (trademarkFile2) {
|
||
getBookCfileDetail(trademarkFile2)
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
}, [props.editOneData])
|
||
return (
|
||
<Spin tip="正在提交，请稍后..." size="small" spinning={upLodaing}>
|
||
<div className='editOneBox'>
|
||
{contextHolder}
|
||
<div className='topLine'></div>
|
||
<div className='editOneFomrBox' style={{
|
||
height: height,
|
||
// background: 'pink',
|
||
padding: '10px',
|
||
boxSizing: 'border-box',
|
||
overflow: 'auto',
|
||
}}>
|
||
<div className='trademarkTop'>
|
||
<div className='trademarkTopL'>
|
||
!
|
||
</div>
|
||
<div>
|
||
<div>智能商标申请存在较高的失败风险，建议无商标申请经验的用户使用“<a>专家辅助申请</a>"或"<a>至尊无忧注册</a>"提高商标申清通过率。</div>
|
||
<div style={{
|
||
marginTop: '5px'
|
||
}}>当前仅提供文字、图形或文字图形组合商标申请;暂不支持立体商标、声音商标、证明商标、集体商标的申请。</div>
|
||
<div style={{
|
||
marginTop: '5px'
|
||
}}>商标局录入的商标信息以商标图样为准，且最终使用需与商标图样一致，请您确认手动上传的商标图样是您想要注册的商标。</div>
|
||
</div>
|
||
</div>
|
||
<div className='editFormTitle' style={{
|
||
marginTop: '20px',
|
||
}}>
|
||
基本信息
|
||
</div>
|
||
<div className='editFormItem firstItem'>
|
||
<div className='editFormItemTitle'>
|
||
商标类型<span className='redTitle'>*</span>：
|
||
</div>
|
||
<div style={{
|
||
marginLeft: '2px',
|
||
}}>
|
||
<Radio.Group onChange={onChange} value={goodsType}>
|
||
<Radio.Button value="text">文字商标</Radio.Button>
|
||
<Radio.Button value="image">图形商标</Radio.Button>
|
||
<Radio.Button value="text-image">文字图形组合商标</Radio.Button>
|
||
</Radio.Group>
|
||
</div>
|
||
<a style={{
|
||
marginLeft: '10px',
|
||
cursor: 'pointer',
|
||
}}
|
||
onClick={() => {
|
||
window.open('https://www.baidu.com/')
|
||
}}
|
||
>如何选择?</a>
|
||
</div>
|
||
<div style={{
|
||
display: goodsType === 'text' ? '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='editFormItem'>
|
||
<div className='editFormItemTitle'>
|
||
商标名称<span className='redTitle' >*</span>：
|
||
</div>
|
||
|
||
<div style={{
|
||
// background:'pink',
|
||
position: 'relative',
|
||
}}>
|
||
<Form.Item
|
||
name="trademarkName"
|
||
rules={[{ required: true, message: '请输入商标名称' }]}
|
||
>
|
||
<Input style={{
|
||
width: 600,
|
||
height: 46,
|
||
background: '#FFF',
|
||
color: 'black'
|
||
}}
|
||
placeholder="商标名称"
|
||
>
|
||
</Input>
|
||
|
||
</Form.Item>
|
||
<div style={{
|
||
position: 'absolute',
|
||
top: 70,
|
||
// textWrap: 'nowrap',
|
||
width: 800,
|
||
lineHeight: '20px',
|
||
}}>
|
||
<div style={{
|
||
display: 'flex'
|
||
}}>
|
||
若您的商标涉及他人姓名/肖像/期刊，请下载<span className='pointerBlue'
|
||
onClick={() => {
|
||
window.open(downloadAuthBookUrl())
|
||
}}
|
||
>授权声明书模板</span>，填写完盖章签字后
|
||
<div>
|
||
{/* <Spin indicator={<LoadingOutlined spin />} size="small" spinning={disabled}>
|
||
<Upload
|
||
name="file"
|
||
maxCount={1}
|
||
action={uploadDeputeFileUrl('姓名授权书')}
|
||
beforeUpload={(file) => {
|
||
const isPNG = file.type === 'image/png';
|
||
const isPDF = file.type === 'application/pdf';
|
||
const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg';
|
||
if (!isPNG && !isPDF && !isJPG) {
|
||
message.error('仅支持 PNG、PDF、JPG 格式的文件!');
|
||
}
|
||
return isPNG || isPDF || isJPG;
|
||
}}
|
||
// fileList={[]}
|
||
onChange={handleChange}
|
||
showUploadList={false}
|
||
headers={{ 'Auth': `Bearer ${token}` }}
|
||
disabled={fileList.length > 0 || disabled}
|
||
>
|
||
<span className='pointerBlue'>上传文件</span>
|
||
</Upload>
|
||
</Spin> */}
|
||
<span className='pointerBlue'
|
||
onClick={() => {
|
||
setUpFileAModal(true)
|
||
}}
|
||
>上传文件</span>
|
||
<span>
|
||
({fileA.length}/3)
|
||
</span>
|
||
|
||
</div>
|
||
{/* <div>
|
||
({fileList.length}/1)
|
||
</div>
|
||
<div>
|
||
{fileList.length > 0 ? (
|
||
<div style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
}}>
|
||
<div
|
||
style={{
|
||
maxWidth: 100,
|
||
overflow: 'hidden',
|
||
textOverflow: 'ellipsis',
|
||
whiteSpace: 'nowrap',
|
||
color: 'var(--color-blue)',
|
||
cursor: 'pointer',
|
||
textDecoration: 'underline',
|
||
}}
|
||
title={fileList[0].name}
|
||
onClick={() => {
|
||
window.open(showImage(fileList[0].uid, false))
|
||
}}>
|
||
{fileList[0].name}
|
||
</div>
|
||
<div
|
||
style={{
|
||
marginLeft: '2px',
|
||
cursor: 'pointer',
|
||
}}
|
||
onClick={() => {
|
||
setFileList([])
|
||
}}><DeleteOutlined /></div>
|
||
</div>
|
||
) : (
|
||
<></>
|
||
)}
|
||
</div> */}
|
||
|
||
</div>
|
||
<div style={{
|
||
// marginTop: '-20px',
|
||
}}>
|
||
2021年12月10日起，商标名称作为必填项提交至商标局。商标局审核人员会根据商标图样中的文字字母等实际展示的信息重新命名商标名称，并展示在商标局官网。 如何解决请参考<span className='pointerBlue'
|
||
onClick={() => {
|
||
window.open('https://www.baidu.com/')
|
||
}}
|
||
>文档</span>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
<div className='editFormItem' style={{
|
||
marginTop: '100px',
|
||
}}>
|
||
<div className='editFormItemTitle'>
|
||
商标说明<span className='redTitle'>*</span>：
|
||
</div>
|
||
|
||
|
||
<Form.Item
|
||
name="trademarkDescription"
|
||
rules={[{ required: true, message: '请输入商标说明' }]}
|
||
>
|
||
<TextArea style={{
|
||
width: 600,
|
||
height: 150,
|
||
background: '#FFF',
|
||
color: 'black',
|
||
resize: 'none'
|
||
}}
|
||
placeholder="例:商标由中文“**”、英文“**”及图形构成，无特殊含义。"
|
||
>
|
||
</TextArea>
|
||
|
||
</Form.Item>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
<div className='editFormItem' style={{
|
||
marginTop: '120px',
|
||
}}>
|
||
<div className='editFormItemTitle'>
|
||
商标图样<span className='redTitle'>*</span>：
|
||
</div>
|
||
<div style={{
|
||
marginLeft: '2px',
|
||
}}>
|
||
<Radio.Group onChange={generateTypeChange} value={generateType}>
|
||
<Radio value="1">自动生成</Radio>
|
||
<Radio value="2">手动上传</Radio>
|
||
</Radio.Group>
|
||
</div>
|
||
</div>
|
||
<div style={{
|
||
display: 'flex',
|
||
}}>
|
||
<div style={{
|
||
marginLeft: '90px',
|
||
// background:'pink',
|
||
width: 200,
|
||
position: 'relative',
|
||
}}>
|
||
|
||
<Form.Item
|
||
name="trademarkPhoto"
|
||
rules={[{ required: true, message: generateType == '1' ? '请点击生成按钮生成商标图样' : '请上传商标图样' }]}
|
||
>
|
||
<TextArea style={{
|
||
width: 200,
|
||
height: 100,
|
||
background: '#FFF',
|
||
color: 'black',
|
||
resize: 'none'
|
||
}}
|
||
// value={generateType == '1' ? generateImgId : imgList[0]?.uid}
|
||
placeholder="商标说明"
|
||
>
|
||
</TextArea>
|
||
|
||
</Form.Item>
|
||
<div style={{
|
||
display: generateType == '1' && generateImgId == '' ? 'unset' : 'none',
|
||
width: 200,
|
||
height: 100,
|
||
background: 'white',
|
||
color: 'black',
|
||
position: 'absolute',
|
||
top: 0,
|
||
left: 0,
|
||
lineHeight: '100px',
|
||
textAlign: 'center',
|
||
fontSize: '20px',
|
||
border: '1px dashed #d6d6d6',
|
||
}}>
|
||
暂无图片
|
||
</div>
|
||
{/* 自动生成图片 */}
|
||
<div style={{
|
||
display: generateType == '1' && generateImgId != '' ? 'unset' : 'none',
|
||
width: 200,
|
||
height: 100,
|
||
background: 'white',
|
||
color: 'black',
|
||
position: 'absolute',
|
||
top: 0,
|
||
left: 0,
|
||
lineHeight: '100px',
|
||
textAlign: 'center',
|
||
fontSize: '20px',
|
||
border: '1px dashed #d6d6d6',
|
||
}}>
|
||
<div style={{
|
||
width: '100%',
|
||
height: '100%',
|
||
// background:'pink',
|
||
overflow: 'hidden',
|
||
display: 'flex',
|
||
justifyContent: 'center',
|
||
alignItems: 'flex-start',
|
||
}}>
|
||
<Image src={showImage(generateImgId, false)} height={100} style={{ maxWidth: 200, height: '100%' }} ></Image>
|
||
</div>
|
||
</div>
|
||
{/* 手动上传图片 */}
|
||
<div style={{
|
||
display: generateType == '2' && imgList.length > 0 ? 'unset' : 'none',
|
||
width: 200,
|
||
height: 100,
|
||
background: 'white',
|
||
color: 'black',
|
||
position: 'absolute',
|
||
top: 0,
|
||
left: 0,
|
||
lineHeight: '100px',
|
||
textAlign: 'center',
|
||
fontSize: '20px',
|
||
border: '1px dashed #d6d6d6',
|
||
}}>
|
||
|
||
<div style={{
|
||
width: '100%',
|
||
height: '100%',
|
||
// background:'pink',
|
||
overflow: 'hidden',
|
||
display: 'flex',
|
||
justifyContent: 'center',
|
||
alignItems: 'flex-start',
|
||
}}>
|
||
<Image src={imgList[0]?.url} height={100} style={{ maxWidth: 200, height: '100%' }} ></Image>
|
||
</div>
|
||
<div style={{
|
||
position: 'absolute',
|
||
bottom: 0,
|
||
right: -50,
|
||
fontSize: '16px',
|
||
lineHeight: '16px',
|
||
// background:'pink',
|
||
cursor: 'pointer',
|
||
padding: '5px',
|
||
color: 'red'
|
||
}}
|
||
onClick={() => {
|
||
setImgList([])
|
||
formA.setFieldsValue({ trademarkPhoto: '' })
|
||
}}
|
||
>删除</div>
|
||
|
||
</div>
|
||
|
||
|
||
<div style={{
|
||
display: generateType == '2' && imgList.length <= 0 ? 'unset' : 'none',
|
||
width: 200,
|
||
height: 100,
|
||
background: 'white',
|
||
color: 'black',
|
||
position: 'absolute',
|
||
top: 0,
|
||
left: 0,
|
||
lineHeight: '100px',
|
||
textAlign: 'center',
|
||
fontSize: '20px',
|
||
border: '1px dashed #d6d6d6',
|
||
}}>
|
||
<Spin tip="正在处理，请稍后..." size="small" spinning={textLodaing}>
|
||
<Upload
|
||
name="file"
|
||
maxCount={1}
|
||
action={uploadFileUrl()}
|
||
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;
|
||
}}
|
||
// fileList={[]}
|
||
onChange={upImgHandleChange}
|
||
showUploadList={false}
|
||
headers={{ 'Auth': `Bearer ${token}` }}
|
||
disabled={imgList.length > 0}
|
||
>
|
||
<div style={{
|
||
width: 200,
|
||
height: 100,
|
||
background: 'white',
|
||
color: 'black',
|
||
|
||
lineHeight: '100px',
|
||
textAlign: 'center',
|
||
fontSize: '20px',
|
||
border: '1px dashed #d6d6d6',
|
||
}}>
|
||
上传图片
|
||
</div>
|
||
</Upload>
|
||
</Spin>
|
||
</div>
|
||
|
||
</div>
|
||
<Button type="primary"
|
||
onClick={async () => {
|
||
// setGenerateImgId('http://gips2.baidu.com/it/u=1674525583,3037683813&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024')
|
||
// // 给FormA表单的imgUrl赋值
|
||
// formA.setFieldsValue({
|
||
// trademarkPhoto: 'http://gips2.baidu.com/it/u=1674525583,3037683813&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024'
|
||
// })
|
||
if (!formA.getFieldValue('trademarkName')) {
|
||
message.error('请先输入商标名称')
|
||
return;
|
||
} else {
|
||
console.log('正在生成');
|
||
// try {
|
||
// // 创建一个 canvas 元素
|
||
// const canvas = document.createElement('canvas');
|
||
// const ctx = canvas.getContext('2d');
|
||
// if (!ctx) {
|
||
// message.error('无法获取 canvas 上下文');
|
||
// return;
|
||
// }
|
||
// // 设置 canvas 尺寸
|
||
// canvas.width = 500;
|
||
// canvas.height = 250;
|
||
// // 设置背景颜色为白色
|
||
// ctx.fillStyle = '#FFFFFF';
|
||
// ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||
// // 设置文字样式
|
||
// ctx.fillStyle = '#000000';
|
||
// // 设置字体为斜体、粗体，大小为 28px，字体族为 "SimSun"（宋体）
|
||
// ctx.font = 'bold 100px SimSun';
|
||
// // ctx.font = '24px Arial';
|
||
// ctx.textAlign = 'center';
|
||
// ctx.textBaseline = 'middle';
|
||
// // 在画布中心绘制文字
|
||
// ctx.fillText(formA.getFieldValue('trademarkName'), canvas.width / 2, canvas.height / 2);
|
||
// // 将 canvas 转换为图片 URL
|
||
// const imageUrl = canvas.toDataURL('image/png');
|
||
// // 设置生成的图片 ID 和表单值
|
||
// setGenerateImgId(imageUrl);
|
||
// // formA.setFieldsValue({
|
||
// // trademarkPhoto: imageUrl
|
||
// // });
|
||
// // 将 canvas 转换为 Blob 对象
|
||
// const blob = await new Promise<Blob | null>((resolve) => {
|
||
// canvas.toBlob((blob) => {
|
||
// resolve(blob);
|
||
// }, 'image/png');
|
||
// });
|
||
|
||
// if (!blob) {
|
||
// message.error('无法将 canvas 转换为图片');
|
||
// return;
|
||
// }
|
||
|
||
// // 创建 FormData 对象
|
||
// const formData = new FormData();
|
||
// formData.append('file', blob, 'generated_image.png');
|
||
|
||
// // 获取上传地址
|
||
// const uploadUrl = uploadFileUrl();
|
||
|
||
// // 发送上传请求
|
||
// const response = await fetch(uploadUrl, {
|
||
// method: 'POST',
|
||
// headers: {
|
||
// 'Auth': `Bearer ${token}`
|
||
// },
|
||
// body: formData
|
||
// });
|
||
|
||
// if (!response.ok) {
|
||
// throw new Error('图片上传失败');
|
||
// }
|
||
|
||
// const result = await response.json();
|
||
// const fileId = result.data.fileId; // 假设响应中的 fileId 是成功后的 id
|
||
|
||
// // 设置生成的图片 ID 和表单值
|
||
// setGenerateImgId(showImage(fileId, false));
|
||
// formA.setFieldsValue({
|
||
// trademarkPhoto: fileId
|
||
// });
|
||
// } catch (error) {
|
||
// console.error('生成图片失败:', error);
|
||
// message.error('生成图片失败，请稍后重试');
|
||
// }
|
||
try {
|
||
const res: any = await aiGenerateImage({
|
||
title: formA.getFieldValue('trademarkName'),
|
||
});
|
||
console.log('结果', res);
|
||
setGenerateImgId(res.fileId);
|
||
formA.setFieldsValue({
|
||
trademarkPhoto: res.fileId
|
||
})
|
||
} catch (error: any) {
|
||
// setLoading(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 {
|
||
// setLoading(false)
|
||
}
|
||
}
|
||
}}
|
||
style={{
|
||
marginTop: '70px',
|
||
marginLeft: '10px',
|
||
width: 150,
|
||
display: generateType == '1' ? 'unset' : 'none',
|
||
}}>立即生成</Button>
|
||
</div>
|
||
</Form>
|
||
|
||
</div>
|
||
|
||
|
||
<div
|
||
style={{
|
||
display: goodsType === 'image' ? '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='editFormItem' style={{
|
||
marginTop: '20px',
|
||
}}>
|
||
<div className='editFormItemTitle'>
|
||
商标说明<span className='redTitle'>*</span>：
|
||
</div>
|
||
|
||
|
||
<Form.Item
|
||
name="trademarkDescription"
|
||
rules={[{ required: true, message: '请输入商标说明' }]}
|
||
>
|
||
<TextArea style={{
|
||
width: 600,
|
||
height: 150,
|
||
background: '#FFF',
|
||
color: 'black',
|
||
resize: 'none'
|
||
}}
|
||
placeholder="例:商标由中文“**”、英文“**”及图形构成，无特殊含义。"
|
||
>
|
||
</TextArea>
|
||
|
||
</Form.Item>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
<div className='editFormItem' style={{
|
||
marginTop: '130px',
|
||
}}>
|
||
<div className='editFormItemTitle'>
|
||
商标图样<span className='redTitle'>*</span>：
|
||
</div>
|
||
<div style={{
|
||
// marginLeft: '90px',
|
||
// background:'pink',
|
||
width: 200,
|
||
position: 'relative',
|
||
}}>
|
||
<Form.Item
|
||
name="trademarkPhoto"
|
||
rules={[{ required: true, message: '请上传商标图样' }]}
|
||
>
|
||
<TextArea style={{
|
||
width: 200,
|
||
height: 100,
|
||
background: '#FFF',
|
||
color: 'black',
|
||
resize: 'none'
|
||
}}
|
||
// value={generateType == '1' ? generateImgId : imgList[0]?.uid}
|
||
// placeholder="商标说明"
|
||
>
|
||
</TextArea>
|
||
|
||
</Form.Item>
|
||
<div style={{
|
||
display: upImglist.length <= 0 ? 'unset' : 'none',
|
||
width: 200,
|
||
height: 100,
|
||
background: 'white',
|
||
color: 'black',
|
||
position: 'absolute',
|
||
top: 0,
|
||
left: 0,
|
||
lineHeight: '100px',
|
||
textAlign: 'center',
|
||
fontSize: '20px',
|
||
border: '1px dashed #d6d6d6',
|
||
}}>
|
||
<Spin tip="正在处理，请稍后..." size="small" spinning={imgLodaing}>
|
||
<Upload
|
||
name="file"
|
||
maxCount={1}
|
||
action={uploadImageAddUrl()}
|
||
beforeUpload={(file) => {
|
||
// const isPNG = file.type === 'image/png';
|
||
const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg';
|
||
if (!isJPG) {
|
||
// console.error('仅支持 PNG、PDF、JPG 格式的文件!');
|
||
message.error('仅支持 JPG 格式的文件!');
|
||
}
|
||
return isJPG;
|
||
}}
|
||
// fileList={[]}
|
||
onChange={(info) => {
|
||
if (info.file.status === 'uploading') {
|
||
// setFileList([])
|
||
setImgLodaing(true)
|
||
return;
|
||
}
|
||
if (info.file.status === 'done') {
|
||
setImgLodaing(false)
|
||
// const fileId = info.file.response.data.fileId;
|
||
// // console.log(downloadUrl(fileId));
|
||
|
||
// const url = showImage(fileId, false);
|
||
console.log(info.file.response.data.fileId);
|
||
|
||
setUpImglist([
|
||
{
|
||
uid: info.file.response.data.fileId,
|
||
name: info.file.response.data.fileName,
|
||
status: 'done',
|
||
url: showImage(info.file.response.data.fileId, false)
|
||
}
|
||
])
|
||
formB.setFieldsValue({ trademarkPhoto: info.file.response.data.fileId })
|
||
|
||
return;
|
||
}
|
||
if (info.file.status === 'error') {
|
||
setImgLodaing(false)
|
||
// message.error(`上传失败`);
|
||
// console.log(info.file.response.msg? info.file.response.msg : '上传失败');
|
||
|
||
message.error(info.file.response.msg ? info.file.response.msg : '上传失败');
|
||
return;
|
||
}
|
||
}}
|
||
showUploadList={false}
|
||
headers={{ 'Auth': `Bearer ${token}` }}
|
||
disabled={upImglist.length > 0}
|
||
>
|
||
<div style={{
|
||
width: 200,
|
||
height: 100,
|
||
background: 'white',
|
||
color: 'black',
|
||
|
||
lineHeight: '100px',
|
||
textAlign: 'center',
|
||
fontSize: '20px',
|
||
border: '1px dashed #d6d6d6',
|
||
}}>
|
||
上传图片
|
||
</div>
|
||
</Upload>
|
||
</Spin>
|
||
</div>
|
||
<div style={{
|
||
display: upImglist.length > 0 ? 'unset' : 'none',
|
||
width: 200,
|
||
height: 100,
|
||
background: 'white',
|
||
color: 'black',
|
||
position: 'absolute',
|
||
top: 0,
|
||
left: 0,
|
||
lineHeight: '100px',
|
||
textAlign: 'center',
|
||
fontSize: '20px',
|
||
border: '1px dashed #d6d6d6',
|
||
}}>
|
||
|
||
<div style={{
|
||
width: '100%',
|
||
height: '100%',
|
||
// background:'pink',
|
||
overflow: 'hidden',
|
||
display: 'flex',
|
||
justifyContent: 'center',
|
||
alignItems: 'flex-start',
|
||
}}>
|
||
<Image src={upImglist[0]?.url} height={100} style={{ maxWidth: 200, height: '100%' }} ></Image>
|
||
</div>
|
||
<div style={{
|
||
position: 'absolute',
|
||
bottom: 0,
|
||
right: -50,
|
||
fontSize: '16px',
|
||
lineHeight: '16px',
|
||
// background:'pink',
|
||
cursor: 'pointer',
|
||
padding: '5px',
|
||
color: 'red'
|
||
}}
|
||
onClick={() => {
|
||
setUpImglist([])
|
||
formB.setFieldsValue({ trademarkPhoto: '' })
|
||
}}
|
||
>删除</div>
|
||
|
||
</div>
|
||
<div style={{
|
||
textWrap: 'nowrap',
|
||
lineHeight: '20px',
|
||
// background: 'pink'
|
||
}}>
|
||
<div>图片尺寸:500*500至1500*1500</div>
|
||
<div>图片大小:200kb内</div>
|
||
<div>图片格式:仅支持JPG格式</div>
|
||
<div style={{
|
||
color: 'red'
|
||
}}>上传商标图样颜色为 黑白，注册成功使用时，可任意修改商标图样颜色使用</div>
|
||
<div style={{
|
||
color: 'red'
|
||
}}>上传商标图样颜色为 彩色，注册成功使用时，不能修改商标图样颜色使用</div>
|
||
<div style={{
|
||
color: 'red'
|
||
}}>建议上传商标图样颜色:黑白</div>
|
||
<div style={{
|
||
height: '30px',
|
||
}}></div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
</Form>
|
||
</div>
|
||
|
||
|
||
|
||
<div
|
||
style={{
|
||
display: goodsType === 'text-image' ? 'unset' : 'none',
|
||
}}>
|
||
<Form
|
||
name="FormC"
|
||
form={formC}
|
||
onFinish={onFinishC}
|
||
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='editFormItem'>
|
||
<div className='editFormItemTitle'>
|
||
商标名称<span className='redTitle' >*</span>：
|
||
</div>
|
||
|
||
<div style={{
|
||
// background:'pink',
|
||
position: 'relative',
|
||
}}>
|
||
<Form.Item
|
||
name="trademarkName"
|
||
rules={[{ required: true, message: '请输入商标名称' }]}
|
||
>
|
||
<Input style={{
|
||
width: 600,
|
||
height: 46,
|
||
background: '#FFF',
|
||
color: 'black'
|
||
}}
|
||
placeholder="商标名称"
|
||
>
|
||
</Input>
|
||
|
||
</Form.Item>
|
||
<div style={{
|
||
position: 'absolute',
|
||
top: 70,
|
||
// textWrap: 'nowrap',
|
||
width: 800,
|
||
lineHeight: '20px',
|
||
}}>
|
||
<div style={{
|
||
display: 'flex'
|
||
}}>
|
||
若您的商标涉及他人姓名/肖像/期刊，请下载<span className='pointerBlue'
|
||
onClick={() => {
|
||
window.open(downloadAuthBookUrl())
|
||
}}
|
||
>授权声明书模板</span>，填写完盖章签字后
|
||
<div>
|
||
{/* <Upload
|
||
name="file"
|
||
maxCount={1}
|
||
action={uploadFileUrl()}
|
||
beforeUpload={(file) => {
|
||
const isPNG = file.type === 'image/png';
|
||
const isPDF = file.type === 'application/pdf';
|
||
const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg';
|
||
if (!isPNG && !isPDF && !isJPG) {
|
||
message.error('仅支持 PNG、PDF、JPG 格式的文件!');
|
||
}
|
||
return isPNG || isPDF || isJPG;
|
||
}}
|
||
onChange={handleChangeC}
|
||
showUploadList={false}
|
||
headers={{ 'Auth': `Bearer ${token}` }}
|
||
disabled={fileListC.length > 0}
|
||
>
|
||
<span className='pointerBlue'>上传文件</span>
|
||
</Upload> */}
|
||
<span className='pointerBlue' onClick={() => {
|
||
setUpFileCModal(true)
|
||
}}>上传文件</span>
|
||
<span>
|
||
({fileC.length}/3)
|
||
</span>
|
||
|
||
</div>
|
||
{/* <div >
|
||
({fileListC.length}/1)
|
||
</div>
|
||
<div>
|
||
{fileListC.length > 0 ? (
|
||
<div style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
}}>
|
||
<div
|
||
style={{
|
||
maxWidth: 100,
|
||
overflow: 'hidden',
|
||
textOverflow: 'ellipsis',
|
||
whiteSpace: 'nowrap',
|
||
color: 'var(--color-blue)',
|
||
cursor: 'pointer',
|
||
textDecoration: 'underline',
|
||
}}
|
||
title={fileListC[0].name}
|
||
onClick={() => {
|
||
window.open(showImage(fileListC[0].uid, false))
|
||
}}>
|
||
{fileListC[0].name}
|
||
</div>
|
||
<div
|
||
style={{
|
||
marginLeft: '2px',
|
||
cursor: 'pointer',
|
||
}}
|
||
onClick={() => {
|
||
setFileListC([])
|
||
}}><DeleteOutlined /></div>
|
||
</div>
|
||
) : (
|
||
<></>
|
||
)}
|
||
</div> */}
|
||
|
||
</div>
|
||
<div style={{
|
||
// marginTop: '-20px',
|
||
}}>
|
||
2021年12月10日起，商标名称作为必填项提交至商标局。商标局审核人员会根据商标图样中的文字字母等实际展示的信息重新命名商标名称，并展示在商标局官网。 如何解决请参考<span className='pointerBlue'
|
||
onClick={() => {
|
||
window.open('https://www.baidu.com/')
|
||
}}
|
||
>文档</span>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
<div className='editFormItem' style={{
|
||
marginTop: '100px',
|
||
}}>
|
||
<div className='editFormItemTitle'>
|
||
商标说明<span className='redTitle'>*</span>：
|
||
</div>
|
||
|
||
|
||
<Form.Item
|
||
name="trademarkDescription"
|
||
rules={[{ required: true, message: '请输入商标说明' }]}
|
||
>
|
||
<TextArea style={{
|
||
width: 600,
|
||
height: 150,
|
||
background: '#FFF',
|
||
color: 'black',
|
||
resize: 'none'
|
||
}}
|
||
placeholder="例:商标由中文“**”、英文“**”及图形构成，无特殊含义。"
|
||
>
|
||
</TextArea>
|
||
|
||
</Form.Item>
|
||
|
||
|
||
|
||
</div>
|
||
<div className='editFormItem' style={{
|
||
marginTop: '130px',
|
||
}}>
|
||
<div className='editFormItemTitle'>
|
||
商标图样<span className='redTitle'>*</span>：
|
||
</div>
|
||
<div style={{
|
||
// marginLeft: '90px',
|
||
// background:'pink',
|
||
width: 200,
|
||
position: 'relative',
|
||
}}>
|
||
<Form.Item
|
||
name="trademarkPhoto"
|
||
rules={[{ required: true, message: '请上传商标图样' }]}
|
||
>
|
||
<TextArea style={{
|
||
width: 200,
|
||
height: 100,
|
||
background: '#FFF',
|
||
color: 'black',
|
||
resize: 'none'
|
||
}}
|
||
// value={generateType == '1' ? generateImgId : imgList[0]?.uid}
|
||
// placeholder="商标说明"
|
||
>
|
||
</TextArea>
|
||
|
||
</Form.Item>
|
||
<div style={{
|
||
display: upImglistC.length <= 0 ? 'unset' : 'none',
|
||
width: 200,
|
||
height: 100,
|
||
background: 'white',
|
||
color: 'black',
|
||
position: 'absolute',
|
||
top: 0,
|
||
left: 0,
|
||
lineHeight: '100px',
|
||
textAlign: 'center',
|
||
fontSize: '20px',
|
||
border: '1px dashed #d6d6d6',
|
||
}}>
|
||
<Spin tip="正在处理，请稍后..." size="small" spinning={imgLodaingC}>
|
||
<Upload
|
||
name="file"
|
||
maxCount={1}
|
||
action={uploadImageAddUrl()}
|
||
beforeUpload={(file) => {
|
||
// const isPNG = file.type === 'image/png';
|
||
const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg';
|
||
if (!isJPG) {
|
||
// console.error('仅支持 PNG、PDF、JPG 格式的文件!');
|
||
message.error('仅支持 JPG 格式的文件!');
|
||
}
|
||
return isJPG;
|
||
|
||
}}
|
||
// 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 false;
|
||
// }
|
||
|
||
// // 使用 Promise 来处理图片尺寸的读取
|
||
// return new Promise((resolve) => {
|
||
// // 创建 Image 实例，TypeScript 环境下可使用 HTMLImageElement 明确类型
|
||
// const img: HTMLImageElement = new Image();
|
||
// img.src = URL.createObjectURL(file);
|
||
// img.onload = () => {
|
||
// const width = img.naturalWidth;
|
||
// const height = img.naturalHeight;
|
||
// if (width >= 500 && width <= 1500 && height >= 500 && height <= 1500) {
|
||
// resolve(true);
|
||
// } else {
|
||
// message.error('图片尺寸需在 500*500 至 1500*1500 之间');
|
||
// resolve(false);
|
||
// }
|
||
// URL.revokeObjectURL(img.src);
|
||
// };
|
||
// img.onerror = () => {
|
||
// message.error('无法读取图片尺寸');
|
||
// resolve(false);
|
||
// URL.revokeObjectURL(img.src);
|
||
// };
|
||
// });
|
||
// }}
|
||
// fileList={[]}
|
||
onChange={(info) => {
|
||
// console.log(info.file.status);
|
||
|
||
if (info.file.status === 'uploading') {
|
||
// setFileList([])
|
||
setImgLodaingC(true)
|
||
return;
|
||
}
|
||
if (info.file.status === 'done') {
|
||
setImgLodaingC(false)
|
||
// const fileId = info.file.response.data.fileId;
|
||
// // console.log(downloadUrl(fileId));
|
||
|
||
// const url = showImage(fileId, false);
|
||
console.log(info);
|
||
// console.log(info.file.response.data.fileId);
|
||
|
||
setUpImglistC([
|
||
{
|
||
uid: info.file.response.data.fileId,
|
||
name: info.file.response.data.fileName,
|
||
status: 'done',
|
||
url: showImage(info.file.response.data.fileId, false)
|
||
}
|
||
])
|
||
formC.setFieldsValue({ trademarkPhoto: info.file.response.data.fileId })
|
||
|
||
return;
|
||
}
|
||
if (info.file.status === 'error') {
|
||
setImgLodaingC(false)
|
||
// message.error(`上传失败`);
|
||
message.error(info.file.response.msg ? info.file.response.msg : '上传失败');
|
||
return;
|
||
}
|
||
}}
|
||
showUploadList={false}
|
||
headers={{ 'Auth': `Bearer ${token}` }}
|
||
disabled={upImglistC.length > 0}
|
||
>
|
||
<div style={{
|
||
width: 200,
|
||
height: 100,
|
||
background: 'white',
|
||
color: 'black',
|
||
|
||
lineHeight: '100px',
|
||
textAlign: 'center',
|
||
fontSize: '20px',
|
||
border: '1px dashed #d6d6d6',
|
||
}}>
|
||
上传图片
|
||
</div>
|
||
</Upload>
|
||
</Spin>
|
||
</div>
|
||
<div style={{
|
||
display: upImglistC.length > 0 ? 'unset' : 'none',
|
||
width: 200,
|
||
height: 100,
|
||
background: 'white',
|
||
color: 'black',
|
||
position: 'absolute',
|
||
top: 0,
|
||
left: 0,
|
||
lineHeight: '100px',
|
||
textAlign: 'center',
|
||
fontSize: '20px',
|
||
border: '1px dashed #d6d6d6',
|
||
}}>
|
||
|
||
<div style={{
|
||
width: '100%',
|
||
height: '100%',
|
||
// background:'pink',
|
||
overflow: 'hidden',
|
||
display: 'flex',
|
||
justifyContent: 'center',
|
||
alignItems: 'flex-start',
|
||
}}>
|
||
<Image src={upImglistC[0]?.url} height={100} style={{ maxWidth: 200, height: '100%' }} ></Image>
|
||
</div>
|
||
<div style={{
|
||
position: 'absolute',
|
||
bottom: 0,
|
||
right: -50,
|
||
fontSize: '16px',
|
||
lineHeight: '16px',
|
||
// background:'pink',
|
||
cursor: 'pointer',
|
||
padding: '5px',
|
||
color: 'red'
|
||
}}
|
||
onClick={() => {
|
||
setUpImglistC([])
|
||
formC.setFieldsValue({ trademarkPhoto: '' })
|
||
}}
|
||
>删除</div>
|
||
|
||
</div>
|
||
<div style={{
|
||
textWrap: 'nowrap',
|
||
lineHeight: '20px',
|
||
// background: 'pink'
|
||
}}>
|
||
<div>图片尺寸:500*500至1500*1500</div>
|
||
<div>图片大小:200kb内</div>
|
||
<div>图片格式:仅支持JPG格式</div>
|
||
<div style={{
|
||
color: 'red'
|
||
}}>上传商标图样颜色为 黑白，注册成功使用时，可任意修改商标图样颜色使用</div>
|
||
<div style={{
|
||
color: 'red'
|
||
}}>上传商标图样颜色为 彩色，注册成功使用时，不能修改商标图样颜色使用</div>
|
||
<div style={{
|
||
color: 'red'
|
||
}}>建议上传商标图样颜色:黑白</div>
|
||
<div style={{
|
||
height: '30px',
|
||
}}></div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
</Form>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
</div >
|
||
<div className='topLine'></div>
|
||
<div style={{
|
||
marginTop: '8px',
|
||
display: 'flex',
|
||
justifyContent: 'flex-end',
|
||
}}>
|
||
<Button
|
||
type='primary'
|
||
style={{
|
||
width: '100px',
|
||
height: '40px',
|
||
borderRadius: '5px',
|
||
}}
|
||
onClick={() => {
|
||
handleSubmit()
|
||
}}
|
||
>下一步</Button>
|
||
</div>
|
||
</div >
|
||
<Modal title="上传授权书"
|
||
centered
|
||
// okText='确认'
|
||
// cancelText='取消'
|
||
destroyOnClose={true}
|
||
open={upFileAModal}
|
||
// onOk={() => {
|
||
// handleSubmit()
|
||
// }}
|
||
onClose={() => {
|
||
setUpFileAModal(false)
|
||
}}
|
||
footer={[
|
||
<Button key="ok" type="primary" onClick={() => {
|
||
setUpFileAModal(false)
|
||
}}>
|
||
确认
|
||
</Button>
|
||
]}
|
||
// footer={null}
|
||
onCancel={() => { setUpFileAModal(false) }} >
|
||
<Spin indicator={<LoadingOutlined spin />} tip='正在上传' size="small" spinning={disabled}>
|
||
|
||
<div style={{
|
||
display: 'flex',
|
||
paddingTop: 20,
|
||
}}>
|
||
<div className='editFormItemTitle' style={{
|
||
width: 70
|
||
}}>类型</div>
|
||
<div>
|
||
<Radio.Group onChange={onUpChangeA} value={upFileAType}>
|
||
<Radio.Button value="姓名授权书">姓名授权书</Radio.Button>
|
||
<Radio.Button value="肖像授权书">肖像授权书</Radio.Button>
|
||
<Radio.Button value="期刊证明">期刊证明</Radio.Button>
|
||
</Radio.Group>
|
||
<div style={{
|
||
marginTop: 5,
|
||
color: 'rgb(161, 161, 161)'
|
||
|
||
|
||
}}>请选择对应的授权文件类型</div>
|
||
</div>
|
||
</div>
|
||
<div style={{
|
||
marginTop: 20,
|
||
display: 'flex',
|
||
// background: 'pink'
|
||
}}>
|
||
<div className='editFormItemTitle' style={{
|
||
width: 70,
|
||
marginTop: 5
|
||
}}>上传文件</div>
|
||
{/* 姓名授权书 */}
|
||
<div style={{
|
||
display: upFileAType == '姓名授权书' ? 'unset' : 'none',
|
||
maxWidth: '200px'
|
||
}}>
|
||
<div style={{
|
||
height: 65,
|
||
}}>
|
||
<Upload
|
||
name="file"
|
||
action={uploadDeputeFileUrl('姓名授权书')}
|
||
beforeUpload={(file) => {
|
||
|
||
const isPDF = file.type === 'application/pdf';
|
||
const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg';
|
||
if (!isPDF && !isJPG) {
|
||
message.error('仅支持 PNG、PDF、JPG 格式的文件!');
|
||
|
||
}
|
||
return isPDF || isJPG;
|
||
}}
|
||
fileList={fileAName}
|
||
onChange={(info) => {
|
||
|
||
if (info.file.status === 'uploading') {
|
||
const { fileList } = info;
|
||
setFileAName(fileList);
|
||
setDisabled(true)
|
||
return;
|
||
}
|
||
if (info.file.status === 'done') {
|
||
// console.log(info.file.response.data);
|
||
setFileAName([
|
||
{
|
||
uid: info.file.response.data.fileId,
|
||
name: info.file.response.data.fileName,
|
||
status: 'done',
|
||
url: showImage(info.file.response.data.fileId, false)
|
||
}
|
||
])
|
||
setDisabled(false)
|
||
|
||
|
||
}
|
||
if (info.file.status === 'error') {
|
||
setDisabled(false)
|
||
message.error(info.file.response.msg);
|
||
setFileAName([])
|
||
}
|
||
|
||
|
||
}}
|
||
onRemove={() => {
|
||
setFileAName([])
|
||
|
||
}}
|
||
|
||
headers={{ 'Auth': `Bearer ${token}` }}
|
||
>
|
||
<Button icon={<UploadOutlined />}
|
||
disabled={fileAName.length > 0}
|
||
|
||
style={{
|
||
marginTop: '4px'
|
||
}}
|
||
>上传姓名授权书</Button>
|
||
</Upload>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
{/* 肖像授权书 */}
|
||
<div style={{
|
||
display: upFileAType == '肖像授权书' ? 'unset' : 'none',
|
||
maxWidth: '200px'
|
||
}}>
|
||
<div style={{
|
||
height: 65,
|
||
}}>
|
||
<Upload
|
||
name="file"
|
||
beforeUpload={(file) => {
|
||
|
||
const isPDF = file.type === 'application/pdf';
|
||
const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg';
|
||
if (!isPDF && !isJPG) {
|
||
message.error('仅支持 PNG、PDF、JPG 格式的文件!');
|
||
}
|
||
return isPDF || isJPG;
|
||
}}
|
||
action={uploadDeputeFileUrl('肖像授权书')}
|
||
fileList={fileAFace}
|
||
onChange={(info) => {
|
||
|
||
if (info.file.status === 'uploading') {
|
||
const { fileList } = info;
|
||
setFileAFace(fileList);
|
||
setDisabled(true)
|
||
return;
|
||
}
|
||
if (info.file.status === 'done') {
|
||
setDisabled(false)
|
||
setFileAFace([
|
||
{
|
||
uid: info.file.response.data.fileId,
|
||
name: info.file.response.data.fileName,
|
||
status: 'done',
|
||
url: showImage(info.file.response.data.fileId, false)
|
||
}
|
||
])
|
||
|
||
|
||
}
|
||
if (info.file.status === 'error') {
|
||
setDisabled(false)
|
||
// 显示错误提示
|
||
// message.error(`上传失败`);
|
||
message.error(info.file.response.msg);
|
||
|
||
setFileAFace([])
|
||
}
|
||
|
||
|
||
}}
|
||
onRemove={() => {
|
||
setFileAFace([])
|
||
|
||
}}
|
||
|
||
headers={{ 'Auth': `Bearer ${token}` }}
|
||
>
|
||
<Button icon={<UploadOutlined />}
|
||
disabled={fileAFace.length > 0}
|
||
style={{
|
||
marginTop: '4px'
|
||
}}
|
||
>上传肖像授权书</Button>
|
||
</Upload>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
{/* 期刊证明 */}
|
||
<div style={{
|
||
display: upFileAType == '期刊证明' ? 'unset' : 'none',
|
||
maxWidth: '200px'
|
||
}}>
|
||
<div style={{
|
||
height: 65,
|
||
}}>
|
||
<Upload
|
||
beforeUpload={(file) => {
|
||
|
||
const isPDF = file.type === 'application/pdf';
|
||
const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg';
|
||
if (!isPDF && !isJPG) {
|
||
message.error('仅支持 PNG、PDF、JPG 格式的文件!');
|
||
}
|
||
return isPDF || isJPG;
|
||
}}
|
||
name="file"
|
||
action={uploadDeputeFileUrl('期刊证明')}
|
||
fileList={fileABook}
|
||
onChange={(info) => {
|
||
|
||
if (info.file.status === 'uploading') {
|
||
const { fileList } = info;
|
||
setFileABook(fileList);
|
||
setDisabled(true)
|
||
return;
|
||
}
|
||
if (info.file.status === 'done') {
|
||
setDisabled(false)
|
||
setFileABook([
|
||
{
|
||
uid: info.file.response.data.fileId,
|
||
name: info.file.response.data.fileName,
|
||
status: 'done',
|
||
url: showImage(info.file.response.data.fileId, false)
|
||
}
|
||
])
|
||
|
||
|
||
}
|
||
if (info.file.status === 'error') {
|
||
setDisabled(false)
|
||
// message.error(`上传失败`);
|
||
message.error(info.file.response.msg);
|
||
|
||
setFileABook([])
|
||
}
|
||
|
||
|
||
}}
|
||
onRemove={() => {
|
||
setFileABook([])
|
||
|
||
}}
|
||
|
||
headers={{ 'Auth': `Bearer ${token}` }}
|
||
>
|
||
<Button icon={<UploadOutlined />}
|
||
disabled={fileABook.length > 0}
|
||
style={{
|
||
marginTop: '4px'
|
||
}}
|
||
>上传期刊证明</Button>
|
||
</Upload>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div style={{
|
||
height: '110px',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
paddingLeft: 70,
|
||
boxSizing: 'border-box',
|
||
color: 'rgb(161, 161, 161)'
|
||
}}>
|
||
<div style={{
|
||
display: upFileAType == '姓名授权书' ? 'unset' : 'none',
|
||
}}>
|
||
请上传商标申请对应的姓名授权证明文件(请上传1.5M以内的jpg/jpeg格式图片/2M以内的pdf格式文件)
|
||
</div>
|
||
<div style={{
|
||
display: upFileAType == '肖像授权书' ? 'unset' : 'none',
|
||
}}>
|
||
请上传商标申请对应的肖像授权证明文件(请上传1.5M以内的jpg/jpeg格式图片/2M以内的pdf格式文件)
|
||
</div>
|
||
<div style={{
|
||
display: upFileAType == '期刊证明' ? 'unset' : 'none',
|
||
}}>
|
||
在“期刊”上注册该商标须有我国出版行政主管部门批准使用的报纸、期刊名称，由于您选择了该项目，需提供我国出版行政主管部门核发的报纸、期刊出版许可证明。(请上传1.5M以内的jpg/jpeg格式图片/2MI以内的pdf格式文件)
|
||
</div>
|
||
</div>
|
||
</Spin>
|
||
</Modal>
|
||
|
||
<Modal title="上传授权书"
|
||
centered
|
||
// okText='确认'
|
||
// cancelText='取消'
|
||
destroyOnClose={true}
|
||
open={upFileCModal}
|
||
// onOk={() => {
|
||
// handleSubmit()
|
||
// }}
|
||
onCancel={() => {
|
||
setUpFileCModal(false)
|
||
}}
|
||
footer={[
|
||
<Button key="ok" type="primary" onClick={() => {
|
||
setUpFileCModal(false)
|
||
}}>
|
||
确认
|
||
</Button>
|
||
]}
|
||
>
|
||
<Spin indicator={<LoadingOutlined spin />} tip='正在上传' size="small" spinning={disabled}>
|
||
|
||
<div style={{
|
||
display: 'flex',
|
||
paddingTop: 20,
|
||
}}>
|
||
<div className='editFormItemTitle' style={{
|
||
width: 70
|
||
}}>类型</div>
|
||
<div>
|
||
<Radio.Group onChange={onUpChangeC} value={upFileCType}>
|
||
<Radio.Button value="姓名授权书">姓名授权书</Radio.Button>
|
||
<Radio.Button value="肖像授权书">肖像授权书</Radio.Button>
|
||
<Radio.Button value="期刊证明">期刊证明</Radio.Button>
|
||
</Radio.Group>
|
||
<div style={{
|
||
marginTop: 5,
|
||
color: 'rgb(161, 161, 161)'
|
||
|
||
|
||
}}>请选择对应的授权文件类型</div>
|
||
</div>
|
||
</div>
|
||
<div style={{
|
||
marginTop: 20,
|
||
display: 'flex',
|
||
// background: 'pink'
|
||
}}>
|
||
<div className='editFormItemTitle' style={{
|
||
width: 70,
|
||
marginTop: 5
|
||
}}>上传文件</div>
|
||
{/* 姓名授权书 */}
|
||
<div style={{
|
||
display: upFileCType == '姓名授权书' ? 'unset' : 'none',
|
||
maxWidth: '200px'
|
||
}}>
|
||
<div style={{
|
||
height: 65,
|
||
}}>
|
||
<Upload
|
||
name="file"
|
||
action={uploadDeputeFileUrl('姓名授权书')}
|
||
beforeUpload={(file) => {
|
||
|
||
const isPDF = file.type === 'application/pdf';
|
||
const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg';
|
||
if (!isPDF && !isJPG) {
|
||
message.error('仅支持 PNG、PDF、JPG 格式的文件!');
|
||
|
||
}
|
||
return isPDF || isJPG;
|
||
}}
|
||
fileList={fileCName}
|
||
onChange={(info) => {
|
||
console.log(info.file.status);
|
||
|
||
if (info.file.status === 'uploading') {
|
||
const { fileList } = info;
|
||
setFileCName(fileList);
|
||
setDisabled(true)
|
||
return;
|
||
}
|
||
if (info.file.status === 'done') {
|
||
// console.log(info.file.response.data);
|
||
setFileCName([
|
||
{
|
||
uid: info.file.response.data.fileId,
|
||
name: info.file.response.data.fileName,
|
||
status: 'done',
|
||
url: showImage(info.file.response.data.fileId, false)
|
||
}
|
||
])
|
||
setDisabled(false)
|
||
|
||
|
||
}
|
||
if (info.file.status === 'error') {
|
||
setDisabled(false)
|
||
message.error(info.file.response.msg);
|
||
setFileCName([])
|
||
|
||
}
|
||
|
||
|
||
}}
|
||
onRemove={() => {
|
||
setFileCName([])
|
||
|
||
}}
|
||
|
||
headers={{ 'Auth': `Bearer ${token}` }}
|
||
>
|
||
<Button icon={<UploadOutlined />}
|
||
disabled={fileCName.length > 0}
|
||
|
||
style={{
|
||
marginTop: '4px'
|
||
}}
|
||
>上传姓名授权书</Button>
|
||
</Upload>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
{/* 肖像授权书 */}
|
||
<div style={{
|
||
display: upFileCType == '肖像授权书' ? 'unset' : 'none',
|
||
maxWidth: '200px'
|
||
}}>
|
||
<div style={{
|
||
height: 65,
|
||
}}>
|
||
<Upload
|
||
name="file"
|
||
beforeUpload={(file) => {
|
||
|
||
const isPDF = file.type === 'application/pdf';
|
||
const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg';
|
||
if (!isPDF && !isJPG) {
|
||
message.error('仅支持 PNG、PDF、JPG 格式的文件!');
|
||
}
|
||
return isPDF || isJPG;
|
||
}}
|
||
action={uploadDeputeFileUrl('肖像授权书')}
|
||
fileList={fileCFace}
|
||
onChange={(info) => {
|
||
|
||
if (info.file.status === 'uploading') {
|
||
const { fileList } = info;
|
||
setFileCFace(fileList);
|
||
setDisabled(true)
|
||
return;
|
||
}
|
||
if (info.file.status === 'done') {
|
||
setDisabled(false)
|
||
setFileCFace([
|
||
{
|
||
uid: info.file.response.data.fileId,
|
||
name: info.file.response.data.fileName,
|
||
status: 'done',
|
||
url: showImage(info.file.response.data.fileId, false)
|
||
}
|
||
])
|
||
|
||
|
||
}
|
||
if (info.file.status === 'error') {
|
||
setDisabled(false)
|
||
// 显示错误提示
|
||
// message.error(`上传失败`);
|
||
message.error(info.file.response.msg);
|
||
|
||
setFileCFace([])
|
||
}
|
||
|
||
|
||
}}
|
||
onRemove={() => {
|
||
setFileCFace([])
|
||
|
||
}}
|
||
|
||
headers={{ 'Auth': `Bearer ${token}` }}
|
||
>
|
||
<Button icon={<UploadOutlined />}
|
||
disabled={fileCFace.length > 0}
|
||
style={{
|
||
marginTop: '4px'
|
||
}}
|
||
>上传肖像授权书</Button>
|
||
</Upload>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
{/* 期刊证明 */}
|
||
<div style={{
|
||
display: upFileCType == '期刊证明' ? 'unset' : 'none',
|
||
maxWidth: '200px'
|
||
}}>
|
||
<div style={{
|
||
height: 65,
|
||
}}>
|
||
<Upload
|
||
beforeUpload={(file) => {
|
||
|
||
const isPDF = file.type === 'application/pdf';
|
||
const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg';
|
||
if (!isPDF && !isJPG) {
|
||
message.error('仅支持 PNG、PDF、JPG 格式的文件!');
|
||
}
|
||
return isPDF || isJPG;
|
||
}}
|
||
name="file"
|
||
action={uploadDeputeFileUrl('期刊证明')}
|
||
fileList={fileCBook}
|
||
onChange={(info) => {
|
||
|
||
if (info.file.status === 'uploading') {
|
||
const { fileList } = info;
|
||
setFileCBook(fileList);
|
||
setDisabled(true)
|
||
return;
|
||
}
|
||
if (info.file.status === 'done') {
|
||
setDisabled(false)
|
||
setFileCBook([
|
||
{
|
||
uid: info.file.response.data.fileId,
|
||
name: info.file.response.data.fileName,
|
||
status: 'done',
|
||
url: showImage(info.file.response.data.fileId, false)
|
||
}
|
||
])
|
||
|
||
|
||
}
|
||
if (info.file.status === 'error') {
|
||
setDisabled(false)
|
||
// message.error(`上传失败`);
|
||
message.error(info.file.response.msg);
|
||
|
||
setFileCBook([])
|
||
}
|
||
|
||
|
||
}}
|
||
onRemove={() => {
|
||
setFileCBook([])
|
||
|
||
}}
|
||
|
||
headers={{ 'Auth': `Bearer ${token}` }}
|
||
>
|
||
<Button icon={<UploadOutlined />}
|
||
disabled={fileCBook.length > 0}
|
||
style={{
|
||
marginTop: '4px'
|
||
}}
|
||
>上传期刊证明</Button>
|
||
</Upload>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div style={{
|
||
height: '110px',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
paddingLeft: 70,
|
||
boxSizing: 'border-box',
|
||
color: 'rgb(161, 161, 161)'
|
||
}}>
|
||
<div style={{
|
||
display: upFileCType == '姓名授权书' ? 'unset' : 'none',
|
||
}}>
|
||
请上传商标申请对应的姓名授权证明文件(请上传1.5M以内的jpg/jpeg格式图片/2M以内的pdf格式文件)
|
||
</div>
|
||
<div style={{
|
||
display: upFileCType == '肖像授权书' ? 'unset' : 'none',
|
||
}}>
|
||
请上传商标申请对应的肖像授权证明文件(请上传1.5M以内的jpg/jpeg格式图片/2M以内的pdf格式文件)
|
||
</div>
|
||
<div style={{
|
||
display: upFileCType == '期刊证明' ? 'unset' : 'none',
|
||
}}>
|
||
在“期刊”上注册该商标须有我国出版行政主管部门批准使用的报纸、期刊名称，由于您选择了该项目，需提供我国出版行政主管部门核发的报纸、期刊出版许可证明。(请上传1.5M以内的jpg/jpeg格式图片/2MI以内的pdf格式文件)
|
||
</div>
|
||
</div>
|
||
</Spin>
|
||
</Modal>
|
||
|
||
|
||
|
||
|
||
</Spin>
|
||
)
|
||
}
|