402 lines
19 KiB
TypeScript
402 lines
19 KiB
TypeScript
import './proj-new.css';
|
||
import { useNavigate, useParams, useSearchParams } from "react-router-dom";
|
||
import { Button, Flex, Form, Input, message, Modal, Spin, Checkbox, DatePicker } from "antd";
|
||
import { useContext, useEffect, useState } from "react";
|
||
import { get, post } from "../../util/AjaxUtils.ts";
|
||
// import {GlobalContext} from "../../context/GlobalContext.ts";
|
||
import {
|
||
// IProjCharge,
|
||
ProjAdditionalType, ProjChargeType
|
||
} from "../../interfaces/proj/IProj.ts";
|
||
import locale from 'antd/es/date-picker/locale/zh_CN';
|
||
import { GlobalDispatchContext, reloadUser } from "../../context/GlobalContext.ts";
|
||
import BelongPeople from '../../components/BelongPeople/BelongPeople.tsx'
|
||
import ContactPeople from '../../components/ContactPeople/ContactPeople.tsx'
|
||
import dayjs from 'dayjs';
|
||
// const { TextArea } = Input;
|
||
type ProjInfo = {
|
||
projName: string;
|
||
projIntroduction: string;
|
||
belongPeople: string;
|
||
contacts: string;
|
||
projDevCompleteDate: string;
|
||
};
|
||
|
||
export default function ProjNew() {
|
||
// const globalContext = useContext(GlobalContext);
|
||
const dateFormat = 'YYYY年MM月DD日';
|
||
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: '',
|
||
belongPeople: '',
|
||
contacts: '',
|
||
projDevCompleteDate: '',
|
||
});
|
||
const [form] = Form.useForm<ProjInfo>();
|
||
// 所属者弹窗
|
||
const [belongModal, setBelongModal] = useState(false)
|
||
// 联系人弹窗
|
||
const [concatModal, setConcatModal] = useState(false)
|
||
// const [belongPeopleName ,setBelongPeopleName] = useState('')
|
||
const [belongPeopleInfo, setBelongPeopleInfo] = useState({
|
||
authorName: '',
|
||
authorType: '',
|
||
authorIdCardType: '',
|
||
authorIdCard: '',
|
||
authorCrcAccount: '',
|
||
authorId: '',
|
||
authorProvinceCity: ''
|
||
})
|
||
const [concatPeopleInfo, setConcatPeopleInfo] = useState({
|
||
applyConcatId: '',
|
||
applyContactCsaNo: '',
|
||
applyContactEmail: '',
|
||
applyContactName: '',
|
||
applyContactPhone: '',
|
||
applyContactCompany: ''
|
||
})
|
||
const setValue = (value: string) => {
|
||
form.setFieldsValue({
|
||
belongPeople: value
|
||
})
|
||
}
|
||
const setConcatValue = (value: string) => {
|
||
form.setFieldsValue({
|
||
contacts: value
|
||
})
|
||
}
|
||
const [createProjId, setCreateProjId] = useState('');
|
||
const oldlistProjChargeAdditional: string[] = [];
|
||
const [listProjChargeAdditional, setlistProjChargeAdditional] = useState<string[]>([])
|
||
useEffect(() => {
|
||
get({
|
||
messageApi: messageApi,
|
||
url: '/api/proj/charge/get',
|
||
onSuccess({ data }) {
|
||
// console.log(data);
|
||
|
||
const charge = data as any;
|
||
// console.log('创建页price',charge.proj.materialAgent);
|
||
|
||
let price = 0;
|
||
switch (pathParams.projChargeType) {
|
||
case ProjChargeType.ALL:
|
||
// price = charge.proj.all;
|
||
price = charge.projTypes[0].price;
|
||
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.projTypes[1].price;
|
||
break;
|
||
case ProjChargeType.FREE:
|
||
price = charge.projTypes[2].price;
|
||
break;
|
||
default:
|
||
messageApi.error({
|
||
type: 'error',
|
||
content: '价格类型错误',
|
||
})
|
||
}
|
||
const pkg = queryParams.get('pkg') == 'true' ? true : false
|
||
const videoDemo = queryParams.get('videoDemo') == 'true' ? true : false
|
||
const urgent = queryParams.get('urgent') == '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);
|
||
|
||
}
|
||
if(urgent){
|
||
price += charge.additional.urgent;
|
||
oldlistProjChargeAdditional.push(ProjAdditionalType.URGENT);
|
||
// 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"
|
||
form={form}
|
||
layout={'vertical'}
|
||
labelCol={{ span: 24 }}
|
||
wrapperCol={{ span: 24 }}
|
||
style={{ width: '100%' }}
|
||
onFinish={(formData) => {
|
||
setIsCreateModalOpen(true);
|
||
setProjInfo({
|
||
projName: formData.projName,
|
||
projIntroduction: formData.projIntroduction,
|
||
belongPeople: formData.belongPeople,
|
||
contacts: formData.contacts,
|
||
projDevCompleteDate: formData.projDevCompleteDate,
|
||
})
|
||
}}
|
||
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: '800px', height: '50px', fontSize: '16px' }} placeholder="请输入系统全称" />
|
||
</Form.Item>
|
||
</div>
|
||
<div className='formItemOne' style={{ marginTop: 20, position: 'relative' }}>
|
||
<div className='formItem-title '>
|
||
知识产权所属者*
|
||
</div>
|
||
<Form.Item<ProjInfo>
|
||
name="belongPeople"
|
||
rules={[{ required: true, message: '请选择/创建知识产权所属者' }]}
|
||
>
|
||
<Input style={{ background: '#eeeeee', width: '800px', height: '50px', fontSize: '16px', color: '#3B3B3B' }} placeholder="请选择/创建知识产权所属者" disabled />
|
||
|
||
</Form.Item>
|
||
<div style={{ position: 'absolute', right: 23, fontSize: 16, color: " #1F79FF", cursor: 'pointer' }} onClick={() => {
|
||
setBelongModal(true)
|
||
}}>选择</div>
|
||
</div>
|
||
<div className='formItemOne' style={{ marginTop: 20, position: 'relative' }}>
|
||
<div className='formItem-title '>
|
||
知识产权联系人*
|
||
</div>
|
||
<Form.Item<ProjInfo>
|
||
name="contacts"
|
||
rules={[{ required: true, message: '请选择/创建知识产权联系人' }]}
|
||
>
|
||
<Input style={{ background: '#eeeeee', width: '800px', height: '50px', fontSize: '16px', color: '#3B3B3B' }} placeholder="请选择/创建知识产权联系人" disabled />
|
||
|
||
</Form.Item>
|
||
<div style={{ position: 'absolute', right: 23, fontSize: 16, color: " #1F79FF", cursor: 'pointer' }} onClick={() => {
|
||
setConcatModal(true)
|
||
}}>选择</div>
|
||
</div>
|
||
<div className='formItemOne' style={{ marginTop: 20}}>
|
||
<div className='formItem-title '>
|
||
开发完成时间*
|
||
</div>
|
||
<Form.Item<ProjInfo>
|
||
// label="开发完成时间"
|
||
name="projDevCompleteDate"
|
||
rules={[{ required: true, message: '请输入开发完成时间' }]}
|
||
>
|
||
<DatePicker placeholder="请选择开发完成日期"
|
||
format={dateFormat}
|
||
locale={locale}
|
||
// style={{ width: '100%' }}
|
||
style={{ height: '50px', width: '800px', fontSize: 16, background: '#eeeeee', }}
|
||
|
||
/>
|
||
</Form.Item>
|
||
</div>
|
||
<div className='software-protocol'>
|
||
<Form.Item
|
||
name="agreement"
|
||
valuePropName="checked"
|
||
rules={[
|
||
{
|
||
validator: (_, value) =>
|
||
value ? Promise.resolve() : Promise.reject(new Error('请阅读并勾选《软件委托开发协议》')),
|
||
},
|
||
]}
|
||
>
|
||
<Checkbox>
|
||
我同意平台 <a onClick={() => {
|
||
window.open('https://www.aimzhu.com/Seda.html')
|
||
}}>《软件委托开发协议》</a>
|
||
</Checkbox>
|
||
</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: '' }}>
|
||
<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'
|
||
// }}
|
||
// onClick={()=>{
|
||
// alert(belongPeopleInfo.authorProvinceCity)
|
||
// }}
|
||
>
|
||
保存并付款
|
||
</Button>
|
||
|
||
</Flex>
|
||
</Form.Item>
|
||
</div>
|
||
</Form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<Modal title="提示"
|
||
okText="确定"
|
||
cancelText="取消"
|
||
open={isCreateModalOpen}
|
||
onOk={() => {
|
||
// console.log('最终',listProjChargeAdditional);
|
||
// console.log(belongPeopleInfo.authorId);
|
||
|
||
post<any>({
|
||
messageApi,
|
||
url: '/api/proj/create',
|
||
body: {
|
||
projName: projInfo.projName,
|
||
projChargeType: pathParams.projChargeType,
|
||
listProjChargeAdditional: listProjChargeAdditional,
|
||
// dayjs(formInfo.getFieldValue('projDevCompleteDate')).format(dateFormat),
|
||
projDevCompleteDate:dayjs(projInfo.projDevCompleteDate).format(dateFormat),
|
||
authorCrcAccount: belongPeopleInfo.authorCrcAccount,
|
||
authorId: belongPeopleInfo.authorId,
|
||
authorIdCard: belongPeopleInfo.authorIdCard,
|
||
authorIdCardType: belongPeopleInfo.authorIdCardType,
|
||
authorName: belongPeopleInfo.authorName,
|
||
authorProvinceCity: belongPeopleInfo.authorProvinceCity,
|
||
authorType: belongPeopleInfo.authorType,
|
||
|
||
applyContactCompany:concatPeopleInfo.applyContactCompany,
|
||
applyContactCsaNo:concatPeopleInfo.applyContactCsaNo,
|
||
applyContactEmail:concatPeopleInfo.applyContactEmail,
|
||
applyContactId:concatPeopleInfo.applyConcatId,
|
||
applyContactName:concatPeopleInfo.applyContactName,
|
||
applyContactPhone:concatPeopleInfo.applyContactPhone,
|
||
projVersion:'v1.0'
|
||
},
|
||
onBefore() {
|
||
setLoading(true);
|
||
},
|
||
onSuccess({ data }) {
|
||
setIsEditModalOpen(true);
|
||
setCreateProjId(data.data);
|
||
reloadUser(messageApi, globalDispatchContext).then(() => {
|
||
messageApi.success('扣款成功');
|
||
});
|
||
},
|
||
onFinally() {
|
||
setLoading(false);
|
||
}
|
||
})
|
||
|
||
|
||
setIsCreateModalOpen(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>
|
||
<Modal title="选择联系人"
|
||
destroyOnClose
|
||
|
||
open={concatModal}
|
||
width={1200}
|
||
|
||
footer={null}
|
||
onCancel={() => {
|
||
setConcatModal(false)
|
||
|
||
}}>
|
||
|
||
<ContactPeople isShow={true} closeModal={() => { setConcatModal(false) }} setConcatPeopleInfo={setConcatPeopleInfo} concatPeopleInfo={concatPeopleInfo} setConcatValue={setConcatValue}></ContactPeople>
|
||
</Modal>
|
||
<Modal title="选择所属者"
|
||
destroyOnClose
|
||
|
||
open={belongModal}
|
||
width={1200}
|
||
|
||
footer={null}
|
||
onCancel={() => {
|
||
setBelongModal(false)
|
||
|
||
}}>
|
||
|
||
<BelongPeople closeModal={() => { setBelongModal(false) }} setBelongPeopleInfo={setBelongPeopleInfo} belongPeopleInfo={belongPeopleInfo} setValue={setValue} isShow={true}></BelongPeople>
|
||
</Modal>
|
||
<Spin tip="正在提交..." spinning={loading} fullscreen />
|
||
</>
|
||
)
|
||
} |