vue2_frontend init..
This commit is contained in:
parent
45ce9c93ea
commit
b3433bcef6
@ -1,7 +0,0 @@
|
||||
export default (await import('vue')).defineComponent({
|
||||
name: 'HelloWorld',
|
||||
props: {
|
||||
msg: String
|
||||
}
|
||||
})
|
||||
const __VLS_template = () => ({})
|
||||
@ -1,7 +0,0 @@
|
||||
export default (await import('vue')).defineComponent({
|
||||
name: 'HelloWorld',
|
||||
props: {
|
||||
msg: String
|
||||
}
|
||||
})
|
||||
const __VLS_template = () => ({})
|
||||
3
src/components/common/ListComponent.vue
Normal file
3
src/components/common/ListComponent.vue
Normal file
@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<div>ListComponent</div>
|
||||
</template>
|
||||
@ -3,57 +3,75 @@
|
||||
<div>
|
||||
<b-container fluid>
|
||||
<b-row>
|
||||
<b-col> </b-col>
|
||||
<b-col>
|
||||
<b-form-group>
|
||||
<b-input-group>
|
||||
<label class="input-group-text">Filter</label>
|
||||
<b-form-input
|
||||
id="filter-input"
|
||||
v-model="filter"
|
||||
type="text"
|
||||
placeholder="Type to Filter"
|
||||
></b-form-input>
|
||||
<b-input-group-append>
|
||||
<b-button :disabled="!filter" @click="filter = ''"
|
||||
>Clear</b-button
|
||||
>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
</b-form-group>
|
||||
<b-col class="border">
|
||||
<b-input-group>
|
||||
<label class="input-group-text">
|
||||
<b-form-checkbox @change="rowSelectAllToggle"
|
||||
>All</b-form-checkbox
|
||||
>
|
||||
</label>
|
||||
<b-form-select
|
||||
v-model="selectMode"
|
||||
:options="selectModes"
|
||||
></b-form-select>
|
||||
</b-input-group>
|
||||
</b-col>
|
||||
<b-col>
|
||||
<div class="input-group justify-content-end">
|
||||
<b-col cols="6" class="border">
|
||||
<b-input-group>
|
||||
<label class="input-group-text">
|
||||
<b-form-checkbox-group
|
||||
class="d-flex flex-nowrap"
|
||||
v-model="filterOn"
|
||||
:options="filterOptions"
|
||||
></b-form-checkbox-group>
|
||||
</label>
|
||||
<b-form-input
|
||||
v-model="filter"
|
||||
type="text"
|
||||
placeholder="Type to Filter"
|
||||
></b-form-input>
|
||||
<b-button :disabled="!filter" @click="filter = ''">Clear</b-button>
|
||||
</b-input-group>
|
||||
</b-col>
|
||||
<b-col class="border">
|
||||
<b-input-group class="justify-content-end">
|
||||
<label class="input-group-text">줄수</label>
|
||||
<b-form-select
|
||||
v-model="perPage"
|
||||
:options="perPageOptions"
|
||||
></b-form-select>
|
||||
</div>
|
||||
</b-input-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row class="overflow-auto">
|
||||
<b-table
|
||||
<b-table-lite
|
||||
ref="selectableTable"
|
||||
:items="items"
|
||||
:fields="fields"
|
||||
:per-page="perPage"
|
||||
:current-page="currentPage"
|
||||
:filter="filter"
|
||||
:filter-included-fields="filterOn"
|
||||
@filtered="onFiltered"
|
||||
:sort-by.sync="sortBy"
|
||||
:sort-desc.sync="sortDesc"
|
||||
:sort-direction="sortDirection"
|
||||
:busy="isBusy"
|
||||
:striped="table_Attributes.striped"
|
||||
:hover="table_Attributes.hover"
|
||||
:bordered="table_Attributes.bordered"
|
||||
:dark="table_Attributes.dark"
|
||||
:head-variant="table_Attributes.headVariant"
|
||||
label-sort-asc=""
|
||||
label-sort-desc=""
|
||||
label-sort-clear=""
|
||||
@filtered="onFiltered"
|
||||
:select-mode="selectMode"
|
||||
selectable
|
||||
@row-selected="rowSelectedToggle"
|
||||
:busy="isBusy"
|
||||
:sticky-header="commonTableAttributes.stickyHeader"
|
||||
:no-border-collapse="commonTableAttributes.noBorderCollapse"
|
||||
:striped="commonTableAttributes.striped"
|
||||
:hover="commonTableAttributes.hover"
|
||||
:bordered="commonTableAttributes.bordered"
|
||||
:dark="commonTableAttributes.dark"
|
||||
:head-variant="commonTableAttributes.headVariant"
|
||||
>
|
||||
<!-- 각 Cell/Field별 속성 추가용 -->
|
||||
<template #table-colgroup="scope">
|
||||
<col
|
||||
v-for="field in scope.fields"
|
||||
@ -61,22 +79,27 @@
|
||||
:style="{ width: field.width }"
|
||||
/>
|
||||
</template>
|
||||
<template #cell(selected)="row">
|
||||
<input
|
||||
type="checkbox"
|
||||
:value="row.item.id"
|
||||
@change="checkedIdsToggle(row.item.id)"
|
||||
/>
|
||||
<!-- 비/선택 Row를 토글용 -->
|
||||
<template #cell(rowSelect)="{ rowSelected }">
|
||||
<template v-if="rowSelected">
|
||||
<span aria-hidden="true">✓</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span aria-hidden="true"> </span>
|
||||
</template>
|
||||
</template>
|
||||
<!-- Row의 Index를 이용한 번호 출력 -->
|
||||
<template #cell(index)="row">
|
||||
{{ total - (currentPage * perPage + row.index) + perPage }}
|
||||
</template>
|
||||
<!-- 제목부분 출력용 -->
|
||||
<template #cell(title)="row">
|
||||
{{ row.item.title }}
|
||||
<b-button size="sm" @click="row.toggleDetails" class="mr-2">
|
||||
{{ row.detailsShowing ? 'Hide' : 'Show' }} Details
|
||||
</b-button>
|
||||
</template>
|
||||
<!-- 상세 내용 출력용 -->
|
||||
<template #row-details="row">
|
||||
<b-card>
|
||||
<b-row class="mb-2">
|
||||
@ -87,13 +110,14 @@
|
||||
>
|
||||
</b-card>
|
||||
</template>
|
||||
<!-- 데이터 로딩중 출력용 -->
|
||||
<template #table-busy>
|
||||
<div class="text-center text-danger my-2">
|
||||
<b-spinner class="align-middle"></b-spinner>
|
||||
<strong>Loading...</strong>
|
||||
</div>
|
||||
</template>
|
||||
</b-table>
|
||||
</b-table-lite>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col>
|
||||
@ -104,52 +128,59 @@
|
||||
></b-pagination>
|
||||
</b-col>
|
||||
<b-col>
|
||||
<div class="input-group">
|
||||
<b-input-group>
|
||||
<label class="input-group-text">DB</label>
|
||||
<input type="text" class="form-control" v-model="search" />
|
||||
<span class="input-group-text" @click="searchClick">검색</span>
|
||||
</div>
|
||||
<span class="input-group-text" @click="searchForDB">검색</span>
|
||||
</b-input-group>
|
||||
</b-col>
|
||||
<b-col>
|
||||
<div class="input-group justify-content-end">
|
||||
<b-input-group class="justify-content-end">
|
||||
<b-button @click="busyToggle">Toggle Busy State</b-button>
|
||||
</div>
|
||||
</b-input-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
<p>
|
||||
Selected Rows:<br />
|
||||
{{ selectedRows }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 참조 : https://vuejsexamples.com/vuejs-tables-and-select-all-checkbox/
|
||||
import axios from 'axios'
|
||||
// import ListComponent from '@/components/common/ListComponent.vue'
|
||||
axios.defaults.baseURL = 'http://localhost:3000'
|
||||
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=utf-8'
|
||||
axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*'
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
components: {
|
||||
//ListComponent: ListComponent
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
items: [],
|
||||
fields: [
|
||||
{ key: 'rowSelect', label: '✓', width: '55px' },
|
||||
{
|
||||
key: 'selected',
|
||||
label: '',
|
||||
width: '10px'
|
||||
key: 'index',
|
||||
label: '번호',
|
||||
width: '55px',
|
||||
variant: 'primary'
|
||||
},
|
||||
{ key: 'index', label: '번호', width: '55px' },
|
||||
{
|
||||
key: 'title',
|
||||
label: '제목',
|
||||
sortable: true,
|
||||
sortDirection: 'desc',
|
||||
sortByFormatted: true,
|
||||
filterByFormatted: true
|
||||
},
|
||||
// {
|
||||
// key: 'content',
|
||||
// label: '내용',
|
||||
// sortable: true,
|
||||
// sortDirection: 'desc',
|
||||
// sortByFormatted: true,
|
||||
// filterByFormatted: true
|
||||
// },
|
||||
{
|
||||
@ -161,13 +192,12 @@ export default {
|
||||
return value ? 'Yes' : 'No'
|
||||
},
|
||||
sortable: true,
|
||||
sortByFormatted: true,
|
||||
filterByFormatted: true
|
||||
},
|
||||
// { key: 'updateAt', label: '수정일' },
|
||||
{
|
||||
key: 'createdAt',
|
||||
label: '登録日時',
|
||||
label: '등록일',
|
||||
width: '105px',
|
||||
formatter: (value) => {
|
||||
return value.replace(
|
||||
@ -175,7 +205,8 @@ export default {
|
||||
'$1-$2-$3'
|
||||
)
|
||||
},
|
||||
sortable: true
|
||||
sortable: true,
|
||||
sortByFormatted: true
|
||||
// filterByFormatted: true
|
||||
}
|
||||
],
|
||||
@ -184,31 +215,43 @@ export default {
|
||||
perPageOptions: [
|
||||
{ value: 5, text: '5줄' },
|
||||
{ value: 10, text: '10줄' },
|
||||
{ value: 15, text: '15줄' },
|
||||
{ value: 100, text: 'Show a lot' }
|
||||
{ value: 30, text: '30줄' },
|
||||
{ value: 60, text: '60줄' },
|
||||
{ value: 100, text: '100줄' }
|
||||
],
|
||||
currentPage: 1, // 현재 페이지
|
||||
search: null, //DB검색
|
||||
// 속성옵션
|
||||
table_Attributes: {
|
||||
commonTableAttributes: {
|
||||
stickyHeader: false,
|
||||
noBorderCollapse: false,
|
||||
striped: true,
|
||||
hover: true,
|
||||
bordered: true,
|
||||
dark: false,
|
||||
headVariant: 'null'
|
||||
headVariant: 'light'
|
||||
},
|
||||
isBusy: false,
|
||||
sortBy: 'id',
|
||||
sortDesc: false,
|
||||
sortDirection: 'asc',
|
||||
filter: null,
|
||||
filterOn: [],
|
||||
search: null,
|
||||
checkedIds: []
|
||||
filterOn: ['title', 'content'],
|
||||
filterOptions: [
|
||||
{ text: '제목', value: 'title' },
|
||||
{ text: '내용', value: 'content' },
|
||||
{ text: '수정일', value: 'updateAt', disabled: true },
|
||||
{ text: '등록일', value: 'createdAt' }
|
||||
],
|
||||
selectModes: ['multi', 'single', 'range'],
|
||||
selectMode: 'multi',
|
||||
selectedAllToggle: false,
|
||||
selectedRows: []
|
||||
}
|
||||
},
|
||||
setup() {},
|
||||
created() {},
|
||||
mounted() {
|
||||
setup: function () {},
|
||||
created: function () {},
|
||||
mounted: function () {
|
||||
// var vm = this
|
||||
// setTimeout(function () {
|
||||
// vm.records = vm.getDatas()
|
||||
@ -238,7 +281,7 @@ export default {
|
||||
this.items = items.rows
|
||||
this.isBusy = false
|
||||
},
|
||||
searchClick() {
|
||||
searchForDB() {
|
||||
this.currentPage = 1
|
||||
this.getDatas()
|
||||
},
|
||||
@ -250,16 +293,26 @@ export default {
|
||||
this.total = filteredItems.length
|
||||
this.currentPage = 1
|
||||
},
|
||||
checkedIdsToggle(id) {
|
||||
console.log(this)
|
||||
//console.log(this.checkedIds)
|
||||
if (!this.checkedIds.includes(id)) {
|
||||
this.checkedIds.push(id)
|
||||
rowSelectedToggle(selectedRow) {
|
||||
this.selectedRows = selectedRow
|
||||
},
|
||||
rowSelectAllToggle() {
|
||||
if (this.selectedAllToggle) {
|
||||
this.$refs.selectableTable.clearSelected()
|
||||
this.selectedAllToggle = false
|
||||
} else {
|
||||
this.checkedIds = this.checkedIds.filter((e) => e !== id)
|
||||
this.$refs.selectableTable.selectAllRows()
|
||||
this.selectedAllToggle = true
|
||||
}
|
||||
console.log(this.checkedIds)
|
||||
}
|
||||
// rowSelectSet(id) {
|
||||
// // Rows are indexed from 0, so the third row is index 2
|
||||
// this.$refs.selectableTable.selectRow(id)
|
||||
// },
|
||||
// rowSelectUnSet(id) {
|
||||
// // Rows are indexed from 0, so the third row is index 2
|
||||
// this.$refs.selectableTable.unselectRow(id)
|
||||
// }
|
||||
},
|
||||
computed: {
|
||||
sortOptions() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user