cloud-web-corejs 1.0.284 → 1.0.286

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cloud-web-corejs",
   "private": false,
-  "version": "1.0.284",
+  "version": "1.0.286",
   "scripts": {
     "dev": "vue-cli-service serve",
     "lint": "eslint --ext .js,.vue src",

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;

package/src/components/VabUpload/view.vue

@@ -1,209 +1,248 @@
-<template>
-  <div>
-    <div id="uploadImage" :class="classList">
-      <div
-        class="upload-list"
-        model="singer"
-        v-for="(attachment, index) in attachments"
-        :key="index"
-        style="display: inline-block; vertical-align: middle; float: left"
-      >
-        <template v-if="$attrs.hideInfo !== true && $attrs.hideInfo !== 'true'">
-          <div class="upload-box">
-            <ul class="el-upload-list el-upload-list--picture">
-              <li tabindex="0" class="el-upload-list__item">
-                <div>
-                  <div class="el-upload-list__item-thumbnail">
-                    <div
-                      class="show-video"
-                      v-if="hasPreview(attachment)"
-                      @click="openPreview(attachment, index)"
-                    >
-                      <i class="icon-chakan"></i>
-                    </div>
-                    <p>
-                      <el-image
-                        :src="getShowUrl(attachment)"
-                        @click="openPreview(attachment, index)"
-                        :z-index="999999"
-                      />
-                    </p>
-                  </div>
-                  <div class="el-upload-list__item-name">
-                    <el-tooltip
-                      :enterable="false"
-                      class="item"
-                      effect="dark"
-                      :content="getAttachmentName(attachment)"
-                      placement="top"
-                    >
-                      <p v-if="$attrs.hideName !== true">
-                        {{ getAttachmentName(attachment) }}
-                      </p>
-                    </el-tooltip>
-                    <p v-if="$attrs.showSize === true || $attrs.showSize === 'true'">
-                      {{ formatFileSize(attachment.fileSize) }}
-                    </p>
-                    <!--                    <p v-if="$attrs.showSortInput !== true && !dataType && $attrs.createBy !== false">
-                      {{ attachment.createBy }}</p>-->
-                    <p
-                      v-if="
-                        $attrs.showSortInput !== true &&
-                        !dataType &&
-                        $attrs.createDate !== false
-                      "
-                    >
-                      {{ attachment.createDate }}
-                    </p>
-                  </div>
-                  <div class="el-upload-input" v-if="$attrs.showSortInput">
-                    <base-input-number
-                      v-model="attachment.orders"
-                      class="button-sty"
-                      :placeholder="$t2('序号', 'components.VabUpload.orders')"
-                      :scale="0"
-                      @change="handleChange"
-                    />
-                  </div>
-                  <div class="el-upload-input" v-if="$attrs.showNameInput">
-                    <el-input
-                      v-model="attachment.name"
-                      class="button-sty"
-                      :placeholder="$t2('请输入名称', 'components.VabUpload.name')"
-                      :scale="0"
-                      @change="handleChange"
-                    />
-                  </div>
-                  <div class="el-upload-list__item-status-label">
-                    <i class="el-icon-upload-success el-icon-check"></i>
-                  </div>
-                  <div
-                    class="el-icon-close"
-                    @click="deleteFile(index)"
-                    v-if="
-                      $attrs.edit !== false &&
-                      $attrs.edit !== 'false' &&
-                      attachment.h5 !== 1 &&
-                      $attrs.remove !== false
-                    "
-                  >
-                    <i
-                      class="el-tooltip iconfont iconshanchu"
-                      aria-describedby="el-tooltip-6144"
-                      tabindex="0"
-                    ></i>
-                  </div>
-                  <div class="el-icon-tagEdit" v-if="attachment.h5 !== 1">
-                    <el-tooltip
-                      class="item"
-                      effect="dark"
-                      :content="$t2('下载', 'system.button.download')"
-                      placement="top"
-                    >
-                      <i class="el-icon-download" @click="downloadFile(attachment)"></i>
-                    </el-tooltip>
-                    <el-tooltip
-                      class="item"
-                      effect="dark"
-                      :content="$t2('详情', 'components.VabUpload.detail')"
-                      placement="top"
-                      v-if="
-                        attachment &&
-                        attachment.id &&
-                        $attrs.showProperties !== false &&
-                        !dataType
-                      "
-                    >
-                      <i
-                        class="iconfont icon-shuxing"
-                        @click="openPropertiesDialog(attachment)"
-                      ></i>
-                    </el-tooltip>
-                  </div>
-                </div>
-              </li>
-            </ul>
-          </div>
-        </template>
-        <template v-else>
-          <a>
-            <el-image
-              :src="getShowUrl(attachment)"
-              @click="openPreview(attachment, index)"
-              :z-index="999999"
-            />
-          </a>
-          <a
-            href="javascript:void(0);"
-            class="del"
-            @click="deleteFile(index)"
-            v-if="$attrs.edit !== false && $attrs.edit !== 'false' &&
-                      $attrs.remove !== false"
-            ><i class="el-icon-error"></i
-          ></a>
-        </template>
-      </div>
-      <div
-        class="el-upload el-upload--picture"
-        style="vertical-align: middle; display: inline-block; float: left"
-        v-if="$attrs.edit !== false && $attrs.edit !== 'false'"
-      >
-        <button
-          type="button"
-          class="avatar-uploader"
-          v-if="showUploadBtn"
-          @keyup.prevent
-          @keydown.enter.prevent
-          @click="openUploadDialog()"
-          @mouseenter="uploadEnterOver()"
-          @mouseleave="uploadEnterLeave()"
-        >
-          <i class="el-icon-plus avatar-uploader-icon"></i>
-        </button>
-      </div>
-    </div>
-    <propertiesDialog
-      v-if="showPropertiesDialog"
-      :visiable.sync="showPropertiesDialog"
-      :editAttachment.sync="editAttachment"
-      :edit.sync="$attrs.edit"
-    ></propertiesDialog>
-    <el-image-viewer
-      v-if="showViewer"
-      :on-close="closeViewer"
-      :initial-index.sync="chooseIndex"
-      :url-list="previewList"
-    />
-  </div>
-</template>
-
-<script>
-import { viewMixins } from "./mixins";
-
-export default {
-  mixins: [viewMixins],
-  components: {
-    propertiesDialog: () => import("./propertiesDialog.vue"),
-    ElImageViewer: () => import("./image-viewer"),
-  },
-  computed: {
-    classList() {
-      // 'upload-img': this.dataType || (this.$attrs.hideInfo == true || this.$attrs.hideInfo == 'true')
-      let arr = [];
-      if (
-        this.dataType ||
-        this.$attrs.hideInfo == true ||
-        this.$attrs.hideInfo == "true"
-      ) {
-        arr.push("upload-img");
-      }
-      let widgetSize = this.$attrs.widgetSize || 2;
-      if (widgetSize) {
-        let str1 = "widgetSize-" + widgetSize;
-        arr.push(str1);
-      }
-      return arr;
-    },
-  },
-};
-</script>
+<template>
+  <div>
+    <div id="uploadImage" :class="classList">
+      <div
+        class="upload-list"
+        model="singer"
+        v-for="(attachment, index) in attachments"
+        :key="index"
+        style="display: inline-block; vertical-align: middle; float: left"
+      >
+        <template v-if="$attrs.hideInfo !== true && $attrs.hideInfo !== 'true'">
+          <div class="upload-box">
+            <ul class="el-upload-list el-upload-list--picture">
+              <li tabindex="0" class="el-upload-list__item">
+                <div>
+                  <div class="el-upload-list__item-thumbnail">
+                    <div
+                      class="show-video"
+                      v-if="hasPreview(attachment)"
+                      @click="openPreview(attachment, index)"
+                    >
+                      <i class="icon-chakan"></i>
+                    </div>
+                    <p>
+                      <el-image
+                        :src="getShowUrl(attachment)"
+                        @click="openPreview(attachment, index)"
+                        :z-index="999999"
+                      />
+                    </p>
+                  </div>
+                  <div class="el-upload-list__item-name">
+                    <el-tooltip
+                      :enterable="false"
+                      class="item"
+                      effect="dark"
+                      :content="getAttachmentName(attachment)"
+                      placement="top"
+                    >
+                      <p v-if="$attrs.hideName !== true">
+                        {{ getAttachmentName(attachment) }}
+                      </p>
+                    </el-tooltip>
+                    <p v-if="$attrs.showSize === true || $attrs.showSize === 'true'">
+                      {{ formatFileSize(attachment.fileSize) }}
+                    </p>
+                    <!--                    <p v-if="$attrs.showSortInput !== true && !dataType && $attrs.createBy !== false">
+                      {{ attachment.createBy }}</p>-->
+                    <p
+                      v-if="
+                        $attrs.showSortInput !== true &&
+                        !dataType &&
+                        $attrs.createDate !== false
+                      "
+                    >
+                      {{ attachment.createDate }}
+                    </p>
+                  </div>
+                  <div class="el-upload-input" v-if="$attrs.showSortInput">
+                    <base-input-number
+                      v-model="attachment.orders"
+                      class="button-sty"
+                      :placeholder="$t2('序号', 'components.VabUpload.orders')"
+                      :scale="0"
+                      @change="handleChange"
+                    />
+                  </div>
+                  <div class="el-upload-input" v-if="$attrs.showNameInput">
+                    <el-input
+                      v-model="attachment.name"
+                      class="button-sty"
+                      :placeholder="$t2('请输入名称', 'components.VabUpload.name')"
+                      :scale="0"
+                      @change="handleChange"
+                    />
+                  </div>
+                  <div class="el-upload-list__item-status-label">
+                    <i class="el-icon-upload-success el-icon-check"></i>
+                  </div>
+                  <div
+                    class="el-icon-close"
+                    @click="deleteFile(index)"
+                    v-if="
+                      $attrs.edit !== false &&
+                      $attrs.edit !== 'false' &&
+                      attachment.h5 !== 1 &&
+                      $attrs.remove !== false
+                    "
+                  >
+                    <i
+                      class="el-tooltip iconfont iconshanchu"
+                      aria-describedby="el-tooltip-6144"
+                      tabindex="0"
+                    ></i>
+                  </div>
+                  <div class="el-icon-tagEdit" v-if="attachment.h5 !== 1">
+                    <el-tooltip
+                      class="item"
+                      effect="dark"
+                      :content="$t2('下载', 'system.button.download')"
+                      placement="top"
+                    >
+                      <i class="el-icon-download" @click="downloadFile(attachment)"></i>
+                    </el-tooltip>
+                    <el-tooltip
+                      class="item"
+                      effect="dark"
+                      :content="$t2('详情', 'components.VabUpload.detail')"
+                      placement="top"
+                      v-if="
+                        attachment &&
+                        attachment.id &&
+                        $attrs.showProperties !== false &&
+                        !dataType
+                      "
+                    >
+                      <i
+                        class="iconfont icon-shuxing"
+                        @click="openPropertiesDialog(attachment)"
+                      ></i>
+                    </el-tooltip>
+                  </div>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </template>
+        <template v-else>
+          <a>
+            <el-image
+              :src="getShowUrl(attachment)"
+              @click="openPreview(attachment, index)"
+              :z-index="999999"
+            />
+          </a>
+          <a
+            href="javascript:void(0);"
+            class="del"
+            @click="deleteFile(index)"
+            v-if="$attrs.edit !== false && $attrs.edit !== 'false' &&
+                      $attrs.remove !== false"
+            ><i class="el-icon-error"></i
+          ></a>
+        </template>
+      </div>
+      <div
+        class="el-upload el-upload--picture"
+        style="vertical-align: middle; display: inline-block; float: left"
+        v-if="$attrs.edit !== false && $attrs.edit !== 'false'"
+      >
+        <button
+          type="button"
+          class="avatar-uploader"
+          v-if="showUploadBtn"
+          @keyup.prevent
+          @keydown.enter.prevent
+          @click="openUploadDialog()"
+          @mouseenter="uploadEnterOver()"
+          @mouseleave="uploadEnterLeave()"
+        >
+          <i class="el-icon-plus avatar-uploader-icon"></i>
+        </button>
+      </div>
+    </div>
+    <propertiesDialog
+      v-if="showPropertiesDialog"
+      :visiable.sync="showPropertiesDialog"
+      :editAttachment.sync="editAttachment"
+      :edit.sync="$attrs.edit"
+    ></propertiesDialog>
+    <el-image-viewer
+      v-if="showViewer"
+      :on-close="closeViewer"
+      :initial-index.sync="chooseIndex"
+      :url-list="previewList"
+    />
+    <!-- H5 非图片文件预览：结构与 mobile/wf/content.vue 的流程图预览一致，
+         样式走 xform/styles/h5.scss 块 L 的 .pop-box（全屏 fixed + 内部 flex）。
+         只在宿主传了 h5Preview 时才会被 openPreview 打开，PC 上永远不渲染。 -->
+    <el-dialog
+      title="文件预览"
+      :modal-append-to-body="false"
+      :close-on-click-modal="false"
+      :visible.sync="showFilePreviewDialog"
+      :modal="false"
+      custom-class="dialog-style h5view-dialog"
+      width="100%"
+      top="0px"
+      v-el-drag-dialog
+      v-el-dialog-center
+      :append-to-body	="true"
+      :destroy-on-close="true"
+    >
+        <div class="flex">
+          <div class="form-box">
+            <div class="tit">
+              <span>{{ previewFileName }}</span>
+            </div>
+            <iframe
+              style="width: 100%; flex: 1; border: none"
+              :src="previewFileUrl"
+            ></iframe>
+          </div>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button
+            type="primary"
+            plain
+            class="button-sty"
+            icon="el-icon-close"
+            @click="showFilePreviewDialog = false"
+            >{{$t2('关 闭', 'system.button.close2')}}</el-button
+          >
+        </span>
+      </el-dialog>
+  </div>
+</template>
+
+<script>
+import { viewMixins } from "./mixins";
+
+export default {
+  mixins: [viewMixins],
+  components: {
+    propertiesDialog: () => import("./propertiesDialog.vue"),
+    ElImageViewer: () => import("./image-viewer"),
+  },
+  computed: {
+    classList() {
+      // 'upload-img': this.dataType || (this.$attrs.hideInfo == true || this.$attrs.hideInfo == 'true')
+      let arr = [];
+      if (
+        this.dataType ||
+        this.$attrs.hideInfo == true ||
+        this.$attrs.hideInfo == "true"
+      ) {
+        arr.push("upload-img");
+      }
+      let widgetSize = this.$attrs.widgetSize || 2;
+      if (widgetSize) {
+        let str1 = "widgetSize-" + widgetSize;
+        arr.push(str1);
+      }
+      return arr;
+    },
+  },
+};
+</script>