@zhijiancloud/bpm 0.0.1 → 0.0.2

package/components/lib/bpmMulFile/src/part/reader.vue

@@ -0,0 +1,303 @@
+<template>
+  <div
+    class="bpm-mul-file-reader">
+    <div v-show="!value || value.length == 0">
+      暂无文件或图片
+    </div>
+    <viewer :images="photo" rebuild @inited="inited" ref="viewer">
+      <span v-for="item in value" :key="item.md5">
+        <div class="file-box" v-if="isImageFile(item)">
+          <div class="file-icon">
+            <img :src="fileLink(item, 600)" alt />
+          </div>
+          <div
+            class="relative-position tc file-link ellipsis"
+            :title="item.name"
+          >
+            {{ item.name }}
+          </div>
+        </div>
+        <span
+          target="_blank"
+          v-else
+          class="file-box"
+          @click="reviewOnMobile(item)"
+        >
+          <div class="text-center text-faded file-icon" @click="preview(item)">
+            <i
+              aria-hidden="true"
+              class="q-icon fa fa-file-pdf-o"
+              :class="getFileTypeClass(item)"
+            ></i>
+          </div>
+          <div
+            class="relative-position tc file-link ellipsis"
+            :title="item.name"
+            @click="preview(item)"
+          >
+            {{ item.name }}
+          </div>
+          <div class="operation-box">
+            <a href="javascript:;" v-if="!isDwg(item)" @click="preview(item)"
+              >预览</a
+            >
+            <span v-if="!is_mobile && !isDwg(item)">|</span>
+            <a
+              v-if="!is_mobile"
+              href="javascript:;"
+              @click="download(item)"
+              >下载</a
+            >
+            <span v-if="is_mobile">|</span>
+            <a
+              v-if="is_mobile"
+              href="javascript:;"
+              @click="share(item)"
+              >分享</a
+            >
+          </div>
+        </span>
+      </span>
+    </viewer>
+    <el-dialog
+      :visible.sync="opened"
+      class="file-modal"
+      :before-close="onHide"
+      @open="onOpen"
+      title="文件预览"
+      :fullscreen="true"
+      v-bind="$attrs" 
+      v-on="$listeners"
+    >
+      <iframe :src="officeUrl" width="99%" :height="windowH"></iframe>
+    </el-dialog>
+    <img id="image" src="" style="display: none" />
+  </div>
+</template>
+  
+
+<script>
+import Vue from "vue";
+import _ from "lodash";
+import Viewer from "v-viewer";
+import {Dialog} from "element-ui";
+Vue.use(Dialog);
+
+import "viewerjs/dist/viewer.css";
+// import {wvAgent} from "./lib/utils"
+import {urlAppendParam, isMobile} from "../../../utils"
+import { showGPSInfo, getFileType, gethashcode } from "./lib/utils";
+
+Vue.use(Viewer);
+Viewer.setDefaults({
+  Options: {
+    inline: true,
+    button: true,
+    navbar: true,
+    title: true,
+    toolbar: true,
+    tooltip: true,
+    movable: true,
+    zoomable: true,
+    rotatable: true,
+    scalable: true,
+    transition: false,
+    fullscreen: false,
+    keyboard: true,
+  },
+});
+Vue.use(Dialog);
+
+export default {
+  props: ["value", "fieldConf", "row"],
+  data() {
+    return {
+      vueLightId1: null,
+      photo: [],
+      officeUrl: "",
+      opened: false,
+      windowH: 0,
+      type: "small"
+    };
+  },
+  computed: {
+    is_mobile(){
+      return isMobile()
+    }
+  },
+  watch: {
+    value() {
+      this.setPhoto();
+    },
+  },
+  created () {
+    // wvAgent.register()
+  },
+  mounted() {
+    let time = new Date().getTime();
+    this.vueLightId1 = time + 1;
+    this.setPhoto();
+    this.windowH = (document.body.clientHeight / 100) * 99 - 50;
+  },
+  methods: {
+    isDwg(item) {
+      return _.endsWith(item.name, ".dwg");
+    },
+    inited(viewer) {
+      viewer.options.view = this.view;
+      this.$viewer = viewer;
+    },
+    view(e) {
+      let index = e.detail.index;
+      let value = _.filter(this.value, (item) => {
+        return this.isImageFile(item);
+      });
+      let item = _.get(value, index);
+      showGPSInfo(item);
+    },
+    setPhoto() {
+      let value = [];
+      _.each(this.value, (item) => {
+        if (this.isImageFile(item)) {
+          let link = this.fileLink(item, 600);
+          value.push(link);
+        }
+      });
+      this.photo = value;
+    },
+    getFileTypeClass(item) {
+      let fileSuffix = getFileType(item.type);
+      if (item.type == "application/pdf") fileSuffix = "fa-file-pdf-o";
+      let typeMap = {
+        document: "fa-file-word-o",
+        sheet: "fa-file-excel-o",
+        doc: "fa-file-word-o",
+        docx: "fa-file-word-o",
+        xlsx: "fa-file-excel-o",
+        "ms-excel": "fa-file-excel-o",
+        dwg: "fa-file-image-o",
+        png: "fa-file-image-o",
+        jpg: "fa-file-image-o",
+      };
+      return _.get(typeMap, fileSuffix);
+    },
+    isImageFile(item) {
+      return _.startsWith(item.type, "image");
+    },
+    fileLink(item) {
+      if (!item || !item.md5) return;
+      let isImg = this.isImageFile(item);
+      let args = {
+        file_md5: item.md5,
+      };
+      // let token = zj.utils.pageParam().token;
+      // if (token) {
+      //   args.token = token;
+      // }
+
+      if (!isImg) {
+        args.is_file = 1;
+      } 
+
+      let result = urlAppendParam(
+        "/platform/v1/papi/web_file/image_view/",
+        args
+      );
+      return result;
+    },
+    reviewOnMobile(item) {
+      if (this.is_mobile) {
+        this.preview(item);
+      }
+    },
+    async preview(item) {
+      let res = await zj.net.w.noapi({
+        url: `/platform/v1/papi/app_file/download/?file_md5=${item.md5}&webp=0`,
+      });
+      let preview_url = _.get(res, "url_list.0.path.0");
+      let fileSuffix = getFileType(preview_url);
+      if (item.type == "application/pdf") fileSuffix = "pdf";
+      if (item.type == "application/vnd.ms-excel") fileSuffix = "ms-excel";
+      let typeMap = {
+        document: "Word.Document",
+        docx: "Word.Document",
+        doc: "Word.Document",
+        sheet: "Excel.Sheet",
+        pdf: "pdf",
+        xlsx: "Excel.Sheet",
+        "ms-excel": "Excel.Sheet",
+      };
+      let hash = gethashcode();
+      let url = `https://${window.location.host}/zj_of/v1/papi/file/read_only/?md5=${item.md5}&type=${typeMap[fileSuffix]}&sign=${hash}`;
+      let result = await zj.net.w.noapi({
+        url: `/zj_of/v1/papi/file/using_engine/`,
+      });
+      if (result.engine != "wps")
+        url =
+          "https://view.officeapps.live.com/op/embed.aspx?src=" +
+          encodeURIComponent(preview_url);
+      console.log("url", url)
+      if (fileSuffix == "pdf") {
+        let index = preview_url.lastIndexOf(".com");
+        preview_url = preview_url.substring(index + 4, preview_url.length);
+        preview_url = encodeURIComponent(preview_url);
+        if (this.is_mobile)
+          url = `/public/app3/bpm/view_pdf.html?url=${preview_url}`;
+        else url = `/public/bpm/app/view_pdf.html?url=${preview_url}`;
+      }
+
+      this.officeUrl = url;
+      this.opened = true;
+    },
+
+    //分享
+    async share(item) {
+      let res = await zj.net.w.noapi({
+        url: `/platform/v1/papi/app_file/download/?file_md5=${item.md5}&webp=0`,
+      });
+
+      //如果是移动平台，调用客户端预览页面
+      if (this.is_mobile) {
+        let fileInfo = {
+          share_url: _.get(res, "url_list.0.path.0"),
+          title: item.name,
+          logo_url: "",
+          context: item.name,
+        };
+
+        this.toShare(fileInfo);
+      }
+    },
+
+    //打开预览页
+    async toShare(fileInfo) {
+      console.log("fileInfo",fileInfo)
+      // wvAgent.invoke("sharePage", {
+      //   page_url: fileInfo.share_url,
+      //   title: fileInfo.title || "",
+      //   logo_url: fileInfo.logo_url || "",
+      //   context: fileInfo.context || "",
+      // });
+    },
+    async download(item) {
+      window.open(
+        `/platform/v1/papi/web_file/web_download/?file_md5=${item.md5}`
+      );
+    },
+    getFileType(filePath) {
+      var startIndex = filePath.lastIndexOf(".");
+      if (startIndex != -1)
+        return filePath
+          .substring(startIndex + 1, filePath.length)
+          .toLowerCase();
+      else return "";
+    },
+    onHide() {
+      this.opened = false;
+    },
+    onOpen() {
+      this.opened = true;
+    },
+  },
+};
+</script>

package/components/lib/bpmMulImage/index.js

@@ -0,0 +1,7 @@
+import BpmMulImage from './src/main.vue'
+
+BpmMulImage.install = function(Vue) {
+    Vue.component(BpmMulImage.name , BpmMulImage);
+}
+
+export default BpmMulImage

package/components/lib/bpmMulImage/src/main.vue

@@ -0,0 +1,87 @@
+<template>
+  <component
+    class="bpm-mul-image"
+    v-model="curVal"
+    :is="curComponent"
+    :fieldConf="fieldConf"
+    :row="row"
+    :mode="mode"
+    :uiType="uiType"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+  </component>
+</template>
+<script>
+import editorComponent from "./part/editor.vue";
+import readerComponent from "./part/reader.vue";
+
+export default {
+  name: "BpmMulImage",
+  components: {
+    editorComponent,
+    readerComponent
+  },
+  props: {
+    value: {
+      type: String,
+      
+    },
+    fieldConf: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    row: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    mode: {
+      type: String,
+      default() {
+        return "view";
+      },
+    },
+    uiType: {
+      type: String,
+      default() {
+        return "default";
+      },
+    },
+  },
+  data () {
+    return {
+      curVal: ""
+    }
+  },
+  computed: {
+    curComponent() {
+      if (this.mode == "view") {
+        return readerComponent;
+      } else {
+        return editorComponent;
+      }
+    },
+  },
+  watch: {
+    curVal(val){
+      this.$emit("input", val)
+      this.$emit("change", val);
+    },
+    value(){
+      this.curVal = this.value
+    },
+    
+  },
+  mounted () {
+    this.curVal = this.value
+  }
+};
+</script>
+
+<style>
+@import "../../../css/bpmMulFile.less";
+</style>