#

luxiaotao1123

2024-11-08 e5ff577d91179d9f0ae1f689d182bb2e0465fca1

 zy-acs-flow/src/page/loc/BulkUpdateButton.jsx

@@ -1,94 +1,138 @@
// 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 {
    useUpdateMany,
    useRefresh,
    useNotify,
    useListContext,
    useUnselectAll,
    Button as RaButton,
    Form,
    ReferenceInput,
    AutocompleteInput,
    NumberInput,
    TextInput,
    useTranslate,
} from 'react-admin';
import { Dialog, DialogActions, DialogContent, DialogTitle, Grid, Stack, Divider } from '@mui/material';
import UpdateIcon from '@mui/icons-material/Update';
import MemoInput from "../components/MemoInput";
import ContentSave from '@mui/icons-material/Save';
import CloseIcon from '@mui/icons-material/Close';

const BulkUpdateButton = ({ selectedIds, resource, label }) => {
    console.log('BulkUpdateButton rendered with selectedIds:', selectedIds);

const BulkUpdateButton = ({ resource, label = 'ra.action.update', ...rest }) => {
    const [open, setOpen] = useState(false);
    const [formData, setFormData] = useState({});

    // Hooks 调用顺序调整
    const refresh = useRefresh();
    const notify = useNotify();
    const translate = useTranslate();
    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 { selectedIds } = useListContext();

    const handleOpen = () => setOpen(true);
    const handleClose = () => setOpen(false);

    const handleChange = (e) => {
        const { name, value } = e.target;
        setFormData({
            ...formData,
            [name]: value,
        });
    };
    const [updateMany, { loading }] = useUpdateMany(
        resource,
        { ids: selectedIds, data: {} },
        {
            onSuccess: () => {
                setOpen(false);
                refresh();
                notify('common.response.success', { type: 'info' });
                unselectAll();
            },
            onError: (error) => {
                notify(error.msg || 'common.response.fail', { type: 'error' });
            }
        }
    );

    const handleSubmit = () => {
        updateMany();
    const handleSubmit = (data) => {
        const filteredData = Object.fromEntries(
            Object.entries(data).filter(([key, value]) => value !== null && value !== undefined)
        );
        delete filteredData['memoWrap'];
        if (Object.keys(filteredData).length > 0) {
            console.log(filteredData);
            updateMany({
                data: filteredData,
            });
        } else {
            notify('common.response.fail', { type: 'warning' });
        }
    };

    return (
        <>
            <RaButton onClick={handleOpen} startIcon={<UpdateIcon />} label={label || '批量修改'}>
                {/* 如果使用 React-Admin 的 Button，可以省略子节点 */}
            </RaButton>
            <RaButton onClick={handleOpen} startIcon={<UpdateIcon />} label={label} />
            <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>
                <Form onSubmit={handleSubmit}>
                    <DialogTitle>{translate('ra.action.update')}</DialogTitle>
                    <DialogContent>
                        <Grid container rowSpacing={2} columnSpacing={2}>
                            <Grid item xs={6} display="flex" gap={1}>
                                <ReferenceInput
                                    source="code"
                                    reference="code"
                                >
                                    <AutocompleteInput
                                        label="table.field.loc.code"
                                        optionText="data"
                                        filterToQuery={(val) => ({ data: val })}
                                    />
                                </ReferenceInput>
                            </Grid>
                            <Grid item xs={6} display="flex" gap={1}>
                                <ReferenceInput
                                    source="locSts"
                                    reference="locSts"
                                >
                                    <AutocompleteInput
                                        label="table.field.loc.locSts"
                                        optionText="name"
                                        filterToQuery={(val) => ({ name: val })}
                                    />
                                </ReferenceInput>
                            </Grid>
                            <Grid item xs={6} display="flex" gap={1}>
                                <NumberInput
                                    label="table.field.loc.offset"
                                    source="offset"
                                />
                            </Grid>
                            <Grid item xs={12} display="flex" gap={1}>
                                <Stack direction="column" spacing={1} width={'100%'}>
                                    <MemoInput />
                                </Stack>
                            </Grid>
                        </Grid>
                    </DialogContent>
                    <Divider sx={{ mb: 1 }} />
                    <DialogActions sx={{ mb: 1 }}>
                        <RaButton
                            onClick={handleClose}
                            variant="contained"
                            color="inherit"
                            size='large'
                            label='ra.action.cancel'
                            sx={{ mr: 1 }}
                        >
                            <CloseIcon />
                        </RaButton>
                        <RaButton
                            type="submit"
                            variant="contained"
                            color="primary"
                            size='large'
                            label='ra.action.save'
                            disabled={loading}
                            sx={{ mr: 1 }}
                        >
                            <ContentSave />
                        </RaButton>
                    </DialogActions>
                </Form>
            </Dialog >
        </>
    );
};