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="w1400">
<section class="main-sec sec1">
<!-- <div class="main-content"> -->
<div class="flex">
<!-- 매칭관리 비주얼 -->
<div class="data-b">
<div class="w1400">
<div class="data-b-b">
<!-- 매칭관리 텍스트 -->
<div class="page-logo flex-start">
<img src="../../../../resources/jpg/macthing-img.png" alt="">
<h1>매칭관리</h1>
</div>
</div>
</div>
</div>
</div>
</section>
<div style="margin-bottom: 6rem; padding: 0 0.5rem;">
<section class="matching-wrap-sub">
<div class="matching-box-button">
<div @click="selectedBox = 'inbox'">
<input type="radio" id="inbox" value="inbox" v-model="selectedBox" @click="pickView()">
<label for="inbox">Pick</label>
</div>
<div @click="selectedBox = 'outbox'">
<input type="radio" id="outbox" value="outbox" v-model="selectedBox" @click="matchingView()">
<label for="outbox">Macthing</label>
</div>
</div>
</section>
<div>
<!-- 상세 1-->
<section>
<div v-if="selectedBox === 'inbox'" class="inbox">
<section class="matching-section-box">
<div>
<h2>수신함</h2>
</div>
<div v-if="pickReceptionList.length === 0" class="matching-box-text"> 수신된 Pick이 없습니다.</div>
<div v-else class="inbox-sub">
<div class="inbox-img inbox-img-blur" v-for="(item, idx) in displayedItems" :key="idx">
<h4>{{ item.company_nm }}</h4>
<div class="img-wrap">
<img :src="'http://localhost:8080' + item.file_path + '/' + item.file_nm + '.' + item.file_extn_nm"
alt="명함박스">
</div>
<div v-if="!item.complete_yn" class="inbox-button">
<button @click="pickModal(item)" class="blue-btn small-btn">수락</button>
<button @click="pickRefusalModal(item)" class="gray-btn small-btn">거절</button>
</div>
<div v-else>
<p class="blue-border-bnt small-btn">PICK 완료</p>
</div>
</div>
</div>
<div class="mat-user-button">
<button v-if="pickReceptionList.length > 4 && !showMore" @click="showMore = true"
class=" small-btn">
더보기
</button>
<PaginationButton v-if="showMore" v-model:currentPage="pickReceptionListSearch.currentPage"
:perPage="pickReceptionListSearch.perPage" :totalCount="pickReceptionListCount" :maxRange="5"
:click="pickReceptionSelectList" />
<button v-if="showMore" @click="showMore = false" class="small-btn">
숨기기
</button>
</div>
</section>
<section class="matching-section-box">
<div>
<h2>발신함</h2>
</div>
<div v-if="pickDispatchList.length === 0" class="matching-box-text"> 발신된 Pick이 없습니다.</div>
<div v-else class="inbox-sub">
<div class="inbox-img" v-for="(item, idx) in displayedItems2" :key="idx">
<h4>{{ item.company_nm }}</h4>
<div class="img-wrap">
<img :src="'http://localhost:8080' + item.file_path + '/' + item.file_nm + '.' + item.file_extn_nm"
alt="명함박스">
</div>
<div v-if="item.refuse_yn === 'N'" class="inbox-button">
<button class="dark-gray-btn small-btn">응답대기중</button>
<button class="red-btn small-btn" @click="pickCancelModal(item)">취소</button>
</div>
<div v-else>
<button class="dark-gray-btn small-btn">거절됨</button>
</div>
</div>
</div>
<div class="mat-user-button">
<button v-if="pickDispatchList.length > 4 && !showMore2" @click="showMore2 = true"
class=" small-btn">
더보기
</button>
<PaginationButton v-if="showMore2" v-model:currentPage="pickDispatchListSearch.currentPage"
:perPage="pickDispatchListSearch.perPage" :totalCount="pickDispatchListCount" :maxRange="5"
:click="pickDispatchSelectList" />
<button v-if="showMore2" @click="showMore2 = false" class="small-btn">
숨기기
</button>
</div>
</section>
<section class="matching-section-box">
<h2>완료</h2>
<div v-if="pickCompleteList.length === 0" class="matching-box-text"> 완료된 Pick이 없습니다.</div>
<div v-else class="inbox-sub">
<div class="inbox-img" v-for="(item, idx) in displayedItems3" :key="idx">
<h4>{{ item.company_nm }}</h4>
<div class="img-wrap">
<img :src="'http://localhost:8080' + item.file_path + '/' + item.file_nm + '.' + item.file_extn_nm"
alt="명함박스">
</div>
<div class="inbox-button">
<button v-if="item.matching_yn" class="gray-btn small-btn">신청 완료</button>
<button v-else @click="matchingModal(item)" class="blue-btn small-btn">매칭
신청</button>
<button @click="cardView(item)" class="red-border-btn small-btn">명함 보기</button>
</div>
</div>
</div>
<div class="mat-user-button">
<button v-if="pickCompleteList.length > 4 && !showMore3" @click="showMore3 = true"
class=" small-btn">
더보기
</button>
<PaginationButton v-if="showMore3" v-model:currentPage="pickCompleteListSearch.currentPage"
:perPage="pickCompleteListSearch.perPage" :totalCount="pickCompleteListCount" :maxRange="5"
:click="pickCompleteSelectList" />
<button v-if="showMore3" @click="showMore3 = false" class="small-btn">
숨기기
</button>
</div>
</section>
</div>
</section>
<!-- 상세2 -->
<section>
<div v-if="selectedBox === 'outbox'">
<section class="matching-section-box">
<div>
<h2>수신함</h2>
</div>
<div v-if="matchingReceptionList.length === 0" class="matching-box-text"> 수신된 Macthing이 없습니다.
</div>
<div v-else class="inbox-sub">
<div class="inbox-img" v-for="(item, idx) in displayedItems4" :key="idx">
<h4>{{ item.company_nm }}</h4>
<div class="img-wrap">
<img :src="'http://localhost:8080' + item.file_path + '/' + item.file_nm + '.' + item.file_extn_nm"
alt="명함박스">
</div>
<div v-if="!item.complete_yn">
<button @click="matchingAcceptModal(item)" class="blue-btn">수락</button>
<button @click="matchingRefusalModal(item)" class="red-btn">거절</button>
</div>
<div v-else>
<p class="blue-border-btn">매칭 완료</p>
</div>
</div>
</div>
<div class="mat-user-button">
<button v-if="matchingReceptionList.length > 4 && !showMore4" @click="showMore4 = true"
class=" small-btn">
더보기
</button>
<PaginationButton v-if="showMore4" v-model:currentPage="matchingReceptionListSearch.currentPage"
:perPage="matchingReceptionListSearch.perPage" :totalCount="matchingReceptionListCount" :maxRange="5"
:click="matchingReceptionSelectList" />
<button v-if="showMore4" @click="showMore4 = false" class="small-btn">
숨기기
</button>
</div>
</section>
<section class="matching-section-box">
<div>
<h2>발신함</h2>
</div>
<div v-if="matchingDispatchList.length === 0" class="matching-box-text"> 발신된 Macthing이 없습니다.
</div>
<div v-else class="inbox-sub">
<div class="inbox-img" v-for="(item, idx) in displayedItems5" :key="idx">
<h4>{{ item.company_nm }}</h4>
<div class="img-wrap">
<img :src="'http://localhost:8080' + item.file_path + '/' + item.file_nm + '.' + item.file_extn_nm"
alt="명함박스">
</div>
<div v-if="item.refuse_yn === 'N'" class="inbox-button">
<button class="dark-gray-btn">응답대기중</button>
<button class="red-btn" @click="matchingCancelModal(item)">취소</button>
</div>
<div v-else>
<button class="gray-btn">거절됨</button>
</div>
</div>
</div>
<div class="mat-user-button">
<button v-if="matchingDispatchList.length > 4 && !showMore5" @click="showMore5 = true"
class=" small-btn">
더보기
</button>
<PaginationButton v-if="showMore5" v-model:currentPage="matchingDispatchListSearch.currentPage"
:perPage="matchingDispatchListSearch.perPage" :totalCount="matchingDispatchListCount" :maxRange="5"
:click="matchingDispatchSelectList" />
<button v-if="showMore5" @click="showMore5 = false" class="small-btn">
숨기기
</button>
</div>
</section>
<section class="matching-section-box">
<h2>완료</h2>
<div v-if="matchingCompleteList.length === 0" class="matching-box-text"> 완료된 Macthing이 없습니다.
</div>
<div v-else class="inbox-sub">
<div class="inbox-img inbox-img-logo" v-for="(item, idx) in displayedItems6"
:key="idx">
<h4>{{ item.company_nm }}</h4>
<div class="img-wrap">
<img :src="'http://localhost:8080' + item.file_path + '/' + item.file_nm + '.' + item.file_extn_nm"
alt="명함박스">
</div>
<div>
<button @click="matchingResetModal(item)" class="red-btn">매칭 취소</button>
<button @click="companyOnePage(item)" class="red-border-btn red-btn">기업 정보</button>
</div>
</div>
</div>
<div class="mat-user-button">
<button v-if="matchingCompleteList.length > 4 && !showMore6" @click="showMore6 = true"
class=" small-btn">
더보기
</button>
<PaginationButton v-if="showMore6" v-model:currentPage="matchingCompleteListSearch.currentPage"
:perPage="matchingCompleteListSearch.perPage" :totalCount="matchingCompleteListCount" :maxRange="5"
:click="matchingCompleteSelectList" />
<button v-if="showMore6" @click="showMore6 = false" class="small-btn">
숨기기
</button>
</div>
</section>
</div>
</section>
</div>
</div>
</div>
<!-- ------------------------------------------------------------------------------------------------------------------- -->
<!-- 매칭 완료시 명함 노출 모달 -->
<div class="matchingmodal" v-if="isVisible">
<div class="matching-modal-box">
<div>
<h1>{{ company_nm }}</h1>
</div>
<div call="inbox-img">
<img :src="cardFullPath" alt="명함박스">
</div>
<div>
<button @click="hideDiv">확인</button>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
import COMMON_UTIL from '../../../../resources/js/commonUtil.js';
import PaginationButton from "../../../component/pagination/PaginationButton.vue";
export default {
data() {
return {
pickReceptionListSearch: {
currentPage: 1,
perPage: 8,
searchType: null,
searchText: null,
},
pickDispatchListSearch: {
currentPage: 1,
perPage: 8,
searchType: null,
searchText: null,
},
pickCompleteListSearch: {
currentPage: 1,
perPage: 8,
searchType: null,
searchText: null,
},
matchingReceptionListSearch: {
currentPage: 1,
perPage: 8,
searchType: null,
searchText: null,
},
matchingDispatchListSearch: {
currentPage: 1,
perPage: 8,
searchType: null,
searchText: null,
},
matchingCompleteListSearch: {
currentPage: 1,
perPage: 8,
searchType: null,
searchText: null,
},
// PICK 수신함
pickReceptionList: [],
pickReceptionListCount: 0,
pickReceptionIdx: 0,
// PICK 발신함
pickDispatchList: [],
pickDispatchListCount: 0,
pickDispatchIdx: 0,
// PICK 완료 리스트
pickCompleteList: [],
pickCompleteListCount: 0,
pickCompleteIdx: 0,
// MATCHING 수신함
matchingReceptionList: [],
matchingReceptionListCount: 0,
matchingReceptionIdx: 0,
// MATCHING 발신함
matchingDispatchList: [],
matchingDispatchListCount: 0,
matchingDispatchIdx: 0,
// MATCHING 완료 리스트
matchingCompleteList: [],
matchingCompleteListCount: 0,
matchingCompleteIdx: 0,
selectedBox: 'inbox',
companyTop6List: [],
//명함보기 모달창
isVisible: false,
company_nm: null,
cardFullPath: null,
showMore: false,
showMore2:false,
showMore3:false,
showMore4:false,
showMore5:false,
showMore6:false
}
},
methods: {
pickView: function () {
this.selectedBox = 'inbox';
this.pickReceptionSelectList();
this.pickDispatchSelectList();
this.pickCompleteSelectList();
},
matchingView: function () {
this.selectedBox = 'outbox';
this.matchingReceptionSelectList();
this.matchingDispatchSelectList();
this.matchingCompleteSelectList();
},
pickReceptionSelectList: function () {
const vm = this;
axios({
url: '/myPage/pickReceptionList.json',
method: 'post',
hearder: {
'Content-Type': "application/json; charset=UTF-8",
},
data: vm.pickReceptionListSearch
}).then(function (response) {
vm.pickReceptionList = response.data.pickReceptionList;
vm.pickReceptionListCount = response.data.pickReceptionListCount;
// vm.pickReceptionListCount = vm.pickReceptionList;
// vm.pickReceptionIdx = vm.pickReceptionList.length - (vm.pickReceptionListSearch.currentPage - 1) * vm.pickReceptionListSearch.perPage;
}).catch(function (error) {
console.log('error - ', error)
alert('수신함 목록 조회 오류, 관리자에게 문의하세요.');
})
},
pickDispatchSelectList: function () {
const vm = this;
axios({
url: '/myPage/pickDispatchList.json',
method: 'post',
hearder: {
'Content-Type': "application/json; charset=UTF-8",
},
data: vm.pickDispatchListSearch
}).then(function (response) {
vm.pickDispatchList = response.data.pickDispatchList;
vm.pickDispatchListCount = response.data.pickDispatchListCount;
// vm.pickReceptionListCount = vm.pickReceptionList;
// vm.pickReceptionIdx = vm.pickReceptionList.length - (vm.pickReceptionListSearch.currentPage - 1) * vm.pickReceptionListSearch.perPage;
}).catch(function (error) {
console.log('error - ', error)
alert('발신함 목록 조회 오류, 관리자에게 문의하세요.');
})
},
pickCompleteSelectList: function () {
const vm = this;
axios({
url: '/myPage/pickCompleteList.json',
method: 'post',
hearder: {
'Content-Type': "application/json; charset=UTF-8",
},
data: vm.pickCompleteListSearch
}).then(function (response) {
vm.pickCompleteList = response.data.pickCompleteList;
vm.companyTop6List = response.data.companyTop6List;
vm.pickCompleteListCount = response.data.pickCompleteListCount;
// vm.pickReceptionListCount = vm.pickReceptionList;
// vm.pickReceptionIdx = vm.pickReceptionList.length - (vm.pickReceptionListSearch.currentPage - 1) * vm.pickReceptionListSearch.perPage;
}).catch(function (error) {
console.log('error - ', error)
alert('완료 목록 조회 오류, 관리자에게 문의하세요.');
})
},
pickModal: function (item) {
if (confirm(item.company_nm + "기업의 PICK 신청을 수락하시겠습니까?")) {
this.pick(item)
}
},
pickCancelModal: function (item) {
if (confirm(item.company_nm + "기업에게 신청한 PICK을 취소 하시겠습니까?")) {
this.pickCancel(item)
}
},
pickRefusalModal: function (item) {
if (confirm(item.company_nm + "기업의 PICK을 거절 하시겠습니까?")) {
this.pickRefusal(item)
}
},
pick: function (item) {
const vm = this;
axios({
url: '/matching/pick.json',
method: 'post',
hearder: {
'Content-Type': "application/json; charset=UTF-8",
},
data: item
}).then(function (response) {
alert(response.data);
vm.pickView();
}).catch(function (error) {
console.log('error - ', error)
alert('PICK 수락 오류, 관리자에게 문의하세요.');
})
},
pickCancel: function (item) {
const vm = this;
axios({
url: '/matching/pickCancel.json',
method: 'post',
hearder: {
'Content-Type': "application/json; charset=UTF-8",
},
data: item
}).then(function (response) {
alert(response.data);
vm.pickView();
}).catch(function (error) {
console.log('error - ', error)
alert('PICK 취소 오류, 관리자에게 문의하세요.');
})
},
pickRefusal: function (item) {
const vm = this;
axios({
url: '/matching/pickRefusal.json',
method: 'post',
hearder: {
'Content-Type': "application/json; charset=UTF-8",
},
data: item
}).then(function (response) {
alert(response.data);
vm.pickView();
}).catch(function (error) {
console.log('error - ', error)
alert('PICK 거부 오류, 관리자에게 문의하세요.');
})
},
cardView: function (item) {
this.company_nm = item.company_nm;
this.cardFullPath = 'http://localhost:8080' + item.file_path + '/' + item.file_nm + '.' + item.file_extn_nm;
this.isVisible = true
},
matchingAcceptModal: function (item) {
if (confirm(item.company_nm + "기업의 MATCHING 신청을 수락 하시겠습니까?")) {
this.matching(item)
}
},
matchingModal: function (item) {
if (confirm(item.company_nm + "기업에게 MATCHING 신청을 하시겠습니까?")) {
this.matching(item)
}
},
matchingCancelModal: function (item) {
if (confirm(item.company_nm + "기업에게 신청한 MATCHING을 취소 하시겠습니까?")) {
this.matchingCancel(item)
}
},
matchingRefusalModal: function (item) {
if (confirm(item.company_nm + "기업의 MATCHING을 거절 하시겠습니까?")) {
this.matchingRefusal(item)
}
},
matchingResetModal: function (item) {
if (confirm(item.company_nm + "기업과 MATCHING을 취소하시겠습니까? \n 취소 시 MATCHING은 초기화 됩니다.")) {
this.matchingReset(item)
}
},
matchingReceptionSelectList: function () {
const vm = this;
axios({
url: '/myPage/matchingReceptionList.json',
method: 'post',
hearder: {
'Content-Type': "application/json; charset=UTF-8",
},
data: vm.matchingReceptionListSearch
}).then(function (response) {
vm.matchingReceptionList = response.data.matchingReceptionList;
vm.matchingReceptionListCount = response.data.matchingReceptionListCount;
// vm.pickReceptionListCount = vm.pickReceptionList;
// vm.pickReceptionIdx = vm.pickReceptionList.length - (vm.pickReceptionListSearch.currentPage - 1) * vm.pickReceptionListSearch.perPage;
}).catch(function (error) {
console.log('error - ', error)
alert('수신함 목록 조회 오류, 관리자에게 문의하세요.');
})
},
matchingDispatchSelectList: function () {
const vm = this;
axios({
url: '/myPage/matchingDispatchList.json',
method: 'post',
hearder: {
'Content-Type': "application/json; charset=UTF-8",
},
data: vm.matchingDispatchListSearch
}).then(function (response) {
vm.matchingDispatchList = response.data.matchingDispatchList;
vm.matchingDispatchListCount = response.data.matchingDispatchListCount;
// vm.pickReceptionListCount = vm.pickReceptionList;
// vm.pickReceptionIdx = vm.pickReceptionList.length - (vm.pickReceptionListSearch.currentPage - 1) * vm.pickReceptionListSearch.perPage;
}).catch(function (error) {
console.log('error - ', error)
alert('발신함 목록 조회 오류, 관리자에게 문의하세요.');
})
},
matchingCompleteSelectList: function () {
const vm = this;
axios({
url: '/myPage/matchingCompleteList.json',
method: 'post',
hearder: {
'Content-Type': "application/json; charset=UTF-8",
},
data: vm.matchingCompleteListSearch
}).then(function (response) {
vm.matchingCompleteList = response.data.matchingCompleteList;
vm.matchingCompleteListCount = response.data.matchingCompleteListCount;
// vm.pickReceptionListCount = vm.pickReceptionList;
// vm.pickReceptionIdx = vm.pickReceptionList.length - (vm.pickReceptionListSearch.currentPage - 1) * vm.pickReceptionListSearch.perPage;
}).catch(function (error) {
console.log('error - ', error)
alert('완료 목록 조회 오류, 관리자에게 문의하세요.');
})
},
matching: function (item) {
const vm = this;
axios({
url: '/matching/matching.json',
method: 'post',
hearder: {
'Content-Type': "application/json; charset=UTF-8",
},
data: item
}).then(function (response) {
alert(response.data);
vm.matchingView();
}).catch(function (error) {
console.log('error - ', error)
alert('MATCHING 오류, 관리자에게 문의하세요.');
})
},
matchingCancel: function (item) {
const vm = this;
axios({
url: '/matching/matchingCancel.json',
method: 'post',
hearder: {
'Content-Type': "application/json; charset=UTF-8",
},
data: item
}).then(function (response) {
alert(response.data);
vm.matchingView();
}).catch(function (error) {
console.log('error - ', error)
alert('MATCHING 취소 오류, 관리자에게 문의하세요.');
})
},
matchingRefusal: function (item) {
const vm = this;
axios({
url: '/matching/matchingRefusal.json',
method: 'post',
hearder: {
'Content-Type': "application/json; charset=UTF-8",
},
data: item
}).then(function (response) {
alert(response.data);
vm.matchingView();
}).catch(function (error) {
console.log('error - ', error)
alert('MATCHING 거절 오류, 관리자에게 문의하세요.');
})
},
matchingReset: function (item) {
const vm = this;
axios({
url: '/matching/matchingReset.json',
method: 'post',
hearder: {
'Content-Type': "application/json; charset=UTF-8",
},
data: item
}).then(function (response) {
alert(response.data);
vm.matchingView();
}).catch(function (error) {
console.log('error - ', error)
alert('MATCHING 취소 오류, 관리자에게 문의하세요.');
})
},
companyOnePage: function (item) {
const vm = this;
let best = 'non'
for (let i = 0; i < vm.companyTop6List.length; i++) {
if (vm.companyTop6List[i].company_id === item.company_id) {
best = 'best';
}
}
axios({
url: '/matching/companyViewCountAdd.json',
method: 'post',
hearder: {
'Content-Type': "application/json; charset=UTF-8",
},
data: { 'company_id': item.company_id }
}).then(function (response) {
vm.$router.push({ path: '/MatchingOne.page', query: { 'company_id': item.company_id, 'best': best } });
}).catch(function (error) {
console.log("기업 상세조회 오류, 관리자에게 문의하세요.");
})
},
hideDiv() {
this.isVisible = false;
}
},
mounted() {
this.pickView();
},
components: {
'PaginationButton': PaginationButton,
},
computed: {
displayedItems() {
if (this.showMore) {
return this.pickReceptionList;
} else {
return this.pickReceptionList.slice(0, 4);
}
},
displayedItems2() {
if (this.showMore2) {
return this.pickDispatchList;
} else {
return this.pickDispatchList.slice(0, 4);
}
},
displayedItems3() {
if (this.showMore3) {
return this.pickCompleteList;
} else {
return this.pickCompleteList.slice(0, 4);
}
},
displayedItems4() {
if (this.showMore4) {
return this.matchingReceptionList;
} else {
return this.matchingReceptionList.slice(0, 4);
}
},
displayedItems5() {
if (this.showMore5) {
return this.matchingDispatchList;
} else {
return this.matchingDispatchList.slice(0, 4);
}
},
displayedItems6() {
if (this.showMore6) {
return this.matchingCompleteList;
} else {
return this.matchingCompleteList.slice(0, 4);
}
}
}
}
</script>