Merge pull request 'add paging for screen 2 12' (#81) from dev-manhph1-figbug into dev
Reviewed-on: #81
This commit is contained in:
@ -4,7 +4,7 @@
|
||||
<!-- 리스트 페이지 시작 -->
|
||||
<div v-if="pageActionFlag == 'list'" class="h1001">
|
||||
<v-card class="">
|
||||
<div class="pa-5">
|
||||
<div class="pa-5 pb-0">
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col :cols="12" class="d-flex align-center justify-space-between">
|
||||
<v-card-title class="pa-0 custom-title-4">공지사항</v-card-title>
|
||||
@ -15,11 +15,15 @@
|
||||
<!-- <v-btn @click="listPageButtonGroupClickEvent('delete')" :ripple="false">삭제</v-btn> -->
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col :cols="12" ref="contents" class="mt-5" style="min-height: calc(100% - 76px);">
|
||||
<div ref="gridParent" class="px-50" style="min-height: 70vh;">
|
||||
<v-col :cols="12" ref="contents" class="mt-5" style="min-height: calc(100% - 73px);">
|
||||
<div ref="gridParent" class="px-50" style="min-height: 64vh;">
|
||||
<component :ref="gridName" :is="loadGrid ? 'Grid' : null" :gridName="gridName"
|
||||
:parentPrgmId="myPrgmId" @getRowsData="getRowData" />
|
||||
</div>
|
||||
<div class="d-flex align-center justify-center pa-5" v-if="loadGrid && totalCount > 0">
|
||||
<pagination id="pagination" :total-count="totalCount" :page-num="page" :limit="limit"
|
||||
@loadData="changeGrid" />
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
@ -37,7 +41,7 @@
|
||||
class="mr-1" icon="unordered-list">목록</a-button>
|
||||
<a-button @click="viewPageButtonGroupClickEvent('reply')" type="primary" :ripple="false"
|
||||
class="mr-1" icon="send-outlined">
|
||||
<v-icon small :class="['mr-2']" >$icoSend</v-icon>
|
||||
<v-icon small :class="['mr-2']">$icoSend</v-icon>
|
||||
답글
|
||||
</a-button>
|
||||
<a-button @click="viewPageButtonGroupClickEvent('update')" type="primary" :ripple="false"
|
||||
@ -60,11 +64,8 @@
|
||||
<v-card-title class="custom-title-7 pa-0">
|
||||
파일목록
|
||||
</v-card-title>
|
||||
<div v-for="fileData in viewActionData.fileData"
|
||||
:key="fileData.apndFileId"
|
||||
:class="['file-item', isDarkMode?'dark':'light']"
|
||||
style="background-color: unset;"
|
||||
>
|
||||
<div v-for="fileData in viewActionData.fileData" :key="fileData.apndFileId"
|
||||
:class="['file-item', isDarkMode ? 'dark' : 'light']" style="background-color: unset;">
|
||||
<a @click.prevent="downloadFile(fileData)" class="pa-0">
|
||||
<div class="d-flex justify-start search-box-label mb-0">
|
||||
<v-icon>mdi-paperclip</v-icon>
|
||||
@ -93,15 +94,14 @@
|
||||
</v-col>
|
||||
<v-col :cols="12" style="min-height: calc(100vh - 450px);">
|
||||
<editor ref="tuiEditor" height="100%" initialEditType="wysiwyg"
|
||||
:class="[isDarkMode ? 'toastui-editor-dark' : 'toastui-editor-light']"/>
|
||||
:class="[isDarkMode ? 'toastui-editor-dark' : 'toastui-editor-light']" />
|
||||
</v-col>
|
||||
|
||||
<v-col :cols="6" class="mt-5">
|
||||
<v-card-title class="custom-title-7 pa-0">파일첨부</v-card-title>
|
||||
<div class="" v-if="writeActionData.fileData">
|
||||
<div v-for="(fileData, index) in writeActionData.fileData" :key="fileData.apndFileId"
|
||||
:class="['file-item d-flex justify-space-between', isDarkMode?'dark':'light']"
|
||||
>
|
||||
:class="['file-item d-flex justify-space-between', isDarkMode ? 'dark' : 'light']">
|
||||
<div class="file-item-detail">
|
||||
<v-icon>mdi-paperclip</v-icon>
|
||||
<span href="#" class="file-item-name">{{ fileData.name }}</span>
|
||||
@ -110,17 +110,16 @@
|
||||
@click="writeActionData.업로드fileData.splice(index, 1)" />
|
||||
</div>
|
||||
</div>
|
||||
<a-button class="ant-btn-popup-default mt-3" color="primary" icon="upload" @click="$refs.writeInputFile.$refs.input.click()">
|
||||
<a-button class="ant-btn-popup-default mt-3" color="primary" icon="upload"
|
||||
@click="$refs.writeInputFile.$refs.input.click()">
|
||||
업로드
|
||||
</a-button>
|
||||
<v-file-input ref="writeInputFile" v-model="writeActionData.fileData" multiple outlined
|
||||
hide-input class="d-none" prepend-icon="mdi-tray-arrow-up"></v-file-input>
|
||||
</v-col>
|
||||
<v-col :cols="12" class="text-right">
|
||||
<a-button @click="writePageButtonGroupClickEvent('cancel')"
|
||||
:ripple="false"
|
||||
class="ant-btn-popup-default mr-2"
|
||||
color="primary" >취소</a-button>
|
||||
<a-button @click="writePageButtonGroupClickEvent('cancel')" :ripple="false"
|
||||
class="ant-btn-popup-default mr-2" color="primary">취소</a-button>
|
||||
<a-button @click="writePageButtonGroupClickEvent('write')" :ripple="false"
|
||||
type="primary">등록</a-button>
|
||||
</v-col>
|
||||
@ -142,15 +141,14 @@
|
||||
</v-text-field>
|
||||
</v-col>
|
||||
<v-col :cols="12" style="height: calc(100vh - 270px);" class="mt-2">
|
||||
<editor ref="tuiReplyEditor" height="100%" initialEditType="wysiwyg"
|
||||
:class="[isDarkMode ? 'toastui-editor-dark' : 'toastui-editor-light']"/>
|
||||
<editor ref="tuiReplyEditor" height="100%" initialEditType="wysiwyg"
|
||||
:class="[isDarkMode ? 'toastui-editor-dark' : 'toastui-editor-light']" />
|
||||
</v-col>
|
||||
<v-col :cols="6" class="mt-5">
|
||||
<v-card-title class="custom-title-7 pa-0">파일첨부</v-card-title>
|
||||
<div class="" v-if="replyActionData.fileData">
|
||||
<div v-for="(fileData, index) in replyActionData.fileData" :key="fileData.apndFileId"
|
||||
:class="['file-item d-flex justify-space-between', isDarkMode?'dark':'light']"
|
||||
>
|
||||
:class="['file-item d-flex justify-space-between', isDarkMode ? 'dark' : 'light']">
|
||||
<div class="file-item-detail">
|
||||
<v-icon>mdi-paperclip</v-icon>
|
||||
<span href="#" class="file-item-name">{{ fileData.name }}</span>
|
||||
@ -159,7 +157,8 @@
|
||||
@click="replyActionData.fileData.splice(index, 1)" />
|
||||
</div>
|
||||
</div>
|
||||
<a-button class="ant-btn-popup-default mt-3" color="primary" icon="upload" @click="$refs.replyInputFile.$refs.input.click()">
|
||||
<a-button class="ant-btn-popup-default mt-3" color="primary" icon="upload"
|
||||
@click="$refs.replyInputFile.$refs.input.click()">
|
||||
업로드
|
||||
</a-button>
|
||||
<v-file-input ref="replyInputFile" multiple show-size v-model="replyActionData.fileData"
|
||||
@ -167,10 +166,8 @@
|
||||
</v-file-input>
|
||||
</v-col>
|
||||
<v-col :cols="12" class="text-right">
|
||||
<a-button @click="replyPageButtonGroupClickEvent('cancel')"
|
||||
class="ant-btn-popup-default mr-2"
|
||||
color="primary"
|
||||
:ripple="false">취소</a-button>
|
||||
<a-button @click="replyPageButtonGroupClickEvent('cancel')" class="ant-btn-popup-default mr-2"
|
||||
color="primary" :ripple="false">취소</a-button>
|
||||
<a-button @click="replyPageButtonGroupClickEvent('reply')" :ripple="false"
|
||||
type="primary">등록</a-button>
|
||||
</v-col>
|
||||
@ -195,14 +192,13 @@
|
||||
<v-col :cols="12" style="height: calc(90vh - 270px);" class="mt-4">
|
||||
<editor ref="tuiUpdateEditor" height="100%" initialEditType="wysiwyg"
|
||||
:initialValue="updateActionData.content"
|
||||
:class="[isDarkMode ? 'toastui-editor-dark' : 'toastui-editor-light']"/>
|
||||
:class="[isDarkMode ? 'toastui-editor-dark' : 'toastui-editor-light']" />
|
||||
</v-col>
|
||||
<v-col :cols="6" class="mt-5">
|
||||
<v-card-title class="custom-title-7 pa-0">파일첨부</v-card-title>
|
||||
<div class="" v-if="updateActionData.fileData">
|
||||
<div v-for="(fileData, index) in updateActionData.fileData" :key="fileData.apndFileId"
|
||||
:class="['file-item d-flex justify-space-between', isDarkMode?'dark':'light']"
|
||||
>
|
||||
:class="['file-item d-flex justify-space-between', isDarkMode ? 'dark' : 'light']">
|
||||
<div class="file-item-detail">
|
||||
<v-icon style="font-size: 18px;">mdi-paperclip</v-icon>
|
||||
<span href="#" class="file-item-name">{{ fileData.name }}</span>
|
||||
@ -214,8 +210,7 @@
|
||||
<div class="current-files" v-if="updateActionData.currentFileList">
|
||||
<div v-for="(fileData, index) in updateActionData.currentFileList"
|
||||
:key="fileData.apndFileId"
|
||||
:class="['file-item d-flex justify-space-between', isDarkMode?'dark':'light']"
|
||||
>
|
||||
:class="['file-item d-flex justify-space-between', isDarkMode ? 'dark' : 'light']">
|
||||
<div class="file-item-detail">
|
||||
<v-icon style="font-size: 18px;">mdi-paperclip</v-icon>
|
||||
<span @click.prevent="downloadFile(fileData)" href="#"
|
||||
@ -226,7 +221,8 @@
|
||||
@click="addFileToDeleteFileList(fileData)" />
|
||||
</div>
|
||||
</div>
|
||||
<a-button class="ant-btn-popup-default mt-2" color="primary" icon="upload" @click="$refs.updateInputFile.$refs.input.click()">
|
||||
<a-button class="ant-btn-popup-default mt-2" color="primary" icon="upload"
|
||||
@click="$refs.updateInputFile.$refs.input.click()">
|
||||
업로드
|
||||
</a-button>
|
||||
<v-file-input ref="updateInputFile" multiple show-size v-model="updateActionData.fileData"
|
||||
@ -234,10 +230,8 @@
|
||||
</v-file-input>
|
||||
</v-col>
|
||||
<v-col :cols="12" class="text-right">
|
||||
<a-button @click="updatePageButtonGroupClickEvent('cancel')"
|
||||
class="ant-btn-popup-default mr-2"
|
||||
color="primary"
|
||||
>취소</a-button>
|
||||
<a-button @click="updatePageButtonGroupClickEvent('cancel')"
|
||||
class="ant-btn-popup-default mr-2" color="primary">취소</a-button>
|
||||
<a-button @click="updatePageButtonGroupClickEvent('update')" type="primary">등록</a-button>
|
||||
</v-col>
|
||||
</v-row>
|
||||
@ -258,6 +252,7 @@ import '@toast-ui/editor/dist/toastui-editor.css';
|
||||
import { Editor } from '@toast-ui/vue-editor';
|
||||
import '@toast-ui/editor/dist/toastui-editor-viewer.css';
|
||||
import { Viewer } from '@toast-ui/vue-editor';
|
||||
import pagination from '~/components/common/Pagination';
|
||||
|
||||
let myTitle;
|
||||
// const myPrgmId = "PRG0034";
|
||||
@ -284,6 +279,7 @@ export default {
|
||||
Utility,
|
||||
Editor,
|
||||
Viewer,
|
||||
pagination,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -298,6 +294,11 @@ export default {
|
||||
loadGrid: false,
|
||||
selectedRowKey: null,
|
||||
selectedRowData: null,
|
||||
itemsPerPage: 10,
|
||||
itemsPerPageArray: [10, 20, 30],
|
||||
limit: 20,
|
||||
page: 1,
|
||||
totalCount: 0,
|
||||
writeActionData: {
|
||||
title: '',
|
||||
postNo: null,
|
||||
@ -339,7 +340,10 @@ export default {
|
||||
},
|
||||
watch: {
|
||||
chkIsFind(val) {
|
||||
if (val) this.search();
|
||||
if (val) {
|
||||
this.page = 1;
|
||||
this.search();
|
||||
}
|
||||
},
|
||||
},
|
||||
async beforeCreate() {
|
||||
@ -425,7 +429,7 @@ export default {
|
||||
this.getGridData();
|
||||
},
|
||||
gridInit() {
|
||||
const gridHeight = this.$refs.contents.offsetHeight - 76;
|
||||
const gridHeight = this.$refs.contents.offsetHeight - 120;
|
||||
|
||||
const myOptions = {
|
||||
header: {
|
||||
@ -497,16 +501,29 @@ export default {
|
||||
async getGridData() {
|
||||
var params = {
|
||||
bordNo: 'BORD0001',
|
||||
limit: this.limit,
|
||||
page: this.page,
|
||||
offset: (this.page - 1) * this.limit, // MariaDB Query에서 직접 계산이 안됨
|
||||
};
|
||||
|
||||
this.loadGrid = false;
|
||||
|
||||
const res = await this.postApiReturn({
|
||||
apiKey: 'selectPostList',
|
||||
resKey: 'postData',
|
||||
apiKey: 'selectPostPage',
|
||||
resKey: 'postPage',
|
||||
sendParam: params,
|
||||
});
|
||||
|
||||
const res2 = await this.postApiReturn({
|
||||
apiKey: 'selectPostPageTotal',
|
||||
resKey: 'postPageTotal',
|
||||
sendParam: {
|
||||
bordNo: 'BORD0001',
|
||||
}
|
||||
});
|
||||
|
||||
this.totalCount = res2[0].totalcount;
|
||||
|
||||
this.setGridData({
|
||||
gridKey: this.gridName,
|
||||
value: res,
|
||||
@ -1038,6 +1055,12 @@ export default {
|
||||
|
||||
return resultFlag;
|
||||
},
|
||||
changeGrid: async function (pageNum, limit) {
|
||||
this.page = pageNum;
|
||||
this.limit = limit;
|
||||
|
||||
this.search();
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -1090,7 +1113,7 @@ const defaultData = {
|
||||
|
||||
@each $theme in dark, light {
|
||||
@include theme($theme);
|
||||
|
||||
|
||||
::v-deep {
|
||||
.toastui-editor-#{$theme} {
|
||||
.toastui-editor-mode-switch {
|
||||
@ -1098,7 +1121,7 @@ const defaultData = {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
color: map-deep-get($config, #{$theme}, "card-title-color") !important;
|
||||
|
||||
|
||||
&.active {
|
||||
color: map-deep-get($config, #{$theme}, "card-text-info-color") !important;
|
||||
border-top: 1px solid map-deep-get($config, #{$theme}, "card-text-info-color");
|
||||
@ -1106,7 +1129,7 @@ const defaultData = {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user