init dev-push code ui base design
This commit is contained in:
leonard
@ -9,32 +9,23 @@
|
||||
<v-card-title class="pa-0">공지사항</v-card-title>
|
||||
<div class="d-flex align-center">
|
||||
<!-- <v-btn @click="listPageButtonGroupClickEvent('view')" :ripple="false" class="mr-1">상세보기</v-btn> -->
|
||||
<v-btn
|
||||
@click="listPageButtonGroupClickEvent('write')"
|
||||
:ripple="false"
|
||||
class="mr-1"
|
||||
>작성</v-btn
|
||||
>
|
||||
<a-button type="primary" size="large" @click="listPageButtonGroupClickEvent('write')" :ripple="false"
|
||||
icon="edit" class="mr-1">작성</a-button>
|
||||
<!-- <v-btn @click="listPageButtonGroupClickEvent('delete')" :ripple="false">삭제</v-btn> -->
|
||||
</div>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row ref="contents" style="height:calc(100% - 76px)">
|
||||
<v-row ref="contents">
|
||||
<v-col :cols="12">
|
||||
<v-card class="pa-5">
|
||||
<div class="h100 px-5" style="height:calc(100% - 70px)">
|
||||
<div ref="gridParent" class="h100">
|
||||
<component
|
||||
:is="loadGrid ? 'Grid' : null"
|
||||
:gridName="gridName"
|
||||
:parentPrgmId="myPrgmId"
|
||||
ref="noticeMngGrid"
|
||||
@getRowsData="getRowData"
|
||||
/>
|
||||
</div>
|
||||
<div ref="gridParent" class="h100 px-50">
|
||||
<component :is="loadGrid ? 'Grid' : null" :gridName="gridName" :parentPrgmId="myPrgmId"
|
||||
ref="noticeMngGrid" @getRowsData="getRowData" :dataPath="dataPathMock" />
|
||||
</div>
|
||||
<!-- <div class="h100 W100 px-50" style="min-height:calc(100% - 70px)">
|
||||
</div> -->
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
@ -42,94 +33,62 @@
|
||||
<!-- 리스트 페이지 끝 -->
|
||||
<!-- 상세보기 페이지 시작 -->
|
||||
<div v-if="pageActionFlag == 'view'" class="h100">
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col :cols="12">
|
||||
<v-card>
|
||||
<div class="d-flex align-center justify-space-between pa-5">
|
||||
<v-card-title class="pa-0">공지사항</v-card-title>
|
||||
<div class="d-flex align-center">
|
||||
<v-btn
|
||||
@click="viewPageButtonGroupClickEvent('list')"
|
||||
:ripple="false"
|
||||
class="mr-1"
|
||||
>목록</v-btn
|
||||
>
|
||||
<v-btn
|
||||
@click="viewPageButtonGroupClickEvent('reply')"
|
||||
:ripple="false"
|
||||
class="mr-1"
|
||||
>답글</v-btn
|
||||
>
|
||||
<v-btn
|
||||
@click="viewPageButtonGroupClickEvent('update')"
|
||||
:ripple="false"
|
||||
class="mr-1"
|
||||
>수정</v-btn
|
||||
>
|
||||
<v-btn
|
||||
@click="viewPageButtonGroupClickEvent('delete')"
|
||||
:ripple="false"
|
||||
>삭제</v-btn
|
||||
>
|
||||
</div>
|
||||
<v-card>
|
||||
<v-row class="pa-5">
|
||||
<v-col :cols="12" class="d-flex align-center justify-space-between ">
|
||||
<v-card-title class="pa-0 custom-title-4">공지사항</v-card-title>
|
||||
<div class="d-flex align-center">
|
||||
<a-button @click="viewPageButtonGroupClickEvent('list')" type="primary" :ripple="false" 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>
|
||||
답글
|
||||
</a-button>
|
||||
<a-button @click="viewPageButtonGroupClickEvent('update')" type="primary" :ripple="false" class="mr-1" icon="edit">수정</a-button>
|
||||
<a-button @click="viewPageButtonGroupClickEvent('delete')" type="danger" ghost icon="delete" >삭제</a-button>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col :cols="12">
|
||||
<v-card min-height="60" class="pa-5">
|
||||
<v-text-field
|
||||
v-model="viewActionData.title"
|
||||
class="v-input__custom"
|
||||
placeholder="제목"
|
||||
hide-details
|
||||
:readonly="true"
|
||||
>
|
||||
</v-col>
|
||||
<v-col :cols="12" class="custom-title-4-new">
|
||||
제목
|
||||
</v-col>
|
||||
<v-col :cols="12">
|
||||
<v-text-field v-model="viewActionData.title" class="v-input__custom" hide-details
|
||||
:readonly="true">
|
||||
</v-text-field>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row style="height:calc(100% - 218px);">
|
||||
<v-col :cols="12" style="height: 100%;">
|
||||
<v-card class="pa-5" style="overflow-y:auto;">
|
||||
<viewer
|
||||
v-if="viewActionData.viewerFlag"
|
||||
ref="tuiViewer"
|
||||
height="inherit"
|
||||
:initialValue="viewActionData.content"
|
||||
theme="white"
|
||||
:class="isDarkMode ? 'theme--white' : 'theme--black'"
|
||||
/>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<!-- <v-row style="height: 1vh;">
|
||||
|
||||
</v-row> -->
|
||||
<v-row>
|
||||
<v-col :cols="12">
|
||||
<v-card class="pa-5">
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col cols="1">
|
||||
<v-card-subtitle class="pa-0">파일목록</v-card-subtitle>
|
||||
</v-col>
|
||||
<v-col :cols="11">
|
||||
<v-row
|
||||
v-for="fileData in viewActionData.fileData"
|
||||
:key="fileData.apndFileId"
|
||||
>
|
||||
<a @click.prevent="downloadFile(fileData)">
|
||||
<div class="search-box-label">
|
||||
{{ fileData.apndFileNm + '.' + fileData.apndFileExt }}
|
||||
</div>
|
||||
</a>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row style="height:calc(100% - 218px);">
|
||||
<v-col :cols="12" style="height: 100%;">
|
||||
<v-card class="pa-5" style="overflow-y:auto;">
|
||||
<viewer v-if="viewActionData.viewerFlag" ref="tuiViewer" height="inherit"
|
||||
:initialValue="viewActionData.content" theme="white"
|
||||
:class="isDarkMode ? 'theme--white' : 'theme--black'" />
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col :cols="12">
|
||||
<v-card class="pa-5">
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col cols="1">
|
||||
<v-card-subtitle class="pa-0">파일목록</v-card-subtitle>
|
||||
</v-col>
|
||||
<v-col :cols="11">
|
||||
<v-row v-for="fileData in viewActionData.fileData" :key="fileData.apndFileId">
|
||||
<a @click.prevent="downloadFile(fileData)">
|
||||
<div class="search-box-label">
|
||||
{{ fileData.apndFileNm + '.' + fileData.apndFileExt }}
|
||||
</div>
|
||||
</a>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
</div>
|
||||
<!-- 상세보기 페이지 끝 -->
|
||||
<!-- 작성 페이지 시작 -->
|
||||
@ -138,130 +97,74 @@
|
||||
<v-col :cols="12">
|
||||
<v-card>
|
||||
<v-card-title>공지사항</v-card-title>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col :cols="12">
|
||||
<v-card min-height="60" class="pa-5">
|
||||
<v-text-field
|
||||
v-model="writeActionData.title"
|
||||
class="v-input__custom"
|
||||
placeholder="제목"
|
||||
hide-details
|
||||
>
|
||||
</v-text-field>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row style="height:calc(100% - 270px)">
|
||||
<v-col :cols="12">
|
||||
<editor ref="tuiEditor" height="100%" initialEditType="wysiwyg" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col :cols="12">
|
||||
<v-card class="pa-5">
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col cols="1">
|
||||
<v-card-subtitle class="pa-0">파일첨부</v-card-subtitle>
|
||||
<v-row class="pa-5">
|
||||
<v-col :cols="12" class="custom-title-4-new">
|
||||
제목
|
||||
</v-col>
|
||||
<v-col :cols="4">
|
||||
<v-file-input
|
||||
multiple
|
||||
background-color="#47535c"
|
||||
show-size
|
||||
v-model="writeActionData.fileData"
|
||||
hide-details="true"
|
||||
>
|
||||
<v-col :cols="12">
|
||||
<v-text-field v-model="writeActionData.title" class="v-input__custom" hide-details outlined>
|
||||
</v-text-field>
|
||||
</v-col>
|
||||
<v-col :cols="12" style="min-height: calc(90vh - 270px);">
|
||||
<editor ref="tuiEditor" height="100%" initialEditType="wysiwyg" />
|
||||
</v-col>
|
||||
|
||||
<v-col :cols="12" class="custom-title-4-new mt-2">
|
||||
파일첨부
|
||||
</v-col>
|
||||
<v-col :cols="6">
|
||||
<!-- background-color="#47535c" -->
|
||||
<v-file-input multiple show-size v-model="writeActionData.fileData" hide-details="true"
|
||||
clear-icon="delete" chips label="업로드" flat hide-input outlined>
|
||||
<!-- append-icon="cancel" -->
|
||||
</v-file-input>
|
||||
</v-col>
|
||||
<v-col :cols="12" class="text-right">
|
||||
<a-button @click="writePageButtonGroupClickEvent('cancel')" :ripple="false" class="mr-2">취소</a-button>
|
||||
<a-button @click="writePageButtonGroupClickEvent('write')" :ripple="false" type="primary">등록</a-button>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col :cols="12" class="text-right">
|
||||
<v-btn
|
||||
@click="writePageButtonGroupClickEvent('write')"
|
||||
:ripple="false"
|
||||
>등록</v-btn
|
||||
>
|
||||
<v-btn
|
||||
@click="writePageButtonGroupClickEvent('cancel')"
|
||||
:ripple="false"
|
||||
>취소</v-btn
|
||||
>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
</div>
|
||||
<!-- 작성 페이지 끝 -->
|
||||
<!-- 답글 작성 페이지 시작 -->
|
||||
<div v-if="pageActionFlag == 'reply'" class="h100">
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col :cols="12">
|
||||
<v-card>
|
||||
<v-card-title>공지사항</v-card-title>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col :cols="12">
|
||||
<v-card min-height="60" class="pa-5">
|
||||
<v-text-field
|
||||
v-model="replyActionData.title"
|
||||
class="v-input__custom"
|
||||
placeholder="제목"
|
||||
hide-details
|
||||
>
|
||||
<div v-if="pageActionFlag == 'reply'" class="h1001">
|
||||
<v-card class="pa-5">
|
||||
<v-row>
|
||||
<v-col :cols="12" class="card-title-color">
|
||||
<v-card-title class="pa-0 custom-title-4">공지사항</v-card-title>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row align="center" class="mt-5" >
|
||||
<v-col :cols="12">
|
||||
<p class="custom-title-4-new">제목</p>
|
||||
<v-text-field v-model="replyActionData.title" class="v-input__custom" placeholder="제목" outlined hide-details>
|
||||
</v-text-field>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row style="height:calc(100% - 270px)">
|
||||
<v-col :cols="12">
|
||||
<editor
|
||||
ref="tuiReplyEditor"
|
||||
height="100%"
|
||||
initialEditType="wysiwyg"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col :cols="12">
|
||||
<v-card class="pa-5">
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col cols="1">
|
||||
<v-card-subtitle class="pa-0">파일첨부</v-card-subtitle>
|
||||
</v-col>
|
||||
<v-col :cols="4">
|
||||
<v-file-input
|
||||
multiple
|
||||
background-color="#47535c"
|
||||
show-size
|
||||
v-model="replyActionData.fileData"
|
||||
hide-details="true"
|
||||
>
|
||||
</v-file-input>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col :cols="12" class="text-right">
|
||||
<v-btn
|
||||
@click="replyPageButtonGroupClickEvent('reply')"
|
||||
:ripple="false"
|
||||
>등록</v-btn
|
||||
>
|
||||
<v-btn
|
||||
@click="replyPageButtonGroupClickEvent('cancel')"
|
||||
:ripple="false"
|
||||
>취소</v-btn
|
||||
>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
<v-col :cols="12" style="height: calc(100vh - 270px);" class="mt-4" >
|
||||
<editor ref="tuiReplyEditor" height="100%" initialEditType="wysiwyg" />
|
||||
</v-col>
|
||||
<v-col :cols="12" class="custom-title-4-new mt-4" >
|
||||
파일첨부
|
||||
</v-col>
|
||||
<v-col :cols="12" >
|
||||
<v-file-input
|
||||
multiple
|
||||
show-size
|
||||
v-model="replyActionData.fileData"
|
||||
hide-details="true">
|
||||
</v-file-input>
|
||||
</v-col>
|
||||
<v-col :cols="12" class="text-right">
|
||||
<a-button @click="replyPageButtonGroupClickEvent('cancel')" :ripple="false">취소</a-button>
|
||||
<a-button @click="replyPageButtonGroupClickEvent('reply')" :ripple="false" type="primary" >등록</a-button>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
|
||||
</div>
|
||||
<!-- 답글 작성 페이지 끝 -->
|
||||
<!-- 수정 페이지 시작 -->
|
||||
@ -276,24 +179,15 @@
|
||||
<v-row>
|
||||
<v-col :cols="12">
|
||||
<v-card min-height="60" class="pa-5">
|
||||
<v-text-field
|
||||
v-model="updateActionData.title"
|
||||
class="v-input__custom"
|
||||
placeholder="제목"
|
||||
hide-details
|
||||
>
|
||||
<v-text-field v-model="updateActionData.title" class="v-input__custom" placeholder="제목" hide-details>
|
||||
</v-text-field>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row style="height:calc(100% - 342px)">
|
||||
<v-col :cols="12">
|
||||
<editor
|
||||
ref="tuiUpdateEditor"
|
||||
height="100%"
|
||||
initialEditType="wysiwyg"
|
||||
:initialValue="updateActionData.content"
|
||||
/>
|
||||
<editor ref="tuiUpdateEditor" height="100%" initialEditType="wysiwyg"
|
||||
:initialValue="updateActionData.content" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
@ -304,13 +198,8 @@
|
||||
<v-card-subtitle class="pa-0">파일첨부</v-card-subtitle>
|
||||
</v-col>
|
||||
<v-col :cols="4">
|
||||
<v-file-input
|
||||
multiple
|
||||
background-color="#47535c"
|
||||
show-size
|
||||
v-model="updateActionData.fileData"
|
||||
hide-details="true"
|
||||
>
|
||||
<v-file-input multiple background-color="#47535c" show-size v-model="updateActionData.fileData"
|
||||
hide-details="true">
|
||||
</v-file-input>
|
||||
</v-col>
|
||||
</v-row>
|
||||
@ -325,10 +214,7 @@
|
||||
<v-card-subtitle class="pa-0">파일목록</v-card-subtitle>
|
||||
</v-col>
|
||||
<v-col :cols="11">
|
||||
<v-row
|
||||
v-for="fileData in updateActionData.currentFileList"
|
||||
:key="fileData.apndFileId"
|
||||
>
|
||||
<v-row v-for="fileData in updateActionData.currentFileList" :key="fileData.apndFileId">
|
||||
<a @click.prevent="downloadFile(fileData)">
|
||||
<v-col :cols="12">
|
||||
<div class="search-box-label">
|
||||
@ -336,10 +222,7 @@
|
||||
</div>
|
||||
</v-col>
|
||||
</a>
|
||||
<v-icon
|
||||
class="pl-5"
|
||||
@click="addFileToDeleteFileList(fileData)"
|
||||
>
|
||||
<v-icon class="pl-5" @click="addFileToDeleteFileList(fileData)">
|
||||
mdi-close
|
||||
</v-icon>
|
||||
</v-row>
|
||||
@ -350,16 +233,8 @@
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col :cols="12" class="text-right">
|
||||
<v-btn
|
||||
@click="updatePageButtonGroupClickEvent('update')"
|
||||
:ripple="false"
|
||||
>등록</v-btn
|
||||
>
|
||||
<v-btn
|
||||
@click="updatePageButtonGroupClickEvent('cancel')"
|
||||
:ripple="false"
|
||||
>취소</v-btn
|
||||
>
|
||||
<v-btn @click="updatePageButtonGroupClickEvent('update')" :ripple="false">등록</v-btn>
|
||||
<v-btn @click="updatePageButtonGroupClickEvent('cancel')" :ripple="false">취소</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
@ -442,6 +317,8 @@ export default {
|
||||
postGrpOrd: null,
|
||||
postOrgNo: null,
|
||||
},
|
||||
dataPathMock: {},
|
||||
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -605,6 +482,12 @@ export default {
|
||||
value: columnList,
|
||||
});
|
||||
|
||||
// -----------------------TEST------------------
|
||||
this.dataPathMock[this.gridName] = {
|
||||
column: columnList,
|
||||
data: dataPathDataExample,
|
||||
}
|
||||
// -----------------------END TEST--------------
|
||||
this.getGridData();
|
||||
},
|
||||
async getGridData() {
|
||||
@ -613,19 +496,30 @@ export default {
|
||||
};
|
||||
|
||||
this.loadGrid = false;
|
||||
|
||||
var res = await this.postApiReturn({
|
||||
apiKey: 'selectPostList',
|
||||
resKey: 'postData',
|
||||
sendParam: params,
|
||||
});
|
||||
let res = null;
|
||||
try {
|
||||
res = await this.postApiReturn({
|
||||
apiKey: 'selectPostList',
|
||||
resKey: 'postData',
|
||||
sendParam: params,
|
||||
});
|
||||
}
|
||||
catch (err) { }
|
||||
finally {
|
||||
// -----Test mock data-------------
|
||||
if (null === res) {
|
||||
res = dataPathDataExample;
|
||||
}
|
||||
// -----End test
|
||||
}
|
||||
|
||||
this.setGridData({
|
||||
gridKey: this.gridName,
|
||||
value: res,
|
||||
});
|
||||
|
||||
this.loadGrid = true;
|
||||
this.$nextTick(() => {
|
||||
this.loadGrid = true;
|
||||
});
|
||||
this.setPageData({ isFind: false });
|
||||
},
|
||||
getRowData(data) {
|
||||
@ -1162,9 +1056,19 @@ const defaultData = {
|
||||
column: [],
|
||||
},
|
||||
};
|
||||
|
||||
import { getPathDataExample } from '@/const/const'
|
||||
const dataPathDataExample = getPathDataExample({
|
||||
postNo: '18',
|
||||
title: '오픈공지',
|
||||
regUserNo: '1',
|
||||
regDttm: '2023-01-09 09:39:41',
|
||||
viewCnt: '1'
|
||||
}, 10);
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.tui-grid-table tr {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user