修改上传文件使用自己实现

增加上传指示器

src/api/project.js

@@ -61,12 +61,27 @@ export async function pack(id) {
 }
 
 export async function importView(file) {
-	return await fetchApi('/api/parsePSD', {
+	const response = await fetchApi('/api/parsePSD', {
 		params: {
 			file,
 		},
 		method: 'post',
 		contentType: 'form-data',
 		errMessage: 'Failed to import view',
-	})
+	});
+	response.__originFile = file;
+	return response;
+}
+
+export async function uploadFile(file) {
+	const response = await fetchApi('/api/uploadFile', {
+		params: {
+			file,
+		},
+		method: 'post',
+		contentType: 'form-data',
+		errMessage: 'Failed to upload file',
+	});
+	response.__originFile = file;
+	return response;
 }

src/config.js

@@ -7,8 +7,8 @@ if (process.env.NODE_ENV === 'development') {
 	//API_HOST = 'http://10.10.95.74:7777';
 	//API_HOST = 'http://10.10.94.134:7777';
 	//API_HOST = 'http://localhost:3002';
-	//API_HOST = window.__data.apiHost;
-	API_HOST = '';
+	API_HOST = window.__data.apiHost;
+	//API_HOST = '';
 } else {
 	API_HOST = window.__data.apiHost;
 }
@@ -17,9 +17,6 @@ if (API_HOST[API_HOST.length - 1] === '/') {
 	API_HOST = API_HOST.substr(0, API_HOST.length - 1);
 }
 
-export const UPLOAD_FILE_URL = API_HOST + '/api/uploadFile';
-export const PARSE_BUNDLE_URL = API_HOST + '/api/parsePSD';
-
 export const SSO_VERIFY_PAGE_URL = '/sso/logout';
 
 export const DOCK_POINT_OFFSET = 4;

src/locales/en.json

@@ -16,6 +16,7 @@
 	"Import": "Import",
 	"Export": "Export",
 	"Upload": "Upload",
+	"Uploading": "Uploading",
 	"Edit": "Edit",
 	"EditEnv": "EditEnv",
 	"EditCustomModule": "EditCustomModule",
@@ -119,10 +120,12 @@
 	"Divider node desc": "Divider node, exit will be executed in sequence",
 	"Save this behavior before": "Save this behavior before?",
 	"Failed to import view": "Failed to import view",
+	"Failed to upload file": "Failed to upload file",
 	"Single view": "Single view",
 	"Multi views": "Multi views",
 	"Import single": "Import single",
 	"Import multi": "Import multi",
+	"Import view success": "Import view success",
 	"menu": {
 		"save": "Save",
 		"details": "Details",

src/locales/zh-CN.json

@@ -16,6 +16,7 @@
 	"Import": "导入",
 	"Export": "导出",
 	"Upload": "上传",
+	"Uploading": "上传中",
 	"Edit": "编辑",
 	"EditEnv": "编辑环境",
 	"EditCustomModule": "编辑自定义模块",
@@ -119,10 +120,12 @@
 	"Divider node desc": "分流节点，出口会按顺序一次执行",
 	"Save this behavior before": "是否先保存这个行为?",
 	"Failed to import view": "导入视图失败",
+	"Failed to upload file": "上传文件失败",
 	"Single view": "单视图",
 	"Multi views": "多视图",
 	"Import single": "导入单",
 	"Import multi": "导入多",
+	"Import view success": "视图导入成功",
 	"menu": {
 		"save": "保存",
 		"details": "详情",

src/store/modules/project.js

@@ -9,7 +9,8 @@ import generateUUID from "uuid/v4";
 import {getCmpProps, flattenViews, getCmpByUUID} from '../../utils/common';
 import {clonePureObj, saveAs} from "../../utils";
 import {template} from "../../template";
-import {importView} from "../../api/project";
+import {importView, uploadFile} from "../../api/project";
+import events from "@/global-events";
 
 const defaultOptions = {
 	pageTitle: 'no title',
@@ -569,10 +570,37 @@ export const projectStore = {
 				saveAs(content, `view-${view.name}.zrv`);
 			});
 		},
-
+		async uploadFiles({commit}, files) {
+			const failedList = [];
+			let ps = [];
+			for (let file of files) {
+				events.$emit('upload-indicator', true);
+				ps.push(
+					uploadFile(file).catch(e => {
+					}).finally(() => {
+						events.$emit('upload-indicator', false);
+					})
+				);
+			}
+			const result = await Promise.all(ps);
+			for (let item of result) {
+				const {url, __originFile} = item;
+				commit('addAsset', {url, file: __originFile});
+			}
+			/*for (let file of files) {
+				try {
+					const {url} = await uploadFile(file);
+					commit('addAsset', {url, file});
+				}catch (e) {
+					failedList.push(file);
+				}
+				events.$emit('upload-indicator', false);
+			}*/
+			return failedList;
+		},
 		async packProject({state}) {
 			const result = await projectApi.pack(state.id);
-			console.log(result)
+			console.log(result);
 			return result;
 		}
 	},

src/themes/light/editor.scss

@@ -25,6 +25,10 @@
 			}
 		}
 
+		.file-upload-indicator{
+			color: $--color-text-secondary;
+		}
+
 		.right-part {
 			color: $--color-text-regular;
 			line-height: 15px;

src/utils/index.js

@@ -109,11 +109,17 @@ export function readTextFile(file) {
 	})
 }
 
-export function selectFile(callback){
+export function selectFile(callback, {accept, multiple} = {}) {
 	let input = document.createElement('input');
 	input.type = 'file';
-	input.onchange = function(e){
+	input.onchange = function (e) {
 		callback(input.files);
 	};
+	if (accept) {
+		input.accept = accept;
+	}
+	if (multiple) {
+		input.multiple = true;
+	}
 	input.click();
 }

src/views/Editor/Assets.vue

@@ -23,18 +23,9 @@
 				<el-scrollbar class="assets-scrollbar" wrap-class="wrap-x-hidden"
 				              view-class="scrollbar-view">
 					<div class="file-list">
-						<el-upload
-							class="file-uploader"
-							:action="uploadFileUrl"
-							name="file"
-							:headers="uploadHeaders"
-							multiple
-							:show-file-list="false"
-							:on-success="uploadFileSuccess"
-							:on-error="uploadFileError"
-						>
+						<div class="file-uploader" @click="toUploadFile">
 							<i class="el-icon-plus file-uploader-icon"></i>
-						</el-upload>
+						</div>
 						<file-item v-for="(asset, index) in assets" :data="asset" :key="index" @show-file-details="showFileDetails"
 						           @click="onItemClick(asset)"/>
 					</div>
@@ -46,12 +37,12 @@
 </template>
 
 <script>
-	import {mapState, mapMutations} from 'vuex'
+	import {mapState, mapMutations, mapActions} from 'vuex'
 	import Pane from "../../components/Pane";
 	import FileItem from "./Assets/FileItem";
 	import AssetsShow from "./Assets/AssetsShow";
-	import {UPLOAD_FILE_URL} from "../../config";
 	import SplitPanes from 'splitpanes'
+	import {selectFile} from "../../utils";
 
 	export default {
 		name: "Assets",
@@ -66,9 +57,6 @@
 			}
 		},
 		computed: {
-			uploadFileUrl() {
-				return UPLOAD_FILE_URL;
-			},
 			...mapState({
 				assets: state => state.project.data.assets
 			}),
@@ -77,27 +65,18 @@
 			this.currentItem = null;
 		},
 		methods: {
+			toUploadFile() {
+				selectFile((files) => {
+					this.uploadFiles(files);
+				}, {multiple: true})
+			},
 			showFileDetails(file) {
 				this.$refs.assetsShow.show(file);
 			},
 			onItemClick(asset) {
 				this.currentItem = asset;
 			},
-			uploadFileSuccess(response, file) {
-				if (response.success) {
-					//console.log('upload success', response, file);
-					this.addAsset({
-						url: response.url,
-						file,
-					})
-				} else {
-					this.uploadFileError();
-				}
-			},
-			uploadFileError() {
-				console.log('upload error')
-			},
-			deleteAll(){
+			deleteAll() {
 				this.$confirm(this.$t('Are you sure to delete all assets'), this.$t('Alert'), {
 					confirmButtonText: this.$t('Confirm'),
 					cancelButtonText: this.$t('Cancel'),
@@ -108,9 +87,11 @@
 				});
 			},
 			...mapMutations([
-				'addAsset',
 				'deleteAllAssets',
 			]),
+			...mapActions([
+				'uploadFiles',
+			]),
 		}
 	}
 </script>

src/views/Editor/ToolBar.vue

 <template>
 	<div class="tool-bar">
 		<sample-menu :data="menu" @click-menu="clickMenu"/>
+		<upload-indicator/>
+		<div style="flex: 1"></div>
 		<div class="right-part">
 			<span>
 				[{{project.name}}]
@@ -13,10 +15,11 @@
 <script>
 	import {mapState, mapActions, mapMutations} from 'vuex'
 	import SampleMenu from "../../components/SampleMenu";
+	import UploadIndicator from "./ToolBar/UploadIndicator";
 
 	export default {
 		name: "ToolBar",
-		components: {SampleMenu},
+		components: {UploadIndicator, SampleMenu},
 		data() {
 			return {}
 		},
@@ -24,7 +27,7 @@
 			...mapState([
 				'project'
 			]),
-			menu: function() {
+			menu: function () {
 				const menuConfig = this.$t('menu');
 				let menu = {};
 				for (let item of Object.keys(menuConfig)) {
@@ -43,7 +46,7 @@
 			clickMenu(menuItem) {
 				this.$emit('click-menu', menuItem);
 			},
-			editProjectName(){
+			editProjectName() {
 				this.$prompt(this.$t('Input project name'), this.$t('Rename project'), {
 					inputValue: this.project.name,
 					confirmButtonText: this.$t('Confirm'),

src/views/Editor/ToolBar/UploadIndicator.vue

+<template>
+	<div v-if="counting > 0" class="file-upload-indicator">
+		{{$t('Uploading')}}({{counting}})
+		<i class="el-icon-loading"></i>
+	</div>
+</template>
+
+<script>
+	import events from "../../../global-events";
+
+	export default {
+		name: "UploadIndicator",
+		data() {
+			return {
+				counting: 0,
+			}
+		},
+		mounted() {
+			events.$on('upload-indicator', this.onUploadIndicator);
+		},
+		destroyed() {
+			events.$off('upload-indicator', this.onUploadIndicator);
+		},
+		methods: {
+			onUploadIndicator(show) {
+				this.counting += show ? 1 : -1;
+			},
+		}
+	}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/views/Editor/Views.vue

@@ -23,6 +23,7 @@
 					@node-click="handleNodeClick"
 					empty-text=""
 					:allow-drag="allowDrag"
+					:allow-drop="allowDrop"
 				>
 					<div slot-scope="{ node, data }" class="tree-node">
 						<div class="node-name">
@@ -54,8 +55,8 @@
 <script>
 	import {mapState, mapMutations, mapActions} from 'vuex';
 	import Pane from '../../components/Pane';
-	import {PARSE_BUNDLE_URL} from '../../config';
 	import {selectFile} from "../../utils";
+	import events from "../../global-events";
 
 	export default {
 		name: 'Views',
@@ -72,9 +73,6 @@
 			};
 		},
 		computed: {
-			importFileUrl() {
-				return PARSE_BUNDLE_URL;
-			},
 			...mapState({
 				views: state => state.project.data.views
 			})
@@ -83,6 +81,10 @@
 			allowDrag(draggingNode) {
 				return draggingNode.parent.parent;
 			},
+			allowDrop(draggingNode, dropNode, type) {
+				//console.log(dropNode.parent.parent, type);
+				return dropNode.parent.parent || type === 'inner';
+			},
 			/**
 			 * 点击左侧视图列表
 			 */
@@ -106,11 +108,16 @@
 					});
 			},
 			toImport(action) {
-				selectFile(files => {
-					this.importView({
+				selectFile(async files => {
+					events.$emit('upload-indicator', true);
+					try {
+						await this.importView({
 							file: files[0],
 							action,
 						});
+					} catch (e) {
+					}
+					events.$emit('upload-indicator', false);
 				})
 			},
 			onImportCommand(command) {
@@ -148,36 +155,6 @@
 						break;
 				}
 			},
-			uploadFileSuccess(response, file) {
-				if (response.success) {
-					console.log('upload success', response);
-					const {view, assets} = response.data;
-
-					switch (this.uploadAction) {
-						case 0: //单视图
-							view.name = file.name.substring(0, file.name.lastIndexOf('.'));
-							this.importView(view);
-							break;
-						case 1: //多视图
-							for (let subView of view) {
-								this.importView(subView);
-							}
-							break;
-					}
-
-					this.importAssets(assets);
-				} else {
-					this.uploadFileError();
-				}
-			},
-			uploadFileError() {
-				console.log('upload error');
-				this.$message({
-					message: this.$t('Upload view failed'),
-					type: 'error',
-					duration: 1000,
-				});
-			},
 			...mapMutations(['deleteNode', 'addNode']),
 			...mapActions(['exportView', 'importView'])
 		}

src/views/Editor/dialogs/BehaviorEditorDialog.vue

 <template>
 	<el-dialog :title="$t('Behavior Editor')" :visible.sync="visible" :before-close="beforeClose" @opened="onOpened"
-	           :fullscreen="true"
-	           :append-to-body="true" :close-on-click-modal="false" custom-class="behavior-editor-dialog">
+	           :fullscreen="true" :close-on-click-modal="false" :close-on-press-escape="false"
+	           :append-to-body="true" custom-class="behavior-editor-dialog">
 		<behavior-editor v-if="editorReady" ref="behaviorEditor" class="full-size"></behavior-editor>
 		<div slot="footer" class="dialog-footer">
 			<el-button size="mini" type="primary" @click="onSave">{{$t('Save')}}</el-button>

src/views/Home.vue

@@ -33,11 +33,11 @@
 								type="success" icon="el-icon-document-copy"
 								size="small" circle plain>
 							</el-button>
-							<el-button
+							<!--<el-button
 								@click.native.prevent="onDeleteProject(scope.row)"
 								type="danger" icon="el-icon-delete"
 								size="small" circle plain>
-							</el-button>
+							</el-button>-->
 						</template>
 					</el-table-column>
 				</el-table>

vue.config.js

 const serverHost = 'http://10.10.95.74:7777';
-//const serverHost = 'http://beacon.duibadev.com.cn';
 
 module.exports = {
   publicPath: process.env.NODE_ENV === 'production' ? '//yun.duiba.com.cn/editor/zeroing/v1/' : '',
@@ -20,7 +19,6 @@ module.exports = {
       },
       '/api': {
         target: serverHost,
-        timeout: 60 * 1000,
       },
     }
   },