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="card">
<div class="card-body">
<h2 class="card-title">출장 현황</h2>
<div class="form-card" style="margin-bottom: 20px;">
<h1>출장품의서</h1>
<SanctnViewList v-if="bsrpCnsul.sanctnList.length > 0" :sanctns="bsrpCnsul.sanctnList" />
<form class="row g-3 needs-validation detail" :class="{ 'was-validated': formSubmitted }" @submit.prevent="handleRegister" novalidate>
<div class="col-12">
<div class="col-12 border-x">
<label class="form-label">출장구분</label>
<p>{{ bsrpInfo.bsrpSeNm }}</p>
</div>
<div class="col-12 border-x">
<label class="form-label">이름</label>
<p>{{ user.userNm }}</p>
</div>
</div>
<div class="col-12">
<div class="col-12 border-x">
<label class="form-label">부서</label>
<p>{{ user.deptNm }}</p>
</div>
<div class="col-12 border-x">
<label class="form-label">직급</label>
<p>{{ user.clsfNm }}</p>
</div>
</div>
<div class="col-12">
<label class="form-label">출장지</label>
<p>{{ bsrpInfo.bsrpPlace }}</p>
</div>
<div class="col-12">
<label class="form-label">출장목적</label>
<p>{{ bsrpInfo.bsrpPurps }}</p>
</div>
<div class="col-12">
<label class="form-label">동행자</label>
<div v-if="bsrpInfo.bsrpNmprList.length > 0">
<span v-for="(item, idx) of bsrpInfo.bsrpNmprList" :key="idx">{{ item.triperNm }}</span>
</div>
</div>
<div class="col-12">
<label class="form-label">품의내용</label>
<ViewerComponent :content="bsrpCnsul.cn" />
</div>
<div class="col-12">
<label class="form-label">법인카드</label>
<div>
<p v-for="(item, idx) of cprCardList" :key="idx">
<span v-if="idx !== 0">, </span>
<span>{{ item.cardNm }}</span>
</p>
</div>
</div>
<div class="col-12">
<label class="form-label">법인차량</label>
<div>
<p v-for="(item, idx) of cprVhcleList" :key="idx">
<span v-if="idx !== 0">, </span>
<span>{{ item.vhcleNm }}</span>
</p>
</div>
</div>
<div class="col-12 border-x">
<label class="form-label">품의 신청일</label>
<p>{{ bsrpCnsul.rgsde }}</p>
</div>
</form>
</div>
<div v-if="!$isEmpty(bsrpRport.bsrpId)" class="form-card">
<h1>출장복명서</h1>
<SanctnViewList v-if="bsrpRport.sanctnList.length > 0" :sanctns="bsrpRport.sanctnList" />
<form class="row g-3 needs-validation detail" :class="{ 'was-validated': formSubmitted }" @submit.prevent="handleRegister" novalidate>
<div class="col-12">
<label class="form-label">복명내용</label>
<ViewerComponent :content="bsrpRport.cn" />
</div>
<div class="col-12">
<label class="form-label">여비계산</label>
<p>{{ bsrpInfo.applcntId }}</p>
</div>
<div class="col-12">
<label class="form-label">복명 신청일</label>
<p>{{ bsrpRport.rgsde }}</p>
</div>
<div class="col-12 border-x return">
<label class="form-label">반려사유</label>
<p>{{ bsrpInfo.applcntId }}</p>
</div>
</form>
</div>
<div class="buttons">
<button v-if="sanctnStatus === 'waiting' && sanctnStatus !== 'approved'" type="button" class="btn sm btn-red" @click="deleteData">신청취소</button>
<button v-if="sanctnStatus === 'waiting'" type="button" class="btn sm secondary" @click="fnMoveTo('edit', pageId)">수정</button>
<button v-if="sanctnStatus === 'rejected'" type="button" class="btn sm secondary" @click="fnMoveTo('edit', pageId)">재신청</button>
<button v-if="sanctnStatus === 'approved'" type="button" class="btn sm primary" @click="fnMoveTo('plus', pageId)">복명서 작성</button>
<button type="button" class="btn sm tertiary" @click="fnMoveTo('list')">목록</button>
</div>
</div>
</div>
</template>
<script>
import SanctnViewList from '../../../component/Sanctn/SanctnViewList.vue';
import ViewerComponent from '../../../component/editor/ViewerComponent.vue';
// API
import { bsrpProc, deleteBsrpProc } from '../../../../resources/api/bsrp';
export default {
components: {
SanctnViewList, ViewerComponent,
},
data() {
return {
pageId: null,
// 출장 정보
bsrpInfo: {
bsrpId: null, // 출장 아이디
applcntId: null, // 신청자 아이디
bsrpSe: null, // 출장구분 (공통코드 : sanctn_mby_bsrp)
bsrpPlace: null, // 출장지
bsrpPurps: null, // 출장목적
bgnde: null, // 시작일
beginHour: null, // 시작시
beginMnt: null, // 시작분
endde: null, // 종료일
endHour: null, // 종료시
endMnt: null, // 종료분
bsrpSeNm: null, // 출장구분 이름
bsrpNmprList: [], // 출장 인원
},
// 품의서
bsrpCnsul: {
bsrpId: null, // 출장 아이디
cn: null, // 내용
confmAt: null, // 승인 여부 (W: 대기, A: 승인, R 반려)
rgsde: null, // 등록일
register: null, // 등록자
updde: null, // 수정일
updusr: null, // 수정자
sanctnList: [],
},
// 복명서
bsrpRport: {
bsrpId: null, // 출장 아이디
cn: null, // 내용
confmAt: null, // 승인 여부 (W: 대기, A: 승인, R 반려)
fileId: null, // 파일 아이디
rgsde: null, // 등록일
register: null, // 등록자
updde: null, // 수정일
updusr: null, // 수정자
sanctnList: [],
},
// 신청자 정보
user: {},
};
},
computed: {
// 결재 상태 확인
sanctnStatus() {
const sanctnList = this.bsrpCnsul.sanctnList;
if (sanctnList.length === 0) return 'none'; // 결재 정보 없음
// 하나라도 반려가 있으면 '반려'
if (sanctnList.some(item => item.sanctnSttus === 'R')) {
return 'rejected';
}
// 모든 결재가 승인이면 '승인'
if (sanctnList.every(item => item.sanctnSttus === 'A')) {
return 'approved';
}
// 그 외에는 '대기'
return 'waiting';
}
},
async created() {
this.pageId = this.$route.query.id;
if (this.$isEmpty(this.pageId)) {
alert("게시물이 존재하지 않습니다.");
this.fnMoveTo('list');
}
},
mounted() {
this.findDatas(); // 상세 조회
},
methods: {
// 상세 조회
async findDatas() {
try {
const response = await bsrpProc(this.pageId);
const result = response.data.data;
this.bsrpInfo = result.bsrpInfo;
this.bsrpInfo.bgnde = this.bsrpInfo.bgnde.split(' ')[0];
this.bsrpInfo.endde = this.bsrpInfo.endde.split(' ')[0];
this.cprCardList = result.cprCardList;
this.cprVhcleList = result.cprVhcleList;
this.user = result.user;
this.bsrpCnsul = result.bsrpCnsul;
this.bsrpRport = result.bsrpRport;
} catch (error) {
const message = error.response.data.message;
alert(message);
}
},
// 삭제
async deleteData() {
const isCheck = confirm("삭제하시겠습니까?");
if (!isCheck) {
return;
}
try {
const response = await deleteBsrpProc(this.pageId);
this.fnMoveTo('list');
} catch (error) {
if (error.response) {
alert(error.response.data.message);
} else {
alert("에러가 발생했습니다.");
}
console.error(error.message);
this.fnMoveTo('list');
}
},
// 페이지 이동
fnMoveTo(type, id) {
const routes = {
'list': { name: 'ChuljangStatue' },
'view': { name: 'ChuljangDetailAll', query: { id } },
'edit': { name: 'ChuljangInsert', query: this.$isEmpty(id) ? {} : { id } },
'plus': { 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 } });
}
this.$router.push(routes[type]);
} else {
alert("올바르지 않은 경로를 요청하여 목록으로 이동합니다.");
this.$router.push(routes['list']);
}
},
},
};
</script>