完善编辑步骤
This commit is contained in:
parent
c83637d1bc
commit
e65e2168fe
@ -1,17 +1,28 @@
|
||||
import './card-proj-edit.css';
|
||||
import {IProjEdit} from "../../interfaces/card/ICardProj.ts";
|
||||
import {EditStepEnum, IProjEdit} from "../../interfaces/card/ICardProj.ts";
|
||||
|
||||
export default function CardProjEdit(props: IProjEdit) {
|
||||
|
||||
const renderBtn = () => {
|
||||
if (props.canBtnClick == false) {
|
||||
return <a href="/#" className="edit" style={{color: 'var(--color-border)'}} onClick={(e) => {
|
||||
e.preventDefault();
|
||||
}}>{props.btnName ? props.btnName : '编辑'}</a>
|
||||
} else {
|
||||
return <a href="/#" className="edit" onClick={(e) => {
|
||||
e.preventDefault();
|
||||
props.handleEdit();
|
||||
}}>{props.btnName ? props.btnName : '编辑'}</a>
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="card-proj-edit">
|
||||
<div className="title">{props.title}</div>
|
||||
<div className="desc">{props.desc}</div>
|
||||
<div className="option">
|
||||
<a href="/#" className="edit" onClick={(e) => {
|
||||
e.preventDefault();
|
||||
props.handleEdit();
|
||||
}}>编辑</a>
|
||||
<span className="status"></span>
|
||||
{renderBtn()}
|
||||
{props.status == EditStepEnum.EDITED ? <span className="status"></span> : <></>}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -5,7 +5,6 @@ import {Input, Pagination, message} from 'antd';
|
||||
import type {SearchProps} from 'antd/es/input/Search';
|
||||
import {get} from "../../util/AjaxUtils.ts";
|
||||
|
||||
|
||||
const {Search} = Input;
|
||||
|
||||
const onSearch: SearchProps['onSearch'] = (value, _e, info) => {
|
||||
|
||||
@ -1,6 +1,15 @@
|
||||
export enum EditStepEnum {
|
||||
EDITED = 'EDITED',
|
||||
UN_EDIT = 'UN_EDIT'
|
||||
}
|
||||
|
||||
export interface IProjEdit {
|
||||
title: string;
|
||||
desc?: string;
|
||||
step?: number;
|
||||
status: EditStepEnum;
|
||||
btnName?: string;
|
||||
canBtnClick?: boolean;
|
||||
|
||||
handleEdit(): void;
|
||||
}
|
||||
|
||||
6
src/interfaces/dict/IDict.ts
Normal file
6
src/interfaces/dict/IDict.ts
Normal file
@ -0,0 +1,6 @@
|
||||
export interface ITree {
|
||||
id: string;
|
||||
pId: string;
|
||||
name: string;
|
||||
isParent: boolean;
|
||||
}
|
||||
21
src/interfaces/proj/IEnv.ts
Normal file
21
src/interfaces/proj/IEnv.ts
Normal file
@ -0,0 +1,21 @@
|
||||
export interface IEnvHard {
|
||||
content:string;
|
||||
projEnvHardId: string;
|
||||
type: string;
|
||||
}
|
||||
|
||||
export interface IEnvSoft {
|
||||
content:string;
|
||||
projEnvSoftId: string;
|
||||
type: string;
|
||||
}
|
||||
|
||||
export interface IEnvLang {
|
||||
content:string;
|
||||
projEnvLangId: string;
|
||||
}
|
||||
|
||||
export interface IEnvTechnical {
|
||||
content:string;
|
||||
projEnvTechnicalId: string;
|
||||
}
|
||||
@ -5,27 +5,47 @@ import ProjCreate from "../../route/proj/ProjCreate.tsx";
|
||||
import ProjNew from "../../route/proj/ProjNew.tsx";
|
||||
import ProjEdit from "../../route/proj/ProjEdit.tsx";
|
||||
import AgentSelect from "../../route/agent/AgentSelect.tsx";
|
||||
import ProjEditStep1 from "../../route/proj/edit/ProjEditStep1.tsx";
|
||||
import ProjEditStep2 from "../../route/proj/edit/ProjEditStep2.tsx";
|
||||
import ProjEditStep3 from "../../route/proj/edit/ProjEditStep3.tsx";
|
||||
import ProjEditStep4 from "../../route/proj/edit/ProjEditStep4.tsx";
|
||||
|
||||
const router = createBrowserRouter([
|
||||
{
|
||||
path: '/',
|
||||
element: <Index />
|
||||
element: <Index/>
|
||||
},
|
||||
{
|
||||
path: '/proj-create',
|
||||
element: <ProjCreate />
|
||||
element: <ProjCreate/>
|
||||
},
|
||||
{
|
||||
path: '/proj-new/:projChargeType',
|
||||
element: <ProjNew />
|
||||
element: <ProjNew/>
|
||||
},
|
||||
{
|
||||
path: '/proj-edit/:projId',
|
||||
element: <ProjEdit />
|
||||
element: <ProjEdit/>
|
||||
},
|
||||
{
|
||||
path: '/proj-edit/step1/:projId',
|
||||
element: <ProjEditStep1/>
|
||||
},
|
||||
{
|
||||
path: '/proj-edit/step2/:projId',
|
||||
element: <ProjEditStep2/>
|
||||
},
|
||||
{
|
||||
path: '/proj-edit/step3/:projId',
|
||||
element: <ProjEditStep3/>
|
||||
},
|
||||
{
|
||||
path: '/proj-edit/step4/:projId',
|
||||
element: <ProjEditStep4/>
|
||||
},
|
||||
{
|
||||
path: '/agent-select/:projId',
|
||||
element: <AgentSelect />
|
||||
element: <AgentSelect/>
|
||||
}
|
||||
])
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import './proj-edit.css';
|
||||
import {Link, useNavigate} from "react-router-dom";
|
||||
import {Breadcrumb, Button} from "antd";
|
||||
import {Link, useNavigate, useParams} from "react-router-dom";
|
||||
import {Breadcrumb, Button, message} from "antd";
|
||||
import StepProjEdit from "../../components/step/StepProjEdit.tsx";
|
||||
import CardProjEdit from "../../components/card/CardProjEdit.tsx";
|
||||
import {Process} from "../../interfaces/step/IStepProj.ts";
|
||||
@ -8,13 +8,130 @@ import CardProjLoading from "../../components/card/CardProjLoading.tsx";
|
||||
import CardProjResult from "../../components/card/CardProjResult.tsx";
|
||||
import CardProjDownload from "../../components/card/CardProjDownload.tsx";
|
||||
import CardProjJump from "../../components/card/CardProjJump.tsx";
|
||||
import {useEffect, useState} from "react";
|
||||
import {get} from "../../util/AjaxUtils.ts";
|
||||
import {EditStepEnum, IProjEdit} from "../../interfaces/card/ICardProj.ts";
|
||||
|
||||
|
||||
export default function ProjEdit() {
|
||||
const nav = useNavigate();
|
||||
const pathParams = useParams();
|
||||
|
||||
const [messageApi, contextHolder] = message.useMessage();
|
||||
const [editStepArray, setEditStepArray] = useState<IProjEdit[]>([]);
|
||||
const [configArray, setConfigArray] = useState<IProjEdit[]>([]);
|
||||
const [isAllStepEdited, setIsAllStepEdited] = useState(false);
|
||||
const [isAllConfig, setIsAllConfig] = useState(false);
|
||||
const [canGenerate, setCanGenerate] = useState(false);
|
||||
const height = window.innerHeight - 240;
|
||||
|
||||
const renderEditStep = (editSteps: any[]) => {
|
||||
const editStepArray: IProjEdit[] = [];
|
||||
editStepArray.push(
|
||||
{
|
||||
title: '标题简介',
|
||||
desc: '完善代码、样式类型和详细介绍等内容',
|
||||
step: 1,
|
||||
status: editSteps[0].editStatus,
|
||||
handleEdit() {
|
||||
nav(`/proj-edit/step1/${pathParams.projId}`)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '基本信息',
|
||||
desc: '完善项目简介、编程语言、版本、公司等内容',
|
||||
step: 2,
|
||||
status: editSteps[1].editStatus,
|
||||
handleEdit() {
|
||||
nav(`/proj-edit/step2/${pathParams.projId}`)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '软件功能特点',
|
||||
desc: '请完善软件功能特点',
|
||||
step: 3,
|
||||
status: editSteps[2].editStatus,
|
||||
handleEdit() {
|
||||
nav(`/proj-edit/step3/${pathParams.projId}`)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '著作人信息',
|
||||
desc: '请完善著作人相关信息',
|
||||
step: 4,
|
||||
status: editSteps[3].editStatus,
|
||||
handleEdit() {
|
||||
nav(`/proj-edit/step4/${pathParams.projId}`)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '申请人信息',
|
||||
desc: '请完善申请人信息',
|
||||
step: 5,
|
||||
status: editSteps[4].editStatus,
|
||||
handleEdit() {
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '选择登录页面',
|
||||
desc: '选择软件的登录页面模板',
|
||||
step: 6,
|
||||
status: editSteps[5].editStatus,
|
||||
handleEdit() {
|
||||
}
|
||||
}
|
||||
)
|
||||
setEditStepArray(editStepArray);
|
||||
}
|
||||
|
||||
const renderSetting = () => {
|
||||
const configArray: IProjEdit[] = [];
|
||||
configArray.push(
|
||||
{
|
||||
title: '登录界面设置',
|
||||
desc: '请对登录界面完成个性化设置',
|
||||
step: 1,
|
||||
btnName: '设置',
|
||||
status: EditStepEnum.UN_EDIT,
|
||||
handleEdit() {
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '系统菜单管理',
|
||||
desc: '请对系统菜单进行设置',
|
||||
step: 2,
|
||||
btnName: '设置',
|
||||
status: EditStepEnum.UN_EDIT,
|
||||
handleEdit() {
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '菜单顺序',
|
||||
desc: '调整菜单顺序',
|
||||
step: 3,
|
||||
btnName: '设置',
|
||||
status: EditStepEnum.UN_EDIT,
|
||||
handleEdit() {
|
||||
}
|
||||
}
|
||||
)
|
||||
setConfigArray(configArray);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
get({
|
||||
messageApi: messageApi,
|
||||
url: `/api/proj/get/${pathParams.projId}`,
|
||||
onSuccess({data}) {
|
||||
renderEditStep(data.editSteps);
|
||||
renderSetting();
|
||||
}
|
||||
})
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
{contextHolder}
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{title: <Link to={'/'}>首页</Link>},
|
||||
@ -24,26 +141,46 @@ export default function ProjEdit() {
|
||||
/>
|
||||
<div className="proj-edit" style={{height: `${height}px`}}>
|
||||
<StepProjEdit step={1} process={Process.COMPLETE} descTitle="完善信息"
|
||||
descDetail="123123123123123123123123123123123123123123123123"
|
||||
descDetail="完善项目的基本信息"
|
||||
hasNext={true}>
|
||||
<CardProjEdit title="软件基本信息"
|
||||
desc="请完善软件的介绍、详介绍等基本信息"
|
||||
handleEdit={() => {
|
||||
|
||||
}}
|
||||
{
|
||||
editStepArray.map((item, index) => {
|
||||
return <CardProjEdit key={`editStep-${index}`}
|
||||
title={item.title}
|
||||
desc={item.desc}
|
||||
status={item.status}
|
||||
handleEdit={item.handleEdit}
|
||||
/>
|
||||
</StepProjEdit>
|
||||
<StepProjEdit step={2} process={Process.PROCESSING} descTitle="功能设置" hasNext={true}>
|
||||
<CardProjEdit title="软件基本信息"
|
||||
desc="请完善软件的介绍、详介绍等基本信息"
|
||||
handleEdit={() => {
|
||||
})
|
||||
}
|
||||
|
||||
</StepProjEdit>
|
||||
<StepProjEdit step={2} process={Process.PROCESSING} descTitle="功能设置"
|
||||
descDetail="设置系统的菜单功能" hasNext={true}>
|
||||
{
|
||||
configArray.map((item, index) => {
|
||||
return <CardProjEdit key={`config-${index}`}
|
||||
title={item.title}
|
||||
desc={item.desc}
|
||||
btnName={item.btnName}
|
||||
status={item.status}
|
||||
handleEdit={item.handleEdit}
|
||||
/>
|
||||
})
|
||||
}
|
||||
<CardProjJump title="预览系统"
|
||||
desc="点击查看预览系统"
|
||||
handleJump={() => {
|
||||
nav('/agent-select/2');
|
||||
}}
|
||||
/>
|
||||
</StepProjEdit>
|
||||
<StepProjEdit step={3} process={Process.PENDING} descTitle="资料生成" hasNext={true}>
|
||||
<CardProjEdit title="软件基本信息"
|
||||
desc="请完善软件的介绍、详介绍等基本信息"
|
||||
<CardProjEdit title="资料生成"
|
||||
desc="生成软著所需要的资料，此操作后项目无法再次编辑"
|
||||
btnName="生成"
|
||||
status={EditStepEnum.UN_EDIT}
|
||||
canBtnClick={canGenerate}
|
||||
handleEdit={() => {
|
||||
console.log('编辑')
|
||||
}}
|
||||
@ -74,10 +211,16 @@ export default function ProjEdit() {
|
||||
</StepProjEdit>
|
||||
</div>
|
||||
<div className="btn-container">
|
||||
<Button size="large" style={{width: '200px', fontSize: '14px', backgroundColor: 'var(--color-primary)', color: 'var(--color-light)'}} onClick={() => {
|
||||
<Button size="large" style={{
|
||||
width: '200px',
|
||||
fontSize: '14px',
|
||||
backgroundColor: 'var(--color-primary)',
|
||||
color: 'var(--color-light)'
|
||||
}} onClick={() => {
|
||||
nav(-1);
|
||||
}}>返回</Button>
|
||||
</div>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -27,8 +27,8 @@ export default function ProjNew() {
|
||||
projName: '',
|
||||
projIntroduction: '',
|
||||
});
|
||||
const [createProjId, setCreateProjId] = useState('');
|
||||
const listProjChargeAdditional: string[] = [];
|
||||
let createProjId = '';
|
||||
|
||||
useEffect(() => {
|
||||
get({
|
||||
@ -72,10 +72,6 @@ export default function ProjNew() {
|
||||
})
|
||||
}, []);
|
||||
|
||||
const onBack = () => {
|
||||
nav(-1);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{contextHolder}
|
||||
@ -128,7 +124,9 @@ export default function ProjNew() {
|
||||
style={{backgroundColor: 'var(--color-primary)'}}>
|
||||
提交并付款
|
||||
</Button>
|
||||
<Button type="default" htmlType="button" onClick={onBack}>
|
||||
<Button type="default" htmlType="button" onClick={() => {
|
||||
nav(-1);
|
||||
}}>
|
||||
返回上一级
|
||||
</Button>
|
||||
</Flex>
|
||||
@ -157,7 +155,7 @@ export default function ProjNew() {
|
||||
},
|
||||
onSuccess({data}) {
|
||||
setIsEditModalOpen(true);
|
||||
createProjId = data.data;
|
||||
setCreateProjId(data.data);
|
||||
},
|
||||
onFinally() {
|
||||
setLoading(false);
|
||||
|
||||
198
src/route/proj/edit/ProjEditStep1.tsx
Normal file
198
src/route/proj/edit/ProjEditStep1.tsx
Normal file
@ -0,0 +1,198 @@
|
||||
import './proj-edit-step.css';
|
||||
import {Breadcrumb, Col, Flex, message, Modal, Row, Select, Spin} from "antd";
|
||||
import {Link, useNavigate, useParams} from "react-router-dom";
|
||||
import {useEffect, useState} from "react";
|
||||
import {get, put} from "../../../util/AjaxUtils.ts";
|
||||
import {Button, Form, Input} from 'antd';
|
||||
import {AxiosResponse} from "axios";
|
||||
|
||||
const {TextArea} = Input;
|
||||
|
||||
type FieldType = {
|
||||
projName: string;
|
||||
projIntroduction: string;
|
||||
projStyleType: string;
|
||||
projCodeType: string;
|
||||
projDesc: string;
|
||||
};
|
||||
|
||||
export default function ProjEditStep1() {
|
||||
const nav = useNavigate();
|
||||
const pathParams = useParams();
|
||||
const [messageApi, contextHolder] = message.useMessage();
|
||||
const [form] = Form.useForm<FieldType>();
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
|
||||
const height = window.innerHeight - 180;
|
||||
|
||||
useEffect(() => {
|
||||
get({
|
||||
messageApi,
|
||||
url: `/api/proj/get/edit-step1/${pathParams.projId}`,
|
||||
onSuccess({data}: AxiosResponse) {
|
||||
form.setFieldsValue({
|
||||
projName: data.projName,
|
||||
projIntroduction: data.projIntroduction,
|
||||
projStyleType: data.projStyleType,
|
||||
projCodeType: data.projCodeType,
|
||||
projDesc: data.projDesc
|
||||
})
|
||||
}
|
||||
})
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
{contextHolder}
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{title: <Link to={'/'}>首页</Link>},
|
||||
{title: <Link to={'/proj-create'}>创建项目</Link>},
|
||||
{title: <Link to={`/proj-edit/${pathParams.projId}`}>编辑项目</Link>},
|
||||
{title: '标题简介'},
|
||||
]}
|
||||
/>
|
||||
<div className="form-container" style={{height: `${height}px`}}>
|
||||
<div className="form-body">
|
||||
<Form
|
||||
name="basic"
|
||||
form={form}
|
||||
layout="vertical"
|
||||
labelCol={{span: 8}}
|
||||
wrapperCol={{span: 24}}
|
||||
style={{width: '600px'}}
|
||||
onFinish={() => {
|
||||
setIsEditModalOpen(true);
|
||||
}}
|
||||
autoComplete="off"
|
||||
>
|
||||
<Row gutter={15}>
|
||||
<Col span={24}>
|
||||
<Form.Item<FieldType>
|
||||
label="项目名称"
|
||||
name="projName"
|
||||
rules={[{required: true, message: '请输入项目名称'}]}
|
||||
>
|
||||
<Input/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={15}>
|
||||
<Col span={24}>
|
||||
<Form.Item<FieldType>
|
||||
label="项目简介"
|
||||
name="projIntroduction"
|
||||
rules={[{required: true, message: '请输入项目简介'}]}
|
||||
>
|
||||
<TextArea rows={3} placeholder="请用一段话简单描述系统"/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={15}>
|
||||
<Col span={12}>
|
||||
<Form.Item<FieldType>
|
||||
label="样式类型"
|
||||
name="projStyleType"
|
||||
rules={[{required: true, message: '请选择样式类型'}]}
|
||||
>
|
||||
<Select
|
||||
placeholder="请选择样式类型"
|
||||
onChange={(value: string) => {
|
||||
console.log(`selected ${value}`);
|
||||
}}
|
||||
options={[
|
||||
{value: 'DEFAULT', label: '默认(WEB)'},
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item<FieldType>
|
||||
label="代码类型"
|
||||
name="projCodeType"
|
||||
rules={[{required: true, message: '请选择代码类型'}]}
|
||||
>
|
||||
<Select
|
||||
placeholder="请选择代码类型"
|
||||
onChange={(value: string) => {
|
||||
console.log(`selected ${value}`);
|
||||
}}
|
||||
options={[
|
||||
{value: 'code1', label: '默认类型'},
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={15}>
|
||||
<Col span={24}>
|
||||
<Form.Item<FieldType>
|
||||
label="项目详细介绍"
|
||||
name="projDesc"
|
||||
extra="请对项目做出详细介绍，此内容在操作手册中引用"
|
||||
rules={[{required: true, message: '请输入项目详细介绍'}]}
|
||||
>
|
||||
<TextArea rows={8} placeholder="请输入项目详细介绍"/>
|
||||
</Form.Item>
|
||||
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
|
||||
<Form.Item wrapperCol={{span: 24}}>
|
||||
<Flex align="center" justify="center" gap="large">
|
||||
<Button type="primary"
|
||||
htmlType="submit"
|
||||
style={{backgroundColor: 'var(--color-primary)'}}>
|
||||
保存
|
||||
</Button>
|
||||
<Button type="default" htmlType="button" onClick={() => {
|
||||
nav(-1);
|
||||
}}>
|
||||
返回
|
||||
</Button>
|
||||
</Flex>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
<Modal title="提示"
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
open={isEditModalOpen}
|
||||
onOk={() => {
|
||||
setIsEditModalOpen(false);
|
||||
put({
|
||||
messageApi,
|
||||
url: `/api/proj/update/edit-step1/${pathParams.projId}`,
|
||||
body: {
|
||||
projName: form.getFieldValue('projName'),
|
||||
projIntroduction: form.getFieldValue('projIntroduction'),
|
||||
projStyleType: form.getFieldValue('projStyleType'),
|
||||
projCodeType: form.getFieldValue('projCodeType'),
|
||||
projDesc: form.getFieldValue('projDesc'),
|
||||
},
|
||||
onBefore() {
|
||||
setLoading(true);
|
||||
},
|
||||
onSuccess() {
|
||||
messageApi.open({
|
||||
type: 'success',
|
||||
content: '编辑成功'
|
||||
})
|
||||
},
|
||||
onFinally() {
|
||||
setLoading(false);
|
||||
}
|
||||
})
|
||||
}}
|
||||
onCancel={() => {
|
||||
setIsEditModalOpen(false);
|
||||
}}>
|
||||
<div>确定提交吗？</div>
|
||||
</Modal>
|
||||
<Spin tip="正在提交..." spinning={loading} fullscreen/>
|
||||
</>
|
||||
)
|
||||
|
||||
}
|
||||
187
src/route/proj/edit/ProjEditStep2.tsx
Normal file
187
src/route/proj/edit/ProjEditStep2.tsx
Normal file
@ -0,0 +1,187 @@
|
||||
import './proj-edit-step.css';
|
||||
import {Breadcrumb, Col, DatePicker, Flex, message, Modal, Row, Spin} from "antd";
|
||||
import locale from 'antd/es/date-picker/locale/zh_CN';
|
||||
import {Link, useNavigate, useParams} from "react-router-dom";
|
||||
import {useEffect, useState} from "react";
|
||||
import {get, put} from "../../../util/AjaxUtils.ts";
|
||||
import {Button, Form, Input} from 'antd';
|
||||
import {AxiosResponse} from "axios";
|
||||
import dayjs, {Dayjs} from 'dayjs';
|
||||
|
||||
type FieldType = {
|
||||
projSubName: string;
|
||||
projVersion: string;
|
||||
projDevCompleteDate: Dayjs;
|
||||
companyName: string;
|
||||
companyNameEn: string;
|
||||
};
|
||||
|
||||
export default function ProjEditStep2() {
|
||||
const nav = useNavigate();
|
||||
const pathParams = useParams();
|
||||
const [messageApi, contextHolder] = message.useMessage();
|
||||
const [form] = Form.useForm<FieldType>();
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
|
||||
const height = window.innerHeight - 180;
|
||||
const dateFormat = 'YYYY年MM月DD日';
|
||||
|
||||
useEffect(() => {
|
||||
get({
|
||||
messageApi,
|
||||
url: `/api/proj/get/edit-step2/${pathParams.projId}`,
|
||||
onSuccess({data}: AxiosResponse) {
|
||||
form.setFieldsValue({
|
||||
projSubName: data.projSubName,
|
||||
projVersion: data.projVersion,
|
||||
projDevCompleteDate: dayjs(data.projDevCompleteDate, 'YYYY-MM-DD'),
|
||||
companyName: data.companyName,
|
||||
companyNameEn: data.companyNameEn,
|
||||
})
|
||||
}
|
||||
})
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
{contextHolder}
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{title: <Link to={'/'}>首页</Link>},
|
||||
{title: <Link to={'/proj-create'}>创建项目</Link>},
|
||||
{title: <Link to={`/proj-edit/${pathParams.projId}`}>编辑项目</Link>},
|
||||
{title: '基本信息'},
|
||||
]}
|
||||
/>
|
||||
<div className="form-container" style={{height: `${height}px`}}>
|
||||
<div className="form-body">
|
||||
<Form
|
||||
name="basic"
|
||||
form={form}
|
||||
layout="vertical"
|
||||
labelCol={{span: 8}}
|
||||
wrapperCol={{span: 24}}
|
||||
style={{width: '800px'}}
|
||||
onFinish={() => {
|
||||
setIsEditModalOpen(true);
|
||||
}}
|
||||
autoComplete="off"
|
||||
>
|
||||
<Row gutter={15}>
|
||||
<Col span={24}>
|
||||
<Form.Item<FieldType>
|
||||
label="项目简称"
|
||||
name="projSubName"
|
||||
rules={[{required: false, message: '请输入项目简称'}]}
|
||||
>
|
||||
<Input placeholder="请输入项目简称"/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
|
||||
|
||||
</Row>
|
||||
<Row gutter={15}>
|
||||
<Col span={12}>
|
||||
<Form.Item<FieldType>
|
||||
label="项目版本"
|
||||
name="projVersion"
|
||||
rules={[{required: true, message: '请输入项目版本'}]}
|
||||
>
|
||||
<Input placeholder="请输入项目版本"/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item<FieldType>
|
||||
label="开发完成时间"
|
||||
name="projDevCompleteDate"
|
||||
rules={[{required: true, message: '请输入开发完成时间'}]}
|
||||
>
|
||||
<DatePicker placeholder="请选择开发完成日期"
|
||||
format={dateFormat}
|
||||
locale={locale}
|
||||
style={{width: '100%'}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row gutter={15}>
|
||||
<Col span={12}>
|
||||
<Form.Item<FieldType>
|
||||
label="公司名称"
|
||||
name="companyName"
|
||||
extra="公司名称在操作手册中引用"
|
||||
rules={[{required: true, message: '请输入公司名称'}]}
|
||||
>
|
||||
<Input placeholder="请输入公司名称"/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item<FieldType>
|
||||
label="公司英文名称"
|
||||
name="companyNameEn"
|
||||
extra="公司英文名称在操作手册中引用"
|
||||
rules={[{required: true, message: '请输入公司英文名称'}]}
|
||||
>
|
||||
<Input placeholder="请输入公司英文名称"/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Form.Item wrapperCol={{span: 24}}>
|
||||
<Flex align="center" justify="center" gap="large">
|
||||
<Button type="primary"
|
||||
htmlType="submit"
|
||||
style={{backgroundColor: 'var(--color-primary)'}}>
|
||||
保存
|
||||
</Button>
|
||||
<Button type="default" htmlType="button" onClick={() => {
|
||||
nav(-1);
|
||||
}}>
|
||||
返回
|
||||
</Button>
|
||||
</Flex>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
<Modal title="提示"
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
open={isEditModalOpen}
|
||||
onOk={() => {
|
||||
setIsEditModalOpen(false);
|
||||
put({
|
||||
messageApi,
|
||||
url: `/api/proj/update/edit-step2/${pathParams.projId}`,
|
||||
body: {
|
||||
projSubName: form.getFieldValue('projSubName'),
|
||||
projVersion: form.getFieldValue('projVersion'),
|
||||
projDevCompleteDate: dayjs(form.getFieldValue('projDevCompleteDate')).format(dateFormat),
|
||||
companyName: form.getFieldValue('companyName'),
|
||||
companyNameEn: form.getFieldValue('companyNameEn'),
|
||||
},
|
||||
onBefore() {
|
||||
setLoading(true);
|
||||
},
|
||||
onSuccess() {
|
||||
messageApi.open({
|
||||
type: 'success',
|
||||
content: '编辑成功'
|
||||
})
|
||||
},
|
||||
onFinally() {
|
||||
setLoading(false);
|
||||
}
|
||||
})
|
||||
}}
|
||||
onCancel={() => {
|
||||
setIsEditModalOpen(false);
|
||||
}}>
|
||||
<div>确定提交吗？</div>
|
||||
</Modal>
|
||||
<Spin tip="正在提交..." spinning={loading} fullscreen/>
|
||||
</>
|
||||
)
|
||||
|
||||
}
|
||||
310
src/route/proj/edit/ProjEditStep3.tsx
Normal file
310
src/route/proj/edit/ProjEditStep3.tsx
Normal file
@ -0,0 +1,310 @@
|
||||
import './proj-edit-step.css';
|
||||
import {Breadcrumb, Col, Flex, message, Modal, Row, Spin, Checkbox, Divider} from "antd";
|
||||
import {Link, useNavigate, useParams} from "react-router-dom";
|
||||
import {useEffect, useState} from "react";
|
||||
import {get, put} from "../../../util/AjaxUtils.ts";
|
||||
import {Button, Form, Input} from 'antd';
|
||||
import {AxiosResponse} from "axios";
|
||||
import {IEnvHard, IEnvLang, IEnvSoft, IEnvTechnical} from "../../../interfaces/proj/IEnv.ts";
|
||||
|
||||
const {TextArea} = Input;
|
||||
|
||||
type FieldType = {
|
||||
envHard: string;
|
||||
envHardCustom: string;
|
||||
envSoft: string;
|
||||
envSoftCustom: string;
|
||||
envLang: string;
|
||||
envLangCustom: string;
|
||||
envTechnical: string;
|
||||
envTechnicalCustom: string;
|
||||
};
|
||||
|
||||
type FormFieldType = {
|
||||
envHard: string[];
|
||||
envHardCustom: string;
|
||||
envSoft: string[];
|
||||
envSoftCustom: string;
|
||||
envLang: string[];
|
||||
envLangCustom: string;
|
||||
envTechnical: string[];
|
||||
envTechnicalCustom: string;
|
||||
};
|
||||
|
||||
export default function ProjEditStep3() {
|
||||
const nav = useNavigate();
|
||||
const pathParams = useParams();
|
||||
const [messageApi, contextHolder] = message.useMessage();
|
||||
const [form] = Form.useForm<FormFieldType>();
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
|
||||
const [envHardArray, setEnvHardArray] = useState<IEnvHard[]>([]);
|
||||
const [envSoftArray, setEnvSoftArray] = useState<IEnvSoft[]>([]);
|
||||
const [envLangArray, setEnvLangArray] = useState<IEnvLang[]>([]);
|
||||
const [envTechnicalArray, setEnvTechnicalArray] = useState<IEnvTechnical[]>([]);
|
||||
const height = window.innerHeight - 180;
|
||||
|
||||
const listEnvHard = () => {
|
||||
return new Promise<IEnvHard[]>((resolve) => {
|
||||
get({
|
||||
messageApi,
|
||||
url: '/api/proj-env-hard/list',
|
||||
onSuccess({data}) {
|
||||
resolve(data);
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
const listEnvSoft = () => {
|
||||
return new Promise<IEnvSoft[]>((resolve) => {
|
||||
get({
|
||||
messageApi,
|
||||
url: '/api/proj-env-soft/list',
|
||||
onSuccess({data}) {
|
||||
resolve(data);
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
const listEnvLang = () => {
|
||||
return new Promise<IEnvLang[]>((resolve) => {
|
||||
get({
|
||||
messageApi,
|
||||
url: '/api/proj/env/lang/list',
|
||||
onSuccess({data}) {
|
||||
resolve(data);
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
const listEnvTechnical = () => {
|
||||
return new Promise<IEnvTechnical[]>((resolve) => {
|
||||
get({
|
||||
messageApi,
|
||||
url: '/api/proj/env/technical/list',
|
||||
onSuccess({data}) {
|
||||
resolve(data);
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const getData = () => {
|
||||
return new Promise<FieldType>((resolve) => {
|
||||
get({
|
||||
messageApi,
|
||||
url: `/api/proj/get/edit-step3/${pathParams.projId}`,
|
||||
onSuccess({data}: AxiosResponse) {
|
||||
resolve(data);
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const render = async () => {
|
||||
const envHards = await listEnvHard();
|
||||
const envSofts = await listEnvSoft();
|
||||
const envLangs = await listEnvLang();
|
||||
const envTechnicals = await listEnvTechnical();
|
||||
const data = await getData();
|
||||
setEnvHardArray(envHards);
|
||||
setEnvSoftArray(envSofts);
|
||||
setEnvLangArray(envLangs);
|
||||
setEnvTechnicalArray(envTechnicals);
|
||||
|
||||
form.setFieldsValue({
|
||||
envHard: data.envHard.split(','),
|
||||
envHardCustom: data.envHardCustom,
|
||||
envSoft: data.envSoft.split(','),
|
||||
envSoftCustom: data.envSoftCustom,
|
||||
envLang: data.envLang.split(','),
|
||||
envLangCustom: data.envLangCustom,
|
||||
envTechnical: data.envTechnical.split(','),
|
||||
envTechnicalCustom: data.envTechnicalCustom,
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
render();
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
{contextHolder}
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{title: <Link to={'/'}>首页</Link>},
|
||||
{title: <Link to={'/proj-create'}>创建项目</Link>},
|
||||
{title: <Link to={`/proj-edit/${pathParams.projId}`}>编辑项目</Link>},
|
||||
{title: '软件功能特点'},
|
||||
]}
|
||||
/>
|
||||
<div className="form-container" style={{height: `${height}px`}}>
|
||||
<div className="form-body">
|
||||
<Form
|
||||
name="basic"
|
||||
form={form}
|
||||
layout="vertical"
|
||||
labelCol={{span: 8}}
|
||||
wrapperCol={{span: 24}}
|
||||
style={{width: '1000px'}}
|
||||
onFinish={() => {
|
||||
setIsEditModalOpen(true);
|
||||
}}
|
||||
autoComplete="off"
|
||||
>
|
||||
<Form.Item<FormFieldType>
|
||||
label="硬件环境"
|
||||
name="envHard"
|
||||
rules={[{required: true, message: '请选择硬件环境'}]}
|
||||
>
|
||||
<Checkbox.Group style={{width: '100%'}}>
|
||||
<Row>{envHardArray.map((item, index) => {
|
||||
return (
|
||||
<Col span={4} key={`envHard-${index}`}>
|
||||
<Checkbox value={item.projEnvHardId} style={{ lineHeight: '32px' }}>{item.type} - {item.content}</Checkbox>
|
||||
</Col>
|
||||
)
|
||||
})}</Row>
|
||||
</Checkbox.Group>
|
||||
</Form.Item>
|
||||
<Form.Item<FormFieldType>
|
||||
label="其他"
|
||||
name="envHardCustom"
|
||||
rules={[{required: false, message: '请输入其他硬件环境'}]}
|
||||
>
|
||||
<TextArea rows={3} placeholder="请输入其他硬件环境"/>
|
||||
</Form.Item>
|
||||
<Divider dashed />
|
||||
|
||||
<Form.Item<FormFieldType>
|
||||
label="软件环境"
|
||||
name="envSoft"
|
||||
rules={[{required: true, message: '请选择软件环境'}]}
|
||||
>
|
||||
<Checkbox.Group style={{width: '100%'}}>
|
||||
<Row>{envSoftArray.map((item, index) => {
|
||||
return (
|
||||
<Col span={4} key={`envHard-${index}`}>
|
||||
<Checkbox value={item.projEnvSoftId} style={{ lineHeight: '32px' }}>{item.type} - {item.content}</Checkbox>
|
||||
</Col>
|
||||
)
|
||||
})}</Row>
|
||||
</Checkbox.Group>
|
||||
</Form.Item>
|
||||
<Form.Item<FormFieldType>
|
||||
label="其他"
|
||||
name="envSoftCustom"
|
||||
rules={[{required: false, message: '请输入其他软件环境'}]}
|
||||
>
|
||||
<TextArea rows={3} placeholder="请输入其他软件环境"/>
|
||||
</Form.Item>
|
||||
<Divider dashed />
|
||||
|
||||
<Form.Item<FormFieldType>
|
||||
label="编程语言"
|
||||
name="envLang"
|
||||
rules={[{required: true, message: '请选择编程语言'}]}
|
||||
>
|
||||
<Checkbox.Group style={{width: '100%'}}>
|
||||
<Row>{envLangArray.map((item, index) => {
|
||||
return (
|
||||
<Col span={4} key={`envHard-${index}`}>
|
||||
<Checkbox value={item.projEnvLangId} style={{ lineHeight: '32px' }}>{item.content}</Checkbox>
|
||||
</Col>
|
||||
)
|
||||
})}</Row>
|
||||
</Checkbox.Group>
|
||||
</Form.Item>
|
||||
<Form.Item<FormFieldType>
|
||||
label="其他"
|
||||
name="envLangCustom"
|
||||
rules={[{required: false, message: '请输入其他编程语言'}]}
|
||||
>
|
||||
<TextArea rows={3} placeholder="请输入其他编程语言"/>
|
||||
</Form.Item>
|
||||
<Divider dashed />
|
||||
|
||||
<Form.Item<FormFieldType>
|
||||
label="技术特点"
|
||||
name="envTechnical"
|
||||
rules={[{required: true, message: '请选择编程语言'}]}
|
||||
>
|
||||
<Checkbox.Group style={{width: '100%'}}>
|
||||
<Row>{envTechnicalArray.map((item, index) => {
|
||||
return (
|
||||
<Col span={4} key={`envHard-${index}`}>
|
||||
<Checkbox value={item.projEnvTechnicalId} style={{ lineHeight: '32px' }}>{item.content}</Checkbox>
|
||||
</Col>
|
||||
)
|
||||
})}</Row>
|
||||
</Checkbox.Group>
|
||||
</Form.Item>
|
||||
<Form.Item<FormFieldType>
|
||||
label="其他"
|
||||
name="envTechnicalCustom"
|
||||
rules={[{required: false, message: '请输入其他技术特点'}]}
|
||||
>
|
||||
<TextArea rows={3} placeholder="请输入其他技术特点"/>
|
||||
</Form.Item>
|
||||
<Divider dashed />
|
||||
<Form.Item wrapperCol={{span: 24}}>
|
||||
<Flex align="center" justify="center" gap="large">
|
||||
<Button type="primary"
|
||||
htmlType="submit"
|
||||
style={{backgroundColor: 'var(--color-primary)'}}>
|
||||
保存
|
||||
</Button>
|
||||
<Button type="default" htmlType="button" onClick={() => {
|
||||
nav(-1);
|
||||
}}>
|
||||
返回
|
||||
</Button>
|
||||
</Flex>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
<Modal title="提示"
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
open={isEditModalOpen}
|
||||
onOk={() => {
|
||||
setIsEditModalOpen(false);
|
||||
put({
|
||||
messageApi,
|
||||
url: `/api/proj/update/edit-step3/${pathParams.projId}`,
|
||||
body: {
|
||||
envHard: form.getFieldValue('envHard').join(','),
|
||||
envHardCustom: form.getFieldValue('envHardCustom'),
|
||||
envSoft: form.getFieldValue('envSoft').join(','),
|
||||
envSoftCustom: form.getFieldValue('envSoftCustom'),
|
||||
envLang: form.getFieldValue('envLang').join(','),
|
||||
envLangCustom: form.getFieldValue('envLangCustom'),
|
||||
envTechnical: form.getFieldValue('envTechnical').join(','),
|
||||
envTechnicalCustom: form.getFieldValue('envTechnicalCustom'),
|
||||
},
|
||||
onBefore() {
|
||||
setLoading(true);
|
||||
},
|
||||
onSuccess() {
|
||||
messageApi.open({
|
||||
type: 'success',
|
||||
content: '编辑成功'
|
||||
})
|
||||
},
|
||||
onFinally() {
|
||||
setLoading(false);
|
||||
}
|
||||
})
|
||||
}}
|
||||
onCancel={() => {
|
||||
setIsEditModalOpen(false);
|
||||
}}>
|
||||
<div>确定提交吗？</div>
|
||||
</Modal>
|
||||
<Spin tip="正在提交..." spinning={loading} fullscreen/>
|
||||
</>
|
||||
)
|
||||
|
||||
}
|
||||
267
src/route/proj/edit/ProjEditStep4.tsx
Normal file
267
src/route/proj/edit/ProjEditStep4.tsx
Normal file
@ -0,0 +1,267 @@
|
||||
import './proj-edit-step.css';
|
||||
import {Breadcrumb, Cascader, Col, DatePicker, Flex, message, Modal, Row, Select, Spin} from "antd";
|
||||
import locale from 'antd/es/date-picker/locale/zh_CN';
|
||||
import {Link, useNavigate, useParams} from "react-router-dom";
|
||||
import {useEffect, useState} from "react";
|
||||
import {get, put} from "../../../util/AjaxUtils.ts";
|
||||
import {Button, Form, Input} from 'antd';
|
||||
import {AxiosResponse} from "axios";
|
||||
import dayjs, {Dayjs} from 'dayjs';
|
||||
import {ITree} from "../../../interfaces/dict/IDict.ts";
|
||||
|
||||
type FieldType = {
|
||||
authorName: string;
|
||||
authorIdCardType: string;
|
||||
authorIdCard: string;
|
||||
authorNation: string;
|
||||
authorProvince: string;
|
||||
authorEstablishDate: Dayjs;
|
||||
};
|
||||
|
||||
interface Option {
|
||||
value?: string | number | null;
|
||||
label: React.ReactNode;
|
||||
children?: Option[];
|
||||
isLeaf?: boolean;
|
||||
id: string;
|
||||
pId: string;
|
||||
}
|
||||
|
||||
export default function ProjEditStep2() {
|
||||
const nav = useNavigate();
|
||||
const pathParams = useParams();
|
||||
const [messageApi, contextHolder] = message.useMessage();
|
||||
const [form] = Form.useForm<FieldType>();
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
|
||||
const [areaArray, setAreaArray] = useState<Option[]>([]);
|
||||
const height = window.innerHeight - 180;
|
||||
const dateFormat = 'YYYY年MM月DD日';
|
||||
|
||||
const listArea = (pId: string) => {
|
||||
return new Promise<ITree[]>((resolve) => {
|
||||
get({
|
||||
messageApi,
|
||||
url: '/api/area/list-area-ztree',
|
||||
config: {
|
||||
params: {
|
||||
id: pId
|
||||
}
|
||||
},
|
||||
onSuccess({data}) {
|
||||
resolve(data);
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
get({
|
||||
messageApi,
|
||||
url: `/api/proj/get/edit-step4/${pathParams.projId}`,
|
||||
onSuccess({data}: AxiosResponse) {
|
||||
form.setFieldsValue({
|
||||
authorName: data.authorName,
|
||||
authorIdCardType: data.authorIdCardType ? data.authorIdCardType : 'BUSINESS_LICENSE',
|
||||
authorIdCard: data.authorIdCard,
|
||||
authorNation: data.authorNation ? data.authorNation : '中国',
|
||||
authorProvince: data.authorProvince ? data.authorProvince.split(',') : '',
|
||||
authorEstablishDate: dayjs(data.authorEstablishDate, 'YYYY-MM-DD'),
|
||||
})
|
||||
}
|
||||
})
|
||||
listArea('0').then(data => {
|
||||
const options: Option[] = data.map(item => {
|
||||
return {
|
||||
value: item.name,
|
||||
label: item.name,
|
||||
isLeaf: !item.isParent,
|
||||
id: item.id,
|
||||
pId: item.pId
|
||||
}
|
||||
})
|
||||
setAreaArray(options);
|
||||
});
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
{contextHolder}
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{title: <Link to={'/'}>首页</Link>},
|
||||
{title: <Link to={'/proj-create'}>创建项目</Link>},
|
||||
{title: <Link to={`/proj-edit/${pathParams.projId}`}>编辑项目</Link>},
|
||||
{title: '著作人信息'},
|
||||
]}
|
||||
/>
|
||||
<div className="form-container" style={{height: `${height}px`}}>
|
||||
<div className="form-body">
|
||||
<Form
|
||||
name="basic"
|
||||
form={form}
|
||||
layout="vertical"
|
||||
labelCol={{span: 8}}
|
||||
wrapperCol={{span: 24}}
|
||||
style={{width: '800px'}}
|
||||
onFinish={() => {
|
||||
setIsEditModalOpen(true);
|
||||
}}
|
||||
autoComplete="off"
|
||||
>
|
||||
<Row gutter={15}>
|
||||
<Col span={12}>
|
||||
<Form.Item<FieldType>
|
||||
label="姓名或公司名称"
|
||||
name="authorName"
|
||||
rules={[{required: true, message: '请输入姓名或公司名称'}]}
|
||||
>
|
||||
<Input placeholder="请输入姓名或公司名称"/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item<FieldType>
|
||||
label="成立日期"
|
||||
name="authorEstablishDate"
|
||||
rules={[{required: true, message: '请选择成立日期'}]}
|
||||
>
|
||||
<DatePicker placeholder="请选择成立日期"
|
||||
format={dateFormat}
|
||||
locale={locale}
|
||||
style={{width: '100%'}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={15}>
|
||||
<Col span={12}>
|
||||
<Form.Item<FieldType>
|
||||
label="证件类型"
|
||||
name="authorIdCardType"
|
||||
rules={[{required: true, message: '请选择证件类型'}]}
|
||||
>
|
||||
<Select
|
||||
placeholder="请选择样证件类型"
|
||||
onChange={(value: string) => {
|
||||
console.log(`selected ${value}`);
|
||||
}}
|
||||
options={[
|
||||
{value: 'BUSINESS_LICENSE', label: '营业执照'},
|
||||
{value: 'ID_CARD', label: '身份证'},
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item<FieldType>
|
||||
label="证件号"
|
||||
name="authorIdCard"
|
||||
rules={[{required: true, message: '请输入证件号'}]}
|
||||
>
|
||||
<Input placeholder="请输入证件号"/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={15}>
|
||||
<Col span={12}>
|
||||
<Form.Item<FieldType>
|
||||
label="国籍"
|
||||
name="authorNation"
|
||||
rules={[{required: true, message: '请选择国籍'}]}
|
||||
>
|
||||
<Select
|
||||
placeholder="请选择国籍"
|
||||
options={[
|
||||
{value: '中国', label: '中国'},
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item<FieldType>
|
||||
label="省市"
|
||||
name="authorProvince"
|
||||
rules={[{required: true, message: '请选择省市'}]}
|
||||
>
|
||||
<Cascader options={areaArray}
|
||||
loadData={(selectedOptions: Option[]) => {
|
||||
const targetOption = selectedOptions[selectedOptions.length - 1];
|
||||
listArea(targetOption.id).then(data => {
|
||||
targetOption.children = data.map(item => {
|
||||
return {
|
||||
value: item.name,
|
||||
label: item.name,
|
||||
isLeaf: !item.isParent,
|
||||
id: item.id,
|
||||
pId: item.pId
|
||||
}
|
||||
});
|
||||
setAreaArray([
|
||||
...areaArray
|
||||
])
|
||||
});
|
||||
}}
|
||||
placeholder="请选择省市"
|
||||
changeOnSelect/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Form.Item wrapperCol={{span: 24}}>
|
||||
<Flex align="center" justify="center" gap="large">
|
||||
<Button type="primary"
|
||||
htmlType="submit"
|
||||
style={{backgroundColor: 'var(--color-primary)'}}>
|
||||
保存
|
||||
</Button>
|
||||
<Button type="default" htmlType="button" onClick={() => {
|
||||
nav(-1);
|
||||
}}>
|
||||
返回
|
||||
</Button>
|
||||
</Flex>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
<Modal title="提示"
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
open={isEditModalOpen}
|
||||
onOk={() => {
|
||||
setIsEditModalOpen(false);
|
||||
put({
|
||||
messageApi,
|
||||
url: `/api/proj/update/edit-step4/${pathParams.projId}`,
|
||||
body: {
|
||||
authorName: form.getFieldValue('authorName'),
|
||||
authorIdCardType: form.getFieldValue('authorIdCardType'),
|
||||
authorIdCard: form.getFieldValue('authorIdCard'),
|
||||
authorNation: form.getFieldValue('authorNation'),
|
||||
authorProvince: form.getFieldValue('authorProvince').join(','),
|
||||
authorEstablishDate: dayjs(form.getFieldValue('authorEstablishDate')).format(dateFormat),
|
||||
},
|
||||
onBefore() {
|
||||
setLoading(true);
|
||||
},
|
||||
onSuccess() {
|
||||
messageApi.open({
|
||||
type: 'success',
|
||||
content: '编辑成功'
|
||||
})
|
||||
},
|
||||
onFinally() {
|
||||
setLoading(false);
|
||||
}
|
||||
})
|
||||
}}
|
||||
onCancel={() => {
|
||||
setIsEditModalOpen(false);
|
||||
}}>
|
||||
<div>确定提交吗？</div>
|
||||
</Modal>
|
||||
<Spin tip="正在提交..." spinning={loading} fullscreen/>
|
||||
</>
|
||||
)
|
||||
|
||||
}
|
||||
12
src/route/proj/edit/proj-edit-step.css
Normal file
12
src/route/proj/edit/proj-edit-step.css
Normal file
@ -0,0 +1,12 @@
|
||||
.form-container {
|
||||
background-color: var(--color-light);
|
||||
padding: 30px 15px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.form-container .form-body {
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
@ -63,7 +63,7 @@ export function post(req: Req) {
|
||||
|
||||
export function put(req: Req) {
|
||||
req.onBefore?.();
|
||||
Axios.put(req.url, req.config).then(res => {
|
||||
Axios.put(req.url, req.body, req.config).then(res => {
|
||||
req.onSuccess(res);
|
||||
}).catch(error => {
|
||||
if (error.response) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user