system-copyright-react/src/components/card/CardProj.tsx
2025-03-02 14:33:51 +08:00

1544 lines
73 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/* eslint-disable @typescript-eslint/no-unused-vars */
import './card-proj.css';
// import { useDispatch } from 'react-redux'
import { GlobalDispatchContext, reloadUser } from "../../context/GlobalContext.ts";
import {
CheckOutlined,
ClockCircleOutlined,
CloseCircleOutlined,
DownloadOutlined,
EditOutlined,
EyeOutlined,
LoadingOutlined,
SearchOutlined,
WarningOutlined,
RedoOutlined,
CloseOutlined
} from '@ant-design/icons';
import { Button, Tag, Modal, Carousel, Dropdown } from 'antd';
import type { MenuProps } from 'antd';
import { GenerateStatus } from "../../interfaces/proj/IProj.ts";
import { useNavigate } from "react-router-dom";
import { Axios, post, downloadUrl, get, del } from "../../util/AjaxUtils.ts";
import { useEffect, useState, useContext } from "react";
import useMessage from "antd/es/message/useMessage";
import setImg from '../../static/right/set.png'
import orderImg from '../../static/right/order.png'
import menuImg from '../../static/right/menu.png'
// import LoginPage from '../../components/LoginPage/LoginPage.tsx'
import LoginPage from '../../route/proj/edit/ProjConfigLoginpage.tsx'
// import LoginPageShow from '../../components/LoginPageShow/LoginPageShow.tsx'
import LoginPageShow from '../../route/proj/edit/ProjConfigLoginpageShow.tsx'
import SoftwareManagement from '../../route/proj/edit/ProjConfigModList.tsx'
import SoftwareManagementShow from '../../route/proj/edit/ProjConfigModListShow.tsx'
import DisplayOrder from '../../route/proj/edit/ProjConfigMenuList.tsx'
import DisplayOrderShow from '../../route/proj/edit/ProjConfigMenuListShow.tsx'
export default function CardProj(props: any) {
const globalDispatchContext = useContext(GlobalDispatchContext);
const height = window.innerHeight - 250;
// 下载等待弹窗
const [downModal, setDownModal] = useState(false)
// 是否已经点击下载按钮
const [hasDown, setHasDown] = useState(false)
// 是否可以关闭等待下载弹窗
// // 选项数组
// const [tagArray, setTagArray] = useState([])
// // 获取标签
// const getTag = () => {
// get({
// messageApi,
// url: `/api/proj/tag/list-tag`,
// onBefore() {
// },
// onSuccess(data: any) {
// // console.log('标签信息', data);
// const newarrty: any = (data.data).map((item: any) => ({
// value: item.key,
// label: item.value
// }));
// // console.log('标签信息', newarrty);
// setTagArray(newarrty)
// },
// onFinally() {
// }
// })
// }
const data = props.item;
// const [data, setData] = useState(props.item);
// data.generate.generateStatus == GenerateStatus.SUCCESS ?'查看':'编辑'
const [tagIdArray, setTagIdArray] = useState(data.tagDataIds)
const [RemindIdArray, setRemindIdArray] = useState(data.projRemindIds)
const [showBuyPic, setShowBuyPic] = useState(data.projPkg.payStatus == 'UNPAID' ? true : false) //显示购买安装包
const [showBuyPicIng, setShowBuyPicIng] = useState(data.projPkg.pkgStatus == 'PKGING' ? true : false) //显示安装包正在打包
const [showBuyPicAgain, setShowBuyPicAgain] = useState(data.projPkg.pkgStatus == 'SUCCESS') //显示重新购买安装包
const [showBuyPicError, setShowBuyPicError] = useState(data.projPkg.pkgStatus == 'FAIL' ? true : false) //显示安装包打包失败
const [showBuyVideo, setShowBuyVideo] = useState(data.projVideo.payStatus == 'UNPAID' ? true : false) //显示购买视频
const [showBuyVideoIng, setShowBuyVideoIng] = useState(data.projVideo.videoStatus == 'PKGING' ? true : false) //显示视频正在打包
const [showBuyVideoAgain, setShowBuyVideoAgain] = useState(data.projVideo.videoStatus == 'SUCCESS' ? true : false) //显示重新购买视频
const [showBuyVideoError, setShowBuyVideoError] = useState(data.projVideo.videoStatus == 'FAIL' ? true : false) //显示视频打包失败
// const [showBuyPic, setShowBuyPic] = useState(true) //显示购买安装包
// const [showBuyPicIng, setShowBuyPicIng] = useState(false) //显示安装包正在打包
// const [showBuyPicAgain, setShowBuyPicAgain] = useState(false) //显示重新购买安装包
const [buyModalShow, setBuyModalShow] = useState(false) //显示购买安装包提示弹窗
const [buyVideoModalShow, setBuyVideoModalShow] = useState(false) //显示购买视频提示弹窗
// const [pkgPrice, setPkgPrice] = useState(0) //安装包价格
// const [videoPrice, setVideoPrice] = useState(0) //视频价格
// const getPrice = () => {
// get<any>({
// messageApi: messageApi,
// url: '/api/proj/charge/get',
// onSuccess({ data }) {
// console.log('获取价格', data.additional.pkg/100,data.additional.videoDemo/100);
// setPkgPrice(data.additional.pkg/100)
// setVideoPrice(data.additional.videoDemo/100)
// }
// })
// }
// 付款安装包
const payPkg = () => {
post<any>({
messageApi,
url: `/api/proj/pkg/save-pkg/proj-id/${projId}`,
onBefore() {
},
onSuccess() {
reloadUser(messageApi, globalDispatchContext).then(() => {
messageApi.success('扣款成功');
setShowBuyPic(false);
setShowBuyPicIng(true);
setBuyModalShow(false);
setShowBuyPicAgain(false)
});
},
onFinally() {
}
})
}
// 重新打包安装包
const againPkg = () => {
post<any>({
messageApi,
url: `/api/proj/pkg/save-pkg/proj-id/${projId}`,
onBefore() {
},
onSuccess() {
messageApi.success('重新打包安装包');
setShowBuyPic(false);
setShowBuyPicIng(true);
setBuyModalShow(false);
setShowBuyPicAgain(false)
setShowBuyPicError(false)
},
onFinally() {
}
})
}
// 付款视频
const payVideo = () => {
post<any>({
messageApi,
url: `/api/proj/video/save-pkg/proj-id/${projId}`,
onBefore() {
},
onSuccess() {
reloadUser(messageApi, globalDispatchContext).then(() => {
messageApi.success('扣款成功');
setShowBuyVideo(false);
setShowBuyVideoIng(true);
setBuyVideoModalShow(false);
setShowBuyVideoAgain(false)
});
},
onFinally() {
}
})
}
// 重新打包视频
const againVideo = () => {
post<any>({
messageApi,
url: `/api/proj/video/save-pkg/proj-id/${projId}`,
onBefore() {
},
onSuccess() {
messageApi.success('重新打包演示视频');
setShowBuyVideo(false);
setShowBuyVideoIng(true);
setBuyVideoModalShow(false);
setShowBuyVideoAgain(false)
setShowBuyVideoError(false)
},
onFinally() {
}
})
}
// 点击刷新页面数据获取安装包状态
const upData = () => {
get<any>({
messageApi: messageApi,
url: `api/proj/pkg/get/proj-id/${projId}`,
onSuccess({ data }) {
// console.log(data);
if (data.pkgStatus == 'SUCCESS') {
messageApi.success('安装包生成完毕,请下载');
setShowBuyPicAgain(true)
setShowBuyPicIng(false)
} else if (data.pkgStatus == 'FAIL') {
messageApi.error('安装包打包失败,点击重新打包');
setShowBuyPicError(true)
setShowBuyPicIng(false)
} else {
messageApi.error('安装包正在生成,请稍后');
}
}
})
}
// 点击刷新页面数据获取演示视频状态
const upVideoData = () => {
get<any>({
messageApi: messageApi,
url: `api/proj/video/get/proj-id/${projId}`,
onSuccess({ data }) {
// console.log(data);
if (data.videoStatus == 'SUCCESS') {
messageApi.success('演示视频生成完毕,请下载');
setShowBuyVideoAgain(true)
setShowBuyVideoIng(false)
} else if (data.videoStatus == 'FAIL') {
messageApi.error('演示视频打包失败,点击重新打包');
setShowBuyPicError(true)
setShowBuyVideoIng(false)
} else {
messageApi.error('演示视频正在生成,请稍后');
}
}
})
}
const downAll = (projId: string, name: string) => {
setHasDown(true)
if (!hasDown) {
get({
messageApi,
url: `/route/proj/download/all/${projId}`,
config: {
responseType: 'blob' // 指定响应类型为 blob
},
onBefore() {
setDownModal(true); // 打开下载模态框
setHasDown(true); // 设置正在下载状态
},
onSuccess(data: any) {
// 处理下载成功的逻辑
const blob = new Blob([data.data]); // 创建 Blob 对象
const url = window.URL.createObjectURL(blob); // 创建下载链接
const link = document.createElement('a'); // 创建临时的 <a> 元素
link.href = url;
link.setAttribute('download', `${name}全部资料.zip`); // 设置下载文件的名称
document.body.appendChild(link);
link.click(); // 触发下载
document.body.removeChild(link); // 下载完成后移除 <a> 元素
// 释放 URL 对象,建议在用户确认下载完成后解除
// window.URL.revokeObjectURL(url);
},
onFinally() {
// 在请求完成后(成功或失败)都会执行
setHasDown(false); // 重置 hasDown 状态
setDownModal(false); // 关闭模态框
}
})
} else {
setDownModal(true);
}
};
// 更新标签状态
const upTag = (dataId: string, projId: string) => {
post<any>({
messageApi,
url: `/api/proj/tag/save-or-delete`,
body: {
dataId,
projId
},
onBefore() {
},
onSuccess(data) {
// console.log(data.data.data);
// props.upData
// props.updata()
// setTagStatus(data.data.data)
// 根据返回的状态更新 tagIdArray
if (data.data.data === 'SAVE') {
setTagIdArray((prevArray: any) => [...prevArray, dataId]);
} else if (data.data.data === 'DELETE') {
setTagIdArray((prevArray: any[]) => prevArray.filter(id => id !== dataId));
}
},
onFinally() {
}
})
}
// 保存提示标签
const saveRemind = (projRemindId: string, projId: string) => {
post<any>({
messageApi,
url: `/api/proj/remind/task/save`,
body: {
projRemindId,
projId
},
onBefore() {
},
onSuccess() {
setRemindIdArray((prevArray: any) => [...prevArray, projRemindId]);
},
onFinally() {
}
})
}
// 删除提示标签
const deleteRemind = (projRemindId: string, projId: string) => {
// setRemindIdArray((prevArray: any[]) => prevArray.filter(id => id !== projRemindId));
del<any>({
messageApi,
url: `/api/proj/remind/task/delete/proj-id/${projId}/proj-remind-id/${projRemindId}`,
onSuccess() {
setRemindIdArray((prevArray: any[]) => prevArray.filter(id => id !== projRemindId));
}
})
}
// 更改data加入数组
// const upData = (tagId:string) => {
// if(tagStatus=='SAVE'){
// setTagIdArray(tagIdArray.push(tagId))
// }
// }
// 第四步 登陆页面设置
const [loginPageOpne, setLoginPageOpne] = useState(false)
const [loginPageShowOpne, setLoginPageShowOpne] = useState(false)
const nav = useNavigate();
// 第五步 软件功能管理
const [softwareManagementOpen, setSoftwareManagementOpen] = useState(false)
const [softwareManagementShowOpen, setSoftwareManagementShowOpen] = useState(false)
// const [showZpi,setShowZpi] = useState(false)
// 第六步 显示顺序
const [displayOrderOpen, setDisplayOrderOpen] = useState(false)
const [displayOrderShowOpen, setDisplayOrderShowOpen] = useState(false)
// const pkg = data.pay.chargeAdditionals.match(/PKG:(\d+)/);
// const video = data.pay.chargeAdditionals.match(/VIDEO_DEMO:(\d+)/);
const URGENT = data.pay.chargeAdditionals.match(/URGENT:(\d+)/);
// 基础服务费
// const basics = data.pay.charge.match(/:(\d+)/);
// const pkgValue: number | null = pkg ? parseInt(pkg[1], 10) / 100 : null;
// const videoDemoValue: number | null = video ? parseInt(video[1], 10) / 100 : null;
const URGENTvalue: number | null = URGENT ? parseInt(URGENT[1], 10) / 100 : null;
// const basicsValue: number | null = basics ? parseInt(basics[1], 10)/100 : null;
const [projId] = useState(data.projId)
// 修改
// const isShow = data.pay.chargeAdditionals.includes('PKG') || data.pay.chargeType == 'ALL'
const [messageApi, messageContext] = useMessage();
// const [projCategoryId, setProjCategoryId] = useState(data.projCategoryId);
// const [projCategoryName, setProjCategoryName] = useState(data.projCategoryName);
// const [charge, setCharge] = useState('');
const [payCharge, setPayCharge] = useState('');
// const indexListContext = useContext(IndexListContext);
/**
* 生成状态
*/
const renderGenerateStatus = () => {
if (data.generate.generateStatus == GenerateStatus.PENDING) {
return <Tag color="cyan"><ClockCircleOutlined /> </Tag>
}
if (data.generate.generateStatus == GenerateStatus.GENERATING) {
return <Tag color="magenta"><LoadingOutlined /> </Tag>
}
if (data.generate.generateStatus == GenerateStatus.SUCCESS) {
return <Tag color="green"><CheckOutlined /> </Tag>
}
if (data.generate.generateStatus == GenerateStatus.FAILED) {
return <Tag color="red"><WarningOutlined /> </Tag>
}
if (data.generate.generateStatus == GenerateStatus.NONE) {
return <Tag color="cyan"></Tag>
}
return <Tag color="red"><CloseCircleOutlined /> </Tag>
}
// const dispath = useDispatch()
const goEdit = () => {
if (data.projStatus == 'NORMAL' || data.projStatus == 'EXPIRED' || data.pay.payStatus == 'CORRECTION2_REFUND' || data.pay.payStatus == 'CORRECTION1_REFUND') {
if (data.pay.chargeType == 'ALL') {
nav(`/proj-eall/${data.projId}`);
// dispath({
// type: 'upProjName',
// val: data.projName
// })
// dispath({
// type: 'upProjStatus',
// val: data.generate.generateStatus == GenerateStatus.SUCCESS ? '查看' : '编辑'
// })
sessionStorage.setItem('projName', data.projName);
sessionStorage.setItem('projStatus', data.generate.generateStatus == GenerateStatus.SUCCESS ? '查看' : '编辑');
// sessionStorage.setItem('projStatus', '查看' );
} else if (data.pay.chargeType == 'FREE') {
nav(`/proj-efree/${data.projId}`);
// dispath({
// type: 'upProjName',
// val: data.projName
// })
// dispath({
// type: 'upProjStatus',
// val: data.generate.generateStatus == GenerateStatus.SUCCESS ? '查看' : '编辑'
// })
sessionStorage.setItem('projName', data.projName);
sessionStorage.setItem('projStatus', data.generate.generateStatus == GenerateStatus.SUCCESS ? '查看' : '编辑');
} else {
nav(`/proj-edit/${data.projId}`);
// dispath({
// type: 'upProjName',
// val: data.projName
// })
// dispath({
// type: 'upProjStatus',
// val: data.generate.generateStatus == GenerateStatus.SUCCESS ? '查看' : '编辑'
// })
//将data.projName储存到缓sessionStorage存里面 key为projName
sessionStorage.setItem('projName', data.projName);
sessionStorage.setItem('projStatus', data.generate.generateStatus == GenerateStatus.SUCCESS ? '查看' : '编辑');
}
}
}
const applyItems: MenuProps['items'] = [
{
key: '1',
label: (
<div
onClick={() => {
window.open(`${Axios.defaults?.baseURL}/route/proj/download/apply/${data.projId}`)
}}
style={{ maxWidth: 200, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}
>
Word
</div>
),
},
{
key: '2',
label: (
<div
onClick={() => {
window.open(`${Axios.defaults?.baseURL}/route/proj/download/apply-txt/${data.projId}`)
}}
style={{ maxWidth: 200, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}
>
TxT
</div>
),
},
]
const manualItems: MenuProps['items'] = [
{
key: '1',
label: (
<div
onClick={() => {
window.open(`${Axios.defaults?.baseURL}/route/proj/download/manual/${data.projId}`)
}}
style={{ maxWidth: 200, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}
>
Word
</div>
),
},
{
key: '2',
label: (
<div
onClick={() => {
window.open(`${Axios.defaults?.baseURL}/route/proj/download/manual/pdf/${data.projId}`)
}}
style={{ maxWidth: 200, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}
>
Pdf
</div>
),
},
]
const codeItems: MenuProps['items'] = [
{
key: '1',
label: (
<div
onClick={() => {
window.open(`${Axios.defaults?.baseURL}/route/proj/download/code/${data.projId}`)
}}
style={{ maxWidth: 200, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}
>
Word
</div>
),
},
{
key: '2',
label: (
<div
onClick={() => {
window.open(`${Axios.defaults?.baseURL}/route/proj/download/code/pdf/${data.projId}`)
}}
style={{ maxWidth: 200, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}
>
Pdf
</div>
),
},
]
useEffect(() => {
// 修改
// const charge = props.item.pay.charge.split(':')[0];
let chargeName = '';
if (data.pay.chargeType == 'ALL') {
chargeName = '全托管';
} else if (data.pay.chargeType == 'MATERIAL_AGENT') {
chargeName = '写材料+代理';
} else if (data.pay.chargeType == 'MATERIAL_AGENT_URGENT') {
chargeName = '写材料+代理(加急)';
} else if (data.pay.chargeType == 'MATERIAL') {
chargeName = '写材料';
} else {
chargeName = '免费试用';
}
// data.pay.chargeType
// setCharge(charge)
setPayCharge(chargeName);
// console.log('额外收费安装包',pkgValue);
// console.log('额外收费视频',videoDemoValue);
// console.log('额外收费加急',URGENTvalue);
// console.log('基础服务费',basicsValue);
// getTag()
// console.log('查看数据', data);
// console.log('查看状态', data.pay.payStatus);
}, [])
return (
<>
<div className="card-proj">
<div className='cp-top'>
<div className='cpt-left'>
<div className='dottedLine'></div>
<div className='cpt-title' onClick={goEdit}>{data.projName}</div>
<div className='cp-tag'
style={{
background: payCharge == '全托管' ? '#6bd2b4' : payCharge == '免费试用' ? '#ff9226' : payCharge == '写材料' ? '#5279f4' : '', color: '#fff',
display: data.projStatus == 'NORMAL' || data.projStatus == 'EXPIRED' ? 'unset' : 'none'
}}>
{payCharge}
</div>
<div className='cp-tag'
style={{
background: '#8a8a8a', color: '#fff',
display: data.projStatus == 'NORMAL' || data.projStatus == 'EXPIRED' ? 'none' : 'unset'
}}>
{payCharge}
</div>
<div className='cp-num'>
{data.projContext}
</div>
<div className='cp-smallLine'>
</div>
<div className='cp-time'>
{data.gmtCreate}
</div>
{/* 标签 */}
<div className='selectTagmax'>
{props.tagArray.map((item: any) => {
const [part1, part2] = item.value.split(':');
if (part2 == 'TAG_NOT') {
return (
// <div className='proj-progress' key={part1} style={{
// border: ' 1px dashed #5a5a5a',
// // display: data.projStatus == 'NORMAL' || data.projStatus == 'EXPIRED' ? 'block' : 'none'
// marginBottom: 10,
// // 禁止换行
// textWrap: 'nowrap'
// }}
// >
// {item.label}
// {/* 提交版权中心 */}
// </div>
<div key={item.value}></div>
);
} else {
return (
<div className='proj-progress' key={item.value} style={{
background: tagIdArray.includes(part1) ? '#ff7b00' : '',
color: tagIdArray.includes(part1) ? '#ffffff' : '#5a5a5a',
border: tagIdArray.includes(part1) ? ' 1px solid #ff7b00' : ' 1px solid #5a5a5a',
// display: data.projStatus == 'NORMAL' || data.projStatus == 'EXPIRED' ? 'block' : 'none'
}}
onClick={() => {
// console.log('查看数据', item.value);
upTag(part1, data.projId)
// upData(item.value)
// props.updata()
}}
>
{item.label}
</div>
)
}
})}
</div>
</div>
{/* <div style={{ display: payCharge !== '全托管' ? 'block' : 'none' }}>
<div className='proj-progress' style={{display:data.progress?'block':'none'}}>
{data.progress == 'DONE' ? '已完成' : data.progress == 'SUBMIT_FOR_REVIEW' ? '已提交版权中心' : data.progress == 'PRODUCTION' ? '正在制作中' : '等待制作中'}
</div>
</div> */}
<div className='cpt-right' style={{ display: data.projStatus == 'NORMAL' || data.projStatus == 'EXPIRED' || data.pay.payStatus == 'CORRECTION2_REFUND' || data.pay.payStatus == 'CORRECTION1_REFUND' ? 'block' : 'none' }}>
{
data.generate.generateStatus == GenerateStatus.SUCCESS ? (
<span className="cpt-text-btn" onClick={goEdit}>
<SearchOutlined />
<span className='text-btn' ></span>
</span>
) : (
<span className="cpt-text-btn" onClick={goEdit}>
<EditOutlined />
<span className='text-btn' ></span>
</span>
)
}
<span className='orignLine' style={{ display: data.projStatus == 'EXPIRED' || data.pay.payStatus == 'CORRECTION2_REFUND' ? 'none' : 'unset' }}>|</span>
<span className="cpt-text-btn" style={{ display: data.projStatus == 'EXPIRED' || data.pay.payStatus == 'CORRECTION2_REFUND' ? 'none' : 'unset' }}>
<EyeOutlined onClick={() => {
window.open(`${Axios.defaults?.baseURL}/${data.previewUrl}`, '_blank')
}} />
<span className='text-btn'
onClick={() => {
window.open(`${Axios.defaults?.baseURL}/${data.previewUrl}`, '_blank')
}}></span>
</span>
</div>
</div>
<div className='cp-bot'>
<div className='cpb-left'>
{/* lyp */}
<div className='cpb-left-img' >
<Carousel autoplay dots={false}>
<div className='cpb-left-imgX'>
<img src={downloadUrl(data.loginpage.loginpagePreviewImgs, false)} height={'143px'} alt="" />
</div>
<div className='cpb-left-imgX'>
<img src={downloadUrl(data.codeTypePage.previewImgs, false)} height={'143px'} alt="" />
</div>
</Carousel>
<div className='payStatus' style={{ background: data.pay.payStatus == 'UNPAID' ? '#E85454 ' : data.pay.payStatus == 'PAID' ? '#40BF76' : data.pay.payStatus == 'ARREARS' ? '#FFA200' : data.pay.payStatus == 'FULL_REFUND' ? '#C9C9C9' : data.pay.payStatus == 'CORRECTION1_REFUND' ? '#99B5BD' : data.pay.payStatus == 'CORRECTION2_REFUND' ? '#99A3BD' : '' }}>
{data.pay.payStatus == 'UNPAID' ? '未付款' : data.pay.payStatus == 'PAID' ? '已付款' : data.pay.payStatus == 'ARREARS' ? '欠费' : data.pay.payStatus == 'FULL_REFUND' ? '全额退款' : data.pay.payStatus == 'CORRECTION1_REFUND' ? '补正1次退款' : data.pay.payStatus == 'CORRECTION2_REFUND' ? '补正2次退款' : ''}
</div>
</div>
{/* <img src={downloadUrl(data.codeTypePage.previewImgs)} className='cpb-left-img' alt="" /> */}
<div className='cpbl-right'>
<div style={{ display: 'flex' }}>
<div className='cpbl-money'
style={{ background: data.projStatus == 'NORMAL' || data.projStatus == 'EXPIRED' ? '#f7edce' : '#ebebeb' }}
>
<div className='money'
style={{ color: data.projStatus == 'NORMAL' || data.projStatus == 'EXPIRED' ? '#FF5D15' : '#8a8a8a' }}
>() : </div>
<div className='num'
style={{ color: data.projStatus == 'NORMAL' || data.projStatus == 'EXPIRED' ? '#FF5D15' : '#8a8a8a' }}
>
{/* {data.pay.payment / 100} */}
{data.pay.servicePackageId ? 0 : data.pay.payment / 100}
{/* 2000.00 */}
</div>
<div className='coupon-num' style={{ display: data.pay.couponAmount ? 'unset' : 'none', color: data.projStatus == 'NORMAL' || data.projStatus == 'EXPIRED' ? '#FF5D15' : '#8a8a8a' }}>({data.pay.couponAmount / 100})</div>
</div>
<div className='otherMoney'>
{/* <div>基础费用:{basicsValue}</div> */}
<Tag color="#f50" style={{ display: URGENTvalue ? 'block' : 'none' }}>:{URGENTvalue}</Tag>
{/* <Tag color="#2db7f5" style={{ display: pkgValue ? 'block' : 'none' }}>安装包:{pkgValue}</Tag>
<Tag color="#87d068" style={{ display: videoDemoValue ? 'block' : 'none' }}>演示视频:{videoDemoValue}</Tag> */}
</div>
</div>
<div className='cpbl-btn-box'>
<div style={{ display: data.projStatus == 'NORMAL' || data.projStatus == 'EXPIRED' ? 'block' : 'none' }}>
<div className='cpbl-btn'>
<div className='threeBtn' onClick={() => {
if (data.generate.generateStatus == GenerateStatus.SUCCESS || payCharge == '全托管') {
// nav(`/proj-edit/config-loginpage-show/${data.projId}`)
setLoginPageShowOpne(true);
} else {
// nav(`/proj-edit/config-loginpage/${data.projId}`)
setLoginPageOpne(true)
}
}}>
<img src={setImg} alt="" />
<div
></div>
</div>
<div className='threeBtn' onClick={() => {
if (data.generate.generateStatus == GenerateStatus.SUCCESS || payCharge == '全托管') {
// nav(`/proj-edit/config-mod-list-show/${data.projId}`)
setSoftwareManagementShowOpen(true)
} else {
setSoftwareManagementOpen(true)
// nav(`/proj-edit/config-mod-list/${data.projId}`)
}
}}>
<img src={menuImg} alt="" />
<div
>({data.projModCount})</div>
</div>
<div className='threeBtn rightBit' onClick={() => {
if (data.generate.generateStatus == GenerateStatus.SUCCESS || payCharge == '全托管') {
// nav(`/proj-edit/config-menu-list-show/${data.projId}`)
setDisplayOrderShowOpen(true);
} else {
// nav(`/proj-edit/config-menu-list/${data.projId}`)
setDisplayOrderOpen(true);
}
}}>
<img src={orderImg} alt="" />
<div
>({data.projModCount})</div>
</div>
</div>
</div>
<div className='selectTagmin'
style={{ marginLeft: data.projStatus == 'NORMAL' || data.projStatus == 'EXPIRED' ? 20 : 220, marginRight: 10 }}>
{props.tagArray.map((item: any) => {
const [part1, part2] = item.value.split(':');
if (part2 == 'TAG_NOT') {
return (
// <div className='proj-progress' key={part1} style={{
// border: ' 1px dashed #5a5a5a',
// // display: data.projStatus == 'NORMAL' || data.projStatus == 'EXPIRED' ? 'block' : 'none'
// marginBottom: 10,
// // 禁止换行
// textWrap: 'nowrap'
// }}
// >
// {item.label}
// {/* 提交版权中心 */}
// </div>
<div key={item.value}></div>
);
} else {
return (
<div className='proj-progress' key={item.value} style={{
background: tagIdArray.includes(part1) ? '#ff7b00' : '',
color: tagIdArray.includes(part1) ? '#ffffff' : '#5a5a5a',
border: tagIdArray.includes(part1) ? ' 1px solid #ff7b00' : ' 1px solid #5a5a5a',
// display: data.projStatus == 'NORMAL' || data.projStatus == 'EXPIRED' ? 'block' : 'none'
marginBottom: 10,
// 禁止换行
textWrap: 'nowrap'
}}
onClick={() => {
// console.log('查看数据', item.value);
upTag(part1, data.projId)
// upData(item.value)
// props.updata()
}}
>
{item.label}
{/* 提交版权中心 */}
</div>
)
}
})}
</div>
</div>
</div>
</div>
<div className='cline'></div>
<div className='cpb-center' >
<div style={{ fontSize: 16, fontWeight: 500, color: data.projStatus == 'REFUND_APPLYING' ? '' : data.projStatus == 'CLOSE' ? '#73A350 ' : data.projStatus == 'EXPIRED' ? '#FFB667 ' : '' }}>
{data.projStatus == 'REFUND_APPLYING' ? '退款申请中' : data.projStatus == 'CLOSE' ? '该项目已关闭' : data.projStatus == 'EXPIRED' ? '该项目已过期' : ''}
</div>
<div className='cpbc-top' style={{ display: data.projStatus == 'NORMAL' || data.projStatus == 'EXPIRED' || data.pay.payStatus == 'CORRECTION2_REFUND' || data.pay.payStatus == 'CORRECTION1_REFUND' ? 'block' : 'none' }}>
{
data.generate.generateStatus == GenerateStatus.SUCCESS ? (
<div className="option">
{/* <Button size="small" type="text" onClick={() => {
window.open(`${Axios.defaults?.baseURL}/route/proj/download/apply/${data.projId}`)
}}><DownloadOutlined /> 申请表</Button> */}
<Dropdown
// menu={{
// applyItems
// }}
menu={{ items: applyItems }}
>
<div
><Button size="small" type="text" ><DownloadOutlined /> </Button>
</div>
</Dropdown>
{/* <div className='downloadBox'> */}
{/* <div className='down-title'>
<DownloadOutlined /> 操作手册
</div>
<div className='down-bot'>
<Button size="small" type="text" onClick={() => {
window.open(`${Axios.defaults?.baseURL}/route/proj/download/manual/${data.projId}`)
}}> word</Button>
<Button size="small" type="text"
className='down-pdf'
onClick={() => {
window.open(`${Axios.defaults?.baseURL}/route/proj/download/manual/pdf/${data.projId}`)
}}> pdf</Button>
</div> */}
<Dropdown
// menu={{
// applyItems
// }}
menu={{ items: manualItems }}
>
<div
><Button size="small" type="text" ><DownloadOutlined /> </Button>
</div>
</Dropdown>
{/* </div> */}
{/* {
isShow && <Button className='zpibtn' size="small" type="text" onClick={() => {
window.open(`${Axios.defaults?.baseURL}/route/proj/download/code-zip/${data.projId}`)
}}
><DownloadOutlined /> 代码压缩包</Button>
} */}
{/* <Button size="small" type="text" onClick={() => {
window.open(`${Axios.defaults?.baseURL}/route/proj/download/code-zip/${data.projId}`)
}}><DownloadOutlined /> 代码压缩包</Button> */}
{/* <Button size="small" type="text" onClick={() => {
window.open(`${Axios.defaults?.baseURL}/route/proj/download/code/${data.projId}`)
}}><DownloadOutlined /> 源代码</Button> */}
{/* <div className='downloadBox'> */}
{/* <div className='down-title'>
<DownloadOutlined /> 源代码
</div>
<div className='down-bot'>
<Button size="small" type="text" onClick={() => {
window.open(`${Axios.defaults?.baseURL}/route/proj/download/code/${data.projId}`)
}}> word</Button>
<Button size="small"
className='down-pdf'
type="text" onClick={() => {
window.open(`${Axios.defaults?.baseURL}/route/proj/download/code/pdf/${data.projId}`)
}}> pdf</Button>
</div> */}
<Dropdown
// menu={{
// applyItems
// }}
menu={{ items: codeItems }}
>
<div
><Button size="small" type="text" ><DownloadOutlined /> </Button>
</div>
</Dropdown>
{/* </div> */}
<Button size="small" type="text" onClick={() => {
// window.open(`${Axios.defaults?.baseURL}/route/proj/download/all/${data.projId}`)
downAll(data.projId, data.projName)
}}><DownloadOutlined /> </Button>
<Button style={{ display: showBuyPicAgain ? 'unset' : 'none' }} size="small" type="text" onClick={() => {
window.open(`${Axios.defaults?.baseURL}/route/proj/download/pkg/${data.projId}`)
}}><DownloadOutlined />
<span style={{ marginLeft: 5 }}></span>
</Button>
<Button style={{ display: showBuyVideoAgain ? 'unset' : 'none' }} size="small" type="text" onClick={() => {
window.open(`${Axios.defaults?.baseURL}/route/proj/download/video/${data.projId}`)
}}><DownloadOutlined />
<span style={{ marginLeft: 5 }}></span>
</Button>
</div>
) : <></>
}
</div>
{/* <div className='cpbc-bot'>
<div>
<FolderOutlined />
</div>
<Dropdown menu={{
items: indexListContext.categorys,
onClick: (e) => {
const span = e.domEvent.target as HTMLSpanElement;
put<any>({
messageApi,
url: `/api/proj/update-category/${data.projId}/${e.key}`,
onSuccess() {
messageApi.success('修改成功');
setProjCategoryId(e.key);
setProjCategoryName(span.innerText);
}
});
}
}}>
<span>
<span className="text-btn">{projCategoryId ? projCategoryName : '无目录'}</span>
<DownOutlined />
</span>
</Dropdown>
{
projCategoryId ? (
<DeleteOutlined title="移除目录" onClick={() => {
put<any>({
messageApi,
url: `/api/proj/cancel-category/${data.projId}`,
onSuccess() {
messageApi.success('取消成功');
setProjCategoryId('');
setProjCategoryName('');
}
});
}} />
) : <></>
}
</div> */}
<div className='cpbc-bot' style={{ color: '#FFA415' }} title={data.apply.authorName}>
:{data.apply.authorName}
</div>
</div>
{/* <div className='cline'></div> */}
<div className='cpb-right' style={{
paddingLeft: 5,
paddingRight: 5,
}}>
<div className='cpbr-top'>
--
</div>
<div className='cpbr-bot'>
{renderGenerateStatus()}
</div>
<div style={{
display: data.generate.generateStatus == GenerateStatus.SUCCESS && payCharge !== '免费试用' ? 'unset' : 'none'
}}>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<div className='buyBox buyBtn'
style={{
display: showBuyPic ? 'unset' : 'none'
}}
onClick={() => {
setBuyModalShow(true);
}}
></div>
<div className='buyBox buyIng'
title='点击刷新状态'
style={{
display: showBuyPicIng ? 'unset' : 'none',
cursor: 'pointer',
// 禁止换行
textWrap: 'nowrap'
}}
onClick={() => {
upData()
}}
>
<span style={{ marginRight: 5 }}> </span>
<RedoOutlined spin /></div>
<div className='buyBox buyAgein'
onClick={() => {
setBuyModalShow(true);
}}
style={{
display: showBuyPicAgain ? 'unset' : 'none'
}}
></div>
<div className='buyBox buyAgein'
title='安装包打包失败,点击重新打包'
onClick={() => {
// setBuyModalShow(true);
againPkg()
}}
style={{
display: showBuyPicError ? 'unset' : 'none',
cursor: 'pointer',
textWrap: 'nowrap'
}}
>
<span style={{ marginRight: 5 }}></span><CloseOutlined />
</div>
</div>
<div style={{ display: 'flex', flexDirection: 'column', marginTop: 5 }}>
<div className='buyBox buyBtn'
style={{
display: showBuyVideo ? 'unset' : 'none'
}}
onClick={() => {
setBuyVideoModalShow(true);
}}
></div>
<div className='buyBox buyIng'
title='点击刷新状态'
style={{
display: showBuyVideoIng ? 'unset' : 'none',
cursor: 'pointer',
// 禁止换行
textWrap: 'nowrap'
}}
onClick={() => {
// upData()
upVideoData()
}}
>
<span style={{ marginRight: 5 }}> </span>
<RedoOutlined spin /></div>
<div className='buyBox buyAgein'
onClick={() => {
setBuyVideoModalShow(true);
}}
style={{
display: showBuyVideoAgain ? 'unset' : 'none'
}}
></div>
<div className='buyBox buyAgein'
title='演示视频打包失败,点击重新打包'
onClick={() => {
// setBuyModalShow(true);
// againPkg()
againVideo()
}}
style={{
display: showBuyVideoError ? 'unset' : 'none',
cursor: 'pointer',
textWrap: 'nowrap'
}}
>
<span style={{ marginRight: 5 }}></span><CloseOutlined />
</div>
</div>
</div>
</div>
</div>
<div style={{
display: props.remindTagArray.length > 0 ? 'unset' : 'none',
}}>
<div className='promptTags' >
{/* {props.tagArray.map((item: any) => {
return (
<div className='proj-progress' key={item.value} style={{
background: tagIdArray.includes(item.value) ? '#ff7b00' : '',
color: tagIdArray.includes(item.value) ? '#ffffff' : '#5a5a5a',
border: tagIdArray.includes(item.value) ? ' 1px solid #ff7b00' : ' 1px solid #5a5a5a',
}}
onClick={() => {
upTag(item.value, data.projId)
}}
>
{item.label}
</div>
)
})} */}
{props.remindTagArray.map((item: any) => {
return (
<div className='proj-progress' key={item.value} style={{
background: RemindIdArray.includes(item.value) ? '#ff7b00' : '',
color: RemindIdArray.includes(item.value) ? '#ffffff' : '#5a5a5a',
border: RemindIdArray.includes(item.value) ? ' 1px solid #ff7b00' : ' 1px solid #5a5a5a',
// display: props.remindTagArray.length > 0 ? 'unset' : 'none',
}}
onClick={() => {
if (RemindIdArray.includes(item.value)) {
deleteRemind(item.value, data.projId)
} else {
saveRemind(item.value, data.projId)
}
}}
>
<ClockCircleOutlined style={{ marginRight: 3 }} /> {item.label}
</div>
)
})}
</div>
</div>
{/* <div className="card-proj-title">
<div className='titleLift'>
<div className="left">
<div className='boxline'></div>
<span className="text-btn" onClick={goEdit}>{data.projName}</span>
</div>
<div className="right">
<span className="context">编号:{data.projContext}</span>
<span className='line'></span>
<span className="date">{data.gmtCreate}</span> */}
{/* 状态标签 */}
{/* <span className="status">{renderGenerateStatus()}</span> */}
{/* </div>
</div>
<div className="titleRight">
{
data.generate.generateStatus == GenerateStatus.SUCCESS ? (
<span>
<SearchOutlined />
<span className="text-btn" onClick={goEdit}>查看</span>
</span>
) : (
<span>
<EditOutlined />
<span className="text-btn" onClick={goEdit}>编辑</span>
</span>
)
}
<span className='orignLine'>|</span>
<span>
<EyeOutlined />
<span className="text-btn" onClick={() => {
window.open(`${Axios.defaults?.baseURL}/${data.previewUrl}`, '_blank')
}}>预览</span>
</span>
</div>
</div> */}
{/* <hr/> */}
{/* <div className="body">
<div className="line">
<div className="left"> */}
{/* <Tag color="magenta">{payCharge}</Tag> */}
{/* 金额 */}
{/* <Tag color="gold">¥{data.pay.payment / 100}</Tag> */}
{/* </div> */}
{/* <div className='centerl'>
<div className='c-top'>
<span className='money'>金额(¥) : </span>
<span className='num'>{data.pay.payment / 100}</span>
</div>
<div className='c-bot'>
<div className='set' onClick={() => {
if (data.generate.generateStatus == GenerateStatus.SUCCESS) {
nav(`/proj-edit/config-loginpage-show/${data.projId}`)
} else {
nav(`/proj-edit/config-loginpage/${data.projId}`)
}
}}>
<img src={setImg} alt="" />
<div>登录界面设置</div>
</div>
<div className='set' onClick={() => {
if (data.generate.generateStatus == GenerateStatus.SUCCESS) {
nav(`/proj-edit/config-mod-list-show/${data.projId}`)
} else {
nav(`/proj-edit/config-mod-list/${data.projId}`)
}
}}>
<img src={menuImg} alt="" />
<div>系统菜单管理({data.projModCount})</div>
</div>
<div className='set' onClick={() => {
if (data.generate.generateStatus == GenerateStatus.SUCCESS) {
nav(`/proj-edit/config-menu-list-show/${data.projId}`)
} else {
nav(`/proj-edit/config-menu-list/${data.projId}`)
}
}}>
<img src={orderImg} alt="" />
<div>菜单排序({data.projModCount})</div>
</div>
</div>
</div> */}
{/* 目录层级结构*/}
{/* <div className='centerr'>
</div>
<div className='right'>
<div className='rigth-t'>
- 当前状态 -
</div>
<div className="status">{renderGenerateStatus()}</div>
</div> */}
{/* <div className="right">
{
data.generate.generateStatus == GenerateStatus.SUCCESS ? (
<span>
<SearchOutlined/>
<span className="text-btn" onClick={goEdit}>查看</span>
</span>
) : (
<span>
<EditOutlined/>
<span className="text-btn" onClick={goEdit}>编辑</span>
</span>
)
}
<span>
<EyeOutlined/>
<span className="text-btn" onClick={() => {
window.open(`${Axios.defaults?.baseURL}/${data.previewUrl}`, '_blank')
}}>预览</span>
</span>
</div> */}
{/* </div> */}
{/* <div className="line">
<div className="left">
{
data.generate.generateStatus == GenerateStatus.SUCCESS ? (
<span>
<SearchOutlined/>
<span className="text-btn" onClick={(e) => {
e.preventDefault();
nav(`/agent-select/${data.projId}`);
}}>找代理</span>
</span>
) : <></>
}
</div>
<div className="right">
<Dropdown menu={{
items: indexListContext.categorys,
onClick: (e) => {
const span = e.domEvent.target as HTMLSpanElement;
put<any>({
messageApi,
url: `/api/proj/update-category/${data.projId}/${e.key}`,
onSuccess() {
messageApi.success('修改成功');
setProjCategoryId(e.key);
setProjCategoryName(span.innerText);
}
});
}
}}>
<span>
<span className="text-btn">{projCategoryId ? projCategoryName : '无目录'}</span>
<DownOutlined/>
</span>
</Dropdown>
{
projCategoryId ? (
<DeleteOutlined title="移除目录" onClick={() => {
put<any>({
messageApi,
url: `/api/proj/cancel-category/${data.projId}`,
onSuccess() {
messageApi.success('取消成功');
setProjCategoryId('');
setProjCategoryName('');
}
});
}}/>
) : <></>
}
</div>
</div> */}
{/* </div> */}
{/* <hr/> */}
{/* <div className="foot">
<ConfigProvider theme={{
components: {
Button: {
contentFontSizeSM: 12,
}
}
}}>
{renderOption()}
</ConfigProvider>
</div> */}
</div >
{/* 第四步 设置 */}
< Modal open={loginPageOpne}
title="登陆页面设置"
width={1700}
destroyOnClose={true}
onCancel={() => {
setLoginPageOpne(false);
// window.location.reload(); // 在取消时刷新页面
}
}
footer={null}
>
<LoginPage projId={projId} closeModal={() => { setLoginPageOpne(false) }}></LoginPage>
</ Modal>
{/* 第四步 查看 */}
< Modal open={loginPageShowOpne}
title="登陆页面查看"
width={1700}
destroyOnClose={true}
onCancel={() => {
setLoginPageShowOpne(false);
}}
footer={null}
>
<LoginPageShow projId={projId}></LoginPageShow>
</Modal >
{/* 第五步 设置 */}
< Modal open={softwareManagementOpen}
title="软件功能管理设置"
width={1500}
destroyOnClose={true}
onCancel={() => {
// props.upreqData()
setSoftwareManagementOpen(false);
// props.getreqData()
// window.location.reload(); // 在取消时刷新页面
}}
footer={null}
>
<SoftwareManagement projId={projId}></SoftwareManagement>
</Modal >
{/* 第五步 查看 */}
< Modal open={softwareManagementShowOpen}
title="软件功能管理查看"
width={1500}
destroyOnClose={true}
onCancel={() => {
setSoftwareManagementShowOpen(false);
}}
footer={null}
>
<SoftwareManagementShow projId={projId}></SoftwareManagementShow>
</Modal >
{/* 第六步 设置 */}
< Modal open={displayOrderOpen}
title="设置功能列表显示顺序"
width={1500}
destroyOnClose={true}
onCancel={() => {
// props.upreqData()
setDisplayOrderOpen(false);
}}
footer={null}
>
<DisplayOrder projId={projId}></DisplayOrder>
</Modal >
{/* 第六步 查看 */}
< Modal open={displayOrderShowOpen}
title="查看功能列表显示顺序"
width={1500}
destroyOnClose={true}
onCancel={() => {
setDisplayOrderShowOpen(false);
}}
footer={null}
>
<DisplayOrderShow projId={projId}></DisplayOrderShow>
</Modal >
{messageContext}
<Modal title="提示"
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
height: `${height}px`,
}}
destroyOnClose={true}
open={downModal}
footer={
<Button
type="primary"
onClick={() => setDownModal(false)}
// style={{
// backgroundColor: '#ff4d4f', // 自定义背景颜色
// borderColor: '#ff4d4f', // 自定义边框颜色
// color: '#fff', // 自定义文字颜色
// }}
>
</Button>
}
onCancel={() => { setDownModal(false) }} width={500} >
<div style={{ width: 500 }}>
<span style={{ marginLeft: 10 }}><LoadingOutlined /></span>
</div>
</Modal>
< Modal open={buyModalShow}
centered
title="提示"
destroyOnClose={true}
width={500}
onCancel={() => {
setBuyModalShow(false);
}
}
// onOk={() => {
// setShowBuyPic(false)
// setShowBuyPicIng(true)
// setBuyModalShow(false);
// }
// }
footer={[
<Button key="cancel" onClick={() => setBuyModalShow(false)}></Button>,
<Button key="ok" type="primary" onClick={() => {
payPkg()
}}></Button>,
]}
>
<div className='modalText'> {props.pkgPrice}</div>
<div className='modalTip'>*退</div>
{/* <div className='modalTip'>注安装包制作时长为1-3个工作日</div> */}
</ Modal>
< Modal open={buyVideoModalShow}
centered
title="提示"
destroyOnClose={true}
width={500}
onCancel={() => {
setBuyVideoModalShow(false);
}
}
// onOk={() => {
// setShowBuyPic(false)
// setShowBuyPicIng(true)
// setBuyModalShow(false);
// }
// }
footer={[
<Button key="cancel" onClick={() => setBuyVideoModalShow(false)}></Button>,
<Button key="ok" type="primary" onClick={() => {
payVideo()
// payPkg()
}}></Button>,
]}
>
<div className='modalText'> {props.videoPrice}</div>
<div className='modalTip'>*退</div>
{/* <div className='modalTip'>注安装包制作时长为1-3个工作日</div> */}
</ Modal>
</>
)
}