lyp
This commit is contained in:
xixi
parent
266270fa26
commit
f92ab282ea
@ -33,7 +33,7 @@ export default function CopyrightGgoods() {
|
||||
{
|
||||
name: '智能管理系统',
|
||||
short: '简称',
|
||||
number: '123456789123456789',
|
||||
number: '31234567891234561789',
|
||||
price: '5.00',
|
||||
version: '1-1-1',
|
||||
time: '2020-04-19 15：42:21',
|
||||
@ -42,7 +42,7 @@ export default function CopyrightGgoods() {
|
||||
{
|
||||
name: '商城管理系统',
|
||||
short: '简称',
|
||||
number: '123456789123456789',
|
||||
number: '1123456789123456789',
|
||||
price: '5.00',
|
||||
version: '1-1-1',
|
||||
time: '2020-04-19 15：42:21',
|
||||
@ -51,7 +51,7 @@ export default function CopyrightGgoods() {
|
||||
{
|
||||
name: 'xx系统',
|
||||
short: '简称',
|
||||
number: '123456789123456789',
|
||||
number: '2123456789123456789',
|
||||
price: '5.00',
|
||||
version: '1-1-1',
|
||||
time: '2020-04-19 15：42:21',
|
||||
@ -133,7 +133,8 @@ export default function CopyrightGgoods() {
|
||||
description={
|
||||
'暂无数据'
|
||||
} />
|
||||
</div>) : (<Table
|
||||
</div>) : (
|
||||
<Table
|
||||
rowSelection={{
|
||||
type: 'checkbox',
|
||||
// selectedRowKeys: belongselectedKeys // 设置默认选中的行
|
||||
@ -145,7 +146,7 @@ export default function CopyrightGgoods() {
|
||||
// }}
|
||||
pagination={false} // 不显示分页
|
||||
style={{ textAlign: 'center' }} // 设置表格内容居中显示
|
||||
rowKey="order" // 指定数据项的唯一标识符
|
||||
rowKey="number" // 指定数据项的唯一标识符
|
||||
>
|
||||
<Column title="序号" render={(_text, _record, index: number) => (
|
||||
index + 1
|
||||
@ -182,7 +183,7 @@ export default function CopyrightGgoods() {
|
||||
render={(_text, record: any) => (
|
||||
<Space size="middle">
|
||||
<span className='copyrightG-goods-table-btn' onClick={() => {
|
||||
console.log(record.order);
|
||||
console.log(record.number);
|
||||
|
||||
}}>预览</span>
|
||||
</Space>
|
||||
|
||||
@ -3,15 +3,17 @@ import './product-release.css'
|
||||
import {
|
||||
Select, DatePicker, Button,
|
||||
// message,
|
||||
Checkbox, Empty, Switch
|
||||
Checkbox, Empty, Switch, Modal
|
||||
} from 'antd';
|
||||
import EditModal from './components/EditModal/EditModal'
|
||||
// import type { CheckboxProps } from 'antd';
|
||||
import { SearchOutlined,ClearOutlined } from '@ant-design/icons';
|
||||
import { SearchOutlined, ClearOutlined } from '@ant-design/icons';
|
||||
import type { DatePickerProps } from 'antd';
|
||||
import locale from 'antd/es/date-picker/locale/zh_CN';
|
||||
import React, { useState } from 'react';
|
||||
import dayjs, { } from 'dayjs';
|
||||
export default function ProductRelease() {
|
||||
const height = window.innerHeight - 180;
|
||||
// const [messageApi, contextHolder] = message.useMessage();
|
||||
const dateFormat = 'YYYY年MM月DD日';
|
||||
// 所属人类型
|
||||
@ -29,8 +31,17 @@ export default function ProductRelease() {
|
||||
console.log('日期', dayjs(date).format(dateFormat));
|
||||
|
||||
};
|
||||
const height = window.innerHeight - 180;
|
||||
|
||||
// 初始化搜索条件
|
||||
const init = () => {
|
||||
setBelongType(undefined)
|
||||
setDate(undefined)
|
||||
}
|
||||
// 点击清除
|
||||
const clearKeyWords = () => {
|
||||
init()
|
||||
// 重新获取数据
|
||||
}
|
||||
// 选框选择时触发事件
|
||||
const checkChange = (e: any, item: any) => {
|
||||
console.log(`checked = ${e.target.checked}`);
|
||||
@ -49,17 +60,28 @@ export default function ProductRelease() {
|
||||
console.log('关闭', item.order);
|
||||
}
|
||||
}
|
||||
// 控制编辑弹窗
|
||||
const [editModalOpen, setEditModalOpen] = useState(false)
|
||||
// 点击编辑
|
||||
const edit = (item: any) => {
|
||||
console.log(item.order);
|
||||
setEditModalOpen(true)
|
||||
};
|
||||
// 控制删除弹窗
|
||||
const [delModalOpen, setDelModalOpen] = useState(false)
|
||||
// 点击删除
|
||||
const del = (item: any) => {
|
||||
console.log(item.order);
|
||||
setDelModalOpen(true)
|
||||
};
|
||||
// 删除点击确认
|
||||
|
||||
// 控制出售弹窗
|
||||
const [sellModalOpen, setSellModalOpen] = useState(false)
|
||||
// 点击出售
|
||||
const sell = (item: any) => {
|
||||
console.log(item.order);
|
||||
setSellModalOpen(true)
|
||||
};
|
||||
// 点击提交
|
||||
const submit = (item: any) => {
|
||||
@ -157,10 +179,12 @@ export default function ProductRelease() {
|
||||
<Button
|
||||
style={{
|
||||
height: 36,
|
||||
marginLeft:10,
|
||||
marginLeft: 10,
|
||||
// backgroundColor: '#FF9F08'
|
||||
}}
|
||||
icon={<ClearOutlined />}>
|
||||
icon={<ClearOutlined />}
|
||||
onClick={clearKeyWords}
|
||||
>
|
||||
清除
|
||||
</Button>
|
||||
</div>
|
||||
@ -253,6 +277,73 @@ export default function ProductRelease() {
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{/* 编辑弹窗 */}
|
||||
<Modal title={'编辑'}
|
||||
destroyOnClose={true}
|
||||
open={editModalOpen}
|
||||
footer={null} // 将 footer 设置为 null 来隐藏自带按钮
|
||||
width={1152}
|
||||
onCancel={() => {
|
||||
setEditModalOpen(false);
|
||||
}}
|
||||
>
|
||||
<div style={{ height: `${height - 20}px`, overflow: 'auto', borderTop: '1px solid #e8e8e8' }}>
|
||||
<EditModal></EditModal>
|
||||
</div>
|
||||
</Modal>
|
||||
{/* 删除弹窗 */}
|
||||
<Modal title="删除"
|
||||
okText="确认"
|
||||
cancelText="取消"
|
||||
destroyOnClose={true}
|
||||
open={delModalOpen}
|
||||
onOk={() => {
|
||||
setDelModalOpen(false)
|
||||
}}
|
||||
onCancel={() => {
|
||||
setDelModalOpen(false)
|
||||
}}
|
||||
okButtonProps={{ style: { background: 'red', color: 'white' } }}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
height: `${height}px`,
|
||||
}}>
|
||||
<div style={{
|
||||
width:700,
|
||||
marginTop:20
|
||||
}}>
|
||||
删除后这条信息将不被保存，确定删除吗？
|
||||
</div>
|
||||
</Modal>
|
||||
{/* 出售弹窗 */}
|
||||
<Modal title="出售"
|
||||
okText="确认"
|
||||
cancelText="取消"
|
||||
destroyOnClose={true}
|
||||
open={sellModalOpen}
|
||||
onOk={() => {
|
||||
setSellModalOpen(false)
|
||||
}}
|
||||
onCancel={() => {
|
||||
setSellModalOpen(false)
|
||||
}}
|
||||
okButtonProps={{ style: { background: '#28915A', color: 'white' } }}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
height: `${height}px`,
|
||||
}}>
|
||||
<div style={{
|
||||
width:700,
|
||||
marginTop:20
|
||||
}}>
|
||||
确定出售接口管理系统的软件著作权证吗？
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
31
src/route/ProductRelease/components/EditModal/EditModal.css
Normal file
31
src/route/ProductRelease/components/EditModal/EditModal.css
Normal file
@ -0,0 +1,31 @@
|
||||
.editModal {
|
||||
padding: 32px 32px 58px 33px;
|
||||
box-sizing: border-box;
|
||||
|
||||
}
|
||||
|
||||
.editModal-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.editModal-title-box {
|
||||
width: 10px;
|
||||
height: 21px;
|
||||
background: #0072FF;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.editModal-title-name {
|
||||
font-size: 16px;
|
||||
color: #222222;
|
||||
font-weight: 700;
|
||||
margin-left: 9px;
|
||||
}
|
||||
|
||||
.editModal-img-box {
|
||||
width: 489px;
|
||||
height: 60px;
|
||||
background: #F8F8F8;
|
||||
border-radius: 5px;
|
||||
}
|
||||
188
src/route/ProductRelease/components/EditModal/EditModal.tsx
Normal file
188
src/route/ProductRelease/components/EditModal/EditModal.tsx
Normal file
@ -0,0 +1,188 @@
|
||||
// import React from 'react'
|
||||
import {
|
||||
Col, Flex, Row,
|
||||
// Select,
|
||||
Button, Form, Input
|
||||
} from "antd";
|
||||
|
||||
import './EditModal.css'
|
||||
// const { TextArea } = Input;
|
||||
export default function EditModal() {
|
||||
const [form] = Form.useForm();
|
||||
return (
|
||||
<div className='editModal'>
|
||||
<div className='editModal-title'>
|
||||
<div className='editModal-title-box'></div>
|
||||
<div className='editModal-title-name'>软著信息</div>
|
||||
</div>
|
||||
<div className="form-body" style={{ marginTop: 39 }}>
|
||||
<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={12}>
|
||||
|
||||
<Form.Item
|
||||
label="软著名称"
|
||||
name=""
|
||||
rules={[{ required: true, message: '请输入软著名称' }]}
|
||||
>
|
||||
<Input
|
||||
style={{ height: '60px', width: '498px', fontSize: '16px' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="软著图片"
|
||||
name=""
|
||||
rules={[{ required: true, message: '请上传软著图片' }]}
|
||||
>
|
||||
<div className="editModal-img-box">
|
||||
|
||||
</div>
|
||||
</Form.Item>
|
||||
|
||||
</Col>
|
||||
|
||||
|
||||
|
||||
</Row>
|
||||
<div style={{display:'flex'}}>
|
||||
<div>
|
||||
<Row gutter={15}>
|
||||
<Col span={12}>
|
||||
|
||||
<Form.Item
|
||||
label="软著简称"
|
||||
name=""
|
||||
rules={[{ required: true, message: '请输入软著简称' }]}
|
||||
>
|
||||
<Input
|
||||
style={{ height: '60px', width: '498px', fontSize: '16px' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
</Col>
|
||||
|
||||
</Row>
|
||||
<Row gutter={15}>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="软著证号"
|
||||
name=""
|
||||
rules={[{ required: true, message: '请输入软著证号' }]}
|
||||
>
|
||||
<Input
|
||||
style={{ height: '60px', width: '498px', fontSize: '16px' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
</Col>
|
||||
|
||||
</Row>
|
||||
</div>
|
||||
<div style={{marginLeft:30}}>
|
||||
<Row gutter={15}>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="软著说明"
|
||||
name=""
|
||||
rules={[{ required: true, message: '请输入软著说明' }]}
|
||||
>
|
||||
<Input
|
||||
style={{ height: '60px', width: '498px', fontSize: '16px' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
</Col>
|
||||
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* <Row gutter={15}>
|
||||
<Col span={24}>
|
||||
<div className='projNameInt'>
|
||||
<div className='projTitle '><span className='redicon'>*</span> 项目简介:</div>
|
||||
<div style={{ width: '1250px' }}>
|
||||
|
||||
<Form.Item
|
||||
// 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
|
||||
// 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={() => {
|
||||
|
||||
|
||||
}}>
|
||||
关闭
|
||||
</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>
|
||||
)
|
||||
}
|
||||
@ -4,7 +4,7 @@ import { MouseEvent, Reducer, useEffect, useReducer, useState } from "react";
|
||||
import { useNavigate, useSearchParams, Outlet } from "react-router-dom";
|
||||
import { IMenuListItem, IMenuWithTopButton } from "../../interfaces/menu/IMenuWithTopButton.ts";
|
||||
import MenuWithTopButton from "../../components/menu/MenuWithTopButton.tsx";
|
||||
// import MenuWithBottomButtom from '../../components/menu/MenuWithBottomButton.tsx'
|
||||
import MenuWithBottomButtom from '../../components/menu/MenuWithBottomButton.tsx'
|
||||
import MenuTreeWithTopButton from "../../components/menu/MenuTreeWithTopButton.tsx";
|
||||
// import ListProj from "../../components/list/ListProj.tsx";
|
||||
// import ListProjAgent from "../../components/list/ListProjAgent.tsx";
|
||||
|
||||
@ -1,10 +1,12 @@
|
||||
import './proj-edit-step.css';
|
||||
import { Col, Flex, message, Modal, Row, Select, Spin } from "antd";
|
||||
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 } from "../../../util/AjaxUtils.ts";
|
||||
import { get, put, Axios } 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;
|
||||
|
||||
@ -23,24 +25,83 @@ export default function ProjEditStep1(props: any) {
|
||||
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' }
|
||||
// ]
|
||||
// 初始化表格数据
|
||||
useEffect(() => {
|
||||
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,
|
||||
projStyleType: data.projStyleType,
|
||||
projCodeType: data.projCodeType,
|
||||
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}
|
||||
@ -72,7 +133,7 @@ export default function ProjEditStep1(props: any) {
|
||||
autoComplete="off"
|
||||
>
|
||||
<Row gutter={15}>
|
||||
<div className='projNameInt'>
|
||||
<div className='projNameInt' style={{ marginLeft: 10 }}>
|
||||
<div className='projTitle '><span className='redicon'>*</span> 项目名称:</div>
|
||||
<Form.Item<FieldType>
|
||||
// label="项目名称"
|
||||
@ -84,47 +145,26 @@ export default function ProjEditStep1(props: any) {
|
||||
/>
|
||||
</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>
|
||||
<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, background: 'pink' }}>
|
||||
{/* <img src={`${Axios.defaults?.baseURL}/route/file/v2/download/true/${codeTypePageId}`} alt="" /> */}
|
||||
<Image
|
||||
src={`${Axios.defaults?.baseURL}/route/file/v2/download/true/${previewImgs}`}
|
||||
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'>
|
||||
@ -211,9 +251,10 @@ export default function ProjEditStep1(props: any) {
|
||||
body: {
|
||||
projName: form.getFieldValue('projName'),
|
||||
projIntroduction: form.getFieldValue('projIntroduction'),
|
||||
projStyleType: form.getFieldValue('projStyleType'),
|
||||
projCodeType: form.getFieldValue('projCodeType'),
|
||||
// projStyleType: form.getFieldValue('projStyleType'),
|
||||
// projCodeType: form.getFieldValue('projCodeType'),
|
||||
projDesc: form.getFieldValue('projDesc'),
|
||||
codeTypePageId
|
||||
},
|
||||
onBefore() {
|
||||
setLoading(true);
|
||||
@ -239,6 +280,85 @@ export default function ProjEditStep1(props: any) {
|
||||
}}>
|
||||
<div>确定提交吗？</div>
|
||||
</Modal>
|
||||
|
||||
|
||||
{/* 选择页面样式弹窗 */}
|
||||
<Modal title="选择页面样式"
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
destroyOnClose={true}
|
||||
open={isPageImgModal}
|
||||
width={1070}
|
||||
style={{ position: 'relative' }}
|
||||
onOk={() => {
|
||||
console.log(codeTypePageId);
|
||||
|
||||
init()
|
||||
// getData()
|
||||
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: 'flex-start', 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: '10px', marginBottom: '10px' }}
|
||||
onClick={() => {
|
||||
setSelectedId(item.codeTypePageId)
|
||||
setSelectedImg(item.previewImgs)
|
||||
}}
|
||||
>
|
||||
<div className="page-img" >
|
||||
<Image
|
||||
src={imgSrc}
|
||||
fallback={errorImage}
|
||||
preview={false} width={500} height={300} />
|
||||
</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 defaultCurrent={1} total={total} defaultPageSize={10} onChange={(page) => {
|
||||
console.log(page);
|
||||
setpage(page)
|
||||
setpageImgArray([])
|
||||
getPageImgData(page)
|
||||
}} />
|
||||
</div>
|
||||
|
||||
</Modal>
|
||||
<Spin tip="正在提交..." spinning={loading} fullscreen />
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
import './proj-edit-step.css';
|
||||
import { Col, message, Modal, Row, Select, Spin } from "antd";
|
||||
import { Col, message, Modal, Row, Spin, Image } from "antd";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { useEffect, useState } from "react";
|
||||
import { get, put } from "../../../util/AjaxUtils.ts";
|
||||
import { get, put, Axios } from "../../../util/AjaxUtils.ts";
|
||||
import { Form, Input } from 'antd';
|
||||
import { AxiosResponse } from "axios";
|
||||
import { errorImage } from "../../../util/CommonUtil.ts";
|
||||
|
||||
const { TextArea } = Input;
|
||||
|
||||
@ -24,6 +25,7 @@ export default function ProjEditStep1() {
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
|
||||
const height = window.innerHeight - 200
|
||||
const [previewImgs, setpreviewImgs] = useState('')
|
||||
|
||||
useEffect(() => {
|
||||
get({
|
||||
@ -33,16 +35,17 @@ export default function ProjEditStep1() {
|
||||
form.setFieldsValue({
|
||||
projName: data.projName,
|
||||
projIntroduction: data.projIntroduction,
|
||||
projStyleType: data.projStyleType,
|
||||
projCodeType: data.projCodeType,
|
||||
// projStyleType: data.projStyleType,
|
||||
// projCodeType: data.projCodeType,
|
||||
projDesc: data.projDesc
|
||||
})
|
||||
setpreviewImgs(data.codeTypePage.previewImgs)
|
||||
|
||||
}
|
||||
})
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div style={{ height: `${height}px`, overflow: 'auto'}}>
|
||||
<div style={{ height: `${height}px`, overflow: 'auto' }}>
|
||||
{contextHolder}
|
||||
{/* <Breadcrumb
|
||||
items={[
|
||||
@ -73,7 +76,7 @@ export default function ProjEditStep1() {
|
||||
disabled
|
||||
>
|
||||
<Row gutter={15}>
|
||||
<div className='projNameInt'>
|
||||
<div className='projNameInt' style={{ marginLeft: 10 }}>
|
||||
<div className='projTitle '><span className='redicon'>*</span> 项目名称:</div>
|
||||
<Form.Item<FieldType>
|
||||
// label="项目名称"
|
||||
@ -85,47 +88,26 @@ export default function ProjEditStep1() {
|
||||
/>
|
||||
</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>
|
||||
<div className='projNameInt'>
|
||||
<div className='projTitle '><span className='redicon'>*</span> 页面样式:</div>
|
||||
<Form.Item<FieldType>
|
||||
// label="项目名称"
|
||||
// name="projName"
|
||||
// rules={[{ required: true, message: '请选择页面样式' }]}
|
||||
>
|
||||
<div className='pageImg' style={{ width: 300, height: 150, background: 'pink' }}>
|
||||
{/* <img src={`${Axios.defaults?.baseURL}/route/file/v2/download/true/${codeTypePageId}`} alt="" /> */}
|
||||
<Image
|
||||
src={`${Axios.defaults?.baseURL}/route/file/v2/download/true/${previewImgs}`}
|
||||
fallback={errorImage}
|
||||
preview={false} width={300} height={150} />
|
||||
</div>
|
||||
|
||||
</Form.Item>
|
||||
</div>
|
||||
<Row gutter={15}>
|
||||
<Col span={24}>
|
||||
<div className='projNameInt'>
|
||||
|
||||
@ -301,3 +301,92 @@
|
||||
/* cursor: pointer; */
|
||||
|
||||
}
|
||||
/* 选择页面样式 */
|
||||
.pageImg{
|
||||
cursor: pointer;
|
||||
}
|
||||
.page-img-select {
|
||||
/* margin-left: 10px; */
|
||||
width: 500px;
|
||||
display: inline-block;
|
||||
/* padding: 10px; */
|
||||
/* border: 1px solid var(--color-border); */
|
||||
border-radius: 5px;
|
||||
/* transition: border-color linear .3s; */
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
|
||||
/* .page-img-select:hover {
|
||||
border:1px solid var(--color-primary);
|
||||
} */
|
||||
|
||||
.page-img-select .page-title {
|
||||
/* position: relative; */
|
||||
}
|
||||
|
||||
.page-img-select .page-title .checkbox {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 15px;
|
||||
border: 1px solid var(--color-border);
|
||||
/* transition: border-color linear .3s; */
|
||||
}
|
||||
|
||||
.page-img-select .page-title .checkbox:before {
|
||||
margin-top: 4px;
|
||||
margin-left: 2px;
|
||||
content: '';
|
||||
display: block;
|
||||
width: 14px;
|
||||
height: 6px;
|
||||
border-left: 2px solid var(--color-border);
|
||||
border-bottom: 2px solid var(--color-border);
|
||||
transform: rotate(-45deg);
|
||||
/* transition: border-color linear .3s, background-color linear .3s;; */
|
||||
}
|
||||
|
||||
.page-img-select:hover .page-title .checkbox {
|
||||
border: 1px solid var(--color-primary)
|
||||
}
|
||||
|
||||
.page-img-select:hover .page-title .checkbox:before {
|
||||
border-left: 2px solid var(--color-primary);
|
||||
border-bottom: 2px solid var(--color-primary);
|
||||
}
|
||||
|
||||
.page-img-select.page-img-selected {
|
||||
border:1px solid var(--color-primary);
|
||||
}
|
||||
|
||||
.page-img-select.page-img-selected .page-title .checkbox {
|
||||
border: 1px solid var(--color-primary);
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.page-img-select.page-img-selected .page-title .checkbox:before {
|
||||
border-left: 2px solid var(--color-light);
|
||||
border-bottom: 2px solid var(--color-light);
|
||||
}
|
||||
|
||||
.page-img-select .page-title .text {
|
||||
margin-left: 30px;
|
||||
margin-top: 10px;
|
||||
width: 190px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: left;
|
||||
}
|
||||
.pagination{
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
/* background-color: pink; */
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user