Page 개발시 Defalt
🟠 Vue
<template>
<div class = "app-container">
<searchBox
@click:search = "searchClick"/>
<div>
<centerLayout
:btnInfo = "btnInfo"
@click:btn1 = "insertArirang"
@click:btn2 = "deleteArirang"
/>
</div>
<el-table
:data = "tableData"
:header-cell-style = "{textAlign: 'center'}"
:default-sort = "{prop: 'spCnt', order: 'descending'}"
@sort-change = "sortChange"
@selection-change = "handleSelectionChange"
style = "width: 100%;"
highlight-current-row
border
fit
>
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column label="단어" align="left">
<template slot-scope="{row}">
<span :title="row.wordNm ">{{ row.wordNm }}</span>
</template>
</el-table-column>
<el-table-column label="품사" prop="col3" align="left">
<template slot-scope="{row}">
<span>{{ row.features }}</span>
</template>
</el-table-column>
<el-table-column label="사용여부" align="left">
<template slot-scope="{row}">
<el-tag :type="row.useYn | statusFilter">
{{ row.useYn }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="등록자" align="left">
<template slot-scope="{row}">
{{ row.rgnId }}
</template>
</el-table-column>
<el-table-column label="등록일" align="left">
<template slot-scope="{row}">
{{ row.rgnDtm | parseTime('{y}-{m}-{d}') }}
</template>
</el-table-column>
</el-table>
<div class="divpage">
<pagination v-show="param.totalCnt>0" :total="param.totalCnt" :page.sync="param.rowNum" :limit.sync="param.limitNum" @pagination="fetchList"/>
</div>
<div>
<el-divider></el-divider>
</div>
</div>
</template>
<script>
import { getFetchList } from '@/api/poms-api/dictionary/basic/arirang/arirang'
import centerLayout from '@/views/common/layout/centerLayout1'
import searchBox from '@/views/common/search/search12'
import Pagination from '@/components/Pagination'
import _ from 'lodash'
export default {
name: 'Dictionary_Arirang'
, components: {
Pagination
, searchBox
, centerLayout
}
, data() {
return {
btnInfo : {
btnName1 : '등록'
, btnName2 : '삭제'
}
, param : {
orderByField : ''
, orderByValue : ''
, rowNum : 0
, limitNum : 10
, totalCnt : 100
}
, multipleSelection : []
, tableData : []
}
}
, created() {
this.fetchList()
}
, methods : {
async fetchList(){
await getFetchList(this.param).then( response => {
this.tableData = response.data.response_data
})
}
/** 메소드명 변경하고 사용해주세요 **/
, insertArirang(){
}
/** 메소드명 변경하고 사용해주세요 **/
, deleteArirang(){
}
/** 체크박스 값 **/
, handleSelectionChange( val ) {
this.multipleSelection = val;
}
/** ORDER BY SETTING **/
, sortChange( row ){
this.param.rowNum = 1
this.param.orderByField = row.order === null ? '' : row.prop;
this.param.orderByValue = row.order === 'ascending' ? 'ASC' : row.order === 'descending' ? 'DESC' : '' ;
this.fetchList();
}
, searchClick( val ){
console.log(val)
}
}
, filters: {
statusFilter(status) {
const statusMap = {
'Y': 'success'
, 'N': 'info'
}
return statusMap[status]
}
, typeFilter(type) {
return calendarTypeKeyValue[type]
}
}
}
</script>
<style scopedlang="scss">
.search-table { overflow-x: scroll; white-space:nowrap; font-family: "Malgun Gothic"; font-size: 11.5pt; width:100%; background-color: #ebeef3; padding: 10px 20px 10px 20px; }
.th1 { padding : 0 16px 0 13px; width: 150px; text-align: left; }
.td3 { padding-top: 10px; }
.td4 { width: 20%; padding: 10px 0 0 20px ; }
.div1 { padding-bottom: 4%; }
.div2 { float: left; padding-top: 1%; }
.excel-div { float: left; padding-top: 3%; width: 100%; font-size: 13px;} .span1{ float: right;}
.divpage { text-align: center;}
::v-deep .el-dialog__header { position: relative; height: 45px; padding: 0 !important; background: #1890ff }
::v-deep .el-dialog__title { position: absolute; height: auto !important; top: 50%; transform: translateY(-50%); height: 24px; padding: 0 0 0 20px; color: #fff; font-size: 16px; }
::v-deep .el-dialog__headerbtn { position: absolute; top: 50%; right: 0; transform: translateY(-50%); padding: 0 20px 0 0; }
::v-deep .el-dialog__close { color: #fff !important }
.dialog-title{ color : black }
.el-col {border-radius: 4px;}
.bg-purple {border: 1px solid #ccc;padding: 10px 20px;height: 520px;}
.bg-purple-light {margin-left: 20px;border: 1px solid #ccc;padding: 10px 20px;height: 520px;}
.grid-content {min-height: 36px;}
.row-bg {padding: 10px 0;background-color: #f9fafc;}
.scrollable {height: 150px;max-height: 100%;overflow-y: auto !important;display: block;}
.infos {font-size: 11px;color: #204fa3;line-height: 1.5;font-weight: 600;}
.grid-content > table {width: 100%;border-spacing: 0 10px;table-layout: fixed;border-style: hidden;}
.grid-content > table > tr > td,
.grid-content > table > tr > th {padding-bottom: 10px;border-bottom: 1px solid #aaa;}
::v-deep .el-input__inner {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
::v-deep .el-form-item__content {display: flex;}
</style>
🟠 API Js
import request from '@/utils/request'
export function getFetchList(param){
return request({
url: '/api/dictionary/arirang'
, method: 'get'
, params: {
rowNum : (param.rowNum-1) * 10 < 0 ? 0 : (param.rowNum-1) * 10
, limitNum : param.limitNum
, orderByField : param.orderByField
, orderByValue : param.orderByValue
}
})
}