diff --git a/src/pages/scene/cardWrap.tsx b/src/pages/scene/cardWrap.tsx index 76240a2..3016dc4 100644 --- a/src/pages/scene/cardWrap.tsx +++ b/src/pages/scene/cardWrap.tsx @@ -1,16 +1,45 @@ import React from 'react'; import styles from './style/cardWrap.module.less'; import { getImageUrl } from '@/utils/pubUse'; -import { Image } from '@arco-design/web-react'; +import { Image, Popconfirm } from '@arco-design/web-react'; import { IconEdit, IconDelete } from '@arco-design/web-react/icon'; interface CardWrapProps { item: any; + onEdit?: (item: any, e: React.MouseEvent) => void; + onDelete?: (item: any, e: React.MouseEvent) => void; + onClick?: (item: any, e: React.MouseEvent) => void; } -const CardWrap: React.FC = ({ item }) => { +const CardWrap: React.FC = ({ item, onEdit, onDelete, onClick }) => { + const handleEdit = (e: React.MouseEvent) => { + e.stopPropagation(); + if (onEdit) { + onEdit(item, e); + } + }; + + const handleDelete = (e: React.MouseEvent) => { + e.stopPropagation(); + }; + + const handleClick = (e: React.MouseEvent) => { + e.stopPropagation(); + if (onClick) { + onClick(item, e); + } + }; + + const onOk = (e: React.MouseEvent) => { + e.stopPropagation(); + // 这里可以添加确认删除的逻辑 + if (onDelete) { + onDelete(item, e); + } + }; + return ( -
+
= ({ item }) => { {item.createUser}
- - + + + + onOk(e)} + onCancel={(e: React.MouseEvent) => e.stopPropagation()} + > + + + +
diff --git a/src/pages/scene/engineering.tsx b/src/pages/scene/engineering.tsx index 10b99e9..724259d 100644 --- a/src/pages/scene/engineering.tsx +++ b/src/pages/scene/engineering.tsx @@ -1,6 +1,6 @@ import React, { useState, useEffect } from 'react'; import styles from './style/engineering.module.less'; -import { Input, Grid, Card, Result, Pagination } from '@arco-design/web-react'; +import { Input, Grid, Card, Result, Pagination, Message } from '@arco-design/web-react'; import { IconPlus, IconApps } from '@arco-design/web-react/icon'; import { openWindow, OpenWindowOptions } from '@/utils/common'; import { getPublicSceneList, getMySceneList } from '@/api/scene'; @@ -15,17 +15,21 @@ interface EngineeringProps { showAdd?: boolean, } +const DEFAULT_PAGE_SIZE = 11; const Engineering: React.FC = ({ dataType, showAdd = true }) => { const [searchValue, setSearchValue] = useState(''); const [sceneData, setSceneData] = useState({ - list: [] + list: [], + totalCount: 0 }); - const [count, setCount] = useState(12); + const [currentPage, setCurrentPage] = useState(1); + const [pageSize, setPageSize] = useState(DEFAULT_PAGE_SIZE); const onSearchHandle = (value: string) => { - if (!value) return; - console.log('状态值:', searchValue); + // 搜索时重置到第一页 + setCurrentPage(1); + fetchData(1, pageSize, value); }; const handleChange = (value: string) => { @@ -42,37 +46,57 @@ const Engineering: React.FC = ({ dataType, showAdd = true }) = openWindow(url, params); }; + const handleEdit = (item, e) => { + e.stopPropagation(); + Message.info(`编辑项目: ${item.name}`); + // TODO 在这里添加编辑逻辑 + }; - useEffect(() => { - const fetchData = async () => { - console.log('dataType:', dataType); - // currPage?: number name?: string pageSize?: number - // getPublicSceneList() - // getMySceneList() - const functions = { - public: getPublicSceneList, - my: getMySceneList - }; - const params = { - currPage: 1, - pageSize: 11, - name: '' - }; - const res: any = await functions[dataType](params); - if (res.code === 200) { - console.log('res:', res); - const { data } = res; - setSceneData(data); - setCount(data.totalCount); - } + const handleDelete = (item, e) => { + e.stopPropagation(); + // TODO 在这里添加删除逻辑 + console.log("删除"); + }; + + const handlePageChange = (page: number) => { + setCurrentPage(page); + fetchData(page, pageSize, searchValue); + }; + + const handlePageSizeChange = (size: number) => { + setPageSize(size); + setCurrentPage(1); // 重置到第一页 + fetchData(1, size, searchValue); + }; + + const fetchData = async (page: number = currentPage, size: number = pageSize, search: string = searchValue) => { + const functions = { + public: getPublicSceneList, + my: getMySceneList + }; + const params = { + currPage: page, + pageSize: size, + name: search }; + const res: any = await functions[dataType](params); + if (res.code === 200) { + const { data } = res; + setSceneData({ + list: data.list || [], + totalCount: data.totalCount || 0 + }); + } + }; - fetchData(); + useEffect(() => { + setCurrentPage(1); + fetchData(1, pageSize, searchValue); }, [dataType]); return ( <> -
+
{/*搜索*/} @@ -100,7 +124,7 @@ const Engineering: React.FC = ({ dataType, showAdd = true }) = {/*新建工程按钮*/} {showAdd && ( = ({ dataType, showAdd = true }) = lg={6} xl={6} xxl={6}> - openEngineHandle(item)}> - + + ))} - +
diff --git a/src/pages/scene/style/cardWrap.module.less b/src/pages/scene/style/cardWrap.module.less index 91abbea..836d13e 100644 --- a/src/pages/scene/style/cardWrap.module.less +++ b/src/pages/scene/style/cardWrap.module.less @@ -24,12 +24,28 @@ .card-footer { display: flex; justify-content: space-between; - padding: 0 0 15px 12px; + padding: 0 12px 15px 12px; .operation { - svg { - margin-right: 15px; - font-size: 18px; + display: flex; + align-items: center; + + .icon-hover { + display: flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + border-radius: 50%; + transition: all 0.1s; + + svg { + font-size: 18px; + } + } + + .icon-hover:hover { + background-color: rgb(var(--gray-2)); } } }