#

luxiaotao1123

2024-11-07 20419510279545aabfe27b0d7e8638bbf105dc9f

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
// src/components/BulkUpdateButton.js
import React, { useState } from 'react';
import { useUpdateMany, useRefresh, useNotify, useUnselectAll, Button as RaButton } from 'react-admin';
import { Dialog, DialogActions, DialogContent, DialogTitle, TextField, Select, MenuItem } from '@mui/material';
import UpdateIcon from '@mui/icons-material/Update';
 
const BulkUpdateButton = ({ selectedIds, resource, label }) => {
    console.log('BulkUpdateButton rendered with selectedIds:', selectedIds);
 
    const [open, setOpen] = useState(false);
    const [formData, setFormData] = useState({});
 
    // Hooks 调用顺序调整
    const refresh = useRefresh();
    const notify = useNotify();
    const unselectAll = useUnselectAll(resource);
 
    const [updateMany, { loading }] = useUpdateMany(
        resource,
        { ids: selectedIds, data: formData },
        {
            onSuccess: () => {
                setOpen(false);
                refresh();
                notify('批量更新成功', { type: 'success' });
                unselectAll();
            },
            onError: (error) => {
                notify(`批量更新失败: ${error.message}`, { type: 'warning' });
            }
        }
    );
 
    const handleOpen = () => setOpen(true);
    const handleClose = () => setOpen(false);
 
    const handleChange = (e) => {
        const { name, value } = e.target;
        setFormData({
            ...formData,
            [name]: value,
        });
    };
 
    const handleSubmit = () => {
        updateMany();
    };
 
    return (
        <>
            <RaButton onClick={handleOpen} startIcon={<UpdateIcon />} label={label || '批量修改'}>
                {/* 如果使用 React-Admin 的 Button，可以省略子节点 */}
            </RaButton>
            <Dialog open={open} onClose={handleClose}>
                <DialogTitle>批量修改</DialogTitle>
                <DialogContent>
                    {/* 使用 Select 组件限制状态值 */}
                    <Select
                        margin="dense"
                        name="status"
                        label="状态"
                        fullWidth
                        variant="standard"
                        onChange={handleChange}
                        defaultValue=""
                    >
                        <MenuItem value="">
                            <em>无</em>
                        </MenuItem>
                        <MenuItem value="1">启用</MenuItem>
                        <MenuItem value="0">禁用</MenuItem>
                    </Select>
                    <TextField
                        margin="dense"
                        name="memo"
                        label="备注"
                        type="text"
                        fullWidth
                        variant="standard"
                        onChange={handleChange}
                    />
                </DialogContent>
                <DialogActions>
                    <RaButton onClick={handleClose} color="primary">
                        取消
                    </RaButton>
                    <RaButton onClick={handleSubmit} color="primary" disabled={loading}>
                        确认
                    </RaButton>
                </DialogActions>
            </Dialog>
        </>
    );
};
 
export default BulkUpdateButton;