수정2...
This commit is contained in:
parent
abe43faa2b
commit
612b5f9a1b
@ -1,42 +1,47 @@
|
|||||||
<template>
|
<template>
|
||||||
<nav class="navbar navbar-expand-lg bg-light">
|
<b-navbar toggleable="lg" type="dark" variant="info">
|
||||||
<div class="container-fluid">
|
<b-navbar-brand href="#">NavBar</b-navbar-brand>
|
||||||
<a class="navbar-brand" href="#">Navbar</a>
|
|
||||||
<button
|
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
|
||||||
class="navbar-toggler"
|
|
||||||
type="button"
|
<b-collapse id="nav-collapse" is-nav>
|
||||||
data-bs-toggle="collapse"
|
<b-navbar-nav>
|
||||||
data-bs-target="#navbarSupportedContent"
|
<b-nav-item href="#">Link</b-nav-item>
|
||||||
aria-controls="navbarSupportedContent"
|
<b-nav-item href="#" disabled>Disabled</b-nav-item>
|
||||||
aria-expanded="false"
|
<b-nav-item href="/todo">Todo</b-nav-item>
|
||||||
aria-label="Toggle navigation"
|
</b-navbar-nav>
|
||||||
>
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
<!-- Right aligned nav items -->
|
||||||
</button>
|
<b-navbar-nav class="ml-auto">
|
||||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
<b-nav-form>
|
||||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
<b-form-input
|
||||||
<li class="nav-item">
|
size="sm"
|
||||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
class="mr-sm-2"
|
||||||
</li>
|
placeholder="Search"
|
||||||
<li class="nav-item">
|
></b-form-input>
|
||||||
<a class="nav-link" href="#">Link</a>
|
<b-button size="sm" class="my-2 my-sm-0" type="submit"
|
||||||
</li>
|
>Search</b-button
|
||||||
<li class="nav-item">
|
>
|
||||||
<a class="nav-link" href="/todo">Todo</a>
|
</b-nav-form>
|
||||||
</li>
|
|
||||||
</ul>
|
<!-- <b-nav-item-dropdown text="Lang" right>
|
||||||
<form class="d-flex" role="search">
|
<b-dropdown-item href="#">EN</b-dropdown-item>
|
||||||
<input
|
<b-dropdown-item href="#">ES</b-dropdown-item>
|
||||||
class="form-control me-2"
|
<b-dropdown-item href="#">RU</b-dropdown-item>
|
||||||
type="search"
|
<b-dropdown-item href="#">FA</b-dropdown-item>
|
||||||
placeholder="통합검색"
|
</b-nav-item-dropdown> -->
|
||||||
aria-label="Search"
|
|
||||||
/>
|
<b-nav-item-dropdown right>
|
||||||
<button class="btn btn-outline-success" type="submit">Search</button>
|
<!-- Using 'button-content' slot -->
|
||||||
</form>
|
<template #button-content>
|
||||||
</div>
|
<em>User</em>
|
||||||
</div>
|
</template>
|
||||||
</nav>
|
<b-dropdown-item href="#">Profile</b-dropdown-item>
|
||||||
|
<b-dropdown-item href="#">Sign Out</b-dropdown-item>
|
||||||
|
</b-nav-item-dropdown>
|
||||||
|
</b-navbar-nav>
|
||||||
|
</b-collapse>
|
||||||
|
</b-navbar>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
|
|||||||
@ -36,13 +36,11 @@
|
|||||||
</b-col>
|
</b-col>
|
||||||
<b-col cols="4" class="border">
|
<b-col cols="4" class="border">
|
||||||
<b-input-group>
|
<b-input-group>
|
||||||
<label class="input-group-text">
|
<b-form-select
|
||||||
<b-form-select
|
class="d-flex flex-nowrap"
|
||||||
class="d-flex flex-nowrap"
|
v-model="filterDateField"
|
||||||
v-model="filterDateField"
|
:options="filterDateFieldOptions"
|
||||||
:options="filterDateFieldOptions"
|
></b-form-select>
|
||||||
></b-form-select>
|
|
||||||
</label>
|
|
||||||
<b-form-input v-model="filterDateStart" type="date"></b-form-input>
|
<b-form-input v-model="filterDateStart" type="date"></b-form-input>
|
||||||
~
|
~
|
||||||
<b-form-input v-model="filterDateEnd" type="date"></b-form-input>
|
<b-form-input v-model="filterDateEnd" type="date"></b-form-input>
|
||||||
@ -60,89 +58,89 @@
|
|||||||
</b-input-group>
|
</b-input-group>
|
||||||
</b-col>
|
</b-col>
|
||||||
</b-row>
|
</b-row>
|
||||||
<b-row class="overflow-auto">
|
</b-container>
|
||||||
<b-table
|
<b-table
|
||||||
id="todoTable"
|
id="todoTable"
|
||||||
ref="todoTable"
|
ref="todoTable"
|
||||||
:page="page"
|
:page="page"
|
||||||
:items="rows"
|
:items="rows"
|
||||||
:fields="fields"
|
:fields="fields"
|
||||||
:per-page="perPage"
|
:per-page="perPage"
|
||||||
:sort-by.sync="sortBy"
|
:sort-by.sync="sortBy"
|
||||||
:sort-desc.sync="sortDesc"
|
:sort-desc.sync="sortDesc"
|
||||||
@sort-changed="sortClick"
|
@sort-changed="sortClick"
|
||||||
label-sort-asc=""
|
label-sort-asc=""
|
||||||
label-sort-desc=""
|
label-sort-desc=""
|
||||||
label-sort-clear=""
|
label-sort-clear=""
|
||||||
:select-mode="selectedRowMode"
|
:select-mode="selectedRowMode"
|
||||||
selectable
|
selectable
|
||||||
@row-selected="rowSelectedToggle"
|
@row-selected="rowSelectedToggle"
|
||||||
:busy="isBusy"
|
:busy="isBusy"
|
||||||
:sticky-header="commonTableAttributes.stickyHeader"
|
:sticky-header="commonTableAttributes.stickyHeader"
|
||||||
:no-border-collapse="commonTableAttributes.noBorderCollapse"
|
:no-border-collapse="commonTableAttributes.noBorderCollapse"
|
||||||
:striped="commonTableAttributes.striped"
|
:striped="commonTableAttributes.striped"
|
||||||
:hover="commonTableAttributes.hover"
|
:hover="commonTableAttributes.hover"
|
||||||
:no-local-sorting="commonTableAttributes.noLocalSorting"
|
:no-local-sorting="commonTableAttributes.noLocalSorting"
|
||||||
:bordered="commonTableAttributes.bordered"
|
:bordered="commonTableAttributes.bordered"
|
||||||
:dark="commonTableAttributes.dark"
|
:dark="commonTableAttributes.dark"
|
||||||
:head-variant="commonTableAttributes.headVariant"
|
:head-variant="commonTableAttributes.headVariant"
|
||||||
>
|
>
|
||||||
<!-- Column별 Filter용 -->
|
<!-- Column별 Filter용 -->
|
||||||
<template #thead-top>
|
<template #thead-top>
|
||||||
<b-tr>
|
<b-tr>
|
||||||
<b-th colspan="4"> </b-th>
|
<b-th colspan="4"> </b-th>
|
||||||
<b-th
|
<b-th
|
||||||
><b-form-select
|
><b-form-select
|
||||||
v-model="filterIsDone"
|
v-model="filterIsDone"
|
||||||
:options="filterIsDoneFieldOptions"
|
:options="filterIsDoneFieldOptions"
|
||||||
@change="isDoneClick"
|
@change="isDoneClick"
|
||||||
></b-form-select
|
></b-form-select
|
||||||
></b-th>
|
></b-th>
|
||||||
<b-th></b-th>
|
<b-th></b-th>
|
||||||
</b-tr>
|
</b-tr>
|
||||||
</template>
|
</template>
|
||||||
<!-- 비/선택 Row를 토글용 -->
|
<!-- 비/선택 Row를 토글용 -->
|
||||||
<template #cell(rowSelect)="{ rowSelected }">
|
<template #cell(rowSelect)="{ rowSelected }">
|
||||||
<template v-if="rowSelected">
|
<template v-if="rowSelected">
|
||||||
<span aria-hidden="true">✓</span>
|
<span aria-hidden="true">✓</span>
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<span aria-hidden="true"> </span>
|
<span aria-hidden="true"> </span>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
<!-- Row의 Index를 이용한 번호 출력 -->
|
<!-- Row의 Index를 이용한 번호 출력 -->
|
||||||
<template #cell(id)="row">
|
<template #cell(id)="row">
|
||||||
<b-link ref="edit/{{row.item.id}}">
|
<b-link ref="edit/{{row.item.id}}">
|
||||||
{{ total - (page * perPage + row.index) + perPage }}
|
{{ total - (page * perPage + row.index) + perPage }}
|
||||||
</b-link>
|
</b-link>
|
||||||
</template>
|
</template>
|
||||||
<!-- 제목부분 출력용 -->
|
<!-- 제목부분 출력용 -->
|
||||||
<template #cell(title)="row">
|
<template #cell(title)="row">
|
||||||
{{ row.item.title }}
|
{{ row.item.title }}
|
||||||
</template>
|
</template>
|
||||||
<!-- 상세 내용 출력용 -->
|
<!-- 상세 내용 출력용 -->
|
||||||
<template #cell(content)="row">
|
<template #cell(content)="row">
|
||||||
<b-button size="sm" @click="row.toggleDetails" class="mr-2">
|
<b-button size="sm" @click="row.toggleDetails" class="mr-2">
|
||||||
[{{ row.item.id }}] {{ row.detailsShowing ? '숨기기' : '보기' }}
|
[{{ row.item.id }}] {{ row.detailsShowing ? '숨기기' : '보기' }}
|
||||||
</b-button>
|
</b-button>
|
||||||
</template>
|
</template>
|
||||||
<template #row-details="row">
|
<template #row-details="row">
|
||||||
<b-card>
|
<b-card>
|
||||||
<b-row>
|
<b-row>
|
||||||
<b-col v-html="row.item.content"></b-col>
|
<b-col v-html="row.item.content"></b-col>
|
||||||
</b-row>
|
</b-row>
|
||||||
<b-button size="sm" @click="row.toggleDetails">숨기기</b-button>
|
<b-button size="sm" @click="row.toggleDetails">숨기기</b-button>
|
||||||
</b-card>
|
</b-card>
|
||||||
</template>
|
</template>
|
||||||
<!-- 데이터 로딩중 출력용 -->
|
<!-- 데이터 로딩중 출력용 -->
|
||||||
<template #table-busy>
|
<template #table-busy>
|
||||||
<div class="text-center text-danger my-2">
|
<div class="text-center text-danger my-2">
|
||||||
<b-spinner class="align-middle"></b-spinner>
|
<b-spinner class="align-middle"></b-spinner>
|
||||||
<strong>Loading...</strong>
|
<strong>Loading...</strong>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</b-table>
|
</b-table>
|
||||||
</b-row>
|
<b-container fluid>
|
||||||
<b-row>
|
<b-row>
|
||||||
<b-col>
|
<b-col>
|
||||||
<p>{{ selectedRows }}</p>
|
<p>{{ selectedRows }}</p>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user