lyp

src/route/CopyrightGgoods/CopyrightGgoods.tsx

@@ -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>

src/route/ProductRelease/ProductRelease.tsx

@@ -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>
   )
 }

src/route/ProductRelease/components/EditModal/EditModal.css

@@ -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;
+}

src/route/ProductRelease/components/EditModal/EditModal.tsx

@@ -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>
+    )
+}

src/route/index/Index.tsx

@@ -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";

src/route/proj/edit/ProjEditStep1.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'),
+                            // projStyleType: form.getFieldValue('projStyleType'),
-                            projCodeType: form.getFieldValue('projCodeType'),
+                            // 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>

src/route/proj/edit/ProjEditStep1Show.tsx

@@ -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,
+                    // projStyleType: data.projStyleType,
-                    projCodeType: data.projCodeType,
+                    // 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'>

src/route/proj/edit/proj-edit-step.css

@@ -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%;
+}