From 6081cc27faedbe6f949f9db34d508e48f8e2be85 Mon Sep 17 00:00:00 2001 From: MartialBE Date: Sun, 19 May 2024 22:41:54 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=96=20chore:=20Model=20price=20page=20?= =?UTF-8?q?add=20toolbar(#196)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../views/ModelPrice/component/TableRow.js | 39 ------ web/src/views/ModelPrice/index.js | 131 ++++++++++++------ web/src/views/Pricing/single.js | 35 +++-- 3 files changed, 116 insertions(+), 89 deletions(-) delete mode 100644 web/src/views/ModelPrice/component/TableRow.js diff --git a/web/src/views/ModelPrice/component/TableRow.js b/web/src/views/ModelPrice/component/TableRow.js deleted file mode 100644 index 1ab37abc..00000000 --- a/web/src/views/ModelPrice/component/TableRow.js +++ /dev/null @@ -1,39 +0,0 @@ -import PropTypes from 'prop-types'; - -import { TableRow, TableCell } from '@mui/material'; - -import Label from 'ui-component/Label'; -import { copy } from 'utils/common'; - -export default function PricesTableRow({ item }) { - return ( - <> - - - - - - {item.type} - {item.channel_type} - - {item.input} - {item.output} - - - ); -} - -PricesTableRow.propTypes = { - item: PropTypes.object, - userModelList: PropTypes.object, - ownedby: PropTypes.array -}; diff --git a/web/src/views/ModelPrice/index.js b/web/src/views/ModelPrice/index.js index 057c3fe5..2b591e61 100644 --- a/web/src/views/ModelPrice/index.js +++ b/web/src/views/ModelPrice/index.js @@ -1,14 +1,15 @@ -import { useState, useEffect, useCallback } from 'react'; +import { useState, useEffect, useCallback, useMemo } from 'react'; -import Table from '@mui/material/Table'; -import TableBody from '@mui/material/TableBody'; -import TableContainer from '@mui/material/TableContainer'; -import PerfectScrollbar from 'react-perfect-scrollbar'; - -import { Card } from '@mui/material'; -import PricesTableRow from './component/TableRow'; -import TableNoData from 'ui-component/TableNoData'; -import KeywordTableHead from 'ui-component/TableHead'; +import { Card, Stack, Typography } from '@mui/material'; +import { + DataGrid, + GridToolbarContainer, + GridToolbarColumnsButton, + GridToolbarFilterButton, + GridToolbarQuickFilter, + GridToolbarDensitySelector +} from '@mui/x-data-grid'; +import { zhCN } from '@mui/x-data-grid/locales'; import { API } from 'utils/api'; import { showError } from 'utils/common'; import { ValueFormatter, priceType } from 'views/Pricing/component/util'; @@ -77,18 +78,20 @@ export default function ModelPrice() { } let newRows = []; - userModelList.forEach((model) => { + userModelList.forEach((model, index) => { const price = prices[model.id]; - const type_label = priceType.find((pt) => pt.value === price?.type); - const channel_label = ownedby.find((ob) => ob.value === price?.channel_type); + // const type_label = priceType.find((pt) => pt.value === price?.type); + // const channel_label = ownedby.find((ob) => ob.value === price?.channel_type); newRows.push({ + id: index + 1, model: model.id, - type: type_label?.label || '未知', - channel_type: channel_label?.label || '未知', - input: ValueFormatter(price?.input !== undefined && price?.input !== null ? price.input : 30), - output: ValueFormatter(price?.output !== undefined && price?.output !== null ? price.output : 30) + type: price?.type, + channel_type: price?.channel_type, + input: price?.input !== undefined && price?.input !== null ? price.input : 30, + output: price?.output !== undefined && price?.output !== null ? price.output : 30 }); }); + console.log(newRows); setRows(newRows); }, [userModelList, ownedby, prices]); @@ -105,31 +108,81 @@ export default function ModelPrice() { fetchData(); }, [fetchOwnedby, fetchUserModelList, fetchPrices]); + const modelRatioColumns = useMemo( + () => [ + { + field: 'model', + sortable: true, + headerName: '模型名称', + minWidth: 220, + flex: 1 + }, + { + field: 'type', + sortable: true, + headerName: '类型', + flex: 0.5, + minWidth: 100, + type: 'singleSelect', + valueOptions: priceType + }, + { + field: 'channel_type', + sortable: true, + headerName: '供应商', + flex: 0.5, + minWidth: 100, + type: 'singleSelect', + valueOptions: ownedby + }, + { + field: 'input', + sortable: true, + headerName: '输入倍率', + flex: 0.8, + minWidth: 150, + type: 'number', + valueFormatter: (params) => ValueFormatter(params.value) + }, + { + field: 'output', + sortable: true, + headerName: '输出倍率', + flex: 0.8, + minWidth: 150, + type: 'number', + valueFormatter: (params) => ValueFormatter(params.value) + } + ], + [ownedby] + ); + + function EditToolbar() { + return ( + + + + + + + ); + } + return ( <> + + 可用模型 + - - - - - - {rows.length === 0 ? ( - - ) : ( - rows.map((row) => ) - )} - -
- - + ); diff --git a/web/src/views/Pricing/single.js b/web/src/views/Pricing/single.js index f6dd90b2..857dec58 100644 --- a/web/src/views/Pricing/single.js +++ b/web/src/views/Pricing/single.js @@ -1,6 +1,17 @@ import PropTypes from 'prop-types'; import { useState, useEffect, useMemo, useCallback } from 'react'; -import { GridRowModes, DataGrid, GridToolbarContainer, GridActionsCellItem } from '@mui/x-data-grid'; +import { + GridRowModes, + DataGrid, + GridToolbarContainer, + GridActionsCellItem, + GridToolbarExport, + GridToolbarColumnsButton, + GridToolbarFilterButton, + GridToolbarQuickFilter, + GridToolbarDensitySelector +} from '@mui/x-data-grid'; +import { zhCN } from '@mui/x-data-grid/locales'; import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material'; import AddIcon from '@mui/icons-material/Add'; import EditIcon from '@mui/icons-material/Edit'; @@ -58,6 +69,11 @@ function EditToolbar({ setRows, setRowModesModel }) { + + + + + ); } @@ -185,8 +201,7 @@ const Single = ({ ownedby, prices, reloadData }) => { headerName: '模型名称', minWidth: 220, flex: 1, - editable: true, - hideable: false + editable: true }, { field: 'type', @@ -196,8 +211,7 @@ const Single = ({ ownedby, prices, reloadData }) => { minWidth: 100, type: 'singleSelect', valueOptions: priceType, - editable: true, - hideable: false + editable: true }, { field: 'channel_type', @@ -207,8 +221,7 @@ const Single = ({ ownedby, prices, reloadData }) => { minWidth: 100, type: 'singleSelect', valueOptions: ownedby, - editable: true, - hideable: false + editable: true }, { field: 'input', @@ -218,8 +231,7 @@ const Single = ({ ownedby, prices, reloadData }) => { minWidth: 150, type: 'number', editable: true, - valueFormatter: (params) => ValueFormatter(params.value), - hideable: false + valueFormatter: (params) => ValueFormatter(params.value) }, { field: 'output', @@ -229,8 +241,7 @@ const Single = ({ ownedby, prices, reloadData }) => { minWidth: 150, type: 'number', editable: true, - valueFormatter: (params) => ValueFormatter(params.value), - hideable: false + valueFormatter: (params) => ValueFormatter(params.value) }, { field: 'actions', @@ -241,6 +252,7 @@ const Single = ({ ownedby, prices, reloadData }) => { // width: 100, cellClassName: 'actions', hideable: false, + disableExport: true, getActions: ({ id }) => { const isInEditMode = rowModesModel[id]?.mode === GridRowModes.Edit; @@ -338,6 +350,7 @@ const Single = ({ ownedby, prices, reloadData }) => { onRowModesModelChange={handleRowModesModelChange} processRowUpdate={processRowUpdate} onProcessRowUpdateError={handleProcessRowUpdateError} + localeText={zhCN.components.MuiDataGrid.defaultProps.localeText} // onCellDoubleClick={(params, event) => { // event.defaultMuiPrevented = true; // }}