cloud-web-corejs 1.0.281 → 1.1.0-dev.5

package/src/components/VabUpload/index.vue

@@ -14,9 +14,17 @@
     >
       <div class="upload-box" style="margin-left:-20px;margin-right:-20px;">
         <div class="upload-b_left" @click="choosePasteArea" :class="{on:pasteAreaStatus}"
-             v-show="option.hidePasteArea!==true">
+             v-show="option.hidePasteArea!==true"
+             @dragenter="handlePasteAreaDragEnter"
+             @dragover="handlePasteAreaDragOver"
+             @dragleave="handlePasteAreaDragLeave"
+             @drop="handlePasteAreaDrop">
           <div class="t"><i
-            class="el-icon-warning-outline"></i>{{ $t2('选择此处，可粘贴文件', 'components.VabUpload.tip') }}（Ctrl+V）
+            class="el-icon-warning-outline"></i>{{ $t2('选择此处，可粘贴文件', 'components.VabUpload.tip') }}（Ctrl+V）{{ $t1('，或将文件拖拽到此处') }}
+          </div>
+          <div class="drag-mask" v-show="pasteAreaDragging">
+            <i class="el-icon-upload"></i>
+            <p>{{ $t1('松开鼠标，添加文件') }}</p>
           </div>
           <ul class="el-upload-list el-upload-list--picture">
             <div class="nodata" v-if="pasteList.length == 0">
@@ -239,4 +247,38 @@ export default {
 .showPasteArea {
   margin-left:291px
 }
+
+/* 左侧粘贴区支持拖拽文件，拖拽时铺一层提示遮罩(pointer-events:none 保证拖拽事件仍落到容器上) */
+.upload-b_left {
+  position: relative;
+
+  .drag-mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 2;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 4px;
+    border: dashed 2px $--color-primary;
+    border-radius: 9px;
+    background: rgba(255, 255, 255, 0.88);
+    color: $--color-primary;
+    pointer-events: none;
+
+    i {
+      font-size: 46px;
+      margin-bottom: 8px;
+    }
+
+    p {
+      margin: 0;
+      font-size: 12px;
+    }
+  }
+}
 </style>

package/src/components/VabUpload/mixins.js

@@ -114,6 +114,8 @@ tmixins = {
       showPrivateProfileDialog: false,
       pasteList: [],
       pasteAreaStatus: false,
+      pasteAreaDragging: false,
+      pasteAreaDragDepth: 0,
       option: {},
       editFileIndex: -1,
       showFileNameDialog: false,
@@ -380,6 +382,8 @@ tmixins = {
       this.clearFileInfo();
       this.initPickUploadMode();
       this.pasteAreaStatus = false;
+      this.pasteAreaDragging = false;
+      this.pasteAreaDragDepth = 0;
       this.dialogFormVisible = true;
       /*document.removeEventListener('paste', this.pasteEvent);
       document.addEventListener('paste', this.pasteEvent);*/
@@ -1212,27 +1216,93 @@ tmixins = {
       if (!(e.clipboardData && e.clipboardData.items)) {
         return;
       }
-      let files = Array.from(e.clipboardData.files);
+      this.appendPasteFiles(Array.from(e.clipboardData.files));
+    },
+    /* 追加原始文件到左侧待确认列表(粘贴、拖拽共用) */
+    appendPasteFiles(files) {
+      if (!files || !files.length) {
+        return;
+      }
       let getFileSuffix = this.$commonFileUtil.getFileSuffix;
-      if (files.length) {
-        let fileList = files.map((rawFile) => {
-          let name = rawFile.name;
-          let index = name.lastIndexOf(".");
-          let fileSuffix = getFileSuffix(name);
-          let fileName =
-            index >= 0 ? name.substring(0, index).toString() : name.toString();
-          let file = {
-            name: rawFile.name,
-            size: rawFile.size,
-            raw: rawFile,
-            showUrl: URL.createObjectURL(rawFile),
-            fileName: fileName,
-            fileSuffix: fileSuffix,
-          };
-          return file;
+      let fileList = files.map((rawFile) => {
+        let name = rawFile.name;
+        let index = name.lastIndexOf(".");
+        let fileSuffix = getFileSuffix(name);
+        let fileName =
+          index >= 0 ? name.substring(0, index).toString() : name.toString();
+        let file = {
+          name: rawFile.name,
+          size: rawFile.size,
+          raw: rawFile,
+          showUrl: URL.createObjectURL(rawFile),
+          fileName: fileName,
+          fileSuffix: fileSuffix,
+        };
+        return file;
+      });
+      this.pasteList.push(...fileList);
+    },
+    isFileDragEvent(e) {
+      let dataTransfer = e.dataTransfer;
+      if (!dataTransfer || !dataTransfer.types) return false;
+      return Array.prototype.indexOf.call(dataTransfer.types, "Files") >= 0;
+    },
+    handlePasteAreaDragEnter(e) {
+      if (!this.isFileDragEvent(e)) return;
+      e.preventDefault();
+      e.stopPropagation();
+      this.pasteAreaDragDepth++;
+      this.pasteAreaDragging = true;
+    },
+    handlePasteAreaDragOver(e) {
+      if (!this.isFileDragEvent(e)) return;
+      e.preventDefault();
+      e.stopPropagation();
+      e.dataTransfer.dropEffect = "copy";
+      this.pasteAreaDragging = true;
+    },
+    handlePasteAreaDragLeave(e) {
+      if (!this.isFileDragEvent(e)) return;
+      e.preventDefault();
+      e.stopPropagation();
+      this.pasteAreaDragDepth--;
+      if (this.pasteAreaDragDepth <= 0) {
+        this.pasteAreaDragDepth = 0;
+        this.pasteAreaDragging = false;
+      }
+    },
+    handlePasteAreaDrop(e) {
+      this.pasteAreaDragDepth = 0;
+      this.pasteAreaDragging = false;
+      if (!this.isFileDragEvent(e)) return;
+      e.preventDefault();
+      e.stopPropagation();
+      /* 拖入即视为选中该区域，与粘贴保持一致 */
+      this.pasteAreaStatus = true;
+      let dataTransfer = e.dataTransfer;
+      let items = dataTransfer.items ? Array.from(dataTransfer.items) : [];
+      let hasDirectory = false;
+      let files = Array.from(dataTransfer.files || []).filter(
+        (rawFile, index) => {
+          let item = items[index];
+          let getAsEntry = item && item.webkitGetAsEntry;
+          let entry = getAsEntry ? item.webkitGetAsEntry() : null;
+          if (entry && entry.isDirectory) {
+            hasDirectory = true;
+            return false;
+          }
+          return true;
+        }
+      );
+      if (hasDirectory) {
+        this.$message({
+          message: this.$t1("不支持上传文件夹，已自动忽略"),
+          type: "warning",
+          showClose: true,
+          duration: 3000,
         });
-        this.pasteList.push(...fileList);
       }
+      this.appendPasteFiles(files);
     },
     deletePasteFile(index) {
       this.pasteList.splice(index, 1);
@@ -1385,6 +1455,10 @@ tViewMixins = {
       chooseIndex: 0,
       fileServerInfo: {},
       model: null,
+      // H5 非图片文件预览弹框，见 openFilePreviewDialog
+      showFilePreviewDialog: false,
+      previewFileUrl: null,
+      previewFileName: null,
     };
   },
   computed: {
@@ -1745,8 +1819,41 @@ tViewMixins = {
         fileServerPreviewEnabled &&
         this.$commonFileUtil.isPreviewFile(url)
       ) {
-        this.$openFilePreview(url);
+        /* 非图片文件：PC 走 $openFilePreview —— 它拿到预览地址后是 openInNewTab
+           （见 utils/vab.js），在 H5 上等于跳出应用、返回全靠浏览器后退，体验断裂。
+           H5 改成本组件内的全屏弹框套 iframe。开关由宿主传 h5Preview（xform 的
+           vabUpload-widget 按 formConfig.layoutType === 'H5' 给），不传则维持原样。 */
+        if (this.$attrs.h5Preview === true || this.$attrs.h5Preview === "true") {
+          this.openFilePreviewDialog(url, this.getAttachmentName(attachment));
+        } else {
+          this.$openFilePreview(url);
+        }
+      }
+    },
+    /**
+     * H5 的非图片文件预览：取预览地址后用弹框里的 iframe 承载。
+     * 取址接口与 $openFilePreview 完全一致，只是不跳新标签页。
+     */
+    openFilePreviewDialog(url, name) {
+      let fileSuffix = this.$commonFileUtil.getFileSuffix(url);
+      if (!this.$commonFileUtil.isPreviewFile(url)) {
+        return;
       }
+      this.$http({
+        url: USER_PREFIX + "/sf_common/getFilePreviewUrl",
+        method: "post",
+        data: {
+          url: url,
+        },
+        isLoading: true,
+        success: (res) => {
+          if (!res.objx) return;
+          this.previewFileUrl = res.objx;
+          // 名字取不到就退回后缀，别让标题栏空着
+          this.previewFileName = name || fileSuffix || "";
+          this.showFilePreviewDialog = true;
+        },
+      });
     },
     getAttachmentName(attachment) {
       let name = null;