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
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>