File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<h2 class="card-title">출장 현황</h2>
<div class="sch-form-wrap">
<div class="input-group">
<select class="form-select" v-model="request.year" @change="fnChangeCurrentPage(1)">
<option value="">연도 전체</option>
<option v-for="year in years" :key="year" :value="year">{{ year }}년</option>
</select>
<select class="form-select" v-model="request.month" @change="fnChangeCurrentPage(1)">
<option value="">월 전체</option>
<option v-for="month in months" :key="month" :value="month">{{ month }}월</option>
</select>
</div>
</div>
<div class="tbl-wrap">
<table id="myTable" class="tbl data">
<thead>
<tr>
<th>출장구분</th>
<th>출장지</th>
<th>목적</th>
<th>출장기간</th>
<th>품의서 상태</th>
<th>복명서 등록 여부</th>
<th>복명서 상태</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, idx) in lists" :key="idx" :class="{ 'expired': item.hasRport }" @click="fnMoveTo('view', item.bsrpId)">
<td>{{ item.bsrpSeNm }}</td>
<td>{{ item.bsrpPlace }}</td>
<td>{{ item.bsrpPurps }}</td>
<td>{{ item.bgnde }}</td>
<td>{{ item.bsrpCnsulDTO.confmAtNm }}</td>
<td>{{ item.hasRport ? '등록' : '미등록' }}</td>
<td>{{ item.hasRport ? item.bsrpRportDTO.confmAt : '-' }}</td>
</tr>
</tbody>
</table>
</div>
<Pagination :search="request" @onChange="fnChangeCurrentPage" />
</div>
</div>
</div>
</template>
<script>
import { SearchOutlined } from '@ant-design/icons-vue';
// API
import { bsrpsProc } from '../../../../resources/api/bsrp';
export default {
components: {
SearchOutlined
},
data() {
return {
photoicon: "/client/resources/img/photo_icon.png",
years: [],
months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
cmmnCodes: {},
request: {
year: '',
month: '',
},
lists: [],
};
},
watch: {},
created() {
this.generateYears();
},
mounted() {
this.findList(); // 목록 조회
},
methods: {
generateYears() {
const startYear = 2020;
const currentYear = new Date().getFullYear();
for (let year = currentYear; year >= startYear; year--) {
this.years.push(year);
}
},
// 목록 조회
async findList() {
try {
const response = await bsrpsProc(this.request);
const result = response.data.data;
this.lists = result.lists;
this.request = result.search;
} catch (error) {
const message = error.response.data.message;
alert(message);
}
},
// 페이지 이동
fnChangeCurrentPage(currentPage) {
this.request.currentPage = Number(currentPage);
this.$nextTick(() => {
this.findList();
});
},
fnMoveTo(type, id) {
const routes = {
'list': { name: 'ChuljangStatue' },
'view': { name: 'ChuljangDetailAll', query: { id } },
'edit': { name: 'ChuljangInsert', query: this.$isEmpty(id) ? {} : { id } },
};
if (routes[type]) {
if (!this.$isEmpty(this.pageId) && type === 'list') {
this.$router.push({ name: 'ChuljangDetailAll', query: { id: this.pageId } });
return;
}
this.$router.push(routes[type]);
} else {
alert("올바르지 않은 경로를 요청하여 목록으로 이동합니다.");
this.$router.push(routes['list']);
}
},
},
};
</script>
<style scoped>
tr {
cursor: pointer;
}
</style>