225 lines
10 KiB
TypeScript
225 lines
10 KiB
TypeScript
import './proj-new.css';
|
||
import { useNavigate, useParams, useSearchParams } from "react-router-dom";
|
||
import { Button, Flex, Form, Input, message, Modal, Spin } from "antd";
|
||
import { useContext, useEffect, useState } from "react";
|
||
import { get, post } from "../../util/AjaxUtils.ts";
|
||
import { IProjCharge, ProjAdditionalType, ProjChargeType } from "../../interfaces/proj/IProj.ts";
|
||
import { GlobalDispatchContext, reloadUser } from "../../context/GlobalContext.ts";
|
||
// const { TextArea } = Input;
|
||
type ProjInfo = {
|
||
projName: string;
|
||
projIntroduction: string;
|
||
};
|
||
|
||
export default function ProjNew() {
|
||
const globalDispatchContext = useContext(GlobalDispatchContext);
|
||
const nav = useNavigate();
|
||
const pathParams = useParams();
|
||
const [queryParams] = useSearchParams();
|
||
|
||
const [messageApi, contextHolder] = message.useMessage();
|
||
const [loading, setLoading] = useState<boolean>(false);
|
||
const height = window.innerHeight - 180;
|
||
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
|
||
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
|
||
const [chargePrice, setChargePrice] = useState(0);
|
||
const [projInfo, setProjInfo] = useState<ProjInfo>({
|
||
projName: '',
|
||
projIntroduction: '',
|
||
});
|
||
const [createProjId, setCreateProjId] = useState('');
|
||
const oldlistProjChargeAdditional: string[] = [];
|
||
const [listProjChargeAdditional,setlistProjChargeAdditional] = useState<string[]>([])
|
||
|
||
useEffect(() => {
|
||
get({
|
||
messageApi: messageApi,
|
||
url: '/api/proj/charge/get',
|
||
onSuccess({ data }) {
|
||
|
||
const charge = data as IProjCharge;
|
||
// console.log('创建页price',charge.proj.materialAgent);
|
||
|
||
let price = 0;
|
||
switch (pathParams.projChargeType) {
|
||
case ProjChargeType.ALL:
|
||
price = charge.proj.all;
|
||
break;
|
||
case ProjChargeType.MATERIAL_AGENT:
|
||
price = charge.proj.materialAgent;
|
||
break;
|
||
case ProjChargeType.MATERIAL_AGENT_URGENT:
|
||
price = charge.proj.materialAgentUrgent;
|
||
break;
|
||
case ProjChargeType.MATERIAL:
|
||
price = charge.proj.material;
|
||
break;
|
||
case ProjChargeType.FREE:
|
||
price = charge.proj.free;
|
||
break;
|
||
default:
|
||
messageApi.error({
|
||
type: 'error',
|
||
content: '价格类型错误',
|
||
})
|
||
}
|
||
const pkg = queryParams.get('pkg') == 'true' ? true : false
|
||
const videoDemo = queryParams.get('videoDemo') == 'true' ? true : false
|
||
if (pkg) {
|
||
price += charge.additional.pkg;
|
||
oldlistProjChargeAdditional.push(ProjAdditionalType.PKG);
|
||
console.log(listProjChargeAdditional);
|
||
|
||
}
|
||
if (videoDemo) {
|
||
price += charge.additional.videoDemo;
|
||
oldlistProjChargeAdditional.push(ProjAdditionalType.VIDEO_DEMO);
|
||
console.log(listProjChargeAdditional);
|
||
|
||
}
|
||
setChargePrice(price);
|
||
setlistProjChargeAdditional(oldlistProjChargeAdditional)
|
||
// console.log('传递信息pkg:',pkg,'videoDemo:',videoDemo);
|
||
|
||
// console.log('显示价格',price);
|
||
|
||
}
|
||
})
|
||
}, []);
|
||
|
||
return (
|
||
<>
|
||
{contextHolder}
|
||
{/* <Breadcrumb
|
||
items={[
|
||
{title: <Link to={'/'}>首页</Link>},
|
||
{title: <Link to={'/proj-create'}>创建项目</Link>},
|
||
{title: '新建项目'},
|
||
]}
|
||
/> */}
|
||
<div className='projNew' style={{height: `${height}px`, overflow: 'auto' }}>
|
||
<div className="proj-new">
|
||
{/* <div className="proj-title">请完善项目的基本信息</div> */}
|
||
<div className="proj-form">
|
||
<Form
|
||
name="basic"
|
||
layout={'vertical'}
|
||
labelCol={{ span: 24 }}
|
||
wrapperCol={{ span: 24 }}
|
||
style={{ width: '100%' }}
|
||
onFinish={(formData) => {
|
||
setIsCreateModalOpen(true);
|
||
setProjInfo({
|
||
projName: formData.projName,
|
||
projIntroduction: formData.projIntroduction
|
||
})
|
||
}}
|
||
autoComplete="off"
|
||
>
|
||
<div className='formItemOne'>
|
||
<div className='formItem-title oneTitle'>系统标题*</div>
|
||
<Form.Item<ProjInfo>
|
||
name="projName"
|
||
rules={[{ required: true, message: '请输入系统标题' }]}
|
||
>
|
||
<Input style={{ background: '#eeeeee', width: '1000px', height: '50px' ,fontSize:'16px'}} placeholder="请输入系统标题" />
|
||
</Form.Item>
|
||
</div>
|
||
{/* <div className='formItemTwo'>
|
||
<div className='formItem-title '>简单描述</div>
|
||
<Form.Item<ProjInfo>
|
||
name="projIntroduction"
|
||
>
|
||
<TextArea rows={10} style={{ background: '#eeeeee', resize: 'none',width:"328px",height:'220px',fontSize:'16px' }} placeholder="请对系统作出简单的描述，以使可准确生成资料..." />
|
||
</Form.Item>
|
||
</div> */}
|
||
<div style={{ marginTop: '20px' }}>
|
||
<Form.Item>
|
||
<Flex align="center" justify="center" gap="large">
|
||
<Button
|
||
// style={{
|
||
// backgroundColor: '#F5F5F5', width: '216px',
|
||
// height: '50px', color: '#AFAFAF', fontSize: '16px'
|
||
// }}
|
||
size='large'
|
||
type="default" htmlType="button" onClick={() => {
|
||
nav(-1);
|
||
}}
|
||
>
|
||
返回
|
||
</Button>
|
||
<Button type="primary" htmlType="submit"
|
||
size='large'
|
||
// style={{
|
||
// backgroundColor: 'var(--color-primary)', width: '216px',
|
||
// height: '50px', fontSize: '16px', marginLeft: '53px'
|
||
// }}
|
||
>
|
||
保存并付款
|
||
</Button>
|
||
|
||
</Flex>
|
||
</Form.Item>
|
||
</div>
|
||
</Form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<Modal title="提示"
|
||
okText="确定"
|
||
cancelText="取消"
|
||
open={isCreateModalOpen}
|
||
onOk={() => {
|
||
// console.log('最终',listProjChargeAdditional);
|
||
|
||
setIsCreateModalOpen(false);
|
||
post<any>({
|
||
messageApi,
|
||
url: '/api/proj/create',
|
||
body: {
|
||
projName: projInfo.projName,
|
||
projChargeType: pathParams.projChargeType,
|
||
listProjChargeAdditional: listProjChargeAdditional
|
||
},
|
||
onBefore() {
|
||
setLoading(true);
|
||
},
|
||
onSuccess({ data }) {
|
||
setIsEditModalOpen(true);
|
||
setCreateProjId(data.data);
|
||
reloadUser(messageApi, globalDispatchContext).then(() => {
|
||
messageApi.success('扣款成功');
|
||
});
|
||
},
|
||
onFinally() {
|
||
setLoading(false);
|
||
}
|
||
})
|
||
}}
|
||
onCancel={() => {
|
||
setIsCreateModalOpen(false);
|
||
}}>
|
||
<div>该操作会扣除 {chargePrice / 100} 元，确定操作码？</div>
|
||
</Modal>
|
||
<Modal title="提示"
|
||
okText="确定"
|
||
cancelText="取消"
|
||
open={isEditModalOpen}
|
||
onOk={() => {
|
||
if (pathParams.projChargeType == ProjChargeType.ALL) {
|
||
nav(`/proj-eall/${createProjId}`);
|
||
} else if (pathParams.projChargeType == ProjChargeType.FREE) {
|
||
nav(`/proj-efree/${createProjId}`);
|
||
} else {
|
||
nav(`/proj-edit/${createProjId}`);
|
||
}
|
||
}}
|
||
onCancel={() => {
|
||
setIsEditModalOpen(false);
|
||
}}>
|
||
<div>项目创建成功，开始编辑项目？</div>
|
||
</Modal>
|
||
<Spin tip="正在提交..." spinning={loading} fullscreen />
|
||
</>
|
||
)
|
||
} |