leejisun9/bio_frontend
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tab, component, popup 변경

Browse Source
This commit is contained in:
ikju1223
2025-08-22 14:01:30 +09:00
parent fd6fe43498
commit f801e876d2
22 changed files with 625 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

323
pages/[tabId]/tui.vue Normal file
View File

@@ -0,0 +1,323 @@
<script setup lang="ts">
import ToastGrid from '@/components/base/ToastGrid.vue';
const data = [
{
id: 549731,
name: 'Beautiful Lies',
artist: 'Birdy',
release: '2016.03.26',
type: 'Deluxe',
typeCode: '1',
genre: 'Pop',
genreCode: '1',
grade: '4',
price: 10000,
downloadCount: 1000,
listenCount: 5000,
_attributes: {
expanded: true,
},
_children: [
{
id: 491379,
name: 'Chaos And The Calm',
artist: 'James Bay',
release: '2015.03.23',
type: 'EP',
typeCode: '2',
genre: 'Pop,Rock',
genreCode: '1,2',
grade: '5',
price: 12000,
downloadCount: 1000,
listenCount: 5000,
_children: [],
},
{
id: 498896,
name: 'The Magic Whip',
artist: 'Blur',
release: '2015.04.27',
type: 'EP',
typeCode: '2',
genre: 'Rock',
genreCode: '2',
grade: '3',
price: 15000,
downloadCount: 1000,
listenCount: 5000,
_attributes: {
expanded: false,
},
},
{
id: 450720,
name: "I'm Not The Only One",
artist: 'Sam Smith',
release: '2014.09.15',
type: 'Single',
typeCode: '3',
genre: 'Pop,R&B',
genreCode: '1,3',
grade: '4',
price: 8000,
downloadCount: 1000,
listenCount: 5000,
_attributes: {
expanded: true,
},
_children: [
{
id: 587871,
name: 'This Is Acting',
artist: 'Sia',
release: '2016.10.22',
type: 'EP',
typeCode: '2',
genre: 'Pop',
genreCode: '1',
grade: '3',
price: 20000,
downloadCount: 1000,
listenCount: 5000,
_attributes: {
expanded: true,
},
_children: [
{
id: 490500,
name: 'Blue Skies',
release: '2015.03.18',
artist: 'Lenka',
type: 'Single',
typeCode: '3',
genre: 'Pop,Rock',
genreCode: '1,2',
grade: '5',
price: 6000,
downloadCount: 1000,
listenCount: 5000,
},
{
id: 317659,
name: "I Won't Give Up",
artist: 'Jason Mraz',
release: '2012.01.03',
type: 'Single',
typeCode: '3',
genre: 'Pop',
genreCode: '1',
grade: '2',
price: 7000,
downloadCount: 1000,
listenCount: 5000,
},
{
id: 583551,
name: 'Following My Intuition',
artist: 'Craig David',
release: '2016.10.01',
type: 'Deluxe',
typeCode: '1',
genre: 'R&B,Electronic',
genreCode: '3,4',
grade: '5',
price: 15000,
downloadCount: 1000,
listenCount: 5000,
},
],
},
],
},
],
},
{
id: 436461,
name: 'X',
artist: 'Ed Sheeran',
release: '2014.06.24',
type: 'Deluxe',
typeCode: '1',
genre: 'Pop',
genreCode: '1',
grade: '5',
price: 20000,
downloadCount: 1000,
listenCount: 5000,
},
{
id: 295651,
name: 'Moves Like Jagger',
release: '2011.08.08',
artist: 'Maroon5',
type: 'Single',
typeCode: '3',
genre: 'Pop,Rock',
genreCode: '1,2',
grade: '2',
price: 7000,
downloadCount: 1000,
listenCount: 5000,
},
{
id: 541713,
name: 'A Head Full Of Dreams',
artist: 'Coldplay',
release: '2015.12.04',
type: 'Deluxe',
typeCode: '1',
genre: 'Rock',
genreCode: '2',
grade: '3',
price: 25000,
downloadCount: 1000,
listenCount: 5000,
_attributes: {
expanded: false,
},
_children: [
{
id: 294574,
name: '4',
artist: 'Beyoncé',
release: '2011.07.26',
type: 'Deluxe',
typeCode: '1',
genre: 'Pop',
genreCode: '1',
grade: '3',
price: 12000,
downloadCount: 1000,
listenCount: 5000,
},
{
id: 265289,
name: '21',
artist: 'Adele',
release: '2011.01.21',
type: 'Deluxe',
typeCode: '1',
genre: 'Pop,R&B',
genreCode: '1,3',
grade: '5',
price: 15000,
downloadCount: 1000,
listenCount: 5000,
},
],
},
{
id: 555871,
name: 'Warm On A Cold Night',
artist: 'HONNE',
release: '2016.07.22',
type: 'EP',
typeCode: '1',
genre: 'R&B,Electronic',
genreCode: '3,4',
grade: '4',
price: 11000,
downloadCount: 1000,
listenCount: 5000,
},
{
id: 550571,
name: 'Take Me To The Alley',
artist: 'Gregory Porter',
release: '2016.09.02',
type: 'Deluxe',
typeCode: '1',
genre: 'Jazz',
genreCode: '5',
grade: '3',
price: 30000,
downloadCount: 1000,
listenCount: 5000,
},
{
id: 544128,
name: 'Make Out',
artist: 'LANY',
release: '2015.12.11',
type: 'EP',
typeCode: '2',
genre: 'Electronic',
genreCode: '4',
grade: '2',
price: 12000,
downloadCount: 1000,
listenCount: 5000,
},
{
id: 366374,
name: 'Get Lucky',
artist: 'Daft Punk',
release: '2013.04.23',
type: 'Single',
typeCode: '3',
genre: 'Pop,Funk',
genreCode: '1,5',
grade: '3',
price: 9000,
downloadCount: 1000,
listenCount: 5000,
},
{
id: 8012747,
name: 'Valtari',
artist: 'Sigur Rós',
release: '2012.05.31',
type: 'EP',
typeCode: '3',
genre: 'Rock',
genreCode: '2',
grade: '5',
price: 10000,
downloadCount: 1000,
listenCount: 5000,
},
];
const columns = [
{ header: 'Name', name: 'name', width: 300 },
{ header: 'Artist', name: 'artist' },
{ header: 'Type', name: 'type' },
{ header: 'Release', name: 'release' },
{ header: 'Genre', name: 'genre' },
{ header: 'checkbox', name: 'checkbox', editor:{ type: 'checkbox', options: {
listItems: [
{ text: 'true', value: true },
]
}}}
];
const treeColumnOptions = { name: 'name', useCascadingCheckbox: true };
const grid1Ref = ref();
function onClearClick() {
//grid1Ref.value?.clearGrid();
grid1Ref.value?.api()?.clear();
}
function onUpdateClick() {
//grid1Ref.value?.clearGrid();
console.log(grid1Ref.value?.api()?.getModifiedRows());
}
</script>
<template>
<div>
<button @click="onClearClick">clear api</button>
<br>
<button @click="onUpdateClick">update list</button>
<ToastGrid
ref="grid1Ref"
:data="data"
:columns="columns"
:treeColumnOptions="treeColumnOptions"
/>
</div>
</template>