2020-1-CloudComputing / D_Team_Khuloud

Go to a project
Toggle navigation Toggle navigation pinning
박기범
6dd81712 1 parent 958014d3

merge contact

Inline Side-by-side
Showing 5 changed files with 179 additions and 87 deletions
......@@ -4,6 +4,7 @@ const XLSX = require('xlsx');
var multer = require('multer');
var fs = require('fs');
var xl = require('excel4node');
const path = require('path');
// var pool = require('./../routes/modules/database');
//파일 저장위치와 파일이름 설정
......
......@@ -70,7 +70,6 @@ function deleteFile(fileData) {
},
});
}
function downloadFile(fileData) {
return axios.get(`/api/file/download/${fileData.fileName}`, {
params: {
......@@ -158,6 +157,26 @@ function tdelAll(userId) {
},
});
}
function uploadContact(contactData){
return axios.post('/api/contact/contact_upload', contactData.file,{
headers: {
'Content-Type': 'multipart/form-data',
},
params:{
id: contactData.id,
}
});
}
function downloadContact(userID){
return axios.post('/api/contact/contact_download', null, {params:{id:userID}});
}
function printContact(userID){
console.log(String(userID));
return axios.post('api/contact/contact_list', {id:userID}, {params:{id:userID},});
}
function deleteContact(userID){
return axios.post('api/contact/contact_delete', {id:userID}, {params:{id:userID}});
}
export {
registerUser,
......@@ -184,4 +203,8 @@ export {
tdelFile,
tdelAll,
showTrashcan,
uploadContact,
downloadContact,
printContact,
deleteContact
};
......
......@@ -285,12 +285,14 @@
</v-list-item>
</v-list>
</v-menu>
<input
id="file-selector"
ref="uploadedfile"
type="file"
v-on:change="handleFileUpload()"
/>
<div v-cloak @drop.prevnet="addFile" @dragover.prevent>
<input
id="file-selector"
ref="uploadedfile"
type="file"
v-on:change="handleFileUpload()"
/>
</div>
<br />
<v-btn @click="upload_file"><v-icon>fas fa-upload</v-icon></v-btn>
<v-btn bottom color="blue" dark fab fixed right @click="dialog = !dialog">
......@@ -404,6 +406,11 @@ export default {
$route: 'fetchData',
},
methods: {
addFile(event){
let droppedFiles = event.dataTransfer.files;
if(!droppedFiles) return;
console.log(droppedFiles);
},
async fetchData() {
try {
const curData = {
......
<template>
<v-container fluid>
<v-card-title>
연락처
<v-spacer></v-spacer>
<template lang="html">
<v-flex>
<h1>연락처</h1>
<v-text-field
v-model="search"
append-icon="mdi-magnify"
label="연락처 검색"
label="Search"
single-line
hide-details
></v-text-field>
</v-card-title>
<!--
<v-simple-table>
<template v-slot:default>
<thead>
<tr>
<th class="text-left">Name</th>
<th class="text-left">Phone</th>
<th class="text-left">Email</th>
</tr>
</thead>
<tbody>
<tr v-for="item in contact_list" :key="item.name">
<td>{{ item.name }}</td>
<td>{{ item.phone}}</td>
<td>{{ item.email }}</td>
</tr>
</tbody>
</template>
</v-simple-table>
-->
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="10"
class="elevation-1"
></v-data-table>
</v-container>
:items="contact_list"
:search="search"
>
</v-data-table>
<v-divider></v-divider>
<div v-cloak @drop.prevnet="addContact" @dragover.prevent>
<input
id="file-selector"
ref="uploadedfile"
type="file"
v-on:change="handleFileUpload()"
/>
</div>
<br />
<v-btn color="blue" @click="upload_contact">upload</v-btn>
<v-btn color="green" @click = "download_contact">download</v-btn>
<v-btn color="gray" @click = "delete_contact">delete</v-btn>
</v-flex>
</template>
<script>
import { uploadContact, downloadContact, printContact, deleteContact } from '../api/index';
import Axios from 'axios';
export default {
data () {
data() {
return {
headers: [
search:'',
headers:[
{
text: 'Name',
align: 'start',
sortable: false,
value: 'name',
},
{ text: 'Phone', value: 'Phone' },
{ text: 'E-mail', value: 'Email' },
{ text: 'Added date', value: 'date' }
],
desserts: [
{
name: 'Frozen Yogurt',
Phone: '010-1111-1111',
Email: 'asdf@asdf.com',
date: '2020-05-18'
},
{
name: 'Ice cream sandwich',
Phone: '010-1111-1111',
Email: 'asdf@asdf.com',
date: '2020-05-18'
},
{
name: 'Eclair',
Phone: '010-1111-1111',
Email: 'asdf@asdf.com',
date: '2020-05-18'
},
{
name: 'Cupcake',
Phone: '010-1111-1111',
Email: 'asdf@asdf.com',
date: '2020-05-18'
},
{
name: 'Gingerbread',
Phone: '010-1111-1111',
Email: 'asdf@asdf.com',
date: '2020-05-18'
},
{
name: 'Jelly bean',
Phone: '010-1111-1111',
Email: 'asdf@asdf.com',
date: '2020-05-18'
},
{
name: 'Lollipop',
Phone: '010-1111-1111',
Email: 'asdf@asdf.com',
date: '2020-05-18'
},
{
name: 'Honeycomb',
Phone: '010-1111-1111',
Email: 'asdf@asdf.com',
date: '2020-05-18'
},
{
name: 'Donut',
Phone: '010-1111-1111',
Email: 'asdf@asdf.com',
date: '2020-05-18'
},
{
name: 'KitKat',
Phone: '010-1111-1111',
Email: 'asdf@asdf.com',
date: '2020-05-18'
value: 'name'
},
{text: 'phone', value:'email'},
{text:'email', value:'phone'}
],
contact_list : [],
contact_file : null
}
},
async created(){
try {
const curData = {
id : this.$store.state.id,
}
const list_reponse = await printContact(curData.id);
this.$store.commit('setContactList', list_reponse.data.contact_list);
this.contact_list = this.$store.getters.contact;
console.log(list_reponse);
} catch (error) {
console.log("에러");
console.log(error);
}
},
methods:{
handleFileUpload() {
this.contact_file = this.$refs.uploadedfile.files[0];
console.log(this.contact_file);
},
addContact(event){
let droppedFiles = event.dataTransfer.files;
if(!droppedFiles) return;
console.log(droppedFiles);
},
async upload_contact(){
try {
const formData = new FormData();
formData.append('file', this.contact_file);
const currentData = {
id: this.$store.state.id
};
const fileData = {
id: this.$store.state.id,
file: formData
}
console.log(fileData);
const response = await uploadContact(fileData);
const contact_response = await printContact(currentData.id);
console.log(contact_response);
this.$store.commit('setContactList', contact_response.data.contact_list);
console.log(this.$store.getters.contact);
this.contact_list = this.$store.getters.contact;
} catch (error) {
console.log('에러');
console.log(error);
}
},
async download_contact(){
try{
const curData= {
id: this.$store.state.id
};
console.log(curData);
const response = await downloadContact(curData.id);
console.log(response);
}catch(error){
console.log('에러');
console.log(error);
}
},
async delete_contact(){
try{
const curData = {
id: this.$store.state.id
};
const response_d = await deleteContact(curData.id);
const contact_response = await printContact(curData.id);
this.$store.commit('setContactList', contact_response.data.contact_list);
this.contact_list = this.$store.getters.contact;
}catch(error){
console.log('에러');
console.log(error);
}
}
}
}
</script>
<style lang="css" scoped>
</style>
......
......@@ -15,6 +15,7 @@ export default new Vuex.Store({
favFileList: [],
trashFolderList: [],
trashFileList: [],
contactList:[]
},
mutations: {
setId(state, userid) {
......@@ -50,6 +51,9 @@ export default new Vuex.Store({
settrashFileList(state, tflist) {
state.trashFileList = tflist;
},
setContactList(state, list){
state.contactList = list;
}
},
getters: {
isLogin(state) {
......@@ -88,5 +92,8 @@ export default new Vuex.Store({
trashFileL(state) {
return state.trashFileList;
},
contact(state){
return state.contactList;
}
},
});
......