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="card">
<div class="card-body">
<h2 class="card-title">출장 신청</h2>
<p class="require"><img :src="require" alt=""> 필수입력</p>
<div class="tbl-wrap">
<table class="tbl data">
<tbody>
<tr>
<th>출장구분 <span class="require"><img :src="require" alt=""></span></th>
<td>
<select class="form-select sm" style="width: 110px;" v-model="bsrpInfo.bsrpSe">
<option v-for="(item, idx) of cmmnCodes.bsrpCodeList" :key="idx" :value="item.code">
{{ item.codeNm }}
</option>
</select>
</td>
<th>일수</th>
<td>
<input type="text" class="form-control sm" v-model="totalDays" readonly />
</td>
</tr>
<tr>
<th>출장지 <span class="require"><img :src="require" alt=""></span></th>
<td>
<input type="text" class="form-control sm" v-model="bsrpInfo.bsrpPlace" />
</td>
<th>출장목적 <span class="require"><img :src="require" alt=""></span></th>
<td>
<input type="text" class="form-control sm" v-model="bsrpInfo.bsrpPurps" />
</td>
</tr>
<tr>
<th>출장기간 <span class="require"><img :src="require" alt=""></span></th>
<td colspan="3">
<div class="d-flex">
<div class="d-flex gap-1 mb-1">
<input type="date" class="form-control sm" v-model="bsrpInfo.bgnde" />
<input type="text" class="form-control sm" style="width: 100px;" placeholder="시" v-model="bsrpInfo.beginHour" />
<input type="text" class="form-control sm" style="width: 100px;" placeholder="분" v-model="bsrpInfo.beginMnt" />
</div>
<div class="d-flex gap-1">
<input type="date" class="form-control sm" v-model="bsrpInfo.endde" />
<input type="text" class="form-control sm" style="width: 100px;" placeholder="시" v-model="bsrpInfo.endHour" />
<input type="text" class="form-control sm" style="width: 100px;" placeholder="분" v-model="bsrpInfo.endMnt" />
</div>
</div>
</td>
</tr>
<tr>
<th>
동행자
</th>
<td>
<button type="button" title="추가" @click="isOpenNmprModal = true">
<PlusCircleFilled />
</button>
<HrPopup v-if="isOpenNmprModal" :lists="bsrpInfo.bsrpNmprList" @onSelected="fnAddNmpr" @close="isOpenNmprModal = false" />
<div class="approval-container">
<div v-for="(item, idx) of bsrpInfo.bsrpNmprList" :key="idx" class="d-flex addapproval">
<div class="d-flex align-items-center border-x">
<p>{{ item.triperNm }} {{ item.clsfNm }}</p>
<button type="button" @click="fnDelNmpr(idx)" @mousedown.stop>
<CloseOutlined />
</button>
</div>
</div>
</div>
</td>
<th>
승인자 <span class="require"><img :src="require" alt=""></span>
</th>
<td>
<button type="button" title="추가" @click="isOpenSanctnModal = true">
<PlusCircleFilled />
</button>
<HrPopup v-if="isOpenSanctnModal" :lists="bsrpCnsul.sanctnList" @onSelected="fnAddSanctn" @close="isOpenSanctnModal = false" />
<div class="approval-container">
<SanctnList v-model:lists="bsrpCnsul.sanctnList" @delSanctn="fnDelSanctn" />
</div>
</td>
</tr>
<tr>
<th>품의내용 <span class="require"><img :src="require" alt=""></span></th>
<td colspan="3" style="height: calc(100% - 550px);">
<EditorComponent v-model:contents="bsrpCnsul.cn" />
</td>
</tr>
<tr>
<th>
법인카드
<button type="button" title="추가" @click="isOpenCardModal = true">
<PlusCircleFilled />
</button>
</th>
<td>
<CorpCardPopup v-if="isOpenCardModal" :bsrpInfo="bsrpInfo" :lists="cprCardList" @close="isOpenCardModal = false" @onSelected="fnAddCard" />
<div class="approval-container">
<div v-for="(card, idx) in cprCardList" :key="idx" class="d-flex gap-2 addapproval mb-2">
<form class="d-flex align-items-center border-x">
<p>{{ card.cardNm }}</p>
<button type="button" @click="fnDelCard(idx)" class="delete-button">
<CloseOutlined />
</button>
</form>
</div>
</div>
</td>
<th>
법인차량
<button type="button" title="추가" @click="isOpenVhcleModal = true">
<PlusCircleFilled />
</button>
</th>
<td>
<CorpCarPopup v-if="isOpenVhcleModal" :bsrpInfo="bsrpInfo" :lists="cprVhcleList" @close="isOpenVhcleModal = false" @onSelected="fnAddVhcle" />
<div class="approval-container">
<div v-for="(vhcle, idx) in cprVhcleList" :key="idx" class="d-flex gap-2 addapproval mb-2">
<p>{{ vhcle.vhcleNm }}</p>
<select class="form-select" v-model="vhcle.drverId">
<option value="" disabled hidden>운전자 선택</option>
<option :value="userInfo.userId">{{ userInfo.userNm }}</option>
<option v-for="(item, idx) of bsrpInfo.bsrpNmprList" :key="idx" :value="item.userId">
{{ item.userNm }}
</option>
</select>
<button type="button" @click="fnDelVhcle(idx)" class="delete-button">
<CloseOutlined />
</button>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="buttons">
<button type="button" class="btn sm sm primary" @click="fnSave">신청</button>
<button v-if="$isEmpty(pageId)" type="button" class="btn sm sm secondary" @click="fnMoveTo('list')">목록</button>
<button v-else type="button" class="btn sm sm secondary" @click="fnMoveTo('view', pageId)">취소</button>
</div>
</div>
</div>
</template>
<script>
import { PlusCircleFilled, CloseOutlined } from '@ant-design/icons-vue';
import HrPopup from '../../../component/Popup/HrPopup.vue';
import CorpCarPopup from '../../../component/Popup/CorpCarPopup.vue';
import CorpCardPopup from '../../../component/Popup/CorpCardPopup.vue';
import SanctnList from '../../../component/Sanctn/SanctnFormList.vue';
import EditorComponent from '../../../component/editor/EditorComponent.vue';
// API
import { saveBsrpProc, bsrpProc, updateBsrpProc } from '../../../../resources/api/bsrp';
export default {
components: {
PlusCircleFilled, CloseOutlined,
HrPopup, CorpCarPopup, CorpCardPopup,
SanctnList, EditorComponent,
},
data() {
return {
require: "/client/resources/img/require.png",
pageId: null,
userInfo: this.$store.state.userInfo,
cmmnCodes: {},
isOpenNmprModal: false,
isOpenSanctnModal: false,
isOpenCardModal: false,
isOpenVhcleModal: false,
// 출장정보
bsrpInfo: {
applcntId: null, // 신청자 아이디
bsrpSe: null, // 출장구분
bsrpPlace: null, // 출장지
bsrpPurps: null, // 출장목적
bgnde: null, // 시작일
beginHour: null, // 시작시
beginMnt: null, // 시작분
endde: null, // 종료일
endHour: null, // 종료시
endMnt: null, // 종료분
bsrpNmprList: [], // 출장인원 목록
},
// 출장품의
bsrpCnsul: {
bsrpId: null, // 출장 아이디
cn: null, // 품의 내용
confmAt: null, // 승인여부
rgsde: null, // 등록일
register: null, // 등록자
updde: null, // 수정일
updusr: null, // 수정자
sanctnList: [], // 결재 목록
},
cprCardList: [], // 법인카드 목록
cprVhcleList: [], // 법인차량 목록
totalDays: 0, // 일수
};
},
computed: {},
watch: {
cmmnCodes(newVal) {
if (Object.keys(newVal).length > 0) {
this.bsrpInfo.bsrpSe = this.cmmnCodes.bsrpCodeList[0].code;
}
},
'bsrpInfo.bgnde'(newVal, oldVal) {
if (newVal !== oldVal) {
this.calcDayCnt(); // 일수 계산
}
},
'bsrpInfo.endde'(newVal, oldVal) {
if (newVal !== oldVal) {
this.calcDayCnt(); // 일수 계산
}
},
},
async created() {
this.pageId = this.$route.query.id;
this.cmmnCodes = await this.$defaultCodes();
},
mounted() {
if (!this.$isEmpty(this.pageId)) {
this.findData();
}
},
methods: {
// 상세 조회
async findData() {
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.bsrpCnsul = result.bsrpCnsul;
this.cprCardList = result.cprCardList;
this.cprVhcleList = result.cprVhcleList;
} catch (error) {
console.error('데이터 조회 실패:', error);
alert(error.response.data.message);
this.fnMoveTo('list');
}
},
// 일수 계산
calcDayCnt() {
if (!this.bsrpInfo.bgnde || !this.bsrpInfo.endde) {
this.totalDays = 0;
return;
}
const startDate = new Date(this.bsrpInfo.bgnde);
const endDate = new Date(this.bsrpInfo.endde);
if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) {
this.totalDays = 0;
return;
}
const timeDiff = endDate.getTime() - startDate.getTime();
const dayDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24)) + 1;
this.totalDays = Math.max(0, dayDiff);
},
// 동행자 추가
fnAddNmpr(user) {
const data = {
triperId: user.userId, // 출장자 아이디
deptId: user.deptId, // 부서 아이디
clsf: user.clsf, // 직급
triperNm: user.userNm, // 출장자 이름
deptNm: user.deptNm, // 부서 이름
clsfNm: user.clsfNm, // 직급 이름
};
this.bsrpInfo.bsrpNmprList.push(data);
this.isOpenNmprModal = false;
},
// 동행자 삭제
fnDelNmpr(idx) {
this.bsrpInfo.bsrpNmprList.splice(idx, 1);
},
// 승인자 추가
fnAddSanctn(user) {
const data = {
sanctnId: null, // 결재 아이디
confmerId: user.userId, // 승인자 아이디
clsf: user.clsf, // 직급
sanctnOrdr: this.bsrpCnsul.sanctnList.length + 1, // 결재 순서
sanctnIem: 'cnsul', // 결재 항목
sanctnMbyId: null, // 결재 주체 아이디
sanctnSe: this.cmmnCodes.sanctnCodeList[0].code, // 결재구분
confmerNm: user.userNm, // 승인자 이름
clsfNm: user.clsfNm, // 직급 이름
};
this.bsrpCnsul.sanctnList.push(data);
this.isOpenSanctnModal = false;
},
// 승인자 삭제
fnDelSanctn(idx) {
this.bsrpInfo.sanctnList.splice(idx, 1);
this.bsrpInfo.sanctnList.forEach((item, idx) => { item.sanctnOrdr = idx + 1; });
},
// 법인카드 추가
fnAddCard(item) {
this.cprCardList.push(item);
this.isOpenCardModal = false;
},
// 법인카드 삭제
fnDelCard(idx) {
this.cprCardList.splice(idx, 1);
},
// 법인차량 추가
fnAddVhcle(item) {
item.drverId = '';
this.cprVhcleList.push(item);
this.isOpenVhcleModal = false;
},
// 법인차량 삭제
fnDelVhcle(idx) {
this.cprVhcleList.splice(idx, 1);
},
// 유효성 검사
validateForm() {
if (this.$isEmpty(this.bsrpInfo.bsrpSe)) {
return false;
}
if (this.$isEmpty(this.bsrpInfo.bsrpPlace)) {
return false;
}
if (this.$isEmpty(this.bsrpInfo.bsrpPurps)) {
return false;
}
if (this.$isEmpty(this.bsrpInfo.bgnde) || this.$isEmpty(this.bsrpInfo.beginHour) || this.$isEmpty(this.bsrpInfo.beginMnt)) {
return false;
}
if (this.$isEmpty(this.bsrpInfo.endde) || this.$isEmpty(this.bsrpInfo.endHour) || this.$isEmpty(this.bsrpInfo.endMnt)) {
return false;
}
if (this.$isEmpty(this.bsrpInfo.bsrpNmprList) || this.bsrpInfo.bsrpNmprList.length === 0) {
return false;
}
if (this.$isEmpty(this.bsrpCnsul.cn)) {
return false;
}
return true;
},
// 신청
async fnSave() {
try {
if (!this.validateForm()) {
return;
}
let data = {
bsrpCnsulInsertDTO: this.bsrpCnsul,
cardDtlsList: this.cprCardList,
vhcleDtlsList: this.cprVhcleList,
}
if (this.$isEmpty(this.pageId)) {
data.bsrpInfoInsertDTO = this.bsrpInfo;
} else {
data.bsrpInfoUpdateDTO = this.bsrpInfo;
}
const response = this.$isEmpty(this.pageId) ? await saveBsrpProc(data) : await updateBsrpProc(data);
const message = this.$isEmpty(this.pageId) ? "등록되었습니다." : "수정되었습니다.";
alert(message);
this.fnMoveTo('view', response.data.data.pageId);
} catch (error) {
console.error('저장 실패:', error);
const message = error.response?.data?.message || "저장에 실패했습니다.";
alert(message);
}
},
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>