| | |
| | | import request from '@/utils/request'; |
| | | import { DataGrid } from '@mui/x-data-grid'; |
| | | import SaveIcon from '@mui/icons-material/Save'; |
| | | import TreeSelectInput from "@/page/components/TreeSelectInput"; |
| | | const AsnWareModal = (props) => { |
| | | const { open, setOpen, data, setData } = props; |
| | | |
| | |
| | | }); |
| | | |
| | | const [tableData, setTableData] = useState([]); |
| | | const [dyFields, setDyFields] = useState([]); |
| | | const [selectedRows, setSelectedRows] = useState([]); |
| | | |
| | | const handleChange = (e) => { |
| | |
| | | })); |
| | | }; |
| | | |
| | | const handleSubmit = () => { |
| | | const selectedData = selectedRows.map(id => tableData.find(row => row.id === id)); |
| | | const reset = () => { |
| | | setFormData({ |
| | | name: '', |
| | | code: '' |
| | | }) |
| | | } |
| | | |
| | | const handleSubmit = () => { |
| | | const hasarr = data.map(el => +el.matnrId) |
| | | 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 { |
| | | matnrId: el.id, |
| | | maktx: el.name, |
| | | maktxCode: el.code, |
| | | stockUnit: el.stockUnit || '', |
| | | purUnit: el.purchaseUnit || '', |
| | | ...dynamicFields |
| | | } |
| | | })) |
| | | setData(value); |
| | | setData([...data, ...value]); |
| | | setOpen(false); |
| | | // refresh(); |
| | | reset(); |
| | | }; |
| | | |
| | | const getData = async () => { |
| | | const res = await request.post(`/matnr/page`, { |
| | | ...formData, |
| | | pageSize: 199 |
| | | current: 1, |
| | | pageSize: 199, |
| | | orderBy: "create_time desc" |
| | | }); |
| | | if (res?.data?.code === 200) { |
| | | setTableData(res.data.data.records); |
| | |
| | | |
| | | useEffect(() => { |
| | | getData(); |
| | | }, []); |
| | | }, [open]); |
| | | |
| | | const handleSearch = () => { |
| | | getData() |
| | |
| | | <DialogContent sx={{ mt: 2 }}> |
| | | <Box component="form" onSubmit={handleSubmit} sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}> |
| | | <Grid container spacing={2}> |
| | | <Grid item xs={4}> |
| | | <Grid item md={4}> |
| | | <TextField |
| | | label={translate('table.field.matnr.name')} |
| | | name="name" |
| | | value={formData.name} |
| | | onChange={handleChange} |
| | | variant="outlined" |
| | | size="small" |
| | | /> |
| | | </Grid> |
| | | <Grid item xs={4}> |
| | | <Grid item md={4}> |
| | | <TextField |
| | | label={translate('table.field.matnr.code')} |
| | | name="code" |
| | | value={formData.code} |
| | | onChange={handleChange} |
| | | variant="outlined" |
| | | size="small" |
| | | /> |
| | | </Grid> |
| | | <Grid item md={4}> |
| | | <TreeSelectInput |
| | | label="table.field.matnr.groupId" |
| | | value={formData.groupId} |
| | | resource={'matnrGroup'} |
| | | source="groupId" |
| | | name="groupId" |
| | | onChange={handleChange} |
| | | /> |
| | | </Grid> |
| | | </Grid> |
| | |
| | | </Stack> |
| | | </Box> |
| | | <Box sx={{ mt: 2, height: 400, width: '100%' }}> |
| | | <AsnWareModalTable tableData={tableData} setTableData={setTableData} |
| | | <AsnWareModalTable |
| | | tableData={tableData} |
| | | setTableData={setTableData} |
| | | dyFields={dyFields} |
| | | setDyFields={setDyFields} |
| | | selectedRows={selectedRows} |
| | | setSelectedRows={setSelectedRows} /> |
| | | setSelectedRows={setSelectedRows} |
| | | /> |
| | | </Box> |
| | | </DialogContent> |
| | | <DialogActions sx={{ position: 'sticky', bottom: 0, backgroundColor: 'background.paper', zIndex: 1000 }}> |
| | |
| | | |
| | | export default AsnWareModal; |
| | | |
| | | const AsnWareModalTable = ({ tableData, setTableData, selectedRows, setSelectedRows }) => { |
| | | const AsnWareModalTable = ({ tableData, setTableData, selectedRows, setSelectedRows, dyFields, setDyFields }) => { |
| | | const translate = useTranslate(); |
| | | const notify = useNotify(); |
| | | |
| | | const columns = [ |
| | | { field: 'id', headerName: 'ID', width: 100 }, |
| | | { field: 'name', headerName: translate('table.field.matnr.name'), width: 100 }, |
| | | 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: 100 }, |
| | | { 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: 'color', headerName: translate('table.field.matnr.color'), width: 100 }, |
| | | { field: 'size', headerName: translate('table.field.matnr.size'), 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%' }}> |
| | |
| | | disableColumnMenu={true} |
| | | disableColumnSorting |
| | | disableMultipleColumnsSorting |
| | | columnBufferPx={100} |
| | | /> |
| | | </div> |
| | | ); |