feat: 复用设备编辑模态框实现设备添加功能
This commit is contained in:
parent
dc0451529e
commit
c9d0bb88b3
@ -1,12 +1,24 @@
|
||||
import { UploadOutlined } from "@ant-design/icons";
|
||||
import { Button, Form, Image, Input, Modal, Select, Upload } from "antd";
|
||||
import {
|
||||
Button,
|
||||
Form,
|
||||
Image,
|
||||
Input,
|
||||
message,
|
||||
Modal,
|
||||
Select,
|
||||
Upload,
|
||||
} from "antd";
|
||||
import TextArea from "antd/es/input/TextArea";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
import axiosInstance, { baseURL } from "../../api/axios";
|
||||
import { deviceStatusOptions } from "../../config/DeviceStatusConfig";
|
||||
import { selectUserId } from "../../features/auth/authSlice";
|
||||
|
||||
export default function DeviceDetailModal({
|
||||
visiable,
|
||||
mode = "create",
|
||||
device,
|
||||
onclose,
|
||||
onSuccess,
|
||||
@ -15,8 +27,11 @@ export default function DeviceDetailModal({
|
||||
const [imageFile, setImageFile] = useState(null);
|
||||
const [initialValues, setInitialValues] = useState({});
|
||||
const [fileList, setFileList] = useState();
|
||||
const userId = useSelector(selectUserId);
|
||||
useEffect(() => {
|
||||
if (device) {
|
||||
if (visiable) {
|
||||
setFileList([]);
|
||||
if (mode === "edit") {
|
||||
const values = {
|
||||
name: device.name,
|
||||
location: device.location,
|
||||
@ -25,47 +40,61 @@ export default function DeviceDetailModal({
|
||||
};
|
||||
form.setFieldsValue(values);
|
||||
setInitialValues(values);
|
||||
} else {
|
||||
const values = {
|
||||
name: undefined,
|
||||
location: undefined,
|
||||
usageRequirement: undefined,
|
||||
status: undefined,
|
||||
};
|
||||
form.setFieldsValue(values);
|
||||
setInitialValues(values);
|
||||
}
|
||||
}, [device]);
|
||||
}
|
||||
}, [visiable, mode, device, form]);
|
||||
|
||||
const handleEdit = async () => {
|
||||
const handleOk = async () => {
|
||||
const values = await form.validateFields();
|
||||
const updates = {};
|
||||
const data = {};
|
||||
Object.keys(initialValues).forEach((key) => {
|
||||
if (values[key] !== initialValues[key]) {
|
||||
updates[key] = values[key];
|
||||
data[key] = values[key];
|
||||
}
|
||||
});
|
||||
|
||||
if (Object.keys(updates).length > 0) {
|
||||
await axiosInstance.put(`/device/${device.deviceId}`, updates);
|
||||
if (Object.keys(data).length > 0) {
|
||||
if (mode === "edit") {
|
||||
await axiosInstance.put(`/device/${device.deviceId}`, data);
|
||||
message.success("编辑成功");
|
||||
} else {
|
||||
device = await axiosInstance.post(`/device/${userId}`, data);
|
||||
console.log(device);
|
||||
|
||||
message.success("添加成功");
|
||||
}
|
||||
}
|
||||
|
||||
if (imageFile) {
|
||||
const formData = new FormData();
|
||||
formData.append("image", imageFile);
|
||||
await axiosInstance.post(`device/${device.deviceId}/image`, formData, {
|
||||
await axiosInstance.post(`device/${device.id}/image`, formData, {
|
||||
headers: {
|
||||
"Content-Type": "multipart/form-data",
|
||||
},
|
||||
});
|
||||
}
|
||||
onSuccess();
|
||||
setFileList([]);
|
||||
form.resetFields();
|
||||
onclose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title="编辑设备"
|
||||
title={mode === "edit" ? "编辑设备" : "添加设备"}
|
||||
open={visiable}
|
||||
onCancel={() => {
|
||||
setFileList([]);
|
||||
form.resetFields();
|
||||
onclose();
|
||||
}}
|
||||
onOk={handleEdit}
|
||||
onOk={handleOk}
|
||||
okText="保存"
|
||||
>
|
||||
<Form form={form} layout="vertical" initialValues={initialValues}>
|
||||
@ -99,6 +128,7 @@ export default function DeviceDetailModal({
|
||||
}}
|
||||
showUploadList={{ showRemoveIcon: true }}
|
||||
onChange={({ fileList }) => setFileList(fileList)}
|
||||
maxCount={1}
|
||||
>
|
||||
<Button icon={<UploadOutlined />}>点击上传</Button>
|
||||
</Upload>
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { Button, Input, message, Space, Table, Tag } from "antd";
|
||||
import { Button, Flex, Input, message, Space, Table, Tag } from "antd";
|
||||
import Column from "antd/es/table/Column";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
@ -10,6 +10,8 @@ import DeviceDetailModal from "./DeviceDetailModal";
|
||||
export default function DeviceManage() {
|
||||
const [devices, setDevices] = useState([]);
|
||||
const [selectedDevice, setSelectedDevice] = useState(null);
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const [modalMode, setModalMode] = useState(null);
|
||||
const [searchName, setSearchName] = useState(null);
|
||||
const [pagination, setPagination] = useState({
|
||||
current: 1,
|
||||
@ -44,6 +46,7 @@ export default function DeviceManage() {
|
||||
|
||||
const handleDelete = async (deviceId) => {
|
||||
await axiosInstance.delete(`/device/${deviceId}`);
|
||||
message.success("删除成功");
|
||||
const newPagination = {
|
||||
...pagination,
|
||||
current: 1,
|
||||
@ -65,13 +68,26 @@ export default function DeviceManage() {
|
||||
// 名称、使用要求、位置、状态
|
||||
return (
|
||||
<>
|
||||
<Flex justify="space-between">
|
||||
<Input.Search
|
||||
placeholder="请输入设备名称"
|
||||
enterButton="搜索"
|
||||
onSearch={handleSearch}
|
||||
style={{ width: "200px" }}
|
||||
className="m-4"
|
||||
/>
|
||||
<Button
|
||||
className="m-4"
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
setModalMode("create");
|
||||
setSelectedDevice(null);
|
||||
setModalOpen(true);
|
||||
}}
|
||||
>
|
||||
添加设备
|
||||
</Button>
|
||||
</Flex>
|
||||
|
||||
<Table
|
||||
rowKey="deviceId"
|
||||
dataSource={devices}
|
||||
@ -106,7 +122,14 @@ export default function DeviceManage() {
|
||||
render={(_, record) => {
|
||||
return (
|
||||
<Space>
|
||||
<Button size="small" onClick={() => setSelectedDevice(record)}>
|
||||
<Button
|
||||
size="small"
|
||||
onClick={() => {
|
||||
setSelectedDevice(record);
|
||||
setModalOpen(true);
|
||||
setModalMode("edit");
|
||||
}}
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
<Button
|
||||
@ -123,11 +146,14 @@ export default function DeviceManage() {
|
||||
/>
|
||||
</Table>
|
||||
<DeviceDetailModal
|
||||
visiable={!!selectedDevice}
|
||||
visiable={modalOpen}
|
||||
device={selectedDevice}
|
||||
onclose={() => setSelectedDevice(null)}
|
||||
mode={modalMode}
|
||||
onclose={() => {
|
||||
setModalOpen(false);
|
||||
setSelectedDevice(null);
|
||||
}}
|
||||
onSuccess={async () => {
|
||||
message.success("编辑成功");
|
||||
await fetchData(pagination);
|
||||
}}
|
||||
/>
|
||||
|
@ -59,7 +59,6 @@ export default function Reserve() {
|
||||
<>
|
||||
<Input.Search
|
||||
placeholder="请输入设备名称"
|
||||
enterButton="搜索"
|
||||
onSearch={handleSearch}
|
||||
style={{ width: "200px" }}
|
||||
className="m-4"
|
||||
|
Loading…
x
Reference in New Issue
Block a user