feat: 중간저장
parent
3744b08f9a
commit
a4a33196cf
|
|
@ -72,6 +72,90 @@ const data = [
|
|||
codeName: '시설물편',
|
||||
depth: 3,
|
||||
children: [
|
||||
{
|
||||
codeTitle: "TEST 17 00 00",
|
||||
codeName: 'test',
|
||||
depth: 4,
|
||||
children: [
|
||||
]
|
||||
},
|
||||
{
|
||||
codeTitle: "TEST 17 00 00",
|
||||
codeName: 'test',
|
||||
depth: 4,
|
||||
children: [
|
||||
]
|
||||
},
|
||||
{
|
||||
codeTitle: "TEST 17 00 00",
|
||||
codeName: 'test',
|
||||
depth: 4,
|
||||
children: [
|
||||
]
|
||||
},
|
||||
{
|
||||
codeTitle: "TEST 17 00 00",
|
||||
codeName: 'test',
|
||||
depth: 4,
|
||||
children: [
|
||||
]
|
||||
},
|
||||
{
|
||||
codeTitle: "TEST 17 00 00",
|
||||
codeName: 'test',
|
||||
depth: 4,
|
||||
children: [
|
||||
]
|
||||
},
|
||||
{
|
||||
codeTitle: "TEST 17 00 00",
|
||||
codeName: 'test',
|
||||
depth: 4,
|
||||
children: [
|
||||
]
|
||||
},
|
||||
{
|
||||
codeTitle: "TEST 17 00 00",
|
||||
codeName: 'test',
|
||||
depth: 4,
|
||||
children: [
|
||||
]
|
||||
},
|
||||
{
|
||||
codeTitle: "TEST 17 00 00",
|
||||
codeName: 'test',
|
||||
depth: 4,
|
||||
children: [
|
||||
]
|
||||
},
|
||||
{
|
||||
codeTitle: "TEST 17 00 00",
|
||||
codeName: 'test',
|
||||
depth: 4,
|
||||
children: [
|
||||
]
|
||||
},
|
||||
{
|
||||
codeTitle: "TEST 17 00 00",
|
||||
codeName: 'test',
|
||||
depth: 4,
|
||||
children: [
|
||||
]
|
||||
},
|
||||
{
|
||||
codeTitle: "TEST 17 00 00",
|
||||
codeName: 'test',
|
||||
depth: 4,
|
||||
children: [
|
||||
]
|
||||
},
|
||||
{
|
||||
codeTitle: "TEST 17 00 00",
|
||||
codeName: 'test',
|
||||
depth: 4,
|
||||
children: [
|
||||
]
|
||||
},
|
||||
]
|
||||
},
|
||||
]
|
||||
|
|
@ -107,20 +191,8 @@ const FireNav = styled(List)({
|
|||
},
|
||||
});
|
||||
|
||||
const ItemHeader = styled('div')(({ theme }) => ({
|
||||
padding: theme.spacing(1),
|
||||
borderRadius: '4px',
|
||||
textAlign: 'center',
|
||||
}));
|
||||
|
||||
const Item = styled('div')(({ theme }) => ({
|
||||
padding: theme.spacing(1),
|
||||
borderRadius: '4px',
|
||||
textAlign: 'center',
|
||||
}));
|
||||
|
||||
export default function ReferenceCodePopupDialogCotents() {
|
||||
const [open, setOpen] = React.useState(true);
|
||||
|
||||
const [selectedValue, setSelectedValue] = React.useState('a');
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ export default function ReferenceCodePopupDialogCotentsHeader() {
|
|||
sx={{
|
||||
display: 'grid',
|
||||
gridAutoFlow: 'row',
|
||||
gridTemplateColumns: 'repeat(3, 1fr)',
|
||||
gridTemplateColumns: 'auto 120px 90px',
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,11 @@ import ListItem from '@mui/material/ListItem';
|
|||
import ListItemButton from '@mui/material/ListItemButton';
|
||||
import Divider from '@mui/material/Divider';
|
||||
|
||||
import ListItemIcon from '@mui/material/ListItemIcon';
|
||||
import AddIcon from '@mui/icons-material/Add';
|
||||
import RemoveIcon from '@mui/icons-material/Remove';
|
||||
|
||||
|
||||
import Box from '@mui/material/Box';
|
||||
import Collapse from '@mui/material/Collapse';
|
||||
|
||||
|
|
@ -13,14 +18,15 @@ import { styled } from '@mui/material/styles';
|
|||
|
||||
|
||||
const Item = styled('div')(({ theme }) => ({
|
||||
padding: theme.spacing(1),
|
||||
padding: '0px',
|
||||
borderRadius: '4px',
|
||||
textAlign: 'left',
|
||||
}));
|
||||
|
||||
|
||||
|
||||
const ItemComponent = (props) => {
|
||||
const {item, index} = props;
|
||||
const {item, index, openSelf} = props;
|
||||
|
||||
|
||||
const [open, setOpen] = React.useState(false);
|
||||
|
|
@ -30,20 +36,40 @@ const ItemComponent = (props) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<Collapse in={openSelf} timeout="auto" unmountOnExit sx={{width: '100%'}}>
|
||||
<ListItem disablePadding sx={{ width: '100%'}}>
|
||||
<List sx={{width: '100%'}}>
|
||||
<List sx={{ paddingTop: '0px', paddingBottom: '0px', width: '100%'}}>
|
||||
<ListItem disablePadding sx={{ width: '100%'}}>
|
||||
<ListItemButton onClick={handleClick} sx={{width: '100%'}}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'grid',
|
||||
gridAutoFlow: 'row',
|
||||
gridTemplateColumns: 'repeat(3, 1fr)',
|
||||
gridTemplateColumns: 'auto 120px 90px',
|
||||
gap: 1,
|
||||
width: '100%'
|
||||
}}
|
||||
>
|
||||
<Item>{item.codeTitle}</Item>
|
||||
<Item
|
||||
sx={{paddingLeft: `${Number(Number(item.depth)-1) * 20}px`,}}
|
||||
>
|
||||
{
|
||||
item.children && item.children.length > 0
|
||||
?
|
||||
<span>
|
||||
{
|
||||
open
|
||||
?
|
||||
<RemoveIcon sx={{ color: '#777777', height: '30px;'}} />
|
||||
:
|
||||
<AddIcon sx={{ color: '#777777', height: '30px;'}} />
|
||||
}
|
||||
</span>
|
||||
:
|
||||
<span> </span>
|
||||
}
|
||||
{item.codeTitle}
|
||||
</Item>
|
||||
<Item>{item.codeName}</Item>
|
||||
<Item sx={{textAlign: 'center'}}>
|
||||
<button type="button" class="btn btn_blue_h31 px-1">선택</button>
|
||||
|
|
@ -57,46 +83,19 @@ const ItemComponent = (props) => {
|
|||
//<div>item.codeTitle</div>
|
||||
console.log('thkim 2024-03-21 11:29 %o', item);
|
||||
return (
|
||||
<ItemComponent item={item} index={index} />
|
||||
<ItemComponent item={item} index={index} openSelf={open} />
|
||||
);
|
||||
})
|
||||
}
|
||||
</List>
|
||||
</ListItem>
|
||||
);
|
||||
};
|
||||
|
||||
const ItemComponentChild = (props) => {
|
||||
const {open, item} = props;
|
||||
|
||||
return (
|
||||
<Collapse in={open} timeout="auto" unmountOnExit sx={{width: '100%'}}>
|
||||
<List component="div" disablePadding sx={{width: '100%'}}>
|
||||
<ListItemButton sx={{ pl: 4, width: '100%' }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'grid',
|
||||
gridAutoFlow: 'row',
|
||||
gridTemplateColumns: 'repeat(3, 1fr)',
|
||||
gap: 1,
|
||||
width: '100%'
|
||||
}}
|
||||
>
|
||||
<Item>{item.codeTitle}</Item>
|
||||
<Item>{item.codeName}</Item>
|
||||
<Item sx={{textAlign: 'center'}}>
|
||||
<button type="button" class="btn btn_blue_h31 px-1">선택</button>
|
||||
</Item>
|
||||
</Box>
|
||||
</ListItemButton>
|
||||
</List>
|
||||
</Collapse>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
export default function ReferenceCodePopupDialogCotentsListItem(props) {
|
||||
const {codeTitle, codeName, data} = props;
|
||||
const {data} = props;
|
||||
const [selectedValue, setSelectedValue] = React.useState('a');
|
||||
|
||||
const handleChange = (event) => {
|
||||
|
|
@ -104,19 +103,13 @@ export default function ReferenceCodePopupDialogCotentsListItem(props) {
|
|||
};
|
||||
|
||||
|
||||
|
||||
|
||||
//data
|
||||
|
||||
return (
|
||||
<List sx={{width: '100%'}}>
|
||||
<List sx={{ paddingTop: '0px', paddingBottom: '0px', width: '100%'}}>
|
||||
{
|
||||
data &&
|
||||
data.map(function(item, index) {
|
||||
//<div>item.codeTitle</div>
|
||||
console.log('thkim 2024-03-21 11:29 %o', item);
|
||||
return (
|
||||
<ItemComponent item={item} index={index} />
|
||||
<ItemComponent item={item} index={index} openSelf={true} />
|
||||
);
|
||||
})
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue