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>
<tr>
<td>
<div class="gd-12 pl0 pr0">
<label
:class="{
mb10: true,
'point-font2': pageRole == 'adm',
'point-font': pageRole == 'government',
}"
>
재무제표 첨부파일
</label>
<div class="flex">
<div class="gd-10 pl0">
<div class="filebox">
<input
class="upload-name full-input"
v-model="fileList"
placeholder="첨부파일이 없습니다."
disabled
/>
</div>
<div>
<div
v-for="(file, index) of data"
: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': true,
'blue-border-btn': pageRole == 'adm',
'green-border-btn': pageRole == 'government',
}"
>
파일찾기
</label>
<input
type="file"
id="file"
ref="file"
@change="fnFileInsert"
multiple
style="display: none"
/>
</div>
</div>
</div>
</td>
</tr>
</template>
<script>
import { mdiClose } from "@mdi/js";
export default {
props: {
data: {
type: Array,
},
pageRole: {
type: String,
default: "government",
},
},
data() {
return {
path: mdiClose,
fileList: null,
};
},
methods: {
// 파일 목록
fnFileList() {
let list = "";
this.data.map((file, index) => {
if (index != 0) {
list += ", ";
}
if (file.fileId != null) {
list += file.fileNm + "." + file.extnNm;
} else {
list += file.name;
}
});
this.fileList = list;
},
// 등록
fnFileInsert() {
const files = this.$refs.file.files;
// 파일 용량 제한
for (let file of files) {
let fileSize = file.size / 100000;
if (fileSize > 200) {
alert("파일은 개당 최대 200MB까지 등록할 수 있습니다.");
return;
}
}
for (let file of files) {
this.data.push(file);
}
this.$emit("fnFileModify", "cre", files);
this.$refs.file.value = "";
},
// 삭제
fnFileDelete(file, index) {
if (file.fileId != null) {
this.$emit("fnFileModify", "del", file);
}
this.data.splice(index, 1);
},
},
watch: {
data: {
deep: true,
handler() {
this.fnFileList();
},
},
},
};
</script>