From fd722d90010c7b6895df4a1d591900a44ea8bbdf Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期二, 10 九月 2024 15:56:40 +0800
Subject: [PATCH] #
---
zy-acs-flow/src/page/operationRecord/rowSx.jsx | 40 ++++++++++++++++++++
zy-acs-flow/src/page/operationRecord/OperationRecordList.jsx | 72 ++++++++++++++++++++++++------------
2 files changed, 88 insertions(+), 24 deletions(-)
diff --git a/zy-acs-flow/src/page/operationRecord/OperationRecordList.jsx b/zy-acs-flow/src/page/operationRecord/OperationRecordList.jsx
index 8c1a190..cb0d505 100644
--- a/zy-acs-flow/src/page/operationRecord/OperationRecordList.jsx
+++ b/zy-acs-flow/src/page/operationRecord/OperationRecordList.jsx
@@ -31,7 +31,7 @@
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";
@@ -40,6 +40,8 @@
import MyField from "../components/MyField";
import { PAGE_DRAWER_WIDTH, OPERATE_MODE } from '@/config/setting';
import * as Common from '@/utils/common';
+import rowSx from './rowSx';
+import { format } from 'date-fns';
const StyledDatagrid = styled(DatagridConfigurable)(({ theme }) => ({
'& .css-1vooibu-MuiSvgIcon-root': {
@@ -60,8 +62,16 @@
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
},
+ '& .column-spendTime': {
+ maxWidth: '9em',
+ },
'& .opt': {
width: 200
+ },
+ '& .RaDatagrid-thead': {
+ borderLeftColor: 'transparent',
+ borderLeftWidth: 5,
+ borderLeftStyle: 'solid',
},
}));
@@ -73,12 +83,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: '鎴愬姛' },
@@ -90,14 +98,6 @@
</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 = () => {
@@ -132,27 +132,25 @@
>
<StyledDatagrid
preferenceKey='operationRecord'
- bulkActionButtons={() => <BulkDeleteButton mutationMode={OPERATE_MODE} />}
+ bulkActionButtons={false}
rowClick={(id, resource, record) => false}
- expand={() => <OperationRecordPanel />}
- expandSingle={true}
- omit={['id', 'appkey', 'statusBool', 'err', 'updateTime', 'createTime', 'memo']}
+ 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} />
+ <TextField source="response" label="table.field.operationRecord.response" sortable={false} />
+ <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} />
@@ -169,4 +167,30 @@
)
}
+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;
diff --git a/zy-acs-flow/src/page/operationRecord/rowSx.jsx b/zy-acs-flow/src/page/operationRecord/rowSx.jsx
new file mode 100644
index 0000000..38587fc
--- /dev/null
+++ b/zy-acs-flow/src/page/operationRecord/rowSx.jsx
@@ -0,0 +1,40 @@
+import green from '@mui/material/colors/green';
+import orange from '@mui/material/colors/orange';
+import red from '@mui/material/colors/red';
+
+const rowSx = (selectedRow) => (record) => {
+ let style = {};
+ if (!record) {
+ return style;
+ }
+ if (selectedRow && selectedRow === record.id) {
+ style = {
+ ...style,
+ backgroundColor: 'action.selected',
+ };
+ }
+ if (record.result === 1)
+ return {
+ ...style,
+ borderLeftColor: green[500],
+ borderLeftWidth: 5,
+ borderLeftStyle: 'solid',
+ };
+ if (record.result === 2)
+ return {
+ ...style,
+ borderLeftColor: orange[500],
+ borderLeftWidth: 5,
+ borderLeftStyle: 'solid',
+ };
+ if (record.result === 0)
+ return {
+ ...style,
+ borderLeftColor: red[500],
+ borderLeftWidth: 5,
+ borderLeftStyle: 'solid',
+ };
+ return style;
+};
+
+export default rowSx;
--
Gitblit v1.9.1