377 lines
17 KiB
TypeScript
377 lines
17 KiB
TypeScript
import './proj-edit-step.css';
|
||
import { Col, Flex, message, Modal, Row, Spin, Pagination, Image } from "antd";
|
||
import { useParams } from "react-router-dom";
|
||
import { useEffect, useState } from "react";
|
||
import { get, put, downloadUrl } from "../../../util/AjaxUtils.ts";
|
||
import { Button, Form, Input } from 'antd';
|
||
import { AxiosResponse, } from "axios";
|
||
import { errorImage } from "../../../util/CommonUtil.ts";
|
||
// import { useRowStyle } from 'antd/es/grid/style/index';
|
||
|
||
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 [isPageImgModal, setIsPageImgModal] = useState(false);
|
||
|
||
|
||
// 页面样式相关
|
||
const [page, setpage] = useState(1)
|
||
const [total, settotal] = useState(0)
|
||
const [pageImgArray, setpageImgArray] = useState<any[]>([])
|
||
// 页面样式图片
|
||
const [previewImgs, setpreviewImgs] = useState('')
|
||
const [codeTypePageId, setcodeTypePageId] = useState('')
|
||
const height = window.innerHeight - 200
|
||
|
||
// 缓存一个被选中的图品信息 做弹窗选择确定和返回的缓存
|
||
const [selectedId, setSelectedId] = useState('')
|
||
const [selectedImg, setSelectedImg] = useState('')
|
||
// 初始化数据
|
||
const init = () => {
|
||
setpage(1)
|
||
}
|
||
// 获取页面样式图片等信息
|
||
const getPageImgData = (page: number) => {
|
||
get({
|
||
messageApi,
|
||
url: `/api/code/type/page/listpage`,
|
||
config: {
|
||
params: {
|
||
page: page,
|
||
rows: 10
|
||
}
|
||
},
|
||
onSuccess(data: any) {
|
||
// console.log(data);
|
||
settotal(data.data.total)
|
||
setpageImgArray(data.data.rows)
|
||
}
|
||
})
|
||
}
|
||
const openPageImgModal = () => {
|
||
getPageImgData(page)
|
||
setIsPageImgModal(true)
|
||
}
|
||
// const pageImgArray1 = [
|
||
// { codeTypePageId: '1', previewImgs: '嘻嘻嘻' },
|
||
// { codeTypePageId: '2', previewImgs: '呵呵' },
|
||
// { codeTypePageId: '3', previewImgs: '哈哈' },
|
||
// { codeTypePageId: '4', previewImgs: '哥哥' },
|
||
// { codeTypePageId: '5', previewImgs: 'xx' },
|
||
// { codeTypePageId: '6', previewImgs: '11' }
|
||
// ]
|
||
// 初始化表格数据
|
||
const getData = () => {
|
||
get({
|
||
messageApi,
|
||
url: `/api/proj/get/edit-step1/${pathParams.projId}`,
|
||
onSuccess({ data }: AxiosResponse) {
|
||
// console.log(data);
|
||
|
||
form.setFieldsValue({
|
||
projName: data.projName,
|
||
projIntroduction: data.projIntroduction,
|
||
projDesc: data.projDesc
|
||
})
|
||
// ${Axios.defaults?.baseURL}/route/file/v2/download/true/${item.previewImgs}
|
||
setpreviewImgs(data.codeTypePage.previewImgs)
|
||
setcodeTypePageId(data.codeTypePage.codeTypePageId)
|
||
setSelectedId(data.codeTypePage.codeTypePageId)
|
||
setSelectedImg(data.codeTypePage.previewImgs)
|
||
}
|
||
})
|
||
}
|
||
|
||
useEffect(() => {
|
||
getData()
|
||
|
||
}, [])
|
||
|
||
|
||
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' style={{ marginLeft: 10 }}>
|
||
<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>
|
||
|
||
|
||
</Row>
|
||
<div className='projNameInt'>
|
||
<div className='projTitle '><span className='redicon'>*</span> 页面样式:</div>
|
||
<Form.Item<FieldType>
|
||
// label="项目名称"
|
||
// name="projName"
|
||
// rules={[{ required: true, message: '请选择页面样式' }]}
|
||
>
|
||
<div className='pageImg' onClick={openPageImgModal} style={{ width: 300, height: 150 }}>
|
||
{/* <img src={`${Axios.defaults?.baseURL}/route/file/v2/download/true/${codeTypePageId}`} alt="" /> */}
|
||
<Image
|
||
// src={`${Axios.defaults?.baseURL}/route/file/v2/download/true/${previewImgs}`}
|
||
src={downloadUrl(previewImgs, false)}
|
||
fallback={errorImage}
|
||
preview={false} width={300} height={150} />
|
||
</div>
|
||
<div style={{ color: '#939393', marginTop: '10px' }}>点击图片选择页面样式</div>
|
||
</Form.Item>
|
||
</div>
|
||
<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={() => {
|
||
// console.log(codeTypePageId);
|
||
|
||
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'),
|
||
codeTypePageId
|
||
},
|
||
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>
|
||
|
||
|
||
{/* 选择页面样式弹窗 */}
|
||
<Modal title="选择页面样式"
|
||
okText="确定"
|
||
cancelText="取消"
|
||
destroyOnClose={true}
|
||
open={isPageImgModal}
|
||
width={1090}
|
||
style={{ position: 'relative' }}
|
||
onOk={() => {
|
||
// console.log(codeTypePageId);
|
||
|
||
init()
|
||
// getData()
|
||
console.log(selectedId);
|
||
|
||
setcodeTypePageId(selectedId)
|
||
setpreviewImgs(selectedImg)
|
||
setIsPageImgModal(false)
|
||
}}
|
||
onCancel={() => {
|
||
init()
|
||
setSelectedId(codeTypePageId)
|
||
setSelectedImg(previewImgs)
|
||
// getData()
|
||
setIsPageImgModal(false);
|
||
}}
|
||
|
||
>
|
||
{/* <div style={{ height: `${height - 40}px`, overflow: 'auto', display: 'flex', justifyContent: 'flex-start', flexWrap: 'wrap' }}>
|
||
<div className='selectPage'>
|
||
<div className='selectPageImg'>
|
||
<Checkbox style={{ margin: 5 }} onChange={onChange}></Checkbox>
|
||
</div>
|
||
</div>
|
||
<div className='selectPage'>
|
||
<div className='selectPageImg'>
|
||
<Checkbox style={{ margin: 5 }} onChange={onChange}></Checkbox>
|
||
</div>
|
||
</div>
|
||
</div> */}
|
||
<div style={{ height: `${height - 80}px`, overflow: 'auto', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', marginTop: 10, }}>
|
||
{
|
||
pageImgArray.map((item) => {
|
||
// const imgSrc = `${Axios.defaults?.baseURL}/route/file/v2/download/true/${item.previewImgs}`;
|
||
return (
|
||
<div key={item.codeTypePageId} className={item.codeTypePageId == selectedId ? 'page-img-select page-img-selected' : 'page-img-select'}
|
||
style={{ marginRight: '', marginBottom: '10px', height: 250 }}
|
||
onClick={() => {
|
||
console.log(item.codeTypePageId);
|
||
|
||
setSelectedId(item.codeTypePageId)
|
||
setSelectedImg(item.previewImgs)
|
||
}}
|
||
>
|
||
<div className="page-img" >
|
||
<Image
|
||
// src={imgSrc}
|
||
src={downloadUrl(item.previewImgs, false)}
|
||
fallback={errorImage}
|
||
preview={false} width={500} height={250} />
|
||
</div>
|
||
<div className="page-title">
|
||
<div className="checkbox"></div>
|
||
{/* <div className="text">{props.title ? props.title : '标题'}</div> */}
|
||
</div>
|
||
</div>
|
||
)
|
||
})
|
||
}
|
||
|
||
</div>
|
||
<div className='pagination'>
|
||
{/* defaultCurrent: 默认当前页数 total:数据总数 defaultPageSize:'页面显示几条' */}
|
||
<Pagination
|
||
showSizeChanger={false}
|
||
defaultCurrent={1} total={total} defaultPageSize={10} onChange={(page) => {
|
||
// console.log(page);
|
||
setpage(page)
|
||
setpageImgArray([])
|
||
getPageImgData(page)
|
||
}} />
|
||
</div>
|
||
|
||
</Modal>
|
||
<Spin tip="正在提交..." spinning={loading} fullscreen />
|
||
|
||
</div>
|
||
)
|
||
|
||
} |