diff --git a/src/pages/scene/configTable.tsx b/src/pages/scene/configTable.tsx new file mode 100644 index 0000000..d03cc51 --- /dev/null +++ b/src/pages/scene/configTable.tsx @@ -0,0 +1,101 @@ +import React, { useState } from 'react'; +import { Button, Input, Table, TableColumnProps } from '@arco-design/web-react'; +import { IconDelete, IconPlusCircle } from '@arco-design/web-react/icon'; + +interface TableDataItem { + key: number | string; + label: string; + url: string; + + [key: string]: any; // 允许其他自定义字段 +} + +const ConfigTable = () => { + const [tableData, setTableData] = useState([]); + + const columns: TableColumnProps[] = [ + { + title: '标签', + dataIndex: 'label', + render: (_: any, record: TableDataItem) => ( + handleSave({ ...record, label: value })} + /> + ) + }, + { + title: 'url', + dataIndex: 'url', + render: (_: any, record: TableDataItem) => ( + handleSave({ ...record, url: value })} + /> + ) + }, + { + title: '操作', + dataIndex: 'address', + render: (_: any, record: TableDataItem) => ( + + ) + } + ]; + + const newKey = Date.now(); + const addRow = () => { + const newRow = { + key: newKey, + label: '', + url: '' + }; + const newData = [...tableData, newRow]; + setTableData(newData); + }; + + const removeRow = (key: number | string) => { + const newData = tableData.filter((item) => item.key !== key); + setTableData(newData); + }; + + const handleSave = (row: TableDataItem) => { + const newData = [...tableData]; + const index = newData.findIndex((item) => row.key === item.key); + if (index >= 0) { + newData.splice(index, 1, { ...newData[index], ...row }); + } + else { + newData.push(row); + } + setTableData(newData); + }; + + return ( + <> + {!!tableData.length && ( + <> + + + + )} + + {!tableData.length && ( +
+ +
+ )} + + ); +}; + +export default ConfigTable; \ No newline at end of file diff --git a/src/pages/scene/cover.tsx b/src/pages/scene/cover.tsx new file mode 100644 index 0000000..cb49e27 --- /dev/null +++ b/src/pages/scene/cover.tsx @@ -0,0 +1,66 @@ +import React, { useEffect, useState } from 'react'; +import styles from '@/pages/scene/style/cover.module.less'; +import { Image, Modal, List } from '@arco-design/web-react'; +import scene01 from '@/assets/images/scene01.jpg'; +import scene02 from '@/assets/images/scene02.jpg'; +import scene03 from '@/assets/images/scene03.jpeg'; +import scene04 from '@/assets/images/scene04.png'; +import scene07 from '@/assets/images/scene07.png'; +import scene08 from '@/assets/images/scene08.jpg'; +import { getImageUrl } from '@/utils/pubUse'; + +const imageList = [scene01, scene02, scene03, scene04, scene07, scene08]; + +interface CoverProps { + defaultImage?: string; +} + +const Cover: React.FC = ({ defaultImage }) => { + const [visible, setVisible] = useState(false); + const [currentImage, setCurrentImage] = useState(''); + + useEffect(() => { + if (defaultImage) { + setCurrentImage(getImageUrl(defaultImage)); + } + else { + const imageRandom = Math.floor(Math.random() * imageList.length); + setCurrentImage(imageList[imageRandom].src); + } + }, [defaultImage]); + return ( +
+
+ setVisible(true)}> +
+ setVisible(false)} + onCancel={() => setVisible(false)} + autoFocus={false} + focusLock={true} + > + { + return ( + + { + setCurrentImage(item.src); + setVisible(false); + }}> + + ); + }} + /> + + +
+ ); +}; + +export default Cover; \ No newline at end of file diff --git a/src/pages/scene/engineering.tsx b/src/pages/scene/engineering.tsx index 724259d..22b0fd4 100644 --- a/src/pages/scene/engineering.tsx +++ b/src/pages/scene/engineering.tsx @@ -5,6 +5,7 @@ import { IconPlus, IconApps } from '@arco-design/web-react/icon'; import { openWindow, OpenWindowOptions } from '@/utils/common'; import { getPublicSceneList, getMySceneList } from '@/api/scene'; import CardWrap from '@/pages/scene/cardWrap'; +import OperationModal from '@/pages/scene/operationModal'; const InputSearch = Input.Search; const Row = Grid.Row; @@ -25,6 +26,9 @@ const Engineering: React.FC = ({ dataType, showAdd = true }) = }); const [currentPage, setCurrentPage] = useState(1); const [pageSize, setPageSize] = useState(DEFAULT_PAGE_SIZE); + const [showModal, setShowModal] = useState(false); + const [operationType, setOperationType] = useState('ADD'); + const [currentItem, setCurrentItem] = useState(null); const onSearchHandle = (value: string) => { // 搜索时重置到第一页 @@ -46,16 +50,22 @@ const Engineering: React.FC = ({ dataType, showAdd = true }) = openWindow(url, params); }; + const openModalHandle = (type: string, item: any = null) => { + console.log('item:', item); + setShowModal(true); + setOperationType(type); + setCurrentItem(item); + }; + const handleEdit = (item, e) => { e.stopPropagation(); - Message.info(`编辑项目: ${item.name}`); - // TODO 在这里添加编辑逻辑 + openModalHandle('EDIT', item); }; const handleDelete = (item, e) => { e.stopPropagation(); // TODO 在这里添加删除逻辑 - console.log("删除"); + console.log('删除'); }; const handlePageChange = (page: number) => { @@ -125,6 +135,7 @@ const Engineering: React.FC = ({ dataType, showAdd = true }) = {showAdd && ( openModalHandle('ADD')} > = ({ dataType, showAdd = true }) = ))} + {/*分页组件*/} = ({ dataType, showAdd = true }) = + {/*新增/编辑弹窗*/} + setShowModal(status)} + /> ); }; diff --git a/src/pages/scene/operationModal.tsx b/src/pages/scene/operationModal.tsx new file mode 100644 index 0000000..6890231 --- /dev/null +++ b/src/pages/scene/operationModal.tsx @@ -0,0 +1,53 @@ +import React, { useEffect } from 'react'; +import { Modal, Form, Input, Checkbox } from '@arco-design/web-react'; +import Cover from '@/pages/scene/cover'; +import ConfigTable from '@/pages/scene/configTable'; + +const FormItem = Form.Item; + +interface OperationModalProps { + show: boolean; + type: string; + item: any; + onCancel: (status: boolean) => void; +} + +const OperationModal: React.FC = ({ show, type, item, onCancel }) => { + const [visible, setVisible] = React.useState(false); + + useEffect(() => { + setVisible(show); + }, [show]); + + return ( + setVisible(false)} + onCancel={() => onCancel(false)} + autoFocus={false} + focusLock={true} + > +
+ + + + + + + + + + + + + + 是否公开 + + + + ); +}; + +export default OperationModal; \ No newline at end of file diff --git a/src/pages/scene/style/cover.module.less b/src/pages/scene/style/cover.module.less new file mode 100644 index 0000000..85d2015 --- /dev/null +++ b/src/pages/scene/style/cover.module.less @@ -0,0 +1,3 @@ +.cover-container { + +} \ No newline at end of file