diff --git a/src/request/api.ts b/src/request/api.ts index 8a516f3..2c5a718 100644 --- a/src/request/api.ts +++ b/src/request/api.ts @@ -183,7 +183,10 @@ export const aiGenerateImage = (params:any) => aiShopRequest.get(`/aishop/api/tr 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 = () => 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 uptrademarkList = (trademarkId:any,params:any) => aiShopRequest.post(`/aishop/api/trademark/save2/${trademarkId}`,params) diff --git a/src/request/request.ts b/src/request/request.ts index ae54532..304f090 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) => { diff --git a/src/route/AppElectron/components/EditAppFiles/EditAppFiles.tsx b/src/route/AppElectron/components/EditAppFiles/EditAppFiles.tsx index 436b0c7..1ef779e 100644 --- a/src/route/AppElectron/components/EditAppFiles/EditAppFiles.tsx +++ b/src/route/AppElectron/components/EditAppFiles/EditAppFiles.tsx @@ -347,9 +347,10 @@ export default function EditAppFiles(props: any) { action={uploadFileUrl()} fileList={upCodeArray} onChange={(info) => { - 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/TrademarkMall/TrademarkAiEdit.tsx b/src/route/TrademarkMall/TrademarkAiEdit.tsx index 7694164..42fe440 100644 --- a/src/route/TrademarkMall/TrademarkAiEdit.tsx +++ b/src/route/TrademarkMall/TrademarkAiEdit.tsx @@ -4,7 +4,7 @@ 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'; @@ -18,20 +18,29 @@ export default function TrademarkAiEdit() { 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(0); + const [trademarkMode, setTrademarkMode] = useState(state?.trademarkMode); + const [trademarkModeName, setTrademarkModeName] = useState(state?.trademarkModeName); + const [trademarkModePrice, setTrademarkModePrice] = useState(0) const [editOneData, setEditOneData] = useState({ trademarkType: '', //商标类型 text 文字 image 图形 text-image 图文 trademarkName: '', //商标名称 trademarkDescription: '', //商标描述 - trademarkFile: '', //商标文件 + trademarkFile: '', //姓名授权 + trademarkFile1: '', //肖像授权声明书 + trademarkFile2: '', //期刊 trademarkPhotoType: '', //商标图样类型 1 自动生成 2 手动上传 trademarkPhoto: '', //商标图样 }) - const [editTwoArray, setEditTwoArray] = useState([]) + const [editTwoData, setEditTwoData] = useState({ + trademarkTypeDTOS: [], + trademarkTypeIds: [] + }) // const [trademarkId, setTrademarkId] = useState(state.trademarkId?state.trademarkId:''); const [loading, setLoading] = useState(false) const getTrademarkDetail = async (trademarkId: string) => { @@ -40,15 +49,23 @@ export default function TrademarkAiEdit() { const res: any = await trademarkDetail(trademarkId) console.log('详情', res); setEditProcess(res.trademarkProgress + 1) + setTrademarkMode(res.trademarkMode) + setTrademarkModeName(res.trademarkModeName) + setTrademarkModePrice(res.trademarkModePrice / 100) setEditOneData({ trademarkType: res.trademarkType, //商标类型 text 文字 image 图形 text-image 图文 trademarkName: res.trademarkName, //商标名称 trademarkDescription: res.trademarkDescription, //商标描述 - trademarkFile: res.trademarkFile, //商标文件 + trademarkFile: res.trademarkFile, //姓名授权 + trademarkFile1: res.trademarkFile1, //肖像授权声明书 + trademarkFile2: res.trademarkFile2, //期刊 trademarkPhotoType: res.trademarkPhotoType, //商标图样类型 1 自动生成 2 手动上传 trademarkPhoto: res.trademarkPhoto, //商标图样 }) - setEditTwoArray(res.trademarkTypeIds) + setEditTwoData({ + trademarkTypeDTOS: res.trademarkTypeDTOS, + trademarkTypeIds: res.trademarkTypeIds + }) } catch (error: any) { setLoading(false) @@ -81,7 +98,8 @@ export default function TrademarkAiEdit() { } else { setEditProcess(1) } - }, []) + }, [trademarkId]) + // const clickProcess = (index: number) => { // setEditProcess(index) // } @@ -135,7 +153,7 @@ export default function TrademarkAiEdit() { color: editProcess >= 3 ? '#353535' : '#878787', fontWeight: editProcess >= 3 ? 'bold' : 'normal' }} - >选择所属者 + >选择申请人
@@ -189,9 +207,9 @@ export default function TrademarkAiEdit() { display: editProcess == 1 ? 'block' : 'none' }}> + setEditProcess={setEditProcess} + + >
( {record.trademarkType == 'text' ? '文字' : record.trademarkType == 'image' ? '图形' : record.trademarkType == 'text-image' ? '图文' : '未知'} /{record.trademarkName} + display: record.trademarkType == 'image' ? 'none' : 'unset', + }}>/{record.trademarkName} {/* {record} */} ) @@ -66,11 +66,11 @@ export default function TrademarkMall() { key: 'trademarkPhoto', width: 200, render: (text) => ( - @@ -149,12 +149,12 @@ export default function TrademarkMall() { }} onClick={() => { nav(`/trademark-ai-edit/${record.trademarkId}`, { - state: { - trademarkMode: record.trademarkMode, //申请类型id - trademarkModeName: record.trademarkModeName, //申请类型名称 - trademarkId: record.trademarkId, //商标id + // state: { + // trademarkMode: record.trademarkMode, //申请类型id + // trademarkModeName: record.trademarkModeName, //申请类型名称 + // trademarkId: record.trademarkId, //商标id - } + // } }) // console.log(record.checkStatus); @@ -169,6 +169,7 @@ export default function TrademarkMall() { const [data, setData] = useState([]) const [loading, setLoading] = useState(false) const [page, setPage] = useState(1) + const [total, setTotal] = useState(0) const getTrademarkList = async (page: any) => { try { setLoading(true) @@ -179,7 +180,7 @@ export default function TrademarkMall() { }) console.log('结果', res); setData(res.rows) - + setTotal(res.total) setLoading(false) } catch (error: any) { @@ -247,7 +248,7 @@ export default function TrademarkMall() {
{ + current={page} total={total} defaultPageSize={10} onChange={(page) => { setPage(page) getTrademarkList(page) }} /> diff --git a/src/route/TrademarkMall/components/EditOne/EditOne.tsx b/src/route/TrademarkMall/components/EditOne/EditOne.tsx index 57f2763..49438fe 100644 --- a/src/route/TrademarkMall/components/EditOne/EditOne.tsx +++ b/src/route/TrademarkMall/components/EditOne/EditOne.tsx @@ -1,19 +1,59 @@ import { useState, useEffect } from 'react' -import { Button, Radio, Form, Input, Upload, message, Image, Spin } from 'antd' +import { Button, Radio, Form, Input, Upload, message, Image, Spin, Modal } from 'antd' import './EditOne.css' -import { uploadFileUrl, showImage, uploadImageAddUrl,downloadAuthBookUrl,uploadDeputeFileUrl } from '../../../../request/request' +import { uploadFileUrl, showImage, uploadImageAddUrl, downloadAuthBookUrl, uploadDeputeFileUrl } from '../../../../request/request' import { trademarkBaseInfo, aiGenerateImage, fileDetail } from '../../../../request/api' import { - DeleteOutlined, LoadingOutlined + // 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; // 查看表单数据是否发生改变 function deepCompareObjects(obj1: any, obj2: any): boolean { @@ -68,72 +108,72 @@ export default function EditOne(props: any) { }; const [disabled, setDisabled] = useState(false) // 文字商标 若设计肖像上传得文件 - const [fileList, setFileList] = useState([]); - const handleChange: UploadProps['onChange'] = (info) => { - console.log(info.file.status); + // 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([]) - setDisabled(true) - return; - } - if (info.file.status === 'done') { + // // const fileId = info.file.response.data.fileId; + // // // console.log(downloadUrl(fileId)); + // setDisabled(false) + // // const url = showImage(fileId, false); + // setFileAName([ + // { + // uid: info.file.response.data.fileId, + // name: info.file.response.data.fileName, + // status: 'done', + // url: showImage(info.file.response.data.fileId, false) + // } + // ]) - - // const fileId = info.file.response.data.fileId; - // // console.log(downloadUrl(fileId)); - setDisabled(false) - // 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') { - setDisabled(false) - message.error(`上传失败`); - return; - } - }; + // 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 [fileListC, setFileListC] = useState([]); + // const handleChangeC: UploadProps['onChange'] = (info) => { + // // console.log(info.file.status); - if (info.file.status === 'uploading') { - // setFileList([]) - 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)); + // // 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) - } - ]) + // // 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; - } - }; + // return; + // } + // if (info.file.status === 'error') { + // message.error(`上传失败`); + // return; + // } + // }; // 自动生成的img const [generateImgId, setGenerateImgId] = useState('') const [imgList, setImgList] = useState([]) @@ -188,14 +228,16 @@ export default function EditOne(props: any) { const dataInfo = { ...values, trademarkType: goodsType, // 商标类型 - trademarkFile: fileList.length > 0 ? fileList[0].uid : '', // 授权声明书 + 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)); + // console.log(dataInfo); + // console.log(props.editOneData); + // console.log(deepCompareObjects(dataInfo, props.editOneData)); if (deepCompareObjects(dataInfo, props.editOneData)) { props.setEditProcess(2); return; @@ -206,7 +248,9 @@ export default function EditOne(props: any) { setUpLoading(true) const res: any = await trademarkBaseInfo({ ...values, - trademarkFile: fileList[0]?.uid, // 授权声明书 + 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, // 申请类型名称 @@ -218,13 +262,18 @@ export default function EditOne(props: any) { trademarkType: goodsType, // 商标类型 trademarkName: values.trademarkName, // 商标名称 trademarkDescription: values.trademarkDescription, // 商标描述 - trademarkFile: fileList.length > 0 ? fileList[0].uid : '', // 授权声明书 + 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) { @@ -254,6 +303,8 @@ export default function EditOne(props: any) { ...values, trademarkType: goodsType, // 商标类型 trademarkFile: '', // 授权声明书 + trademarkFile1: '', + trademarkFile2: '', trademarkPhotoType: '2', // 1 自动生成 2 手动上传 trademarkName: '', } @@ -272,7 +323,7 @@ export default function EditOne(props: any) { try { setUpLoading(true) - await trademarkBaseInfo({ + const res = await trademarkBaseInfo({ ...values, trademarkId: props.trademarkId ? props.trademarkId : '', // 商标id trademarkMode: props.trademarkMode, // 申请类型id @@ -291,6 +342,11 @@ export default function EditOne(props: any) { trademarkPhoto: values.trademarkPhoto, // 商标图样 }) props.setEditProcess(2); + if (res.data) { + props.setTrademarkId(res.data) + nav(`/trademark-ai-edit/${res.data}`) + + } } catch (error: any) { setUpLoading(false) @@ -320,7 +376,9 @@ export default function EditOne(props: any) { const dataInfo = { ...values, trademarkType: goodsType, // 商标类型 - trademarkFile: fileListC.length > 0 ? fileListC[0].uid : '', // 授权声明书 + 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 @@ -334,9 +392,11 @@ export default function EditOne(props: any) { // return try { setUpLoading(true) - await trademarkBaseInfo({ + const res = await trademarkBaseInfo({ ...values, - trademarkFile: fileListC.length > 0 ? fileListC[0].uid : '', + 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, // 申请类型名称 @@ -350,12 +410,19 @@ export default function EditOne(props: any) { trademarkType: goodsType, // 商标类型 trademarkName: values.trademarkName, // 商标名称 trademarkDescription: values.trademarkDescription, // 商标描述 - trademarkFile: fileListC.length > 0 ? fileListC[0].uid : '', // 授权声明书 + 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) @@ -403,11 +470,11 @@ export default function EditOne(props: any) { formA.setFieldsValue({ trademarkPhoto: imgList[0]?.uid ? imgList[0]?.uid : '' }) } }, [generateType]) - const getUpfileDetail = async (fileId: string) => { + const getNameAfileDetail = async (fileId: string) => { try { const res: any = await fileDetail(fileId) - console.log('文件详情', res); - setFileList([{ + // console.log('文件详情', res); + setFileAName([{ uid: res[0].fileId, // 手动上传的 name: res[0].fileName, // 手动上传的 status: 'done', // 手动上传的 @@ -425,11 +492,98 @@ export default function EditOne(props: any) { } } } - const getUpfileCDetail = async (fileId: string) => { + const getFaceAfileDetail = async (fileId: string) => { try { const res: any = await fileDetail(fileId) - console.log('结果', res); - setFileListC([{ + // 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', // 手动上传的 @@ -448,8 +602,8 @@ export default function EditOne(props: any) { } } useEffect(() => { - console.log('传递one的数据', props.editOneData); - const { trademarkName, trademarkDescription, trademarkPhoto, trademarkPhotoType, trademarkType, trademarkFile } = props.editOneData; + // console.log('传递one的数据', props.editOneData); + const { trademarkName, trademarkDescription, trademarkPhoto, trademarkPhotoType, trademarkType, trademarkFile, trademarkFile1, trademarkFile2 } = props.editOneData; if (trademarkType) { console.log(1); @@ -463,6 +617,11 @@ export default function EditOne(props: any) { trademarkDescription: trademarkDescription, // 商标描述 trademarkPhoto: trademarkPhoto, // 商标图样 }) + // setFileA([ + // trademarkFile, + // trademarkFile1, + // trademarkFile2 + // ].filter(uid => uid !== '')) if (trademarkPhotoType == '1') { // 自动生成 setGenerateImgId(trademarkPhoto) // 自动生成的 } @@ -475,13 +634,13 @@ export default function EditOne(props: any) { }]) // 手动上传的 } if (trademarkFile) { - getUpfileDetail(trademarkFile) - // setFileList([{ - // uid: trademarkFile, - // name: trademarkFile, - // status: 'done', - // url: showImage(trademarkFile, false) - // }]) // 手动上传的 + getNameAfileDetail(trademarkFile) + } + if (trademarkFile1) { + getFaceAfileDetail(trademarkFile1) + } + if (trademarkFile2) { + getBookAfileDetail(trademarkFile2) } } @@ -509,14 +668,15 @@ export default function EditOne(props: any) { status: 'done', // 手动上传的 url: showImage(trademarkPhoto, false) // 手动上传的 }]) + if (trademarkFile) { - getUpfileCDetail(trademarkFile) - // setFileListC([{ - // uid: trademarkFile, - // name: trademarkFile, - // status: 'done', - // url: showImage(trademarkFile, false) - // }]) // 手动上传的 + getNameCfileDetail(trademarkFile) + } + if (trademarkFile1) { + getFaceCfileDetail(trademarkFile1) + } + if (trademarkFile2) { + getBookCfileDetail(trademarkFile2) } } @@ -636,7 +796,7 @@ export default function EditOne(props: any) { }} >授权声明书模板，填写完盖章签字后
- } size="small" spinning={disabled}> + {/* } size="small" spinning={disabled}> 上传文件 - + */} + { + setUpFileAModal(true) + }} + >上传文件A + + ({fileA.length}/3) + +
-
+ {/*
({fileList.length}/1)
@@ -672,15 +840,12 @@ export default function EditOne(props: any) { }}>
)} - {/* 嘻嘻 */} - {/* */} -
+
*/}
授权声明书模板，填写完盖章签字后
- 0} > 上传文件 - + */} + { + setUpFileCModal(true) + }}>上传文件C + + ({fileC.length}/3) + +
-
+ {/*
({fileListC.length}/1)
@@ -1394,15 +1562,12 @@ export default function EditOne(props: any) { }}>
)} - {/* 嘻嘻 */} - {/* */} -
+
*/}
下一步
+ { + // 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; + }} + action={uploadDeputeFileUrl('肖像授权书')} + fileList={fileAFace} + onChange={(info) => { + + if (info.file.status === 'uploading') { + const { fileList } = info; + setFileAFace(fileList); + setDisabled(true) + return; + } + if (info.file.status === 'done') { + setDisabled(false) + setFileAFace([ + { + uid: info.file.response.data.fileId, + name: info.file.response.data.fileName, + status: 'done', + url: showImage(info.file.response.data.fileId, false) + } + ]) + + + } + if (info.file.status === 'error') { + setDisabled(false) + // 显示错误提示 + // message.error(`上传失败`); + message.error(info.file.response.msg); + + setFileAFace([]) + } + + + }} + onRemove={() => { + setFileAFace([]) + + }} + + headers={{ 'Auth': `Bearer ${token}` }} + > + + + + +
+ +
+ + {/* 期刊证明 */} +
+
+ { + + const isPDF = file.type === 'application/pdf'; + const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg'; + if (!isPDF && !isJPG) { + message.error('仅支持 PNG、PDF、JPG 格式的文件!'); + } + return isPDF || isJPG; + }} + name="file" + action={uploadDeputeFileUrl('期刊证明')} + fileList={fileABook} + onChange={(info) => { + + if (info.file.status === 'uploading') { + const { fileList } = info; + setFileABook(fileList); + setDisabled(true) + return; + } + if (info.file.status === 'done') { + setDisabled(false) + setFileABook([ + { + uid: info.file.response.data.fileId, + name: info.file.response.data.fileName, + status: 'done', + url: showImage(info.file.response.data.fileId, false) + } + ]) + + + } + if (info.file.status === 'error') { + setDisabled(false) + // message.error(`上传失败`); + message.error(info.file.response.msg); + + setFileABook([]) + } + + + }} + onRemove={() => { + setFileABook([]) + + }} + + headers={{ 'Auth': `Bearer ${token}` }} + > + + + + +
+ +
+
+
+
+ 请上传商标申请对应的姓名授权证明文件(请上传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/EditThree/EditThree.tsx b/src/route/TrademarkMall/components/EditThree/EditThree.tsx index 35387ea..09f9579 100644 --- a/src/route/TrademarkMall/components/EditThree/EditThree.tsx +++ b/src/route/TrademarkMall/components/EditThree/EditThree.tsx @@ -1,36 +1,33 @@ import { useState } from 'react' -import { Button, Form, Input, message, Modal } from "antd" -import BelongPeople from '../../../../components/BelongPeople/BelongPeople.tsx' +import { Button, Form, Input, message, Modal, Radio } from "antd" +import { + PlusOutlined +} from '@ant-design/icons'; +import './edit-three.css' export default function EditThree(props: any) { - const [form] = Form.useForm(); - const height = window.innerHeight - 350; - const handleSubmit = () => { - - form.submit(); - props.setEditProcess(4); - - }; - const onFinish = (values: any) => { - console.log('Success:', values); - props.setEditProcess(4); - }; - const [belongPeopleInfo, setBelongPeopleInfo] = useState({ - authorName: '', - authorType: '', - authorIdCardType: '', - authorIdCard: '', - authorCrcAccount: 0, - authorId: '', - authorProvinceCity: '', - authorCrcAccountPassword: '', - authorCrcAccountUsername: '' - }) - const [belongModal, setBelongModal] = useState(false) - const setValue = (value: string) => { - form.setFieldsValue({ - projOwnerName: value - }) + // const [form] = Form.useForm(); + const [formA] = Form.useForm(); // + const onFinishA = (values:any) => { + console.log(values); + } + const height = window.innerHeight - 350; + const [addPeopleModal, setAddPeopleModal] = 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 handleSubmit = () => { + // form.submit(); + props.setEditProcess(4); + + }; + return (
@@ -40,100 +37,54 @@ export default function EditThree(props: any) { padding: '50px 50px', boxSizing: 'border-box', }}> -
{ - errorInfo.errorFields.forEach((field) => { - if (field.errors.length > 0) { - // 显示每条错误信息 - message.error(field.errors[0]); - } - }); - }} - > - -
- -
+
+
+ 选择申请人*： +
+
-
产权所属者*：
- - - +
- }} - onClick={() => { - setBelongModal(true) - }} - > - 选择 -
-
- { - setValue('') - setBelongPeopleInfo({ - authorName: '', - authorType: '', - authorIdCardType: '', - authorIdCard: '', - authorCrcAccount: 0, - authorId: '', - authorProvinceCity: '', - authorCrcAccountUsername: '', - authorCrcAccountPassword: '', - }) - }}> 取消
- -
+
{ + setAddPeopleModal(true) + }}> +
+ }}>
+
添加新申请人
+
+
@@ -165,19 +116,113 @@ export default function EditThree(props: any) { }} >下一步
- { - setBelongModal(false) + setAddPeopleModal(false) }}> +
+
申请人信息
+
+
+ 申请人类型*： +
+
+ + 个人个体工商户 + 企业 + +
+
+
+ 营业执照类型为(个体工商户)，请选择:(个人/个体工商户) 营业执照类型为(公司企业)，请选择:(企业) +
+
+ 申请人提交审核后，不支持修改类型:如需修改，请重新创建申请人 +
+
+
+
+ 资质类型*： +
+
+ + 个人 + 体工商户 + +
+
+ { + // console.log(errorInfo) + // message.error('请填写完整的信息!') + errorInfo.errorFields.forEach((field) => { + if (field.errors.length > 0) { + // 显示每条错误信息 + message.error(field.errors[0]); + } + }); + }} + initialValues={{ softWare: '' }} + style={{ marginTop: 20 }} + > +
+
+ 商标名称*： +
- { setBelongModal(false) }} setBelongPeopleInfo={setBelongPeopleInfo} belongPeopleInfo={belongPeopleInfo} setValue={setValue} isShow={true}> +
+ + + + + + + +
+ + +
+ + + + + +
+
) 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..ceb5c12 --- /dev/null +++ b/src/route/TrademarkMall/components/EditThree/edit-three.css @@ -0,0 +1,35 @@ +.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; +} +.addPeopleItem{ + display: flex; + align-items: center; +} +.addPeopleItemTitle{ + font-size: 16px; + /* background-color: skyblue; */ + width: 120px; + text-align: left; + margin-right: 10px; +} +.redTips{ + color: red; +} \ 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 e8081a1..be7675d 100644 --- a/src/route/TrademarkMall/components/EditTwo/EditTwo.tsx +++ b/src/route/TrademarkMall/components/EditTwo/EditTwo.tsx @@ -9,7 +9,7 @@ import { import { SyncOutlined, } from '@ant-design/icons'; -import { trademarkTypeList, uptrademarkList } from '../../../../request/api' +import { uptrademarkList } from '../../../../request/api' const { Search } = Input; import { CloseOutlined, @@ -212,7 +212,7 @@ export default function EditTwo(props: any) { // ]; - const [trademarkCategories, setTrademarkCategories] = useState([]); + const [trademarkCategories ] = useState([]); // const [filteredCategories, setFilteredCategories] = useState(trademarkCategories); const [filteredCategories, setFilteredCategories] = useState([]); @@ -497,124 +497,124 @@ export default function EditTwo(props: any) { setExpandedIds([...new Set(initialExpandedIds)]); } }, [searchKeyWords]); - const getTrademarkTypeList = async () => { - try { - const res: any = await trademarkTypeList() - // 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 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() + // 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 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 }[]; - }[]; - }[] = []; + // 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; + // 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; - }; + // 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(() => { + // getTrademarkTypeList().then(() => { - setCheckedIds(props.editTwoArray); - const expandedIds = getExpandedIds(props.editTwoArray, trademarkCategories); - setExpandedIds(expandedIds); - const selectedCategories = getSelectedCategories(props.editTwoArray, trademarkCategories); - setSelectedCategories(selectedCategories); + // setCheckedIds(props.editTwoArray); + // const expandedIds = getExpandedIds(props.editTwoArray, trademarkCategories); + // setExpandedIds(expandedIds); + // const selectedCategories = getSelectedCategories(props.editTwoArray, trademarkCategories); + // setSelectedCategories(selectedCategories); - }); + // }); } }, [props.editTwoArray]) useEffect(() => { @@ -791,7 +791,7 @@ export default function EditTwo(props: any) { // setExpandedIds([]); // 清空展开状态 // console.log(trademarkCategories); // setFilteredCategories(trademarkCategories); - getTrademarkTypeList() + // getTrademarkTypeList() setExpandedIds(checkedIds) // initialExpandedIds console.log(checkedIds); @@ -804,7 +804,7 @@ export default function EditTwo(props: any) { setKeyWords(''); setSearchKeyWords(''); // setFilteredCategories(trademarkCategories); - getTrademarkTypeList() + // getTrademarkTypeList() setExpandedIds(checkedIds) // setExpandedIds(checkedIds) diff --git a/src/route/TrademarkMall/components/EditTwo/EditTwoNew.tsx b/src/route/TrademarkMall/components/EditTwo/EditTwoNew.tsx new file mode 100644 index 0000000..df97919 --- /dev/null +++ b/src/route/TrademarkMall/components/EditTwo/EditTwoNew.tsx @@ -0,0 +1,676 @@ +import { useEffect, useState } from 'react' +import { + Button, Select, + // Collapse, Tree + Input, + message, + Spin +} from 'antd' +import { + SyncOutlined, + DeleteOutlined, + CloseOutlined +} from '@ant-design/icons'; +// import { useParams } from 'react-router-dom'; +import { trademarkTypeList, uptrademarkList, trademarkTypeSearch } from '../../../../request/api' + +const { Search } = Input; + +// import { +// DownOutlined, +// } from '@ant-design/icons'; +import TreeMenu from './components/TreeMenuNew/TreeMenuNew' +// import type { TreeDataNode } from 'antd'; +import './edit-tow.css' +export default function EditTwo(props: any) { + // const pathParams = useParams(); + // const firstPrice = pathParams.firstPrice + // const [messageApi, contextHolder] = message.useMessage(); + const [messageApi, contextHolder] = message.useMessage(); + const height = window.innerHeight - 350; + const [loading, setLoading] = useState(false) + + const [ids, setIds] = useState([]) + const [expandedIds, setExpandedIds] = useState([]); + + // 类型数组 + const [trademarkList, setTrademarkList] = useState([]) + // 被选择的类型数组 + const [selectedTreeList, setSelectedTreeList] = useState([]) + // 提交 + const handleSubmit = async () => { + console.log(ids); + console.log(selectedTreeList); + if (ids.length <= 0) { + message.error('请选择分类'); + return + } else { + // 使用 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(ids); + const editTwoArrayCount = getElementCount(props.editTwoData.trademarkTypeIds); + 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: ids + }) + props.setEditTwoData({ + trademarkTypeIds: ids, + trademarkTypeDTOS: selectedTreeList + }) + props.setEditProcess(3); + + 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) + } + } + + // await uptrademarkList(props.trademarkId, { + // typeIds: ids + // }) + + + }; + // 处理删除小类的点击事件 + const handleDeleteSmallCategory = (categoryId: any, middleCategoryId: any, smallCategoryId: any) => { + setSelectedTreeList((prevSelectedCategories: any) => { + return prevSelectedCategories.map((category: any) => { + if (category.id === categoryId) { + return { + ...category, + children: category.children.map((middleCategory: any) => { + if (middleCategory.id === middleCategoryId) { + return { + ...middleCategory, + children: middleCategory.children.filter((child: any) => child.id !== smallCategoryId) + }; + } + return middleCategory; + }).filter((middleCategory: any) => middleCategory.children.length > 0) + }; + } + return category; + }).filter((category: any) => category.children.length > 0); + }); + + // 更新 checkedIds 状态 + setIds((prevCheckedIds: any) => prevCheckedIds.filter((id: any) => id !== smallCategoryId)); + }; + // 处理删除大类的点击事件 + const handleDeleteCategory = (categoryId: any) => { + // 找到要删除的大类下所有小类的 id + const targetCategory = selectedTreeList.find((category: any) => category.id === categoryId); + const smallCategoryIdsToRemove = targetCategory?.children.flatMap((middleCategory: any) => + middleCategory.children.map((child: any) => child.id) + ) || []; + + // 更新 selectedTreeList 状态，移除对应的大类 + setSelectedTreeList((prevSelectedCategories: any) => + prevSelectedCategories.filter((category: any) => category.id !== categoryId) + ); + + // 更新 ids 状态，移除该大类下所有小类的 id + setIds((prevCheckedIds: any) => + prevCheckedIds.filter((id: any) => !smallCategoryIdsToRemove.includes(id)) + ); + }; + const formatNumber = (num: number) => { + return Number.isInteger(num) ? num : num.toFixed(2); + }; + // useEffect(() => { + + + // }, [ids]) + const getTrademarkTypeList = async (id: string) => { + try { + setLoading(true) + const res = await trademarkTypeList({ + id: id + }) + console.log('嘻嘻嘻噶噶', res); + setTrademarkList(res) + 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(() => { + getTrademarkTypeList('') + + }, []) + useEffect(() => { + if (props.editTwoData.trademarkTypeIds.length > 0) { + // console.log('传递过来的', props.editTwoData); + setSelectedTreeList(props.editTwoData.trademarkTypeDTOS) + setIds(props.editTwoData.trademarkTypeIds) + + } + }, [props.editTwoData]) + + useEffect(() => { + console.log(selectedTreeList); + // 找出selectedTreeList数组里的id 形成一个新的大类数组 + console.log(ids); + + }, [selectedTreeList]) + + + + + + + + + + + // useEffect(() => { + // console.log('selectedCategories', selectedCategories); + + // }, [selectedCategories]) + const [keyWords, setKeyWords] = useState(''); + const [searchKeyWords, setSearchKeyWords] = useState(''); + const onSearch = (value: string) => { + setSearchKeyWords(value) + + } + // 搜索 + const getTrademarkTypeSearch = async () => { + try { + setLoading(true) + setTrademarkList([]) + const res = await trademarkTypeSearch({ + keywords: searchKeyWords + }) + setTrademarkList(res) + setLoading(false) + // res这个数组有三层 要每层都有处于打开状态 就是把每层的id都赋值给expandedIds + // 遍历res 把每层的id都赋值给expandedIds + const allIds: string[] = []; + const collectIds = (list: any) => { + list.forEach((item: any) => { + allIds.push(item.id); + if (item.children) { + collectIds(item.children); + } + }); + }; + collectIds(res); + + setExpandedIds(allIds); + + // const allIds: string[] = []; + // // 递归收集所有节点的 id + // const collectIds = (list: any) => { + // list.forEach((item: any) => { + // allIds.push(item.id); + // if (item.children) { + // collectIds(item.children); + // } + // }); + // }; + // collectIds(trademarkList); + // // 设置展开所有节点 + // setExpandedIds(allIds); + } 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 initExpandedIds = async () => { + // await getTrademarkTypeList('') + // const allIds: string[] = []; + // const collectIds = (list: any) => { + // list.forEach((item: any) => { + // allIds.push(item.id); + // if (item.children) { + // collectIds(item.children); + // } + // }); + // }; + // collectIds(selectedTreeList); + + // setExpandedIds(allIds); + // }; + useEffect(() => { + if (searchKeyWords) { + getTrademarkTypeSearch() + // console.log('呵呵呵', selectedTreeList); + + } else { + // console.log('呵呵呵', selectedTreeList); + + // initExpandedIds() + getTrademarkTypeList('') + setExpandedIds([]) + } + }, [searchKeyWords]) + + + + + + + + + + + return ( + +
+ {contextHolder} +
+
+
+
选择推荐方案
+
+