fnvtk/cunkebao_v3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(批量加入分组): 更新BatchAddModal组件以支持确认操作

Browse Source 
在BatchAddModal组件中新增了确认按钮，优化了用户体验。更新onConfirm函数以接收选项参数，并调整了组件结构以提升可读性。同时，移除了未使用的Toast提示逻辑，简化了批量加入的处理逻辑。
This commit is contained in:
超级老白兔
2025-09-22 10:37:11 +08:00
parent 91a95e20a2
commit a9c41aa9c3
2 changed files with 52 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
Cunkebao/src/pages/mobile/mine/traffic-pool/list/BatchAddModal.tsx
View File

@@ -1,5 +1,5 @@
import React from "react"; import React from "react";
import { Popup, Selector } from "antd-mobile"; import { Popup, Selector, Button } from "antd-mobile";
import type { PackageOption } from "./data"; import type { PackageOption } from "./data";
interface BatchAddModalProps { interface BatchAddModalProps {
@@ -9,7 +9,7 @@ interface BatchAddModalProps {
batchTarget: string; batchTarget: string;
setBatchTarget: (v: string) => void; setBatchTarget: (v: string) => void;
selectedCount: number; selectedCount: number;
onConfirm: () => void; onConfirm: (options) => void;
} }
const BatchAddModal: React.FC<BatchAddModalProps> = ({ const BatchAddModal: React.FC<BatchAddModalProps> = ({
@@ -20,38 +20,40 @@ const BatchAddModal: React.FC<BatchAddModalProps> = ({
setBatchTarget, setBatchTarget,
selectedCount, selectedCount,
onConfirm, onConfirm,
}) => ( }) => {
// <Modal visible={visible} title="批量加入分组" onConfirm={onConfirm}> const handSubmit = () => {
// <div style={{ marginBottom: 12 }}> onConfirm(packageOptions);
// <div>选择目标分组</div> };
// <Selector return (
// options={packageOptions.map(p => ({ label: p.name, value: p.id }))} <Popup
// value={[batchTarget]} visible={visible}
// onChange={v => setBatchTarget(v[0])} onMaskClick={() => onClose()}
// /> position="bottom"
// </div> bodyStyle={{ height: "80vh" }}
// <div style={{ color: "#888", fontSize: 13 }}> >
// 将选中的{selectedCount}个用户加入所选分组 <div style={{ marginBottom: 12, padding: 10 }}>
// </div> <div style={{ marginBottom: 12 }}>选择目标分组</div>
// </Modal> <Selector
<Popup options={packageOptions.map(p => ({ label: p.name, value: p.id }))}
visible={visible} value={[batchTarget]}
onMaskClick={() => onClose()} onChange={v => setBatchTarget(v[0])}
position="bottom" />
bodyStyle={{ height: "80vh" }} <div
> style={{
<div style={{ marginBottom: 12 }}> color: "#888",
<div>选择目标分组</div> fontSize: 12,
<Selector paddingTop: 15,
options={packageOptions.map(p => ({ label: p.name, value: p.id }))} marginBottom: 20,
value={[batchTarget]} }}
onChange={v => setBatchTarget(v[0])} >
/> 将选中的{selectedCount}个用户加入所选分组
</div> </div>
<div style={{ color: "#888", fontSize: 13 }}> <Button onClick={handSubmit} color="primary" block>
将选中的{selectedCount}个用户加入所选分组 确定
</div> </Button>
</Popup> </div>
); </Popup>
);
};
export default BatchAddModal; export default BatchAddModal;

29
Cunkebao/src/pages/mobile/mine/traffic-pool/list/dataAnyx.tsx
View File

@@ -5,7 +5,6 @@ import {
fetchScenarioOptions, fetchScenarioOptions,
} from "./api"; } from "./api";
import type { TrafficPoolUser, PackageOption, ScenarioOption } from "./data"; import type { TrafficPoolUser, PackageOption, ScenarioOption } from "./data";
import { Toast } from "antd-mobile";
export function useTrafficPoolListLogic() { export function useTrafficPoolListLogic() {
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
@@ -116,19 +115,21 @@ export function useTrafficPoolListLogic() {
}; };
// 批量加入分组/流量池 // 批量加入分组/流量池
const handleBatchAdd = () => { const handleBatchAdd = options => {
if (!batchTarget) { console.log("批量加入分组", options);
Toast.show({ content: "请选择目标分组", position: "top" });
return; // if (!batchTarget) {
} // Toast.show({ content: "请选择目标分组", position: "top" });
// TODO: 调用后端批量接口，这里仅模拟 // return;
Toast.show({ // }
content: `已将${selectedIds.length}个用户加入${packageOptions.find(p => p.id === batchTarget)?.name || ""}`, // // TODO: 调用后端批量接口，这里仅模拟
position: "top", // Toast.show({
}); // content: `已将${selectedIds.length}个用户加入${packageOptions.find(p => p.id === batchTarget)?.name || ""}`,
setBatchModal(false); // position: "top",
setSelectedIds([]); // });
setBatchTarget(""); // setBatchModal(false);
// setSelectedIds([]);
// setBatchTarget("");
// 可刷新列表 // 可刷新列表
}; };