From 84a994b2123b9798dfd64e36a4a89fdc252e5a1b Mon Sep 17 00:00:00 2001
From: verou <857149855@qq.com>
Date: 星期五, 28 三月 2025 09:59:51 +0800
Subject: [PATCH] refactor:单据表格重写
---
rsf-admin/src/page/asnOrder/AsnOrderPanel.jsx | 168 ++++++++++++++++++++++++++------------------------------
1 files changed, 78 insertions(+), 90 deletions(-)
diff --git a/rsf-admin/src/page/asnOrder/AsnOrderPanel.jsx b/rsf-admin/src/page/asnOrder/AsnOrderPanel.jsx
index 36e5df2..5d1eeb6 100644
--- a/rsf-admin/src/page/asnOrder/AsnOrderPanel.jsx
+++ b/rsf-admin/src/page/asnOrder/AsnOrderPanel.jsx
@@ -1,5 +1,5 @@
import React, { useState, useRef, useEffect, useMemo } from "react";
-import { Box, Card, CardContent, Grid, Typography, Tooltip, Paper, TableContainer, Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';
+import { Box, Card, CardContent, Grid, Typography, Button, TextField, Tooltip, Paper, TableContainer, Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';
import {
useTranslate,
useRecordContext,
@@ -9,20 +9,24 @@
import * as Common from '@/utils/common'
import { styled } from "@mui/material/styles";
import request from '@/utils/request';
+import debounce from 'lodash/debounce';
+import { DataGrid } from '@mui/x-data-grid';
const AsnOrderPanel = () => {
const record = useRecordContext();
if (!record) return null;
const translate = useTranslate();
const notify = useNotify();
const [rows, setRows] = useState([]);
+ const [maktx, setMaktx] = useState('');
const asnId = record.id;
useEffect(() => {
- http();
- }, [asnId]);
+ debouncedHttp({ maktx });
+ }, [asnId, maktx]);
- const http = async () => {
- const res = await request.post('/asnOrderItem/page', { asnId });
+
+ const http = async (parmas) => {
+ const res = await request.post('/asnOrderItem/page', { ...parmas, asnId });
if (res?.data?.code === 200) {
setRows(res.data.data.records)
} else {
@@ -30,6 +34,7 @@
}
}
+ const debouncedHttp = useMemo(() => debounce(http, 300), []);
const StyledTableRow = styled(TableRow)(({ theme }) => ({
"& .MuiButtonBase-root.": {
@@ -49,130 +54,113 @@
const columns = [
{
- id: 'asnId',
- label: 'table.field.asnOrderItem.asnId',
- minWidth: 100,
+ field: 'asnId',
+ headerName: translate('table.field.asnOrderItem.asnId')
},
{
- id: 'asnCode',
- label: 'table.field.asnOrderItem.asnCode',
- minWidth: 100,
+ field: 'asnCode',
+ headerName: translate('table.field.asnOrderItem.asnCode')
},
{
- id: 'poDetlId',
- label: 'table.field.asnOrderItem.poDetlId',
- minWidth: 100,
+ field: 'poDetlId',
+ headerName: translate('table.field.asnOrderItem.poDetlId')
},
{
- id: 'poDetlCode',
- label: 'table.field.asnOrderItem.poDetlCode',
- minWidth: 100,
+ field: 'poDetlCode',
+ headerName: translate('table.field.asnOrderItem.poDetlCode')
},
{
- id: 'matnrId',
- label: 'table.field.asnOrderItem.matnrId',
- minWidth: 100,
+ field: 'matnrId',
+ headerName: translate('table.field.asnOrderItem.matnrId')
},
{
- id: 'maktx',
- label: 'table.field.asnOrderItem.maktx',
- minWidth: 100,
+ field: 'maktx',
+ headerName: translate('table.field.asnOrderItem.maktx')
},
{
- id: 'anfme',
- label: 'table.field.asnOrderItem.anfme',
- minWidth: 100,
+ field: 'anfme',
+ headerName: translate('table.field.asnOrderItem.anfme')
},
{
- id: 'stockUnit',
- label: 'table.field.asnOrderItem.stockUnit',
- minWidth: 100,
+ field: 'stockUnit',
+ headerName: translate('table.field.asnOrderItem.stockUnit')
},
{
- id: 'purQty',
- label: 'table.field.asnOrderItem.purQty',
- minWidth: 100,
+ field: 'purQty',
+ headerName: translate('table.field.asnOrderItem.purQty')
},
{
- id: 'purUnit',
- label: 'table.field.asnOrderItem.purUnit',
- minWidth: 100,
+ field: 'purUnit',
+ headerName: translate('table.field.asnOrderItem.purUnit')
},
{
- id: 'qty',
- label: 'table.field.asnOrderItem.qty',
- minWidth: 100,
+ field: 'qty',
+ headerName: translate('table.field.asnOrderItem.qty')
},
{
- id: 'splrCode',
- label: 'table.field.asnOrderItem.splrCode',
- minWidth: 100,
+ field: 'splrCode',
+ headerName: translate('table.field.asnOrderItem.splrCode')
},
{
- id: 'splrName',
- label: 'table.field.asnOrderItem.splrName',
- minWidth: 100,
+ field: 'splrName',
+ headerName: translate('table.field.asnOrderItem.splrName')
},
{
- id: 'qrcode',
- label: 'table.field.asnOrderItem.qrcode',
- minWidth: 100,
+ field: 'barcode',
+ headerName: translate('table.field.asnOrderItem.barcode')
},
{
- id: 'barcode',
- label: 'table.field.asnOrderItem.barcode',
- minWidth: 100,
- },
- {
- id: 'packName',
- label: 'table.field.asnOrderItem.packName',
- minWidth: 100,
+ field: 'packName',
+ headerName: translate('table.field.asnOrderItem.packName')
}]
+
+ const [selectedRows, setSelectedRows] = useState([]);
+
+ const handleSelectionChange = (ids) => {
+ setSelectedRows(ids)
+
+ };
+ const maktxChange = (value) => {
+ setMaktx(value)
+ }
+
+ const wakbarcode = () => {
+
+ }
+
+ const wakprint = () => {
+
+ }
return (
-
<Box sx={{
position: 'relative',
padding: '5px 10px'
}}>
- <TableContainer component={Paper} >
- <Table size="small" >
- <TableHead>
- <StyledTableRow key={'head'}>
- {columns.map((column, idx) => {
- const value = column.label;
- return (
- <>
- <StyledTableCell
- key={column.id}
- align={column.align || "left"}
- // style={{ paddingLeft: idx === 0 && (depth * 16 + 16) }}
- >
- {column.format ? column.format(value) : translate(value)}
- </StyledTableCell>
- </>
- );
- })}
- </StyledTableRow>
- </TableHead>
+ <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '4px', alignItems: 'center' }}>
+ <TextField value={maktx} onChange={(e) => maktxChange(e.target.value)} label="鎼滅储鐗╂枡" variant="outlined" sx={{ width: '300px' }} />
- <TableBody>
- {rows.map((row) => (
- <StyledTableRow key={row.id + Math.random()}>
- {columns.map((column) => (
- <StyledTableCell key={column.id} >
- {row[column.id]}
- </StyledTableCell>
- ))}
- </StyledTableRow>
- ))}
+ <div style={{ display: 'flex', gap: '10px' }}>
+ <Button variant="contained" onClick={wakbarcode}>鐢熸垚鏉＄爜</Button>
+ <Button variant="contained" onClick={wakprint}>鎵撳嵃</Button>
+ </div>
+ </div>
- </TableBody>
- </Table>
- </TableContainer>
- </Box>
+
+ <DataGrid
+ size="small"
+ rows={rows}
+ columns={columns}
+ checkboxSelection
+ onRowSelectionModelChange={handleSelectionChange}
+ selectionModel={selectedRows}
+ disableColumnMenu={true}
+ disableColumnSorting
+ disableMultipleColumnsSorting
+ />
+ </Box >
);
};
--
Gitblit v1.9.1