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>
<section class="main-sec sec1">
<!-- <div class="main-content"> -->
<div class="flex">
<!-- 매칭비주얼 -->
<div class="matching-box-wrap">
<div class="w1400">
<div class="matching-wrap">
<div class="matching-img">
<img src="../../../../resources/jpg/mat-img.png" alt="">
</div>
<!-- 매칭 텍스트 -->
<div class="matching-text">
<i class="fa-regular fa-handshake fa-lg" style="color: #ffffff;"></i>
<p>기업 홍보관</p>
</div>
<div class="matching-img">
<img src="../../../../resources/jpg/mat-img1.png" alt="">
</div>
</div>
</div>
</div>
</div>
</section>
<div class="w1400">
<div class="page-logo flex-start">
<img src="../../../../resources/jpg/mat-img-d.png" alt="">
<h1>회사소개</h1>
</div>
<div class="matDtail-sec">
<section class="mat-sec1">
<h2> {{ company.company_nm }} <span v-if="best === 'best'">(BEST 기업)</span></h2>
<div @click="downloadProfile()">
<label for="dtaildown">회사소개서 다운로드</label>
<i class="fa-solid fa-download" style="color: #ffffff;"></i>
</div>
</section>
<!-- /상세내용 -->
<section class="mat-sec2">
<div class="info-sec-summary">
<sapn class="info-th"></sapn>
<details>
<!-- <summary @click="getViewer(0)">기업소개</summary>
<div>
<span id="viewer1" ref="viewer1" class="viewer"></span>
</div> -->
<!-- </details> -->
<summary @click="getViewer(0)">기업소개</summary>
<div>
<span id="viewer1" ref="viewer1" class="viewer"></span>
</div>
</details>
<details>
<summary @click="getViewer(1)">대표 기술 소개</summary>
<div>
<span id="viewer2" ref="viewer2" class="viewer"></span>
</div>
</details>
<details>
<summary @click="getViewer(2)">서비스 소개</summary>
<div>
<span id="viewer3" ref="viewer3" class="viewer"></span>
</div>
</details>
</div>
<div class="mat-sec2-end">
<p>
<i v-if="!company.pick_yn" class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"
@click="pickConfirm()"></i>
<i v-else class="fa fa-heart fa-lg" style="color: #d41515;" @click="pickCancelModal()"></i>
<span id="pickBtn" @click="openPickListMadal">{{ company.company_pick_cnt }}개</span>의 기업이 pick했습니다!
</p>
<p><span>조회수</span>{{ company.view_cnt }}</p>
</div>
</section>
<section class="mat-sec2-bt">
<button @click="goToPage2">목록</button>
</section>
</div>
</div>
<div v-show="pickModal" class="matching-modal2">
<div class="mat-modal">
<h2>우리기업을 PICK한 기업</h2>
<button class="join-text-bt3" @click="closePickListMadal">X</button>
</div>
<table class="mat-modal-img" v-for="(item, idx) in pickSelectList" :key="idx">
<td><img :src="'http://localhost:8080' + item.file_path + '/' + item.file_nm + '.' + item.file_extn_nm"></td>
<td>
{{ item.company_nm }}
</td>
<td>
<button v-if="item.pick_yn" disabled :style="{ backgroundColor: '#ccc' }">완료</button>
<button v-else :style="{ backgroundColor: '#3f87f7' }" @click="modalPick(item)"> 수락</button>
</td>
</table>
</div>
</template>
<script>
import axios from 'axios';
import COMMON_UTIL from '../../../../resources/js/commonUtil.js';
import { useRoute } from 'vue-router';
import Viewer from '@toast-ui/editor/dist/toastui-editor-viewer';
import '@toast-ui/editor/dist/toastui-editor.css';
import '@toast-ui/editor/dist/i18n/ko-kr';
import * as FileSaver from 'file-saver';
export default {
data() {
return {
company: {
company_id: null,
company_nm: null,
company_info: null,
company_point: null,
file_id: null,
user_id: null,
keyword: null,
company_pick_cnt: null,
company_technology: null,
company_service: null,
view_cnt: null,
file_path: null,
file_nm: null,
file_extn_nm: null,
pick_yn: null,
},
best: null,
userCompanyId: null,
pickSelectList: [],
pickModal: false,
isAccepted: false,
buttonText: '수락',
buttonColor: '#3f87f7',
items: [
{ id: 2, text: "oo출판사" },
],
route: useRoute(),
}
},
methods: {
companySelectOne: function () {
const vm = this;
vm.best = vm.route.query.best;
axios({
url: '/matching/companySelectOne.json',
method: 'post',
hearder: {
'Content-Type': "application/json; charset=UTF-8",
},
data: { 'company_id': vm.route.query.company_id }
}).then(function (response) {
vm.company = response.data;
vm.userCompanyId = response.data.userCompanyId;
}).catch(function (error) {
console.log("error - ", error)
alert("기업 상세보기 조회 오류, 관리자에게 문의하세요.");
})
},
getViewer(idx) {
const vm = this;
let data = [vm.company.company_info, vm.company.company_technology, vm.company.company_service][idx];
this.viewer = new Viewer({
el: this.$refs[`viewer${idx + 1}`],
initialEditType: 'wysiwyg',
previewStyle: 'vertical',
initialValue: data,
customHTMLRenderer: {
htmlBlock: {
iframe(node) {
return [
{ type: 'openTag', tagName: 'iframe', outerNewLine: true, attributes: node.attrs },
{ type: 'html', content: node.childrenHTML },
{ type: 'closeTag', tagName: 'iframe', outerNewLine: true },
];
},
}
},
});
},
downloadProfile: function () {
const vm = this;
let path = vm.company.file_path + '/' + vm.company.file_nm + '.' + vm.company.file_extn_nm;
axios({
url: '/file/downloadFile.json',
method: 'post',
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
responseType: 'blob',
data: `file_path=${encodeURIComponent(path)}`
}).then((response) => {
const blob = new Blob([response.data]);
const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
if (isSafari) {
FileSaver.saveAs(blob, vm.company.real_file_nm);
} else {
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.download = vm.company.real_file_nm;
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
}
let company_id = vm.company.company_id;
axios({
url: '/statistics/profileLogInsert.json',
method: 'post',
hearder: {
'Content-Type': "application/json; charset=UTF-8",
},
data: {'company_id' : company_id}
}).then(function(response){
vm.$router.go(0);
})
}).catch(function (error) {
console.log('error - ', error)
alert('에러발생');
});
},
openPickListMadal() {
const vm = this;
if (this.company.company_id === this.userCompanyId) {
this.pickModal = true;
axios({
url: '/matching/pickSelectList.json',
method: 'post',
hearder: {
'Content-Type': "application/json; charset=UTF-8",
},
data: vm.company
}).then(function (response) {
vm.pickSelectList = response.data;
}).catch(function (error) {
console.log("error - ", error)
alert("PICK 목록 조회 오류, 관리자에게 문의하세요.");
})
}
},
pickConfirm: function () {
if (this.company.userCompanyId != this.company.company_id) {
if (confirm(this.company.company_nm + "에 PICK 신청을 하시겠습니까?")) {
this.pick()
}
} else {
alert("자신의 기업에는 PICK을 할 수 없습니다.")
}
},
pickCancelModal: function () {
if (confirm(this.company.company_nm + "에게 신청한 PICK을 취소 하시겠습니까?")) {
this.pickCancel()
}
},
pick: function () {
const vm = this;
axios({
url: '/matching/pick.json',
method: 'post',
hearder: {
'Content-Type': "application/json; charset=UTF-8",
},
data: vm.company
}).then(function (response) {
alert(response.data);
vm.companySelectOne();
}).catch(function (error) {
console.log('error - ', error)
alert('기업 목록 조회 오류, 관리자에게 문의하세요.');
})
},
pickCancel: function () {
const vm = this;
axios({
url: '/matching/pickCancel.json',
method: 'post',
hearder: {
'Content-Type': "application/json; charset=UTF-8",
},
data: vm.company
}).then(function (response) {
alert(response.data);
vm.companySelectOne();
}).catch(function (error) {
console.log('error - ', error)
alert('기업 목록 조회 오류, 관리자에게 문의하세요.');
})
},
modalPick: 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.openPickListMadal();
}).catch(function (error) {
console.log('error - ', error)
alert('기업 목록 조회 오류, 관리자에게 문의하세요.');
})
},
closePickListMadal() {
this.pickModal = false;
},
accept() {
this.isAccepted = !this.isAccepted;
this.buttonText = this.isAccepted ? '수락완료' : '수락';
this.buttonColor = this.isAccepted ? '#ccc' : '#3f87f7';
},
goToPage2() {
this.$router.push('/Matching.page')
},
},
watch: {
},
computed: {
},
mounted() {
console.log('Matching mounted');
this.companySelectOne();
}
}
</script>