Showing
5 changed files
with
168 additions
and
76 deletions
... | @@ -4,6 +4,7 @@ const XLSX = require('xlsx'); | ... | @@ -4,6 +4,7 @@ const XLSX = require('xlsx'); |
4 | var multer = require('multer'); | 4 | var multer = require('multer'); |
5 | var fs = require('fs'); | 5 | var fs = require('fs'); |
6 | var xl = require('excel4node'); | 6 | var xl = require('excel4node'); |
7 | +const path = require('path'); | ||
7 | // var pool = require('./../routes/modules/database'); | 8 | // var pool = require('./../routes/modules/database'); |
8 | 9 | ||
9 | //파일 저장위치와 파일이름 설정 | 10 | //파일 저장위치와 파일이름 설정 | ... | ... |
... | @@ -70,7 +70,6 @@ function deleteFile(fileData) { | ... | @@ -70,7 +70,6 @@ function deleteFile(fileData) { |
70 | }, | 70 | }, |
71 | }); | 71 | }); |
72 | } | 72 | } |
73 | - | ||
74 | function downloadFile(fileData) { | 73 | function downloadFile(fileData) { |
75 | return axios.get(`/api/file/download/${fileData.fileName}`, { | 74 | return axios.get(`/api/file/download/${fileData.fileName}`, { |
76 | params: { | 75 | params: { |
... | @@ -158,6 +157,26 @@ function tdelAll(userId) { | ... | @@ -158,6 +157,26 @@ function tdelAll(userId) { |
158 | }, | 157 | }, |
159 | }); | 158 | }); |
160 | } | 159 | } |
160 | +function uploadContact(contactData){ | ||
161 | + return axios.post('/api/contact/contact_upload', contactData.file,{ | ||
162 | + headers: { | ||
163 | + 'Content-Type': 'multipart/form-data', | ||
164 | + }, | ||
165 | + params:{ | ||
166 | + id: contactData.id, | ||
167 | + } | ||
168 | + }); | ||
169 | +} | ||
170 | +function downloadContact(userID){ | ||
171 | + return axios.post('/api/contact/contact_download', null, {params:{id:userID}}); | ||
172 | +} | ||
173 | +function printContact(userID){ | ||
174 | + console.log(String(userID)); | ||
175 | + return axios.post('api/contact/contact_list', {id:userID}, {params:{id:userID},}); | ||
176 | +} | ||
177 | +function deleteContact(userID){ | ||
178 | + return axios.post('api/contact/contact_delete', {id:userID}, {params:{id:userID}}); | ||
179 | +} | ||
161 | 180 | ||
162 | export { | 181 | export { |
163 | registerUser, | 182 | registerUser, |
... | @@ -184,4 +203,8 @@ export { | ... | @@ -184,4 +203,8 @@ export { |
184 | tdelFile, | 203 | tdelFile, |
185 | tdelAll, | 204 | tdelAll, |
186 | showTrashcan, | 205 | showTrashcan, |
206 | + uploadContact, | ||
207 | + downloadContact, | ||
208 | + printContact, | ||
209 | + deleteContact | ||
187 | }; | 210 | }; | ... | ... |
... | @@ -285,12 +285,14 @@ | ... | @@ -285,12 +285,14 @@ |
285 | </v-list-item> | 285 | </v-list-item> |
286 | </v-list> | 286 | </v-list> |
287 | </v-menu> | 287 | </v-menu> |
288 | + <div v-cloak @drop.prevnet="addFile" @dragover.prevent> | ||
288 | <input | 289 | <input |
289 | id="file-selector" | 290 | id="file-selector" |
290 | ref="uploadedfile" | 291 | ref="uploadedfile" |
291 | type="file" | 292 | type="file" |
292 | v-on:change="handleFileUpload()" | 293 | v-on:change="handleFileUpload()" |
293 | /> | 294 | /> |
295 | + </div> | ||
294 | <br /> | 296 | <br /> |
295 | <v-btn @click="upload_file"><v-icon>fas fa-upload</v-icon></v-btn> | 297 | <v-btn @click="upload_file"><v-icon>fas fa-upload</v-icon></v-btn> |
296 | <v-btn bottom color="blue" dark fab fixed right @click="dialog = !dialog"> | 298 | <v-btn bottom color="blue" dark fab fixed right @click="dialog = !dialog"> |
... | @@ -404,6 +406,11 @@ export default { | ... | @@ -404,6 +406,11 @@ export default { |
404 | $route: 'fetchData', | 406 | $route: 'fetchData', |
405 | }, | 407 | }, |
406 | methods: { | 408 | methods: { |
409 | + addFile(event){ | ||
410 | + let droppedFiles = event.dataTransfer.files; | ||
411 | + if(!droppedFiles) return; | ||
412 | + console.log(droppedFiles); | ||
413 | + }, | ||
407 | async fetchData() { | 414 | async fetchData() { |
408 | try { | 415 | try { |
409 | const curData = { | 416 | const curData = { | ... | ... |
1 | -<template> | 1 | +<template lang="html"> |
2 | - <v-container fluid> | 2 | + <v-flex> |
3 | - <v-card-title> | 3 | + <h1>연락처</h1> |
4 | - 연락처 | ||
5 | - <v-spacer></v-spacer> | ||
6 | <v-text-field | 4 | <v-text-field |
7 | v-model="search" | 5 | v-model="search" |
8 | append-icon="mdi-magnify" | 6 | append-icon="mdi-magnify" |
9 | - label="연락처 검색" | 7 | + label="Search" |
10 | single-line | 8 | single-line |
11 | hide-details | 9 | hide-details |
12 | ></v-text-field> | 10 | ></v-text-field> |
13 | - </v-card-title> | 11 | +<!-- |
12 | + <v-simple-table> | ||
13 | + <template v-slot:default> | ||
14 | + <thead> | ||
15 | + <tr> | ||
16 | + <th class="text-left">Name</th> | ||
17 | + <th class="text-left">Phone</th> | ||
18 | + <th class="text-left">Email</th> | ||
19 | + </tr> | ||
20 | + </thead> | ||
21 | + <tbody> | ||
22 | + <tr v-for="item in contact_list" :key="item.name"> | ||
23 | + <td>{{ item.name }}</td> | ||
24 | + <td>{{ item.phone}}</td> | ||
25 | + <td>{{ item.email }}</td> | ||
26 | + </tr> | ||
27 | + </tbody> | ||
28 | + </template> | ||
29 | + </v-simple-table> | ||
30 | +--> | ||
14 | <v-data-table | 31 | <v-data-table |
15 | :headers="headers" | 32 | :headers="headers" |
16 | - :items="desserts" | 33 | + :items="contact_list" |
17 | - :items-per-page="10" | 34 | + :search="search" |
18 | - class="elevation-1" | 35 | + > |
19 | - ></v-data-table> | 36 | + </v-data-table> |
20 | - </v-container> | 37 | + <v-divider></v-divider> |
38 | + <div v-cloak @drop.prevnet="addContact" @dragover.prevent> | ||
39 | + <input | ||
40 | + id="file-selector" | ||
41 | + ref="uploadedfile" | ||
42 | + type="file" | ||
43 | + v-on:change="handleFileUpload()" | ||
44 | + /> | ||
45 | + </div> | ||
46 | + <br /> | ||
47 | + <v-btn color="blue" @click="upload_contact">upload</v-btn> | ||
48 | + <v-btn color="green" @click = "download_contact">download</v-btn> | ||
49 | + <v-btn color="gray" @click = "delete_contact">delete</v-btn> | ||
50 | + </v-flex> | ||
21 | </template> | 51 | </template> |
22 | 52 | ||
23 | <script> | 53 | <script> |
54 | + import { uploadContact, downloadContact, printContact, deleteContact } from '../api/index'; | ||
55 | + import Axios from 'axios'; | ||
24 | export default { | 56 | export default { |
25 | - data () { | 57 | + data() { |
26 | return { | 58 | return { |
27 | - headers: [ | 59 | + search:'', |
60 | + headers:[ | ||
28 | { | 61 | { |
29 | text: 'Name', | 62 | text: 'Name', |
30 | align: 'start', | 63 | align: 'start', |
31 | sortable: false, | 64 | sortable: false, |
32 | - value: 'name', | 65 | + value: 'name' |
33 | }, | 66 | }, |
34 | - { text: 'Phone', value: 'Phone' }, | 67 | + {text: 'phone', value:'email'}, |
35 | - { text: 'E-mail', value: 'Email' }, | 68 | + {text:'email', value:'phone'} |
36 | - { text: 'Added date', value: 'date' } | ||
37 | ], | 69 | ], |
38 | - desserts: [ | 70 | + contact_list : [], |
39 | - { | 71 | + contact_file : null |
40 | - name: 'Frozen Yogurt', | 72 | + } |
41 | - Phone: '010-1111-1111', | ||
42 | - Email: 'asdf@asdf.com', | ||
43 | - date: '2020-05-18' | ||
44 | - }, | ||
45 | - { | ||
46 | - name: 'Ice cream sandwich', | ||
47 | - Phone: '010-1111-1111', | ||
48 | - Email: 'asdf@asdf.com', | ||
49 | - date: '2020-05-18' | ||
50 | - }, | ||
51 | - { | ||
52 | - name: 'Eclair', | ||
53 | - Phone: '010-1111-1111', | ||
54 | - Email: 'asdf@asdf.com', | ||
55 | - date: '2020-05-18' | ||
56 | - }, | ||
57 | - { | ||
58 | - name: 'Cupcake', | ||
59 | - Phone: '010-1111-1111', | ||
60 | - Email: 'asdf@asdf.com', | ||
61 | - date: '2020-05-18' | ||
62 | - }, | ||
63 | - { | ||
64 | - name: 'Gingerbread', | ||
65 | - Phone: '010-1111-1111', | ||
66 | - Email: 'asdf@asdf.com', | ||
67 | - date: '2020-05-18' | ||
68 | }, | 73 | }, |
69 | - { | 74 | + async created(){ |
70 | - name: 'Jelly bean', | 75 | + try { |
71 | - Phone: '010-1111-1111', | 76 | + const curData = { |
72 | - Email: 'asdf@asdf.com', | 77 | + id : this.$store.state.id, |
73 | - date: '2020-05-18' | 78 | + } |
79 | + const list_reponse = await printContact(curData.id); | ||
80 | + this.$store.commit('setContactList', list_reponse.data.contact_list); | ||
81 | + this.contact_list = this.$store.getters.contact; | ||
82 | + console.log(list_reponse); | ||
83 | + } catch (error) { | ||
84 | + console.log("에러"); | ||
85 | + console.log(error); | ||
86 | + } | ||
74 | }, | 87 | }, |
75 | - { | 88 | + methods:{ |
76 | - name: 'Lollipop', | 89 | + handleFileUpload() { |
77 | - Phone: '010-1111-1111', | 90 | + this.contact_file = this.$refs.uploadedfile.files[0]; |
78 | - Email: 'asdf@asdf.com', | 91 | + console.log(this.contact_file); |
79 | - date: '2020-05-18' | ||
80 | }, | 92 | }, |
81 | - { | 93 | + addContact(event){ |
82 | - name: 'Honeycomb', | 94 | + let droppedFiles = event.dataTransfer.files; |
83 | - Phone: '010-1111-1111', | 95 | + if(!droppedFiles) return; |
84 | - Email: 'asdf@asdf.com', | 96 | + console.log(droppedFiles); |
85 | - date: '2020-05-18' | ||
86 | }, | 97 | }, |
87 | - { | 98 | + async upload_contact(){ |
88 | - name: 'Donut', | 99 | + try { |
89 | - Phone: '010-1111-1111', | 100 | + const formData = new FormData(); |
90 | - Email: 'asdf@asdf.com', | 101 | + formData.append('file', this.contact_file); |
91 | - date: '2020-05-18' | 102 | + const currentData = { |
92 | - }, | 103 | + id: this.$store.state.id |
93 | - { | 104 | + }; |
94 | - name: 'KitKat', | 105 | + const fileData = { |
95 | - Phone: '010-1111-1111', | 106 | + id: this.$store.state.id, |
96 | - Email: 'asdf@asdf.com', | 107 | + file: formData |
97 | - date: '2020-05-18' | 108 | + } |
109 | + console.log(fileData); | ||
110 | + const response = await uploadContact(fileData); | ||
111 | + const contact_response = await printContact(currentData.id); | ||
112 | + console.log(contact_response); | ||
113 | + this.$store.commit('setContactList', contact_response.data.contact_list); | ||
114 | + console.log(this.$store.getters.contact); | ||
115 | + this.contact_list = this.$store.getters.contact; | ||
116 | + } catch (error) { | ||
117 | + console.log('에러'); | ||
118 | + console.log(error); | ||
119 | + } | ||
98 | }, | 120 | }, |
99 | - ], | 121 | + async download_contact(){ |
122 | + try{ | ||
123 | + const curData= { | ||
124 | + id: this.$store.state.id | ||
125 | + }; | ||
126 | + console.log(curData); | ||
127 | + const response = await downloadContact(curData.id); | ||
128 | + console.log(response); | ||
129 | + }catch(error){ | ||
130 | + console.log('에러'); | ||
131 | + console.log(error); | ||
100 | } | 132 | } |
101 | }, | 133 | }, |
134 | + async delete_contact(){ | ||
135 | + try{ | ||
136 | + const curData = { | ||
137 | + id: this.$store.state.id | ||
138 | + }; | ||
139 | + const response_d = await deleteContact(curData.id); | ||
140 | + | ||
141 | + const contact_response = await printContact(curData.id); | ||
142 | + | ||
143 | + this.$store.commit('setContactList', contact_response.data.contact_list); | ||
144 | + | ||
145 | + this.contact_list = this.$store.getters.contact; | ||
146 | + }catch(error){ | ||
147 | + console.log('에러'); | ||
148 | + console.log(error); | ||
149 | + } | ||
150 | + } | ||
151 | + | ||
152 | + } | ||
102 | } | 153 | } |
103 | </script> | 154 | </script> |
155 | + | ||
156 | +<style lang="css" scoped> | ||
157 | +</style> | ... | ... |
... | @@ -15,6 +15,7 @@ export default new Vuex.Store({ | ... | @@ -15,6 +15,7 @@ export default new Vuex.Store({ |
15 | favFileList: [], | 15 | favFileList: [], |
16 | trashFolderList: [], | 16 | trashFolderList: [], |
17 | trashFileList: [], | 17 | trashFileList: [], |
18 | + contactList:[] | ||
18 | }, | 19 | }, |
19 | mutations: { | 20 | mutations: { |
20 | setId(state, userid) { | 21 | setId(state, userid) { |
... | @@ -50,6 +51,9 @@ export default new Vuex.Store({ | ... | @@ -50,6 +51,9 @@ export default new Vuex.Store({ |
50 | settrashFileList(state, tflist) { | 51 | settrashFileList(state, tflist) { |
51 | state.trashFileList = tflist; | 52 | state.trashFileList = tflist; |
52 | }, | 53 | }, |
54 | + setContactList(state, list){ | ||
55 | + state.contactList = list; | ||
56 | + } | ||
53 | }, | 57 | }, |
54 | getters: { | 58 | getters: { |
55 | isLogin(state) { | 59 | isLogin(state) { |
... | @@ -88,5 +92,8 @@ export default new Vuex.Store({ | ... | @@ -88,5 +92,8 @@ export default new Vuex.Store({ |
88 | trashFileL(state) { | 92 | trashFileL(state) { |
89 | return state.trashFileList; | 93 | return state.trashFileList; |
90 | }, | 94 | }, |
95 | + contact(state){ | ||
96 | + return state.contactList; | ||
97 | + } | ||
91 | }, | 98 | }, |
92 | }); | 99 | }); | ... | ... |
-
Please register or login to post a comment