Tenlion/system-copyright-react
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

暂存

Browse Source
This commit is contained in:
lyp 2025-06-18 21:03:36 +08:00
parent b8326d0337
commit dcb363e505
14 changed files with 2415 additions and 430 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/request/api.ts
View File

@ -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)

2
src/request/request.ts
View File

@ -67,7 +67,7 @@ request.interceptors.response.use(
// 买卖功能(交易中心/APP电子软著)----------------------------------------------------------------------------
const aiShopRequest = axios.create({
baseURL: aiShopBaseUrl,
timeout: 5000,
timeout: 30000,
});
aiShopRequest.interceptors.request.use(
(config) => {

10
src/route/AppElectron/components/EditAppFiles/EditAppFiles.tsx
View File

@ -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') {

47
src/route/TrademarkMall/TrademarkAiEdit.tsx
View File

@ -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<any>({
trademarkType: '', //商标类型 text 文字 image 图形 text-image 图文
trademarkName: '', //商标名称
trademarkDescription: '', //商标描述
trademarkFile: '', //商标文件
trademarkFile: '', //姓名授权
trademarkFile1: '', //肖像授权声明书
trademarkFile2: '', //期刊
trademarkPhotoType: '', //商标图样类型 1 自动生成 2 手动上传
trademarkPhoto: '', //商标图样
})
const [editTwoArray, setEditTwoArray] = useState<any>([])
const [editTwoData, setEditTwoData] = useState<any>({
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'
}}
>选择所属者</div>
>选择申请人</div>
</div>
<div className='editright'><RightOutlined /></div>
<div className='editProcess' >
@ -189,9 +207,9 @@ export default function TrademarkAiEdit() {
display: editProcess == 1 ? 'block' : 'none'
}}>
<EditOne
// key={editProcess}
trademarkMode={state?.trademarkMode} //申请类型id
trademarkModeName={state?.trademarkModeName} //申请类型名称
key={editProcess}
trademarkMode={trademarkMode} //申请类型id
trademarkModeName={trademarkModeName} //申请类型名称
trademarkId={trademarkId} //商标id
setTrademarkId={setTrademarkId} //设置商标id
setEditProcess={setEditProcess}
@ -203,11 +221,14 @@ export default function TrademarkAiEdit() {
display: editProcess == 2 ? 'block' : 'none'
}}>
<EditTwo
editTwoArray={editTwoArray}
setEditTwoArray={setEditTwoArray}
trademarkModePrice={trademarkModePrice}
setEditTwoData={setEditTwoData}
editTwoData={editTwoData}
trademarkId={trademarkId} //商标id
// key={editProcess}
setEditProcess={setEditProcess}></EditTwo>
setEditProcess={setEditProcess}
></EditTwo>
</div>
<div style={{

29
src/route/TrademarkMall/TrademarkMall.tsx
View File

@ -51,8 +51,8 @@ export default function TrademarkMall() {
render: (_text, record) => (
<span>
{record.trademarkType == 'text' ? '文字' : record.trademarkType == 'image' ? '图形' : record.trademarkType == 'text-image' ? '图文' : '未知'} <span style={{
display:record.trademarkType == 'image'? 'none' : 'unset',
}}>/{record.trademarkName}</span>
display: record.trademarkType == 'image' ? 'none' : 'unset',
}}>/{record.trademarkName}</span>
{/* {record} */}
</span>
)
@ -66,11 +66,11 @@ export default function TrademarkMall() {
key: 'trademarkPhoto',
width: 200,
render: (text) => (
<Image src={showImage(text, false)}
height={100}
style={{
maxWidth: 200,
}}
<Image src={showImage(text, false)}
height={100}
style={{
maxWidth: 200,
}}
>
</Image>
@ -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<any>([])
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() {
<div className='product-release-pagination'>
<Pagination
showSizeChanger={false}
current={page} total={data.total} defaultPageSize={10} onChange={(page) => {
current={page} total={total} defaultPageSize={10} onChange={(page) => {
setPage(page)
getTrademarkList(page)
}} />

989
src/route/TrademarkMall/components/EditOne/EditOne.tsx
View File

File diff suppressed because it is too large Load Diff

277
src/route/TrademarkMall/components/EditThree/EditThree.tsx
View File

@ -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<any>(); //
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 (
<div className='editOneTwo'>
<div className='topLine'></div>
@ -40,100 +37,54 @@ export default function EditThree(props: any) {
padding: '50px 50px',
boxSizing: 'border-box',
}}>
<Form form={form} onFinish={onFinish}
onFinishFailed={(errorInfo) => {
errorInfo.errorFields.forEach((field) => {
if (field.errors.length > 0) {
// 显示每条错误信息
message.error(field.errors[0]);
}
});
}}
>
<div style={{
display: 'flex',
justifyContent: 'space-between',
width: '900px',
}}>
<div className='appInfoFormInput' style={{
// background: 'pink',
position: 'relative',
<div>
<div className='editFormItem'>
<div className='editFormItemTitle'>
选择申请人<span className='redTitle' >*</span>：
</div>
<div style={{
// background:'pink',
position: 'relative'
}}>
<div className='FormInputTitle'>产权所属者<span style={{ color: 'red', }}>*</span>：</div>
<Form.Item name="projOwnerName" label="" rules={[{ required: true, message: '请选择/创建知识产权所属者' },
]}>
<Input
style={{
width: '300px',
height: '42px',
}} placeholder="请选择/创建知识产权所属者" />
</Form.Item>
<Input style={{
width: 300,
height: 46,
background: '#FFF',
// color: 'black'
}}
placeholder="选择申请人"></Input>
<div style={{
display: belongPeopleInfo.authorId ? 'none' : 'unset',
position: 'absolute',
width: '300px',
height: '42px',
width: 290,
height: '46px',
top: '0',
right: '0',
// background: 'skyblue',
textAlign: 'right',
lineHeight: '42px',
// textAlign: 'right',
// lineHeight: '42px',
cursor: 'pointer',
paddingRight: '10px',
color: '#1F79FF',
}}>
}}
onClick={() => {
setBelongModal(true)
}}
>
选择
</div>
<div style={{
display: belongPeopleInfo.authorId ? 'unset' : 'none',
position: 'absolute',
width: '300px',
height: '42px',
top: '0',
right: '0',
// background: 'skyblue',
textAlign: 'right',
lineHeight: '42px',
paddingRight: '10px',
color: '#1F79FF',
}}
>
<span
style={{
cursor: 'pointer',
}}
onClick={() => {
setValue('')
setBelongPeopleInfo({
authorName: '',
authorType: '',
authorIdCardType: '',
authorIdCard: '',
authorCrcAccount: 0,
authorId: '',
authorProvinceCity: '',
authorCrcAccountUsername: '',
authorCrcAccountPassword: '',
})
}}> 取消</span>
</div>
</div>
</div>
<div className='addPeopleBox' onClick={() => {
setAddPeopleModal(true)
}}>
<div style={{
fontSize: 30,
</Form>
}}><PlusOutlined /></div>
<div style={{
// fontSize:16
marginTop: 10
}}
>添加新申请人</div>
</div>
</div>
</div>
<div className='topLine'></div>
@ -165,19 +116,113 @@ export default function EditThree(props: any) {
}}
>下一步</Button>
</div>
<Modal title="选择所属者"
<Modal title="新建申请人"
destroyOnClose
centered
open={belongModal}
width={1200}
open={addPeopleModal}
width={1000}
footer={null}
onCancel={() => {
setBelongModal(false)
setAddPeopleModal(false)
}}>
<div>
<div className='addPeopleTitle'>申请人信息</div>
<div className='addPeopleItem' style={{
}}>
<div className='addPeopleItemTitle'>
申请人类型<span className='redTitle'>*</span>：
</div>
<div style={{
marginLeft: '2px',
}}>
<Radio.Group
onChange={applicantTypeChange} value={applicantType}
>
<Radio value="1">个人个体工商户</Radio>
<Radio value="2">企业</Radio>
</Radio.Group>
</div>
</div>
<div className='redTips'>
营业执照类型为(个体工商户)，请选择:(个人/个体工商户) 营业执照类型为(公司企业)，请选择:(企业)
</div>
<div className='redTips'>
申请人提交审核后，不支持修改类型:如需修改，请重新创建申请人
</div>
<div style={{
display: applicantType == '1' ? 'unset' : 'none'
}}>
<div className='addPeopleItem' style={{
}}>
<div className='addPeopleItemTitle'>
资质类型<span className='redTitle'>*</span>：
</div>
<div style={{
marginLeft: '2px',
}}>
<Radio.Group
onChange={qualificationsChange} value={qualifications}
>
<Radio value="1">个人</Radio>
<Radio value="2">体工商户</Radio>
</Radio.Group>
</div>
</div>
<Form
name="FormA"
form={formA}
onFinish={onFinishA}
onFinishFailed={(errorInfo) => {
// console.log(errorInfo)
// message.error('请填写完整的信息!')
errorInfo.errorFields.forEach((field) => {
if (field.errors.length > 0) {
// 显示每条错误信息
message.error(field.errors[0]);
}
});
}}
initialValues={{ softWare: '' }}
style={{ marginTop: 20 }}
>
<div className='editFormItem'>
<div className='editFormItemTitle'>
商标名称<span className='redTitle' >*</span>：
</div>
<BelongPeople closeModal={() => { setBelongModal(false) }} setBelongPeopleInfo={setBelongPeopleInfo} belongPeopleInfo={belongPeopleInfo} setValue={setValue} isShow={true}></BelongPeople>
<div style={{
// background:'pink',
position: 'relative',
}}>
<Form.Item
name="trademarkName"
rules={[{ required: true, message: '请输入商标名称' }]}
>
<Input style={{
width: 600,
height: 46,
background: '#FFF',
color: 'black'
}}
placeholder="商标名称"
>
</Input>
</Form.Item>
</div>
</div>
</Form>
</div>
</div>
</Modal>
</div>
)

35
src/route/TrademarkMall/components/EditThree/edit-three.css Normal file
View File

@ -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;
}

206
src/route/TrademarkMall/components/EditTwo/EditTwo.tsx
View File

@ -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<any[]>([]);
const [trademarkCategories ] = useState<any[]>([]);
// const [filteredCategories, setFilteredCategories] = useState(trademarkCategories);
const [filteredCategories, setFilteredCategories] = useState<any[]>([]);
@ -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)

676
src/route/TrademarkMall/components/EditTwo/EditTwoNew.tsx Normal file
View File

@ -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<any>([])
const [expandedIds, setExpandedIds] = useState<string[]>([]);
// 类型数组
const [trademarkList, setTrademarkList] = useState<any>([])
// 被选择的类型数组
const [selectedTreeList, setSelectedTreeList] = useState<any>([])
// 提交
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<string, number>();
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<string>('');
const [searchKeyWords, setSearchKeyWords] = useState<string>('');
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 (
<Spin tip="正在加载，请稍后..." size="small" spinning={loading}>
<div className='editTwoBox'>
{contextHolder}
<div className='topLine'></div>
<div className='' style={{
height: height,
// background: 'red'
}}>
<div style={{
height: '15%',
width: '100%',
// background: 'pink',
padding: '10px',
boxSizing: 'border-box',
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
}}>
<div className='editTwoTitle'>选择推荐方案</div>
<div style={{
display: 'flex',
alignItems: 'center',
}}>
<Select
allowClear
style={{ width: '183px', fontSize: '16px' }}
onChange={async (value: string) => {
console.log(`selected ${value}`);
// alert(`selected ${value}`)
// lyp
}}
options={[
// { value: '', label: '全部类型' },
{ value: '1', label: '领域1' },
{ value: '2', label: '领域2' },
{ value: '3', label: '领域3' },
{ value: '4', label: '领域4' },
{ value: '5', label: '领域5' }
]}
placeholder="请选择领域"
// defaultValue=""
/>
<Button type="primary" style={{
marginLeft: '10px',
}}>
确认添加
</Button>
<div style={{
color: '#5a5a5a',
marginLeft: '10px'
}}>
{/* 常用商标类别: */}
</div>
</div>
</div>
<div style={{
height: '85%',
width: '100%',
// background: 'skyblue',
display: 'flex',
}}>
<div className='editTwoBotL' >
<div className='editTwoBTopSearch'>
<Search placeholder="请输入关键字"
allowClear
onSearch={onSearch} value={keyWords} onChange={async (e) => {
setKeyWords(e.target.value)
if (e.target.value == '' && searchKeyWords) {
setSearchKeyWords('');
console.log(selectedTreeList);
}
}} style={{ width: '100%' }} />
<Button style={{
height: 30,
width: 40,
marginLeft: 10
}} onClick={() => {
setKeyWords('');
setSearchKeyWords('');
setExpandedIds([]);
}} icon={<SyncOutlined />}></Button>
</div>
<div className='editTwoBTopTitle'>类目索引</div>
<div className='editTwoBTopText editTwoBTopTextL' style={{
}}>
{/* <Tree loadData={ } treeData={trademarkList} />; */}
{/* <Tree treeData={trademarkList} /> */}
<TreeMenu
ids={ids}
setIds={setIds}
trademarkList={trademarkList} setTrademarkList={setTrademarkList}
selectedTreeList={selectedTreeList}
setSelectedTreeList={setSelectedTreeList}
searchKeyWords={searchKeyWords}
expandedIds={expandedIds}
setExpandedIds={setExpandedIds}
></TreeMenu>
</div>
</div>
<div className='editTwoBotR'>
<div className='editTwoBTopTitle' style={{
display: 'flex',
}}>
<div style={{
textWrap: 'nowrap',
}}>已选得商标类别 ：</div>
<div style={{
width: '100%',
display: selectedTreeList.length > 0 ? 'unset' : 'none',
}}>
<div style={{
// background: 'skyblue',
width: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
paddingRight: 10,
boxSizing: 'border-box',
}}>
<div>
{(() => {
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}项商品服务`;
})()}
</div>
<div style={{
fontSize: 14,
}}>
<a style={{
cursor: 'pointer',
}}
onClick={() => {
setSelectedTreeList([]);
setIds([]);
// setExpandedIds([]);
}}
>清空</a>
<a style={{
marginLeft: 10,
cursor: 'pointer',
}}
onClick={() => {
}}
>保存为常用</a>
</div>
</div>
</div>
<span style={{
display: selectedTreeList.length <= 0 ? 'unset' : 'none',
}}>
无
</span>
</div>
<div className='editTwoBTopText editTwoBTopTextR'>
<div className='editTwoGoodsBox' style={{
// display: selectedTreeList.length > 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 (
<div key={item.id} style={{
// marginBottom: 20
}}>
<div
className='editTwoGoodsBoxItem'
>
<div style={{
display: 'flex',
}}>
<div>
第{item.code}类 {item.name}
</div>
<div>(共{totalCount}项 , 10项以上每项附加收费{item.price}元)</div>
</div>
<div style={{
paddingRight: 10,
boxSizing: 'border-box',
color: 'red'
}}>
<span style={{
display: index == 0 ? 'unset' : 'none'
}}>{
// totalCount <= 10 ?firstPrice:Number(firstPrice) + (totalCount-10) * item.price
// trademarkModePrice={trademarkModePrice}
totalCount <= 10 ? props.trademarkModePrice : props.trademarkModePrice + (totalCount - 10) * item.price
}</span>
<span style={{
display: index > 0 ? 'unset' : 'none'
}}>
￥{formatNumber(item.price * totalCount <= item.price * 10 ? item.price * 10 : item.price * totalCount)}
</span>
<span onClick={() => {
// 调用删除中类的函数
handleDeleteCategory(item.id);
}}
style={{
marginLeft: 10,
cursor: 'pointer',
color: 'rgb(116, 116, 116)'
}}><DeleteOutlined /></span>
</div>
</div>
<div className='editTwoGoodsBoxChildItem'>
{item.children.map((child: any) => {
return (
<div style={{
}} key={child.id}>
<div style={{
display: 'flex',
// flexWrap: 'wrap',
textWrap: 'nowrap',
}}>
<div style={{
lineHeight: '25px',
marginRight: 10,
}}>{child.code}类 : </div>
<div style={{
display: 'flex',
flexWrap: 'wrap',
}}>
{child.children.map((children: any) => {
return (
<div
style={{
padding: '2px 10px',
// background: '#E6E6E6',
border: '1px solid #E6E6E6',
borderRadius: '5px',
marginRight: 10,
marginBottom: 10,
}}
key={children.id}>
{children.code}-{children.name} <span
onClick={() => {
handleDeleteSmallCategory(item.id, child.id, children.id);
}}
style={{
marginLeft: 5,
cursor: 'pointer',
}}><CloseOutlined /></span>
</div>
)
})}
</div>
</div>
</div>
)
})}</div>
</div>
)
})}
</div>
<div style={{
display: selectedTreeList.length <= 0 ? 'unset' : 'none',
}}>
<div className='editTwoGoodsBox' style={{
// background: 'pink',
width: '100%',
height: '100%',
}}>
<div style={{
width: '100%',
height: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}>
<div>
<div style={{
fontSize: 16,
color: 'rgb(135, 135, 135)'
}}>点击左侧类目列表选择商标类别群组或使用推荐方案</div>
<div style={{
color: 'red'
}}>特别提醒:若申请主体执照经营范围含有“商标代理”、“专利代理”、“知识产权服务“等</div>
<div style={{
color: 'red'
}}>只可注册<span style={{
color: '#1677ff'
}}> 4506 </span> 下的商品服务项目，否则将被商标局不予受理或驳回，请知悉。</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className='topLine'></div>
<div style={{
marginTop: '8px',
display: 'flex',
justifyContent: 'flex-end',
}}>
<Button
style={{
width: '100px',
height: '40px',
borderRadius: '5px',
}}
onClick={() => {
props.setEditProcess(1)
}}
>上一步</Button>
<Button
type='primary'
style={{
width: '100px',
height: '40px',
borderRadius: '5px',
marginLeft: '10px',
}}
onClick={() => {
handleSubmit()
}}
>下一步</Button>
</div>
</div>
</Spin>
)
}

100
src/route/TrademarkMall/components/EditTwo/components/TreeMenu/TreeMenu.tsx
View File

@ -1,5 +1,5 @@
import { useEffect } from 'react';
import { Checkbox } from 'antd';
// import { Checkbox } from 'antd';
import './tree-menu.css';
import {
DownOutlined,
@ -39,64 +39,64 @@ export default function TreeMenu({
trademarkCategories,
expandedIds,
// setExpandedIds,
checkedIds,
// checkedIds,
// setCheckedIds,
// selectedCategories,
// setSelectedCategories,
handleExpandClick,
handleSmallMenuClick
// 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);
// 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 (
<div key={child.id} style={{ marginLeft: level * 15 }}>
{!isLeaf && (
<div
className='bigMenu'
onClick={() => handleExpandClick(child.id)}
>
<div style={{
color: 'rgb(124, 124, 124)',
}}>
{isExpanded ? <DownOutlined /> : <RightOutlined />}
</div>
<div> {child.code}-{child.name}</div>
</div>
)}
{isLeaf && (
<div
className='smallMenu'
onClick={() => handleSmallMenuClick(child.id)}
style={{
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
paddingRight: 10,
}}
>
<div style={{
// background:'skyblue',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
}}
title={child.name}
>{child.code}-{child.name}</div> <Checkbox style={{marginLeft:10}} checked={isChecked} />
</div>
)}
{!isLeaf && isExpanded && renderChildren(child.children, level + 1)}
</div>
);
});
};
// return (
// <div key={child.id} style={{ marginLeft: level * 15 }}>
// {!isLeaf && (
// <div
// className='bigMenu'
// onClick={() => handleExpandClick(child.id)}
// >
// <div style={{
// color: 'rgb(124, 124, 124)',
// }}>
// {isExpanded ? <DownOutlined /> : <RightOutlined />}
// </div>
// <div> {child.code}-{child.name}</div>
// </div>
// )}
// {isLeaf && (
// <div
// className='smallMenu'
// onClick={() => handleSmallMenuClick(child.id)}
// style={{
// cursor: 'pointer',
// display: 'flex',
// alignItems: 'center',
// paddingRight: 10,
// }}
// >
// <div style={{
// // background:'skyblue',
// overflow: 'hidden',
// textOverflow: 'ellipsis',
// whiteSpace: 'nowrap',
// }}
// title={child.name}
// >{child.code}-{child.name}</div> <Checkbox style={{marginLeft:10}} checked={isChecked} />
// </div>
// )}
// {!isLeaf && isExpanded && renderChildren(child.children, level + 1)}
// </div>
// );
// });
// };
return (
<div>
@ -115,7 +115,7 @@ export default function TreeMenu({
</div>
<div> 第{category.code}类 {category.name}</div>
</div>
{isExpanded && renderChildren(category.children, 1)}
{/* {isExpanded && renderChildren(category.children, 1)} */}
</div>
);
})}

422
src/route/TrademarkMall/components/EditTwo/components/TreeMenuNew/TreeMenuNew.tsx Normal file
View File

@ -0,0 +1,422 @@
import { useState, useEffect } 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 (
<Spin tip="正在加载，请稍后..." size="small" spinning={loading}>
{contextHolder}
<div style={{
width: '100%',
overflow: 'hidden',
}}>
{props.trademarkList.map((item: any) => {
const isExpanded = props.expandedIds.includes(item.id);
return (
<div key={item.id}>
<div style={{
display: 'flex',
// alignItems: 'center',
cursor: 'pointer',
marginTop: 10
}}
onClick={() => {
if (item.children.length <= 0) {
getTrademarkTypeList(item.id);
} else {
toggleExpand(item.id);
}
}}
>
<div>
{/* 根据展开状态显示不同图标 */}
{isExpanded ? <DownOutlined /> : <RightOutlined />}
</div>
<div>{item.code}-{item.name}</div>
</div>
<div>
{/* 根据展开状态显示中类子项 */}
{isExpanded && item.children.length > 0 ? item.children.map((child: any) => {
const isChildExpanded = props.expandedIds.includes(child.id);
return (
<div style={{
marginLeft: '20px',
textWrap: 'nowrap',
// background: 'pink',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
width: '100%'
}}
key={child.id}
title={child.name}
>
<div style={{
display: 'flex',
// alignItems: 'center',
cursor: 'pointer',
marginTop: 10,
}}
onClick={() => {
if (child.children.length <= 0) {
getTrademarkTypeListSmall(child.id);
} else {
toggleExpand(child.id);
}
}}
>
<div>
{isChildExpanded ? <DownOutlined /> : <RightOutlined />}
</div>
<div>{child.code}-{child.name}</div>
</div>
<div style={{ marginLeft: '20px' }}>
{/* 根据展开状态显示小类子项 */}
{isChildExpanded && child.children.length > 0 ? child.children.map((grandChild: any) => (
<div key={grandChild.id}>
<div style={{
display: 'flex',
// alignItems: 'center',
cursor: 'pointer',
marginTop: 10,
marginLeft: 10
}}
// onClick={(e) => {
// // 判断点击目标是否为 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}
>
<div style={{
marginRight: 10
}}>
<Checkbox
// 根据 props.ids 中是否存在 grandChild.id 决定选中状态
checked={props.ids.includes(grandChild.id)}
// onChange={(e) => {
// 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));
// }
// }}
/>
</div>
<div>{grandChild.code}-{grandChild.name}</div>
</div>
</div>
)) : null}
</div>
</div>
)
}) : null}
</div>
</div>
)
})}
</div>
</Spin>
)
}

13
src/route/TrademarkMall/components/EditTwo/components/TreeMenuNew/tree-menu.css Normal file
View File

@ -0,0 +1,13 @@
.bigMenu {
display: flex;
cursor: pointer;
margin-top: 10px;
}
.smallMenu {
/* margin-left: 20px; */
cursor: pointer;
margin-top: 10px;
/* background-color: skyblue; */
}

34
src/route/index/Index.tsx
View File

@ -1140,7 +1140,7 @@ export default function Index() {
}
const trademarkInit = () => {
setTrademarkNewKeywords('')
setTrademarkKeywords('')
setTrademarkKeywords('')
}
useEffect(() => {
if (location.pathname == '/trademark-mall') {
@ -1365,9 +1365,9 @@ export default function Index() {
setTrademarkArray([
{
id: res[0].id, title: '智能申请注册', nowprice: res[0].money,
id: res[0].id, title: '智能申请注册', nowprice: res[0].money/100,
old: true, //是否显示原价
oldprice: res[0].oldMoney, //原价
oldprice: res[0].oldMoney/100, //原价
cheap: true,//特价
text: '0服务费，针对有一定商标申请经验并能自主评估风险的用户',
left: '性价比', right: '高',
@ -1377,10 +1377,11 @@ export default function Index() {
'人工严审，提升受理率'
],
serve: false, //专家咨询
num: 1 // 限购
// num: 1 // 限购
newUser: res[0].newUser
},
{
id: res[1].id, title: '专家辅助注册', nowprice: res[1].money, cheap: false,
id: res[1].id, title: '专家辅助注册', nowprice: res[1].money/100, cheap: false,
old: false,
oldprice: '',
text: '流程专业代办，适用于商标风险评估、类别选择无经验的新用户',
@ -1391,10 +1392,11 @@ export default function Index() {
'分析风险，优化注册方案'
],
serve: true,
num: 0
// num: 0
newUser: ''
},
{
id: res[2].id, title: '至尊无忧注册', nowprice: res[2].money, cheap: false,
id: res[2].id, title: '至尊无忧注册', nowprice: res[2].money/100, cheap: false,
old: false,
oldprice: '',
text: '专家评估提高通过率，注册失败，可赔付全款',
@ -1405,8 +1407,7 @@ export default function Index() {
'指定类目驳回，赔付全款'
],
serve: true,
num: 0
newUser: ''
},
]
)
@ -1942,8 +1943,8 @@ export default function Index() {
// getLanguageListDate()
// getSoftTypeListDate()
getAppGoodsList()
getTrademarkGoodsList()
// getTrademarkGoodsList()
}, []);
useEffect(() => {
// loactionStorage里的activeMenu
@ -3722,6 +3723,7 @@ export default function Index() {
<Button type="primary"
style={{ background: 'var(--color-searchbtn)' }}
onClick={() => {
getAppGoodsList()
setAppModal(true)
setAppGoodsId('')
setAppGoodsMoney(0)
@ -3806,6 +3808,7 @@ export default function Index() {
<Button type="primary"
style={{ background: 'var(--color-searchbtn)' }}
onClick={() => {
getTrademarkGoodsList()
setTrademarkModal(true)
}}
>申请商标</Button>
@ -4443,10 +4446,12 @@ export default function Index() {
</div>
<div className='trademarkBuy'>
<div style={{
background: item.num > 0 ? 'linear-gradient(90deg, #FF6F26 0%, #FFA44C 100%)' : '',
background: item.newUser ? 'linear-gradient(90deg, #FF6F26 0%, #FFA44C 100%)' : '',
color: 'white'
}}>
{item.num > 0 ? `新用户专项价格限购${item.num}件` : ''}
{/* {item.num > 0 ? `新用户专项价格限购${item.num}件` : ''} */}
{item.newUser ? item.newUser : ''}
</div>
</div>
<div className='trademarkPrice'>
@ -4536,7 +4541,8 @@ export default function Index() {
state: {
trademarkModeName: item.title,
// price: item.nowprice,
trademarkMode: item.id
trademarkMode: item.id,
price: item.nowprice
}
})
}}