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
File name
Commit message
Commit date
<template>
<div class="consulting-page content-page">
<div class="content pt50 pb50">
<div class="w1200 content">
<div class="page-title point-font mb10">
<p>온라인상담신청</p>
</div>
<div>
<p class="essential text-rg"><span class="mr10">*</span>필수입력</p>
</div>
<table class="form-table mb30">
<colgroup>
<col width="10%" />
<col width="40%" />
<col width="10%" />
<col width="40%" />
</colgroup>
<tbody>
<tr>
<th class="point-font">
<span>기업명</span>
</th>
<td>
<input
type="text"
class="full-input"
ref="entNm"
v-model="entDscsnAplyVO['entNm']"
placeholder="기업명을 입력하세요."
/>
</td>
<th class="point-font">
<span>성명</span>
</th>
<td>
<input
type="text"
class="full-input"
ref="aplcntNm"
v-model="entDscsnAplyVO['aplcntNm']"
placeholder="성명을 입력하세요."
/>
</td>
</tr>
<tr>
<th class="point-font">
<span>연락처</span>
</th>
<td>
<input
type="text"
class="full-input"
ref="telno"
v-model="entDscsnAplyVO['telno']"
oninput="this.value = this.value.replace(/[^0-9.]/g, '')"
minlength="10"
maxlength="11"
placeholder="연락 가능한 휴대폰 번호를 입력하세요.(숫자만)"
/>
</td>
<th class="point-font">
<span>이메일</span>
</th>
<td>
<input
type="text"
class="full-input"
ref="eml"
v-model="entDscsnAplyVO['eml']"
placeholder="이메일을 입력하세요."
/>
</td>
</tr>
<tr class="border-top">
<th colspan="4" class="text-lf point-font">
<span>내용</span>
</th>
</tr>
<tr>
<td colspan="4">
<textarea
name=""
id=""
class="content"
ref="aplyCn"
v-model="entDscsnAplyVO['aplyCn']"
placeholder="내용을 입력하세요."
/>
</td>
</tr>
<tr class="border-top">
<td colspan="4">
<div class="gd-12 pl0 pr0">
<label class="mb10 point-font">첨부파일</label>
<div class="flex">
<div class="gd-10 pl0">
<div class="filebox">
<input
class="upload-name full-input"
v-model="viewFiles"
placeholder="첨부파일이 없습니다."
readonly
/>
</div>
<div>
<div
v-for="(file, index) of fileList"
:key="index"
class="file-wrap flex justify-between align-center border pd10 mt10"
>
<p v-if="file['fileId'] != null">
{{ file.fileNm }}.{{ file.extnNm }}
</p>
<p v-else>{{ file.name }}</p>
<button
class="icon-btn pd0"
@click="fnFileDelete(file, index)"
>
<svg-icon
type="mdi"
:width="15"
:height="15"
:path="path"
/>
</button>
</div>
</div>
</div>
<div class="gd-2 pr0">
<label
for="file"
class="large-btn text-ct cursor green-border-btn"
>
파일찾기
</label>
<input
type="file"
id="file"
ref="file"
@change="fnFileInsert"
multiple
style="display: none"
/>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<div class="flex justify-end no-gutters">
<div class="gd-2">
<button class="large-btn green-btn point-font" @click="fnInsert">
상담신청
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import defaultAxios from "../../../../../resources/js/defaultAxios";
import defaultFileSystem from "../../../../../resources/js/defaultFileSystem";
// API
import { entDscsnAplyDetailProc } from "../../../../../resources/api/entDscsnAply";
export default {
mixins: [defaultFileSystem],
data() {
return {
entDscsnAplyVO: {},
};
},
created() {
this.fnViewDetail();
},
methods: {
// axios: 조회(상세)
async fnViewDetail() {
// 데이터 세팅
const data = { entDscsnAplyId: null };
// 실행
try {
const response = await entDscsnAplyDetailProc(data);
this.entDscsnAplyVO = response.data.data;
} catch (error) {
alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
}
},
// 상담신청
fnInsert() {
// 유효성 검사
if (this.valiadtion() == false) {
return;
}
// 데이터 세팅
let data = this.entDscsnAplyVO;
data.insertFileList = this.insertFileList;
data.deleteFileList = this.deleteFileList;
// 실행
defaultAxios({
url: "/sys/entDscsnAply/insertProc.file",
method: "post",
headers: {
"Content-Type": "multipart/form-data; charset=UTF-8",
Authorization: this.$store.state.authorization,
},
data: data,
})
.then((response) => {
alert(response.data["message"]);
this.fnViewDetail();
this.viewFiles = null;
this.fileList = [];
this.insertFileList = [];
this.deleteFileList = [];
})
.catch((error) => {
const errorData = error.response.data;
if (errorData.message != null && errorData.message != "") {
alert(error.response.data.message);
} else {
alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
}
});
},
// 유효성 검사
valiadtion() {
if (
this.entDscsnAplyVO["entNm"] == null ||
this.entDscsnAplyVO["entNm"] == ""
) {
alert("기업명을 입력해주세요.");
this.$refs.entNm.focus();
return false;
}
if (
this.entDscsnAplyVO["aplcntNm"] == null ||
this.entDscsnAplyVO["aplcntNm"] == ""
) {
alert("성명을 입력해주세요.");
this.$refs.aplcntNm.focus();
return false;
}
if (
this.entDscsnAplyVO["telno"] == null ||
this.entDscsnAplyVO["telno"] == ""
) {
alert("연락처를 입력해주세요.");
this.$refs.telno.focus();
return false;
} else if (
this.entDscsnAplyVO["telno"].length < 7 ||
this.entDscsnAplyVO["telno"].length > 11
) {
alert("유효하지 않은 연락처입니다.");
this.$refs.telno.focus();
return false;
}
if (
this.entDscsnAplyVO["eml"] == null ||
this.entDscsnAplyVO["eml"] == ""
) {
alert("이메일을 입력해주세요.");
this.$refs.eml.focus();
return false;
}
if (!this.emlCheck(this.entDscsnAplyVO["eml"])) {
alert("유효하지 않은 이메일입니다.");
this.$refs.eml.focus();
return false;
}
if (
this.entDscsnAplyVO["aplyCn"] == null ||
this.entDscsnAplyVO["aplyCn"] == ""
) {
alert("내용을 입력해주세요.");
this.$refs.aplyCn.focus();
return false;
}
},
// 이메일 형식 검사
emlCheck(eml_address) {
let eml_regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i;
if (!eml_regex.test(eml_address)) {
return false;
} else {
return true;
}
},
},
watch: {
fileList: {
deep: true,
handler() {
this.fnFileList();
},
},
},
};
</script>