552 lines
26 KiB
TypeScript
552 lines
26 KiB
TypeScript
/* eslint-disable @typescript-eslint/no-unused-vars */
|
||
import './card-proj.css';
|
||
import {
|
||
CheckOutlined,
|
||
ClockCircleOutlined,
|
||
CloseCircleOutlined, DeleteOutlined,
|
||
DownloadOutlined, DownOutlined,
|
||
EditOutlined,
|
||
EyeOutlined,
|
||
LoadingOutlined,
|
||
SearchOutlined,
|
||
WarningOutlined,
|
||
FolderOutlined
|
||
} from '@ant-design/icons';
|
||
import { Button, Dropdown, Tag, Modal } from 'antd';
|
||
import { GenerateStatus, IProj, ProjChargeType } from "../../interfaces/proj/IProj.ts";
|
||
import { useNavigate } from "react-router-dom";
|
||
import { Axios, put } from "../../util/AjaxUtils.ts";
|
||
import { useContext, useEffect, useState } from "react";
|
||
import { IndexListContext } from "../../context/IndexListContext.ts";
|
||
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 LoginPageShow from '../../components/LoginPageShow/LoginPageShow.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: { item: IProj }) {
|
||
// 第四步 登陆页面设置
|
||
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 data = props.item;
|
||
const [projId] = useState(data.projId)
|
||
const isShow = data.pay.chargeAdditionals.includes('PKG')
|
||
|
||
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 goEdit = () => {
|
||
if (charge == ProjChargeType.ALL) {
|
||
nav(`/proj-eall/${data.projId}`);
|
||
} else if (charge == ProjChargeType.FREE) {
|
||
nav(`/proj-efree/${data.projId}`);
|
||
} else {
|
||
nav(`/proj-edit/${data.projId}`);
|
||
}
|
||
}
|
||
|
||
useEffect(() => {
|
||
const charge = props.item.pay.charge.split(':')[0];
|
||
let chargeName = '';
|
||
if (charge == ProjChargeType.ALL) {
|
||
chargeName = '全托管';
|
||
} else if (charge == ProjChargeType.MATERIAL_AGENT) {
|
||
chargeName = '写材料+代理';
|
||
} else if (charge == ProjChargeType.MATERIAL_AGENT_URGENT) {
|
||
chargeName = '写材料+代理(加急)';
|
||
} else if (charge == ProjChargeType.MATERIAL) {
|
||
chargeName = '写材料';
|
||
} else {
|
||
chargeName = '免费试用';
|
||
}
|
||
setCharge(charge)
|
||
setPayCharge(chargeName);
|
||
}, [])
|
||
|
||
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'>
|
||
{payCharge}
|
||
</div>
|
||
<div className='cp-num'>
|
||
编号：{data.projContext}
|
||
</div>
|
||
<div className='cp-smallLine'>
|
||
</div>
|
||
<div className='cp-time'>
|
||
{data.gmtCreate}
|
||
</div>
|
||
</div>
|
||
<div className='cpt-right'>
|
||
{
|
||
data.generate.generateStatus == GenerateStatus.SUCCESS ? (
|
||
<span className="cpt-text-btn">
|
||
<SearchOutlined />
|
||
<span className='text-btn' onClick={goEdit}>查看</span>
|
||
</span>
|
||
) : (
|
||
<span className="cpt-text-btn">
|
||
<EditOutlined />
|
||
<span className='text-btn' onClick={goEdit}>编辑</span>
|
||
</span>
|
||
)
|
||
}
|
||
<span className='orignLine'>|</span>
|
||
<span className="cpt-text-btn">
|
||
<EyeOutlined />
|
||
<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'>
|
||
<img src={data.img} className='cpb-left-img' alt="" />
|
||
<div className='cpbl-right'>
|
||
<div className='cpbl-money'>
|
||
<span className='money'>金额(￥) : </span>
|
||
<span className='num'>{data.pay.payment / 100}</span>
|
||
</div>
|
||
<div className='cpbl-btn'>
|
||
<div className='threeBtn' onClick={() => {
|
||
if (data.generate.generateStatus == GenerateStatus.SUCCESS) {
|
||
// 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) {
|
||
// 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) {
|
||
// 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>
|
||
<div className='cline'></div>
|
||
<div className='cpb-center'>
|
||
<div className='cpbc-top'>
|
||
{
|
||
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>
|
||
<Button size="small" type="text" onClick={() => {
|
||
window.open(`${Axios.defaults?.baseURL}/route/proj/download/manual/${data.projId}`)
|
||
}}><DownloadOutlined /> 操作手册</Button>
|
||
{
|
||
isShow && <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-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>
|
||
) : <></>
|
||
}
|
||
|
||
</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>
|
||
{/* <div className='cline'></div> */}
|
||
<div className='cpb-right'>
|
||
<div className='cpbr-top'>
|
||
-当前状态-
|
||
</div>
|
||
<div className='cpbr-bot'>
|
||
{renderGenerateStatus()}
|
||
</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}
|
||
|
||
onCancel={() => {
|
||
setLoginPageOpne(false);
|
||
// window.location.reload(); // 在取消时刷新页面
|
||
}}
|
||
|
||
footer={null}
|
||
>
|
||
<LoginPage projId={projId} closeModal={() => { setLoginPageOpne(false) }}></LoginPage>
|
||
</Modal>
|
||
{/* 第四步 查看 */}
|
||
<Modal open={loginPageShowOpne}
|
||
title="登陆页面查看"
|
||
width={1700}
|
||
|
||
onCancel={() => {
|
||
setLoginPageShowOpne(false);
|
||
|
||
}}
|
||
|
||
footer={null}
|
||
>
|
||
<LoginPageShow projId={projId}></LoginPageShow>
|
||
</Modal>
|
||
{/* 第五步 设置 */}
|
||
<Modal open={softwareManagementOpen}
|
||
title="软件功能管理设置"
|
||
width={1500}
|
||
|
||
onCancel={() => {
|
||
setSoftwareManagementOpen(false);
|
||
// window.location.reload(); // 在取消时刷新页面
|
||
}}
|
||
footer={null}
|
||
>
|
||
<SoftwareManagement projId={projId}></SoftwareManagement>
|
||
</Modal>
|
||
{/* 第五步 查看 */}
|
||
<Modal open={softwareManagementShowOpen}
|
||
title="软件功能管理查看"
|
||
width={1500}
|
||
onCancel={() => {
|
||
setSoftwareManagementShowOpen(false);
|
||
}}
|
||
footer={null}
|
||
>
|
||
<SoftwareManagementShow projId={projId}></SoftwareManagementShow>
|
||
</Modal>
|
||
{/* 第六步 设置 */}
|
||
<Modal open={displayOrderOpen}
|
||
title="设置功能列表显示顺序"
|
||
width={1500}
|
||
|
||
onCancel={() => {
|
||
setDisplayOrderOpen(false);
|
||
}}
|
||
footer={null}
|
||
>
|
||
<DisplayOrder projId={projId}></DisplayOrder>
|
||
</Modal>
|
||
{/* 第六步 查看 */}
|
||
<Modal open={displayOrderShowOpen}
|
||
title="查看功能列表显示顺序"
|
||
width={1500}
|
||
|
||
onCancel={() => {
|
||
setDisplayOrderShowOpen(false);
|
||
}}
|
||
footer={null}
|
||
>
|
||
<DisplayOrderShow projId={projId}></DisplayOrderShow>
|
||
</Modal>
|
||
{messageContext}
|
||
</>
|
||
)
|
||
} |