diff --git a/src/pages/scene/configTable.tsx b/src/pages/scene/configTable.tsx index d03cc51..d3926fa 100644 --- a/src/pages/scene/configTable.tsx +++ b/src/pages/scene/configTable.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { Button, Input, Table, TableColumnProps } from '@arco-design/web-react'; import { IconDelete, IconPlusCircle } from '@arco-design/web-react/icon'; @@ -10,8 +10,17 @@ interface TableDataItem { [key: string]: any; // 允许其他自定义字段 } -const ConfigTable = () => { - const [tableData, setTableData] = useState([]); +interface ConfigTableProps { + configUrls?: TableDataItem[]; + onChange?: (data: TableDataItem[]) => void; +} + +const ConfigTable: React.FC = ({ configUrls = [], onChange }) => { + const [tableData, setTableData] = useState([]); + + useEffect(() => { + setTableData(configUrls); + }, [configUrls]); const columns: TableColumnProps[] = [ { @@ -54,11 +63,17 @@ const ConfigTable = () => { }; const newData = [...tableData, newRow]; setTableData(newData); + if (onChange) { + onChange(newData); + } }; const removeRow = (key: number | string) => { const newData = tableData.filter((item) => item.key !== key); setTableData(newData); + if (onChange) { + onChange(newData); + } }; const handleSave = (row: TableDataItem) => { @@ -71,6 +86,9 @@ const ConfigTable = () => { newData.push(row); } setTableData(newData); + if (onChange) { + onChange(newData); + } }; return ( diff --git a/src/pages/scene/cover.tsx b/src/pages/scene/cover.tsx index cb49e27..74b104e 100644 --- a/src/pages/scene/cover.tsx +++ b/src/pages/scene/cover.tsx @@ -13,9 +13,10 @@ const imageList = [scene01, scene02, scene03, scene04, scene07, scene08]; interface CoverProps { defaultImage?: string; + onImageChange?: (image: string) => void; } -const Cover: React.FC = ({ defaultImage }) => { +const Cover: React.FC = ({ defaultImage, onImageChange }) => { const [visible, setVisible] = useState(false); const [currentImage, setCurrentImage] = useState(''); @@ -26,8 +27,18 @@ const Cover: React.FC = ({ defaultImage }) => { else { const imageRandom = Math.floor(Math.random() * imageList.length); setCurrentImage(imageList[imageRandom].src); + onImageChange(imageList[imageRandom].src); } }, [defaultImage]); + + const handleImageSelect = (imageSrc: string) => { + setCurrentImage(imageSrc); + setVisible(false); + if (onImageChange) { + onImageChange(imageSrc); + } + }; + return (
@@ -50,8 +61,7 @@ const Cover: React.FC = ({ defaultImage }) => { return ( { - setCurrentImage(item.src); - setVisible(false); + handleImageSelect(item.src); }}> ); diff --git a/src/pages/scene/engineering.tsx b/src/pages/scene/engineering.tsx index 22b0fd4..1d0fa58 100644 --- a/src/pages/scene/engineering.tsx +++ b/src/pages/scene/engineering.tsx @@ -51,7 +51,6 @@ const Engineering: React.FC = ({ dataType, showAdd = true }) = }; const openModalHandle = (type: string, item: any = null) => { - console.log('item:', item); setShowModal(true); setOperationType(type); setCurrentItem(item); @@ -186,7 +185,8 @@ const Engineering: React.FC = ({ dataType, showAdd = true }) = show={showModal} type={operationType} item={currentItem} - onCancel={(status) => setShowModal(status)} + onClose={(status) => setShowModal(status)} + onRefresh={() => fetchData(1, 11)} /> ); diff --git a/src/pages/scene/operationModal.tsx b/src/pages/scene/operationModal.tsx index 6890231..690b204 100644 --- a/src/pages/scene/operationModal.tsx +++ b/src/pages/scene/operationModal.tsx @@ -1,7 +1,8 @@ -import React, { useEffect } from 'react'; -import { Modal, Form, Input, Checkbox } from '@arco-design/web-react'; +import React, { useEffect, useState } from 'react'; +import { Modal, Form, Input, Checkbox, Message } from '@arco-design/web-react'; import Cover from '@/pages/scene/cover'; import ConfigTable from '@/pages/scene/configTable'; +import { addScene, editScene } from '@/api/scene'; const FormItem = Form.Item; @@ -9,40 +10,141 @@ interface OperationModalProps { show: boolean; type: string; item: any; - onCancel: (status: boolean) => void; + onClose: (status: boolean) => void; + onRefresh: () => void; } -const OperationModal: React.FC = ({ show, type, item, onCancel }) => { - const [visible, setVisible] = React.useState(false); +const OperationModal: React.FC = ({ show, type, item, onClose, onRefresh }) => { + const [visible, setVisible] = useState(false); + const [selectedImage, setSelectedImage] = useState(''); + const [configUrls, setConfigUrls] = useState([]); + const [form] = Form.useForm(); + + + const transformImageUrl = (image: string) => { + if (!image) return; + if (image.includes('/')) setSelectedImage(image.split('/')[image.split('/').length - 1]); + else setSelectedImage(image); + }; + + const onOk = async () => { + await form.validate(); + const formData = form.getFields(); + + const params = { + ...formData, + logo: selectedImage, + published: formData.published ? 1 : 0, + configUrls: configUrls + }; + if (type === 'ADD') { + const res: any = await addScene(params); + if (res.code === 200) { + Message.success('创建成功'); + setVisible(false); + onClose(false); + onRefresh(); + // 清空表单数据和其他变量数据 + form.resetFields(); + setSelectedImage(''); + setConfigUrls([]); + } + } + else { + const res: any = await editScene(params); + if (res.code === 200) { + Message.success('更新成功'); + setVisible(false); + onClose(false); + onRefresh(); + // 清空表单数据和其他变量数据 + form.resetFields(); + setSelectedImage(''); + setConfigUrls([]); + } + } + }; useEffect(() => { setVisible(show); }, [show]); + useEffect(() => { + transformImageUrl(item?.logo); + form.setFieldsValue({ + id: item?.id, + name: item?.name, + description: item?.description, + published: item?.published === 1 + }); + setConfigUrls(item?.configUrls || []); + }, [item]); + return ( setVisible(false)} - onCancel={() => onCancel(false)} + onOk={() => onOk()} + onCancel={() => onClose(false)} autoFocus={false} focusLock={true} > -
+ - + transformImageUrl(selectedImage)} + /> - + - + - - + + setConfigUrls(data)} + /> - + 是否公开