1002 lines
30 KiB
TypeScript
1002 lines
30 KiB
TypeScript
import { useState, useEffect } from 'react'
|
||
import nothingImg from '../../static/appimgs/nothing.png'
|
||
import { useLocation, useNavigate } from 'react-router-dom';
|
||
import { trademarkList, getFileTypeByIds, supplementTrademarkData } from '../../request/api'
|
||
import { showImage, uploadFileUrl } from '../../request/request'
|
||
import { UploadOutlined } from '@ant-design/icons';
|
||
import { Modal } from 'antd';
|
||
import type { TableProps, } from 'antd';
|
||
import {
|
||
message, Spin,
|
||
Pagination,
|
||
Table, Image,
|
||
Input, Form, Upload, Button
|
||
} from 'antd';
|
||
const { TextArea } = Input;
|
||
import { buySupplementList, supplementDetail } from '../../request/api'
|
||
export default function TrademarkMall() {
|
||
// 获取上传过的文件类型
|
||
const getUpFileTypeByIdsArray = async (ids: string) => {
|
||
try {
|
||
const res: any = await getFileTypeByIds({
|
||
ids: ids
|
||
})
|
||
console.log(res);
|
||
const newUpFile = res.map((item: any) => {
|
||
return {
|
||
uid: item.fileId,
|
||
name: item.fileName,
|
||
status: 'done',
|
||
url: showImage(item.fileId, false)
|
||
}
|
||
})
|
||
// console.log(newUpFile, 'newUpFile');
|
||
setUpFileArray(newUpFile)
|
||
|
||
} catch (error: any) {
|
||
|
||
if (error.response) {
|
||
const data = error.response.data;
|
||
messageApi.open({
|
||
type: 'error',
|
||
content: data.msg ? data.msg : `${data.path}(${data.status})`,
|
||
});
|
||
} else {
|
||
console.error(error)
|
||
}
|
||
}
|
||
}
|
||
const [trademarkId, setTrademarkId] = useState('')
|
||
const getBuySupplementList = async (page: number, id: string) => {
|
||
try {
|
||
const res: any = await buySupplementList({
|
||
orderId: id,
|
||
page: page,
|
||
rows: 10
|
||
})
|
||
// setPage(res.page)
|
||
// setTotal(res.total)
|
||
// // console.log(res);
|
||
// setData(res.rows)
|
||
setCommunicationData(res.rows)
|
||
setCommunicationTotal(res.total)
|
||
setCommunicationPage(res.page)
|
||
} catch (error: any) {
|
||
|
||
if (error.response) {
|
||
const data = error.response.data;
|
||
messageApi.open({
|
||
type: 'error',
|
||
content: data.msg ? data.msg : `${data.path}(${data.status})`,
|
||
});
|
||
} else {
|
||
console.error(error)
|
||
}
|
||
}
|
||
}
|
||
const token = sessionStorage.getItem('token')
|
||
const [upFileArray, setUpFileArray] = useState<any>([]) // 上传的文件数组
|
||
const [form] = Form.useForm();
|
||
const [modal, setModal] = useState(false)
|
||
// 自定义验证函数
|
||
const validateContentOrFile = (_rule: any, _value: any, callback: (error?: string) => void, form: any) => {
|
||
const { upCorrectionRemark, upFile } = form.getFieldsValue();
|
||
if (upCorrectionRemark || (upFile && Array.isArray(upFile.fileList) && upFile.fileList.length > 0)) {
|
||
callback();
|
||
} else {
|
||
callback('内容和附件至少需要填写或上传一项');
|
||
}
|
||
};
|
||
// 点击上传资料确定
|
||
|
||
const [correctionId, setCorrectionId] = useState('') // 点击查看内容选中的id
|
||
// 是否需要回复信息
|
||
const [correctionReply, setCorrectionReply] = useState('') //0为仅通知 , 1为需要回复
|
||
const [orderId, setOrderId] = useState('')
|
||
const submitData = async (params: any) => {
|
||
if (correctionReply == '0') {
|
||
try {
|
||
await supplementTrademarkData({
|
||
correctionParentId: correctionId,
|
||
// correctionType: CorrectionType,
|
||
orderId: orderId,
|
||
correctionFiles: '',
|
||
correctionRemark: '已读',
|
||
})
|
||
getBuySupplementList(communicationPage, trademarkId)
|
||
getTrademarkList(page)
|
||
// if (props.user == 'sell') {
|
||
// getSellSupplementList()
|
||
// } else if (props.user == 'buy') {
|
||
// getBuySupplementList()
|
||
// }
|
||
// props.upData()
|
||
// messageApi.open({
|
||
// type: 'success',
|
||
// content: '已提交',
|
||
// })
|
||
setIsModalVisible(false)
|
||
// form.resetFields();
|
||
|
||
// console.log(res);
|
||
|
||
} catch (error: any) {
|
||
if (error.response) {
|
||
const data = error.response.data;
|
||
messageApi.open({
|
||
type: 'error',
|
||
content: data.msg ? data.msg : `${data.path}(${data.status})`,
|
||
});
|
||
} else {
|
||
console.error(error)
|
||
}
|
||
}
|
||
} else {
|
||
try {
|
||
await supplementTrademarkData({
|
||
correctionParentId: correctionId,
|
||
// correctionType: CorrectionType,
|
||
orderId: orderId,
|
||
correctionFiles: params.correctionFiles,
|
||
correctionRemark: params.correctionRemark,
|
||
})
|
||
// if (props.user == 'sell') {
|
||
// getSellSupplementList()
|
||
// } else if (props.user == 'buy') {
|
||
// getBuySupplementList()
|
||
// }
|
||
// props.upData()
|
||
messageApi.open({
|
||
type: 'success',
|
||
content: '已提交',
|
||
})
|
||
getTrademarkList(page)
|
||
|
||
getBuySupplementList(communicationPage, trademarkId)
|
||
setIsModalVisible(false)
|
||
// form.resetFields();
|
||
|
||
// console.log(res);
|
||
|
||
} catch (error: any) {
|
||
if (error.response) {
|
||
const data = error.response.data;
|
||
messageApi.open({
|
||
type: 'error',
|
||
content: data.msg ? data.msg : `${data.path}(${data.status})`,
|
||
});
|
||
} else {
|
||
console.error(error)
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
// 补充资料详情
|
||
const [detailData, setDetailData] = useState<any>({})
|
||
// 补充资料弹窗
|
||
const [isModalVisible, setIsModalVisible] = useState(false)
|
||
// 沟通弹窗
|
||
const [visible, setVisible] = useState(false);
|
||
const [fileList, setFileList] = useState<any>([]) // 上传文件列表
|
||
// 获取文件类型
|
||
const getFileTypeByIdsArray = async (ids: string) => {
|
||
try {
|
||
const res: any = await getFileTypeByIds({
|
||
ids: ids
|
||
})
|
||
setFileList(res)
|
||
|
||
} catch (error: any) {
|
||
|
||
if (error.response) {
|
||
const data = error.response.data;
|
||
messageApi.open({
|
||
type: 'error',
|
||
content: data.msg ? data.msg : `${data.path}(${data.status})`,
|
||
});
|
||
} else {
|
||
console.error(error)
|
||
}
|
||
}
|
||
}
|
||
// const [orderId, setOrderId] = useState('')
|
||
const [checkRemark, setCheckRemark] = useState('') //失败原因
|
||
const [messageApi, contextHolder] = message.useMessage();
|
||
const { state } = useLocation()
|
||
const nav = useNavigate();
|
||
const height = window.innerHeight - 180;
|
||
const columns: TableProps<any>['columns'] = [
|
||
{
|
||
title: '序号',
|
||
dataIndex: 'index',
|
||
key: 'index',
|
||
align: 'center',
|
||
fixed: 'left',
|
||
width: 90,
|
||
render: (_text, _record, index) => (page - 1) * 10 + index + 1, // 显示序号，从1开始
|
||
|
||
},
|
||
|
||
{
|
||
title: '服务类型',
|
||
dataIndex: 'trademarkModeName',
|
||
fixed: 'left',
|
||
align: 'center',
|
||
key: 'trademarkModeName',
|
||
width: 150,
|
||
ellipsis: {
|
||
showTitle: true,
|
||
},
|
||
|
||
},
|
||
|
||
{
|
||
title: '类型/名称',
|
||
fixed: 'left',
|
||
dataIndex: 'trademarkName',
|
||
key: 'trademarkName',
|
||
align: 'center',
|
||
ellipsis: {
|
||
showTitle: true,
|
||
},
|
||
width: 200,
|
||
render: (_text, record) => (
|
||
<span>
|
||
{record.trademarkType == 'text' ? '文字' : record.trademarkType == 'image' ? '图形' : record.trademarkType == 'text-image' ? '图文' : ''} <span style={{
|
||
display: record.trademarkType == 'image' ? 'none' : 'unset',
|
||
}}>
|
||
<span style={{
|
||
display: record.trademarkType == '' ? 'none' : 'unset',
|
||
}}>/</span>
|
||
{record.trademarkName}</span>
|
||
{/* {record} */}
|
||
</span>
|
||
)
|
||
|
||
},
|
||
{
|
||
title: '涉及类别',
|
||
dataIndex: 'trademarkTypeDTOS',
|
||
align: 'center',
|
||
key: 'trademarkTypeDTOS',
|
||
width: 150,
|
||
ellipsis: {
|
||
showTitle: true,
|
||
},
|
||
render: (trademarkTypeDTOS) => (
|
||
// trademarkTypeDTOS.map(
|
||
// <div>
|
||
|
||
// </div>
|
||
// )
|
||
trademarkTypeDTOS.length > 0 ? (
|
||
trademarkTypeDTOS.map((item: any) => {
|
||
return (
|
||
<div key={item.id} title={item.name}>
|
||
第{item.code}类 : {item.name}
|
||
</div>
|
||
)
|
||
|
||
})
|
||
) : '暂无'
|
||
)
|
||
|
||
},
|
||
{
|
||
title: '商标图样',
|
||
dataIndex: 'trademarkPhoto',
|
||
align: 'center',
|
||
key: 'trademarkPhoto',
|
||
width: 200,
|
||
render: (text) => (
|
||
|
||
text ? (
|
||
<Image src={showImage(text, false)}
|
||
height={100}
|
||
style={{
|
||
maxWidth: 200,
|
||
}}
|
||
>
|
||
</Image>
|
||
) : '暂无'
|
||
)
|
||
},
|
||
{
|
||
title: '状态',
|
||
dataIndex: 'trademarkStatus',
|
||
align: 'center',
|
||
key: 'trademarkStatus',
|
||
width: 110,
|
||
render: (text, record) => (
|
||
<div>
|
||
{text == '-1' ?
|
||
<div style={{
|
||
color: 'red',
|
||
cursor: 'pointer',
|
||
}}
|
||
title='点击查看原因'
|
||
onClick={() => {
|
||
setCheckRemark(record.checkRemark)
|
||
|
||
setModal(true)
|
||
// console.log(record.checkRemark);
|
||
}}
|
||
>
|
||
<div>审核未通过</div>
|
||
<div>已退款</div>
|
||
<div style={{
|
||
fontSize: '12px',
|
||
}}>(点击查看原因)</div>
|
||
</div>
|
||
: text == '0' ?
|
||
<span
|
||
style={{
|
||
color: 'skyblue',
|
||
}}
|
||
>待付款</span>
|
||
: text == '1' ?
|
||
<span
|
||
style={{
|
||
color: 'green',
|
||
}}
|
||
>已付款</span>
|
||
: text == '2' ?
|
||
<span
|
||
style={{
|
||
color: 'rgb(0, 127, 255)',
|
||
}}
|
||
>审核中</span>
|
||
: text == '3' ?
|
||
<span
|
||
style={{
|
||
color: 'rgb(136, 185, 233)',
|
||
}}
|
||
>提交至商标局</span>
|
||
: text == '4' ?
|
||
<span
|
||
style={{
|
||
color: 'red',
|
||
}}
|
||
>不予受理</span>
|
||
: text == '5' ?
|
||
<span
|
||
style={{
|
||
color: 'rgb(136, 185, 233)',
|
||
}}
|
||
>已受理</span>
|
||
: text == '6' ?
|
||
<span
|
||
style={{
|
||
color: 'rgb(136, 185, 233)',
|
||
}}
|
||
>已发初审公告</span>
|
||
: text == '7' ?
|
||
<span
|
||
style={{
|
||
color: 'rgb(136, 185, 233)',
|
||
}}
|
||
>部分驳回</span>
|
||
: text == '8' ?
|
||
<span
|
||
style={{
|
||
color: 'rgb(136, 185, 233)',
|
||
}}
|
||
>全部驳回</span>
|
||
: text == '9' ?
|
||
<span
|
||
style={{
|
||
color: 'rgb(136, 185, 233)',
|
||
}}
|
||
>下证</span> : '未知'
|
||
}
|
||
</div>
|
||
)
|
||
},
|
||
|
||
|
||
// {
|
||
// title: '申请人',
|
||
// // 使用数组形式访问嵌套对象属性
|
||
// dataIndex: ['trademarkUserDTO', 'name'],
|
||
// align: 'center',
|
||
// // 修改 key 保证唯一性
|
||
// key: 'trademarkUserDTOName',
|
||
// width: 150,
|
||
// render: (text) => (
|
||
// <span>
|
||
// {text || '-'}
|
||
// </span>
|
||
// )
|
||
// },
|
||
// // {
|
||
// // title: '申请人证件号',
|
||
// // dataIndex: ['trademarkUserDTO', 'name'],
|
||
// // align: 'center',
|
||
// // key: 'appOrderId',
|
||
// // width: 150,
|
||
// // render: (text) => (
|
||
// // <span>
|
||
// // {text ? text : '未完善'}
|
||
// // </span>
|
||
// // )
|
||
// // },
|
||
// {
|
||
// title: '联系人',
|
||
// // 使用数组形式访问嵌套对象属性
|
||
// dataIndex: ['trademarkUserDTO', 'contactName'],
|
||
// align: 'center',
|
||
// // 修改 key 保证唯一性
|
||
// key: 'trademarkUserDTOContactName',
|
||
// width: 150,
|
||
// render: (text) => (
|
||
// <span>
|
||
// {text || '-'}
|
||
// </span>
|
||
// )
|
||
// },
|
||
{
|
||
title: '操作',
|
||
// dataIndex: 'contractManagementId',
|
||
align: 'center',
|
||
// key: 'appOrderId',
|
||
width: 150,
|
||
// bordeLeft: true,
|
||
fixed: 'right',
|
||
render: (record) => (
|
||
<div style={{
|
||
|
||
}}>
|
||
|
||
<span style={{
|
||
cursor: 'pointer',
|
||
color: '#007FFF',
|
||
display: record.trademarkModeName === '智能申请注册' ? 'unset' : 'none',
|
||
|
||
}} onClick={() => {
|
||
nav(`/trademark-ai-edit/${record.trademarkId}`, {
|
||
// state: {
|
||
// trademarkMode: record.trademarkMode, //申请类型id
|
||
// trademarkModeName: record.trademarkModeName, //申请类型名称
|
||
// trademarkId: record.trademarkId, //商标id
|
||
|
||
// }
|
||
})
|
||
// console.log(record.checkStatus);
|
||
|
||
|
||
|
||
}}>{
|
||
record.trademarkStatus == '2' || record.trademarkStatus == '3' ? '查看' : '编辑'
|
||
}
|
||
</span>
|
||
<span style={{
|
||
cursor: 'pointer',
|
||
color: '#007FFF',
|
||
position: 'relative',
|
||
// display: record.waitCorrectionCount > 0 ? 'unset' : 'none',
|
||
display: Number(record.trademarkStatus) >= 4 ? 'unset' : 'none',
|
||
marginLeft: 10,
|
||
}}
|
||
onClick={async () => {
|
||
setTrademarkId(record.trademarkId)
|
||
setVisible(true)
|
||
getBuySupplementList(1, record.trademarkId)
|
||
}}
|
||
|
||
>进度沟通
|
||
<div style={{
|
||
display: record.waitCorrectionCount > 0 ? 'unset' : 'none',
|
||
}}>
|
||
<div style={{
|
||
|
||
position: 'absolute',
|
||
top: '-10px',
|
||
right: '-10px',
|
||
// fontSize:'16px',
|
||
background: 'red',
|
||
color: '#fff',
|
||
fontWeight: '700',
|
||
width: '20px',
|
||
height: '20px',
|
||
borderRadius: '50%',
|
||
display: 'flex',
|
||
justifyContent: 'center',
|
||
alignItems: 'center',
|
||
|
||
}}>
|
||
{record.waitCorrectionCount}
|
||
</div>
|
||
</div>
|
||
</span>
|
||
</div>
|
||
|
||
)
|
||
|
||
},
|
||
]
|
||
const [disabled, setDisabled] = useState(false)
|
||
const getSupplementDetail = async (id: string) => {
|
||
try {
|
||
const res: any = await supplementDetail(id)
|
||
console.log(res);
|
||
setDetailData(res)
|
||
if (res.correctionFiles) {
|
||
await getFileTypeByIdsArray(res.correctionFiles)
|
||
}
|
||
if (res.buyId) {
|
||
setDisabled(true)
|
||
const newData: any = await supplementDetail(res.buyId)
|
||
form.setFieldsValue({
|
||
upCorrectionRemark: newData.correctionRemark, // 内容
|
||
|
||
})
|
||
if (newData.correctionFiles) {
|
||
getUpFileTypeByIdsArray(newData.correctionFiles)
|
||
|
||
}
|
||
|
||
} else {
|
||
setDisabled(false)
|
||
}
|
||
|
||
} catch (error: any) {
|
||
|
||
if (error.response) {
|
||
const data = error.response.data;
|
||
messageApi.open({
|
||
type: 'error',
|
||
content: data.msg ? data.msg : `${data.path}(${data.status})`,
|
||
});
|
||
} else {
|
||
console.error(error)
|
||
}
|
||
}
|
||
}
|
||
const [data, setData] = useState<any>([])
|
||
// 沟通数组
|
||
const [communicationData, setCommunicationData] = useState<any>([])
|
||
// 沟通分页
|
||
const [communicationPage, setCommunicationPage] = useState(1)
|
||
// 沟通分页条数
|
||
const [communicationTotal, setCommunicationTotal] = useState(0)
|
||
const communicationColums: TableProps<any>['columns'] = [
|
||
{
|
||
title: '序号',
|
||
dataIndex: 'index',
|
||
key: 'index',
|
||
align: 'center',
|
||
width: 90,
|
||
render: (_text, _record, index) => (communicationPage - 1) * 10 + index + 1, // 显示序号，从1开始
|
||
|
||
},
|
||
{
|
||
title: '资料主题',
|
||
dataIndex: 'correctionTitle',
|
||
align: 'center',
|
||
width: 200,
|
||
render: (text) => (
|
||
<div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={text}>{text}</div>
|
||
)
|
||
},
|
||
{
|
||
title: '资料内容',
|
||
dataIndex: 'correctionRemark',
|
||
align: 'center',
|
||
width: 300,
|
||
render: (text) => (
|
||
<div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={text}>{text}</div>
|
||
|
||
)
|
||
},
|
||
{
|
||
title: '发起时间',
|
||
dataIndex: 'createTime',
|
||
align: 'center',
|
||
width: 200,
|
||
|
||
},
|
||
{
|
||
title: '当前进度',
|
||
dataIndex: 'correctionStatus',
|
||
align: 'center',
|
||
width: 100,
|
||
render: (text) => (
|
||
<>
|
||
|
||
<span> {text == '4' ? '不予受理' : text == '5' ? '已受理' : text == '6' ? '已发初审公告' : text == '7' ? '部分驳回' : text == '8' ? '全部驳回' : text == '9' ? '商标注册完成' : "未知"}</span>
|
||
</>
|
||
)
|
||
|
||
},
|
||
{
|
||
title: '状态',
|
||
dataIndex: 'buyId',
|
||
align: 'center',
|
||
width: 100,
|
||
render: (text) => (
|
||
<>
|
||
|
||
<span style={{ color: '#DD0000', fontSize: '16px', fontWeight: '700', display: text == '' ? 'unset' : 'none' }}>待补充</span>
|
||
<span style={{ color: 'green', fontSize: '16px', fontWeight: '700', display: text == '' ? 'none' : 'unset' }}>已补充</span>
|
||
{/* <span> {text == '4' ? '不予受理' : text == '5' ? '已受理' : text == '6' ? '已发初审公告' : text == '7' ? '部分驳回' : text == '8' ? '全部驳回' : text == '9' ? '商标注册完成' : "未知"}</span> */}
|
||
</>
|
||
)
|
||
|
||
},
|
||
{
|
||
title: '操作',
|
||
align: 'center',
|
||
width: 100,
|
||
render: (record: any) => (
|
||
<span className='transaction-order-table-btn' onClick={() => {
|
||
console.log(record);
|
||
setCorrectionReply(record.correctionReply)
|
||
// console.log(record.correctionId);
|
||
setCorrectionId(record.correctionId)
|
||
getSupplementDetail(record.correctionId)
|
||
setIsModalVisible(true)
|
||
setOrderId(record.orderId)
|
||
form.resetFields();
|
||
}}>查看内容</span>
|
||
)
|
||
|
||
},
|
||
|
||
]
|
||
const [loading, setLoading] = useState(false)
|
||
const [page, setPage] = useState(1)
|
||
const [total, setTotal] = useState(0)
|
||
const getTrademarkList = async (page: any) => {
|
||
try {
|
||
setLoading(true)
|
||
setData([])
|
||
const res: any = await trademarkList({
|
||
keywords: state && state.keywords ? state.keywords : '',
|
||
rows: 10,
|
||
page: page
|
||
})
|
||
console.log('结果', res);
|
||
setData(res.rows)
|
||
setTotal(res.total)
|
||
setLoading(false)
|
||
|
||
} catch (error: any) {
|
||
setLoading(false)
|
||
if (error.response) {
|
||
const data = error.response.data;
|
||
messageApi.open({
|
||
type: 'error',
|
||
content: data.msg ? data.msg : `${data.path}(${data.status})`,
|
||
});
|
||
} else {
|
||
console.error(error)
|
||
}
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
// useEffect(() => {
|
||
// // console.log(state.keywords);
|
||
// getTrademarkList(1)
|
||
// // console.log(1);
|
||
|
||
// }, [])
|
||
useEffect(() => {
|
||
// console.log(state.keywords);
|
||
getTrademarkList(1)
|
||
}, [state])
|
||
|
||
return (
|
||
<Spin tip="正在处理，请稍后..." size="small" spinning={loading}>
|
||
<div className='appElectionBox' style={{ height: `${height}px`, overflow: 'auto' }}>
|
||
{contextHolder}
|
||
|
||
{data.length <= 0 ? (<div style={{ height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column' }}>
|
||
|
||
<img src={nothingImg} alt="" width={368} height={355} />
|
||
<div style={{
|
||
marginTop: 50,
|
||
fontSize: 16,
|
||
color: '#D0D0D0'
|
||
}}>暂无数据</div>
|
||
</div>) : (
|
||
<div className='' >
|
||
<div style={{
|
||
height: `${height - 80}px`,
|
||
// background: "pink" ,
|
||
paddingTop: 20
|
||
}}>
|
||
|
||
<Table
|
||
scroll={{ y: `${height - 150}px` }}
|
||
dataSource={data}
|
||
columns={columns}
|
||
bordered
|
||
// pagination={{
|
||
// defaultPageSize: 10, // 设置默认一页显示 5 条数据
|
||
// }}
|
||
pagination={false} // 不显示分页
|
||
style={{ textAlign: 'center' }} // 设置表格内容居中显示
|
||
rowKey="trademarkId" // 指定数据项的唯一标识符
|
||
locale={{ emptyText: '暂无数据' }}
|
||
></Table>
|
||
|
||
</div>
|
||
<div className='product-release-pagination'>
|
||
<Pagination
|
||
showSizeChanger={false}
|
||
current={page} total={total} defaultPageSize={10} onChange={(page) => {
|
||
setPage(page)
|
||
getTrademarkList(page)
|
||
}} />
|
||
</div>
|
||
|
||
</div>
|
||
)}
|
||
</div>
|
||
<Modal
|
||
title="失败原因"
|
||
centered
|
||
open={modal}
|
||
footer={null}
|
||
onCancel={() => { setModal(false) }}
|
||
|
||
>
|
||
失败原因:{checkRemark}
|
||
</Modal>
|
||
<Modal
|
||
title="进度沟通"
|
||
centered
|
||
open={visible}
|
||
footer={null}
|
||
onCancel={() => { setVisible(false) }}
|
||
width={1300}
|
||
|
||
>
|
||
<Table
|
||
scroll={{ y: `${height - 150}px` }}
|
||
dataSource={communicationData}
|
||
columns={communicationColums}
|
||
bordered
|
||
// pagination={{
|
||
// defaultPageSize: 10, // 设置默认一页显示 5 条数据
|
||
// }}
|
||
pagination={
|
||
{
|
||
pageSize: 10,
|
||
total: communicationTotal,
|
||
onChange: (currentPage) => {
|
||
setCommunicationPage(currentPage);
|
||
getBuySupplementList(currentPage, trademarkId)
|
||
},
|
||
showSizeChanger: false,
|
||
current: communicationPage
|
||
|
||
}
|
||
}
|
||
style={{ textAlign: 'center' }} // 设置表格内容居中显示
|
||
rowKey="trademarkId" // 指定数据项的唯一标识符
|
||
locale={{ emptyText: '暂无数据' }}
|
||
></Table>
|
||
</Modal>
|
||
<Modal title={'进度沟通'}
|
||
destroyOnClose={true}
|
||
open={isModalVisible}
|
||
footer={null} // 将 footer 设置为 null 来隐藏自带按钮
|
||
width={1000}
|
||
onCancel={() => {
|
||
setIsModalVisible(false);
|
||
// 清空表单
|
||
form.resetFields();
|
||
}}
|
||
centered
|
||
>
|
||
<div>
|
||
{/* {correctionId}
|
||
{CorrectionType} */}
|
||
<div className='editModal-title'>
|
||
<div className='editModal-title-box'></div>
|
||
<div className='editModal-title-name'>平台需要您补充的内容说明</div>
|
||
</div>
|
||
<div className='correctionTitleBox'>
|
||
<div className='correctionTitle'>主题</div>
|
||
<Input value={detailData.correctionTitle} style={{
|
||
height: 40,
|
||
color: 'black'
|
||
}}
|
||
disabled
|
||
></Input>
|
||
</div>
|
||
<div className='correctionRemarkBox'>
|
||
<div className='correctionTitle'>内容</div>
|
||
<TextArea value={detailData.correctionRemark} style={{
|
||
height: 100,
|
||
color: 'black',
|
||
resize: 'none'
|
||
}}
|
||
disabled
|
||
></TextArea>
|
||
</div>
|
||
<div className='upFileBox'>
|
||
<div className='correctionTitle'>附件</div>
|
||
{fileList.length > 0 ? (
|
||
// <div>材料列表</div>
|
||
<div>
|
||
{
|
||
fileList.map((item: any) => {
|
||
return (
|
||
<div
|
||
key={item.fileId}
|
||
style={{
|
||
// background: 'pink',
|
||
marginBottom: 5,
|
||
maxWidth: 800,
|
||
overflow: 'hidden',
|
||
textOverflow: 'ellipsis',
|
||
whiteSpace: 'nowrap',
|
||
cursor: 'pointer',
|
||
color: '#1B8BD2',
|
||
//下划线
|
||
textDecoration: 'underline',
|
||
}}
|
||
title={item.fileName}
|
||
onClick={() => {
|
||
|
||
window.open(showImage(item.fileId, false))
|
||
|
||
}}
|
||
>
|
||
{item.fileName}
|
||
</div>
|
||
)
|
||
})
|
||
}
|
||
</div>
|
||
|
||
) : (
|
||
<div style={{ fontSize: 18, fontWeight: 700 }}>
|
||
无
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div style={{
|
||
display: correctionReply == '0' && disabled ? 'none' : 'unset'
|
||
}}>
|
||
<div className='editModal-title' style={{ marginTop: 30 }}>
|
||
<div className='editModal-title-box'></div>
|
||
<div className='editModal-title-name'>在下面填写您补充的内容</div>
|
||
</div>
|
||
<Form
|
||
name="basic"
|
||
form={form}
|
||
layout="vertical"
|
||
onFinish={(value) => {
|
||
const uids = upFileArray.map((file: any) => file.response.data.fileId).join(',');
|
||
// console.log('提取的 uid 字符串:', uids);
|
||
submitData({
|
||
correctionFiles: uids,
|
||
correctionRemark: value.upCorrectionRemark,
|
||
})
|
||
|
||
|
||
}}
|
||
onFinishFailed={() => {
|
||
messageApi.open({
|
||
type: 'error',
|
||
content: '内容和附件至少需要填写或上传一项',
|
||
})
|
||
}}
|
||
autoComplete="off"
|
||
>
|
||
<div className='correctionRemarkBox'>
|
||
<div className='correctionTitle'>内容</div>
|
||
<Form.Item
|
||
|
||
name="upCorrectionRemark"
|
||
// rules={[
|
||
|
||
// {
|
||
// validator: (rule, value, callback) => validateContentOrFile(rule, value, callback, form),
|
||
// },
|
||
|
||
// ]}
|
||
rules={correctionReply == '0' ? [] : [
|
||
{
|
||
validator: (rule, value, callback) => validateContentOrFile(rule, value, callback, form),
|
||
},
|
||
]}
|
||
|
||
>
|
||
<TextArea style={{
|
||
height: 100,
|
||
resize: 'none',
|
||
width: 900,
|
||
|
||
}}
|
||
placeholder='请输入需要补充内容'
|
||
disabled={correctionReply == '0'}
|
||
></TextArea>
|
||
</Form.Item>
|
||
|
||
</div>
|
||
<div className='correctionRemarkBox' style={{
|
||
marginTop: 0
|
||
}}>
|
||
<div className='correctionTitle'>附件</div>
|
||
<div style={{
|
||
maxWidth: 800,
|
||
overflow: 'hidden',
|
||
textOverflow: 'ellipsis',
|
||
whiteSpace: 'nowrap',
|
||
}}>
|
||
<Form.Item
|
||
|
||
name="upFile"
|
||
// rules={[
|
||
// // { required: true, message: '请上传附件' },
|
||
// {
|
||
// validator: (rule, value, callback) => validateContentOrFile(rule, value, callback, form),
|
||
// },
|
||
// ]}
|
||
rules={correctionReply === '0' ? [] : [
|
||
{
|
||
validator: (rule, value, callback) => validateContentOrFile(rule, value, callback, form),
|
||
},
|
||
]}
|
||
>
|
||
|
||
<Upload
|
||
name="file"
|
||
action={uploadFileUrl()}
|
||
defaultFileList={upFileArray}
|
||
onChange={(info) => {
|
||
setUpFileArray(info.fileList)
|
||
// console.log(info.fileList);
|
||
|
||
}}
|
||
|
||
headers={{ 'Auth': `Bearer ${token}` }}
|
||
disabled={correctionReply == '0'}
|
||
>
|
||
<Button icon={<UploadOutlined />}>上传附件</Button>
|
||
</Upload>
|
||
|
||
|
||
</Form.Item>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<Form.Item
|
||
|
||
>
|
||
<div style={{
|
||
display: 'flex',
|
||
justifyContent: 'flex-end',
|
||
gap: 10,
|
||
// marginTop: 20
|
||
}}>
|
||
<div style={{
|
||
display: disabled ? 'none' : 'flex'
|
||
}}>
|
||
<Button onClick={() => {
|
||
setIsModalVisible(false)
|
||
form.resetFields();
|
||
}}>取消</Button>
|
||
<Button type="primary" htmlType="submit" style={{
|
||
marginLeft: 10
|
||
}} >{correctionReply == '0' ? '已读' : '提交'}</Button>
|
||
</div>
|
||
</div>
|
||
</Form.Item>
|
||
|
||
|
||
</Form>
|
||
</div>
|
||
</div>
|
||
</Modal>
|
||
</Spin>
|
||
)
|
||
}
|