247 lines
12 KiB
TypeScript
247 lines
12 KiB
TypeScript
import './proj-edit-step.css';
|
||
import { Col, Flex, message, Modal, Row, Select, Spin } from "antd";
|
||
import { 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(props: any) {
|
||
// 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 - 200
|
||
// 初始化表格数据
|
||
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 (
|
||
<div style={{ height: `${height}px`, overflow: 'auto' }}>
|
||
{contextHolder}
|
||
{/* <Breadcrumb
|
||
items={[
|
||
{title: <Link to={'/'}>首页</Link>},
|
||
{title: <Link to={'/proj-create'}>创建项目</Link>},
|
||
{title: <a onClick={() => {nav(-1)}}>编辑项目</a>},
|
||
{title: '标题简介'},
|
||
]}
|
||
/> */}
|
||
{/* <div className="form-container" style={{ height: `${height}px` }}> */}
|
||
<div className="form-container" style={{ paddingBottom: '13px', boxSizing: "border-box" }}>
|
||
<div className='Step-title'>
|
||
<div className='Step-titlel'></div>
|
||
<div className='Step-titler'>标题简介</div>
|
||
</div>
|
||
<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}>
|
||
<div className='projNameInt'>
|
||
<div className='projTitle '><span className='redicon'>*</span> 项目名称:</div>
|
||
<Form.Item<FieldType>
|
||
// label="项目名称"
|
||
name="projName"
|
||
rules={[{ required: true, message: '请输入项目名称' }]}
|
||
>
|
||
<Input
|
||
style={{ height: '50px', width: '300px', fontSize: '16px' }}
|
||
/>
|
||
</Form.Item>
|
||
</div>
|
||
<div className='projNameInt'>
|
||
<div className='projTitle '><span className='redicon'>*</span> 样式类型:</div>
|
||
<Form.Item<FieldType>
|
||
// label="样式类型"
|
||
name="projStyleType"
|
||
rules={[{ required: true, message: '请选择样式类型' }]}
|
||
>
|
||
<Select
|
||
style={{ height: '50px', width: '300px', fontSize: '16px' }}
|
||
placeholder="请选择样式类型"
|
||
onChange={(value: string) => {
|
||
console.log(`selected ${value}`);
|
||
}}
|
||
options={[
|
||
{ value: 'DEFAULT', label: '默认(WEB)' },
|
||
]}
|
||
/>
|
||
</Form.Item>
|
||
</div>
|
||
<div className='projNameInt'>
|
||
<div className='projTitle '><span className='redicon'>*</span> 代码类型:</div>
|
||
<Form.Item<FieldType>
|
||
// label="代码类型"
|
||
name="projCodeType"
|
||
rules={[{ required: true, message: '请选择代码类型' }]}
|
||
>
|
||
<Select
|
||
style={{ height: '50px', width: '300px', fontSize: '16px' }}
|
||
placeholder="请选择代码类型"
|
||
onChange={(value: string) => {
|
||
console.log(`selected ${value}`);
|
||
}}
|
||
options={[
|
||
{ value: 'code1', label: '默认类型' },
|
||
]}
|
||
/>
|
||
</Form.Item>
|
||
</div>
|
||
|
||
|
||
</Row>
|
||
<Row gutter={15}>
|
||
<Col span={24}>
|
||
<div className='projNameInt'>
|
||
<div className='projTitle '><span className='redicon'>*</span> 项目简介:</div>
|
||
<div style={{ width: '1250px' }}>
|
||
|
||
<Form.Item<FieldType>
|
||
// label="项目简介"
|
||
name="projIntroduction"
|
||
rules={[{ required: true, message: '请输入项目简介' }]}
|
||
>
|
||
<TextArea
|
||
style={{ resize: 'none', width: "1215px", height: '200px', fontSize: '16px' }}
|
||
rows={3} placeholder="请用一段话简单描述系统"
|
||
/>
|
||
</Form.Item>
|
||
</div>
|
||
|
||
</div>
|
||
</Col>
|
||
</Row>
|
||
<Row gutter={15}>
|
||
|
||
|
||
</Row>
|
||
<Row gutter={15}>
|
||
<Col span={24}>
|
||
<div className='projNameInt' >
|
||
<div className='projTitle '><span className='redicon'>*</span> 项目详细介绍:</div>
|
||
<div style={{ width: '1250px' }}>
|
||
<Form.Item<FieldType>
|
||
// label="项目详细介绍"
|
||
name="projDesc"
|
||
extra="请对项目做出详细介绍，此内容在操作手册中引用"
|
||
rules={[{ required: true, message: '请输入项目详细介绍' }]}
|
||
>
|
||
<TextArea
|
||
style={{ resize: 'none', width: "1215px", height: '200px', fontSize: '16px' }}
|
||
rows={8} placeholder="请输入项目详细介绍" />
|
||
</Form.Item>
|
||
</div>
|
||
</div>
|
||
|
||
</Col>
|
||
</Row>
|
||
|
||
<div className='setProBtn'>
|
||
<Form.Item wrapperCol={{ span: 24 }}>
|
||
<Flex align="center" justify="center" gap="large">
|
||
<Button type="default" htmlType="button"
|
||
// style={{ width: '262px', height: '58px', fontSize: '16px', color: '#4B4B4B', background: '#EEEEEE' }}
|
||
size='large'
|
||
onClick={() => {
|
||
props.closeModal()
|
||
|
||
}}>
|
||
关闭
|
||
</Button>
|
||
<Button type="primary"
|
||
htmlType="submit"
|
||
// style={{ width: '262px', height: '58px', fontSize: '16px', color: '#FDFDF2', backgroundColor: 'var(--color-primary)' }}
|
||
size='large'
|
||
>
|
||
保存
|
||
</Button>
|
||
|
||
</Flex>
|
||
</Form.Item>
|
||
</div>
|
||
</Form>
|
||
</div>
|
||
</div>
|
||
|
||
<Modal title="提示"
|
||
okText="确定"
|
||
cancelText="取消"
|
||
destroyOnClose={true}
|
||
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: '编辑成功'
|
||
})
|
||
setTimeout(() => {
|
||
props.closeModal()
|
||
// window.location.reload(); // 刷新页面
|
||
}, 500);
|
||
|
||
},
|
||
onFinally() {
|
||
setLoading(false);
|
||
}
|
||
})
|
||
}}
|
||
onCancel={() => {
|
||
setIsEditModalOpen(false);
|
||
}}>
|
||
<div>确定提交吗？</div>
|
||
</Modal>
|
||
<Spin tip="正在提交..." spinning={loading} fullscreen />
|
||
|
||
</div>
|
||
)
|
||
|
||
} |