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

package/src/components/VabUpload/view.vue

@@ -1,209 +1,247 @@
-<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 上永远不渲染。 -->
+    <div class="pop-box" v-if="showFilePreviewDialog">
+      <div>
+        <div class="header-box">
+          <i
+            class="back el-icon-close"
+            @click="showFilePreviewDialog = false"
+          ></i>
+          {{ $t2("文件预览", "components.VabUpload.filePreview") }}
+        </div>
+        <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>
+        <!-- 与流程图预览/任务情况预览同款：底部一个铺满行的「关 闭」。
+             .btn 的 flex:1 由 xform/styles/h5.scss 块 L 给，单个按钮自动占满。 -->
+        <div class="fixed-bottom-btns">
+          <el-button
+            type="primary"
+            plain
+            class="btn"
+            icon="el-icon-close"
+            @click="showFilePreviewDialog = false"
+          >
+            {{ $t2("关 闭", "system.button.close2") }}
+          </el-button>
+        </div>
+      </div>
+    </div>
+  </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>