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/route/TrademarkMall/TrademarkAiEdit.tsx b/src/route/TrademarkMall/TrademarkAiEdit.tsx index 344fe26..2af369f 100644 --- a/src/route/TrademarkMall/TrademarkAiEdit.tsx +++ b/src/route/TrademarkMall/TrademarkAiEdit.tsx @@ -11,7 +11,7 @@ import EditFive from './components/EditFive/EditFive'; import EditSix from './components/EditSix/EditSix'; export default function TrademarkAiEdit() { const height = window.innerHeight - 180; - const [editProcess, setEditProcess] = useState(1); + const [editProcess, setEditProcess] = useState(2); return (
(); // 文字商标表单 const [formB] = Form.useForm(); // 图形商标表单 + const [formC] = Form.useForm(); // 图形商标表单 const height = window.innerHeight - 350; const [goodsType, setGoodsType] = useState('a') // 生成方式 @@ -23,14 +24,15 @@ export default function EditOne(props: any) { formA.submit(); } else if (goodsType === 'b') { formB.submit(); + } else if (goodsType === 'c') { + formC.submit(); } else { - // 表单不显示时，直接更新步骤 props.setEditProcess(2); } }; + // 文字商标 若设计肖像上传得文件 const [fileList, setFileList] = useState([]); - const handleChange: UploadProps['onChange'] = (info) => { // console.log(info.file.status); @@ -61,6 +63,38 @@ export default function EditOne(props: any) { return; } }; + // 文字图形组合商标 若涉及肖像上传得文件 + 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') { + + // 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([]) @@ -82,7 +116,7 @@ export default function EditOne(props: any) { // const url = showImage(fileId, false); console.log(info.file.response.data.fileId); - + setImgList([ { uid: info.file.response.data.fileId, @@ -101,14 +135,38 @@ export default function EditOne(props: any) { return; } }; + + // 上传图形商标图片 + const [imgLodaing, setImgLodaing] = useState(false) + const [upImglist, setUpImglist] = useState([]) const onFinishA = (values: any) => { console.log(values); - // props.setEditProcess(2); + console.log(fileList); // 上传的授权声明书模板 + console.log(generateImgId); // 自动生成的 + console.log(imgList[0]?.uid); // 手动上传的 + + props.setEditProcess(2); } + + const onFinishB = (values: any) => { + console.log(values); + console.log(upImglist); //商标图样 + + props.setEditProcess(2); + + } + // 上传文字与图形商标图片 + const [imgLodaingC, setImgLodaingC] = useState(false) + const [upImglistC, setUpImglistC] = useState([]) + const onFinishC = (values: any) => { console.log(values); // props.setEditProcess(2); + console.log(upImglistC); //商标图样 + console.log(fileListC); // 上传的授权声明书模板 + console.log(fileListC); + } const onChange = (e: any) => { @@ -172,7 +230,11 @@ export default function EditOne(props: any) { 如何选择? + }} + onClick={() => { + window.open('https://www.baidu.com/') + }} + >如何选择?
- 若您的商标涉及他人姓名/肖像/期刊，请下载授权声明书模板，填写完盖章签字后 + 若您的商标涉及他人姓名/肖像/期刊，请下载 { + window.open('https://www.baidu.com/') + }} + >授权声明书模板，填写完盖章签字后
0} > - 上传附件 + 上传文件
@@ -301,7 +367,11 @@ export default function EditOne(props: any) {
- 2021年12月10日起，商标名称作为必填项提交至商标局。商标局审核人员会根据商标图样中的文字字母等实际展示的信息重新命名商标名称，并展示在商标局官网。 如何解决请参考文档 + 2021年12月10日起，商标名称作为必填项提交至商标局。商标局审核人员会根据商标图样中的文字字母等实际展示的信息重新命名商标名称，并展示在商标局官网。 如何解决请参考 { + window.open('https://www.baidu.com/') + }} + >文档
@@ -343,7 +413,7 @@ export default function EditOne(props: any) { marginTop: '120px', }}>
- 商标类型*： + 商标图样*：
{ + onClick={() => { setImgList([]) formA.setFieldsValue({ imgUrl: '' }) }} @@ -542,13 +612,24 @@ export default function EditOne(props: any) {
-
+
{ + // console.log(errorInfo) + // message.error('请填写完整的信息!') + errorInfo.errorFields.forEach((field) => { + if (field.errors.length > 0) { + // 显示每条错误信息 + message.error(field.errors[0]); + } + }); + }} initialValues={{ softWare: '' }} style={{ marginTop: 20 }} > @@ -572,7 +653,7 @@ export default function EditOne(props: any) { color: 'black', resize: 'none' }} - placeholder="商标说明" + placeholder="例:商标由中文“**”、英文“**”及图形构成，无特殊含义。" > @@ -582,25 +663,553 @@ export default function EditOne(props: any) {
- - - - {/* -
- +
+
+ 商标图样*：
- */} +
+ + + + +
+ + { + 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={(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({ imgUrl: info.file.response.data.fileId }) + + return; + } + if (info.file.status === 'error') { + setImgLodaing(false) + message.error(`上传失败`); + return; + } + }} + showUploadList={false} + headers={{ 'Auth': `Bearer ${token}` }} + disabled={imgList.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({ imgUrl: '' }) + }} + >删除
+ +
+
+
图片尺寸:400*400至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 }} + > +
+
+ 商标名称*： +
+ +
+ + + + + +
+
+ 若您的商标涉及他人姓名/肖像/期刊，请下载 { + window.open('https://www.baidu.com/') + }} + >授权声明书模板，填写完盖章签字后 +
+ { + 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) { + // console.error('仅支持 PNG、PDF、JPG 格式的文件!'); + message.error('仅支持 PNG、PDF、JPG 格式的文件!'); + } + return isPNG || isPDF || isJPG; + }} + // fileList={[]} + onChange={handleChangeC} + showUploadList={false} + headers={{ 'Auth': `Bearer ${token}` }} + disabled={fileListC.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 (!isPNG && !isJPG) { + // console.error('仅支持 PNG、PDF、JPG 格式的文件!'); + message.error('仅支持 PNG、JPG 格式的文件!'); + } + return isPNG || isJPG; + }} + // fileList={[]} + onChange={(info) => { + 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.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({ imgUrl: info.file.response.data.fileId }) + + return; + } + if (info.file.status === 'error') { + setImgLodaingC(false) + message.error(`上传失败`); + return; + } + }} + showUploadList={false} + headers={{ 'Auth': `Bearer ${token}` }} + disabled={imgList.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({ imgUrl: '' }) + }} + >删除
+ +
+
+
图片尺寸:400*400至1500*1500
+
图片大小:200kb内
+
图片格式:仅支持JPG格式
+
上传商标图样颜色为 黑白，注册成功使用时，可任意修改商标图样颜色使用
+
上传商标图样颜色为 彩色，注册成功使用时，不能修改商标图样颜色使用
+
建议上传商标图样颜色:黑白
+
+
+
+ +
+ + +
+ + +
+ + +
下一步
-
+ ) } diff --git a/src/route/TrademarkMall/components/EditTwo/EditTwo.tsx b/src/route/TrademarkMall/components/EditTwo/EditTwo.tsx index dbb8190..15e5045 100644 --- a/src/route/TrademarkMall/components/EditTwo/EditTwo.tsx +++ b/src/route/TrademarkMall/components/EditTwo/EditTwo.tsx @@ -1,6 +1,19 @@ -// import React from 'react' -import { Button } from 'antd' -export default function editTwo(props: any) { +import { useEffect, useState } from 'react' +import { + Button, Select, + // Collapse, Tree +} from 'antd' +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 height = window.innerHeight - 350; const handleSubmit = () => { // console.log(form); @@ -9,13 +22,615 @@ export default function editTwo(props: any) { // form.submit(); }; + // 初始化展开状态，默认所有大类的小类都隐藏 + const [expandedIds, setExpandedIds] = useState([]); + // 初始化勾选状态，默认所有小类都未勾选 + const [checkedIds, setCheckedIds] = useState([]); + // 存储选中的大类和小类信息 + // const [selectedCategories, setSelectedCategories] = useState<{ + // id: any; + // name: string; + // children: { id: any; name: string }[]; + // }[]>([]); + // 存储选中的大类、中类和小类信息 + // 自定义函数，有小数保留两位，没小数不保留 + const formatNumber = (num: number) => { + return Number.isInteger(num) ? num : num.toFixed(2); + }; + const [selectedCategories, setSelectedCategories] = useState<{ + id: any; + name: string; + children: { + id: any; + name: string; + children: { id: any; name: 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: 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 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 }] + } + : middleCategory + ) + } + : category + ); + } else { + // 若该中类不存在，新增一个中类项 + return prevSelectedCategories.map((category, catIndex) => + catIndex === categoryIndex + ? { + ...category, + children: [ + ...category.children, + { + id: targetMiddleCategory.id, + name: targetMiddleCategory.name, + children: [{ id: newChild.id, name: newChild.name }] + } + ] + } + : category + ); + } + } else { + // 若该大类不存在，新增一个大类项 + return [ + ...prevSelectedCategories, + { + id: targetCategory.id, + name: targetCategory.name, + children: [ + { + id: targetMiddleCategory.id, + name: targetMiddleCategory.name, + children: [{ id: newChild.id, name: newChild.name }] + } + ] + } + ]; + } + } + 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]) + + useEffect(() => { + // 模拟有值的 selectedCategories + // const youzhi = [ + // { + // id: 1, + // name: '大类1', + // children: [ + // { + // id: 11, + // name: '中类1-1', + // children: [ + // { id: 111, name: '小类1-1-1' }, + // { id: 112, name: '小类1-1-4' }, + // { id: 113, name: '小类1-1-3' }, + // ] + // } + // ] + // } + // ] + // setSelectedCategories(youzhi) + // const initialCheckedIds = youzhi.flatMap(category => + // category.children.flatMap(middleCategory => + // middleCategory.children.map(child => child.id) + // ) + // ); + // setCheckedIds(initialCheckedIds); + }, []) + + return ( -
+
-
+ // background: 'red' + }}> +
+
选择推荐方案
+
+