cloud-web-corejs 1.0.280 → 1.1.0-dev.10

package/src/components/VabUpload/index.vue

@@ -14,13 +14,21 @@
     >
       <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">
-              <img src="~@/resources/images/nodata2.png"/>
+              <img :src="$assetUrl(require('@/resources/images/nodata2.png'))" />
             </div>
             <li v-for="(pasteFile,index) in pasteList" :key="index" class="el-upload-list__item is-success">
               <div>
@@ -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

@@ -3,6 +3,11 @@ let tmixins, tViewMixins, pmixins;
 import axios from "axios";
 import SparkMD5 from "spark-md5";
 import settingConfig from "@/settings.js";
+import {
+  registerPreviewInstance,
+  unregisterPreviewInstance,
+  collectPreviewList,
+} from "./previewGroup.js";
 
 let imFun = {
   axios,
@@ -109,6 +114,8 @@ tmixins = {
       showPrivateProfileDialog: false,
       pasteList: [],
       pasteAreaStatus: false,
+      pasteAreaDragging: false,
+      pasteAreaDragDepth: 0,
       option: {},
       editFileIndex: -1,
       showFileNameDialog: false,
@@ -375,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);*/
@@ -1207,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);
@@ -1372,12 +1447,18 @@ tViewMixins = {
       attachments: [],
       pictureList: [],
       pictureDtoList: [],
+      // 传给预览弹框的图片列表：可能跨字段汇总了整个表单的图片，见 previewGroup.js
+      previewList: [],
       showPropertiesDialog: false,
       editAttachment: null,
       showViewer: false,
       chooseIndex: 0,
       fileServerInfo: {},
       model: null,
+      // H5 非图片文件预览弹框，见 openFilePreviewDialog
+      showFilePreviewDialog: false,
+      previewFileUrl: null,
+      previewFileName: null,
     };
   },
   computed: {
@@ -1442,6 +1523,12 @@ tViewMixins = {
     this.initFileServerInfo();
     this.initFile();
   },
+  mounted() {
+    registerPreviewInstance(this);
+  },
+  beforeDestroy() {
+    unregisterPreviewInstance(this);
+  },
   methods: {
     pasteEvent(e) {
       e.stopPropagation();
@@ -1657,23 +1744,41 @@ tViewMixins = {
         .concat(this.pictureDtoList.slice(0, pictureIndex));
       return res;
     },
-    openImagePreView(index) {
-      // this.chooseIndex = index;
-      let pictureIndex = -1;
-      this.attachments.find((item, i) => {
-        let typeStr = Object.prototype.toString.call(item);
-        if (typeStr == "[object Object]") {
-          if (this.$commonFileUtil.isPictureFile(item.url)) {
-            pictureIndex++;
-          }
-        } else {
-          if (this.$commonFileUtil.isPictureFile(item)) {
-            pictureIndex++;
-          }
+    isPictureAttachment(attachment) {
+      if (!attachment) return false;
+      let typeStr = Object.prototype.toString.call(attachment);
+      if (typeStr == "[object Object]") {
+        return this.$commonFileUtil.isPictureFile(attachment.url);
+      }
+      return this.$commonFileUtil.isPictureFile(attachment);
+    },
+    /**
+     * 本字段当前的图片列表。现算而不用 pictureDtoList：后者靠 attachments 的引用监听维护，
+     * 删除(splice)、父组件直接改 file 数组都不会触发，拿到的可能是旧列表。
+     * previewGroup.js 汇总整表图片时也会调用它。
+     */
+    getPreviewPictureList() {
+      let list = [];
+      (this.attachments || []).forEach((item) => {
+        if (this.isPictureAttachment(item)) {
+          list.push(item);
         }
-        return index == i;
       });
-      this.chooseIndex = pictureIndex;
+      return list;
+    },
+    openImagePreView(index) {
+      let pictures = this.getPreviewPictureList();
+      // 点中的图片在本字段图片里的下标 = 它前面有几张图片
+      let pictureIndex = 0;
+      for (let i = 0; i < index; i++) {
+        if (this.isPictureAttachment(this.attachments[i])) {
+          pictureIndex++;
+        }
+      }
+      // 上一张 / 下一张要能翻遍整个表单，列表拼的是同组所有字段的图片
+      let { list, offset } = collectPreviewList(this, pictures);
+      this.previewList = list;
+      this.chooseIndex = offset + pictureIndex;
       this.showViewer = true;
     },
     openPropertiesDialog(attachment) {
@@ -1682,6 +1787,8 @@ tViewMixins = {
     },
     closeViewer() {
       this.showViewer = false;
+      // 列表里可能持有别的字段的附件对象，关掉就释放
+      this.previewList = [];
     },
     hasPreview(attachment) {
       let fileServerPreviewEnabled = this.getFileServerPreviewEnabled();
@@ -1712,9 +1819,42 @@ 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;
       let typeStr = Object.prototype.toString.call(attachment);

package/src/components/VabUpload/previewGroup.js

@@ -0,0 +1,128 @@
+/**
+ * 附件图片预览分组
+ *
+ * 单个附件字段(baseUpload)只持有自己的图片，预览弹框的「上一张 / 下一张」原先也只能在
+ * 本字段内翻页。这里维护一份已挂载 baseUpload 实例的登记表：打开预览时把同一表单范围内
+ * 的所有图片按 DOM 顺序拼成一个列表交给 el-image-viewer，翻页于是能跨字段覆盖整个表单。
+ *
+ * 分组范围 = 从自身向上找到的第一个「边界元素」(见 SCOPE_SELECTOR)。弹框 / 抽屉 / 表单
+ * 都算边界，保证背景页面的图片不会串进弹框的预览里，明细表编辑行里的附件也只跟同一行翻页。
+ *
+ * 组件上可用 preview-group 覆盖：
+ *   preview-group="xxx"    给同一字符串的实例强制同组(可跨边界)
+ *   :preview-group="false" 退回只翻本字段(旧行为)
+ */
+
+// 已挂载的 baseUpload 实例。组件 mounted 时登记、beforeDestroy 时注销
+const instances = new Set();
+
+// 分组边界：弹框、抽屉、表单
+const SCOPE_SELECTOR = ".el-dialog,.el-drawer,.el-form,form";
+
+export function registerPreviewInstance(vm) {
+  instances.add(vm);
+}
+
+export function unregisterPreviewInstance(vm) {
+  instances.delete(vm);
+}
+
+// 模板里写 preview-group 与 previewGroup 落到 $attrs 的 key 不同，两个都认
+function readGroupAttr(vm) {
+  let attrs = (vm && vm.$attrs) || {};
+  return attrs.previewGroup !== undefined
+    ? attrs.previewGroup
+    : attrs["preview-group"];
+}
+
+function isGroupEnabled(vm) {
+  let value = readGroupAttr(vm);
+  return value !== false && value !== "false";
+}
+
+function getScope(vm) {
+  let group = readGroupAttr(vm);
+  // 显式指定的分组名优先，此时不再看 DOM 位置
+  if (typeof group === "string") {
+    let name = group.trim();
+    if (name && name !== "true" && name !== "false") return name;
+  }
+  let el = vm.$el;
+  while (el && el.nodeType === 1) {
+    if (el.matches && el.matches(SCOPE_SELECTOR)) {
+      return el;
+    }
+    el = el.parentElement;
+  }
+  return (vm.$el && vm.$el.ownerDocument.body) || null;
+}
+
+/**
+ * 隐藏的实例不参与分组：看不见的图片(未激活的页签、折叠面板)混进来翻页只会莫名其妙。
+ * 不用 getClientRects / offsetParent 判定——jsdom 没有排版，那两个恒为空。
+ */
+function isHidden(el) {
+  if (!el || el.nodeType !== 1 || el.isConnected === false) return true;
+  let view = el.ownerDocument && el.ownerDocument.defaultView;
+  if (!view || !view.getComputedStyle) return false;
+  let node = el;
+  while (node && node.nodeType === 1) {
+    let style = view.getComputedStyle(node);
+    if (style && (style.display === "none" || style.visibility === "hidden")) {
+      return true;
+    }
+    node = node.parentElement;
+  }
+  return false;
+}
+
+function compareDomOrder(a, b) {
+  if (a === b) return 0;
+  let relation = a.compareDocumentPosition(b);
+  // 2 = DOCUMENT_POSITION_PRECEDING, 4 = DOCUMENT_POSITION_FOLLOWING
+  if (relation & 4) return -1;
+  if (relation & 2) return 1;
+  return 0;
+}
+
+function getPictures(vm) {
+  if (typeof vm.getPreviewPictureList !== "function") return [];
+  return vm.getPreviewPictureList() || [];
+}
+
+/**
+ * 汇总 vm 所在分组的图片列表
+ * @param {Object} vm 触发预览的 baseUpload 实例
+ * @param {Array} ownList vm 自己的图片列表(调用方已算好，避免重复计算)
+ * @returns {{list: Array, offset: Number}} 拼接后的列表与 vm 自己的图片在其中的起始下标
+ */
+export function collectPreviewList(vm, ownList) {
+  let own = ownList || [];
+  if (!isGroupEnabled(vm)) {
+    return { list: own, offset: 0 };
+  }
+  let scope = getScope(vm);
+  let members = [];
+  instances.forEach((item) => {
+    if (item === vm || !item.$el) return;
+    if (!isGroupEnabled(item)) return;
+    if (getScope(item) !== scope) return;
+    if (isHidden(item.$el)) return;
+    members.push(item);
+  });
+  members.push(vm);
+  members.sort((a, b) => compareDomOrder(a.$el, b.$el));
+
+  let list = [];
+  let offset = 0;
+  members.forEach((item) => {
+    let pictures = item === vm ? own : getPictures(item);
+    if (item === vm) {
+      offset = list.length;
+    }
+    if (pictures.length) {
+      list = list.concat(pictures);
+    }
+  });
+  return { list, offset };
+}