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 title-wrap">
<h3><img :src="h3icon" alt="">승인 대기</h3>
<div class="input-group">
<select class="form-select" v-model="waitRequest.year" @change="fnChangeCurrentPage(1, 'wait')">
<option value="">연도 전체</option>
<option v-for="year in years" :key="year" :value="year">{{ year }}년</option>
</select>
<select class="form-select" v-model="waitRequest.month" @change="fnChangeCurrentPage(1, 'wait')">
<option value="">월 전체</option>
<option v-for="month in months" :key="month" :value="month">{{ month }}월</option>
</select>
<div class="sch-input">
<input type="text" class="form-control" placeholder="신청자명">
<button class="ico-sch">
<SearchOutlined />
</button>
</div>
</div>
</div>
<div class="tbl-wrap">
<table id="myTable" class="tbl data">
<colgroup>
<col style="width: 13.33%;">
<col style="width: 13.33%;">
<col style="width: 13.33%;">
<col style="width: 30%;">
<col style="width: 30%;">
</colgroup>
<thead>
<tr>
<th>구분</th>
<th>결재구분</th>
<th>신청자</th>
<th>기간</th>
<th>신청일</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, idx) in waitList" :key="idx">
<td>{{ item.sanctnIemNm }}</td>
<td>{{ item.sanctnSeNm }}</td>
<td>{{ item.applcntNm }}</td>
<td>{{ $formattedDates(item) }}</td>
<td>{{ item.rgsde }}</td>
</tr>
</tbody>
</table>
</div>
<Pagenation :search="waitRequest" @onChange="(currentPage) => fnChangeCurrentPage(currentPage, 'wait')" />
<div class="sch-form-wrap title-wrap">
<h3><img :src="h3icon" alt="">승인 이력</h3>
<div class="input-group">
<select class="form-select" v-model="confmRequest.year" @change="fnChangeCurrentPage(1, 'wait')">
<option value="">연도 전체</option>
<option v-for="year in years" :key="year" :value="year">{{ year }}년</option>
</select>
<select class="form-select" v-model="confmRequest.month" @change="fnChangeCurrentPage(1, 'wait')">
<option value="">월 전체</option>
<option v-for="month in months" :key="month" :value="month">{{ month }}월</option>
</select>
<select name="" id="" class="form-select">
<option value="all">상태</option>
<option value="">승인</option>
<option value="">반려</option>
</select>
<div class="sch-input">
<input type="text" class="form-control" placeholder="신청자명">
<button class="ico-sch">
<SearchOutlined />
</button>
</div>
</div>
</div>
<div class="tbl-wrap">
<table id="myTable" class="tbl data">
<colgroup>
<col style="width: 13.33%;">
<col style="width: 13.33%;">
<col style="width: 13.33%;">
<col style="width: 30%;">
<col style="width: 16.66%;">
<col style="width: 13.33%;">
</colgroup>
<thead>
<tr>
<th>구분</th>
<th>결재구분</th>
<th>신청자</th>
<th>기간</th>
<th>신청일</th>
<th>상태</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in confmList" :key="index" :class="{ 'expired': true }">
<td>{{ item.sanctnIemNm }}</td>
<td>{{ item.sanctnSeNm }}</td>
<td>{{ item.applcntNm }}</td>
<td>{{ $formattedDates(item) }}</td>
<td>{{ item.rgsde }}</td>
<td>{{ item.confmAtNm }}</td>
</tr>
</tbody>
</table>
</div>
<Pagenation :search="confmRequest" @onChange="(currentPage) => fnChangeCurrentPage(currentPage, 'wait')" />
</div>
</div>
</div>
</template>
<script>
import { SearchOutlined } from '@ant-design/icons-vue';
import Pagenation from '../../../component/Pagenation.vue';
// API
import { findSanctnsProc } from '../../../../resources/api/sanctns';
export default {
components: {
SearchOutlined,
Pagenation,
},
data() {
return {
photoicon: "/client/resources/img/photo_icon.png",
h3icon: "/client/resources/img/h3icon.png",
years: [2023, 2024, 2025], // 연도 목록
months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], // 월 목록
// 목록 조회용
waitList: [],
waitRequest: {
year: '',
month: '',
sanctnDe: null, // 결재일
sanctnIem: null, // 결재항목 : 출장 구분 or 휴가 종류 (휴가/출장 구분 코드)
sanctnMbyId: null, // 결재 주체 아이디 : 휴가/출장 아이디
confmAts: "W", // 승인여부
confmerId: this.$store.state.userInfo.userId,
},
confmList: [],
confmRequest: {
year: '',
month: '',
sanctnDe: null, // 결재일
sanctnIem: null, // 결재항목 : 출장 구분 or 휴가 종류 (휴가/출장 구분 코드)
sanctnMbyId: null, // 결재 주체 아이디 : 휴가/출장 아이디
confmAts: "A,R", // 승인여부
confmerId: this.$store.state.userInfo.userId,
},
// 공통코드 목록
sanctnCodes: [], // 결재 종류 코드 목록
sanctnMbyCodes: [], // 결재 항목 코드 목록
sanctnConfmCodes: [], // 결재 상태 코드 목록
};
},
computed: {},
created() { },
mounted() {
this.findList('wait'); // 목록 조회
this.findList('confm'); // 목록 조회
},
methods: {
// 목록 조회
async findList(type) {
const vm = this;
try {
let request = {};
if (type === 'wait') {
request = vm.waitRequest;
} else if (type == 'confm') {
request = vm.confmRequest;
}
const response = await findSanctnsProc(request);
const result = response.data.data;
if (type === 'wait') {
vm.waitList = result.lists;
vm.waitRequest = result.search;
} else if (type == 'confm') {
vm.confmList = result.lists;
vm.confmRequest = result.search;
}
} catch (error) {
if (error.response) {
alert(error.response.data.message);
} else {
alert("에러가 발생했습니다.");
}
console.error(error.message);
};
},
// 페이지 이동
fnChangeCurrentPage(currentPage, type) {
if (type === 'wait') {
this.waitRequest.currentPage = Number(currentPage);
} else if (type === 'confm') {
this.confmRequest.currentPage = Number(currentPage);
}
this.$nextTick(() => {
this.findList(type);
});
},
},
};
</script>
<style scoped>
tr {
cursor: pointer;
}
</style>