wms-master.git - Gitblit

			@@ -1,92 +1,139 @@
			import React, { useState, useRef, useEffect, useMemo } from "react";
			import { Box, Card, CardContent, Grid, Typography, Tooltip } 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,
			useNotify,
			useRefresh,
			useListContext,
			} from 'react-admin';
			import PanelTypography from "../components/PanelTypography";
			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';
			import { width } from "@mui/system";

			const QlyInspectPanel = () => {
			const record = useRecordContext();
			if (!record) return null;
			const translate = useTranslate();
			return (
			<>
			<Card sx={{ width: { xs: 300, sm: 500, md: 600, lg: 800 }, margin: 'auto' }}>
			<CardContent>
			<Grid container spacing={2}>
			<Grid item xs={12} sx={{ display: 'flex', justifyContent: 'space-between' }}>
			<Typography variant="h6" gutterBottom align="left" sx={{
			maxWidth: { xs: '100px', sm: '180px', md: '260px', lg: '360px' },
			whiteSpace: 'nowrap',
			overflow: 'hidden',
			textOverflow: 'ellipsis',
			}}>
			{Common.camelToPascalWithSpaces(translate('table.field.qlyInspect.name'))}: {record.name}
			</Typography>
			{/* inherit, primary, secondary, textPrimary, textSecondary, error */}
			<Typography variant="h6" gutterBottom align="right" >
			ID: {record.id}
			</Typography>
			</Grid>
			</Grid>
			<Grid container spacing={2}>
			<Grid item xs={12} container alignContent="flex-end">
			<Typography variant="caption" color="textSecondary" sx={{ wordWrap: 'break-word', wordBreak: 'break-all' }}>
			{Common.camelToPascalWithSpaces(translate('common.field.memo'))}:{record.memo}
			</Typography>
			</Grid>
			</Grid>
			<Box height={20}> </Box>
			<Grid container spacing={2}>
			<Grid item xs={6}>
			<PanelTypography
			title="table.field.qlyInspect.code"
			property={record.code}
			/>
			</Grid>
			<Grid item xs={6}>
			<PanelTypography
			title="table.field.qlyInspect.name"
			property={record.name}
			/>
			</Grid>
			<Grid item xs={6}>
			<PanelTypography
			title="table.field.qlyInspect.barcode"
			property={record.barcode}
			/>
			</Grid>
			<Grid item xs={6}>
			<PanelTypography
			title="table.field.qlyInspect.asnItemId"
			property={record.asnItemId}
			/>
			</Grid>
			<Grid item xs={6}>
			<PanelTypography
			title="table.field.qlyInspect.poItemId"
			property={record.poItemId}
			/>
			</Grid>
			<Grid item xs={6}>
			<PanelTypography
			title="table.field.qlyInspect.safeQty"
			property={record.safeQty}
			/>
			</Grid>
			<Grid item xs={6}>
			<PanelTypography
			title="table.field.qlyInspect.disQty"
			property={record.disQty}
			/>
			</Grid>
			const notify = useNotify();
			const [rows, setRows] = useState([]);
			const [maktx, setMaktx] = useState('');
			const ispectId = record.id;

			</Grid>
			</CardContent>
			</Card >
			</>
			useEffect(() => {
			debouncedHttp({ maktx });
			}, [ispectId, maktx]);


			const http = async (parmas) => {
			const res = await request.post('/qlyIsptItem/page', { ...parmas, ispectId });
			if (res?.data?.code === 200) {
			setRows(res.data.data.records)
			} else {
			notify(res.data.msg);
			}
			}

			const debouncedHttp = useMemo(() => debounce(http, 300), []);

			const columns = [
			{
			field: 'ispectId',
			headerName: translate('table.field.qlyIsptItem.ispectId')
			},
			{
			field: 'matnrCode',
			headerName: translate('table.field.qlyIsptItem.matnrCode'),
			width: 200
			},
			{
			field: 'maktx',
			headerName: translate('table.field.qlyIsptItem.maktx'),
			width: 200
			},
			// {
			// field: 'trackCode',
			// headerName: translate('table.field.qlyIsptItem.trackCode'),
			// width: 200
			// },
			// {
			// field: 'label',
			// headerName: translate('table.field.qlyIsptItem.label')
			// },
			{
			field: 'splrName',
			headerName: translate('table.field.qlyIsptItem.splrName')
			},
			{
			field: 'splrBatch',
			headerName: translate('table.field.qlyIsptItem.splrBatch')
			},
			{
			field: 'stockBatch',
			headerName: translate('table.field.qlyIsptItem.stockBatch')
			},
			{
			field: 'isptStatus$',
			headerName: translate('table.field.qlyIsptItem.isptStatus')
			},
			{
			field: 'rcptQty',
			headerName: translate('table.field.qlyIsptItem.rcptQty')
			},
			{
			field: 'dlyQty',
			headerName: translate('table.field.qlyIsptItem.dlyQty')
			},
			{
			field: 'disQty',
			headerName: translate('table.field.qlyIsptItem.disQty')
			},
			{
			field: 'safeQty',
			headerName: translate('table.field.qlyIsptItem.safeQty')
			},
			{
			field: 'isptResult$',
			headerName: translate('table.field.qlyIsptItem.isptResult')
			},
			// {
			// field: 'picPath',
			// headerName: translate('table.field.qlyIsptItem.picPath')
			// }
			];

			const maktxChange = (value) => {
			setMaktx(value)
			}

			return (
			<Box sx={{
			position: 'relative',
			padding: '5px 10px'
			}}>

			<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' }} size="small" />

			<div style={{ display: 'flex', gap: '10px' }}>
			</div>
			</div>


			<DataGrid
			size="small"
			rows={rows}
			columns={columns}
			disableRowSelectionOnClick
			disableColumnMenu={true}
			disableColumnSorting
			disableMultipleColumnsSorting
			/>
			</Box >
			);
			};