| | |
| | | trackCode: "trackCode", |
| | | unit: "unit", |
| | | anfme: "anfme", |
| | | outQty: 'Revise Qty', |
| | | qty: 'Qty', |
| | | workQty: 'Work Qty', |
| | | reviseQty: 'Revise Qty', |
| | | batch: "batch", |
| | | splrBatch: "splrBatch", |
| | | spec: "spec", |
| | |
| | | maktx: "物料名称", |
| | | unit: '单位', |
| | | anfme: '数量', |
| | | outQty: '调整数量', |
| | | matnrCode: "物料编码", |
| | | trackCode: "跟踪码", |
| | | workQty: '执行数', |
| | | reviseQty: '实际数量', |
| | | qty: '完成数', |
| | | batch: "批次", |
| | | splrBatch: "批次", |
| | |
| | | import React, { useState, useEffect } from "react"; |
| | | import React, { useState, useEffect, useRef } from "react"; |
| | | import { |
| | | Dialog, |
| | | DialogActions, |
| | |
| | | import { useTranslate, useNotify, useRefresh, DatagridConfigurable, useGetOne } from 'react-admin'; |
| | | import DialogCloseButton from "../../components/DialogCloseButton"; |
| | | import { Add, Edit, Delete, Save } from '@mui/icons-material'; |
| | | import { DataGrid, useGridApiRef } from '@mui/x-data-grid'; |
| | | import SelectMatnrInfo from "./SelectMatnrInfo"; |
| | | import SaveIcon from '@mui/icons-material/Save'; |
| | | import { DataGrid } from '@mui/x-data-grid'; |
| | | import request from '@/utils/request'; |
| | | |
| | | const StyledDatagrid = styled(DatagridConfigurable)(({ theme }) => ({ |
| | |
| | | })); |
| | | |
| | | const LocsReviseDetl = (props) => { |
| | | const { open, setOpen, locRevise } = props; |
| | | const { open, setOpen, record } = props; |
| | | const handleClose = (event, reason) => { |
| | | if (reason !== "backdropClick") { |
| | | setOpen(false); |
| | | } |
| | | }; |
| | | |
| | | const dicts = JSON.parse(localStorage.getItem('sys_dicts'))?.filter(dict => (dict.dictTypeCode == 'sys_stock_revise_type')) || []; |
| | | const [page, setPage] = useState({ page: DEFAULT_START_PAGE, pageSize: DEFAULT_PAGE_SIZE }); |
| | | const [formData, setFormData] = useState({ useStatus: 'F', code: null }); |
| | | const [formData, setFormData] = useState({ locCode: record?.locCode }); |
| | | const [selectedRows, setSelectedRows] = useState([]); |
| | | const [isLoading, setIsLoading] = useState(false); |
| | | const [tableData, setTableData] = useState([]); |
| | | const [openMatnr, setOpenMatnr] = useState(); |
| | | const [dyFields, setDyFields] = useState([]); |
| | | const [rowCount, setRowCount] = useState(0); |
| | | const translate = useTranslate(); |
| | | const refresh = useRefresh(); |
| | | const notify = useNotify(); |
| | | const tableRef = useRef() |
| | | |
| | | |
| | | const handleChange = (e) => { |
| | | const { name, value } = e.target; |
| | |
| | | }; |
| | | |
| | | const handleSubmit = () => { |
| | | const selectedData = tableData.filter(item => selectedRows.includes(item.id)); |
| | | const rows = tableRef.current.getSelectedRows(); |
| | | const selectedData = [...rows.entries()].map(([Key, value]) => value) |
| | | const value = selectedData.map((el => { |
| | | return { |
| | | id: el.id, |
| | | code: el.code, |
| | | areaId: el.areaId, |
| | | barcode: el.barcode || '', |
| | | channel: el.channel || '', |
| | | col: el.col, |
| | | lev: el.lev, |
| | | row: el.row, |
| | | type: el.type, |
| | | useStatus: el.useStatus, |
| | | warehouseId: el.warehouseId, |
| | | locCode: el.locCode, |
| | | matnrId: el.matnrId, |
| | | maktx: el.maktx || '', |
| | | matnrCode: el.matnrCode || '', |
| | | batch: el.batch, |
| | | anfme: el.anfme, |
| | | reviseQty: el.reviseQty, |
| | | spec: el.spec, |
| | | model: el.model, |
| | | unit: el.unit, |
| | | } |
| | | })); |
| | | |
| | |
| | | |
| | | const saveReviseLog = async (values) => { |
| | | const parmas = { |
| | | reviseId: locRevise, |
| | | reviseLogId: record?.id, |
| | | items: values, |
| | | } |
| | | const res = await request.post(`/reviseLog/items/save`, parmas); |
| | | console.log(values); |
| | | |
| | | const res = await request.post(`/reviseLogItem/items/save`, parmas); |
| | | if (res?.data?.code === 200) { |
| | | setOpen(false); |
| | | refresh() |
| | |
| | | |
| | | const getData = async () => { |
| | | setIsLoading(true) |
| | | console.log(formData); |
| | | |
| | | const res = await request.post(`/locItem/page`, { |
| | | ...formData, |
| | | locCode: record?.locCode, |
| | | current: page?.page, |
| | | pageSize: page?.pageSize, |
| | | orderBy: "create_time desc" |
| | |
| | | }, [open, page]); |
| | | |
| | | const handleSearch = () => { |
| | | getData() |
| | | // getData() |
| | | setOpenMatnr(true) |
| | | }; |
| | | |
| | | return ( |
| | | <> |
| | | <Dialog |
| | | open={open} |
| | | onClose={handleClose} |
| | |
| | | </List> |
| | | </Box> */} |
| | | <Box> |
| | | <Box component="form" onSubmit={handleSubmit} sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}> |
| | | <Grid container spacing={2} md={6}> |
| | | <Grid item md={4}> |
| | | <TextField |
| | | label={translate('table.field.locItem.locCode')} |
| | | name="code" |
| | | value={formData.code} |
| | | onChange={handleChange} |
| | | size="small" |
| | | /> |
| | | </Grid> |
| | | <Grid item md={2} sx={{ margin: 'auto' }}> |
| | | <Button variant="contained" onClick={handleSearch}>{translate("toolbar.query")}</Button> |
| | | </Grid> |
| | | <Box component="form" onSubmit={handleSubmit} sx={{ display: 'flex', flexDirection: 'column', gap: 3, justifyContent: 'flex-end' }}> |
| | | <Grid item md={12} sx={{ justifyContent: 'flex-end', display: 'flex' }}> |
| | | <Button variant="text" onClick={handleSearch}>{translate("page.whMat.title.add")}</Button> |
| | | </Grid> |
| | | </Box> |
| | | <Box sx={{ mt: 2, height: 600, width: '100%' }}> |
| | | <AsnWareModalTable |
| | | tableData={tableData} |
| | | setTableData={setTableData} |
| | | <SelectReviseMatnr |
| | | page={page} |
| | | rowCount={rowCount} |
| | | setPage={setPage} |
| | | tableRef={tableRef} |
| | | rowCount={rowCount} |
| | | dyFields={dyFields} |
| | | isLoading={isLoading} |
| | | tableData={tableData} |
| | | selectedRows={selectedRows} |
| | | setDyFields={setDyFields} |
| | | setTableData={setTableData} |
| | | setSelectedRows={setSelectedRows} |
| | | /> |
| | | </Box> |
| | |
| | | </Box> |
| | | </DialogActions> |
| | | </Dialog> |
| | | <SelectMatnrInfo open={openMatnr} setOpen={setOpenMatnr} setData={setTableData} data={tableData} /> |
| | | </> |
| | | ); |
| | | }; |
| | | |
| | | export default LocsReviseDetl; |
| | | |
| | | const AsnWareModalTable = ({ tableData, setTableData, page, isLoading, pageSize, setPage, rowCount, selectedRows, setSelectedRows }) => { |
| | | const SelectReviseMatnr = ({ tableData, setTableData, page, isLoading, setPage, rowCount, selectedRows, setSelectedRows, tableRef, setDyFields, dyFields }) => { |
| | | const translate = useTranslate(); |
| | | const notify = useNotify(); |
| | | |
| | | const [dynamicFields, setDynamicFields] = useState([]); |
| | | const [columns, setColumns] = useState([ |
| | | { |
| | | field: 'code', |
| | | headerName: translate('table.field.locItem.locCode'), |
| | | width: 110, |
| | | editable: false, |
| | | }, |
| | | { |
| | | field: 'warehouseId$', |
| | | headerName: translate('table.field.loc.warehouseId'), |
| | | minWidth: 100, |
| | | flex: 1, |
| | | editable: false, |
| | | }, |
| | | { |
| | | field: 'areaId$', |
| | | headerName: translate('table.field.loc.areaId'), |
| | | field: 'matnrCode', |
| | | headerName: translate('table.field.locItem.matnrCode'), |
| | | width: 130, |
| | | editable: false, |
| | | }, |
| | | { |
| | | field: 'typeIds$', |
| | | headerName: translate('table.field.loc.type'), |
| | | field: 'maktx', |
| | | headerName: translate('table.field.locItem.maktx'), |
| | | minWidth: 100, |
| | | flex: 1, |
| | | editable: false, |
| | | }, |
| | | { |
| | | field: 'barcode', |
| | | headerName: translate('table.field.loc.barcode'), |
| | | field: 'batch', |
| | | headerName: translate('table.field.locItem.batch'), |
| | | minWidth: 100, |
| | | flex: 1, |
| | | editable: true, |
| | | }, |
| | | { |
| | | field: 'anfme', |
| | | headerName: translate('table.field.locItem.anfme') + "*", |
| | | minWidth: 100, |
| | | flex: 1, |
| | | editable: false, |
| | | }, |
| | | { |
| | | field: 'useStatus$', |
| | | headerName: translate('table.field.loc.useStatus') + "*", |
| | | field: 'reviseQty', |
| | | headerName: translate('table.field.locItem.outQty') + "*", |
| | | minWidth: 100, |
| | | type: 'number', |
| | | flex: 1, |
| | | editable: true, |
| | | }, |
| | | { |
| | | field: 'spec', |
| | | headerName: translate('table.field.locItem.spec'), |
| | | minWidth: 100, |
| | | flex: 1, |
| | | editable: false, |
| | | }, |
| | | { |
| | | field: 'channel', |
| | | headerName: translate('table.field.loc.channel'), |
| | | field: 'model', |
| | | headerName: translate('table.field.locItem.model'), |
| | | minWidth: 100, |
| | | flex: 1, |
| | | editable: false, |
| | | }, |
| | | { |
| | | field: 'row', |
| | | headerName: translate('table.field.loc.row'), |
| | | field: 'unit', |
| | | headerName: translate('table.field.locItem.unit'), |
| | | minWidth: 100, |
| | | flex: 1, |
| | | editable: false, |
| | | }, |
| | | { |
| | | field: 'col', |
| | | headerName: translate('table.field.loc.col'), |
| | | minWidth: 100, |
| | | flex: 1, |
| | | editable: false, |
| | | }, |
| | | { |
| | | field: 'lev', |
| | | headerName: translate('table.field.loc.lev'), |
| | | minWidth: 100, |
| | | flex: 1, |
| | | editable: false, |
| | | }, |
| | | // { |
| | | // field: 'action', |
| | | // headerName: '操作', |
| | | // width: 140, |
| | | // lockPosition: 'left', |
| | | // renderCell: (params) => ( |
| | | // <Tooltip title="Delete"> |
| | | // <IconButton onClick={() => handleDelete(params.row)}> |
| | | // <Delete /> |
| | | // </IconButton> |
| | | // <IconButton onClick={() => handleDelete(params.row)}> |
| | | // <Save /> |
| | | // </IconButton> |
| | | // </Tooltip> |
| | | // ), |
| | | // } |
| | | ]) |
| | | |
| | | const operate = { |
| | | field: 'action', |
| | | headerName: '操作', |
| | | width: 140, |
| | | lockPosition: 'left', |
| | | renderCell: (params) => ( |
| | | <Tooltip title="Delete"> |
| | | <IconButton onClick={() => handleDelete(params.row)}> |
| | | <Delete /> |
| | | </IconButton> |
| | | </Tooltip> |
| | | ), |
| | | } |
| | | |
| | | const handleDelete = (rows) => { |
| | | const tableRows = tableData.filter(item => item.matnrCode != rows.matnrCode); |
| | | setTableData(tableRows); |
| | | } |
| | | |
| | | const handleSelectionChange = (ids) => { |
| | | setSelectedRows(ids) |
| | | }; |
| | | |
| | | useEffect(() => { |
| | | if (dynamicFields.length < 1) { |
| | | getDynamicFields(); |
| | | } |
| | | }, [dyFields]); |
| | | |
| | | const getDynamicFields = async () => { |
| | | const { |
| | | data: { code, data, msg }, |
| | | } = await request.get("/fields/enable/list"); |
| | | if (code === 200) { |
| | | const cols = data.map(el => ({ |
| | | field: el.fields, |
| | | headerName: el.fieldsAlise, |
| | | minWidth: 100, |
| | | flex: 1, |
| | | editable: el.unique, |
| | | valueGetter: (value, row) => { |
| | | return row.extendFields?.[el.fields] || ''; |
| | | }, |
| | | })) |
| | | setDyFields(data) |
| | | setDynamicFields(cols); |
| | | setColumns([...columns, ...cols, operate]) |
| | | } else { |
| | | notify(msg); |
| | | } |
| | | } |
| | | |
| | | tableRef.current = useGridApiRef(); |
| | | |
| | | return ( |
| | | <div style={{ width: '100%' }}> |
| | | <DataGrid |
| | | sx={{ height: 600 }} |
| | | size="small" |
| | | apiRef={tableRef} |
| | | rows={tableData} |
| | | columns={columns} |
| | | checkboxSelection |
| | | onRowSelectionModelChange={handleSelectionChange} |
| | | selectionModel={selectedRows} |
| | | disableColumnMenu={true} |
| | | disableRowSelectionOnClick |
| | | disableColumnSorting |
| | | disableMultipleColumnsSorting |
| | | rowCount={rowCount} |
| | |
| | | title={"menu.reviseLogItem"} |
| | | empty={false} |
| | | filters={false} |
| | | pagination={false} |
| | | filter={{reviseLogId: record?.id}} |
| | | sort={{ field: "create_time", order: "desc" }} |
| | | actions={false} |
| | |
| | | rowClick={(id, resource, record) => false} |
| | | expand={false} |
| | | expandSingle={true} |
| | | omit={['id', 'locId', 'matnrId', 'createTime', 'createBy', 'memo']} |
| | | omit={['id', 'locId', 'locCode', 'matnrId', 'fieldsIndex', 'memo', 'statusBool']} |
| | | > |
| | | <NumberField source="id" /> |
| | | <NumberField source="locId" label="table.field.locItem.locId" /> |
| | | <TextField source="locCode" label="table.field.locItem.locCode" /> |
| | | <NumberField source="matnrId" label="table.field.locItem.matnrId" /> |
| | | <TextField source="maktx" label="table.field.locItem.maktx" /> |
| | | <TextField source="matnrCode" label="table.field.locItem.matnrCode" /> |
| | | <TextField source="maktx" label="table.field.locItem.maktx" /> |
| | | <TextField source="unit" label="table.field.locItem.unit" /> |
| | | <NumberField source="anfme" label="table.field.locItem.anfme" /> |
| | | <NumberField source="reviseQty" label="table.field.locItem.reviseQty" /> |
| | |
| | | const ReviseLogList = () => { |
| | | const [createDialog, setCreateDialog] = useState(false); |
| | | const [drawerVal, setDrawerVal] = useState(false); |
| | | const [item, setItem] = useState(); |
| | | const translate = useTranslate(); |
| | | const orderId = useGetRecordId(); |
| | | |
| | |
| | | <NumberField source="id" /> |
| | | <NumberField source="reviseId" label="table.field.reviseLog.reviseId" /> |
| | | <TextField source="reviseCode" label="table.field.reviseLog.reviseCode" /> |
| | | <TextField source="locCode" label="table.field.locItem.locCode" /> |
| | | <NumberField source="warehouseId" label="table.field.loc.warehouseId" /> |
| | | <NumberField source="areaId" label="table.field.loc.areaId" /> |
| | | <NumberField source="type" label="table.field.loc.type" /> |
| | |
| | | <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"> |
| | | <EditLocRevise setDrawerVal={setDrawerVal}/> |
| | | <EditLocRevise setDrawerVal={setDrawerVal} setItem={setItem} /> |
| | | <DeleteButton sx={{ padding: '1px', fontSize: '.75rem' }} mutationMode={OPERATE_MODE} redirect={false} /> |
| | | </WrapperField> |
| | | </StyledDatagrid> |
| | |
| | | /> |
| | | <LocsReviseDetl |
| | | open={drawerVal} |
| | | record={item} |
| | | setOpen={setDrawerVal} |
| | | /> |
| | | </Box> |
| | |
| | | |
| | | export default ReviseLogList; |
| | | |
| | | const EditLocRevise = ({ setDrawerVal }) => { |
| | | const EditLocRevise = ({ setDrawerVal, setItem }) => { |
| | | const record = useRecordContext(); |
| | | const editRevise = () => { |
| | | console.log("=======>"); |
| | | console.log(record); |
| | | const editRevise = () => { |
| | | setDrawerVal(true) |
| | | setItem(record) |
| | | } |
| | | |
| | | return ( |
| | |
| | | const value = selectedData.map((el => { |
| | | return { |
| | | id: el.id, |
| | | code: el.code, |
| | | locCode: el.code, |
| | | areaId: el.areaId, |
| | | barcode: el.barcode || '', |
| | | channel: el.channel || '', |
New file |
| | |
| | | import React, { useState, useEffect } from "react"; |
| | | import { |
| | | Dialog, |
| | | DialogActions, |
| | | DialogContent, |
| | | DialogTitle, |
| | | Stack, |
| | | Grid, |
| | | TextField, |
| | | Box, |
| | | Button, |
| | | Paper, |
| | | styled |
| | | } from '@mui/material'; |
| | | |
| | | import { EDIT_MODE, DEFAULT_START_PAGE, DEFAULT_PAGE_SIZE, REFERENCE_INPUT_PAGESIZE } from '@/config/setting'; |
| | | import DialogCloseButton from "../../components/DialogCloseButton"; |
| | | import { useTranslate, useNotify, useRefresh } from 'react-admin'; |
| | | import TreeSelectInput from "@/page/components/TreeSelectInput"; |
| | | import QueryStatsIcon from '@mui/icons-material/QueryStats'; |
| | | import SaveIcon from '@mui/icons-material/Save'; |
| | | import { DataGrid } from '@mui/x-data-grid'; |
| | | import request from '@/utils/request'; |
| | | |
| | | const SelectMatnrInfo = (props) => { |
| | | const { open, setOpen, data, setData } = props; |
| | | const translate = useTranslate(); |
| | | const refresh = useRefresh(); |
| | | const notify = useNotify(); |
| | | |
| | | const handleClose = (event, reason) => { |
| | | if (reason !== "backdropClick") { |
| | | setOpen(false); |
| | | } |
| | | }; |
| | | |
| | | const [page, setPage] = useState({ page: DEFAULT_START_PAGE, pageSize: DEFAULT_PAGE_SIZE }); |
| | | const [selectedRows, setSelectedRows] = useState([]); |
| | | const [isLoading, setIsLoading] = useState(false); |
| | | const [tableData, setTableData] = useState([]); |
| | | const [formData, setFormData] = useState({}); |
| | | const [dyFields, setDyFields] = useState([]); |
| | | const [rowCount, setRowCount] = useState(0); |
| | | const handleChange = (e) => { |
| | | const { name, value } = e.target; |
| | | setFormData(() => ({ |
| | | [name]: value |
| | | })); |
| | | }; |
| | | |
| | | const reset = () => { |
| | | setFormData({ |
| | | name: null, |
| | | code: null, |
| | | }) |
| | | } |
| | | |
| | | const handleSubmit = () => { |
| | | const hasarr = data.map(el => +el.id) |
| | | const selectedData = selectedRows.filter(item => !hasarr.includes(item)).map(id => (tableData.find(row => row.id === id))); |
| | | const value = selectedData.map((el => { |
| | | const dynamicFields = dyFields.reduce((acc, item) => { |
| | | acc[item.fields] = el['extendFields']?.[item.fields] || ''; |
| | | return acc; |
| | | }, {}); |
| | | return { |
| | | id: el.id, |
| | | matnrId: el.id, |
| | | maktx: el.name, |
| | | matnrCode: el.code, |
| | | batch: el.splrBatch, |
| | | unit: el.stockUnit || '', |
| | | spec: el.spec, |
| | | model: el.model, |
| | | fieldsIndex: el.fieldsIndex, |
| | | purUnit: el.purchaseUnit || '', |
| | | ...dynamicFields |
| | | } |
| | | })) |
| | | setData([...data, ...value]); |
| | | setOpen(false); |
| | | reset(); |
| | | }; |
| | | |
| | | const getData = async () => { |
| | | setIsLoading(true) |
| | | const res = await request.post(`/matnr/page`, { |
| | | ...formData, |
| | | current: page?.page, |
| | | pageSize: page?.pageSize, |
| | | orderBy: "create_time desc" |
| | | }); |
| | | if (res?.data?.code === 200) { |
| | | setTableData(res.data.data.records); |
| | | setRowCount(res.data?.data?.total); |
| | | } else { |
| | | notify(res.data.msg); |
| | | } |
| | | setIsLoading(false) |
| | | }; |
| | | |
| | | useEffect(() => { |
| | | getData(); |
| | | }, [open, page]); |
| | | |
| | | const handleSearch = () => { |
| | | getData() |
| | | }; |
| | | |
| | | return ( |
| | | <Dialog |
| | | open={open} |
| | | onClose={handleClose} |
| | | aria-labelledby="form-dialog-title" |
| | | fullWidth |
| | | disableRestoreFocus |
| | | maxWidth="lg" |
| | | > |
| | | <DialogTitle id="form-dialog-title" sx={{ |
| | | position: 'sticky', |
| | | top: 0, |
| | | backgroundColor: 'background.paper', |
| | | zIndex: 1000 |
| | | }}> |
| | | {translate("common.action.newAddMats")} |
| | | <Box sx={{ position: 'absolute', top: 8, right: 8, zIndex: 1001 }}> |
| | | <DialogCloseButton onClose={handleClose} /> |
| | | </Box> |
| | | </DialogTitle> |
| | | <DialogContent sx={{ mt: 2, }}> |
| | | <Box component="form" onSubmit={handleSubmit} sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}> |
| | | <Grid container spacing={2}> |
| | | <Grid item md={3}> |
| | | <TextField |
| | | label={translate('table.field.matnr.name')} |
| | | name="name" |
| | | value={formData.name} |
| | | onChange={handleChange} |
| | | size="small" |
| | | /> |
| | | </Grid> |
| | | <Grid item md={3}> |
| | | <TextField |
| | | label={translate('table.field.matnr.code')} |
| | | name="code" |
| | | value={formData.code} |
| | | onChange={handleChange} |
| | | size="small" |
| | | /> |
| | | </Grid> |
| | | <Grid item md={3} sx={{display: "flex", margin: 2}}> |
| | | <Button variant="contained" onClick={handleSearch} startIcon={<QueryStatsIcon />}>{translate("toolbar.query")}</Button> |
| | | </Grid> |
| | | </Grid> |
| | | </Box> |
| | | <Box sx={{ mt: 2, height: 400, width: '100%' }}> |
| | | <AsnWareModalTable |
| | | tableData={tableData} |
| | | setTableData={setTableData} |
| | | dyFields={dyFields} |
| | | page={page} |
| | | rowCount={rowCount} |
| | | setPage={setPage} |
| | | isLoading={isLoading} |
| | | setDyFields={setDyFields} |
| | | selectedRows={selectedRows} |
| | | setSelectedRows={setSelectedRows} |
| | | /> |
| | | </Box> |
| | | </DialogContent> |
| | | <DialogActions sx={{ position: 'sticky', bottom: 1, backgroundColor: 'background.paper', zIndex: 1000 }}> |
| | | <Box sx={{ width: '100%', display: 'flex', justifyContent: 'flex-end' }}> |
| | | <Button onClick={handleSubmit} variant="contained" startIcon={<SaveIcon />}> |
| | | {translate('toolbar.confirm')} |
| | | </Button> |
| | | </Box> |
| | | </DialogActions> |
| | | </Dialog> |
| | | ); |
| | | }; |
| | | |
| | | export default SelectMatnrInfo; |
| | | |
| | | const AsnWareModalTable = ({ tableData, setTableData, page, isLoading, pageSize, setPage, rowCount, selectedRows, setSelectedRows, dyFields, setDyFields }) => { |
| | | const translate = useTranslate(); |
| | | const notify = useNotify(); |
| | | |
| | | const [columns, setColumns] = useState([ |
| | | // { field: 'id', headerName: 'ID', width: 100 }, |
| | | { field: 'name', headerName: translate('table.field.matnr.name'), width: 300 }, |
| | | { field: 'code', headerName: translate('table.field.matnr.code'), width: 200 }, |
| | | { field: 'groupId$', headerName: translate('table.field.matnr.groupId'), width: 100 }, |
| | | { field: 'spec', headerName: translate('table.field.matnr.spec'), width: 100 }, |
| | | { field: 'model', headerName: translate('table.field.matnr.model'), width: 100 }, |
| | | { field: 'weight', headerName: translate('table.field.matnr.weight'), width: 100 }, |
| | | { field: 'describle', headerName: translate('table.field.matnr.describle'), width: 100 }, |
| | | { field: 'nromNum', headerName: translate('table.field.matnr.nromNum'), width: 100 }, |
| | | { field: 'unit', headerName: translate('table.field.matnr.unit'), width: 100 }, |
| | | { field: 'purchaseUnit', headerName: translate('table.field.matnr.purUnit'), width: 100 }, |
| | | { field: 'stockUnit', headerName: translate('table.field.matnr.stockUnit'), width: 100 }, |
| | | { field: 'stockLeval$', headerName: translate('table.field.matnr.stockLevel'), width: 100, sortable: false }, |
| | | ]) |
| | | |
| | | |
| | | const handleSelectionChange = (ids) => { |
| | | setSelectedRows(ids) |
| | | }; |
| | | |
| | | useEffect(() => { |
| | | getDynamicFields(); |
| | | }, []); |
| | | |
| | | const getDynamicFields = async () => { |
| | | const { |
| | | data: { code, data, msg }, |
| | | } = await request.get("/fields/enable/list"); |
| | | if (code === 200) { |
| | | const cols = data.map(el => ({ |
| | | field: el.fields, |
| | | headerName: el.fieldsAlise, |
| | | minWidth: 100, |
| | | flex: 1, |
| | | editable: el.unique, |
| | | valueGetter: (value, row) => { |
| | | return row.extendFields?.[el.fields] || ''; |
| | | }, |
| | | })) |
| | | setDyFields(data) |
| | | setColumns([...columns, ...cols]) |
| | | } else { |
| | | notify(msg); |
| | | } |
| | | } |
| | | |
| | | return ( |
| | | <div style={{ height: 400, width: '100%' }}> |
| | | <DataGrid |
| | | size="small" |
| | | rows={tableData} |
| | | columns={columns} |
| | | checkboxSelection |
| | | onRowSelectionModelChange={handleSelectionChange} |
| | | selectionModel={selectedRows} |
| | | disableColumnMenu={true} |
| | | disableColumnSorting |
| | | disableMultipleColumnsSorting |
| | | rowCount={rowCount} |
| | | paginationMode="server" |
| | | paginationModel={page} |
| | | onPaginationModelChange={setPage} |
| | | loading={isLoading} |
| | | slotProps={{ |
| | | loadingOverlay: { |
| | | variant: 'linear-progress', |
| | | noRowsVariant: 'linear-progress', |
| | | }, |
| | | }} |
| | | /> |
| | | </div> |
| | | ); |
| | | }; |