|  |  |  | 
|---|
|  |  |  | 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 [formData, setFormData] = useState({ | 
|---|
|  |  |  | name: '', | 
|---|
|  |  |  | code: '' | 
|---|
|  |  |  | code: '', | 
|---|
|  |  |  | groupId: 0 | 
|---|
|  |  |  | }); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 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: '', | 
|---|
|  |  |  | groupId: 0 | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 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, | 
|---|
|  |  |  | matnk: el.name, | 
|---|
|  |  |  | maktx: el.name, | 
|---|
|  |  |  | matnrCode: 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: 100, | 
|---|
|  |  |  | 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 }}> | 
|---|
|  |  |  | <Box sx={{ width: '100%', display: 'flex', justifyContent: 'space-between' }}> | 
|---|
|  |  |  | <Button onClick={handleSubmit} variant="contained" startIcon={<SaveIcon />}> | 
|---|
|  |  |  | 确认 | 
|---|
|  |  |  | {translate('toolbar.confirm')} | 
|---|
|  |  |  | </Button> | 
|---|
|  |  |  | </Box> | 
|---|
|  |  |  | </DialogActions> | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 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 }, | 
|---|
|  |  |  | { field: 'code', headerName: translate('table.field.matnr.code'), 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: 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: '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> | 
|---|
|  |  |  | ); | 
|---|