Store_Vuex init...
This commit is contained in:
parent
0dc2eb0910
commit
5fd60169bf
175
src/components/common/ListComponent.vue
Normal file
175
src/components/common/ListComponent.vue
Normal file
@ -0,0 +1,175 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<TableHeaderComponent
|
||||||
|
:searchFields="searchFields"
|
||||||
|
:search="search"
|
||||||
|
:searchFieldOptions="searchFieldOptions"
|
||||||
|
:filterDateField="filterDateField"
|
||||||
|
:filterDateFieldOptions="filterDateFieldOptions"
|
||||||
|
:filterDateStart="filterDateStart"
|
||||||
|
:filterDateEnd="filterDateEnd"
|
||||||
|
:perPage="perPage"
|
||||||
|
:perPageOptions="perPageOptions"
|
||||||
|
/>
|
||||||
|
<TableComponent
|
||||||
|
:getTotal="getTotal"
|
||||||
|
:getRows="getRows"
|
||||||
|
:fields="fields"
|
||||||
|
:tableAttributes="tableAttributes"
|
||||||
|
:page="page"
|
||||||
|
:perPage="perPage"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { createNamespacedHelpers } from 'vuex'
|
||||||
|
const todoStore = createNamespacedHelpers('TodoStore')
|
||||||
|
import TableComponent from '@/components/common/TableComponent.vue'
|
||||||
|
import TableHeaderComponent from '@/components/common/TableHeaderComponent.vue'
|
||||||
|
export default {
|
||||||
|
components: { TableHeaderComponent, TableComponent },
|
||||||
|
computed: {
|
||||||
|
...todoStore.mapGetters(['getTotal', 'getRows'])
|
||||||
|
},
|
||||||
|
created: function () {
|
||||||
|
this.setDatas()
|
||||||
|
},
|
||||||
|
data: function () {
|
||||||
|
return {
|
||||||
|
//Table용
|
||||||
|
fields: [
|
||||||
|
{
|
||||||
|
key: 'rowSelect',
|
||||||
|
label: '✓',
|
||||||
|
thStyle: { width: '55px', backgroundColor: 'yellow' }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'id',
|
||||||
|
label: '번호',
|
||||||
|
thStyle: { width: '75px' },
|
||||||
|
variant: 'primary',
|
||||||
|
sortable: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'title',
|
||||||
|
label: '제목',
|
||||||
|
sortable: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'content',
|
||||||
|
label: '내용',
|
||||||
|
sortable: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'is_done',
|
||||||
|
label: '사용여부',
|
||||||
|
thStyle: { width: '105px' },
|
||||||
|
formatter: (value) => {
|
||||||
|
return value == true ? 'YES' : 'NO'
|
||||||
|
},
|
||||||
|
Options: [
|
||||||
|
{ text: '사용여부 선택', value: '' },
|
||||||
|
{ text: 'YES', value: true },
|
||||||
|
{ text: 'NO', value: false }
|
||||||
|
],
|
||||||
|
sortable: true,
|
||||||
|
sortByFormatted: true //fomatter결과에따른 Sort가 필요시 true
|
||||||
|
},
|
||||||
|
// { key: 'updateAt', label: '수정일' },
|
||||||
|
{
|
||||||
|
key: 'createdAt',
|
||||||
|
label: '등록일',
|
||||||
|
thStyle: { width: '125px' },
|
||||||
|
formatter: (value) => {
|
||||||
|
return value.replace(
|
||||||
|
/([0-9]{4})-([0-9]{2})-([0-9]{2}).*/gi,
|
||||||
|
'$1-$2-$3'
|
||||||
|
)
|
||||||
|
},
|
||||||
|
sortable: true,
|
||||||
|
sortByFormatted: true //fomatter결과에따른 Sort가 필요시 true
|
||||||
|
}
|
||||||
|
],
|
||||||
|
// 속성옵션
|
||||||
|
tableAttributes: {
|
||||||
|
stickyHeader: '50%',
|
||||||
|
//noBorderCollapse: false,
|
||||||
|
striped: true,
|
||||||
|
hover: true,
|
||||||
|
noLocalSorting: true,
|
||||||
|
bordered: true,
|
||||||
|
dark: false,
|
||||||
|
headVariant: 'light'
|
||||||
|
},
|
||||||
|
//Table용
|
||||||
|
page: 1, // 현재 페이지
|
||||||
|
perPage: process.env.VUE_APP_TABLE_DEFAULT_PERPAGE, // 페이지당 보여줄 갯수
|
||||||
|
perPageOptions: [
|
||||||
|
{ text: '5줄', value: 5 },
|
||||||
|
{ text: '10줄', value: 10 },
|
||||||
|
{ text: '30줄', value: 30 },
|
||||||
|
{ text: '60줄', value: 60 },
|
||||||
|
{ text: '100줄', value: 100 }
|
||||||
|
],
|
||||||
|
search: null,
|
||||||
|
searchFields: ['title', 'content'],
|
||||||
|
searchFieldOptions: [
|
||||||
|
{ text: '제목', value: 'title' },
|
||||||
|
{ text: '내용', value: 'content' }
|
||||||
|
],
|
||||||
|
filter: null,
|
||||||
|
filterField: null,
|
||||||
|
filterDateStart: null,
|
||||||
|
filterDateEnd: null,
|
||||||
|
filterDateField: 'createdAt',
|
||||||
|
filterDateFieldOptions: [
|
||||||
|
{ text: '수정일', value: 'updatedAt' },
|
||||||
|
{ text: '등록일', value: 'createdAt' }
|
||||||
|
],
|
||||||
|
filterIsDone: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
setDatas(page = 1) {
|
||||||
|
this.$store
|
||||||
|
.dispatch('TodoStore/setData', {
|
||||||
|
page: page,
|
||||||
|
perPage: this.perPage,
|
||||||
|
sortBy: this.sortBy,
|
||||||
|
sortDesc: this.sortDesc,
|
||||||
|
searchFields: this.searchFields,
|
||||||
|
search: this.search,
|
||||||
|
filter: this.filter,
|
||||||
|
filterField: this.filterField,
|
||||||
|
filterDateStart: this.filterDateStart,
|
||||||
|
filterDateEnd: this.filterDateEnd
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
alert(error)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
searchClick() {
|
||||||
|
this.setDatas()
|
||||||
|
},
|
||||||
|
pageClick(event, page) {
|
||||||
|
//console.log(event)
|
||||||
|
this.setDatas(page)
|
||||||
|
// event.preventDefault()
|
||||||
|
},
|
||||||
|
perPageClick(perPage) {
|
||||||
|
this.perPage = perPage
|
||||||
|
//console.log(this.perPage)
|
||||||
|
this.setDatas()
|
||||||
|
},
|
||||||
|
dateClick() {
|
||||||
|
this.filterField = this.filterDateField
|
||||||
|
this.setDatas()
|
||||||
|
},
|
||||||
|
isDoneClick() {
|
||||||
|
this.filter = this.filterIsDone
|
||||||
|
this.filterField = 'is_done'
|
||||||
|
this.setDatas()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -1,104 +0,0 @@
|
|||||||
<template>
|
|
||||||
<!-- 참조: https://codesandbox.io/s/3v0m1?file=/src/components/board/BoardList.vue -->
|
|
||||||
<b-table
|
|
||||||
ref="BTable"
|
|
||||||
:page="page"
|
|
||||||
:items="items"
|
|
||||||
:fields="fields"
|
|
||||||
:per-page="perPage"
|
|
||||||
:sort-by.sync="sortBy"
|
|
||||||
:sort-desc.sync="sortDesc"
|
|
||||||
@sort-changed="sortClick"
|
|
||||||
selectable
|
|
||||||
select-mode="multi"
|
|
||||||
@row-selected="selectedRowToggle"
|
|
||||||
:sticky-header="commonTableAttributes.stickyHeader"
|
|
||||||
:no-border-collapse="commonTableAttributes.noBorderCollapse"
|
|
||||||
:striped="commonTableAttributes.striped"
|
|
||||||
:hover="commonTableAttributes.hover"
|
|
||||||
:no-local-sorting="commonTableAttributes.noLocalSorting"
|
|
||||||
:bordered="commonTableAttributes.bordered"
|
|
||||||
:dark="commonTableAttributes.dark"
|
|
||||||
:head-variant="commonTableAttributes.headVariant"
|
|
||||||
>
|
|
||||||
<!-- Field별 Filter용 -->
|
|
||||||
<template #head(is_done)="fields">
|
|
||||||
<b-form-select
|
|
||||||
:value="filterIsDone"
|
|
||||||
:options="fields.field.Options"
|
|
||||||
@change="isDoneClick"
|
|
||||||
></b-form-select>
|
|
||||||
</template>
|
|
||||||
<!-- 비/선택 Row 토글용 -->
|
|
||||||
<template #cell(rowSelect)="{ rowSelected }">
|
|
||||||
<template v-if="rowSelected">✓</template>
|
|
||||||
</template>
|
|
||||||
<!-- Row의 Index 이용한 번호 출력용 -->
|
|
||||||
<template #cell(id)="row">
|
|
||||||
<b-link ref="edit/{{row.item.id}}">
|
|
||||||
{{ total - (page * perPage + row.index) + parseInt(perPage) }}
|
|
||||||
</b-link>
|
|
||||||
</template>
|
|
||||||
<!-- 제목부분 출력용 -->
|
|
||||||
<template #cell(title)="row">
|
|
||||||
{{ row.item.title }}
|
|
||||||
</template>
|
|
||||||
<!-- 상세 내용 출력용 -->
|
|
||||||
<template #cell(content)="row">
|
|
||||||
<b-button size="sm" @click="row.toggleDetails" class="mr-2">
|
|
||||||
[{{ row.item.id }}] {{ row.detailsShowing ? '숨기기' : '보기' }}
|
|
||||||
</b-button>
|
|
||||||
</template>
|
|
||||||
<template #row-details="row">
|
|
||||||
<b-card>
|
|
||||||
<b-row>
|
|
||||||
<b-col v-html="row.item.content"></b-col>
|
|
||||||
</b-row>
|
|
||||||
<b-button size="sm" @click="row.toggleDetails">숨기기</b-button>
|
|
||||||
</b-card>
|
|
||||||
</template>
|
|
||||||
<!-- 사용여부 출력용 -->
|
|
||||||
<template #cell(is_done)="row">
|
|
||||||
{{ row.value }}
|
|
||||||
</template>
|
|
||||||
</b-table>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'TableComponent',
|
|
||||||
props: [
|
|
||||||
'fields',
|
|
||||||
'items',
|
|
||||||
'total',
|
|
||||||
'page',
|
|
||||||
'perPage',
|
|
||||||
'selectedRows',
|
|
||||||
'filterIsDone'
|
|
||||||
],
|
|
||||||
data: function () {
|
|
||||||
return {
|
|
||||||
perPageOptions: [
|
|
||||||
{ text: '5줄', value: 5 },
|
|
||||||
{ text: '10줄', value: 10 },
|
|
||||||
{ text: '30줄', value: 30 },
|
|
||||||
{ text: '60줄', value: 60 },
|
|
||||||
{ text: '100줄', value: 100 }
|
|
||||||
],
|
|
||||||
// 속성옵션
|
|
||||||
commonTableAttributes: {
|
|
||||||
stickyHeader: '50%',
|
|
||||||
//noBorderCollapse: false,
|
|
||||||
striped: true,
|
|
||||||
hover: true,
|
|
||||||
noLocalSorting: true,
|
|
||||||
bordered: true,
|
|
||||||
dark: false,
|
|
||||||
headVariant: 'light'
|
|
||||||
},
|
|
||||||
sortBy: 'id',
|
|
||||||
sortDesc: true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style scoped></style>
|
|
||||||
144
src/components/common/TableComponent.vue
Normal file
144
src/components/common/TableComponent.vue
Normal file
@ -0,0 +1,144 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<b-table
|
||||||
|
ref="BTable"
|
||||||
|
:page="page"
|
||||||
|
:items="getRows"
|
||||||
|
:fields="fields"
|
||||||
|
:per-page="perPage"
|
||||||
|
:sort-by.sync="sortBy"
|
||||||
|
:sort-desc.sync="sortDesc"
|
||||||
|
@sort-changed="sortClick"
|
||||||
|
label-sort-asc=""
|
||||||
|
label-sort-desc=""
|
||||||
|
label-sort-clear=""
|
||||||
|
selectable
|
||||||
|
:select-mode="selectedRowMode"
|
||||||
|
@row-selected="rowSelectedToggle"
|
||||||
|
:sticky-header="tableAttributes.stickyHeader"
|
||||||
|
:no-border-collapse="tableAttributes.noBorderCollapse"
|
||||||
|
:striped="tableAttributes.striped"
|
||||||
|
:hover="tableAttributes.hover"
|
||||||
|
:no-local-sorting="tableAttributes.noLocalSorting"
|
||||||
|
:bordered="tableAttributes.bordered"
|
||||||
|
:dark="tableAttributes.dark"
|
||||||
|
:head-variant="tableAttributes.headVariant"
|
||||||
|
>
|
||||||
|
<!-- Field별 Filter용 -->
|
||||||
|
<template #head(rowSelect)>
|
||||||
|
<b-form-checkbox @change="rowSelectAllToggle">All</b-form-checkbox>
|
||||||
|
</template>
|
||||||
|
<template #head(is_done)="fields">
|
||||||
|
<b-form-select
|
||||||
|
v-model="filterIsDone"
|
||||||
|
:options="fields.field.Options"
|
||||||
|
@change="isDoneClick"
|
||||||
|
></b-form-select>
|
||||||
|
</template>
|
||||||
|
<!-- 비/선택 Row 토글용 -->
|
||||||
|
<template #cell(rowSelect)="{ rowSelected }">
|
||||||
|
<template v-if="rowSelected">✓</template>
|
||||||
|
</template>
|
||||||
|
<!-- Row의 Index 이용한 번호 출력용 -->
|
||||||
|
<template #cell(id)="row">
|
||||||
|
<b-link ref="edit/{{row.item.id}}">
|
||||||
|
{{ getTotal - (page * perPage + row.index) + Number(perPage) }}
|
||||||
|
</b-link>
|
||||||
|
</template>
|
||||||
|
<!-- 제목부분 출력용 -->
|
||||||
|
<template #cell(title)="row">
|
||||||
|
{{ row.item.title }}
|
||||||
|
</template>
|
||||||
|
<!-- 상세 내용 출력용 -->
|
||||||
|
<template #cell(content)="row">
|
||||||
|
<b-button size="sm" @click="row.toggleDetails" class="mr-2">
|
||||||
|
[{{ row.item.id }}] {{ row.detailsShowing ? '숨기기' : '보기' }}
|
||||||
|
</b-button>
|
||||||
|
</template>
|
||||||
|
<template #row-details="row">
|
||||||
|
<b-card>
|
||||||
|
<b-row>
|
||||||
|
<b-col v-html="row.item.content"></b-col>
|
||||||
|
</b-row>
|
||||||
|
<b-button size="sm" @click="row.toggleDetails">숨기기</b-button>
|
||||||
|
</b-card>
|
||||||
|
</template>
|
||||||
|
<!-- 사용여부 출력용 -->
|
||||||
|
<template #cell(is_done)="row">
|
||||||
|
{{ row.value }}
|
||||||
|
</template>
|
||||||
|
</b-table>
|
||||||
|
<b-container fluid>
|
||||||
|
<b-row>
|
||||||
|
<b-col>
|
||||||
|
<p>{{ selectedRows }}</p>
|
||||||
|
</b-col>
|
||||||
|
<b-col>
|
||||||
|
<b-pagination
|
||||||
|
:page="page"
|
||||||
|
:total-rows="getTotal"
|
||||||
|
:per-page="perPage"
|
||||||
|
@page-click="pageClick"
|
||||||
|
last-number
|
||||||
|
class="justify-content-center"
|
||||||
|
>
|
||||||
|
</b-pagination>
|
||||||
|
</b-col>
|
||||||
|
<b-col> </b-col>
|
||||||
|
</b-row>
|
||||||
|
</b-container>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
// 참조 : https://vuejsexamples.com/vuejs-tables-and-select-all-checkbox/
|
||||||
|
export default {
|
||||||
|
name: 'TableHeaderComponent',
|
||||||
|
props: [
|
||||||
|
'getTotal',
|
||||||
|
'getRows',
|
||||||
|
'fields',
|
||||||
|
'tableAttributes',
|
||||||
|
'page',
|
||||||
|
'perPage'
|
||||||
|
],
|
||||||
|
components: {},
|
||||||
|
data: function () {
|
||||||
|
return {
|
||||||
|
sortBy: 'id',
|
||||||
|
sortDesc: true,
|
||||||
|
selectedRows: [],
|
||||||
|
selectedRowMode: 'multi',
|
||||||
|
selectedRowAllToggle: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
method: {
|
||||||
|
rowSelectedToggle(selectedRow) {
|
||||||
|
this.selectedRows = selectedRow
|
||||||
|
},
|
||||||
|
rowSelectAllToggle() {
|
||||||
|
if (this.selectedRowAllToggle) {
|
||||||
|
this.$refs.BTable.clearSelected()
|
||||||
|
this.selectedRowAllToggle = false
|
||||||
|
} else {
|
||||||
|
this.$refs.BTable.selectAllRows()
|
||||||
|
this.selectedRowAllToggle = true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// rowSelectSet(id) {
|
||||||
|
// // Rows are indexed from 0, so the third row is index 2
|
||||||
|
// this.$refs.BTable.selectRow(id)
|
||||||
|
// },
|
||||||
|
// rowSelectUnSet(id) {
|
||||||
|
// // Rows are indexed from 0, so the third row is index 2
|
||||||
|
// this.$refs.BTable.unselectRow(id)
|
||||||
|
// }
|
||||||
|
sortClick(event) {
|
||||||
|
//console.log(event)
|
||||||
|
this.sortBy = event.sortBy
|
||||||
|
this.sortDesc = event.sortDesc
|
||||||
|
//this.setDatas()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped></style>
|
||||||
@ -1,26 +1,17 @@
|
|||||||
<template>
|
<template>
|
||||||
<b-container fluid>
|
<b-container fluid>
|
||||||
<b-row>
|
<b-row>
|
||||||
<b-col class="border">
|
<b-col>
|
||||||
<b-input-group>
|
<b-input-group>
|
||||||
<label class="input-group-text">
|
<b-form-select
|
||||||
<b-form-checkbox @change="selectedRowAllToggle"
|
class="d-flex flex-nowrap"
|
||||||
>All</b-form-checkbox
|
:value="searchFields"
|
||||||
>
|
:options="searchFieldOptions"
|
||||||
</label>
|
multiple
|
||||||
</b-input-group>
|
:select-size="1"
|
||||||
</b-col>
|
></b-form-select>
|
||||||
<b-col cols="4" class="border">
|
|
||||||
<b-input-group>
|
|
||||||
<label class="input-group-text">
|
|
||||||
<b-form-checkbox-group
|
|
||||||
class="d-flex flex-nowrap"
|
|
||||||
v-model="searchFields"
|
|
||||||
:options="searchFieldOptions"
|
|
||||||
></b-form-checkbox-group>
|
|
||||||
</label>
|
|
||||||
<b-form-input
|
<b-form-input
|
||||||
v-model="search"
|
:value="search"
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="검색어"
|
placeholder="검색어"
|
||||||
@keydown.enter="searchClick"
|
@keydown.enter="searchClick"
|
||||||
@ -28,7 +19,7 @@
|
|||||||
<b-button @click="searchClick">검색</b-button>
|
<b-button @click="searchClick">검색</b-button>
|
||||||
</b-input-group>
|
</b-input-group>
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col cols="4" class="border">
|
<b-col>
|
||||||
<b-input-group>
|
<b-input-group>
|
||||||
<b-form-select
|
<b-form-select
|
||||||
class="d-flex flex-nowrap"
|
class="d-flex flex-nowrap"
|
||||||
@ -41,7 +32,7 @@
|
|||||||
<b-button @click="dateClick">선택</b-button>
|
<b-button @click="dateClick">선택</b-button>
|
||||||
</b-input-group>
|
</b-input-group>
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col class="border">
|
<b-col>
|
||||||
<b-input-group class="justify-content-end">
|
<b-input-group class="justify-content-end">
|
||||||
<label class="input-group-text">줄수</label>
|
<label class="input-group-text">줄수</label>
|
||||||
<b-form-select
|
<b-form-select
|
||||||
@ -59,29 +50,15 @@ export default {
|
|||||||
name: 'TableHeaderComponent',
|
name: 'TableHeaderComponent',
|
||||||
props: [
|
props: [
|
||||||
'searchFields',
|
'searchFields',
|
||||||
|
'search',
|
||||||
'searchFieldOptions',
|
'searchFieldOptions',
|
||||||
'filterDateField',
|
'filterDateField',
|
||||||
'filterDateFieldOptions',
|
'filterDateFieldOptions',
|
||||||
'filterDateStart',
|
'filterDateStart',
|
||||||
'filterDateEnd'
|
'filterDateEnd',
|
||||||
],
|
'perPage',
|
||||||
data: function () {
|
'perPageOptions'
|
||||||
return {
|
]
|
||||||
perPageOptions: [
|
|
||||||
{ text: '5줄', value: 5 },
|
|
||||||
{ text: '10줄', value: 10 },
|
|
||||||
{ text: '30줄', value: 30 },
|
|
||||||
{ text: '60줄', value: 60 },
|
|
||||||
{ text: '100줄', value: 100 }
|
|
||||||
],
|
|
||||||
search: null,
|
|
||||||
filter: null,
|
|
||||||
filterField: null,
|
|
||||||
filterDateStart: null,
|
|
||||||
filterDateEnd: null,
|
|
||||||
selectedRowAll: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style scoped></style>
|
<style scoped></style>
|
||||||
Loading…
Reference in New Issue
Block a user