feat: 本次提交更新内容如下
设备详情搞定
This commit is contained in:
@@ -1,4 +1,5 @@
|
|||||||
# 基础环境变量示例
|
# 基础环境变量示例
|
||||||
VITE_API_BASE_URL=http://www.yishi.com
|
VITE_API_BASE_URL=http://www.yishi.com
|
||||||
|
VITE_API_BASE_URL=https://ckbapi.quwanzhi.com
|
||||||
VITE_APP_TITLE=Nkebao Base
|
VITE_APP_TITLE=Nkebao Base
|
||||||
|
|
||||||
|
|||||||
@@ -18,6 +18,7 @@ import {
|
|||||||
deleteDevice,
|
deleteDevice,
|
||||||
} from "@/api/devices";
|
} from "@/api/devices";
|
||||||
import type { Device } from "@/types/device";
|
import type { Device } from "@/types/device";
|
||||||
|
import { comfirm } from "@/utils/common";
|
||||||
|
|
||||||
const Devices: React.FC = () => {
|
const Devices: React.FC = () => {
|
||||||
// 设备列表相关
|
// 设备列表相关
|
||||||
@@ -145,23 +146,34 @@ const Devices: React.FC = () => {
|
|||||||
|
|
||||||
// 删除设备
|
// 删除设备
|
||||||
const handleDelete = async () => {
|
const handleDelete = async () => {
|
||||||
if (!selected.length) return;
|
|
||||||
setDelLoading(true);
|
setDelLoading(true);
|
||||||
try {
|
try {
|
||||||
for (const id of selected) {
|
for (const id of selected) {
|
||||||
await deleteDevice(Number(id));
|
await deleteDevice(Number(id));
|
||||||
}
|
}
|
||||||
Toast.show({ content: `删除成功`, position: "top" });
|
Toast.show({ content: `删除成功`, position: "top" });
|
||||||
setDelVisible(false);
|
|
||||||
setSelected([]);
|
setSelected([]);
|
||||||
loadDevices(true);
|
loadDevices(true);
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
Toast.show({ content: e.message || "删除失败", position: "top" });
|
if (e) Toast.show({ content: e.message || "删除失败", position: "top" });
|
||||||
} finally {
|
} finally {
|
||||||
setDelLoading(false);
|
setDelLoading(false);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 删除按钮点击
|
||||||
|
const handleDeleteClick = async () => {
|
||||||
|
try {
|
||||||
|
await comfirm(
|
||||||
|
`将删除${selected.length}个设备,删除后本设备配置的计划任务操作也将失效。确认删除?`,
|
||||||
|
{ title: "确认删除", confirmText: "确认删除", cancelText: "取消" }
|
||||||
|
);
|
||||||
|
handleDelete();
|
||||||
|
} catch {
|
||||||
|
// 用户取消,无需处理
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
// 跳转详情
|
// 跳转详情
|
||||||
const goDetail = (id: string | number) => {
|
const goDetail = (id: string | number) => {
|
||||||
window.location.href = `/devices/${id}`;
|
window.location.href = `/devices/${id}`;
|
||||||
@@ -240,7 +252,7 @@ const Devices: React.FC = () => {
|
|||||||
danger
|
danger
|
||||||
icon={<DeleteOutline />}
|
icon={<DeleteOutline />}
|
||||||
disabled={selected.length === 0}
|
disabled={selected.length === 0}
|
||||||
onClick={() => setDelVisible(true)}
|
onClick={handleDeleteClick}
|
||||||
>
|
>
|
||||||
删除
|
删除
|
||||||
</Button>
|
</Button>
|
||||||
@@ -412,26 +424,6 @@ const Devices: React.FC = () => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</Popup>
|
</Popup>
|
||||||
{/* 删除确认弹窗 */}
|
|
||||||
<Dialog
|
|
||||||
visible={delVisible}
|
|
||||||
content={`将删除${selected.length}个设备,删除后本设备配置的计划任务操作也将失效。确认删除?`}
|
|
||||||
confirmText="确认删除"
|
|
||||||
cancelText="取消"
|
|
||||||
onConfirm={handleDelete}
|
|
||||||
onCancel={() => setDelVisible(false)}
|
|
||||||
closeOnAction
|
|
||||||
closeOnMaskClick
|
|
||||||
actions={[
|
|
||||||
{
|
|
||||||
key: "confirm",
|
|
||||||
text: "确认删除",
|
|
||||||
danger: true,
|
|
||||||
// loading: delLoading, // antd-mobile Dialog.Action 不支持 loading 属性,去掉
|
|
||||||
},
|
|
||||||
{ key: "cancel", text: "取消" },
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
37
nkebao/src/utils/common.ts
Normal file
37
nkebao/src/utils/common.ts
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
import { Modal } from "antd-mobile";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 通用js调用弹窗,Promise风格
|
||||||
|
* @param content 弹窗内容
|
||||||
|
* @param config 配置项(title, cancelText, confirmText)
|
||||||
|
* @returns Promise<void>
|
||||||
|
*/
|
||||||
|
export const comfirm = (
|
||||||
|
content: string,
|
||||||
|
config?: {
|
||||||
|
title?: string;
|
||||||
|
cancelText?: string;
|
||||||
|
confirmText?: string;
|
||||||
|
}
|
||||||
|
): Promise<void> => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
Modal.show({
|
||||||
|
title: config?.title || "提示",
|
||||||
|
content,
|
||||||
|
closeOnAction: true,
|
||||||
|
actions: [
|
||||||
|
{
|
||||||
|
key: "cancel",
|
||||||
|
text: config?.cancelText || "取消",
|
||||||
|
onClick: () => reject(),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "confirm",
|
||||||
|
text: config?.confirmText || "确认",
|
||||||
|
danger: true,
|
||||||
|
onClick: () => resolve(),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user