FEAT => 本次更新项目为:
-设备扫描二维码弹窗优化✔
This commit is contained in:
@@ -10,7 +10,6 @@ import {
|
|||||||
ArrowLeftOutlined,
|
ArrowLeftOutlined,
|
||||||
} from "@ant-design/icons";
|
} from "@ant-design/icons";
|
||||||
import Layout from "@/components/Layout/Layout";
|
import Layout from "@/components/Layout/Layout";
|
||||||
import MeauMobile from "@/components/MeauMobile/MeauMoible";
|
|
||||||
import {
|
import {
|
||||||
fetchDeviceList,
|
fetchDeviceList,
|
||||||
fetchDeviceQRCode,
|
fetchDeviceQRCode,
|
||||||
@@ -19,6 +18,7 @@ import {
|
|||||||
} from "@/api/devices";
|
} from "@/api/devices";
|
||||||
import type { Device } from "@/types/device";
|
import type { Device } from "@/types/device";
|
||||||
import { comfirm } from "@/utils/common";
|
import { comfirm } from "@/utils/common";
|
||||||
|
import { useUserStore } from "@/store/module/user";
|
||||||
|
|
||||||
const Devices: React.FC = () => {
|
const Devices: React.FC = () => {
|
||||||
// 设备列表相关
|
// 设备列表相关
|
||||||
@@ -47,6 +47,7 @@ const Devices: React.FC = () => {
|
|||||||
const [delLoading, setDelLoading] = useState(false);
|
const [delLoading, setDelLoading] = useState(false);
|
||||||
|
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
const { user } = useUserStore();
|
||||||
// 加载设备列表
|
// 加载设备列表
|
||||||
const loadDevices = useCallback(
|
const loadDevices = useCallback(
|
||||||
async (reset = false) => {
|
async (reset = false) => {
|
||||||
@@ -68,7 +69,7 @@ const Devices: React.FC = () => {
|
|||||||
setLoading(false);
|
setLoading(false);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[loading, search, page]
|
[loading, search, page],
|
||||||
);
|
);
|
||||||
|
|
||||||
// 首次加载和搜索
|
// 首次加载和搜索
|
||||||
@@ -86,7 +87,7 @@ const Devices: React.FC = () => {
|
|||||||
setPage(p => p + 1);
|
setPage(p => p + 1);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{ threshold: 0.5 }
|
{ threshold: 0.5 },
|
||||||
);
|
);
|
||||||
if (observerRef.current) observer.observe(observerRef.current);
|
if (observerRef.current) observer.observe(observerRef.current);
|
||||||
return () => observer.disconnect();
|
return () => observer.disconnect();
|
||||||
@@ -112,7 +113,7 @@ const Devices: React.FC = () => {
|
|||||||
setQrLoading(true);
|
setQrLoading(true);
|
||||||
setQrCode(null);
|
setQrCode(null);
|
||||||
try {
|
try {
|
||||||
const accountId = localStorage.getItem("s2_accountId") || "";
|
const accountId = user.s2_accountId;
|
||||||
if (!accountId) throw new Error("未获取到用户信息");
|
if (!accountId) throw new Error("未获取到用户信息");
|
||||||
const res = await fetchDeviceQRCode(accountId);
|
const res = await fetchDeviceQRCode(accountId);
|
||||||
setQrCode(res.qrCode);
|
setQrCode(res.qrCode);
|
||||||
@@ -123,6 +124,11 @@ const Devices: React.FC = () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const addDevice = async () => {
|
||||||
|
await handleGetQr();
|
||||||
|
setAddVisible(true);
|
||||||
|
};
|
||||||
|
|
||||||
// 手动添加设备
|
// 手动添加设备
|
||||||
const handleAddDevice = async () => {
|
const handleAddDevice = async () => {
|
||||||
if (!imei.trim() || !name.trim()) {
|
if (!imei.trim() || !name.trim()) {
|
||||||
@@ -166,7 +172,7 @@ const Devices: React.FC = () => {
|
|||||||
try {
|
try {
|
||||||
await comfirm(
|
await comfirm(
|
||||||
`将删除${selected.length}个设备,删除后本设备配置的计划任务操作也将失效。确认删除?`,
|
`将删除${selected.length}个设备,删除后本设备配置的计划任务操作也将失效。确认删除?`,
|
||||||
{ title: "确认删除", confirmText: "确认删除", cancelText: "取消" }
|
{ title: "确认删除", confirmText: "确认删除", cancelText: "取消" },
|
||||||
);
|
);
|
||||||
handleDelete();
|
handleDelete();
|
||||||
} catch {
|
} catch {
|
||||||
@@ -201,11 +207,7 @@ const Devices: React.FC = () => {
|
|||||||
}
|
}
|
||||||
style={{ background: "#fff" }}
|
style={{ background: "#fff" }}
|
||||||
right={
|
right={
|
||||||
<Button
|
<Button size="small" type="primary" onClick={() => addDevice()}>
|
||||||
size="small"
|
|
||||||
type="primary"
|
|
||||||
onClick={() => setAddVisible(true)}
|
|
||||||
>
|
|
||||||
<AddOutline />
|
<AddOutline />
|
||||||
添加设备
|
添加设备
|
||||||
</Button>
|
</Button>
|
||||||
@@ -301,7 +303,7 @@ const Devices: React.FC = () => {
|
|||||||
setSelected(prev =>
|
setSelected(prev =>
|
||||||
e.target.checked
|
e.target.checked
|
||||||
? [...prev, device.id!]
|
? [...prev, device.id!]
|
||||||
: prev.filter(id => id !== device.id)
|
: prev.filter(id => id !== device.id),
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
onClick={e => e.stopPropagation()}
|
onClick={e => e.stopPropagation()}
|
||||||
@@ -373,7 +375,7 @@ const Devices: React.FC = () => {
|
|||||||
{addTab === "scan" && (
|
{addTab === "scan" && (
|
||||||
<div style={{ textAlign: "center", minHeight: 200 }}>
|
<div style={{ textAlign: "center", minHeight: 200 }}>
|
||||||
<Button
|
<Button
|
||||||
type="error"
|
type="primary"
|
||||||
onClick={handleGetQr}
|
onClick={handleGetQr}
|
||||||
loading={qrLoading}
|
loading={qrLoading}
|
||||||
icon={<QrcodeOutlined />}
|
icon={<QrcodeOutlined />}
|
||||||
@@ -390,6 +392,7 @@ const Devices: React.FC = () => {
|
|||||||
height: 180,
|
height: 180,
|
||||||
background: "#f5f5f5",
|
background: "#f5f5f5",
|
||||||
borderRadius: 8,
|
borderRadius: 8,
|
||||||
|
margin: "0 auto",
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<div style={{ color: "#888", fontSize: 12, marginTop: 8 }}>
|
<div style={{ color: "#888", fontSize: 12, marginTop: 8 }}>
|
||||||
|
|||||||
@@ -106,7 +106,6 @@ const Mine: React.FC = () => {
|
|||||||
// 清除本地存储的用户信息
|
// 清除本地存储的用户信息
|
||||||
localStorage.removeItem("token");
|
localStorage.removeItem("token");
|
||||||
localStorage.removeItem("token_expired");
|
localStorage.removeItem("token_expired");
|
||||||
localStorage.removeItem("s2_accountId");
|
|
||||||
localStorage.removeItem("userInfo");
|
localStorage.removeItem("userInfo");
|
||||||
setShowLogoutDialog(false);
|
setShowLogoutDialog(false);
|
||||||
navigate("/login");
|
navigate("/login");
|
||||||
@@ -120,30 +119,6 @@ const Mine: React.FC = () => {
|
|||||||
navigate(path);
|
navigate(path);
|
||||||
};
|
};
|
||||||
|
|
||||||
// 渲染用户头像
|
|
||||||
const renderUserAvatar = () => {
|
|
||||||
if (currentUserInfo.avatar) {
|
|
||||||
return <img src={currentUserInfo.avatar} alt="头像" />;
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
width: "100%",
|
|
||||||
height: "100%",
|
|
||||||
backgroundColor: "#1890ff",
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "center",
|
|
||||||
color: "white",
|
|
||||||
fontSize: "24px",
|
|
||||||
fontWeight: "bold",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
售
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 渲染功能模块图标
|
// 渲染功能模块图标
|
||||||
const renderModuleIcon = (module: any) => (
|
const renderModuleIcon = (module: any) => (
|
||||||
<div
|
<div
|
||||||
|
|||||||
Reference in New Issue
Block a user