diff --git a/.env.dev b/.env.dev index 5a4483b..dc82006 100644 --- a/.env.dev +++ b/.env.dev @@ -10,7 +10,7 @@ VITE_USERID=80d3365e-0597-4988-979e-18ef1c3ec671 # VITE_USERID=e3e40f95-7a3f-4b53-a1a0-51dd4e881d74 # VITE_USERID=5cc90b84-905e-4027-9f6c-ab47e9c320a1 # VITE_CURRENT_THEME=fzkj -VITE_CURRENT_THEME=mzw +# VITE_CURRENT_THEME=mzw # VITE_HOST=121.36.71.250:58038 # VITE_BASE_URL=http://${VITE_HOST} # VITE_COPY_BASE_URL=${VITE_BASE_URL} diff --git a/src/components/BelongPeople/BelongPeople.tsx b/src/components/BelongPeople/BelongPeople.tsx index 1cbc25e..1c081ee 100644 --- a/src/components/BelongPeople/BelongPeople.tsx +++ b/src/components/BelongPeople/BelongPeople.tsx @@ -68,7 +68,7 @@ type propsInfo = { showNow?: boolean }; export default function BelongPeople(props: propsInfo) { - const showNow = props.showNow == false?false:true + const showNow = props.showNow == false ? false : true // const [propsShow,setPropsShow] = useState(props.belongPeopleInfo.authorId?true) // const nav = useNavigate(); // const pathParams = useParams(); @@ -418,8 +418,8 @@ export default function BelongPeople(props: propsInfo) { }); // console.log('嘻嘻嘻',props.showNow); // console.log(showNow); - - + + }, []) return ( @@ -533,7 +533,7 @@ export default function BelongPeople(props: propsInfo) { */}
{authorName ? (<> @@ -969,6 +969,7 @@ export default function BelongPeople(props: propsInfo) { {/* 选择创建/编辑/查看所属者弹框 */} { return { uid: item.fileId, @@ -443,7 +443,7 @@ export default function File(props: any) { onFinish={(value) => { - console.log(value); + // console.log(value); // if (value.upFile && Array.isArray(value.upFile.fileList)) { // const uids = value.upFile.fileList.map((file: any) => file.uid); // const uidString = uids.join(','); diff --git a/src/request/api.ts b/src/request/api.ts index e4e87ac..a0c8061 100644 --- a/src/request/api.ts +++ b/src/request/api.ts @@ -163,4 +163,79 @@ export const uploadMaterial = (appOrderId:any,params:any) => aiShopRequest.post( // 第四步 提交审核 export const submitapp = (appOrderId:any) => aiShopRequest.post(`/aishop/api/apporder/update/sub-check/${appOrderId}`) -// ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ \ No newline at end of file +// ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ + + + +//商标申请接口 ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ +// 获取展示价格列表 +export const trademarkGoodsList = () => aiShopRequest.get(`/aishop/api/trademark/money-list`) +// 商标申请数据分页列表 +export const trademarkList = (params:any) => aiShopRequest.get(`/aishop/api/trademark/listpage`, { params }) +// 根据id获取商标详情 +export const trademarkDetail = (trademarkId:any) => aiShopRequest.get(`/aishop/api/trademark/get/${trademarkId}`) +// 智能申请注册 +// 第一步 填写基本信息(如果传递trademarkId则为修改，否则为新增) +export const trademarkBaseInfo = (params:any) => aiShopRequest.post(`/aishop/api/trademark/save1`,params) +// ai生成商标图片 +export const aiGenerateImage = (params:any) => aiShopRequest.get(`/aishop/api/trademark/text-image`,{params}) +// 下载授权书模板 +export const downloadAuthBook = () => aiShopRequest.get(`/aishop/api/assets/template/%E6%8E%88%E6%9D%83%E4%B9%A6%E6%A8%A1%E6%9D%BF.zip`) +// 第二步相关 +// 获取选择商标类型 +// export const trademarkTypeList = () => aiShopRequest.get(`/aishop/api/trademarktype/ztree/0`) +export const trademarkTypeList = (params:any) => aiShopRequest.get(`/aishop/api/trademarktype/list-ztree`,{params}) +// 商标类型查询 +export const trademarkTypeSearch = (params:any) => aiShopRequest.get(`/aishop/api/trademarktype/list-ztree-query`,{params}) +// 我的方案列表 +export const trademarkSchemeList = () => aiShopRequest.get(`/aishop/api/trademark-types/list-repository`) +// 保存我得方案 +export const saveTrademarkScheme = (params:any) => aiShopRequest.post(`/aishop/api/trademark-types/save-repository`,params) +//删除方案 +export const deleteTrademarkScheme = (typesId:any) => aiShopRequest.delete(`/aishop/api/trademark-types/remove-repository/${typesId}`) + +// 第二步选择商标类别提交 +export const uptrademarkList = (trademarkId:any,params:any) => aiShopRequest.post(`/aishop/api/trademark/save2/${trademarkId}`,params) + + + + + +// 第三步 +// 新增商标申请人信息 +export const addTrademarkApplicant = (params:any) => aiShopRequest.post(`/aishop/api/trademarkuser/save`,params) +// 商标申请人分页列表 +export const trademarkApplicantList = (params:any) => aiShopRequest.get(`/aishop/api/trademarkuser/listpage`,{params}) +// 删除商标申请人 +export const deleteTrademarkApplicant = (trademarkUserId:any) => aiShopRequest.delete(`/aishop/api/trademarkuser/remove/${trademarkUserId}`) +// 获取申请人详情 +export const trademarkApplicantDetails = (trademarkUserId:any) => aiShopRequest.get(`/aishop/api/trademarkuser/get/${trademarkUserId}`) +// 修改申请人信息 +export const updateTrademarkApplicant = (trademarkUserId:any,params:any) => aiShopRequest.put(`/aishop/api/trademarkuser/update/${trademarkUserId}`,params) +// 提交申请人 +export const submitTrademarkApplicant = (trademarkId:any,params:any) => aiShopRequest.post(`/aishop/api/trademark/save3/${trademarkId}`,params) + +// 第四步 +// 获取支付订单 +export const getOrder = (trademarkId:any) => aiShopRequest.get(`/aishop/api/trademark/get-pay-data/${trademarkId}`) + +// 订单支付 +export const orderPay = (trademarkId:any) => aiShopRequest.post(`/aishop/api/trademark/save4/${trademarkId}`) + + + +// 第五步 +// 生成委托书 +export const generateDepute = (trademarkId:any) => aiShopRequest.get(`/aishop/api/trademark/create-xieyi/SHOP06/${trademarkId}`) +// 上传委托书 +export const uploadDepute = (trademarkId:any,params:any) => aiShopRequest.post(`/aishop/api/trademark/save5/${trademarkId}`,params) + + +// 第六步上传 +export const uploadSix = (trademarkId:any) => aiShopRequest.post(`/aishop/api/trademark/save6/${trademarkId}`) + +//专家辅助注册/至尊无忧注册 +export const expertRegister = (params:any) => aiShopRequest.post(`/aishop/api/trademark/save1L`,params) +export const supplementTrademarkData = (params:any) => aiShopRequest.post(`/aishop/api/correction/save-trademark`, params) +// ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ + diff --git a/src/request/request.ts b/src/request/request.ts index ce4c7a7..14a6ef5 100644 --- a/src/request/request.ts +++ b/src/request/request.ts @@ -67,7 +67,7 @@ request.interceptors.response.use( // 买卖功能(交易中心/APP电子软著)---------------------------------------------------------------------------- const aiShopRequest = axios.create({ baseURL: aiShopBaseUrl, - timeout: 5000, + timeout: 30000, }); aiShopRequest.interceptors.request.use( (config) => { @@ -196,10 +196,17 @@ export const downloadInvoice = (id: string) => { export const showImage = (fileId: string, isDownload?: boolean) => { return `${aiShopBaseUrl}/aishop/route/file/download/${isDownload == false}/${fileId}` } + +//下载授权声明书模板 (商标用) +export const downloadAuthBookUrl = () => { + return `${aiShopBaseUrl}/aishop/assets/template/%E6%8E%88%E6%9D%83%E4%B9%A6%E6%A8%A1%E6%9D%BF.zip` +} + // 上传图片 买卖功能 export const uploadImageUrl = () => { return `${aiShopBaseUrl}/aishop/api/file/v2/upload-image` } + // // 下载 预览文件 买卖功能 // export const downloadUrl = (fileId: string, isDownload?: boolean) => { // return `${aiShopBaseUrl}/aishop/route/file/v2/download/${isDownload == false}/${fileId}` @@ -210,4 +217,16 @@ export const uploadImageUrl = () => { export const uploadFileUrl = () => { return `${aiShopBaseUrl}/aishop/api/file/v2/upload-file` } -export { request,aiShopRequest,phoneRequest,newRequest}; \ No newline at end of file +export const uploadDeputeFileUrl = (type:string) => { + return `${aiShopBaseUrl}/aishop/api/trademark/upload-depute-file?type=${type}` +} +// 上传图片 加条件 限制大小等 name="file" +export const uploadImageAddUrl = () => { + return `${aiShopBaseUrl}/aishop/api/trademark/upload-file` +} +// 上传委托书 +export const uploadDeputeUrl = () => { + return `${aiShopBaseUrl}/aishop/api/trademark/upload-weituo-file ` +} + +export { request,aiShopRequest,phoneRequest,newRequest}; diff --git a/src/route/AppElectron/AppEdit.tsx b/src/route/AppElectron/AppEdit.tsx index 9537b33..39428a8 100644 --- a/src/route/AppElectron/AppEdit.tsx +++ b/src/route/AppElectron/AppEdit.tsx @@ -115,7 +115,7 @@ export default function AppEdit() { // } const [loading, setLoading] = useState(false); - const [editProcess, setEditProcess] = useState(1); + const [editProcess, setEditProcess] = useState(0); // 企业/机构认证 const [companyInfo, setCompanyInfo] = useState({ companyName: '', // 企业名称 diff --git a/src/route/AppElectron/AppElectron.tsx b/src/route/AppElectron/AppElectron.tsx index b416737..0843839 100644 --- a/src/route/AppElectron/AppElectron.tsx +++ b/src/route/AppElectron/AppElectron.tsx @@ -180,7 +180,7 @@ export default function AppElectron() { // background: 'red', color: '#007FFF', position: 'relative', - display: record.waitCorrectionCount > 0 && record.appOrderStatus != '5' ? 'unset' : 'none', + display: record.checkStatus == '2' && record.appOrderStatus != '5'? 'unset' : 'none', }} onClick={() => { @@ -192,22 +192,26 @@ export default function AppElectron() { > 资料补充
0 ? 'unset' : 'none', }}> - {record.waitCorrectionCount} +
+ {record.waitCorrectionCount} +
{ - const { fileList } = info; - setUpCodeArray(fileList); + if (info.file.status === 'uploading') { + const { fileList } = info; + setUpCodeArray(fileList); return; } if (info.file.status === 'done') { @@ -443,9 +444,10 @@ export default function EditAppFiles(props: any) { action={uploadFileUrl()} fileList={upSoftArray} onChange={(info) => { - const { fileList } = info; - setUpSoftArray(fileList); + if (info.file.status === 'uploading') { + const { fileList } = info; + setUpSoftArray(fileList); return; } if (info.file.status === 'done') { diff --git a/src/route/AppElectron/components/File/File.tsx b/src/route/AppElectron/components/File/File.tsx index 0d7349a..b38b72a 100644 --- a/src/route/AppElectron/components/File/File.tsx +++ b/src/route/AppElectron/components/File/File.tsx @@ -8,11 +8,43 @@ import useMessage from "antd/es/message/useMessage"; // import './File.css' const { TextArea } = Input; export default function File(props: any) { + const [disabled, setDisabled] = useState(false) // 是否禁用 + // 获取上传过的文件类型 + const getUpFileTypeByIdsArray = async (ids: string) => { + try { + const res: any = await getFileTypeByIds({ + ids: ids + }) + // console.log(res); + const newUpFile = res.map((item: any) => { + return { + uid: item.fileId, + name: item.fileName, + status: 'done', + url: showImage(item.fileId, false) + } + }) + // console.log(newUpFile, 'newUpFile'); + setUpFileArray(newUpFile) + + } 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 [upFileArray, setUpFileArray] = useState([]) // 上传的文件数组 // 自定义验证函数 const validateContentOrFile = (_rule: any, _value: any, callback: (error?: string) => void, form: any) => { const { upCorrectionRemark, upFile } = form.getFieldsValue(); - if (upCorrectionRemark || (upFile && Array.isArray(upFile.fileList) && upFile.fileList.length > 0)) { + if (upCorrectionRemark || upFile) { callback(); } else { callback('内容和附件至少需要填写或上传一项'); @@ -28,11 +60,12 @@ export default function File(props: any) { correctionFiles: params.correctionFiles, correctionRemark: params.correctionRemark, }) - if (props.user == 'sell') { - getSellSupplementList() - } else if (props.user == 'buy') { - getBuySupplementList() - } + // if (props.user == 'sell') { + // getSellSupplementList() + // } else if (props.user == 'buy') { + // getBuySupplementList() + // } + getBuySupplementList() props.upData() messageApi.open({ type: 'success', @@ -149,6 +182,41 @@ export default function File(props: any) { // console.log(res); setDetailData(res) await getFileTypeByIdsArray(res.correctionFiles) + const userId = res.buyId; + if (userId) { + setDisabled(true) + const newData: any = await supplementDetail(userId) + // console.log('以补充材料', newData); + form.setFieldsValue({ + upCorrectionRemark: newData.correctionRemark, // 内容 + + }) + if (newData.correctionFiles) { + getUpFileTypeByIdsArray(newData.correctionFiles) + // const newArray:any = getFileTypeByIds({ + // ids: newData.correctionFiles + // }) + // console.log(newArray, 'newArray'); + // console.log('有补充资料'); + // // 循环newArray 形成新 + // const newUpFile = newArray.map((item:any)=>{ + // return { + // uid: item.fileId, + // name: item.fileName, + // status: 'done', + // url: 'www.baidu.com' + // } + // }) + // console.log(newUpFile, 'newUpFile'); + + + } + + + + } else { + setDisabled(false) + } } catch (error: any) { @@ -254,7 +322,10 @@ export default function File(props: any) { setCorrectionId(record.correctionId) getSupplementDetail(record.correctionId) setIsModalVisible(true) - // 清空表单 + + // 清空上传的文件数组 + setUpFileArray([]) + // 清空表单 form.resetFields(); // setCorrectionType(record.correctionType) }}>查看内容 @@ -372,13 +443,13 @@ export default function File(props: any) { // }) // console.log(upFileArray); // 将upFileArray 数组周末和每项的response里的data 里的 fileId 拼接成一个字符串，用逗号隔开 - const uids = upFileArray.map((file: any) => file.response.data.fileId).join(','); + // const uids = upFileArray.map((file: any) => file.response.data.fileId).join(','); // console.log('提取的 uid 字符串:', uids); submitData({ - correctionFiles: uids, + correctionFiles:value.upFile ? value.upFile : '', correctionRemark: value.upCorrectionRemark, }) - + }} onFinishFailed={() => { @@ -408,6 +479,7 @@ export default function File(props: any) { width: 900, }} + disabled={disabled} placeholder='请输入需要补充内容' > @@ -436,14 +508,36 @@ export default function File(props: any) { { - setUpFileArray(info.fileList) + // setUpFileArray(info.fileList) // console.log(info.fileList); - + const { fileList } = info; + const newFileArray = fileList.map((file) => { + if (file.status === 'done' && file.response) { + return { + uid: file.response.data.fileId, + name: file.response.data.fileName, + status: 'done', + url: showImage(file.response.data.fileId, false) + }; + } + return file; + }); + setUpFileArray(newFileArray); + // console.log(newFileArray); + const uids = newFileArray.map((file: any) => file.uid).join(','); + // console.log(uids); + + // 给form 赋值 + form.setFieldsValue({ + upFile: uids, + }) + }} - + headers={{ 'Auth': `Bearer ${token}` }} > @@ -465,11 +559,17 @@ export default function File(props: any) { gap: 10, // marginTop: 20 }}> - - +
+ + +
diff --git a/src/route/TrademarkMall/TrademarkAiEdit.tsx b/src/route/TrademarkMall/TrademarkAiEdit.tsx index 344fe26..f592a10 100644 --- a/src/route/TrademarkMall/TrademarkAiEdit.tsx +++ b/src/route/TrademarkMall/TrademarkAiEdit.tsx @@ -1,158 +1,336 @@ -import { useState } from 'react' +import { useState, useEffect } from 'react' import './trademark-edit.css' import { RightOutlined } from '@ant-design/icons'; import EditOne from './components/EditOne/EditOne'; -import EditTwo from './components/EditTwo/EditTwo'; +import EditTwo from './components/EditTwo/EditTwoNew'; import EditThree from './components/EditThree/EditThree'; import EditFour from './components/EditFour/EditFour'; import EditFive from './components/EditFive/EditFive'; import EditSix from './components/EditSix/EditSix'; +import { useLocation, useParams } from 'react-router-dom'; +import { trademarkDetail, getOrder } from '../../request/api' +import { + message, Spin +} from 'antd'; export default function TrademarkAiEdit() { + const [orderList, setOrderList] = useState([]) + const getOrderList = async () => { + try { + const res = await getOrder(trademarkId) + // console.log('订单详情列表', res); + setOrderList(res) + } catch (error: any) { + setOrderList([]) + 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 pathParams = useParams(); + // const trademarkId = pathParams.trademarkId == 'NEW'?'':pathParams.trademarkId; + const [trademarkId, setTrademarkId] = useState(pathParams.trademarkId == 'NEW' ? '' : pathParams.trademarkId) + + const { state } = useLocation() + const [messageApi, contextHolder] = message.useMessage(); const height = window.innerHeight - 180; - const [editProcess, setEditProcess] = useState(1); + const [editProcess, setEditProcess] = useState(0); + const [trademarkMode, setTrademarkMode] = useState(state?.trademarkMode); + const [trademarkModeName, setTrademarkModeName] = useState(state?.trademarkModeName); + const [trademarkModePrice, setTrademarkModePrice] = useState(0) + const [trademarkModeOldPrice, setTrademarkModeOldPrice] = useState(0) + // const [trademarkStatus, setTrademarkStatus] = useState('') + const [editOneData, setEditOneData] = useState({ + trademarkType: '', //商标类型 text 文字 image 图形 text-image 图文 + trademarkName: '', //商标名称 + trademarkDescription: '', //商标描述 + trademarkFile: '', //姓名授权 + trademarkFile1: '', //肖像授权声明书 + trademarkFile2: '', //期刊 + trademarkPhotoType: '', //商标图样类型 1 自动生成 2 手动上传 + trademarkPhoto: '', //商标图样 + + }) + const [editTwoData, setEditTwoData] = useState({ + trademarkTypeDTOS: [], + trademarkTypeIds: [] + }) + const [editThreeData, setEditThreeData] = useState({ + trademarkUserId: '', + name: '' + }) + const [editFiveData, setEditFiveData] = useState({ + trademarkFileDepute: '' + }) + const [trademarkStatus, setTrademarkStatus] = useState('') + useEffect(() => { + if (trademarkId) { + getOrderList() + } + }, [trademarkId]) + + // const [trademarkId, setTrademarkId] = useState(state.trademarkId?state.trademarkId:''); + const [loading, setLoading] = useState(false) + const getTrademarkDetail = async (trademarkId: string) => { + try { + setLoading(true) + const res: any = await trademarkDetail(trademarkId) + // console.log('详情', res); + if (res.trademarkProgress < 6) { + setEditProcess(res.trademarkProgress + 1) + + } else { + setEditProcess(res.trademarkProgress) + } + setTrademarkMode(res.trademarkMode) + setTrademarkModeName(res.trademarkModeName) + setTrademarkModePrice(res.trademarkModePrice / 100) + setTrademarkModeOldPrice(res.trademarkModeOldPrice / 100) + setEditOneData({ + trademarkType: res.trademarkType, //商标类型 text 文字 image 图形 text-image 图文 + trademarkName: res.trademarkName, //商标名称 + trademarkDescription: res.trademarkDescription, //商标描述 + trademarkFile: res.trademarkFile, //姓名授权 + trademarkFile1: res.trademarkFile1, //肖像授权声明书 + trademarkFile2: res.trademarkFile2, //期刊 + trademarkPhotoType: res.trademarkPhotoType, //商标图样类型 1 自动生成 2 手动上传 + trademarkPhoto: res.trademarkPhoto, //商标图样 + }) + setTrademarkStatus(res.trademarkStatus) + setEditTwoData({ + trademarkTypeDTOS: res.trademarkTypeDTOS, + trademarkTypeIds: res.trademarkTypeIds + }) + setEditThreeData({ + trademarkUserId: res.trademarkUserDTO?res.trademarkUserDTO.trademarkUserId:'', + name: res.trademarkUserDTO?res.trademarkUserDTO.name:'' + }) + setEditFiveData({ + trademarkFileDepute: res.trademarkFileDepute + }) + + } 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) + } + } + + + useEffect(() => { + + + // console.log('state', state); + // console.log('trademarkId', trademarkId); + // console.log('trademarkId', trademarkId); + // console.log('trademarkId', state.trademarkId); + // 如果存在id则为编辑状态，否则为新建状态 获取到第几步和详情数据 + if (trademarkId) { + // setEditProcess(4) + getTrademarkDetail(trademarkId) + } else { + setEditProcess(1) + } + }, [trademarkId]) + + // const clickProcess = (index: number) => { + // setEditProcess(index) + // } return ( -
-
-
-
= 1 ? '#3B60E8' : '', - color: editProcess >= 1 ? '#fff' : '#B1B1B1', - borderColor: editProcess >= 1 ? '' : '#B1B1B1' - }} - >1
-
= 1 ? '#353535' : '#878787', - fontWeight: editProcess >= 1 ? 'bold' : 'normal' - }} - >填写基础信息
+ +
+ {contextHolder} +
+
+
= 1 ? '#3B60E8' : '', + color: editProcess >= 1 ? '#fff' : '#B1B1B1', + borderColor: editProcess >= 1 ? '' : '#B1B1B1' + }} + >1
+
= 1 ? '#353535' : '#878787', + fontWeight: editProcess >= 1 ? 'bold' : 'normal' + }} + >填写基础信息
+
+
{ + setEditProcess(2) + }}>
+
+
= 2 ? '#3B60E8' : '', + color: editProcess >= 2 ? '#fff' : '#B1B1B1', + borderColor: editProcess >= 2 ? '' : '#B1B1B1' + }}>2
+
= 2 ? '#353535' : '#878787', + fontWeight: editProcess >= 2 ? 'bold' : 'normal' + }} + >选择商标类别
+
+
+
+
= 3 ? '#3B60E8' : '', + color: editProcess >= 3 ? '#fff' : '#B1B1B1', + borderColor: editProcess >= 3 ? '' : '#B1B1B1' + }}>3
+
= 3 ? '#353535' : '#878787', + fontWeight: editProcess >= 3 ? 'bold' : 'normal' + }} + >选择申请人
+
+
+
+
= 4 ? '#3B60E8' : '', + color: editProcess >= 4 ? '#fff' : '#B1B1B1', + borderColor: editProcess >= 4 ? '' : '#B1B1B1' + }}>4
+
= 4 ? '#353535' : '#878787', + fontWeight: editProcess >= 4 ? 'bold' : 'normal' + }} + > + 订单支付 +
+
+
+
+
= 5 ? '#3B60E8' : '', + color: editProcess >= 5 ? '#fff' : '#B1B1B1', + borderColor: editProcess >= 5 ? '' : '#B1B1B1' + }}>5
+
= 5 ? '#353535' : '#878787', + fontWeight: editProcess >= 5 ? 'bold' : 'normal' + }} + >上传委托书
+
+
+
+
= 6 ? '#3B60E8' : '', + color: editProcess >= 6 ? '#fff' : '#B1B1B1', + borderColor: editProcess >= 6 ? '' : '#B1B1B1' + }}>6
+
= 6 ? '#353535' : '#878787', + fontWeight: editProcess >= 6 ? 'bold' : 'normal' + }} + >上传商标局
+
+ +
-
-
-
= 2 ? '#3B60E8' : '', - color: editProcess >= 2 ? '#fff' : '#B1B1B1', - borderColor: editProcess >= 2 ? '' : '#B1B1B1' - }}>2
-
= 2 ? '#353535' : '#878787', - fontWeight: editProcess >= 2 ? 'bold' : 'normal' - }} - >选择商标类别
-
-
-
-
= 3 ? '#3B60E8' : '', - color: editProcess >= 3 ? '#fff' : '#B1B1B1', - borderColor: editProcess >= 3 ? '' : '#B1B1B1' - }}>3
-
= 3 ? '#353535' : '#878787', - fontWeight: editProcess >= 3 ? 'bold' : 'normal' - }} - >选择所属者
-
-
-
-
= 4 ? '#3B60E8' : '', - color: editProcess >= 4 ? '#fff' : '#B1B1B1', - borderColor: editProcess >= 4 ? '' : '#B1B1B1' - }}>4
-
= 4 ? '#353535' : '#878787', - fontWeight: editProcess >= 4 ? 'bold' : 'normal' - }} - > - 订单支付 +
+
+ +
+
+ + +
+
+ +
+
+ +
+
+ +
+
+
-
-
-
= 5 ? '#3B60E8' : '', - color: editProcess >= 5 ? '#fff' : '#B1B1B1', - borderColor: editProcess >= 5 ? '' : '#B1B1B1' - }}>5
-
= 5 ? '#353535' : '#878787', - fontWeight: editProcess >= 5 ? 'bold' : 'normal' - }} - >上传委托书
-
-
-
-
= 6 ? '#3B60E8' : '', - color: editProcess >= 6 ? '#fff' : '#B1B1B1', - borderColor: editProcess >= 6 ? '' : '#B1B1B1' - }}>6
-
= 6 ? '#353535' : '#878787', - fontWeight: editProcess >= 6 ? 'bold' : 'normal' - }} - >上传商标局
-
- -
-
-
- -
-
- - -
-
- -
-
- -
-
- -
-
- -
-
-
+ ) } diff --git a/src/route/TrademarkMall/TrademarkExpertEdit.tsx b/src/route/TrademarkMall/TrademarkExpertEdit.tsx index 1f66947..5834a6a 100644 --- a/src/route/TrademarkMall/TrademarkExpertEdit.tsx +++ b/src/route/TrademarkMall/TrademarkExpertEdit.tsx @@ -1,151 +1,202 @@ -import { useEffect, useState } from 'react' +import { useEffect, useState, useContext } from 'react' import './trademark-edit.css' -import { useLocation } from 'react-router-dom'; +import { useLocation, useNavigate } from 'react-router-dom'; +import { expertRegister } from '../../request/api' +import { GlobalDispatchContext, reloadUser } from "../../context/GlobalContext"; +// import { useNavigate } from 'react-router-dom'; import { Form, Input, Button, - Modal + Modal, + message, + Spin } from 'antd'; +import useMessage from "antd/es/message/useMessage"; const { TextArea } = Input; export default function TrademarkExpertEdit() { + const nav = useNavigate() + const globalDispatchContext = useContext(GlobalDispatchContext); + const [messageApi, contextHolder] = useMessage(); const { state } = useLocation() const height = window.innerHeight - 180; const [form] = Form.useForm(); + const [upLodaing, setUpLodaing] = useState(false) const [modal, setModal] = useState(false) + const [trademarkName, setTrademarkName] = useState('') //名称 + const [trademarkContent, setTrademarkContent] = useState('') //描述 const onFinish = (values: any) => { console.log(values); + setTrademarkName(values.trademarkName) + setTrademarkContent(values.trademarkContent ? values.trademarkContent : '') setModal(true) } useEffect(() => { console.log('state', state); }, []) return ( -
-
-
-
- ! -
-
- 支付完成后会有商标专家联系您并为您服务，请确保填写的手机号真实准确。填写的商标信息后续可以修改，请您放心填写。 + + {contextHolder} +
+
+
+
+ ! +
+
+ 支付完成后会有商标专家联系您并为您服务。填写的商标信息后续可以修改，请您放心填写。 +
-
-
-
-
- ! -
-
-
至尊无忧注册由专业商标顾问团队为您全程代办商标申请和递交流程，
-
指定类目至尊无忧注册，指定类目被驳回可全额赔付，非指定类目驳回不支持赔付;
-
全部小类至尊无忧注册，商标局下发《商标驳回通知书》可全额赔付，包含部分驳回和全部驳回通知书。
+
+
+
+ ! +
+
+
至尊无忧注册由专业商标顾问团队为您全程代办商标申请和递交流程，
+
指定类目至尊无忧注册，指定类目被驳回可全额赔付，非指定类目驳回不支持赔付;
+
全部小类至尊无忧注册，商标局下发《商标驳回通知书》可全额赔付，包含部分驳回和全部驳回通知书。
+
-
-
+
-
+
+
+ 商标名称* ： +
+
+ + + + + + + + +
+
+
+
+ 需求描述 ： +
+
+ + + + + + + +
+
+
在您提交商标申请咨询单后，工作日期间专业顾问会在1小时内与您联系，非工作日时间会在下一个工作日与您取得联系。
+
本网站会保护您的个人信息，仅有本网站及其授权委托机构可以看到您提交的信息，请放心提供。
+ + + + +
+ +
+ +
+ +
+ { setModal(false) }} + okText='确定' + cancelText='取消' + onOk={async () => { + setModal(false) + + try { + setUpLodaing(true) + await expertRegister({ + trademarkName, + trademarkContent, + trademarkMode: state.id, + trademarkModeName: state.title + }) + reloadUser(messageApi, globalDispatchContext).then(() => { + setModal(false) + message.success('付款成功'); + nav(-1) + + }); + setUpLodaing(false) + } catch (error: any) { + setUpLodaing(false) + + // setAddLoading(false) + if (error.response) { + const data = error.response.data; + message.error(data.msg ? data.msg : `${data.path}(${data.status})`) + } else { + console.error(error) + } + } finally { + // setAddLoading(false) + setUpLodaing(false) + } + // setModal(false) + }} > -
-
- 商标名称* ： -
-
- - - - - - - - -
-
-
-
- 需求描述 ： -
-
- - - - - - - -
-
-
在您提交商标申请咨询单后，工作日期间专业顾问会在1小时内与您联系，非工作日时间会在下一个工作日与您取得联系。
-
本网站会保护您的个人信息，仅有本网站及其授权委托机构可以看到您提交的信息，请放心提供。
- - - - -
- -
- - - + 该操作会扣除{state.price}元，且提交后无法撤销，确定操作吗？ +
- { setModal(false) }} - okText='确定' - cancelText='取消' - > - 该操作会扣除{state.price}元，确定操作吗？ - -
+ ) } diff --git a/src/route/TrademarkMall/TrademarkMall.tsx b/src/route/TrademarkMall/TrademarkMall.tsx index d9c95fa..f18df0e 100644 --- a/src/route/TrademarkMall/TrademarkMall.tsx +++ b/src/route/TrademarkMall/TrademarkMall.tsx @@ -1,19 +1,1002 @@ -// import React from 'react' +import { useState, useEffect } from 'react' import nothingImg from '../../static/appimgs/nothing.png' +import { useLocation, useNavigate } from 'react-router-dom'; +import { trademarkList, getFileTypeByIds, supplementTrademarkData } from '../../request/api' +import { showImage, uploadFileUrl } from '../../request/request' +import { UploadOutlined } from '@ant-design/icons'; +import { Modal } from 'antd'; +import type { TableProps, } from 'antd'; +import { + message, Spin, + Pagination, + Table, Image, + Input, Form, Upload, Button +} from 'antd'; +const { TextArea } = Input; +import { buySupplementList, supplementDetail } from '../../request/api' export default function TrademarkMall() { - const height = window.innerHeight - 180; - const data = [] - return ( -
- {data.length <= 0 ? (
+ // 获取上传过的文件类型 + const getUpFileTypeByIdsArray = async (ids: string) => { + try { + const res: any = await getFileTypeByIds({ + ids: ids + }) + console.log(res); + const newUpFile = res.map((item: any) => { + return { + uid: item.fileId, + name: item.fileName, + status: 'done', + url: showImage(item.fileId, false) + } + }) + // console.log(newUpFile, 'newUpFile'); + setUpFileArray(newUpFile) - + } 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 [trademarkId, setTrademarkId] = useState('') + const getBuySupplementList = async (page: number, id: string) => { + try { + const res: any = await buySupplementList({ + orderId: id, + page: page, + rows: 10 + }) + // setPage(res.page) + // setTotal(res.total) + // // console.log(res); + // setData(res.rows) + setCommunicationData(res.rows) + setCommunicationTotal(res.total) + setCommunicationPage(res.page) + } catch (error: any) { + + if (error.response) { + const data = error.response.data; + messageApi.open({ + type: 'error', + content: data.msg ? data.msg : `${data.path}(${data.status})`, + }); + } else { + console.error(error) + } + } + } + const token = sessionStorage.getItem('token') + const [upFileArray, setUpFileArray] = useState([]) // 上传的文件数组 + const [form] = Form.useForm(); + const [modal, setModal] = useState(false) + // 自定义验证函数 + const validateContentOrFile = (_rule: any, _value: any, callback: (error?: string) => void, form: any) => { + const { upCorrectionRemark, upFile } = form.getFieldsValue(); + if (upCorrectionRemark || (upFile && Array.isArray(upFile.fileList) && upFile.fileList.length > 0)) { + callback(); + } else { + callback('内容和附件至少需要填写或上传一项'); + } + }; + // 点击上传资料确定 + + const [correctionId, setCorrectionId] = useState('') // 点击查看内容选中的id + // 是否需要回复信息 + const [correctionReply, setCorrectionReply] = useState('') //0为仅通知 , 1为需要回复 + const [orderId, setOrderId] = useState('') + const submitData = async (params: any) => { + if (correctionReply == '0') { + try { + await supplementTrademarkData({ + correctionParentId: correctionId, + // correctionType: CorrectionType, + orderId: orderId, + correctionFiles: '', + correctionRemark: '已读', + }) + getBuySupplementList(communicationPage, trademarkId) + getTrademarkList(page) + // if (props.user == 'sell') { + // getSellSupplementList() + // } else if (props.user == 'buy') { + // getBuySupplementList() + // } + // props.upData() + // messageApi.open({ + // type: 'success', + // content: '已提交', + // }) + setIsModalVisible(false) + // form.resetFields(); + + // console.log(res); + + } 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) + } + } + } else { + try { + await supplementTrademarkData({ + correctionParentId: correctionId, + // correctionType: CorrectionType, + orderId: orderId, + correctionFiles: params.correctionFiles, + correctionRemark: params.correctionRemark, + }) + // if (props.user == 'sell') { + // getSellSupplementList() + // } else if (props.user == 'buy') { + // getBuySupplementList() + // } + // props.upData() + messageApi.open({ + type: 'success', + content: '已提交', + }) + getTrademarkList(page) + + getBuySupplementList(communicationPage, trademarkId) + setIsModalVisible(false) + // form.resetFields(); + + // console.log(res); + + } 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 [detailData, setDetailData] = useState({}) + // 补充资料弹窗 + const [isModalVisible, setIsModalVisible] = useState(false) + // 沟通弹窗 + const [visible, setVisible] = useState(false); + const [fileList, setFileList] = useState([]) // 上传文件列表 + // 获取文件类型 + const getFileTypeByIdsArray = async (ids: string) => { + try { + const res: any = await getFileTypeByIds({ + ids: ids + }) + setFileList(res) + + } 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 [orderId, setOrderId] = useState('') + const [checkRemark, setCheckRemark] = useState('') //失败原因 + const [messageApi, contextHolder] = message.useMessage(); + const { state } = useLocation() + const nav = useNavigate(); + const height = window.innerHeight - 180; + const columns: TableProps['columns'] = [ + { + title: '序号', + dataIndex: 'index', + key: 'index', + align: 'center', + fixed: 'left', + width: 90, + render: (_text, _record, index) => (page - 1) * 10 + index + 1, // 显示序号，从1开始 + + }, + + { + title: '服务类型', + dataIndex: 'trademarkModeName', + fixed: 'left', + align: 'center', + key: 'trademarkModeName', + width: 150, + ellipsis: { + showTitle: true, + }, + + }, + + { + title: '类型/名称', + fixed: 'left', + dataIndex: 'trademarkName', + key: 'trademarkName', + align: 'center', + ellipsis: { + showTitle: true, + }, + width: 200, + render: (_text, record) => ( + + {record.trademarkType == 'text' ? '文字' : record.trademarkType == 'image' ? '图形' : record.trademarkType == 'text-image' ? '图文' : ''} + / + {record.trademarkName} + {/* {record} */} + + ) + + }, + { + title: '涉及类别', + dataIndex: 'trademarkTypeDTOS', + align: 'center', + key: 'trademarkTypeDTOS', + width: 150, + ellipsis: { + showTitle: true, + }, + render: (trademarkTypeDTOS) => ( + // trademarkTypeDTOS.map( + //
+ + //
+ // ) + trademarkTypeDTOS.length > 0 ? ( + trademarkTypeDTOS.map((item: any) => { + return ( +
+ 第{item.code}类 : {item.name} +
+ ) + + }) + ) : '暂无' + ) + + }, + { + title: '商标图样', + dataIndex: 'trademarkPhoto', + align: 'center', + key: 'trademarkPhoto', + width: 200, + render: (text) => ( + + text ? ( + + + ) : '暂无' + ) + }, + { + title: '状态', + dataIndex: 'trademarkStatus', + align: 'center', + key: 'trademarkStatus', + width: 110, + render: (text, record) => ( +
+ {text == '-1' ? +
{ + setCheckRemark(record.checkRemark) + + setModal(true) + // console.log(record.checkRemark); + }} + > +
审核未通过
+
已退款
+
(点击查看原因)
+
+ : text == '0' ? + 待付款 + : text == '1' ? + 已付款 + : text == '2' ? + 审核中 + : text == '3' ? + 提交至商标局 + : text == '4' ? + 不予受理 + : text == '5' ? + 已受理 + : text == '6' ? + 已发初审公告 + : text == '7' ? + 部分驳回 + : text == '8' ? + 全部驳回 + : text == '9' ? + 已下证 : '未知' + } +
+ ) + }, + + + // { + // title: '申请人', + // // 使用数组形式访问嵌套对象属性 + // dataIndex: ['trademarkUserDTO', 'name'], + // align: 'center', + // // 修改 key 保证唯一性 + // key: 'trademarkUserDTOName', + // width: 150, + // render: (text) => ( + // + // {text || '-'} + // + // ) + // }, + // // { + // // title: '申请人证件号', + // // dataIndex: ['trademarkUserDTO', 'name'], + // // align: 'center', + // // key: 'appOrderId', + // // width: 150, + // // render: (text) => ( + // // + // // {text ? text : '未完善'} + // // + // // ) + // // }, + // { + // title: '联系人', + // // 使用数组形式访问嵌套对象属性 + // dataIndex: ['trademarkUserDTO', 'contactName'], + // align: 'center', + // // 修改 key 保证唯一性 + // key: 'trademarkUserDTOContactName', + // width: 150, + // render: (text) => ( + // + // {text || '-'} + // + // ) + // }, + { + title: '操作', + // dataIndex: 'contractManagementId', + align: 'center', + // key: 'appOrderId', + width: 150, + // bordeLeft: true, + fixed: 'right', + render: (record) => (
暂无数据
-
) : (<>)} -
+ + }}> + + { + nav(`/trademark-ai-edit/${record.trademarkId}`, { + // state: { + // trademarkMode: record.trademarkMode, //申请类型id + // trademarkModeName: record.trademarkModeName, //申请类型名称 + // trademarkId: record.trademarkId, //商标id + + // } + }) + // console.log(record.checkStatus); + + + + }}>{ + record.trademarkStatus == '2' || record.trademarkStatus == '3'|| record.trademarkStatus == '4' || record.trademarkStatus == '5'|| record.trademarkStatus == '6'|| record.trademarkStatus == '7'|| record.trademarkStatus == '8'|| record.trademarkStatus == '9'? '查看' : '编辑' + } + + 0 ? 'unset' : 'none', + display: Number(record.trademarkStatus) >= 4 ? 'unset' : 'none', + marginLeft: 10, + }} + onClick={async () => { + setTrademarkId(record.trademarkId) + setVisible(true) + getBuySupplementList(1, record.trademarkId) + }} + + >进度沟通 +
0 ? 'unset' : 'none', + }}> +
+ {record.waitCorrectionCount} +
+
+ +
+ + ) + + }, + ] + const [disabled, setDisabled] = useState(false) + const getSupplementDetail = async (id: string) => { + try { + const res: any = await supplementDetail(id) + console.log(res); + setDetailData(res) + if (res.correctionFiles) { + await getFileTypeByIdsArray(res.correctionFiles) + } + if (res.buyId) { + setDisabled(true) + const newData: any = await supplementDetail(res.buyId) + form.setFieldsValue({ + upCorrectionRemark: newData.correctionRemark, // 内容 + + }) + if (newData.correctionFiles) { + getUpFileTypeByIdsArray(newData.correctionFiles) + + } + + } else { + setDisabled(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 [data, setData] = useState([]) + // 沟通数组 + const [communicationData, setCommunicationData] = useState([]) + // 沟通分页 + const [communicationPage, setCommunicationPage] = useState(1) + // 沟通分页条数 + const [communicationTotal, setCommunicationTotal] = useState(0) + const communicationColums: TableProps['columns'] = [ + { + title: '序号', + dataIndex: 'index', + key: 'index', + align: 'center', + width: 90, + render: (_text, _record, index) => (communicationPage - 1) * 10 + index + 1, // 显示序号，从1开始 + + }, + { + title: '资料主题', + dataIndex: 'correctionTitle', + align: 'center', + width: 200, + render: (text) => ( +
{text}
+ ) + }, + { + title: '资料内容', + dataIndex: 'correctionRemark', + align: 'center', + width: 300, + render: (text) => ( +
{text}
+ + ) + }, + { + title: '发起时间', + dataIndex: 'createTime', + align: 'center', + width: 200, + + }, + { + title: '当前进度', + dataIndex: 'correctionStatus', + align: 'center', + width: 100, + render: (text) => ( + <> + + {text == '4' ? '不予受理' : text == '5' ? '已受理' : text == '6' ? '已发初审公告' : text == '7' ? '部分驳回' : text == '8' ? '全部驳回' : text == '9' ? '商标注册完成' : "未知"} + + ) + + }, + { + title: '状态', + dataIndex: 'buyId', + align: 'center', + width: 100, + render: (text) => ( + <> + + 待补充 + 已补充 + {/* {text == '4' ? '不予受理' : text == '5' ? '已受理' : text == '6' ? '已发初审公告' : text == '7' ? '部分驳回' : text == '8' ? '全部驳回' : text == '9' ? '商标注册完成' : "未知"} */} + + ) + + }, + { + title: '操作', + align: 'center', + width: 100, + render: (record: any) => ( + { + console.log(record); + setCorrectionReply(record.correctionReply) + // console.log(record.correctionId); + setCorrectionId(record.correctionId) + getSupplementDetail(record.correctionId) + setIsModalVisible(true) + setOrderId(record.orderId) + form.resetFields(); + }}>查看内容 + ) + + }, + + ] + const [loading, setLoading] = useState(false) + const [page, setPage] = useState(1) + const [total, setTotal] = useState(0) + const getTrademarkList = async (page: any) => { + try { + setLoading(true) + setData([]) + const res: any = await trademarkList({ + + keywords: state && state.keywords ? state.keywords : '', + trademarkStatus:state && state.trademarkStatus ? state.trademarkStatus : '', + rows: 10, + page: page + }) + // console.log('结果', res); + setData(res.rows) + setTotal(res.total) + setLoading(false) + + } 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) + } + } + // useEffect(() => { + // // console.log(state.keywords); + // getTrademarkList(1) + // // console.log(1); + + // }, []) + useEffect(() => { + // console.log(state.keywords); + getTrademarkList(1) + }, [state]) + + return ( + +
+ {contextHolder} + + {data.length <= 0 ? (
+ + +
暂无数据
+
) : ( +
+
+ +
+ +
+
+ { + setPage(page) + getTrademarkList(page) + }} /> +
+ +
+ )} +
+ { setModal(false) }} + + > + 失败原因:{checkRemark} + + { setVisible(false) }} + width={1300} + + > + { + setCommunicationPage(currentPage); + getBuySupplementList(currentPage, trademarkId) + }, + showSizeChanger: false, + current: communicationPage + + } + } + style={{ textAlign: 'center' }} // 设置表格内容居中显示 + rowKey="trademarkId" // 指定数据项的唯一标识符 + locale={{ emptyText: '暂无数据' }} + >
+ + { + setIsModalVisible(false); + // 清空表单 + form.resetFields(); + }} + centered + > +
+ {/* {correctionId} + {CorrectionType} */} +
+
+
平台需要您补充的内容说明
+
+
+
主题
+ +
+
+
内容
+ +
+
+
附件
+ {fileList.length > 0 ? ( + //
材料列表
+
+ { + fileList.map((item: any) => { + return ( +
{ + + window.open(showImage(item.fileId, false)) + + }} + > + {item.fileName} +
+ ) + }) + } +
+ + ) : ( +
+ 无 +
+ )} +
+
+
+
+
在下面填写您补充的内容
+
+
{ + const uids = upFileArray.map((file: any) => file.response.data.fileId).join(','); + // console.log('提取的 uid 字符串:', uids); + submitData({ + correctionFiles: uids, + correctionRemark: value.upCorrectionRemark, + }) + + + }} + onFinishFailed={() => { + messageApi.open({ + type: 'error', + content: '内容和附件至少需要填写或上传一项', + }) + }} + autoComplete="off" + > +
+
内容
+ validateContentOrFile(rule, value, callback, form), + // }, + + // ]} + rules={correctionReply == '0' ? [] : [ + { + validator: (rule, value, callback) => validateContentOrFile(rule, value, callback, form), + }, + ]} + + > + + + +
+
+
附件
+
+ validateContentOrFile(rule, value, callback, form), + // }, + // ]} + rules={correctionReply === '0' ? [] : [ + { + validator: (rule, value, callback) => validateContentOrFile(rule, value, callback, form), + }, + ]} + > + + { + setUpFileArray(info.fileList) + // console.log(info.fileList); + + }} + headers={{ 'Auth': `Bearer ${token}` }} + disabled={correctionReply == '0'|| disabled} + > + + + + + +
+ +
+ + +
+
+ + +
+
+ + + +
+
+
+ + ) } diff --git a/src/route/TrademarkMall/components/EditFive/EditFive.css b/src/route/TrademarkMall/components/EditFive/EditFive.css new file mode 100644 index 0000000..30f0afa --- /dev/null +++ b/src/route/TrademarkMall/components/EditFive/EditFive.css @@ -0,0 +1,27 @@ +.editFiveUpBox { + width: 300px; + height: 150px; + border: 1px dashed #979797; + color: #979797; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + cursor: pointer; + background-color: white; +} + +.showImg { + width: 190px; + height: 150px; + border: 1px dashed #979797; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin-left: 120px; + position: relative; +} +.tipsRed{ + color: red; +} \ No newline at end of file diff --git a/src/route/TrademarkMall/components/EditFive/EditFive.tsx b/src/route/TrademarkMall/components/EditFive/EditFive.tsx index 45dcd0c..b874e4c 100644 --- a/src/route/TrademarkMall/components/EditFive/EditFive.tsx +++ b/src/route/TrademarkMall/components/EditFive/EditFive.tsx @@ -1,50 +1,395 @@ -// import React from 'react' -import { Button } from 'antd' -export default function editFive(props: any) { - const height = window.innerHeight - 350; +import { useEffect, useState } from 'react' +import { Button, Form, message, Upload, Input, Spin, Image } from 'antd' +import { showImage, uploadDeputeUrl } from '../../../../request/request' +import { generateDepute, uploadDepute } from '../../../../request/api' +import './EditFive.css' +import { + PlusOutlined +} from '@ant-design/icons'; +import file from '../../../../static/editFive/file.png' +export default function EditFive(props: any) { + const token = sessionStorage.getItem('token') + const [form] = Form.useForm(); const handleSubmit = () => { - // console.log(form); - props.setEditProcess(6); - // 调用表单实例的 submit 方法 - // form.submit(); + + form.submit(); + + // props.setEditProcess(6); }; + // const [imgList, setImgList] = useState([]) + const [upFileLoading, setUpFileLoading] = useState(false) //上传文件 + const [createLoading, setCreateLoading] = useState(false) //生成委托书 + const [upLoading, setUpLoading] = useState(false) //提交 + const [upFileArray, setUpFileArray] = useState([]) + // 定义允许上传的文件格式 + const ALLOWED_FILE_TYPES = ['.jpg', '.jpeg',]; + const beforeUpload = (file: File) => { + const fileExt = file.name.slice(file.name.lastIndexOf('.')).toLowerCase(); + if (!ALLOWED_FILE_TYPES.includes(fileExt)) { + message.error(`仅支持 ${ALLOWED_FILE_TYPES.join(', ')} 格式的文件`); + return Upload.LIST_IGNORE; + } + return true; + }; + useEffect(() => { + if (props.editFiveData.trademarkFileDepute) { + form.setFieldValue('file', props.editFiveData.trademarkFileDepute) + setUpFileArray([ + { + uid: props.editFiveData.trademarkFileDepute, + name: props.editFiveData.trademarkFileDepute, + status: 'done', + url: showImage(props.editFiveData.trademarkFileDepute, false) + } + ]) + } + }, [props.editFiveData]) + const onFinish = async (values: any) => { + // console.log('Success:', values); + // props.setEditProcess(6); + if (values.file == props.editFiveData.trademarkFileDepute) { + props.setEditProcess(6); + return + + } + + try { + setUpLoading(true) + await uploadDepute(props.trademarkId, { + trademarkFileDepute: values.file + }) + setUpLoading(false) + props.setEditFiveData({ + trademarkFileDepute: values.file + }) + props.setEditProcess(6); + } + catch (error: any) { + if (error.response) { + setUpLoading(false) + + const data = error.response.data; + message.error(data.msg ? data.msg : `${data.path}(${data.status})`) + } else { + console.error(error) + } + } + finally { + setUpLoading(false) + } + }; + const height = window.innerHeight - 350; + return ( -
-
-
-
-
- - -
-
+ +
+ +
+
+
+
{ + errorInfo.errorFields.forEach((field) => { + if (field.errors.length > 0) { + // 显示每条错误信息 + message.error(field.errors[0]); + } + }); + }} + > +
+
上传委托书* ：
+
+ + + + + + + +
0 && upFileArray[0].url ? 'none' : 'unset' + }}> + { + + if (info.file.status === 'uploading') { + setUpFileLoading(true) + // const { fileList } = info; + // setUpFileArray(fileList); + return; + } + if (info.file.status === 'done') { + // console.log(info.file.response.data); + setUpFileLoading(false) + setUpFileArray([ + { + uid: info.file.response.data.fileId, + name: info.file.response.data.fileName, + status: 'done', + url: showImage(info.file.response.data.fileId, false) + } + ]) + + form.setFieldsValue({ + file: info.file.response.data.fileId, + }); + } + if (info.file.status === 'error') { + setUpFileLoading(false) + // 显示错误提示 + // message.error(`上传失败,请重新上传`); + message.error(info.file.response.msg ? info.file.response.msg : '上传失败'); + setUpFileArray([]) + + } + // console.log(upCodeArray); + + }} + onRemove={() => { + setUpFileArray([]) + form.setFieldsValue({ + file: '', // 清除表单值 + }); + }} + beforeUpload={beforeUpload} + // onPreview={handlePreview} + // onChange={handleUploadChange} + headers={{ 'Auth': `Bearer ${token}` }} + disabled={upFileLoading || upFileArray.length > 0} + > + {/* */} + + +
+
+
上传委托书
+
+ + + +
+
0 && upFileArray[0].url ? 'unset' : 'none' + + }} + > +
+ 0 ? upFileArray[0].url : ''} style={{ + maxWidth: 300, + height: 150, + }} /> +
{ + setUpFileArray([]) + form.setFieldsValue({ + file: '', // 清除表单值 + }); + }} + >删除
+
+ + +
+
+
+ 重要提示： +
+
+ -上传委托书只需在右下角签字，请勿盖章确保签字工整清晰; +
+
+ -委托书上的信息 不能手动修改或添加信息; +
+
+ -委托书模板图片大小不能超过1.5M，格式为JPG格式图片; +
+
+ -扫描(推荐)或拍照前，请确保委托书模板纸面工整顺平，不能有褶皱、反光等; +
+
+ -请确保上传的委托书字迹工整、清晰; +
+
+ -当申请人信息修改后，请重新下载委托书签字上传审核。 +
+
+ + {/*
{ + window.open('https://www.baidu.com') + }} + >[ 下载模板 ]
*/} + + +
+
+ + + +
+
+ +
+ 示例图片 +
+
{ + // window.open(downloadDeputeUrl(props.trademarkId)) + try { + setCreateLoading(true) + const res: any = await generateDepute(props.trademarkId) + // console.log(res); + window.open(showImage(res.fileId)) + + setCreateLoading(false) + } catch (error: any) { + if (error.response) { + setCreateLoading(false) + + const data = error.response.data; + message.error(data.msg ? data.msg : `${data.path}(${data.status})`) + } else { + console.error(error) + } + } finally { + setCreateLoading(false) + + } + }} + > + [ 下载模板 ] +
+
+ +
+ + +
+
+
+ + +
+ + +
+ ) } diff --git a/src/route/TrademarkMall/components/EditFour/EditFour.tsx b/src/route/TrademarkMall/components/EditFour/EditFour.tsx index be745c8..30eac11 100644 --- a/src/route/TrademarkMall/components/EditFour/EditFour.tsx +++ b/src/route/TrademarkMall/components/EditFour/EditFour.tsx @@ -1,50 +1,298 @@ -// import React from 'react' -import { Button } from 'antd' -export default function editFour(props: any) { +import { useState, useContext, useEffect } from 'react' +import './edit-four.css' +import { Button, Table, Modal, message, Spin } from 'antd' +import { orderPay } from '../../../../request/api' +// import { GlobalDispatchContext, reloadUser } from "../../context/GlobalContext.ts"; +import { GlobalDispatchContext, reloadUser } from "../../../../context/GlobalContext"; +import type { TableProps } from 'antd'; +interface DataType { + id: string; + type: string; //付费方式 + name: string;//服务名称 + category: string; //类别 + goods: string; //服务 + goodsType: string; //商标类型 + price: string; //单价 + num: string; //数量 +} +import useMessage from "antd/es/message/useMessage"; +export default function EditFour(props: any) { + const globalDispatchContext = useContext(GlobalDispatchContext); + const [messageApi, contextHolder] = useMessage(); + const [payLodaing, setPayLodaing] = useState(false) + const postOrderPay = async () => { + try { + setModal(false) + + setPayLodaing(true) + const res = await orderPay(props.trademarkId) + console.log(res); + reloadUser(messageApi, globalDispatchContext).then(() => { + + message.success('付款成功'); + + }); + props.setTrademarkStatus('1') + props.setEditProcess(5) + setPayLodaing(false) + + } catch (error: any) { + setModal(false) + setPayLodaing(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 { + setPayLodaing(false) + setModal(false) + + } + } + + + const columns: TableProps['columns'] = [ + { + align: 'center', + title: '付费方式', + dataIndex: 'payType', + key: 'payType', + // render: () => '预付费', + width: 100, + }, + { + align: 'center', + width: 100, + + title: '服务名称', + dataIndex: 'serverName', + key: 'serverName', + // render: () => '商标申请', + }, + { + align: 'center', + width: 150, + ellipsis: true, + title: '类别', + dataIndex: 'typeName', + key: 'typeName', + }, + { + align: 'center', + width: 300, + ellipsis: true, + title: '指定商品或服务', + dataIndex: 'subNames', + key: 'subNames', + render: (text) => { + return ( + 共{text.split(',').length}项 : {text} + ) + + }, + }, + { + align: 'center', + width: 150, + title: '商标类型', + render: () => { + if (props.trademarkType == 'text') { + return '文字' + } + if (props.trademarkType == 'image') { + return '图形' + } + if (props.trademarkType == 'text-image') { + return '图文' + } + }, + }, + { + align: 'center', + width: 100, + + title: '单价', + dataIndex: 'money', + key: 'money', + render: (text) => text / 100, + }, + { + align: 'center', + width: 100, + title: '数量', + render: () => '1', + }, + + + ]; + const [data, setData] = useState([]) + useEffect(() => { + + setData(props.orderList) + + }, [props.orderList]) + // const data: DataType[] = [ + // { + // id: '1', + // type: '预付费', //付费方式 + // name: '商标申请',//服务名称 + // category: '第35类 广告销售', //类别 + // goods: '共10项:喜喜喜喜喜喜,哈哈哈啊哈哈哈哈,呵呵呵呵呵,嘎嘎嘎嘎嘎嘎嘎,的爱德华八克很大空间和大开杀空间,按时间打假打私', //服务 + // goodsType: '文字和图案', //商标类型 + // price: '630.66', //单价 + // num: '1', //数量 + // }, + // { + // id: '2', + // type: '预付费', //付费方式 + // name: '商标申请',//服务名称 + // category: '第35类 广告销售', //类别 + // goods: '共10项:喜喜喜喜喜喜,哈哈哈啊哈哈哈哈,呵呵呵呵呵,嘎嘎嘎嘎嘎嘎嘎,的爱德华八克很大空间和大开杀空间,按时间打假打私', //服务 + // goodsType: '文字和图案', //商标类型 + // price: '10000.66', //单价 + // num: '1', //数量 + // }, + + // ]; + const [modal, setModal] = useState(false) const height = window.innerHeight - 350; const handleSubmit = () => { // console.log(form); - props.setEditProcess(5); + // props.setEditProcess(5); + setModal(true) // 调用表单实例的 submit 方法 // form.submit(); }; return ( -
-
-
-
-
- + +
+
+
+
+
+ 已完成付款 +
+ +
+
+ { setModal(false) }} + okText='确定' + cancelText='取消' + onOk={() => { + // setModal(false) + // props.setEditProcess(5) + postOrderPay() }} - onClick={() => { - props.setEditProcess(3) + okButtonProps={{ + disabled: payLodaing }} - >上一步 - + + > + 该操作会扣除{data.reduce((pre: number, cur: any) => pre + cur.money, 0) / 100}元，付款后无法修改,确定操作吗？ +
-
+ ) } diff --git a/src/route/TrademarkMall/components/EditFour/edit-four.css b/src/route/TrademarkMall/components/EditFour/edit-four.css new file mode 100644 index 0000000..f1fb584 --- /dev/null +++ b/src/route/TrademarkMall/components/EditFour/edit-four.css @@ -0,0 +1,11 @@ +.editFourTop{ + /* background-color: pink; */ + padding: 10px; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: space-between; +} +.editFourTopL{ + font-size: 18px; +} \ No newline at end of file diff --git a/src/route/TrademarkMall/components/EditOne/EditOne.css b/src/route/TrademarkMall/components/EditOne/EditOne.css index ff25616..ead6f2e 100644 --- a/src/route/TrademarkMall/components/EditOne/EditOne.css +++ b/src/route/TrademarkMall/components/EditOne/EditOne.css @@ -9,6 +9,32 @@ box-sizing: border-box; */ } +.editOneFomrBox { + /* WebKit 浏览器（Chrome、Safari 等） */ + scrollbar-width: thin; + /* Firefox */ + scrollbar-color: #888 #f1f1f1; + /* Firefox */ +} +.editOneFomrBox ::-webkit-scrollbar { + width: 8px; + /* 垂直滚动条宽度 */ +} +.editOneFomrBox ::-webkit-scrollbar-track { + background: #f1f1f1; + /* 滚动条轨道背景颜色 */ +} +.editOneFomrBox ::-webkit-scrollbar-thumb { + background: #888; + /* 滚动条滑块颜色 */ + border-radius: 4px; + /* 滚动条滑块圆角 */ +} +.editOneFomrBox ::-webkit-scrollbar-thumb:hover { + background: #555; + /* 鼠标悬停时滚动条滑块颜色 */ +} + .editFormTitle { font-size: 18px; margin-bottom: 20px; @@ -38,7 +64,11 @@ .redTitle { color: red; } -.pointerBlue{ + +.pointerBlue { color: var(--color-blue); cursor: pointer; +} +.upBox{ + background: skyblue; } \ No newline at end of file diff --git a/src/route/TrademarkMall/components/EditOne/EditOne.tsx b/src/route/TrademarkMall/components/EditOne/EditOne.tsx index 4855661..e79e6ea 100644 --- a/src/route/TrademarkMall/components/EditOne/EditOne.tsx +++ b/src/route/TrademarkMall/components/EditOne/EditOne.tsx @@ -1,66 +1,180 @@ -import { useState } from 'react' -import { Button, Radio, Form, Input, Upload, message, Image, Spin } from 'antd' +import { useState, useEffect } from 'react' +import { Button, Radio, Form, Input, Upload, message, Image, Spin, Modal } from 'antd' import './EditOne.css' -import { uploadFileUrl, showImage } from '../../../../request/request' +import { uploadFileUrl, showImage, uploadImageAddUrl, downloadAuthBookUrl, uploadDeputeFileUrl } from '../../../../request/request' +import { trademarkBaseInfo, aiGenerateImage, fileDetail } from '../../../../request/api' +// import { geSelectUrl, getFileUrl } from '../../../../util/AjaxUtils' import { - DeleteOutlined + // 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(); // 文字商标表单 const [formB] = Form.useForm(); // 图形商标表单 + const [formC] = Form.useForm(); // 图形商标表单 + const [upFileAModal, setUpFileAModal] = useState(false) + const [upFileAType, setUpFileAType] = useState('姓名授权书') + const [fileAName, setFileAName] = useState([]); //A姓名授权书 + const [fileAFace, setFileAFace] = useState([]); //A肖像授权书 + const [fileABook, setFileABook] = useState([]); //A期刊证明 + const [fileA, setFileA] = useState([]); //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([]); //C姓名授权书 + const [fileCFace, setFileCFace] = useState([]); //C肖像授权书 + const [fileCBook, setFileCBook] = useState([]); //C期刊证明 + const [fileC, setFileC] = useState([]); //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; - const [goodsType, setGoodsType] = useState('a') + // 查看表单数据是否发生改变 + 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 === 'a') { + if (goodsType === 'text') { formA.submit(); - } else if (goodsType === 'b') { + } else if (goodsType === 'image') { formB.submit(); + } else if (goodsType === 'text-image') { + formC.submit(); } else { - // 表单不显示时，直接更新步骤 props.setEditProcess(2); } + // props.setEditProcess(2); + }; - const [fileList, setFileList] = useState([]); - - const handleChange: UploadProps['onChange'] = (info) => { - // console.log(info.file.status); + const [disabled, setDisabled] = useState(false) + // 文字商标 若设计肖像上传得文件 + // const [fileList, setFileList] = useState([]); + // 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') { - if (info.file.status === 'uploading') { - // setFileList([]) - 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) + // } + // ]) - // const fileId = info.file.response.data.fileId; - // // console.log(downloadUrl(fileId)); + // return; + // } + // if (info.file.status === 'error') { + // setDisabled(false) + // message.error(`上传失败`); + // return; + // } + // }; + // 文字图形组合商标 若涉及肖像上传得文件 + // const [fileListC, setFileListC] = useState([]); + // const handleChangeC: UploadProps['onChange'] = (info) => { + // // console.log(info.file.status); - // const url = showImage(fileId, false); - setFileList([ - { - 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; - } - }; + // 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('') const [imgList, setImgList] = useState([]) @@ -76,13 +190,15 @@ export default function EditOne(props: any) { 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, @@ -91,7 +207,7 @@ export default function EditOne(props: any) { url: showImage(info.file.response.data.fileId, false) } ]) - formA.setFieldsValue({ imgUrl: info.file.response.data.fileId }) + formA.setFieldsValue({ trademarkPhoto: info.file.response.data.fileId }) return; } @@ -101,14 +217,229 @@ export default function EditOne(props: any) { return; } }; - const onFinishA = (values: any) => { - console.log(values); + + // 上传图形商标图片 + const [imgLodaing, setImgLodaing] = useState(false) + const [upImglist, setUpImglist] = useState([]) + + // 点击下一步如果需要保存的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 = (values: any) => { + + + 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([]) + 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) => { @@ -116,509 +447,2042 @@ export default function EditOne(props: any) { }; 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 == '1') { + // formA.setFieldsValue({ imgUrl: generateImgId }) // } - // if (e.target.value === '2') { - // formA.setFieldsValue({ imgUrl: imgList[0]?.uid}) + // if (e.target.value == '2') { + // formA.setFieldsValue({ imgUrl: imgList[0]?.uid }) // } - formA.setFieldsValue({ imgUrl: '' }) - setGenerateImgId('') - setImgList([]) + // 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 ( -
-
-
-
-
- ! -
-
-
智能商标申请存在较高的失败风险，建议无商标申请经验的用户使用“专家辅助申请"或"至尊无忧注册"提高商标申清通过率。
-
当前仅提供文字、图形或文字图形组合商标申请;暂不支持立体商标、声音商标、证明商标、集体商标的申请。
-
商标局录入的商标信息以商标图样为准，且最终使用需与商标图样一致，请您确认手动上传的商标图样是您想要注册的商标。
-
-
-
+
+ {contextHolder} +
+
- 基本信息 -
-
-
- 商标类型*： +
+
+ ! +
+
+
智能商标申请存在较高的失败风险，建议无商标申请经验的用户使用“专家辅助申请"或"至尊无忧注册"提高商标申清通过率。
+
当前仅提供文字、图形或文字图形组合商标申请;暂不支持立体商标、声音商标、证明商标、集体商标的申请。
+
商标局录入的商标信息以商标图样为准，且最终使用需与商标图样一致，请您确认手动上传的商标图样是您想要注册的商标。
+
+
+
+ 基本信息 +
+
- - 文字商标 - 图形商标 - 文字图形组合商标 - -
- 如何选择? -
-
-
{ - // console.log(errorInfo) - // message.error('请填写完整的信息!') - errorInfo.errorFields.forEach((field) => { - if (field.errors.length > 0) { - // 显示每条错误信息 - message.error(field.errors[0]); - } - }); - }} - initialValues={{ softWare: '' }} - style={{ marginTop: 20 }} - > -
-
- 商标名称*： -
+ { + // console.log(errorInfo) + // message.error('请填写完整的信息!') + errorInfo.errorFields.forEach((field) => { + if (field.errors.length > 0) { + // 显示每条错误信息 + message.error(field.errors[0]); + } + }); + }} + initialValues={{ softWare: '' }} + style={{ marginTop: 20 }} + > +
+
+ 商标名称*： +
-
- - + - + + + + +
+
+ 若您的商标涉及他人姓名/肖像/期刊，请下载 { + window.open(downloadAuthBookUrl()) + }} + >授权声明书模板，填写完盖章签字后 +
+ {/* } size="small" spinning={disabled}> + { + 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} + > + 上传文件 + + */} + { + setUpFileAModal(true) + }} + >上传文件 + + ({fileA.length}/3) + + +
+ {/*
+ ({fileList.length}/1) +
+
+ {fileList.length > 0 ? ( +
+
{ + window.open(showImage(fileList[0].uid, false)) + }}> + {fileList[0].name} +
+
{ + setFileList([]) + }}>
+
+ ) : ( + <> + )} +
*/} + +
+
+ 2021年12月10日起，商标名称作为必填项提交至商标局。商标局审核人员会根据商标图样中的文字字母等实际展示的信息重新命名商标名称，并展示在商标局官网。 如何解决请参考 { + window.open('https://www.aimzhu.com/operator/route/agreementportal/view?agreementId=3ffdc2e5-c828-4ab6-ac21-917388a7b2a5&title=%E5%95%86%E6%A0%87%E5%8F%82%E8%80%83%E6%96%87%E6%A1%A3') + }} + >文档 +
+ +
+ +
+ + +
+
+
+ 商标说明*： +
+ + + + + + + +
+ +
+
+ 商标图样*： +
+ + 自动生成 + 手动上传 + +
+
+
+
+ + + + + +
- 若您的商标涉及他人姓名/肖像/期刊，请下载授权声明书模板，填写完盖章签字后 -
+ 暂无图片 +
+ {/* 自动生成图片 */} +
+
+ +
+
+ {/* 手动上传图片 */} +
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', + }}> + +
+ +
+
{ + setImgList([]) + formA.setFieldsValue({ trademarkPhoto: '' }) + }} + >删除
+ +
+ + +
+ { 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) { + if (!isPNG && !isJPG) { // console.error('仅支持 PNG、PDF、JPG 格式的文件!'); - message.error('仅支持 PNG、PDF、JPG 格式的文件!'); + message.error('仅支持 PNG、JPG 格式的文件!'); } - return isPNG || isPDF || isJPG; + return isPNG || isJPG; }} // fileList={[]} - onChange={handleChange} + onChange={upImgHandleChange} showUploadList={false} headers={{ 'Auth': `Bearer ${token}` }} - disabled={fileList.length > 0} + disabled={imgList.length > 0} > - 上传附件 - -
-
- ({fileList.length}/1) -
-
- {fileList.length > 0 ? (
-
{ - window.open(showImage(fileList[0].uid, false)) - }}> - {fileList[0].name} -
-
{ - setFileList([]) - }}>
-
- ) : ( - <> - )} - {/* 嘻嘻 */} - {/* */} -
+ width: 200, + height: 100, + background: 'white', + color: 'black', -
-
- 2021年12月10日起，商标名称作为必填项提交至商标局。商标局审核人员会根据商标图样中的文字字母等实际展示的信息重新命名商标名称，并展示在商标局官网。 如何解决请参考文档 + lineHeight: '100px', + textAlign: 'center', + fontSize: '20px', + border: '1px dashed #d6d6d6', + }}> + 上传图片 +
+ +
+
+
+ +
-
-
-
- 商标说明*： -
+
{ + // console.log(errorInfo) + // message.error('请填写完整的信息!') + errorInfo.errorFields.forEach((field) => { + if (field.errors.length > 0) { + // 显示每条错误信息 + message.error(field.errors[0]); + } + }); + }} + initialValues={{ softWare: '' }} + style={{ marginTop: 20 }} + > - - - - - - - - -
- -
-
- 商标类型*： -
-
- - 自动生成 - 手动上传 - -
-
-
-
+
+ 商标说明*： +
+ + -
- 暂无图片 -
- {/* 自动生成图片 */} -
-
- -
-
- {/* 手动上传图片 */} -
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', - }}> + + +
+ +
+
+ 商标图样*： +
+
+ + + +
- + + { + // 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} + > +
+ 上传图片 +
+ +
+
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', + }}> + +
+ +
+
{ + setUpImglist([]) + formB.setFieldsValue({ trademarkPhoto: '' }) + }} + >删除
+ +
+
+
图片尺寸:500*500至1500*1500
+
图片大小:200kb内
+
图片格式:仅支持JPG格式
+
上传商标图样颜色为 黑白，注册成功使用时，可任意修改商标图样颜色使用
+
上传商标图样颜色为 彩色，注册成功使用时，不能修改商标图样颜色使用
+
建议上传商标图样颜色:黑白
+
+
+
+ +
+ + + + + +
+ + + +
+
{ + // console.log(errorInfo) + // message.error('请填写完整的信息!') + errorInfo.errorFields.forEach((field) => { + if (field.errors.length > 0) { + // 显示每条错误信息 + message.error(field.errors[0]); + } + }); + }} + initialValues={{ softWare: '' }} + style={{ marginTop: 20 }} + > +
+
+ 商标名称*： +
+ +
+ + + + +
{ - setImgList([]) - formA.setFieldsValue({ imgUrl: '' }) - }} - >删除
+ top: 70, + // textWrap: 'nowrap', + width: 800, + lineHeight: '20px', + }}> +
+ 若您的商标涉及他人姓名/肖像/期刊，请下载 { + window.open(downloadAuthBookUrl()) + }} + >授权声明书模板，填写完盖章签字后 +
+ {/* { + 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} + > + 上传文件 + */} + { + setUpFileCModal(true) + }}>上传文件 + + ({fileC.length}/3) + -
- - -
- - { - 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} - > -
- 上传图片
- - + {/*
+ ({fileListC.length}/1) +
+
+ {fileListC.length > 0 ? ( +
+
{ + window.open(showImage(fileListC[0].uid, false)) + }}> + {fileListC[0].name} +
+
{ + setFileListC([]) + }}>
+
+ ) : ( + <> + )} +
*/} + +
+
+ 2021年12月10日起，商标名称作为必填项提交至商标局。商标局审核人员会根据商标图样中的文字字母等实际展示的信息重新命名商标名称，并展示在商标局官网。 如何解决请参考 { + window.open('https://www.baidu.com/') + }} + >文档 +
+ +
+ +
+ + +
+
+
+ 商标说明*： +
+ + + + + + + + + +
+
+
+ 商标图样*： +
+
+ + + + +
+ + { + // 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} + > +
+ 上传图片 +
+ + +
+
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', + }}> + +
+ +
+
{ + setUpImglistC([]) + formC.setFieldsValue({ trademarkPhoto: '' }) + }} + >删除
+ +
+
+
图片尺寸:500*500至1500*1500
+
图片大小:200kb内
+
图片格式:仅支持JPG格式
+
上传商标图样颜色为 黑白，注册成功使用时，可任意修改商标图样颜色使用
+
上传商标图样颜色为 彩色，注册成功使用时，不能修改商标图样颜色使用
+
建议上传商标图样颜色:黑白
+
+
- -
- - -
+ + + +
+ + +
+
-
+ +
+
+ { + // handleSubmit() + // }} + onClose={() => { + setUpFileAModal(false) + }} + footer={[ + + ]} + // footer={null} + onCancel={() => { setUpFileAModal(false) }} > + } tip='正在上传' size="small" spinning={disabled}> -
+
类型
+
+ + 姓名授权书 + 肖像授权书 + 期刊证明 + +
请选择对应的授权文件类型
+
+
+
+
上传文件
+ {/* 姓名授权书 */} +
-
- 商标说明*： +
+ { + + 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}` }} + > + + + +
+
+ {/* 肖像授权书 */} +
+
+ { - - - - + + +
+ {/* 期刊证明 */} +
+
+ { + + 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); - {/* -
- + + + +
- */} - -
+ +
+
+
+
+ 请上传商标申请对应的姓名授权证明文件(请上传1.5M以内的jpg/jpeg格式图片/2M以内的pdf格式文件) +
+
+ 请上传商标申请对应的肖像授权证明文件(请上传1.5M以内的jpg/jpeg格式图片/2M以内的pdf格式文件) +
+
+ 在“期刊”上注册该商标须有我国出版行政主管部门批准使用的报纸、期刊名称，由于您选择了该项目，需提供我国出版行政主管部门核发的报纸、期刊出版许可证明。(请上传1.5M以内的jpg/jpeg格式图片/2MI以内的pdf格式文件) +
+
+ + + + { + // handleSubmit() + // }} + onCancel={() => { + setUpFileCModal(false) + }} + footer={[ + + ]} + > + } tip='正在上传' size="small" spinning={disabled}> + +
+
类型
+
+ + 姓名授权书 + 肖像授权书 + 期刊证明 + +
-
-
- -
-
+ }}>请选择对应的授权文件类型
+
+
+
+
上传文件
+ {/* 姓名授权书 */} +
+
+ { + + 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}` }} + > + + + + +
+ +
+ {/* 肖像授权书 */} +
+
+ { + + 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}` }} + > + + + + +
+ +
+ + {/* 期刊证明 */} +
+
+ { + + 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}` }} + > + + + + +
+ +
+
+
+
+ 请上传商标申请对应的姓名授权证明文件(请上传1.5M以内的jpg/jpeg格式图片/2M以内的pdf格式文件) +
+
+ 请上传商标申请对应的肖像授权证明文件(请上传1.5M以内的jpg/jpeg格式图片/2M以内的pdf格式文件) +
+
+ 在“期刊”上注册该商标须有我国出版行政主管部门批准使用的报纸、期刊名称，由于您选择了该项目，需提供我国出版行政主管部门核发的报纸、期刊出版许可证明。(请上传1.5M以内的jpg/jpeg格式图片/2MI以内的pdf格式文件) +
+
+ + + + + + + ) } diff --git a/src/route/TrademarkMall/components/EditSix/EditSix.css b/src/route/TrademarkMall/components/EditSix/EditSix.css new file mode 100644 index 0000000..0ea6f00 --- /dev/null +++ b/src/route/TrademarkMall/components/EditSix/EditSix.css @@ -0,0 +1,74 @@ +.editSixBox { + /* WebKit 浏览器（Chrome、Safari 等） */ + scrollbar-width: thin; + /* Firefox */ + scrollbar-color: #888 #f1f1f1; + /* Firefox */ +} +/* WebKit 浏览器（Chrome、Safari 等） */ +.editSixBox::-webkit-scrollbar { + width: 8px; + /* 垂直滚动条宽度 */ +} + +.editSixBox::-webkit-scrollbar-track { + background: #f1f1f1; + /* 滚动条轨道背景颜色 */ +} + +.editSixBox::-webkit-scrollbar-thumb { + background: #888; + /* 滚动条滑块颜色 */ + border-radius: 4px; + /* 滚动条滑块圆角 */ +} + +.editSixBox::-webkit-scrollbar-thumb:hover { + background: #555; + /* 鼠标悬停时滚动条滑块颜色 */ +} + + +.editSixTop { + font-size: 20px; + /* background-color: skyblue; */ + text-align: center; + margin-top: 10px; + margin-bottom: 20px; + +} + +.editSixContent { + display: flex; + font-size: 18px; + margin-bottom: 20px; +} + +.editSixTitle { + width: 300px; + text-align: right; + margin-right: 10px; +} + +.editSixText { + width: calc(100% - 400px); +} + +.editSixImage { + width: 300px; + height: 150px; + border: 1px dashed #bdbdbd; + display: flex; + justify-content: center; + align-items: center; +} +.editSixGoods{ + width: calc(100% - 400px); +} +.editSixGoodsBoxItem{ + /* background-color: skyblue; */ + margin-bottom: 10px; +} +.editSixGoodsBoxChildItem{ + font-size: 14px; +} \ No newline at end of file diff --git a/src/route/TrademarkMall/components/EditSix/EditSix.tsx b/src/route/TrademarkMall/components/EditSix/EditSix.tsx index 57712a6..826d12b 100644 --- a/src/route/TrademarkMall/components/EditSix/EditSix.tsx +++ b/src/route/TrademarkMall/components/EditSix/EditSix.tsx @@ -1,50 +1,426 @@ -// import React from 'react' -import { Button } from 'antd' -export default function editSix(props: any) { +import { useState, useEffect } from 'react' +import { Button, Modal, Image, message, Spin } from 'antd' +import { showImage } from '../../../../request/request' +import { uploadSix, fileDetail } from '../../../../request/api' +import './EditSix.css' +export default function EditSix(props: any) { const height = window.innerHeight - 350; + const [modal, setModal] = useState(false) const handleSubmit = () => { // console.log(form); // 调用表单实例的 submit 方法 // form.submit(); - alert('提交成功') + // alert('提交成功') + setModal(true) }; + const [upLodaing, setUpLodaing] = useState(false) + const [editOneData, setEditOneData] = useState({ + trademarkType: '', //商标类型 text 文字 image 图形 text-image 图文 + trademarkName: '', //商标名称 + trademarkDescription: '', //商标描述 + trademarkFile: '', //姓名授权 + trademarkFile1: '', //肖像授权声明书 + trademarkFile2: '', //期刊 + trademarkPhotoType: '', //商标图样类型 1 自动生成 2 手动上传 + trademarkPhoto: '', //商标图样 + + }) + const [editTwoData, setEditTwoData] = useState({ + trademarkTypeDTOS: [], + trademarkTypeIds: [] + + }) + const [editThreeData, setEditThreeData] = useState({ + trademarkUserId: '', + name: '' + }) + + const [editFiveData, setEditFiveData] = useState({ + trademarkFileDepute: '', + }) + const [trademarkFile, setTrademarkFile] = useState({}) //姓名授权书类型 + const [trademarkFile1, setTrademarkFile1] = useState({}) //肖像授权书类型 + const [trademarkFile2, setTrademarkFile2] = useState({}) //期刊证明类型 + const getTrademarkFile = async (id: string) => { + try { + const res: any = await fileDetail(id) + console.log('姓名授权书详情', res); + setTrademarkFile(res[0]) + } catch (error: any) { + if (error.response) { + const data = error.response.data; + message.error(data.msg ? data.msg : `${data.path}(${data.status})`) + } else { + console.error(error) + } + } + } + const getTrademarkFile1 = async (id: string) => { + try { + const res: any = await fileDetail(id) + console.log('肖像授权书详情', res); + setTrademarkFile1(res[0]) + } catch (error: any) { + if (error.response) { + const data = error.response.data; + message.error(data.msg ? data.msg : `${data.path}(${data.status})`) + } else { + console.error(error) + } + } + } + const getTrademarkFile2 = async (id: string) => { + try { + const res: any = await fileDetail(id) + console.log('期刊详情', res); + setTrademarkFile2(res[0]) + } catch (error: any) { + if (error.response) { + const data = error.response.data; + message.error(data.msg ? data.msg : `${data.path}(${data.status})`) + } else { + console.error(error) + } + } + } + useEffect(() => { + if (props.editOneData) { + setEditOneData(props.editOneData) + // console.log('网址',showImage(props.editOneData.trademarkFile, false)); + + + } + if (props.editTwoData) { + setEditTwoData(props.editTwoData) + } + if (props.editThreeData) { + setEditThreeData(props.editThreeData) + } + if (props.editFiveData) { + setEditFiveData(props.editFiveData) + } + if (props.editOneData.trademarkFile) { + getTrademarkFile(props.editOneData.trademarkFile) + } + if (props.editOneData.trademarkFile1) { + getTrademarkFile1(props.editOneData.trademarkFile1) + } + if (props.editOneData.trademarkFile2) { + getTrademarkFile2(props.editOneData.trademarkFile2) + } + console.log('最终信息接收', props); + + }, [props]) return ( -
-
-
-
-
- + +
+
+
+
+ 正在审核... +
+ +
+
+
+ {props.trademarkStatus == '3' ? '已提交至商标局': props.trademarkStatus == '4' ? '不予受理': props.trademarkStatus == '5' ? '已受理' : props.trademarkStatus == '6' ? '已发初审公告' : props.trademarkStatus == '7' ? '部分驳回' : props.trademarkStatus == '8' ? '全部驳回' : props.trademarkStatus == '9' ? '已下证' : ''} +
+ +
+ { + try { + setUpLodaing(true) + await uploadSix(props.trademarkId) + setUpLodaing(false) + message.success('上传成功') + props.setTrademarkStatus('2') + setModal(false) + } catch (error: any) { + setUpLodaing(false) + if (error.response) { + const data = error.response.data; + message.error(data.msg ? data.msg : `${data.path}(${data.status})`) + } else { + console.error(error) + } + } finally { + setUpLodaing(false) + } }} - onClick={() => { - props.setEditProcess(4) - }} - >上一步 - + onCancel={() => { setModal(false) }} + okText="确定" + cancelText="取消" + > + 注:上传后无法撤回，是否继续上传？ +
-
+ ) } diff --git a/src/route/TrademarkMall/components/EditThree/EditThree.tsx b/src/route/TrademarkMall/components/EditThree/EditThree.tsx index 66767ef..0d32309 100644 --- a/src/route/TrademarkMall/components/EditThree/EditThree.tsx +++ b/src/route/TrademarkMall/components/EditThree/EditThree.tsx @@ -1,50 +1,2163 @@ -// import React from 'react' -import { Button } from 'antd' -export default function editThree(props: any) { +import { useState, useEffect } from 'react' +import { Button, Form, Input, message, Modal, Radio, Upload, Image, Spin, Cascader, Table } from "antd" +import type { TableColumnsType } from 'antd'; +import { uploadImageUrl, showImage } from '../../../../request/request' +import { addTrademarkApplicant, trademarkApplicantList, deleteTrademarkApplicant, trademarkApplicantDetails, updateTrademarkApplicant, submitTrademarkApplicant } from '../../../../request/api' +import { + PlusOutlined +} from '@ant-design/icons'; +import './edit-three.css' +import personCard from '../../../../static/editThree/personCard.png' +import personLicense from '../../../../static/editThree/personLicense.png' +import individualLicense from '../../../../static/editThree/individualLicense.png' +import { getCityList } from '../../../../request/api' +interface Option { + value?: string | number | null; + label: React.ReactNode; + children?: Option[]; + isLeaf?: boolean; + // id: string; + // pId: string; +} +import useMessage from "antd/es/message/useMessage"; +// interface DataType { +// key: React.Key; +// name: string; +// age: number; +// address: string; +// trademarkUserId: string; +// } +const { Search } = Input; +export default function EditThree(props: any) { + // 申请人信息 + + // const [applicantData, setApplicantData] = useState({ + // name: '', + // trademarkUserId: '', + // }) + // 获取联系人详情 + const getContactDetails = async (trademarkUserId: string) => { + try { + const res: any = await trademarkApplicantDetails(trademarkUserId) + console.log(res); + if (res.type == '1') { + setApplicantType('1') + setQualifications(res.subType) + setPersonalIdCard([ + { + uid: res.identityPhoto, + name: res.identityPhoto, + status: 'done', + url: showImage(res.identityPhoto, false) + } + ]) + setPersonalLicense([ + { + uid: res.businessLicense, + name: res.businessLicense, + status: 'done', + url: showImage(res.businessLicense, false) + } + ]) + // console.log(res.rangeAddress.split(',')[0]); + const rangeAddressArray = res.rangeAddress.split(','); + // 检查省份 ID 是否存在 + if (rangeAddressArray.length > 0) { + const provinceId = rangeAddressArray[0]; + const provinceOption = areaArray.find(option => option.value === provinceId); + if (provinceOption) { + // 加载该省份下的城市 + loadCityList([provinceOption]); + } + } + // getLoadProvinces(res.rangeAddress.split(',')[0]) + // 给formA表单赋值 + formA.setFieldsValue({ + identityPhoto: res.identityPhoto, + identity: res.identity, + businessLicense: res.businessLicense, + businessLicenseIdcard: res.businessLicenseIdcard, + name: res.name, + rangeAddress: res.rangeAddress.split(','), + address: res.address, + contactName: res.contactName, + contactPhone: res.contactPhone, + contactEmail: res.contactEmail, + contactAddress: res.contactAddress, + contactEmailCode: res.contactEmailCode, + }) + + } + if (res.type == '2') { + setApplicantType('2') + setEnterpriseLicense([ + { + uid: res.businessLicense, + name: res.businessLicense, + status: 'done', + url: showImage(res.businessLicense, false) + } + ]) + const rangeAddressArray = res.rangeAddress.split(','); + // 检查省份 ID 是否存在 + if (rangeAddressArray.length > 0) { + const provinceId = rangeAddressArray[0]; + const provinceOption = areaArray.find(option => option.value === provinceId); + if (provinceOption) { + // 加载该省份下的城市 + loadCityList([provinceOption]); + } + } + formB.setFieldsValue({ + // identityPhoto: res.identityPhoto, + // identity: res.identity, + businessLicense: res.businessLicense, + name: res.name, + businessLicenseIdcard: res.businessLicenseIdcard, + rangeAddress: res.rangeAddress.split(','), + address: res.address, + contactName: res.contactName, + contactPhone: res.contactPhone, + contactEmail: res.contactEmail, + contactAddress: res.contactAddress, + contactEmailCode: res.contactEmailCode, + }) + + } + } catch (error: any) { + // setAddLoading(false) + if (error.response) { + const data = error.response.data; + messageApi.open({ + type: 'error', + content: data.msg ? data.msg : `${data.path}(${data.status})`, + }); + } else { + console.error(error) + } + } finally { + // setAddLoading(false) + } + } + const [trademarkUserId, setTrademarkUserId] = useState('') + const [selectPeopleModal, setSelectPeopleModal] = useState(false) + const [selectedRowKey, setSelectedRowKey] = useState(''); + // 临时选择的申请人信息 + const [nowSelectPeopleData, setNowSelectPeopleData] = useState({ + trademarkUserId: '', + name: '', + }); + // 确定选择的申请人信息 + const [confirmSelectPeopleData, setConfirmSelectPeopleData] = useState({ + trademarkUserId: '', + name: '', + }); + useEffect(() => { + if (props.editThreeData.trademarkUserId) { + setConfirmSelectPeopleData({ + trademarkUserId: props.editThreeData.trademarkUserId, + name: props.editThreeData.name, + }) + + } + }, [props.editThreeData]) + const [disabled, setDisabled] = useState(false) + const [showBtn, setShowBtn] = useState(true) + const columns: TableColumnsType = [ + // title: '名称', + // dataIndex: 'invoiceName', + // align: 'center', + // width: 180 + { + title: '序号', + align: 'center', + dataIndex: 'trademarkUserId', + render: (_text, _record, index) => (page - 1) * 5 + index + 1, // 显示序号，从1开始 + }, + { + title: '申请人', + align: 'center', + + dataIndex: 'name', + // render: (text: string) => {text}, + }, + // { + // title: '证件号', + // align: 'center', + + // dataIndex: 'identity', + // // render: (text: string) => {text}, + // }, + + { + title: '申请人类型', + dataIndex: 'type', + align: 'center', + render: (text: string) => {text == '1' ? '个人/个体工商户' : '企业'}, + }, + { + title: '联系人', + dataIndex: 'contactName', + align: 'center', + + }, + { + title: '联系人电话', + dataIndex: 'contactPhone', + align: 'center', + + }, + { + + title: '操作', + align: 'center', + dataIndex: 'operation', + render: (text: string, record: any) => { + return ( +
+ + + +
+ ) + } + } + ]; + const [page, setPage] = useState(1); + const [total, setTotal] = useState(0); + const [listLoading, setListLoading] = useState(false); + const [nowSearchKeyWords, setNowSearchKeyWords] = useState(''); + const [searchKeyWords, setSearchKeyWords] = useState(''); + const [tableData, setTableData] = useState([]) + // 获取申请人列表 + const getTrademarkApplicantList = async (page: number) => { + try { + setListLoading(true); + const res: any = await trademarkApplicantList({ + page, + rows: 5, + keywords: searchKeyWords + }) + + if (res.rows.length <= 0 && page > 1) { + setPage(page - 1) + getTrademarkApplicantList(page - 1) + } else { + setTableData(res.rows) + setTotal(res.total) + setListLoading(false); + } + + } catch (error: any) { + setListLoading(false) + if (error.response) { + const data = error.response.data; + messageApi.open({ + type: 'error', + content: data.msg ? data.msg : `${data.path}(${data.status})`, + }); + } else { + console.error(error) + } + } finally { + setListLoading(false) + } + } + useEffect(() => { + getTrademarkApplicantList(1) + setPage(1) + }, [searchKeyWords]) + + // 加载省份数据 + const getLoadProvinces = async (cityId: string) => { + try { + // 假设传入空字符串获取省份列表 + const res: any = await getCityList(cityId); + const provinces = res.map((province: any) => ({ + value: province.areaId, + label: province.areaName, + children: [], // 标记有子节点 + isLeaf: false, + })); + setAreaArray(provinces); + } catch (error: any) { + if (error.response) { + const data = error.response.data; + messageApi.open({ + type: 'error', + content: data.msg ? data.msg : `${data.path}(${data.status})`, + }); + } else { + console.error(error); + } + } + } + useEffect(() => { + getLoadProvinces('0') + }, []); + + const [messageApi, contextHolder] = useMessage(); + // 省市 + const [areaArray, setAreaArray] = useState([]); + // 加载城市列表 + const loadCityList = async (selectedOptions: Option[]) => { + const targetOption = selectedOptions[selectedOptions.length - 1]; + // console.log('targetOption', targetOption.children); + try { + const res: any = await getCityList(targetOption.value as string); + // console.log('城市列表', res); + + const cities = res.map((city: any) => ({ + value: city.areaId, + label: city.areaName, + + })); + targetOption.children = cities; + // 更新 areaArray 状态 + setAreaArray([...areaArray]); + } catch (error: any) { + + + if (error.response) { + const data = error.response.data; + messageApi.open({ + type: 'error', + content: data.msg ? data.msg : `${data.path}(${data.status})`, + }); + } else { + console.error(error) + } + } + }; + const token = sessionStorage.getItem('token') + // const [form] = Form.useForm(); + const [formA] = Form.useForm(); + const [addLoading, setAddLoading] = useState(false) + const onFinishA = async (values: any) => { + console.log(values); + console.log(qualifications); + if (trademarkUserId) { + try { + setAddLoading(true) + const newValues = { ...values }; + newValues.rangeAddress = newValues.rangeAddress.join(','); + await updateTrademarkApplicant(trademarkUserId, { + type: applicantType, + subType: qualifications, + // trademarkId: props.trademarkId, + nationality: '大陆', + ...newValues + }) + getTrademarkApplicantList(page) + setAddLoading(false) + setAddPeopleModal(false) + + } catch (error: any) { + setAddLoading(false) + if (error.response) { + const data = error.response.data; + messageApi.open({ + type: 'error', + content: data.msg ? data.msg : `${data.path}(${data.status})`, + }); + } else { + console.error(error) + } + } finally { + setAddLoading(false) + } + + } else { + try { + setAddLoading(true) + const newValues = { ...values }; + newValues.rangeAddress = newValues.rangeAddress.join(','); + await addTrademarkApplicant({ + type: applicantType, + subType: qualifications, + // trademarkId: props.trademarkId, + nationality: '大陆', + ...newValues + }) + getTrademarkApplicantList(1) + setPage(1) + setAddLoading(false) + setAddPeopleModal(false) + init() + messageApi.open({ + type: 'success', + content: '新增成功', + }); + } catch (error: any) { + setAddLoading(false) + if (error.response) { + const data = error.response.data; + messageApi.open({ + type: 'error', + content: data.msg ? data.msg : `${data.path}(${data.status})`, + }); + } else { + console.error(error) + } + } finally { + setAddLoading(false) + } + } + + } + const [formB] = Form.useForm(); + const onFinishB = async (values: any) => { + console.log(values); + if (trademarkUserId) { + // alert('编辑') + try { + setAddLoading(true) + const newValues = { ...values }; + newValues.rangeAddress = newValues.rangeAddress.join(','); + await updateTrademarkApplicant(trademarkUserId, { + type: applicantType, + // subType: qualifications, + // trademarkId: props.trademarkId, + nationality: '大陆', + ...newValues + }) + getTrademarkApplicantList(page) + setAddLoading(false) + setAddPeopleModal(false) + + } catch (error: any) { + setAddLoading(false) + if (error.response) { + const data = error.response.data; + messageApi.open({ + type: 'error', + content: data.msg ? data.msg : `${data.path}(${data.status})`, + }); + } else { + console.error(error) + } + } finally { + setAddLoading(false) + } + } else { + try { + setAddLoading(true) + const newValues = { ...values }; + newValues.rangeAddress = newValues.rangeAddress.join(','); + await addTrademarkApplicant({ + type: applicantType, + // subType: qualifications, + // trademarkId: props.trademarkId, + nationality: '大陆', + ...newValues + }) + + getTrademarkApplicantList(1) + setPage(1) + setAddLoading(false) + setAddPeopleModal(false) + init() + messageApi.open({ + type: 'success', + content: '新增成功', + }); + + } catch (error: any) { + setAddLoading(false) + if (error.response) { + const data = error.response.data; + messageApi.open({ + type: 'error', + content: data.msg ? data.msg : `${data.path}(${data.status})`, + }); + } else { + console.error(error) + } + } finally { + setAddLoading(false) + } + } + + + } const height = window.innerHeight - 350; - const handleSubmit = () => { - // console.log(form); - props.setEditProcess(4); - // 调用表单实例的 submit 方法 - // form.submit(); + const [addPeopleModal, setAddPeopleModal] = useState(false) + const [deleteModal, setDeleteModal] = useState(false) + const [applicantType, setApplicantType] = useState('1') //申请人类型 + const applicantTypeChange = (e: any) => { + setApplicantType(e.target.value) + } + const [qualifications, setQualifications] = useState('1') //资质类型 + const qualificationsChange = (e: any) => { + setQualifications(e.target.value) + } + const [upLoading, setUpLoading] = useState(false) + // 个人身份证图片信息 + const [personalIdCard, setPersonalIdCard] = useState([]) + const personalIdCardChange = (info: any) => { + console.log(info.file.status); + + + if (info.file.status === 'uploading') { + // setFileList([]) + setUpLoading(true) + return; + } + if (info.file.status === 'done') { + console.log(info); + + setUpLoading(false) + // const fileId = info.file.response.data.fileId; + // // console.log(downloadUrl(fileId)); + + // const url = showImage(fileId, false); + console.log(info.file.response.data.fileId); + + setPersonalIdCard([ + { + uid: info.file.response.data.fileId, + name: info.file.response.data.fileName, + status: 'done', + url: showImage(info.file.response.data.fileId, false) + } + ]) + // 修改为设置 applicantcard 字段的值 + formA.setFieldsValue({ identityPhoto: info.file.response.data.fileId }); + return; + + + } + if (info.file.status === 'error') { + formA.setFieldsValue({ identityPhoto: '' }); + setUpLoading(false) + message.error(`上传失败`); + return; + } + } + const [upPersonalLicenseLoading, setUpPersonalLicenseLoading] = useState(false) + // 个体营业执照 + const [personalLicense, setPersonalLicense] = useState([]) + const personalLicenseChange = (info: any) => { + if (info.file.status === 'uploading') { + // setFileList([]) + setUpPersonalLicenseLoading(true) + return; + } + if (info.file.status === 'done') { + console.log(info); + + setUpPersonalLicenseLoading(false) + // const fileId = info.file.response.data.fileId; + // // console.log(downloadUrl(fileId)); + + // const url = showImage(fileId, false); + console.log(info.file.response.data.fileId); + + setPersonalLicense([ + { + uid: info.file.response.data.fileId, + name: info.file.response.data.fileName, + status: 'done', + url: showImage(info.file.response.data.fileId, false) + } + ]) + // 修改为设置 applicantcard 字段的值 + formA.setFieldsValue({ businessLicense: info.file.response.data.fileId }); + return; + + + } + if (info.file.status === 'error') { + setUpPersonalLicenseLoading(false) + formA.setFieldsValue({ businessLicense: '' }); + message.error(`上传失败`); + return; + } + } + + const [upEnterpriseLicenseLoading, setUpEnterpriseLicenseLoading] = useState(false) + // 企业营业执照 + const [enterpriseLicense, setEnterpriseLicense] = useState([]) + const enterpriseLicenseChange = (info: any) => { + if (info.file.status === 'uploading') { + // setFileList([]) + setUpEnterpriseLicenseLoading(true) + return; + } + if (info.file.status === 'done') { + console.log(info); + + setUpEnterpriseLicenseLoading(false) + // const fileId = info.file.response.data.fileId; + // // console.log(downloadUrl(fileId)); + + // const url = showImage(fileId, false); + console.log(info.file.response.data.fileId); + + setEnterpriseLicense([ + { + uid: info.file.response.data.fileId, + name: info.file.response.data.fileName, + status: 'done', + url: showImage(info.file.response.data.fileId, false) + } + ]) + // 修改为设置 applicantcard 字段的值 + formB.setFieldsValue({ businessLicense: info.file.response.data.fileId }); + } + if (info.file.status === 'error') { + setUpEnterpriseLicenseLoading(false) + formB.setFieldsValue({ businessLicense: '' }); + + message.error(`上传失败`); + return; + } + + } + const [subLoading, setSubLoading] = useState(false) + function deepCompareObjects(obj1: any, obj2: any): boolean { + // 若两个值严格相等，直接返回 true + if (obj1 === obj2) { + return true; + } + + // 若其中一个值为 null 或不是对象类型，返回 false + if (typeof obj1 !== 'object' || obj1 === null || typeof obj2 !== 'object' || obj2 === null) { + return false; + } + + // 获取两个对象的键数组 + const keys1 = Object.keys(obj1); + const keys2 = Object.keys(obj2); + + // 若键的数量不同，返回 false + if (keys1.length !== keys2.length) { + return false; + } + + // 遍历键，递归比较对应的值 + for (const key of keys1) { + if (!keys2.includes(key) || !deepCompareObjects(obj1[key], obj2[key])) { + return false; + } + } + + return true; + } + const handleSubmit = async () => { + if (deepCompareObjects(confirmSelectPeopleData, props.editThreeData)) { + props.setEditProcess(4); + return; + } + // formA.submit(); + // props.setEditProcess(4); + // console.log(confirmSelectPeopleData); + if (confirmSelectPeopleData.name) { + console.log(confirmSelectPeopleData); + try { + setSubLoading(true) + await submitTrademarkApplicant(props.trademarkId, { + trademarkUserId: confirmSelectPeopleData.trademarkUserId, + }) + setSubLoading(false) + props.setEditProcess(4); + props.setEditThreeData({ + trademarkUserId: confirmSelectPeopleData.trademarkUserId, + name: confirmSelectPeopleData.name, + }) + } catch (error: any) { + setSubLoading(false) + if (error.response) { + const data = error.response.data; + messageApi.open({ + type: 'error', + content: data.msg ? data.msg : `${data.path}(${data.status})`, + }); + } else { + console.error(error) + } + } finally { + setSubLoading(false) + } + } else { + message.error('请选择申请人') + } }; + //重置新建申请人信息 + const init = () => { + setApplicantType('1') + setQualifications('1') + formA.resetFields(); + formB.resetFields(); + setPersonalIdCard([]) + setPersonalLicense([]) + setEnterpriseLicense([]) + } + return ( -
-
-
-
-
- + +
+ { + if (applicantType == '1') { + formA.submit() + } + if (applicantType == '2') { + formB.submit() + } }} - onClick={() => { - props.setEditProcess(2) + okText='保存' + cancelText='取消' + // 点击遮罩禁止关闭 + maskClosable={false} + onCancel={() => { + setAddPeopleModal(false) + init() + + }}> + + +
+
+
申请人信息
+
+
+ *申请人类型： +
+
+ + 个人/个体工商户 + 企业 + +
+
+
+ 营业执照类型为(个体工商户)，请选择:(个人/个体工商户) 营业执照类型为(公司企业)，请选择:(企业) +
+
+ {/* 申请人提交审核后，不支持修改类型:如需修改，请重新创建申请人 */} +
+
+
+
+ *资质类型： +
+
+ + 个人 + 个体工商户 + +
+
+
+
{ + // console.log(errorInfo) + // message.error('请填写完整的信息!') + errorInfo.errorFields.forEach((field) => { + if (field.errors.length > 0) { + // 显示每条错误信息 + message.error(field.errors[0]); + } + }); + }} + initialValues={{ softWare: '' }} + style={{ marginTop: 20 }} + > +
+
+ *身份证 + (注 ：身份证正反面复印件并在空白处签名) + +
+
+
+ + { + const isPNG = file.type === 'image/png'; + const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg'; + if (!isPNG && !isJPG) { + // console.error('仅支持 PNG、PDF、JPG 格式的文件!'); + message.error('仅支持 PNG、JPG 格式的文件!'); + } + return isPNG || isJPG; + }} + onChange={personalIdCardChange} + + headers={{ 'Auth': `Bearer ${token}` }} + disabled={personalIdCard.length > 0 || disabled} + > + + { + personalIdCard.length > 0 ? +
+
+ + +
+
{ + setPersonalIdCard([]) + formA.setFieldsValue({ identityPhoto: '' }); + }} + >删除
+
+ : +
+
+
+ +
+
+ 上传身份证 +
+
+ +
+ } + + + + +
+
+ +
+ 示例图片 +
+
+ +
+ +
+
+
+ + + +
+
+ *身份证件号码 +
+ +
+ + + + + + + +
+ + +
+
+
+ *个体工商户营业执照 + {/* (注 ：上传图片的尺寸最小为600*600) */} + +
+
+
+
+ + { + const isPNG = file.type === 'image/png'; + const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg'; + if (!isPNG && !isJPG) { + // console.error('仅支持 PNG、PDF、JPG 格式的文件!'); + message.error('仅支持 PNG、JPG 格式的文件!'); + } + return isPNG || isJPG; + }} + onChange={personalLicenseChange} + + headers={{ 'Auth': `Bearer ${token}` }} + disabled={personalLicense.length > 0 || disabled} + > + + { + personalLicense.length > 0 ? +
+
+ + +
+
{ + setPersonalLicense([]) + formA.setFieldsValue({ businessLicense: '' }); + }} + >删除
+
+ : +
+
+
+ +
+
+ 上传营业执照 +
+
+ +
+ } + + + + + +
+
+
+ +
+ 示例图片 +
+
+ +
+ +
+
+
+
+
+ *统一社会信用代码 +
+ +
+ + + + + + + +
+ + +
+
+
+ *申请人名称 +
+ +
+ + + + + + + +
+ + +
+ + +
+
+ *申请人地址 + (注 ：省/自治区/直辖市请下拉选择，无需重复填写) +
+ +
+ + + + +
+
+
+ + + + + + + +
+ + +
+ +
联系信息 + (联系信息仅供与您联系，非递交商标局信息。) +
+
+
+ *联系人姓名 +
+ +
+ + + + + + + +
+ + +
+
+
+ *联系人电话 +
+ +
+ + + + + + + +
+ + +
+ +
+
+ *联系人邮箱 +
+ +
+ + + + + + + +
+ + +
+ +
+
+ *联系人地址 +
+ +
+ + + + + + + +
+ + +
+ +
+
+ *联系人邮编 +
+ +
+ + + + + + + +
+ + +
+
+
+
+ + + +
+ +
+
{ + // console.log(errorInfo) + // message.error('请填写完整的信息!') + errorInfo.errorFields.forEach((field) => { + if (field.errors.length > 0) { + // 显示每条错误信息 + message.error(field.errors[0]); + } + }); + }} + initialValues={{ softWare: '' }} + style={{ marginTop: 20 }} + > + +
+
+ *营业执照 + {/* (注 ：上传图片的尺寸最小为600*600) */} + +
+
+
+
+ + { + const isPNG = file.type === 'image/png'; + const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg'; + if (!isPNG && !isJPG) { + // console.error('仅支持 PNG、PDF、JPG 格式的文件!'); + message.error('仅支持 PNG、JPG 格式的文件!'); + } + return isPNG || isJPG; + }} + onChange={enterpriseLicenseChange} + + headers={{ 'Auth': `Bearer ${token}` }} + disabled={enterpriseLicense.length > 0 || disabled} + > + + { + enterpriseLicense.length > 0 ? +
+
+ + +
+
{ + setPersonalLicense([]) + formB.setFieldsValue({ businessLicense: '' }); + }} + >删除
+
+ : +
+
+
+ +
+
+ 上传营业执照 +
+
+ +
+ } + + + + + +
+
+
+ +
+ 示例图片 +
+
+ +
+ +
+
+
+
+
+ *申请人名称 +
+ +
+ + + + + + + +
+ + +
+
+
+ *统一社会信用代码 +
+ +
+ + + + + + + +
+ + +
+ + + +
+
+ *申请人地址 + (注 ：省/自治区/直辖市请下拉选择，无需重复填写) +
+ +
+ + + + +
+
+
+ + + + + + + +
+ + +
+ +
联系信息 + (联系信息仅供与您联系，非递交商标局信息。) +
+
+
+ *联系人姓名 +
+ +
+ + + + + + + +
+ + +
+
+
+ *联系人电话 +
+ +
+ + + + + + + +
+ + +
+ +
+
+ *联系人邮箱 +
+ +
+ + + + + + + +
+ + +
+ +
+
+ *联系人地址 +
+ +
+ + + + + + + +
+ + +
+ +
+
+ *联系人邮编 +
+ +
+ + + + + + + +
+ + +
+
+
+
+
+
+ + + + { setSelectPeopleModal(false) }} + onOk={() => { + if (nowSelectPeopleData.name) { + setConfirmSelectPeopleData(nowSelectPeopleData) + + } + setSelectPeopleModal(false) + // console.log(nowSelectPeopleData); + }} - >上一步 - + { + setSearchKeyWords(nowSearchKeyWords) + }} + onChange={(e) => { + setNowSearchKeyWords(e.target.value) + if (e.target.value === '') { + setSearchKeyWords('') + } + }} + className='searchInputmedia' + style={{ + // maxWidth: '200px', + width: '170px', + height: '31px', + marginLeft: '5px' + }} + allowClear + /> +
+ + + rowSelection={{ + type: 'radio', + selectedRowKeys: [selectedRowKey], + onChange: (selectedRowKeys: React.Key[]) => { + setSelectedRowKey(selectedRowKeys[0] as string); + }, + }} + // 设置分页 + pagination={{ + total: total, + pageSize: 5, + current: page, + // 取消设置每显示几条 + showSizeChanger: false, + // 点击分页按钮 + onChange: (page: number) => { + setPage(page); + getTrademarkApplicantList(page) + } + }} + columns={columns} + dataSource={tableData} + onRow={(record) => ({ + style: { + cursor: 'pointer', + }, + onClick: (event) => { + // 检查点击的元素是否属于操作列 + const isOperationColumn = (event.target as HTMLElement).closest('.ant-table-cell-operations'); + if (!isOperationColumn) { + setSelectedRowKey(record.trademarkUserId); + setNowSelectPeopleData({ + trademarkUserId: record.trademarkUserId, + name: record.name, + }) + } + + } + })} + rowKey='trademarkUserId' + /> + + + + { - handleSubmit() + // 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) + } + } }} - >下一步 -
-
+ > + 删除后无记录?确定删除吗? + +
+ ) } diff --git a/src/route/TrademarkMall/components/EditThree/edit-three.css b/src/route/TrademarkMall/components/EditThree/edit-three.css new file mode 100644 index 0000000..45806d0 --- /dev/null +++ b/src/route/TrademarkMall/components/EditThree/edit-three.css @@ -0,0 +1,114 @@ +/* 自定义滚动条宽度 */ +/* .editThreeAddPeopleBox { + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: #888 #f1f1f1; +} +.editThreeAddPeopleBox::-webkit-scrollbar { + width: 8px; +} +.editThreeAddPeopleBox::-webkit-scrollbar-track { + background: #f1f1f1; +} + +.editThreeAddPeopleBox::-webkit-scrollbar-thumb { + background: #888; + border-radius: 4px; +} + +.editThreeAddPeopleBox::-webkit-scrollbar-thumb:hover { + background: #555; +} */ +.editThreeAddPeopleBox{ + padding-top: 10px; +} +.addPeopleBox { + width: 300px; + height: 150px; + border: 1px solid #D9D9D9; + color: #979797; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + cursor: pointer; + margin-left: 100px; + margin-top: 20px; +} + +.addPeopleBox:hover { + border: 1px solid #5892e9; + color: #5892e9; +} + +.addPeopleTitle { + font-size: 18px; + font-weight: 700; + /* margin-top: 10px; */ +} + +.addPeopleItem { + display: flex; + align-items: center; + margin-top: 30px; +} + +.addPeopleFormItem { + /* display: flex; */ + /* margin-top: 20px; */ + + +} +.addFormItemTitle{ + margin-bottom: 5px; +} +.addPeopleFormItemR{ + margin-left: 50px; +} + +.addPeopleItemTitle { + font-size: 16px; + /* background-color: skyblue; */ + /* width: 120px; */ + text-align: left; + margin-right: 10px; +} +.addPeopleItemTitleS{ + width: 90px; +} + +.redTips { + color: red; +} + +.editThreeUpBox { + width: 300px; + height: 150px; + border: 1px dashed #D9D9D9; + cursor: pointer; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + color: #979797; +} + +.exampleImg { + width: 190px; + height: 150px; + border: 1px dashed #D9D9D9; + border: 1px dashed #D9D9D9; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin-left: 20px; + +} +.addressLine{ + width: 10px; + height: 1px; + background: rgb(182, 182, 182); + margin-left: 5px; + margin-right: 5px; +} \ No newline at end of file diff --git a/src/route/TrademarkMall/components/EditTwo/EditTwo.tsx b/src/route/TrademarkMall/components/EditTwo/EditTwo.tsx index dbb8190..3086121 100644 --- a/src/route/TrademarkMall/components/EditTwo/EditTwo.tsx +++ b/src/route/TrademarkMall/components/EditTwo/EditTwo.tsx @@ -1,50 +1,1071 @@ -// import React from 'react' -import { Button } from 'antd' -export default function editTwo(props: any) { +import { useEffect, useState } from 'react' +import { + Button, Select, + // Collapse, Tree + Input, + message, + Spin +} from 'antd' +import { + SyncOutlined, +} from '@ant-design/icons'; +import { uptrademarkList } from '../../../../request/api' +const { Search } = Input; +import { + CloseOutlined, + DeleteOutlined +} from '@ant-design/icons'; +// import { +// DownOutlined, +// } from '@ant-design/icons'; +import TreeMenu from './components/TreeMenu/TreeMenu' +// import type { TreeDataNode } from 'antd'; +import './edit-tow.css' +export default function EditTwo(props: any) { + // const [messageApi, contextHolder] = message.useMessage(); + const [messageApi, contextHolder] = message.useMessage(); const height = window.innerHeight - 350; - const handleSubmit = () => { - // console.log(form); - props.setEditProcess(3); - // 调用表单实例的 submit 方法 - // form.submit(); + const [loading, setLoading] = useState(false) + const handleSubmit = async () => { + // console.log('selectedCategories', selectedCategories); + console.log('checkedIds', checkedIds); + console.log('props', props.editTwoArray); + + + // console.log('两个数组内容是否相同:', isEqual); + // return; + if (checkedIds.length === 0) { + message.error('请选择分类'); + // props.setEditProcess(3); + + return; + } else { + // props.setEditProcess(3); + // 使用 Set 数据结构比较 + const getElementCount = (arr: string[]) => { + const countMap = new Map(); + arr.forEach((element) => { + countMap.set(element, (countMap.get(element) || 0) + 1); + }); + return countMap; + }; + + const checkedIdsCount = getElementCount(checkedIds); + const editTwoArrayCount = getElementCount(props.editTwoArray); + + const isEqual = + checkedIdsCount.size === editTwoArrayCount.size && + Array.from(checkedIdsCount.entries()).every(([key, value]) => + editTwoArrayCount.get(key) === value + ); + if (isEqual) { + props.setEditProcess(3); + return; + } + try { + setLoading(true) + await uptrademarkList(props.trademarkId, { + typeIds: checkedIds + }) + props.setEditTwoArray(checkedIds) + setLoading(false) + props.setEditProcess(3); + // props.getOrderList() + + } 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) + } + + } + // props.setEditProcess(3); + }; + // 初始化展开状态，默认所有大类的小类都隐藏 + const [expandedIds, setExpandedIds] = useState([]); + // 初始化勾选状态，默认所有小类都未勾选 + const [checkedIds, setCheckedIds] = useState([]); + + const formatNumber = (num: number) => { + return Number.isInteger(num) ? num : num.toFixed(2); + }; + const [selectedCategories, setSelectedCategories] = useState<{ + id: any; + name: string; + code: string; + children: { + id: any; + name: string; + code: string; + children: { id: any; name: string; code: string }[]; + }[]; + }[]>([]); + // // 模拟商标分类数据 + // const trademarkCategories = [ + + // { + // id: 1, + // name: '大类1', + // children: [ + // { + // id: 11, + // name: '中类1-1', + // children: [ + // { id: 111, name: '小类1-1-1' }, + // { id: 112, name: '小类1-1-2' }, + // { id: 113, name: '小类1-1-3' }, + // { id: 114, name: '小类1-1-4' }, + // { id: 115, name: '小类1-1-5' }, + // { id: 116, name: '小类1-1-6' }, + // { id: 117, name: '小类1-1-7' }, + // { id: 118, name: '小类1-1-8' }, + // { id: 119, name: '小类1-1-9' }, + // { id: 120, name: '小类1-1-10' }, + // { id: 1211, name: '小类1-1-11' }, + // { id: 1222, name: '小类1-1-12' }, + // { id: 1233, name: '小类1-1-13' }, + // { id: 1244, name: '小类1-1-14' }, + // { id: 1255565, name: '计算机嘻嘻嘻嘻哈哈哈哈' }, + // ] + // }, + // { + // id: 12, + // name: '中类1-2', + // children: [ + // { id: 121, name: '小类1-2-1' }, + // { id: 122, name: '小类1-2-2' }, + // { id: 123, name: '小类1-2-3' }, + // { id: 124, name: '小类1-2-4' }, + // { id: 125, name: '小类1-2-5' }, + // { id: 126, name: '小类1-2-6' }, + // { id: 127, name: '小类1-2-7' }, + // ] + // } + + // ] + // }, + // { + // id: 2, + // name: '大类2', + // children: [ + // { + // id: 21, + // name: '中类2-1', + // children: [ + // { id: 211, name: '小类2-1-1' }, + // { id: 212, name: '小类2-1-2' }, + // ] + // }, + // { + // id: 22, + // name: '中类2-2', + // children: [ + // { id: 221, name: '小类2-2-1' }, + // { id: 222, name: '小类2-2-2' }, + // ] + // }, + // { + // id: 23, + // name: '中类2-3', + // children: [ + // { id: 231, name: '小类2-3-1' }, + // { id: 232, name: '小类2-3-2' }, + // ] + + // } + // ] + // }, + // { + // id: 3, + // name: '大类3', + // children: [ + // { + // id: 31, + // name: '中类3-1', + // children: [ + // { id: 311, name: '小类3-1-1' }, + // { id: 312, name: '小类3-1-2' }, + // ] + // }, + // { + // id: 32, + // name: '中类3-2', + // children: [ + // { id: 321, name: '小类3-2-1' }, + // { id: 322, name: '小类3-2-2' }, + // ] + // } + // ] + // } + + + + + // ]; + const [trademarkCategories ] = useState([]); + // const [filteredCategories, setFilteredCategories] = useState(trademarkCategories); + const [filteredCategories, setFilteredCategories] = useState([]); + + + + const handleExpandClick = (id: any) => { + setExpandedIds(prevIds => { + if (prevIds.includes(id)) { + return prevIds.filter(prevId => prevId !== id); + } else { + return [...prevIds, id]; + } + }); + }; + + // 处理小类点击事件，切换勾选状态 + const handleSmallMenuClick = (id: any) => { + let targetCategory: any; + let targetMiddleCategory: any; + // 找到小类所属的大类和中类 + outerLoop: for (const category of trademarkCategories) { + for (const middleCategory of category.children) { + // 检查 middleCategory.children 是否存在 + if (middleCategory.children && middleCategory.children.some((child: any) => child.id === id)) { + targetCategory = category; + targetMiddleCategory = middleCategory; + break outerLoop; + } + } + } + + if (!targetCategory || !targetMiddleCategory) return; + + const isChecked = checkedIds.includes(id); + + setCheckedIds(prevIds => { + if (isChecked) { + return prevIds.filter(prevId => prevId !== id); + } else { + return [...prevIds, id]; + } + }); + + setSelectedCategories(prevSelectedCategories => { + const categoryIndex = prevSelectedCategories.findIndex( + category => category.id === targetCategory.id + ); + + if (isChecked) { + // 取消勾选 + if (categoryIndex > -1) { + const middleCategoryIndex = prevSelectedCategories[categoryIndex].children.findIndex( + middleCategory => middleCategory.id === targetMiddleCategory.id + ); + if (middleCategoryIndex > -1) { + const updatedChildren = prevSelectedCategories[categoryIndex].children[middleCategoryIndex].children.filter( + child => child.id !== id + ); + + if (updatedChildren.length === 0) { + // 若该中类下没有选中的小类，移除该中类 + const updatedMiddleCategories = prevSelectedCategories[categoryIndex].children.filter( + (_, index) => index !== middleCategoryIndex + ); + if (updatedMiddleCategories.length === 0) { + // 若该大类下没有选中的中类，移除该大类 + return prevSelectedCategories.filter( + (_, index) => index !== categoryIndex + ); + } else { + return prevSelectedCategories.map((category, index) => + index === categoryIndex + ? { ...category, children: updatedMiddleCategories } + : category + ); + } + } else { + return prevSelectedCategories.map((category, catIndex) => + catIndex === categoryIndex + ? { + ...category, + children: category.children.map((middleCategory, midIndex) => + midIndex === middleCategoryIndex + ? { ...middleCategory, children: updatedChildren } + : middleCategory + ) + } + : category + ); + } + } + } + } else { + // 勾选 + const newChild = targetMiddleCategory.children.find((child: any) => child.id === id); + if (categoryIndex > -1) { + const middleCategoryIndex = prevSelectedCategories[categoryIndex].children.findIndex( + middleCategory => middleCategory.id === targetMiddleCategory.id + ); + if (middleCategoryIndex > -1) { + // 若该中类已存在，添加小类到 children 中 + return prevSelectedCategories.map((category, catIndex) => + catIndex === categoryIndex + ? { + ...category, + children: category.children.map((middleCategory, midIndex) => + midIndex === middleCategoryIndex + ? { + ...middleCategory, + children: [...middleCategory.children, { + id: newChild.id, + name: newChild.name, + code: newChild.code // 添加 code 字段 + }] + } + : middleCategory + ) + } + : category + ); + } else { + // 若该中类不存在，新增一个中类项 + return prevSelectedCategories.map((category, catIndex) => + catIndex === categoryIndex + ? { + ...category, + children: [ + ...category.children, + { + id: targetMiddleCategory.id, + name: targetMiddleCategory.name, + code: targetMiddleCategory.code, // 添加 code 字段 + children: [{ + id: newChild.id, + name: newChild.name, + code: newChild.code // 添加 code 字段 + }] + } + ] + } + : category + ); + } + } else { + // 若该大类不存在，新增一个大类项 + return [ + ...prevSelectedCategories, + { + id: targetCategory.id, + name: targetCategory.name, + code: targetCategory.code, // 添加 code 字段 + children: [ + { + id: targetMiddleCategory.id, + name: targetMiddleCategory.name, + code: targetMiddleCategory.code, // 添加 code 字段 + children: [{ + id: newChild.id, + name: newChild.name, + code: newChild.code // 添加 code 字段 + }] + } + ] + } + ]; + } + } + return prevSelectedCategories; + }); + }; + // 处理删除小类的点击事件 + const handleDeleteSmallCategory = (categoryId: any, middleCategoryId: any, smallCategoryId: any) => { + setSelectedCategories(prevSelectedCategories => { + return prevSelectedCategories.map(category => { + if (category.id === categoryId) { + return { + ...category, + children: category.children.map(middleCategory => { + if (middleCategory.id === middleCategoryId) { + return { + ...middleCategory, + children: middleCategory.children.filter(child => child.id !== smallCategoryId) + }; + } + return middleCategory; + }).filter(middleCategory => middleCategory.children.length > 0) + }; + } + return category; + }).filter(category => category.children.length > 0); + }); + + // 更新 checkedIds 状态 + setCheckedIds(prevCheckedIds => prevCheckedIds.filter(id => id !== smallCategoryId)); + }; + // 处理删除大类的点击事件 + const handleDeleteCategory = (categoryId: any) => { + // 找到要删除的大类下所有小类的 id + const targetCategory = selectedCategories.find(category => category.id === categoryId); + const smallCategoryIdsToRemove = targetCategory?.children.flatMap(middleCategory => + middleCategory.children.map(child => child.id) + ) || []; + + // 更新 selectedCategories 状态，移除对应的大类 + setSelectedCategories(prevSelectedCategories => + prevSelectedCategories.filter(category => category.id !== categoryId) + ); + + // 更新 checkedIds 状态，移除该大类下所有小类的 id + setCheckedIds(prevCheckedIds => + prevCheckedIds.filter(id => !smallCategoryIdsToRemove.includes(id)) + ); + }; + + // useEffect(() => { + // console.log('selectedCategories', selectedCategories); + + // }, [selectedCategories]) + const [keyWords, setKeyWords] = useState(''); + const [searchKeyWords, setSearchKeyWords] = useState(''); + const onSearch = (value: string) => { + console.log('search:', value); + setSearchKeyWords(value); + } + + const filterCategories = (categories: any[], keyword: string, expanded: any[]) => { + return categories.filter(category => { + const isMatch = category.name.includes(keyword); + let childMatch = false; + if (category.children) { + const filteredChildren = filterCategories(category.children, keyword, expanded); + if (filteredChildren.length > 0) { + childMatch = true; + category.children = filteredChildren; + // 若子级有匹配，记录当前分类 ID 为需要展开 + expanded.push(category.id); + } + } + if (isMatch || childMatch) { + // 若当前项匹配或子级有匹配，记录当前分类 ID 为需要展开 + if (!expanded.includes(category.id)) { + expanded.push(category.id); + } + return true; + } + return false; + }); + }; + + + // 监听关键字变化，更新筛选后的分类数据和展开状态 + + useEffect(() => { + const expanded: any[] = []; + if (searchKeyWords) { + const filtered = filterCategories([...trademarkCategories], searchKeyWords, expanded); + setFilteredCategories(filtered); + setExpandedIds([...new Set(expanded)]); // 去重后更新展开状态 + } else { + setFilteredCategories(trademarkCategories); + // 初始化需要展开的 ID 数组 + const initialExpandedIds: any[] = []; + + // 遍历所有大类 + trademarkCategories.forEach((category: any) => { + // 遍历每个大类下的中类 + category.children.forEach((middleCategory: any) => { + // 检查当前中类下是否有选中的小类 + const hasSelectedChild = middleCategory.children.some((child: any) => + checkedIds.includes(child.id) + ); + + if (hasSelectedChild) { + // 若有选中的小类，添加大类和中类的 ID 到需要展开的数组 + initialExpandedIds.push(category.id, middleCategory.id); + } + }); + }); + + + // 设置展开状态 + setExpandedIds([...new Set(initialExpandedIds)]); + } + }, [searchKeyWords]); + // const getTrademarkTypeList = async (id:string) => { + // try { + // const res: any = await trademarkTypeList(id) + // // console.log('类型数组', res); + // setTrademarkCategories(res) + // setFilteredCategories(res) + // } 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 initialCheckedIds = [111, 112, 113, 121, 122]; + // const initialCheckedIds = ['42d2b6d5-adbf-485f-944e-4ca8c50c0b16']; + useEffect(() => { + // console.log('嘎嘎嘎', props.editTwoArray); + + // getTrademarkTypeList() + // setCheckedIds(initialCheckedIds); + // setCheckedIds(initialCheckedIds); + }, []) + + // 封装获取展开 ID 的逻辑 + // const getExpandedIds = (checkedIds: any[], trademarkCategories: any[]) => { + // const expandedIds: any[] = []; + // trademarkCategories.forEach((category) => { + // category.children.forEach((middleCategory: any) => { + // middleCategory.children.forEach((child: any) => { + // if (checkedIds.includes(child.id)) { + // if (!expandedIds.includes(category.id)) { + // expandedIds.push(category.id); + // } + // if (!expandedIds.includes(middleCategory.id)) { + // expandedIds.push(middleCategory.id); + // } + // } + // }); + // }); + // }); + // return [...new Set(expandedIds)]; + // }; + + // 封装获取选中分类的逻辑 + // const getSelectedCategories = (checkedIds: any[], trademarkCategories: any[]) => { + // const selectedCategories: { + // id: any; + // name: string; + // code: string; + // children: { + // id: any; + // name: string; + // code: string; + // children: { id: any; name: string; code: string }[]; + // }[]; + // }[] = []; + + // trademarkCategories.forEach((category) => { + // category.children.forEach((middleCategory: any) => { + // const selectedChildren = middleCategory.children.filter((child: any) => + // checkedIds.includes(child.id) + // ); + // if (selectedChildren.length === 0) return; + + // const categoryIndex = selectedCategories.findIndex((cat) => cat.id === category.id); + // if (categoryIndex > -1) { + // const middleCategoryIndex = selectedCategories[categoryIndex].children.findIndex( + // (midCat) => midCat.id === middleCategory.id + // ); + // if (middleCategoryIndex > -1) { + // selectedCategories[categoryIndex].children[middleCategoryIndex].children = [ + // ...selectedCategories[categoryIndex].children[middleCategoryIndex].children, + // ...selectedChildren + // ]; + // } else { + // selectedCategories[categoryIndex].children.push({ + // id: middleCategory.id, + // name: middleCategory.name, + // code: middleCategory.code, + // children: selectedChildren + // }); + // } + // } else { + // selectedCategories.push({ + // id: category.id, + // name: category.name, + // code: category.code, + // children: [ + // { + // id: middleCategory.id, + // name: middleCategory.name, + // code: middleCategory.code, + // children: selectedChildren + // } + // ] + // }); + // } + // }); + // }); + // return selectedCategories; + // }; + // 有id数组时候使用 后续 使用已保存得时候可能回用到 + useEffect(() => { + if (props.editTwoArray.length > 0) { + // getTrademarkTypeList().then(() => { + + // setCheckedIds(props.editTwoArray); + // const expandedIds = getExpandedIds(props.editTwoArray, trademarkCategories); + // setExpandedIds(expandedIds); + // const selectedCategories = getSelectedCategories(props.editTwoArray, trademarkCategories); + // setSelectedCategories(selectedCategories); + + // }); + } + }, [props.editTwoArray]) + useEffect(() => { + if (trademarkCategories.length > 0) { + // 初始化需要展开的 ID 数组 + const initialExpandedIds: any[] = []; + + // 遍历所有大类 + trademarkCategories.forEach((category: any) => { + // 遍历每个大类下的中类 + category.children.forEach((middleCategory: any) => { + // 检查当前中类下是否有选中的小类 + const hasSelectedChild = middleCategory.children.some((child: any) => + checkedIds.includes(child.id) + ); + + if (hasSelectedChild) { + // 若有选中的小类，添加大类和中类的 ID 到需要展开的数组 + initialExpandedIds.push(category.id, middleCategory.id); + } + }); + }); + + // 设置默认展开状态 + setExpandedIds([...new Set(initialExpandedIds)]); + + // 初始化一个空数组来存储选中的分类信息 + const initialSelectedCategories: { + id: any; + name: string; + code: string; + children: { + id: any; + name: string; + code: string; + children: { id: any; name: string; code: string }[]; + }[]; + }[] = []; + + // 遍历所有大类 + trademarkCategories.forEach((category: any) => { + // 遍历每个大类下的中类 + category.children.forEach((middleCategory: any) => { + // 筛选出当前中类下被选中的小类 + const selectedChildren = middleCategory.children.filter((child: any) => + checkedIds.includes(child.id) + ); + + if (selectedChildren.length > 0) { + // 查找大类是否已存在于 initialSelectedCategories 中 + const categoryIndex = initialSelectedCategories.findIndex( + (cat) => cat.id === category.id + ); + + if (categoryIndex > -1) { + // 若大类已存在，查找中类是否已存在 + const middleCategoryIndex = initialSelectedCategories[categoryIndex].children.findIndex( + (midCat) => midCat.id === middleCategory.id + ); + + if (middleCategoryIndex > -1) { + // 若中类已存在，添加选中的小类 + initialSelectedCategories[categoryIndex].children[middleCategoryIndex].children = [ + ...initialSelectedCategories[categoryIndex].children[middleCategoryIndex].children, + ...selectedChildren + ]; + } else { + // 若中类不存在，添加新的中类和选中的小类 + initialSelectedCategories[categoryIndex].children.push({ + id: middleCategory.id, + name: middleCategory.name, + code: middleCategory.code, + children: selectedChildren + }); + } + } else { + // 若大类不存在，添加新的大类、中类和选中的小类 + initialSelectedCategories.push({ + id: category.id, + name: category.name, + code: category.code, + children: [ + { + id: middleCategory.id, + name: middleCategory.name, + code: middleCategory.code, + children: selectedChildren + } + ] + }); + } + } + }); + }); + + // 设置 selectedCategories 状态 + setSelectedCategories(initialSelectedCategories); + } + }, [trademarkCategories]); return ( -
-
-
-
-
- - + +
+ {contextHolder} +
+
+
+
选择推荐方案
+
+ { + // console.log(`selected ${value}`); + // alert(`selected ${value}`) + // lyp + setTypesId(value) + + + }} + value={typesId} + options={options} + optionRender={(option) => ( +
+
{option.data.label}
+
{ + // 组织默认行为 + e.stopPropagation() + // console.log('删除', option.data); + setDeleteId(option.data.value) + setDeleteTitle(option.data.label) + setDeleteModal(true) + }}>
+ +
+ )} + placeholder="请选择领域" + // defaultValue="" + /> + +
+ {/* 常用商标类别: */} +
+ +
+ +
+
+
+
+ { + setKeyWords(e.target.value) + if (e.target.value == '' && searchKeyWords) { + setSearchKeyWords(''); + console.log(selectedTreeList); + + + + } + }} style={{ width: '100%' }} /> + +
+
类目索引
+
+ + {/* ; */} + {/* */} + + + +
+
+
+
+
已选得商标类别 ：
+
0 ? 'unset' : 'none', + }}> +
+
+ {(() => { + let middleCategoryCount = 0; + let smallCategoryCount = 0; + + // 遍历 selectedCategories 计算中类和小类的数量 + selectedTreeList.forEach((category: any) => { + middleCategoryCount += category.children.length; + category.children.forEach((middleCategory: any) => { + smallCategoryCount += middleCategory.children.length; + }); + }); + + return `共${selectedTreeList.length}大类 累计${middleCategoryCount}个小类/${smallCategoryCount}项商品服务`; + })()} +
+ + +
+
+ + 无 + + +
+ +
+ + +
0 ? 'unset' : 'none', + border: selectedTreeList.length > 0 ? '1px solid #e9e9e9' : 'none', + }}> + {selectedTreeList.map((item: any, index: number) => { + const totalCount = item.children.reduce((acc: any, child: any) => acc + child.children.length, 0); + return ( +
+
+
+ +
+ 第{item.code}类 {item.name} +
+
(共{totalCount}项 , 10项以上每项附加收费{item.price}元)
+
+
+ { + // totalCount <= 10 ?firstPrice:Number(firstPrice) + (totalCount-10) * item.price + // trademarkModePrice={trademarkModePrice} + totalCount <= 10 ? props.trademarkModePrice : props.trademarkModePrice + (totalCount - 10) * item.price + + } + 0 ? 'unset' : 'none' + }}> + ￥{formatNumber(totalCount <= 10 ? props.trademarkModeOldPrice : props.trademarkModeOldPrice + item.price * (totalCount - 10))} + + + { + // 调用删除中类的函数 + handleDeleteCategory(item.id); + }} + style={{ + marginLeft: 10, + cursor: 'pointer', + color: 'rgb(116, 116, 116)' + }}> +
+
+
+ {item.children.map((child: any) => { + return ( +
+
+
{child.code}类 :
+
+ {child.children.map((children: any) => { + return ( +
+ {children.code}-{children.name} { + handleDeleteSmallCategory(item.id, child.id, children.id); + }} + style={{ + marginLeft: 5, + cursor: 'pointer', + }}> +
+ ) + })} +
+
+
+ ) + })}
+
+ + ) + })} +
+
+
+
+
+
点击左侧类目列表选择商标类别群组或使用推荐方案
+
特别提醒:若申请主体执照经营范围含有“商标代理”、“专利代理”、“知识产权服务“等
+
只可注册 4506 下的商品服务项目，否则将被商标局不予受理或驳回，请知悉。
+
+
+ +
+
+
+
+ +
+ + + +
+
+
+ + +
+
+ { + // setRevokeModal(false) + // setSaveModal(false) + if (schemeName) { + // setSaveModal(false) + // console.log(schemeName); + // console.log(selectedTreeList); + // console.log(ids); + try { + await saveTrademarkScheme({ + typesTitle: schemeName, + typeList: ids, + }) + messageApi.open({ + type: 'success', + content: '保存成功', + }) + setSaveModal(false) + + getTrademarkSchemeList() + } 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) + } + } + + + } else { + message.error('请输入方案名称') + } + + }} + onCancel={() => { + setSaveModal(false) + }} + width={400} + centered + > +
+
+ 方案名称 ： +
+
+ { + setSchemeName(e.target.value) + }} placeholder='请输入保存方案名称'> +
+
+ + { + try { + await deleteTrademarkScheme(deleteId) + messageApi.open({ + type: 'success', + content: '删除成功', + }) + getTrademarkSchemeList() + 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) + } + } + + }} + onCancel={() => { + setDeleteModal(false) + }} + width={400} + centered + > +
+ 确定删除{deleteTitle}吗? +
+ + + ) +} diff --git a/src/route/TrademarkMall/components/EditTwo/components/TreeMenu/TreeMenu.tsx b/src/route/TrademarkMall/components/EditTwo/components/TreeMenu/TreeMenu.tsx new file mode 100644 index 0000000..b93649f --- /dev/null +++ b/src/route/TrademarkMall/components/EditTwo/components/TreeMenu/TreeMenu.tsx @@ -0,0 +1,124 @@ +import { useEffect } from 'react'; +// import { Checkbox } from 'antd'; +import './tree-menu.css'; +import { + DownOutlined, + // UpOutlined, + RightOutlined +} from '@ant-design/icons'; + +// interface TreeMenuProps { +// trademarkCategories: { +// id: any; +// name: string; +// children: { +// id: any; +// name: string; +// children: { id: any; name: string }[]; +// }[]; +// }[]; +// expandedIds: any[]; +// setExpandedIds: (ids: any[]) => void; +// checkedIds: any[]; +// setCheckedIds: (ids: any[]) => void; +// selectedCategories: { +// id: any; +// name: string; +// children: { +// id: any; +// name: string; +// children: { id: any; name: string }[]; +// }[]; +// }[]; +// setSelectedCategories: (categories: any[]) => void; +// handleExpandClick: (id: any) => void; +// handleSmallMenuClick: (id: any) => void; +// } + +export default function TreeMenu({ + trademarkCategories, + expandedIds, + // setExpandedIds, + // checkedIds, + // setCheckedIds, + // selectedCategories, + // setSelectedCategories, + handleExpandClick, + // handleSmallMenuClick +}: any) { + useEffect(() => { + console.log('props', trademarkCategories); + }, []); + + // const renderChildren = (children: any[], level: number) => { + // return children.map((child) => { + // const isExpanded = expandedIds.includes(child.id); + // const isLeaf = !child.children || child.children.length === 0; + // const isChecked = checkedIds.includes(child.id); + + // return ( + //
+ // {!isLeaf && ( + //
handleExpandClick(child.id)} + // > + //
+ // {isExpanded ? : } + //
+ //
{child.code}-{child.name}
+ //
+ // )} + // {isLeaf && ( + //
handleSmallMenuClick(child.id)} + // style={{ + // cursor: 'pointer', + // display: 'flex', + // alignItems: 'center', + // paddingRight: 10, + // }} + // > + //
{child.code}-{child.name}
+ //
+ // )} + // {!isLeaf && isExpanded && renderChildren(child.children, level + 1)} + //
+ // ); + // }); + // }; + + return ( +
+ {trademarkCategories.map((category: any) => { + const isExpanded = expandedIds.includes(category.id); + return ( +
+
handleExpandClick(category.id)} + > +
+ {isExpanded ? : } +
+
第{category.code}类 {category.name}
+
+ {/* {isExpanded && renderChildren(category.children, 1)} */} +
+ ); + })} +
+ ); +} \ No newline at end of file diff --git a/src/route/TrademarkMall/components/EditTwo/components/TreeMenu/tree-menu.css b/src/route/TrademarkMall/components/EditTwo/components/TreeMenu/tree-menu.css new file mode 100644 index 0000000..139b136 --- /dev/null +++ b/src/route/TrademarkMall/components/EditTwo/components/TreeMenu/tree-menu.css @@ -0,0 +1,13 @@ +.bigMenu { + display: flex; + cursor: pointer; + margin-top: 10px; +} + +.smallMenu { + /* margin-left: 20px; */ + cursor: pointer; + margin-top: 10px; + /* background-color: skyblue; */ + +} \ No newline at end of file diff --git a/src/route/TrademarkMall/components/EditTwo/components/TreeMenuNew/TreeMenuNew.tsx b/src/route/TrademarkMall/components/EditTwo/components/TreeMenuNew/TreeMenuNew.tsx new file mode 100644 index 0000000..2556661 --- /dev/null +++ b/src/route/TrademarkMall/components/EditTwo/components/TreeMenuNew/TreeMenuNew.tsx @@ -0,0 +1,422 @@ +import { useState } from 'react' +import { + DownOutlined, + // UpOutlined, + RightOutlined +} from '@ant-design/icons'; +import './tree-menu.css' +import { + message, + Spin, + Checkbox +} from 'antd' +import { trademarkTypeList, } from '../../../../../../request/api' + +// 定义数据项类型 +type ItemType = { + id: string; + name: string; + children?: ItemType[]; +}; + +export default function TreeMenuNew(props: any) { + const [messageApi, contextHolder] = message.useMessage(); + const [loading, setLoading] = useState(false) + + // useEffect(() => { + // console.log(props.searchKeyWords); + // }, [props.searchKeyWords]) + + + // 获取中类 + const getTrademarkTypeList = async (id: string) => { + try { + setLoading(true) + const res = await trademarkTypeList({ + id: id + }) + const updatedList = props.trademarkList.map((item: ItemType) => { + if (item.id === id) { + return { ...item, children: res }; + } + return item; + }); + props.setTrademarkList(updatedList) + // 展开当前点击的项 + props.setExpandedIds((prevIds: any) => [...prevIds, id]); + setLoading(false) + } 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) + } + } + + // 获取小类 + const getTrademarkTypeListSmall = async (id: string) => { + try { + setLoading(true) + const res = await trademarkTypeList({ + id: id + }) + const updatedList = props.trademarkList.map((item: ItemType) => { + if (item.children) { + return { + ...item, + children: item.children.map((child: ItemType) => { + if (child.id === id) { + return { ...child, children: res }; + } + return child; + }) + }; + } + return item; + }); + props.setTrademarkList(updatedList) + // 展开当前点击的中类项 + props.setExpandedIds((prevIds: any) => [...prevIds, id]); + setLoading(false) + } 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) + } + } + + // 切换展开状态的函数 + const toggleExpand = (id: string) => { + props.setExpandedIds((prevIds: any) => { + if (prevIds.includes(id)) { + return prevIds.filter((prevId: any) => prevId !== id); + } else { + return [...prevIds, id]; + } + }); + }; + + // 点击勾选和取消勾选 + const handleSmallMenuClick = (id: any) => { + let targetCategory: any; + let targetMiddleCategory: any; + // 找到小类所属的大类和中类 + outerLoop: for (const category of props.trademarkList) { + for (const middleCategory of category.children) { + // 检查 middleCategory.children 是否存在 + if (middleCategory.children && middleCategory.children.some((child: any) => child.id === id)) { + targetCategory = category; + targetMiddleCategory = middleCategory; + break outerLoop; + } + } + } + + if (!targetCategory || !targetMiddleCategory) return; + + const isChecked = props.ids.includes(id); + + props.setIds((prevIds: any) => { + if (isChecked) { + return prevIds.filter((prevId: any) => prevId !== id); + } else { + return [...prevIds, id]; + } + }); + + props.setSelectedTreeList((prevSelectedCategories: any) => { + const categoryIndex = prevSelectedCategories.findIndex( + (category: any) => category.id === targetCategory.id + ); + + if (isChecked) { + // 取消勾选 + if (categoryIndex > -1) { + const middleCategoryIndex = prevSelectedCategories[categoryIndex].children.findIndex( + (middleCategory: any) => middleCategory.id === targetMiddleCategory.id + ); + if (middleCategoryIndex > -1) { + const updatedChildren = prevSelectedCategories[categoryIndex].children[middleCategoryIndex].children.filter( + (child: any) => child.id !== id + ); + + if (updatedChildren.length === 0) { + // 若该中类下没有选中的小类，移除该中类 + const updatedMiddleCategories = prevSelectedCategories[categoryIndex].children.filter( + (_: any, index: any) => index !== middleCategoryIndex + ); + if (updatedMiddleCategories.length === 0) { + // 若该大类下没有选中的中类，移除该大类 + return prevSelectedCategories.filter( + (_: any, index: any) => index !== categoryIndex + ); + } else { + return prevSelectedCategories.map((category: any, index: any) => + index === categoryIndex + ? { ...category, children: updatedMiddleCategories } + : category + ); + } + } else { + return prevSelectedCategories.map((category: any, catIndex: any) => + catIndex === categoryIndex + ? { + ...category, + children: category.children.map((middleCategory: any, midIndex: any) => + midIndex === middleCategoryIndex + ? { ...middleCategory, children: updatedChildren } + : middleCategory + ) + } + : category + ); + } + } + } + } else { + // 勾选 + const newChild = targetMiddleCategory.children.find((child: any) => child.id === id); + if (categoryIndex > -1) { + const middleCategoryIndex = prevSelectedCategories[categoryIndex].children.findIndex( + (middleCategory: any) => middleCategory.id === targetMiddleCategory.id + ); + if (middleCategoryIndex > -1) { + // 若该中类已存在，添加小类到 children 中 + return prevSelectedCategories.map((category: any, catIndex: any) => + catIndex === categoryIndex + ? { + ...category, + children: category.children.map((middleCategory: any, midIndex: any) => + + midIndex === middleCategoryIndex + ? { + ...middleCategory, + // children: [...middleCategory.children, { + // id: newChild.id, + // name: newChild.name, + // code: newChild.code // 添加 code 字段 + // }] + children: [...middleCategory.children, newChild] + } + : middleCategory + ) + } + : category + ); + } else { + // 若该中类不存在，新增一个中类项 + return prevSelectedCategories.map((category: any, catIndex: any) => + catIndex === categoryIndex + ? { + ...category, + children: [ + ...category.children, + { + // id: targetMiddleCategory.id, + // name: targetMiddleCategory.name, + // code: targetMiddleCategory.code, // 添加 code 字段 + // children: [{ + // id: newChild.id, + // name: newChild.name, + // code: newChild.code // 添加 code 字段 + // }] + ...targetMiddleCategory, + children: [newChild] + } + ] + } + : category + ); + } + } else { + // 若该大类不存在，新增一个大类项 + return [ + ...prevSelectedCategories, + { + // id: targetCategory.id, + // name: targetCategory.name, + // code: targetCategory.code, // 添加 code 字段 + ...targetCategory, + children: [ + { + // id: targetMiddleCategory.id, + // name: targetMiddleCategory.name, + // code: targetMiddleCategory.code, // 添加 code 字段 + // children: [{ + // id: newChild.id, + // name: newChild.name, + // code: newChild.code // 添加 code 字段 + // }] + ...targetMiddleCategory, + children: [newChild] + } + ] + } + ]; + } + } + return prevSelectedCategories; + }); + }; + return ( + + {contextHolder} +
+ {props.trademarkList.map((item: any) => { + const isExpanded = props.expandedIds.includes(item.id); + return ( +
+
{ + if (item.children.length <= 0) { + getTrademarkTypeList(item.id); + + } else { + toggleExpand(item.id); + + } + }} + > +
+ {/* 根据展开状态显示不同图标 */} + {isExpanded ? : } +
+
{item.code}-{item.name}
+
+
+ {/* 根据展开状态显示中类子项 */} + {isExpanded && item.children.length > 0 ? item.children.map((child: any) => { + const isChildExpanded = props.expandedIds.includes(child.id); + return ( +
+
{ + if (child.children.length <= 0) { + getTrademarkTypeListSmall(child.id); + } else { + toggleExpand(child.id); + } + }} + > +
+ {isChildExpanded ? : } +
+
{child.code}-{child.name}
+
+
+ {/* 根据展开状态显示小类子项 */} + {isChildExpanded && child.children.length > 0 ? child.children.map((grandChild: any) => ( +
+
{ + // // 判断点击目标是否为 Checkbox 元素，如果是则不进行模拟点击操作 + // if (e.target instanceof HTMLInputElement && e.target.type === 'checkbox') { + // return; + // } + // e.stopPropagation(); + // const checkbox = e.currentTarget.querySelector('input[type="checkbox"]'); + // if (checkbox) { + // // 模拟 Checkbox 的点击事件 + // (checkbox as HTMLInputElement).click(); + // } + // }} + onClick={() => { + handleSmallMenuClick(grandChild.id) + }} + title={grandChild.name} + > +
+ { + // if (e.target.checked) { + // // 选中时将 id 添加到 props.ids 数组 + // props.setIds([...props.ids, grandChild.id]); + // console.log('大类',item); + // console.log('中类', child); + // // console.log('中类',ch); + // console.log('被选小类',grandChild); + + + + // } else { + // // 取消选中时从 props.ids 数组移除 id + // props.setIds(props.ids.filter((id: string) => id !== grandChild.id)); + + + // } + // }} + + + /> +
+
{grandChild.code}-{grandChild.name}
+ +
+
+ )) : null} +
+
+ ) + }) : null} +
+
+ ) + })} +
+ + ) +} \ No newline at end of file diff --git a/src/route/TrademarkMall/components/EditTwo/components/TreeMenuNew/tree-menu.css b/src/route/TrademarkMall/components/EditTwo/components/TreeMenuNew/tree-menu.css new file mode 100644 index 0000000..139b136 --- /dev/null +++ b/src/route/TrademarkMall/components/EditTwo/components/TreeMenuNew/tree-menu.css @@ -0,0 +1,13 @@ +.bigMenu { + display: flex; + cursor: pointer; + margin-top: 10px; +} + +.smallMenu { + /* margin-left: 20px; */ + cursor: pointer; + margin-top: 10px; + /* background-color: skyblue; */ + +} \ No newline at end of file diff --git a/src/route/TrademarkMall/components/EditTwo/edit-tow.css b/src/route/TrademarkMall/components/EditTwo/edit-tow.css new file mode 100644 index 0000000..4a5f4c1 --- /dev/null +++ b/src/route/TrademarkMall/components/EditTwo/edit-tow.css @@ -0,0 +1,117 @@ +.editTwoTitle { + font-size: 18px; + /* font-weight: 700; */ +} + +.editTwoBotL { + width: calc(20% - 2px); + height: 100%; + /* background-color: aqua; */ + border-left: 1px solid #e9e9e9; + border-right: 1px solid #e9e9e9; + border-top: 1px solid #e9e9e9; + position: relative; +} + +.editTwoBotR { + width: calc(80% - 1px); + height: 100%; + /* background-color: rgb(179, 245, 195); */ + border-right: 1px solid #e9e9e9; + border-top: 1px solid #e9e9e9; + +} + +.editTwoBTopTitle { + height: 40px; + background-color: #F3F3F3; + font-size: 16px; + line-height: 40px; + padding-left: 10px; + color: #5a5a5a; +} + +.editTwoBTopText { + height: calc(100% - 40px); + overflow-y: auto; + + + + /* WebKit 浏览器（Chrome、Safari 等） */ + scrollbar-width: thin; + /* Firefox */ + scrollbar-color: #888 #f1f1f1; + /* Firefox */ +} + +/* WebKit 浏览器（Chrome、Safari 等） */ +.editTwoBTopText::-webkit-scrollbar { + width: 8px; + /* 垂直滚动条宽度 */ +} + +.editTwoBTopText::-webkit-scrollbar-track { + background: #f1f1f1; + /* 滚动条轨道背景颜色 */ +} + +.editTwoBTopText::-webkit-scrollbar-thumb { + background: #888; + /* 滚动条滑块颜色 */ + border-radius: 4px; + /* 滚动条滑块圆角 */ +} + +.editTwoBTopText::-webkit-scrollbar-thumb:hover { + background: #555; + /* 鼠标悬停时滚动条滑块颜色 */ +} + + + + +.editTwoBTopTextL { + padding-top: 40px; + padding-left: 10px; + box-sizing: border-box; +} + +.editTwoBTopTextR { + padding: 20px; + box-sizing: border-box +} + +.editTwoGoodsBox { + /* border: 1px solid #e9e9e9; */ +} + +.editTwoGoodsBoxItem { + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 15px; + box-sizing: border-box; + background-color: #e7e7e7; +} +.editTwoGoodsBoxChildItem{ + /* background-color: skyblue; */ + padding: 10px 15px 0px 15px; +} + +.editTwoBTopSearch { + height: 40px; + /* width: calc(100% - 10px); */ + width: 100%; + background-color: rgb(255, 255, 255); + position: absolute; + top: 40px; + left: 0; + z-index: 999; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 10px; + box-sizing: border-box; + /* z-index: 99; */ + +} \ No newline at end of file diff --git a/src/route/index/Index.tsx b/src/route/index/Index.tsx index 965fbe0..9586327 100644 --- a/src/route/index/Index.tsx +++ b/src/route/index/Index.tsx @@ -23,7 +23,7 @@ import MenuWithBottomButtom from '../../components/menu/MenuWithBottomButton.tsx // import MenuTreeWithTopButton from "../../components/menu/MenuTreeWithTopButton.tsx"; // import ListProj from "../../components/list/ListProj.tsx"; // import ListProjAgent from "../../components/list/ListProjAgent.tsx"; -// import { getMenuActive } from '../../util/cache.ts' +import { getMenuActive } from '../../util/cache.ts' import { @@ -57,8 +57,8 @@ import { } from '../../util/AjaxUtils.ts' import { // getLanguageList, getSoftTypeList - // appGoodsList, - buyAppGoods, appOrderList + appGoodsList, + buyAppGoods, appOrderList, trademarkGoodsList } from '../../request/api' import { setMenuActive, @@ -87,13 +87,13 @@ interface DataType { } -// import app from '../../static/left/app.png' -// import appnew from '../../static/left/appnew.png' -// import tra from '../../static/left/tra.png' -// import tranew from '../../static/left/tranew.png' +import app from '../../static/left/app.png' +import appnew from '../../static/left/appnew.png' +import tra from '../../static/left/tra.png' +import tranew from '../../static/left/tranew.png' -// import topblack from '../../static/appimgs/topblack.png' -// import topblue from '../../static/appimgs/topblue.png' +import topblack from '../../static/appimgs/topblack.png' +import topblue from '../../static/appimgs/topblue.png' import right from '../../static/trademark/right.png' import yes from '../../static/trademark/yes.png' @@ -915,7 +915,7 @@ export default function Index() { copyrightLanguage: copyrightLanguage, copyrightType: copyrightType, // 新增特价标识 - goodsFlag: specialPrice=='特价' ? '特价' : '' + goodsFlag: specialPrice == '特价' ? '特价' : '' } }) } @@ -983,8 +983,9 @@ export default function Index() { const [appKeyWords, setAppKeyWords] = useState('') // 电子软著搜索关键字 const [showAppkeyWords, setShowAppkeyWords] = useState('') // 电子软著搜索关键字显示 const [appModal, setAppModal] = useState(false) // 申请电子软著弹窗 + const [tipsModal, setTipsModal] = useState(false) // 申请电子软著付款提示 const [toEditsModal, setToEditsModal] = useState(false) // 电子软著编辑弹窗 - // const [appGoodsArray, setAppGoodsArray] = useState([]) // 电子软著可选商品列表 + const [appGoodsArray, setAppGoodsArray] = useState([]) // 电子软著可选商品列表 const [buyLoading, setBuyLoading] = useState(false) // 购买loading const [appOrderId, setAppOrderId] = useState() // 电子软著订单id const [appExamineStatus, setAppExamineStatus] = useState(null) // 电子软著审核状态 @@ -1051,24 +1052,24 @@ export default function Index() { }, [appKeyWords, appExamineStatus, appApplyStatus]) // 获取电子软著可选商品列表 - // const getAppGoodsList = async () => { - // try { - // const res = await appGoodsList() - // // console.log('电子软著可选商品列表', res); - // setAppGoodsArray(res) - // } catch (error: any) { + const getAppGoodsList = async () => { + try { + const res = await appGoodsList() + // console.log('电子软著可选商品列表', res); + setAppGoodsArray(res) + } 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) - // } - // } - // } + 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) + } + } + } // ----------------------------------------------------------------------------------------------- @@ -1126,6 +1127,34 @@ export default function Index() { // 申请商标是否显示------------------------------------------------------------------------------ const [trademarkBox, setTrademarkBox] = useState(false) // 申请商标弹窗 const [trademarkModal, setTrademarkModal] = useState(false) // 申请商标弹窗 + const [trademarkNewKeywords, setTrademarkNewKeywords] = useState('') // 临时关键字 + const [trademarkKeywords, setTrademarkKeywords] = useState('') // 关键字 + const [trademarkStatus,setTrademarkStatus] = useState(null) + const trademarkKeyWordshandleSearch = () => { + setTrademarkKeywords(trademarkNewKeywords) + } + const trademarkKeyWordshandleChange = (e: any) => { + setTrademarkNewKeywords(e.target.value) + if (e.target.value == '') { + setTrademarkKeywords('') + } + } + const trademarkInit = () => { + setTrademarkNewKeywords('') + setTrademarkKeywords('') + setTrademarkStatus(null) + } + useEffect(() => { + if (location.pathname == '/trademark-mall') { + nav('/trademark-mall', { + state: { + keywords: trademarkKeywords, + trademarkStatus:trademarkStatus + } + }) + } + + }, [trademarkKeywords,trademarkStatus]) // const [toRradeMarkModal, setToRradeMarkModal] = useState(false) // 申请商标编辑弹窗 // ---------------------------------------------------------------------------------------------------- @@ -1310,55 +1339,143 @@ export default function Index() { // { id: '3', title: '1个工作日下证', price: '2599', back: 'black' }, // { id: '4', title: '当天下证', price: '3699', back: 'black' }, // ] + // // 智能注册商标申请价格 + // const [TrademarkAiPrice, setTrademarkAiPrice] = useState(0) + // // 智能申请注册原价 + // const [TrademarkAiOldPrice, setTrademarkAiOldPrice] = useState(0) + // // 专家辅助注册价格 + // const [TrademarkExpertPrice, setTrademarkExpertPrice] = useState(0) + // // 至尊无忧注册价格 + // const [TrademarkUltimatePrice, setTrademarkUltimatePrice] = useState(0) + const [trademarkArray, setTrademarkArray] = useState([]) // 商标数组 + const getTrademarkGoodsList = async () => { + try { + const res: any = await trademarkGoodsList() + // console.log('商标列表', res); + // res是个数组 循环数组 找到name为"智能申请注册"的 把价格赋值给智能注册商标申请价格 + // res.forEach((item: any) => { + // if (item.name == '智能申请注册') { + // setTrademarkAiPrice(item.money) + // setTrademarkAiOldPrice(item.oldMoney) + // } + // if (item.name == '专家辅助注册') { + // setTrademarkExpertPrice(item.money) + // } + // if (item.name == '至尊无忧注册') { + // setTrademarkUltimatePrice(item.money) + // } + // }) + setTrademarkArray([ + { + id: res[0].id, title: '智能申请注册', nowprice: res[0].money / 100, + old: true, //是否显示原价 + oldprice: res[0].oldMoney / 100, //原价 + cheap: true,//特价 + text: '0服务费，针对有一定商标申请经验并能自主评估风险的用户', + left: '性价比', right: '高', + textArray: [ + '自助办理，性价比高', + '自助查询，排查风险', + '人工严审，提升受理率' + ], + serve: false, //专家咨询 + // num: 1 // 限购 + newUser: res[0].newUser + }, + { + id: res[1].id, title: '专家辅助注册', nowprice: res[1].money / 100, cheap: false, + old: false, + oldprice: '', + text: '流程专业代办，适用于商标风险评估、类别选择无经验的新用户', + left: '成功率', right: '高', + textArray: [ + '专家一对一，全流程代办', + '分析风险，优化注册方案', + '分析风险，优化注册方案' + ], + serve: true, + // num: 0 + newUser: '' + }, + { + id: res[2].id, title: '至尊无忧注册', nowprice: res[2].money / 100, cheap: false, + old: false, + oldprice: '', + text: '专家评估提高通过率，注册失败，可赔付全款', + left: '类型', right: '指定类目', + textArray: [ + '你注册，我投保', + '每件商标都有保单', + '指定类目驳回，赔付全款' + ], + serve: true, + newUser: '' + }, + ] + ) + } 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 trademarkArray = [ - { - id: '1', title: '智能申请注册', nowprice: '270', - old: true, //是否显示原价 - oldprice: '318', //原价 - cheap: true,//特价 - text: '0服务费，针对有一定商标申请经验并能自主评估风险的用户', - left: '性价比', right: '高', - textArray: [ - '自助办理，性价比高', - '自助查询，排查风险', - '人工严审，提升受理率' - ], - serve: false, //专家咨询 - num: 1 // 限购 - }, - { - id: '2', title: '专家辅助注册', nowprice: '499', cheap: false, - old: false, - oldprice: '', - text: '流程专业代办，适用于商标风险评估、类别选择无经验的新用户', - left: '成功率', right: '高', - textArray: [ - '专家一对一，全流程代办', - '分析风险，优化注册方案', - '分析风险，优化注册方案' - ], - serve: true, - num: 0 - }, - { - id: '3', title: '至尊无忧注册', nowprice: '599', cheap: false, - old: false, - oldprice: '', - text: '专家评估提高通过率，注册失败，可赔付全款', - left: '类型', right: '指定类目', - textArray: [ - '你注册，我投保', - '每件商标都有保单', - '指定类目驳回，赔付全款' - ], - serve: true, - num: 0 + // const trademarkArray = [ + // { + // id: '1', title: '智能申请注册', nowprice: TrademarkAiPrice, + // old: true, //是否显示原价 + // oldprice: TrademarkAiOldPrice, //原价 + // cheap: true,//特价 + // text: '0服务费，针对有一定商标申请经验并能自主评估风险的用户', + // left: '性价比', right: '高', + // textArray: [ + // '自助办理，性价比高', + // '自助查询，排查风险', + // '人工严审，提升受理率' + // ], + // serve: false, //专家咨询 + // num: 1 // 限购 + // }, + // { + // id: '2', title: '专家辅助注册', nowprice:TrademarkExpertPrice , cheap: false, + // old: false, + // oldprice: '', + // text: '流程专业代办，适用于商标风险评估、类别选择无经验的新用户', + // left: '成功率', right: '高', + // textArray: [ + // '专家一对一，全流程代办', + // '分析风险，优化注册方案', + // '分析风险，优化注册方案' + // ], + // serve: true, + // num: 0 + // }, + // { + // id: '3', title: '至尊无忧注册', nowprice: TrademarkUltimatePrice, cheap: false, + // old: false, + // oldprice: '', + // text: '专家评估提高通过率，注册失败，可赔付全款', + // left: '类型', right: '指定类目', + // textArray: [ + // '你注册，我投保', + // '每件商标都有保单', + // '指定类目驳回，赔付全款' + // ], + // serve: true, + // num: 0 - }, - ] + // }, + // ] const [appGoodsId, setAppGoodsId] = useState('') // 选择的商品id + const [appGoodsMoney, setAppGoodsMoney] = useState(0) // 选择的商品钱 useEffect(() => { // const nowname = sessionStorage.getItem('now') if (location.pathname == '/') { @@ -1764,6 +1881,34 @@ export default function Index() { setTrademarkBox(true) setReplaceSearchBox(false) } + else if (location.pathname.includes('/trademark-ai-edit')) { + setShowSearchBox(false) + setRrefunSearchBox(false) + setCorrectionSearchBox(false) + setContractSearchBox(false) + setNow('商标 / 智能注册') + setSellSearchBox(false) + setSellOrderSearchBox(false) + setCopyrightSearchBox(false) + setTradingSearchBox(false) + setAppSearchBox(false) + setTrademarkBox(false) + setReplaceSearchBox(false) + } + else if (location.pathname.includes('/trademark-expert-edit')) { + setShowSearchBox(false) + setRrefunSearchBox(false) + setCorrectionSearchBox(false) + setContractSearchBox(false) + setNow('商标 / 注册商标') + setSellSearchBox(false) + setSellOrderSearchBox(false) + setCopyrightSearchBox(false) + setTradingSearchBox(false) + setAppSearchBox(false) + setTrademarkBox(false) + setReplaceSearchBox(false) + } else if (location.pathname.includes('/replace')) { setShowSearchBox(false) setRrefunSearchBox(false) @@ -1801,7 +1946,8 @@ export default function Index() { // getLanguageListDate() // getSoftTypeListDate() - // getAppGoodsList() + + // getTrademarkGoodsList() }, []); useEffect(() => { // loactionStorage里的activeMenu @@ -2070,7 +2216,7 @@ export default function Index() { list={agentMenu.list} handleListItem={agentMenu.handleListItem} /> */} - {/* {THEME == 'mzw' ? ( + {THEME == 'mzw' ? ( <>
) : ( <> - )} */} + )} {THEME == 'mzw' ? ( { + getAppGoodsList() setAppModal(true) setAppGoodsId('') + setAppGoodsMoney(0) }} >申请电子软著 { + getTrademarkGoodsList() setTrademarkModal(true) }} >申请商标 + +