From 7f70cb15d035f0c233b9e62b9e43aa985317c908 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期一, 04 十一月 2024 10:22:45 +0800
Subject: [PATCH] #
---
zy-acs-flow/src/page/operationRecord/OperationRecordList.jsx | 110 ++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 77 insertions(+), 33 deletions(-)
diff --git a/zy-acs-flow/src/page/operationRecord/OperationRecordList.jsx b/zy-acs-flow/src/page/operationRecord/OperationRecordList.jsx
index 8192c27..940424a 100644
--- a/zy-acs-flow/src/page/operationRecord/OperationRecordList.jsx
+++ b/zy-acs-flow/src/page/operationRecord/OperationRecordList.jsx
@@ -31,15 +31,18 @@
AutocompleteInput,
DeleteButton,
} from 'react-admin';
-import { Box, Typography, Card, Stack } from '@mui/material';
+import { Box, Typography, Card, Chip } from '@mui/material';
import { styled } from '@mui/material/styles';
import OperationRecordPanel from "./OperationRecordPanel";
import EmptyData from "../components/EmptyData";
import MyExportButton from '../components/MyExportButton';
import PageDrawer from "../components/PageDrawer";
import MyField from "../components/MyField";
-import { PAGE_DRAWER_WIDTH, OPERATE_MODE } from '@/config/setting';
+import { PAGE_DRAWER_WIDTH, OPERATE_MODE, DEFAULT_PAGE_SIZE } from '@/config/setting';
import * as Common from '@/utils/common';
+import rowSx from './rowSx';
+import { format } from 'date-fns';
+import OperationDetail from './OperationDetail'
const StyledDatagrid = styled(DatagridConfigurable)(({ theme }) => ({
'& .css-1vooibu-MuiSvgIcon-root': {
@@ -48,10 +51,34 @@
'& .RaDatagrid-row': {
cursor: 'auto'
},
- '& .column-name': {
+ '& .column-url': {
+ maxWidth: '16em',
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ whiteSpace: 'nowrap',
+ },
+ '& .column-request': {
+ maxWidth: '18em',
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ whiteSpace: 'nowrap',
+ },
+ '& .column-response': {
+ maxWidth: '18em',
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ whiteSpace: 'nowrap',
+ },
+ '& .column-spendTime': {
+ maxWidth: '9em',
},
'& .opt': {
width: 200
+ },
+ '& .RaDatagrid-thead': {
+ borderLeftColor: 'transparent',
+ borderLeftWidth: 5,
+ borderLeftStyle: 'solid',
},
}));
@@ -63,12 +90,10 @@
<TextInput source="namespace" label="table.field.operationRecord.namespace" />,
<TextInput source="url" label="table.field.operationRecord.url" />,
<TextInput source="appkey" label="table.field.operationRecord.appkey" />,
- <TextInput source="timestamp" label="table.field.operationRecord.timestamp" />,
<TextInput source="clientIp" label="table.field.operationRecord.clientIp" />,
<TextInput source="request" label="table.field.operationRecord.request" />,
<TextInput source="response" label="table.field.operationRecord.response" />,
<NumberInput source="spendTime" label="table.field.operationRecord.spendTime" />,
- <TextInput source="err" label="table.field.operationRecord.err" />,
<SelectInput source="result" label="table.field.operationRecord.result"
choices={[
{ id: 1, name: '鎴愬姛' },
@@ -76,18 +101,10 @@
]}
/>,
<ReferenceInput source="userId" reference="user">
- <AutocompleteInput label="table.field.operationRecord.userId" optionText="nickname" />
+ <AutocompleteInput label="table.field.operationRecord.userId" optionText="nickname" filterToQuery={(val) => ({ nickname: val })} />
</ReferenceInput>,
<TextInput label="common.field.memo" source="memo" />,
- <SelectInput
- label="common.field.status"
- source="status"
- choices={[
- { id: '1', name: 'common.enums.statusTrue' },
- { id: '0', name: 'common.enums.statusFalse' },
- ]}
- />,
]
const OperationRecordList = () => {
@@ -107,7 +124,7 @@
}),
marginRight: !!drawerVal ? `${PAGE_DRAWER_WIDTH}px` : 0,
}}
- title={"menu.operationRecord"}
+ title={"menu.operation"}
empty={<EmptyData onClick={() => { setCreateDialog(true) }} />}
filters={filters}
sort={{ field: "create_time", order: "desc" }}
@@ -118,38 +135,36 @@
<MyExportButton />
</TopToolbar>
)}
- perPage={25}
+ perPage={DEFAULT_PAGE_SIZE}
>
<StyledDatagrid
preferenceKey='operationRecord'
- bulkActionButtons={() => <BulkDeleteButton mutationMode={OPERATE_MODE} />}
- rowClick={(id, resource, record) => false}
- expand={() => <OperationRecordPanel />}
- expandSingle={true}
- omit={['id', 'createTime', 'memo']}
+ bulkActionButtons={false}
+ rowClick={(id, resource, record) => {
+ setDrawerVal(!!drawerVal && drawerVal === record ? null : record);
+ return false;
+ }}
+ omit={['appkey', 'statusBool', 'err', 'updateTime', 'createTime', 'memo']}
+ rowSx={rowSx(drawerVal || null)}
>
<NumberField source="id" />
<TextField source="namespace" label="table.field.operationRecord.namespace" />
<TextField source="url" label="table.field.operationRecord.url" />
- <TextField source="appkey" label="table.field.operationRecord.appkey" />
- <TextField source="timestamp" label="table.field.operationRecord.timestamp" />
- <TextField source="clientIp" label="table.field.operationRecord.clientIp" />
- <TextField source="request" label="table.field.operationRecord.request" />
- <TextField source="response" label="table.field.operationRecord.response" />
- <NumberField source="spendTime" label="table.field.operationRecord.spendTime" />
- <TextField source="err" label="table.field.operationRecord.err" />
- <TextField source="result$" label="table.field.operationRecord.result" sortable={false} />
<ReferenceField source="userId" label="table.field.operationRecord.userId" reference="user" link={false}>
<TextField source="nickname" />
</ReferenceField>
-
+ <TextField source="appkey" label="table.field.operationRecord.appkey" />
+ <FormattedTimestampField source="timestamp" label="table.field.operationRecord.timestamp" />
+ <NumberField source="spendTime" label="table.field.operationRecord.spendTime" sx={{ fontWeight: 'bold' }} />
+ <TextField source="request" label="table.field.operationRecord.request" sortable={false} hidden={!!drawerVal} />
+ <TextField source="response" label="table.field.operationRecord.response" sortable={false} hidden={!!drawerVal} />
+ <ResultField source="result" label="table.field.operationRecord.result" />
+ <TextField source="err" label="table.field.operationRecord.err" />
+ <TextField source="clientIp" label="table.field.operationRecord.clientIp" />
<DateField source="updateTime" label="common.field.updateTime" showTime />
<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">
- <DeleteButton sx={{ padding: '1px', fontSize: '.75rem' }} mutationMode={OPERATE_MODE} />
- </WrapperField>
</StyledDatagrid>
</List>
<PageDrawer
@@ -157,9 +172,38 @@
drawerVal={drawerVal}
setDrawerVal={setDrawerVal}
>
+ <OperationDetail
+ operation={drawerVal}
+ />
</PageDrawer>
</Box>
)
}
+const FormattedTimestampField = ({ source }) => {
+ const record = useRecordContext();
+ const val = record[source];
+ if (!val) return null;
+ const formattedDate = format(new Date(Number(val)), 'yyyy-MM-dd HH:mm:ss');
+ return <span>{formattedDate}</span>;
+};
+
+const ResultField = ({ source }) => {
+ const record = useRecordContext();
+ const val = record[source];
+ return (
+ <>
+ {val === 1
+ ? (
+ <Chip label="success" color="success" variant="outlined" size="small" />
+ )
+ : (
+ <Chip label="error" color="error" variant="outlined" size="small" />
+ )
+ }
+
+ </>
+ )
+}
+
export default OperationRecordList;
--
Gitblit v1.9.1