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 name="" id="" class="form-select">
<option :value="currentYear">{{ currentYear }}년</option>
<option value="all">전체</option>
<template v-for="year in remainingYears" :key="year">
<option :value="year" v-if="year !== currentYear"> {{ year }}년</option>
</template>
</select>
<select name="" id="" class="form-select">
<option :value="currentMonth">{{ currentMonth }}월</option>
<option value="all">전체</option>
<template v-for="month in remainingMonths" :key="month">
<option :value="month" v-if="month !== currentMonth"> {{ month }}월</option>
</template>
</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%;">
<col style="width: 13%;">
<col style="width: 13%;">
<col style="width: 48%;">
<col style="width: 13%;">
</colgroup>
<thead>
<tr>
<th>구분</th>
<th>결재구분</th>
<th>신청자</th>
<th>기간</th>
<th>신청일</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, idx) in waitListData" :key="idx" :class="{ 'expired': true }">
<td>{{ getCodeName('type', item.iemInfo.vcatnKnd) }}</td>
<td>{{ getCodeName('cate', item.sanctnSe) }}</td>
<td>{{ item.registerInfo.userNm }}</td>
<td>{{ $formattedDate(item.iemInfo.bgnde, item.iemInfo.beginHour, item.iemInfo.beginMnt) }} ~ {{ $formattedDate(item.iemInfo.bgnde, item.iemInfo.beginHour, item.iemInfo.beginMnt) }}</td>
<td>{{ item.registerInfo.userNm }}</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 name="" id="" class="form-select">
<option :value="currentYear">{{ currentYear }}년</option>
<option value="all">전체</option>
<template v-for="year in remainingYears" :key="year">
<option :value="year" v-if="year !== currentYear"> {{ year }}년 </option>
</template>
</select>
<select name="" id="" class="form-select">
<option :value="currentMonth">{{ currentMonth }}월</option>
<option value="all">전체</option>
<template v-for="month in remainingMonths" :key="month">
<option :value="month" v-if="month !== currentMonth"> {{ month }}월 </option>
</template>
</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%;">
<col style="width: 13%;">
<col style="width: 13%;">
<col style="width: 35%;">
<col style="width: 13%;">
<col style="width: 13%;">
</colgroup>
<thead>
<tr>
<th>구분</th>
<th>결재구분</th>
<th>신청자</th>
<th>기간</th>
<th>신청일</th>
<th>상태</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in confmListData" :key="index" :class="{ 'expired': true }">
<td>{{ getCodeName('type', item.iemInfo.vcatnKnd) }}</td>
<td>{{ getCodeName('cate', item.sanctnSe) }}</td>
<td>{{ item.registerInfo.userNm }}</td>
<td>{{ $formattedDate(item.iemInfo.bgnde, item.iemInfo.beginHour, item.iemInfo.beginMnt) }} ~ {{ $formattedDate(item.iemInfo.bgnde, item.iemInfo.beginHour, item.iemInfo.beginMnt) }}</td>
<td>{{ item.registerInfo.userNm }}</td>
<td :class="getStatusClass(item.status)">{{ getCodeName('confm', item.confmAt) }}</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';
const currentYear = new Date().getFullYear();
const currentMonth = new Date().getMonth() + 1;
export default {
components: {
SearchOutlined,
Pagenation,
},
data() {
return {
photoicon: "/client/resources/img/photo_icon.png",
h3icon: "/client/resources/img/h3icon.png",
// 목록 조회용
waitListData: [],
waitRequest: {
sanctnDe: null, // 결재일
sanctnIem: null, // 결재항목 : 출장 구분 or 휴가 종류 (휴가/출장 구분 코드)
sanctnMbyId: null, // 결재 주체 아이디 : 휴가/출장 아이디
},
confmListData: [],
confmRequest: {
sanctnDe: null, // 결재일
sanctnIem: null, // 결재항목 : 출장 구분 or 휴가 종류 (휴가/출장 구분 코드)
sanctnMbyId: null, // 결재 주체 아이디 : 휴가/출장 아이디
},
currentMonth,
selectedMonth: currentMonth,
remainingMonths: Array.from({ length: 12 }, (_, i) => i + 1),
currentYear,
selectedYear: currentYear,
remainingYears: Array.from({ length: 10 }, (_, i) => currentYear - i),
currentPage: 1,
totalPages: 3,
// 데이터 초기화
years: [2023, 2024, 2025], // 연도 목록
months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], // 월 목록
selectedYear: '',
selectedMonth: '',
// 공통코드 목록
sanctnCodes: [], // 결재 종류 코드 목록
sanctnMbyCodes: [], // 결재 항목 코드 목록
sanctnConfmCodes: [], // 결재 상태 코드 목록
};
},
computed: {},
created() {
this.initializeSanctnCodes();
console.log("sanctnCodes: ", this.sanctnCodes);
console.log("sanctnMbyCodes: ", this.sanctnMbyCodes);
},
mounted() {
this.findList('wait'); // 목록 조회
this.findList('confm'); // 목록 조회
},
methods: {
// 결재 관련 코드 초기화
async initializeSanctnCodes() {
try {
this.sanctnCodes = [];
this.sanctnMbyCodes = [];
// 순차적으로 코드 조회 및 추가
const vcatnCodes = await this.findCodeByDepth2('sanctn_mby_vcatn'); // 휴가 종류
this.sanctnCodes.push(...vcatnCodes);
const bsrpCodes = await this.findCodeByDepth1('sanctn_mby_bsrp'); // 출장 종류
this.sanctnCodes.push(...bsrpCodes);
const sanctnCodes = await this.findCodeByDepth1('sanctn_code'); // 결재 구분
this.sanctnMbyCodes.push(...sanctnCodes);
const confmCodes = await this.findCodeByDepth1('confm_code'); // 상태 코드
this.sanctnConfmCodes.push(...confmCodes);
} catch (error) {
console.error('코드 조회 중 오류 발생:', error);
}
},
// 코드 목록 조회 (depth 1)
async findCodeByDepth1(upperCode) {
try {
const searchRequest = {
searchType: 'upperCd',
searchText: upperCode,
};
const codes = await this.$findCodeList(searchRequest);
return Array.isArray(codes) ? codes : [];
} catch (error) {
console.error(`코드 조회 실패 (${upperCode}):`, error);
return [];
}
},
// 코드 목록 조회 (depth 2)
async findCodeByDepth2(upperCode) {
try {
const parentCodes = await this.findCodeByDepth1(upperCode);
const childCodes = [];
for (const code of parentCodes) {
const result = await this.findCodeByDepth1(code.code);
childCodes.push(...result);
}
return childCodes;
} catch (error) {
console.error(`하위 코드 조회 실패 (${upperCode}):`, error);
return [];
}
},
// 코드 매핑
getCodeName(type, code) {
let codeList;
if (type === 'type') {
codeList = this.sanctnCodes;
} else if (type === 'cate') {
codeList = this.sanctnMbyCodes;
} else if (type === 'confm') {
const foundCode = this.sanctnConfmCodes?.find(item => item.codeValue === code);
return foundCode ? foundCode.codeNm : code;
} else {
return code; // 알 수 없는 타입이면 원본 반환
}
const foundCode = codeList?.find(item => item.code === code);
return foundCode ? foundCode.codeNm : code;
},
// 목록 조회
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.waitListData = result.lists;
vm.waitRequest = result.search;
} else if (type == 'confm') {
vm.confmListData = 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);
});
},
async onClickSubmit() {
// `useMutation` 훅을 사용하여 mutation 함수 가져오기
const { mutate, onDone, onError } = useMutation(mygql);
try {
const result = await mutate();
console.log(result);
} catch (error) {
console.error('Mutation error:', error);
}
},
registerLeave() {
console.log("등록 버튼 클릭됨");
// Vue의 반응성 문제를 피하기 위해, 새로운 객체를 추가합니다.
this.DeptData = [
...this.DeptData,
{ member: '', deptNM: '', acceptTerms: false }
];
console.log(this.DeptData); // 배열 상태 출력
},
getStatusClass(status) {
if (status === '승인') return 'status-approved';
if (status === '대기') return 'status-pending';
return '';
},
},
};
</script>
<style scoped>
tr {
cursor: pointer;
}
</style>