暂存
This commit is contained in:
lyp
parent
b8af68e26b
commit
ebde74d9b1
2
.env.dev
2
.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}
|
||||
|
||||
@ -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 (
|
||||
<div className='trademarkAiBox' style={{ height: `${height}px`, overflow: 'auto' }}>
|
||||
<div className='editProcessBox' style={{
|
||||
|
||||
@ -11,6 +11,7 @@ export default function EditOne(props: any) {
|
||||
const token = sessionStorage.getItem('token')
|
||||
const [formA] = Form.useForm<any>(); // 文字商标表单
|
||||
const [formB] = Form.useForm<any>(); // 图形商标表单
|
||||
const [formC] = Form.useForm<any>(); // 图形商标表单
|
||||
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<any>([]);
|
||||
|
||||
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<any>([]);
|
||||
const handleChangeC: UploadProps['onChange'] = (info) => {
|
||||
// console.log(info.file.status);
|
||||
|
||||
|
||||
if (info.file.status === 'uploading') {
|
||||
// setFileList([])
|
||||
return;
|
||||
}
|
||||
if (info.file.status === 'done') {
|
||||
|
||||
// const fileId = info.file.response.data.fileId;
|
||||
// // console.log(downloadUrl(fileId));
|
||||
|
||||
// const url = showImage(fileId, false);
|
||||
setFileListC([
|
||||
{
|
||||
uid: info.file.response.data.fileId,
|
||||
name: info.file.response.data.fileName,
|
||||
status: 'done',
|
||||
url: showImage(info.file.response.data.fileId, false)
|
||||
}
|
||||
])
|
||||
|
||||
return;
|
||||
}
|
||||
if (info.file.status === 'error') {
|
||||
message.error(`上传失败`);
|
||||
return;
|
||||
}
|
||||
};
|
||||
// 自动生成的img
|
||||
const [generateImgId, setGenerateImgId] = useState<any>('')
|
||||
const [imgList, setImgList] = useState<any>([])
|
||||
@ -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<any>([])
|
||||
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<any>([])
|
||||
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) {
|
||||
<a style={{
|
||||
marginLeft: '10px',
|
||||
cursor: 'pointer',
|
||||
}}>如何选择?</a>
|
||||
}}
|
||||
onClick={() => {
|
||||
window.open('https://www.baidu.com/')
|
||||
}}
|
||||
>如何选择?</a>
|
||||
</div>
|
||||
<div style={{
|
||||
display: goodsType === 'a' ? 'unset' : 'none',
|
||||
@ -228,7 +290,11 @@ export default function EditOne(props: any) {
|
||||
<div style={{
|
||||
display: 'flex'
|
||||
}}>
|
||||
若您的商标涉及他人姓名/肖像/期刊，请下载<span className='pointerBlue'>授权声明书模板</span>，填写完盖章签字后
|
||||
若您的商标涉及他人姓名/肖像/期刊，请下载<span className='pointerBlue'
|
||||
onClick={() => {
|
||||
window.open('https://www.baidu.com/')
|
||||
}}
|
||||
>授权声明书模板</span>，填写完盖章签字后
|
||||
<div>
|
||||
<Upload
|
||||
name="file"
|
||||
@ -250,7 +316,7 @@ export default function EditOne(props: any) {
|
||||
headers={{ 'Auth': `Bearer ${token}` }}
|
||||
disabled={fileList.length > 0}
|
||||
>
|
||||
<span className='pointerBlue'>上传附件</span>
|
||||
<span className='pointerBlue'>上传文件</span>
|
||||
</Upload>
|
||||
</div>
|
||||
<div>
|
||||
@ -301,7 +367,11 @@ export default function EditOne(props: any) {
|
||||
<div style={{
|
||||
// marginTop: '-20px',
|
||||
}}>
|
||||
2021年12月10日起，商标名称作为必填项提交至商标局。商标局审核人员会根据商标图样中的文字字母等实际展示的信息重新命名商标名称，并展示在商标局官网。 如何解决请参考<span className='pointerBlue'>文档</span>
|
||||
2021年12月10日起，商标名称作为必填项提交至商标局。商标局审核人员会根据商标图样中的文字字母等实际展示的信息重新命名商标名称，并展示在商标局官网。 如何解决请参考<span className='pointerBlue'
|
||||
onClick={() => {
|
||||
window.open('https://www.baidu.com/')
|
||||
}}
|
||||
>文档</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -343,7 +413,7 @@ export default function EditOne(props: any) {
|
||||
marginTop: '120px',
|
||||
}}>
|
||||
<div className='editFormItemTitle'>
|
||||
商标类型<span className='redTitle'>*</span>：
|
||||
商标图样<span className='redTitle'>*</span>：
|
||||
</div>
|
||||
<div style={{
|
||||
marginLeft: '2px',
|
||||
@ -455,13 +525,13 @@ export default function EditOne(props: any) {
|
||||
bottom: 0,
|
||||
right: -50,
|
||||
fontSize: '16px',
|
||||
lineHeight:'16px',
|
||||
lineHeight: '16px',
|
||||
// background:'pink',
|
||||
cursor:'pointer',
|
||||
padding:'5px',
|
||||
color:'red'
|
||||
cursor: 'pointer',
|
||||
padding: '5px',
|
||||
color: 'red'
|
||||
}}
|
||||
onClick={()=>{
|
||||
onClick={() => {
|
||||
setImgList([])
|
||||
formA.setFieldsValue({ imgUrl: '' })
|
||||
}}
|
||||
@ -542,13 +612,24 @@ export default function EditOne(props: any) {
|
||||
</div>
|
||||
|
||||
|
||||
<div style={{
|
||||
display: goodsType === 'b' ? 'unset' : 'none',
|
||||
}}>
|
||||
<div
|
||||
style={{
|
||||
display: goodsType === 'b' ? 'unset' : 'none',
|
||||
}}>
|
||||
<Form
|
||||
name="FormB"
|
||||
form={formB}
|
||||
onFinish={onFinishB}
|
||||
onFinishFailed={(errorInfo) => {
|
||||
// console.log(errorInfo)
|
||||
// message.error('请填写完整的信息!')
|
||||
errorInfo.errorFields.forEach((field) => {
|
||||
if (field.errors.length > 0) {
|
||||
// 显示每条错误信息
|
||||
message.error(field.errors[0]);
|
||||
}
|
||||
});
|
||||
}}
|
||||
initialValues={{ softWare: '' }}
|
||||
style={{ marginTop: 20 }}
|
||||
>
|
||||
@ -572,7 +653,7 @@ export default function EditOne(props: any) {
|
||||
color: 'black',
|
||||
resize: 'none'
|
||||
}}
|
||||
placeholder="商标说明"
|
||||
placeholder="例:商标由中文“**”、英文“**”及图形构成，无特殊含义。"
|
||||
>
|
||||
</TextArea>
|
||||
|
||||
@ -582,25 +663,553 @@ export default function EditOne(props: any) {
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
{/* <Form.Item>
|
||||
<div className='trademark-btn'>
|
||||
<Button type="primary" htmlType="submit" style={{
|
||||
width: 273,
|
||||
height: 52
|
||||
}}
|
||||
>
|
||||
提交订单
|
||||
</Button>
|
||||
<div className='editFormItem' style={{
|
||||
marginTop: '130px',
|
||||
}}>
|
||||
<div className='editFormItemTitle'>
|
||||
商标图样<span className='redTitle'>*</span>：
|
||||
</div>
|
||||
</Form.Item> */}
|
||||
<div style={{
|
||||
// marginLeft: '90px',
|
||||
// background:'pink',
|
||||
width: 200,
|
||||
position: 'relative',
|
||||
}}>
|
||||
<Form.Item
|
||||
name="imgUrl"
|
||||
rules={[{ required: true, message: '请上传商标图样' }]}
|
||||
>
|
||||
<TextArea style={{
|
||||
width: 200,
|
||||
height: 100,
|
||||
background: '#FFF',
|
||||
color: 'black',
|
||||
resize: 'none'
|
||||
}}
|
||||
// value={generateType == '1' ? generateImgId : imgList[0]?.uid}
|
||||
// placeholder="商标说明"
|
||||
>
|
||||
</TextArea>
|
||||
|
||||
</Form.Item>
|
||||
<div style={{
|
||||
display: upImglist.length <= 0 ? 'unset' : 'none',
|
||||
width: 200,
|
||||
height: 100,
|
||||
background: 'white',
|
||||
color: 'black',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
lineHeight: '100px',
|
||||
textAlign: 'center',
|
||||
fontSize: '20px',
|
||||
border: '1px dashed #d6d6d6',
|
||||
}}>
|
||||
<Spin tip="正在处理，请稍后..." size="small" spinning={imgLodaing}>
|
||||
<Upload
|
||||
name="file"
|
||||
maxCount={1}
|
||||
action={uploadFileUrl()}
|
||||
beforeUpload={(file) => {
|
||||
const isPNG = file.type === 'image/png';
|
||||
const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg';
|
||||
if (!isPNG && !isJPG) {
|
||||
// console.error('仅支持 PNG、PDF、JPG 格式的文件!');
|
||||
message.error('仅支持 PNG、JPG 格式的文件!');
|
||||
}
|
||||
return isPNG || isJPG;
|
||||
}}
|
||||
// fileList={[]}
|
||||
onChange={(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}
|
||||
>
|
||||
<div style={{
|
||||
width: 200,
|
||||
height: 100,
|
||||
background: 'white',
|
||||
color: 'black',
|
||||
|
||||
lineHeight: '100px',
|
||||
textAlign: 'center',
|
||||
fontSize: '20px',
|
||||
border: '1px dashed #d6d6d6',
|
||||
}}>
|
||||
上传图片
|
||||
</div>
|
||||
</Upload>
|
||||
</Spin>
|
||||
</div>
|
||||
<div style={{
|
||||
display: upImglist.length > 0 ? 'unset' : 'none',
|
||||
width: 200,
|
||||
height: 100,
|
||||
background: 'white',
|
||||
color: 'black',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
lineHeight: '100px',
|
||||
textAlign: 'center',
|
||||
fontSize: '20px',
|
||||
border: '1px dashed #d6d6d6',
|
||||
}}>
|
||||
|
||||
<div style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
// background:'pink',
|
||||
overflow: 'hidden',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'flex-start',
|
||||
}}>
|
||||
<Image src={upImglist[0]?.url} height={100} style={{ maxWidth: 200, height: '100%' }} ></Image>
|
||||
</div>
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
right: -50,
|
||||
fontSize: '16px',
|
||||
lineHeight: '16px',
|
||||
// background:'pink',
|
||||
cursor: 'pointer',
|
||||
padding: '5px',
|
||||
color: 'red'
|
||||
}}
|
||||
onClick={() => {
|
||||
setUpImglist([])
|
||||
formB.setFieldsValue({ imgUrl: '' })
|
||||
}}
|
||||
>删除</div>
|
||||
|
||||
</div>
|
||||
<div style={{
|
||||
textWrap: 'nowrap',
|
||||
lineHeight: '20px',
|
||||
// background: 'pink'
|
||||
}}>
|
||||
<div>图片尺寸:400*400至1500*1500</div>
|
||||
<div>图片大小:200kb内</div>
|
||||
<div>图片格式:仅支持JPG格式</div>
|
||||
<div style={{
|
||||
color: 'red'
|
||||
}}>上传商标图样颜色为 黑白，注册成功使用时，可任意修改商标图样颜色使用</div>
|
||||
<div style={{
|
||||
color: 'red'
|
||||
}}>上传商标图样颜色为 彩色，注册成功使用时，不能修改商标图样颜色使用</div>
|
||||
<div style={{
|
||||
color: 'red'
|
||||
}}>建议上传商标图样颜色:黑白</div>
|
||||
<div style={{
|
||||
height: '30px',
|
||||
}}></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</Form>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: goodsType === 'c' ? 'unset' : 'none',
|
||||
}}>
|
||||
<Form
|
||||
name="FormC"
|
||||
form={formC}
|
||||
onFinish={onFinishC}
|
||||
onFinishFailed={(errorInfo) => {
|
||||
// console.log(errorInfo)
|
||||
// message.error('请填写完整的信息!')
|
||||
errorInfo.errorFields.forEach((field) => {
|
||||
if (field.errors.length > 0) {
|
||||
// 显示每条错误信息
|
||||
message.error(field.errors[0]);
|
||||
}
|
||||
});
|
||||
}}
|
||||
initialValues={{ softWare: '' }}
|
||||
style={{ marginTop: 20 }}
|
||||
>
|
||||
<div className='editFormItem'>
|
||||
<div className='editFormItemTitle'>
|
||||
商标名称<span className='redTitle' >*</span>：
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
// background:'pink',
|
||||
position: 'relative',
|
||||
}}>
|
||||
<Form.Item
|
||||
name="title"
|
||||
rules={[{ required: true, message: '请输入商标名称' }]}
|
||||
>
|
||||
<Input style={{
|
||||
width: 600,
|
||||
height: 46,
|
||||
background: '#FFF',
|
||||
color: 'black'
|
||||
}}
|
||||
placeholder="商标名称"
|
||||
>
|
||||
</Input>
|
||||
|
||||
</Form.Item>
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
top: 70,
|
||||
// textWrap: 'nowrap',
|
||||
width: 800,
|
||||
lineHeight: '20px',
|
||||
}}>
|
||||
<div style={{
|
||||
display: 'flex'
|
||||
}}>
|
||||
若您的商标涉及他人姓名/肖像/期刊，请下载<span className='pointerBlue'
|
||||
onClick={() => {
|
||||
window.open('https://www.baidu.com/')
|
||||
}}
|
||||
>授权声明书模板</span>，填写完盖章签字后
|
||||
<div>
|
||||
<Upload
|
||||
name="file"
|
||||
maxCount={1}
|
||||
action={uploadFileUrl()}
|
||||
beforeUpload={(file) => {
|
||||
const isPNG = file.type === 'image/png';
|
||||
const isPDF = file.type === 'application/pdf';
|
||||
const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg';
|
||||
if (!isPNG && !isPDF && !isJPG) {
|
||||
// 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}
|
||||
>
|
||||
<span className='pointerBlue'>上传文件</span>
|
||||
</Upload>
|
||||
</div>
|
||||
<div>
|
||||
({fileListC.length}/1)
|
||||
</div>
|
||||
<div>
|
||||
{fileListC.length > 0 ? (
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
}}>
|
||||
<div
|
||||
style={{
|
||||
// background: 'pink',
|
||||
width: 100,
|
||||
// 超出部分隐藏用...代替
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
color: 'var(--color-blue)',
|
||||
cursor: 'pointer',
|
||||
// 加下划线
|
||||
textDecoration: 'underline',
|
||||
}}
|
||||
title={fileListC[0].name}
|
||||
onClick={() => {
|
||||
window.open(showImage(fileListC[0].uid, false))
|
||||
}}>
|
||||
{fileListC[0].name}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
marginLeft: '2px',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
onClick={() => {
|
||||
setFileListC([])
|
||||
}}><DeleteOutlined /></div>
|
||||
</div>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
{/* 嘻嘻 */}
|
||||
{/* <img src={showImage('e98b50ad-7167-49ac-902d-ac3c713f815a')} alt="" /> */}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div style={{
|
||||
// marginTop: '-20px',
|
||||
}}>
|
||||
2021年12月10日起，商标名称作为必填项提交至商标局。商标局审核人员会根据商标图样中的文字字母等实际展示的信息重新命名商标名称，并展示在商标局官网。 如何解决请参考<span className='pointerBlue'
|
||||
onClick={() => {
|
||||
window.open('https://www.baidu.com/')
|
||||
}}
|
||||
>文档</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div className='editFormItem' style={{
|
||||
marginTop: '100px',
|
||||
}}>
|
||||
<div className='editFormItemTitle'>
|
||||
商标说明<span className='redTitle'>*</span>：
|
||||
</div>
|
||||
|
||||
|
||||
<Form.Item
|
||||
name="text"
|
||||
rules={[{ required: true, message: '请输入商标说明' }]}
|
||||
>
|
||||
<TextArea style={{
|
||||
width: 600,
|
||||
height: 150,
|
||||
background: '#FFF',
|
||||
color: 'black',
|
||||
resize: 'none'
|
||||
}}
|
||||
placeholder="例:商标由中文“**”、英文“**”及图形构成，无特殊含义。"
|
||||
>
|
||||
</TextArea>
|
||||
|
||||
</Form.Item>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div className='editFormItem' style={{
|
||||
marginTop: '130px',
|
||||
}}>
|
||||
<div className='editFormItemTitle'>
|
||||
商标图样<span className='redTitle'>*</span>：
|
||||
</div>
|
||||
<div style={{
|
||||
// marginLeft: '90px',
|
||||
// background:'pink',
|
||||
width: 200,
|
||||
position: 'relative',
|
||||
}}>
|
||||
<Form.Item
|
||||
name="imgUrl"
|
||||
rules={[{ required: true, message: '请上传商标图样' }]}
|
||||
>
|
||||
<TextArea style={{
|
||||
width: 200,
|
||||
height: 100,
|
||||
background: '#FFF',
|
||||
color: 'black',
|
||||
resize: 'none'
|
||||
}}
|
||||
// value={generateType == '1' ? generateImgId : imgList[0]?.uid}
|
||||
// placeholder="商标说明"
|
||||
>
|
||||
</TextArea>
|
||||
|
||||
</Form.Item>
|
||||
<div style={{
|
||||
display: upImglistC.length <= 0 ? 'unset' : 'none',
|
||||
width: 200,
|
||||
height: 100,
|
||||
background: 'white',
|
||||
color: 'black',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
lineHeight: '100px',
|
||||
textAlign: 'center',
|
||||
fontSize: '20px',
|
||||
border: '1px dashed #d6d6d6',
|
||||
}}>
|
||||
<Spin tip="正在处理，请稍后..." size="small" spinning={imgLodaingC}>
|
||||
<Upload
|
||||
name="file"
|
||||
maxCount={1}
|
||||
action={uploadFileUrl()}
|
||||
beforeUpload={(file) => {
|
||||
const isPNG = file.type === 'image/png';
|
||||
const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg';
|
||||
if (!isPNG && !isJPG) {
|
||||
// console.error('仅支持 PNG、PDF、JPG 格式的文件!');
|
||||
message.error('仅支持 PNG、JPG 格式的文件!');
|
||||
}
|
||||
return isPNG || isJPG;
|
||||
}}
|
||||
// fileList={[]}
|
||||
onChange={(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}
|
||||
>
|
||||
<div style={{
|
||||
width: 200,
|
||||
height: 100,
|
||||
background: 'white',
|
||||
color: 'black',
|
||||
|
||||
lineHeight: '100px',
|
||||
textAlign: 'center',
|
||||
fontSize: '20px',
|
||||
border: '1px dashed #d6d6d6',
|
||||
}}>
|
||||
上传图片
|
||||
</div>
|
||||
</Upload>
|
||||
</Spin>
|
||||
</div>
|
||||
<div style={{
|
||||
display: upImglistC.length > 0 ? 'unset' : 'none',
|
||||
width: 200,
|
||||
height: 100,
|
||||
background: 'white',
|
||||
color: 'black',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
lineHeight: '100px',
|
||||
textAlign: 'center',
|
||||
fontSize: '20px',
|
||||
border: '1px dashed #d6d6d6',
|
||||
}}>
|
||||
|
||||
<div style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
// background:'pink',
|
||||
overflow: 'hidden',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'flex-start',
|
||||
}}>
|
||||
<Image src={upImglistC[0]?.url} height={100} style={{ maxWidth: 200, height: '100%' }} ></Image>
|
||||
</div>
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
right: -50,
|
||||
fontSize: '16px',
|
||||
lineHeight: '16px',
|
||||
// background:'pink',
|
||||
cursor: 'pointer',
|
||||
padding: '5px',
|
||||
color: 'red'
|
||||
}}
|
||||
onClick={() => {
|
||||
setUpImglistC([])
|
||||
formC.setFieldsValue({ imgUrl: '' })
|
||||
}}
|
||||
>删除</div>
|
||||
|
||||
</div>
|
||||
<div style={{
|
||||
textWrap: 'nowrap',
|
||||
lineHeight: '20px',
|
||||
// background: 'pink'
|
||||
}}>
|
||||
<div>图片尺寸:400*400至1500*1500</div>
|
||||
<div>图片大小:200kb内</div>
|
||||
<div>图片格式:仅支持JPG格式</div>
|
||||
<div style={{
|
||||
color: 'red'
|
||||
}}>上传商标图样颜色为 黑白，注册成功使用时，可任意修改商标图样颜色使用</div>
|
||||
<div style={{
|
||||
color: 'red'
|
||||
}}>上传商标图样颜色为 彩色，注册成功使用时，不能修改商标图样颜色使用</div>
|
||||
<div style={{
|
||||
color: 'red'
|
||||
}}>建议上传商标图样颜色:黑白</div>
|
||||
<div style={{
|
||||
height: '30px',
|
||||
}}></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</Form>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div >
|
||||
<div className='topLine'></div>
|
||||
<div style={{
|
||||
marginTop: '8px',
|
||||
@ -619,6 +1228,6 @@ export default function EditOne(props: any) {
|
||||
}}
|
||||
>下一步</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div >
|
||||
)
|
||||
}
|
||||
|
||||
@ -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<any[]>([]);
|
||||
// 初始化勾选状态，默认所有小类都未勾选
|
||||
const [checkedIds, setCheckedIds] = useState<any[]>([]);
|
||||
// 存储选中的大类和小类信息
|
||||
// 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 (
|
||||
<div className='editOneTwo'>
|
||||
<div className='editTwoBox'>
|
||||
<div className='topLine'></div>
|
||||
<div className='appInfoFormBox' style={{
|
||||
<div className='' style={{
|
||||
height: height,
|
||||
background: 'pink'
|
||||
}}></div>
|
||||
// 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={(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'></div>
|
||||
<div className='editTwoBTopTitle'>类目索引</div>
|
||||
<div className='editTwoBTopText editTwoBTopTextL'>
|
||||
{/* {Array.from({ length: 100 }).map((item, index) => (
|
||||
<div key={index} className='editTwoBTopTextItem'>
|
||||
11111
|
||||
</div>
|
||||
))} */}
|
||||
<TreeMenu
|
||||
trademarkCategories={trademarkCategories}
|
||||
expandedIds={expandedIds}
|
||||
// setExpandedIds={setExpandedIds}
|
||||
checkedIds={checkedIds}
|
||||
// setCheckedIds={setCheckedIds}
|
||||
// selectedCategories={selectedCategories}
|
||||
// setSelectedCategories={setSelectedCategories}
|
||||
handleExpandClick={handleExpandClick}
|
||||
handleSmallMenuClick={handleSmallMenuClick}
|
||||
// trademarkCategories={trademarkCategories}
|
||||
// expandedIds={expandedIds}
|
||||
// setExpandedIds={setExpandedIds}
|
||||
// checkedIds={checkedIds}
|
||||
// setCheckedIds={setCheckedIds}
|
||||
// selectedCategories={selectedCategories}
|
||||
// setSelectedCategories={setSelectedCategories}
|
||||
></TreeMenu>
|
||||
</div>
|
||||
</div>
|
||||
<div className='editTwoBotR'>
|
||||
<div className='editTwoBTopTitle' style={{
|
||||
display: 'flex',
|
||||
}}>
|
||||
<div style={{
|
||||
textWrap: 'nowrap',
|
||||
}}>已选得商标类别 ：</div>
|
||||
<div style={{
|
||||
width: '100%',
|
||||
display: selectedCategories.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 计算中类和小类的数量
|
||||
selectedCategories.forEach(category => {
|
||||
middleCategoryCount += category.children.length;
|
||||
category.children.forEach(middleCategory => {
|
||||
smallCategoryCount += middleCategory.children.length;
|
||||
});
|
||||
});
|
||||
|
||||
return `共${selectedCategories.length}大类 累计${middleCategoryCount}个小类/${smallCategoryCount}项商品服务`;
|
||||
})()}
|
||||
</div>
|
||||
<div style={{
|
||||
fontSize: 14,
|
||||
}}>
|
||||
<a style={{
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
onClick={() => {
|
||||
setSelectedCategories([]);
|
||||
setCheckedIds([]);
|
||||
setExpandedIds([]);
|
||||
}}
|
||||
>清空</a>
|
||||
<a style={{
|
||||
marginLeft: 10,
|
||||
cursor: 'pointer',
|
||||
}}>保存为常用</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<span style={{
|
||||
display: selectedCategories.length == 0 ? 'unset' : 'none'
|
||||
}}>
|
||||
无
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
<div className='editTwoBTopText editTwoBTopTextR'>
|
||||
|
||||
{/* {Array.from({ length: 100 }).map((item, index) => (
|
||||
<div key={index} className='editTwoBTopTextItem'>
|
||||
11111
|
||||
</div>
|
||||
))} */}
|
||||
|
||||
{selectedCategories.map((item: any) => {
|
||||
const totalCount = item.children.reduce((acc: any, child: any) => acc + child.children.length, 0);
|
||||
return (
|
||||
<div key={item.id} style={{
|
||||
marginBottom: 20
|
||||
}}>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
}}>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
}}>
|
||||
<div>
|
||||
{item.name}
|
||||
</div>
|
||||
<div>(共{totalCount}项,10项以上每项附加收费31.8元)</div>
|
||||
</div>
|
||||
<div style={{
|
||||
paddingRight: 10,
|
||||
boxSizing: 'border-box',
|
||||
color: 'red'
|
||||
}}>
|
||||
￥{formatNumber(31.8 * totalCount <= 318 ? 318 : 31.8 * totalCount)}
|
||||
|
||||
<span onClick={() => {
|
||||
// 调用删除中类的函数
|
||||
handleDeleteCategory(item.id);
|
||||
}}
|
||||
style={{
|
||||
marginLeft: 10,
|
||||
cursor: 'pointer',
|
||||
color: 'rgb(116, 116, 116)'
|
||||
}}><DeleteOutlined /></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{item.children.map((child: any) => {
|
||||
return (
|
||||
<div style={{
|
||||
|
||||
}} key={child.id}>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
// flexWrap: 'wrap',
|
||||
textWrap: 'nowrap',
|
||||
}}>
|
||||
<div style={{
|
||||
marginRight: 10,
|
||||
}}>{child.name} : </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.name} <span
|
||||
onClick={() => {
|
||||
handleDeleteSmallCategory(item.id, child.id, children.id);
|
||||
}}
|
||||
style={{
|
||||
marginLeft: 10,
|
||||
cursor: 'pointer',
|
||||
}}><CloseOutlined /></span>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}</div>
|
||||
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div className='topLine'></div>
|
||||
<div style={{
|
||||
marginTop: '8px',
|
||||
|
||||
@ -0,0 +1,109 @@
|
||||
import { useEffect } from 'react';
|
||||
import { Checkbox } from 'antd';
|
||||
import './tree-menu.css';
|
||||
import {
|
||||
DownOutlined,
|
||||
UpOutlined
|
||||
} from '@ant-design/icons';
|
||||
|
||||
// interface TreeMenuProps {
|
||||
// trademarkCategories: {
|
||||
// id: any;
|
||||
// name: string;
|
||||
// children: {
|
||||
// id: any;
|
||||
// name: string;
|
||||
// children: { id: any; name: string }[];
|
||||
// }[];
|
||||
// }[];
|
||||
// expandedIds: any[];
|
||||
// setExpandedIds: (ids: any[]) => void;
|
||||
// checkedIds: any[];
|
||||
// setCheckedIds: (ids: any[]) => void;
|
||||
// selectedCategories: {
|
||||
// id: any;
|
||||
// name: string;
|
||||
// children: {
|
||||
// id: any;
|
||||
// name: string;
|
||||
// children: { id: any; name: string }[];
|
||||
// }[];
|
||||
// }[];
|
||||
// setSelectedCategories: (categories: any[]) => void;
|
||||
// handleExpandClick: (id: any) => void;
|
||||
// handleSmallMenuClick: (id: any) => void;
|
||||
// }
|
||||
|
||||
export default function TreeMenu({
|
||||
trademarkCategories,
|
||||
expandedIds,
|
||||
// setExpandedIds,
|
||||
checkedIds,
|
||||
// setCheckedIds,
|
||||
// selectedCategories,
|
||||
// setSelectedCategories,
|
||||
handleExpandClick,
|
||||
handleSmallMenuClick
|
||||
}: any) {
|
||||
useEffect(() => {
|
||||
console.log('props', trademarkCategories);
|
||||
}, []);
|
||||
|
||||
const renderChildren = (children: any[], level: number) => {
|
||||
return children.map((child) => {
|
||||
const isExpanded = expandedIds.includes(child.id);
|
||||
const isLeaf = !child.children || child.children.length === 0;
|
||||
const isChecked = checkedIds.includes(child.id);
|
||||
|
||||
return (
|
||||
<div key={child.id} style={{ marginLeft: level * 20 }}>
|
||||
{!isLeaf && (
|
||||
<div
|
||||
className='bigMenu'
|
||||
onClick={() => handleExpandClick(child.id)}
|
||||
>
|
||||
<div>
|
||||
{isExpanded ? <UpOutlined /> : <DownOutlined />}
|
||||
</div>
|
||||
<div> {child.name}</div>
|
||||
</div>
|
||||
)}
|
||||
{isLeaf && (
|
||||
<div
|
||||
onClick={() => handleSmallMenuClick(child.id)}
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
|
||||
}}
|
||||
>
|
||||
{child.name} <Checkbox checked={isChecked} />
|
||||
</div>
|
||||
)}
|
||||
{!isLeaf && isExpanded && renderChildren(child.children, level + 1)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
{trademarkCategories.map((category:any) => {
|
||||
const isExpanded = expandedIds.includes(category.id);
|
||||
return (
|
||||
<div key={category.id}>
|
||||
<div
|
||||
className='bigMenu'
|
||||
onClick={() => handleExpandClick(category.id)}
|
||||
>
|
||||
<div>
|
||||
{isExpanded ? <UpOutlined /> : <DownOutlined />}
|
||||
</div>
|
||||
<div> {category.name}</div>
|
||||
</div>
|
||||
{isExpanded && renderChildren(category.children, 1)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
.bigMenu {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.smallMenu {
|
||||
margin-left: 20px;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
91
src/route/TrademarkMall/components/EditTwo/edit-tow.css
Normal file
91
src/route/TrademarkMall/components/EditTwo/edit-tow.css
Normal file
@ -0,0 +1,91 @@
|
||||
.editTwoTitle{
|
||||
font-size: 18px;
|
||||
/* font-weight: 700; */
|
||||
}
|
||||
.editTwoBotL {
|
||||
width: calc(30% - 2px);
|
||||
height: 100%;
|
||||
/* background-color: aqua; */
|
||||
border-left: 1px solid #e9e9e9;
|
||||
border-right: 1px solid #e9e9e9;
|
||||
border-top: 1px solid #e9e9e9;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.editTwoBotR {
|
||||
width: calc(70% - 1px);
|
||||
height: 100%;
|
||||
/* background-color: rgb(179, 245, 195); */
|
||||
border-right: 1px solid #e9e9e9;
|
||||
border-top: 1px solid #e9e9e9;
|
||||
|
||||
}
|
||||
|
||||
.editTwoBTopTitle {
|
||||
height: 40px;
|
||||
background-color: #F3F3F3;
|
||||
font-size: 16px;
|
||||
line-height: 40px;
|
||||
padding-left: 10px;
|
||||
color: #5a5a5a;
|
||||
}
|
||||
|
||||
.editTwoBTopText {
|
||||
height: calc(100% - 40px);
|
||||
overflow-y: auto;
|
||||
|
||||
|
||||
|
||||
/* WebKit 浏览器（Chrome、Safari 等） */
|
||||
scrollbar-width: thin;
|
||||
/* Firefox */
|
||||
scrollbar-color: #888 #f1f1f1;
|
||||
/* Firefox */
|
||||
}
|
||||
|
||||
/* WebKit 浏览器（Chrome、Safari 等） */
|
||||
.editTwoBTopText::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
/* 垂直滚动条宽度 */
|
||||
}
|
||||
|
||||
.editTwoBTopText::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
/* 滚动条轨道背景颜色 */
|
||||
}
|
||||
|
||||
.editTwoBTopText::-webkit-scrollbar-thumb {
|
||||
background: #888;
|
||||
/* 滚动条滑块颜色 */
|
||||
border-radius: 4px;
|
||||
/* 滚动条滑块圆角 */
|
||||
}
|
||||
|
||||
.editTwoBTopText::-webkit-scrollbar-thumb:hover {
|
||||
background: #555;
|
||||
/* 鼠标悬停时滚动条滑块颜色 */
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.editTwoBTopTextL {
|
||||
padding-top: 40px;
|
||||
padding-left: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.editTwoBTopTextR{
|
||||
padding: 10px;
|
||||
box-sizing: border-box
|
||||
}
|
||||
.editTwoBTopSearch {
|
||||
height: 40px;
|
||||
/* width: calc(100% - 10px); */
|
||||
width: 100%;
|
||||
background-color: skyblue;
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user