252 lines
12 KiB
TypeScript
252 lines
12 KiB
TypeScript
import './card-proj.css';
|
||
import {
|
||
CheckOutlined,
|
||
ClockCircleOutlined,
|
||
CloseCircleOutlined,
|
||
CreditCardOutlined, DeleteOutlined,
|
||
DownloadOutlined, DownOutlined,
|
||
EditOutlined,
|
||
EyeOutlined,
|
||
LoadingOutlined,
|
||
SearchOutlined,
|
||
SettingOutlined,
|
||
WarningOutlined
|
||
} from '@ant-design/icons';
|
||
import {Button, ConfigProvider, Dropdown, Tag} from 'antd';
|
||
import {GenerateStatus, IProj, PayStatus, 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";
|
||
|
||
export default function CardProj(props: { item: IProj }) {
|
||
const nav = useNavigate();
|
||
const data = props.item;
|
||
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 renderOption = () => {
|
||
if (data.pay.payStatus == PayStatus.UNPAID) {
|
||
return (
|
||
<>
|
||
<div className="option">
|
||
<Button size="small" type="text"><CreditCardOutlined/> 待付款</Button>
|
||
</div>
|
||
</>
|
||
)
|
||
}
|
||
return (
|
||
<>
|
||
<div className="option">
|
||
<Button size="small" type="text" onClick={() => {
|
||
if (data.generate.generateStatus == GenerateStatus.SUCCESS) {
|
||
nav(`/proj-edit/config-loginpage-show/${data.projId}`)
|
||
} else {
|
||
nav(`/proj-edit/config-loginpage/${data.projId}`)
|
||
}
|
||
}}><SettingOutlined/> 登录界面设置</Button>
|
||
<Button size="small" type="text" 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}`)
|
||
}
|
||
}}><SettingOutlined/> 系统菜单管理({data.projModCount})</Button>
|
||
<Button size="small" type="text" 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}`)
|
||
|
||
}
|
||
}}><SettingOutlined/> 菜单排序({data.projModCount})</Button>
|
||
</div>
|
||
{
|
||
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>
|
||
<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>
|
||
) : <></>
|
||
}
|
||
</>
|
||
)
|
||
}
|
||
|
||
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="title">
|
||
<div className="left">
|
||
<span className="text-btn" onClick={goEdit}>{data.projName}</span>
|
||
</div>
|
||
<div className="right">
|
||
<span className="context">上下文：{data.projContext}</span>
|
||
<span className="date">{data.gmtCreate}</span>
|
||
<span className="status">{renderGenerateStatus()}</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="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>
|
||
{messageContext}
|
||
</>
|
||
)
|
||
} |