#列浮动和路径流程页

zhou zhou

16 小时以前 2dae7a77781f4ef123a673893a9a7ffb34285f8f

 rsf-admin/src/page/taskPathTemplate/TaskPathTemplateList.jsx

@@ -2,10 +2,11 @@
import { useNavigate } from 'react-router-dom';
import {
    List,
    DataTable,
    DatagridConfigurable,
    SearchInput,
    TopToolbar,
    SelectColumnsButton,
    ColumnsButton,
    EditButton,
    FilterButton,
    CreateButton,
@@ -43,20 +44,11 @@
import MyField from "../components/MyField";
import { PAGE_DRAWER_WIDTH, OPERATE_MODE, DEFAULT_PAGE_SIZE } from '@/config/setting';
import * as Common from '@/utils/common';
import StickyDataTable from "@/page/components/StickyDataTable";
import useTableLayout from '@/utils/useTableLayout';
import { Dialog, DialogContent, DialogActions, Button } from '@mui/material';
import TaskTemplateFlowViewer from "./TaskTemplateFlowViewer";

const StyledDatagrid = styled(DatagridConfigurable)(({ theme }) => ({
    '& .css-1vooibu-MuiSvgIcon-root': {
        height: '.9em'
    },
    '& .RaDatagrid-row': {
        cursor: 'auto'
    },
    '& .column-name': {
    },
    '& .opt': {
        width: 200
    },
}));

const filters = [
    <SearchInput source="condition" alwaysOn />,
@@ -95,11 +87,54 @@
    />,
]

const baseColumns = [
    <NumberField source="id" />,
    <TextField source="templateCode" label="table.field.taskPathTemplate.templateCode" />,
    <TextField source="templateName" label="table.field.taskPathTemplate.templateName" />,
    <TextField source="sourceType" label="table.field.taskPathTemplate.sourceType" />,
    <TextField source="targetType" label="table.field.taskPathTemplate.targetType" />,
    <TextField source="conditionExpression" label="table.field.taskPathTemplate.conditionExpression" />,
    <TextField source="conditionDesc" label="table.field.taskPathTemplate.conditionDesc" />,
    <NumberField source="version" label="table.field.taskPathTemplate.version" />,
    <NumberField source="isCurrent" label="table.field.taskPathTemplate.isCurrent" />,
    <DateField source="effectiveTime" label="table.field.taskPathTemplate.effectiveTime" showTime />,
    <DateField source="expireTime" label="table.field.taskPathTemplate.expireTime" showTime />,
    <NumberField source="priority" label="table.field.taskPathTemplate.priority" />,
    <NumberField source="timeoutMinutes" label="table.field.taskPathTemplate.timeoutMinutes" />,
    <NumberField source="maxRetryTimes" label="table.field.taskPathTemplate.maxRetryTimes" />,
    <NumberField source="retryIntervalSeconds" label="table.field.taskPathTemplate.retryIntervalSeconds" />,
    <TextField source="remark" label="table.field.taskPathTemplate.remark" />,
    <TextField source="createdBy" label="table.field.taskPathTemplate.createdBy" />,
    <TextField source="updatedBy" label="table.field.taskPathTemplate.updatedBy" />,
    <DateField source="createdTime" label="table.field.taskPathTemplate.createdTime" showTime />,
    <DateField source="updatedTime" label="table.field.taskPathTemplate.updatedTime" showTime />,

    <ReferenceField source="updateBy" label="common.field.updateBy" reference="user" link={false} sortable={false}>
        <TextField source="nickname" />
    </ReferenceField>,
    <DateField source="updateTime" label="common.field.updateTime" showTime />,
    <ReferenceField source="createBy" label="common.field.createBy" reference="user" link={false} sortable={false}>
        <TextField source="nickname" />
    </ReferenceField>,
    <DateField source="createTime" label="common.field.createTime" showTime />,
    <BooleanField source="statusBool" label="common.field.status" sortable={false} />,
    <TextField source="memo" label="common.field.memo" sortable={false} />,
]

const TaskPathTemplateList = () => {
    const translate = useTranslate();

    const [createDialog, setCreateDialog] = useState(false);
    const [drawerVal, setDrawerVal] = useState(false);
    const [flowDialog, setFlowDialog] = useState(false);
    const [currentRecord, setCurrentRecord] = useState(null);

    const handleOpenFlow = (record) => {
        setCurrentRecord(record);
        setFlowDialog(true);
    };

    const { boxMaxWidth, boxMaxHeight } = useTableLayout(drawerVal);

    return (
        <Box display="flex">
@@ -120,61 +155,33 @@
                    <TopToolbar>
                        <FilterButton />
                        <MyCreateButton onClick={() => { setCreateDialog(true) }} />
                        <SelectColumnsButton preferenceKey='taskPathTemplate' />
                        <ColumnsButton storeKey='taskPathTemplate' />
                        <MyExportButton />
                    </TopToolbar>
                )}
                perPage={DEFAULT_PAGE_SIZE}
            >
                <StyledDatagrid
                    preferenceKey='taskPathTemplate'
                    bulkActionButtons={() => <BulkDeleteButton mutationMode={OPERATE_MODE} />}
                    rowClick={(id, resource, record) => false}
                    expand={() => <TaskPathTemplatePanel />}
                    expandSingle={true}
                    omit={['id', 'createTime', 'createBy', 'memo']}
                >
                    <NumberField source="id" />
                    <TextField source="templateCode" label="table.field.taskPathTemplate.templateCode" />
                    <TextField source="templateName" label="table.field.taskPathTemplate.templateName" />
                    <TextField source="sourceType" label="table.field.taskPathTemplate.sourceType" />
                    <TextField source="targetType" label="table.field.taskPathTemplate.targetType" />
                    <TextField source="conditionExpression" label="table.field.taskPathTemplate.conditionExpression" />
                    <TextField source="conditionDesc" label="table.field.taskPathTemplate.conditionDesc" />
                    <NumberField source="version" label="table.field.taskPathTemplate.version" />
                    <NumberField source="isCurrent" label="table.field.taskPathTemplate.isCurrent" />
                    <DateField source="effectiveTime" label="table.field.taskPathTemplate.effectiveTime" showTime />
                    <DateField source="expireTime" label="table.field.taskPathTemplate.expireTime" showTime />
                    <NumberField source="priority" label="table.field.taskPathTemplate.priority" />
                    <NumberField source="timeoutMinutes" label="table.field.taskPathTemplate.timeoutMinutes" />
                    <NumberField source="maxRetryTimes" label="table.field.taskPathTemplate.maxRetryTimes" />
                    <NumberField source="retryIntervalSeconds" label="table.field.taskPathTemplate.retryIntervalSeconds" />
                    <TextField source="remark" label="table.field.taskPathTemplate.remark" />
                    <TextField source="createdBy" label="table.field.taskPathTemplate.createdBy" />
                    <TextField source="updatedBy" label="table.field.taskPathTemplate.updatedBy" />
                    <DateField source="createdTime" label="table.field.taskPathTemplate.createdTime" showTime />
                    <DateField source="updatedTime" label="table.field.taskPathTemplate.updatedTime" showTime />

                    <ReferenceField source="updateBy" label="common.field.updateBy" reference="user" link={false} sortable={false}>
                        <TextField source="nickname" />
                    </ReferenceField>
                    <DateField source="updateTime" label="common.field.updateTime" showTime />
                    <ReferenceField source="createBy" label="common.field.createBy" reference="user" link={false} sortable={false}>
                        <TextField source="nickname" />
                    </ReferenceField>
                    <DateField source="createTime" label="common.field.createTime" showTime />
                    <BooleanField source="statusBool" label="common.field.status" sortable={false} />
                    <TextField source="memo" label="common.field.memo" sortable={false} />
                    <WrapperField cellClassName="opt" label="common.field.opt">
                        <EditButton sx={{ padding: '1px', fontSize: '.75rem' }} />
                        <DeleteButton sx={{ padding: '1px', fontSize: '.75rem' }} mutationMode={OPERATE_MODE} />
                    </WrapperField>
                </StyledDatagrid>
                <TableItems drawerVal={drawerVal} onOpenFlow={handleOpenFlow} />
            </List>
            <TaskPathTemplateCreate
                open={createDialog}
                setOpen={setCreateDialog}
            />
            <Dialog
                open={flowDialog}
                onClose={() => setFlowDialog(false)}
                fullWidth
                maxWidth="xl"
            >
                <DialogContent>
                    <TaskTemplateFlowViewer record={currentRecord} />
                </DialogContent>
                <DialogActions>
                    <Button onClick={() => setFlowDialog(false)} color="primary">
                        {translate('ra.action.close')}
                    </Button>
                </DialogActions>
            </Dialog>
            <PageDrawer
                title='TaskPathTemplate Detail'
                drawerVal={drawerVal}
@@ -185,4 +192,82 @@
    )
}


const TableItems = ({ drawerVal, onOpenFlow }) => {
    const { isLoading } = useListContext();

    const { boxMaxWidth, boxMaxHeight } = useTableLayout(drawerVal);

    // Wait, the above simple Button won't work easily because it doesn't have access to the record of the row being rendered
    // when defined in this scope. The `rowClick` works because the datagrid calls it with the record.
    // The `EditButton` works because it uses `useRecordContext`.

    // So I need a custom component for the button that uses `useRecordContext`.

    return (
        <Box sx={{
            position: 'relative',
            maxHeight: boxMaxHeight,
            maxWidth: boxMaxWidth,
            overflowX: 'auto',
            overflowY: 'auto',
            '& .MuiTableCell-root': {
                whiteSpace: 'nowrap',
            }
        }}>
            {baseColumns.length > 0 &&
                <StickyDataTable
                    stickyRight={['opt']}
                    storeKey='taskPathTemplate'
                    bulkActionButtons={false}
                    rowClick={false}
                    hiddenColumns={['id', 'createTime', 'createBy', 'memo', 'statusBool']}
                >
                    {baseColumns
                        .map((column) => (
                            <DataTable.Col
                                key={column.key || column.props.source}
                                source={column.props.source}
                                label={column.props.label}
                                sx={column.props.sx}
                            >
                                {column}
                            </DataTable.Col>
                        ))
                    }
                    <DataTable.Col
                        source="opt"
                        label="common.field.opt"
                    >
                        <WrapperField source="opt" cellClassName="opt" label="common.field.opt">
                            <ViewFlowButton onClick={onOpenFlow} />
                            <EditButton sx={{ padding: '1px', fontSize: '.75rem' }} />
                            <DeleteButton sx={{ padding: '1px', fontSize: '.75rem' }} mutationMode={OPERATE_MODE} />
                        </WrapperField>
                    </DataTable.Col>
                </StickyDataTable>}
        </Box>
    )
}

import AccountTreeIcon from '@mui/icons-material/AccountTree';

const ViewFlowButton = ({ onClick }) => {
    const record = useRecordContext();
    if (!record) return null;
    return (
        <Button
            onClick={(e) => {
                e.stopPropagation();
                onClick && onClick(record);
            }}
            sx={{ padding: '1px', fontSize: '.75rem', minWidth: 'auto', marginRight: 0.5 }}
            color="primary"
        >
            <AccountTreeIcon />
        </Button>
    )
}


export default TaskPathTemplateList;