drag&drop

src/renderer/darg.js

@@ -0,0 +1,60 @@
+import fs from 'fs'
+export default {
+    mounted() {
+        this.disableDragEvent()
+    },
+    methods: {
+        disableDragEvent() {
+            window.addEventListener('dragenter', this.dragenterEvent, false)
+            window.addEventListener('dragover', this.dragoverEvent)
+            window.addEventListener('drop', this.dropEvent)
+        },
+        dragenterEvent(e) {
+            if (this.disableDrag(e)) {
+            }
+        },
+        dragoverEvent(e) {
+            if (this.disableDrag(e)) {
+                for (let f of e.dataTransfer.files) {
+                    console.log('File(s) you dragged here: ', f.path)
+                }
+            }
+        },
+        dropEvent(e) {
+
+            if (this.disableDrag(e)) {
+                var file = event.dataTransfer.files[0];
+                let info = fs.statSync(file.path)
+                if (info.isDirectory()) {
+                    this.$store.commit('updateDragFile', file.path)
+                }
+                else {
+                    this.$message.warning('只能将文件夹拖拽进来');
+                }
+
+                return false;
+            }
+        },
+        disableDrag(e) {
+            const dropzone = document.getElementById('upload-area') // 这个是可拖拽的上传区
+
+            if (dropzone === null || !dropzone.contains(e.target)) {
+                e.preventDefault()
+                e.dataTransfer.effectAllowed = 'none'
+                e.dataTransfer.dropEffect = 'none'
+                return false
+            }
+            else {
+                e.preventDefault()
+                e.dataTransfer.effectAllowed = 'copyLink'
+                e.dataTransfer.dropEffect = 'move'
+                return true
+            }
+        }
+    },
+    beforeDestroy() {
+        window.removeEventListener('dragenter', this.disableDrag, false)
+        window.removeEventListener('dragover', this.disableDrag)
+        window.removeEventListener('drop', this.disableDrag)
+    }
+}

src/renderer/main.js

@@ -16,7 +16,7 @@ import zh from 'date-fns/locale/zh_cn'
 import OrderTransfer from './components/OrderTransfer'
 import ProgressBar from './components/ProgressBar'
 import SingleUploadFile from './components/SingleUploadFile'
-import FileUploadService from '../service/FileUploadService'
+import darg from './darg'
 
 if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
 Vue.http = Vue.prototype.$http = axios
@@ -32,6 +32,8 @@ Vue.use(OrderTransfer);
 Vue.use(ProgressBar);
 Vue.component('single-upload-file', SingleUploadFile);
 
+Vue.mixin(darg);
+
 
 // let checkpoint;
 

src/renderer/pages/Booking/OrderBookingStep2.vue

@@ -13,7 +13,7 @@
             </el-form-item>
             <template v-if="!path">
                 <el-form-item label="上传文件">
-                    <div class="upload" @click="openDialog" id='upload'>
+                    <div class="upload" @click="openDialog" id='upload-area'>
                         <i class="el-icon-upload"></i>
                         <div class="title">
                             将
@@ -38,7 +38,7 @@
             <template v-else>
                 <el-form-item label="上传文件">
                     <div>
-                        <el-button type="primary" plain @click="openDialog">重新选择文件夹</el-button>
+                        <el-button type="primary" plain @click="openDialog" id='upload-area'>重新选择文件夹</el-button>
                         <div class="tip" style="margin:6px 0 14px;">选择文件夹后，若对其中文件进行了增删操作，请重新选择一次，系统会自动覆盖之前文件夹</div>
                         <order-show ref='orderShow' :clientOrder='clientOrder' @openFileHandler='openFileHandler(filesInfo.localPath)' @changeList='changeList'></order-show>
 
@@ -111,7 +111,7 @@ export default {
         }
     },
     computed: {
-        ...mapState(['userInfo']),
+        ...mapState(['userInfo', 'dragFile']),
         storeInfo() {
             return this.goodsInfo.storeInfo || {}
         },
@@ -168,6 +168,12 @@ export default {
             return num;
         }
     },
+    watch: {
+        dragFile() {
+            console.log(this.dragFile)
+            this.getPath(this.dragFile)
+        },
+    },
     mounted() {
         // this.$router.replace({
         //     name: 'orderBookingStep3',
@@ -194,9 +200,6 @@ export default {
         // },1000)
     },
     methods: {
-        dragstartEvent() {
-
-        },
         changeList(list) {
             this.clientOrder.userOrderList = list
             var num = 0;
@@ -211,7 +214,7 @@ export default {
             let files = [];
             var hasDirectory = false;
             fs.readdirSync(dir).forEach(child => {
-                if(child.substr(0, 1) =='.'){
+                if (child.substr(0, 1) == '.') {
                     return
                 }
                 let info = fs.statSync(path.resolve(dir, child))
@@ -262,29 +265,33 @@ export default {
 
         },
         openDialog() {
-            this.oneOrder = false
             let paths = this.$electron.remote.dialog.showOpenDialog({ properties: ['openDirectory'] })
             if (paths && paths.length) {
-                this.path = paths[0]
-                this.filesInfo = {
-                    name: this.getPathName(this.path),
-                    typeFlag: 1,
-                    localPath: this.path,
-                    fullname: this.getPathName(this.path),
-                    children: this.readDir(paths[0], true)
-                }
-                this.clientOrder = {
-                    userId: this.userInfo.id,
-                    storeId: this.storeInfo.id,
-                    productId: this.goodsInfo.id,
-                    orderName: this.getPathName(this.path),
-                    quantity: this.getPhotoNum(this.filesInfo),
-                    userOrderList: this.getOrderLiet(this.filesInfo),
-                    albumQuantity: 0
-                }
+                var path = paths[0]
+                this.getPath(path)
 
             }
         },
+        getPath(path) {
+            this.oneOrder = false
+            this.path = path
+            this.filesInfo = {
+                name: this.getPathName(this.path),
+                typeFlag: 1,
+                localPath: this.path,
+                fullname: this.getPathName(this.path),
+                children: this.readDir(path, true)
+            }
+            this.clientOrder = {
+                userId: this.userInfo.id,
+                storeId: this.storeInfo.id,
+                productId: this.goodsInfo.id,
+                orderName: this.getPathName(this.path),
+                quantity: this.getPhotoNum(this.filesInfo),
+                userOrderList: this.getOrderLiet(this.filesInfo),
+                albumQuantity: 0
+            }
+        },
         getOrderLiet(fileInfo) {
             var list = []
             if (this.oneOrder) {

src/renderer/store/index.js

@@ -4,34 +4,38 @@ import Vuex from 'vuex'
 Vue.use(Vuex);
 
 export default new Vuex.Store({
-  state: {
-    userInfo: null,
-    mainHeight: 0,
-    mainWidth:0,
-    MsgCode: {
-      '身份验证': 'SMS_144435052',
-      '登录确认': 'SMS_144435051',
-      '登录异常': 'SMS_144435050',
-      '用户注册': 'SMS_144435049',
-      '修改密码': 'SMS_144435049',
-      '信息变更': 'SMS_144435049'
+    state: {
+        userInfo: null,
+        mainHeight: 0,
+        mainWidth: 0,
+        MsgCode: {
+            '身份验证': 'SMS_144435052',
+            '登录确认': 'SMS_144435051',
+            '登录异常': 'SMS_144435050',
+            '用户注册': 'SMS_144435049',
+            '修改密码': 'SMS_144435049',
+            '信息变更': 'SMS_144435049'
+        },
+        allWidth: 0,
+        allHeight: 0,
+        isFull: false,
+        dragFile: ''
     },
-    allWidth: 0,
-    allHeight: 0,
-    isFull: false
-  },
-  mutations: {
-    updateUserInfo(state, userInfo) {
-      state.userInfo = userInfo
-    },
-    updatemainHeight(state, info) {
-      state.mainHeight = info.height
-      state.allWidth = info.allWidth
-      state.allHeight = info.allHeight
-      state.mainWidth=info.width
-    },
-    updateIsFull(state, isFull) {
-      state.isFull = isFull
+    mutations: {
+        updateDragFile(state, dragFile) {
+            state.dragFile = dragFile
+        },
+        updateUserInfo(state, userInfo) {
+            state.userInfo = userInfo
+        },
+        updatemainHeight(state, info) {
+            state.mainHeight = info.height
+            state.allWidth = info.allWidth
+            state.allHeight = info.allHeight
+            state.mainWidth = info.width
+        },
+        updateIsFull(state, isFull) {
+            state.isFull = isFull
+        }
     }
-  }
 })