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

[폴더, 파일 구조 정리]

Browse Source
This commit is contained in:
sohot8653
2025-09-25 15:33:11 +09:00
parent 51019d7f5f
commit ded762517e
30 changed files with 644 additions and 770 deletions
Download Patch File Download Diff File Expand all files Collapse all files

350
pages/[tabId]/tui.vue
View File

@@ -1,17 +1,29 @@
<script setup lang="ts">
import ToastGrid from '@/components/base/ToastGrid.vue';
<template>
<div>
<button @click="onClearClick">clear api</button>
<br />
<button @click="onUpdateClick">update list</button>
<ToastGrid
ref="grid1Ref"
:data="data"
:columns="columns"
:tree-column-options="treeColumnOptions"
/>
</div>
</template>
<script setup lang="ts">
const data = [
{
id: 549731,
name: 'Beautiful Lies',
artist: 'Birdy',
release: '2016.03.26',
type: 'Deluxe',
typeCode: '1',
genre: 'Pop',
genreCode: '1',
grade: '4',
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,
@@ -21,14 +33,14 @@ const data = [
_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',
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,
@@ -36,14 +48,14 @@ const data = [
},
{
id: 498896,
name: 'The Magic Whip',
artist: 'Blur',
release: '2015.04.27',
type: 'EP',
typeCode: '2',
genre: 'Rock',
genreCode: '2',
grade: '3',
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,
@@ -54,13 +66,13 @@ const data = [
{
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',
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,
@@ -70,14 +82,14 @@ const data = [
_children: [
{
id: 587871,
name: 'This Is Acting',
artist: 'Sia',
release: '2016.10.22',
type: 'EP',
typeCode: '2',
genre: 'Pop',
genreCode: '1',
grade: '3',
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,
@@ -87,14 +99,14 @@ const data = [
_children: [
{
id: 490500,
name: 'Blue Skies',
release: '2015.03.18',
artist: 'Lenka',
type: 'Single',
typeCode: '3',
genre: 'Pop,Rock',
genreCode: '1,2',
grade: '5',
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,
@@ -102,27 +114,27 @@ const data = [
{
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',
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',
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,
@@ -135,42 +147,42 @@ const data = [
},
{
id: 436461,
name: 'X',
artist: 'Ed Sheeran',
release: '2014.06.24',
type: 'Deluxe',
typeCode: '1',
genre: 'Pop',
genreCode: '1',
grade: '5',
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',
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',
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,
@@ -180,28 +192,28 @@ const data = [
_children: [
{
id: 294574,
name: '4',
artist: 'Beyoncé',
release: '2011.07.26',
type: 'Deluxe',
typeCode: '1',
genre: 'Pop',
genreCode: '1',
grade: '3',
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',
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,
@@ -210,70 +222,70 @@ const data = [
},
{
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',
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',
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',
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',
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',
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,
@@ -281,43 +293,33 @@ const data = [
];
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 },
]
}}}
{ 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 treeColumnOptions = { name: "name", useCascadingCheckbox: true };
const grid1Ref = ref();
function onClearClick() {
//grid1Ref.value?.clearGrid();
grid1Ref.value?.api()?.clear();
//grid1Ref.value?.clearGrid();
grid1Ref.value?.api()?.clear();
}
function onUpdateClick() {
//grid1Ref.value?.clearGrid();
console.log(grid1Ref.value?.api()?.getModifiedRows());
//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>