centaline-data-driven 1.2.97 → 1.3.0

package/src/centaline/dynamicSearchList/src/dynamicSearchList.vue

@@ -9,7 +9,7 @@
 
       <ct-searchscreen ref="screen" :api="searchConditionApi" :key="reloadKeyScreen"
       @loaded="screenLoaded" :screenPara="screenPara" 
-      :categoryLoaded="loaded.categoryLoaded" @search="search()" 
+      :categoryLoaded="loaded.categoryLoaded" @search="search()" @saveShortcut="saveShortcut" 
       @showTitle="showTitleScreenHandler"></ct-searchscreen>
 
       <ct-searchtable ref="table" :api="searchDataApi" :searchStatsApi="searchStatsApi" :from="from" @loaded="tableLoaded"
@@ -274,6 +274,9 @@
         this.rowClickHandle();
         this.$refs.table.refreshFromSimple(field,data);
       },
+      saveShortcut(){
+        this.$refs.table.getPage(1);
+      },
     }
   }
 </script>

package/src/centaline/dynamicSearchList/src/dynamicSearchScreen.vue

@@ -8,6 +8,9 @@
         </template>
         <component v-for="(col, index) in model.btnScreen" :key="index" :is="col.is" :vmodel="col" :api="model.optionApi" @click="clickHandler(col)"></component>
       </div>
+      <div class="shortcutFollow" style="padding-left: 20px;" v-if="model.shortcutForm">
+        <ct-form :source="model.shortcutForm.code1" @submit="saveShortcut"></ct-form>
+      </div>
       <el-popover class="SeachScreenPop max-seachpopper" placement="top" transition="el-zoom-in-top" v-model="highScreen" trigger="click" visible-arrow="false">
         <div style="width:100%">
           <template v-for="(col, index) in highScreenRow" v-if="col.show !== false">
@@ -93,7 +96,6 @@
       },
       loadScreen() {
         var self = this;
-        console.log(self.model)
         var hasParent = self.model.screen.filter((v) => {
           return typeof v.parentName !== 'undefined';
         });
@@ -163,6 +165,9 @@
           }
         });
       },
+      saveShortcut(){
+        this.$emit('saveShortcut');
+      },
     }
   }
 </script>

package/src/centaline/dynamicViewerFile/index.js

@@ -0,0 +1,11 @@
+import dynamicViewerFile from './src/dynamicViewerFile'
+
+dynamicViewerFile.install = function (Vue) {
+  Vue.component(dynamicViewerFile.name, dynamicViewerFile);
+}
+
+if (typeof window !== 'undefined' && window.Vue) {
+  window.Vue.use(dynamicViewerFile);
+}
+
+export default dynamicViewerFile;

package/src/centaline/dynamicViewerFile/src/dynamicViewerFile.vue

@@ -0,0 +1,418 @@
+<template>
+  <div style="height: 100%" id="viewer-file" ref="viewerfile">
+    <el-container style="height: 100%; border: 1px solid #eee">
+      <el-aside style="background-color: rgb(238, 241, 246)"
+        ><div style="height: 100%">
+          <el-menu
+            :default-openeds="openeds"
+            :default-active="activeitem"
+            style="height: 100%"
+          >
+            <el-submenu
+              :key="groupIndex"
+              :index="groupIndex.toString()"
+              v-for="(group, groupIndex) in MediaAlbum"
+            >
+              <template slot="title"> <i></i><div style="padding: 0 10px !important">{{ group.albumName }}</div> </template>
+              <el-menu-item-group>
+                <el-menu-item
+                  @click="handleClick(item, groupIndex, index)"
+                  :key="index"
+                  :index="groupIndex.toString() + '-' + index.toString()"
+                  v-for="(item, index) in group.medias"
+                  >{{ item.mediaLabelName || item.fileName }}</el-menu-item
+                >
+              </el-menu-item-group>
+            </el-submenu>
+          </el-menu>
+        </div>
+      </el-aside>
+      <el-main ref="displayArea">
+        <div
+          style="position: relative; width: 100%; height: 100%"
+          v-if="resultObject"
+        >
+          <!--VR-->
+          <template v-if="itemFile.mediaTypeID == '1'">
+            <div
+              class="viewerContent"
+              style="height: 100%; width: 800px; text-align: center"
+            >
+              暂不支持VR
+              <!-- <ct-viewerVR :VRUrl="resultObject"> </ct-viewerVR> -->
+            </div>
+          </template>
+          <!--Photo-->
+          <template v-else-if="itemFile.mediaTypeID == '2'">
+            <ct-viewerImage
+              ref="viewerImage"
+              :imgUrl="resultObject"
+              :rotate="rotate"
+            ></ct-viewerImage>
+          </template>
+          <!--ThreeDimensional-->
+          <template v-else-if="itemFile.mediaTypeID == '3'"
+            >暂不支持ThreeDimensional
+          </template>
+          <!--Video-->
+          <template v-else-if="itemFile.mediaTypeID == '4'">
+            <div class="viewerContent">
+              <video
+                preload="none"
+                :src="resultObject"
+                controls="controls"
+                class="viewerContent"
+                controlslist="nodownload"
+                :height="500"
+                :width="800"
+              >
+                您的浏览器不支持 video 标签。
+              </video>
+            </div>
+          </template>
+          <!--Audio-->
+          <template v-else-if="itemFile.mediaTypeID == '5'">
+            <div class="viewerContent">
+              <audio
+                preload="none"
+                :src="resultObject"
+                controls="controls"
+                class="viewerContent"
+                controlslist="nodownload"
+                style="width: 50%"
+              >
+                您的浏览器不支持 audio 标签。
+              </audio>
+            </div>
+          </template>
+          <!--File-->
+          <template v-else-if="itemFile.mediaTypeID == '6'">
+            <template
+              v-if="
+                'doc,docx,xlsx'.search(itemFile.fileExtension.toLowerCase()) >
+                -1
+              "
+            >
+              <div
+                class="viewerContent"
+                style="height: 100px; text-align: center"
+              >
+                <a :href="resultObject">
+                  <img :src="itemFile.thumbnailUrl" /><br />{{
+                    itemFile.mediaLabelName || itemFile.fileName
+                  }}</a
+                >
+              </div>
+            </template>
+            <template
+              v-else-if="
+                'pdf'.search(itemFile.fileExtension.toLowerCase()) > -1
+              "
+            >
+              <div
+                class="viewerContent"
+                style="height: 100%; width: 800px; text-align: center"
+              >
+                <ct-viewerPDF :pdfUrl="resultObject"> </ct-viewerPDF>
+              </div>
+            </template>
+          </template>
+          <template v-else> 不支持此类型：{{ itemFile.mediaTypeID }} </template>
+
+          <template v-if="resultObject != ''">
+            <div class="magnify-footer" :style="{width:displayAreaWidth+'px','bottom':(displayAreabtm+10)+'px'}">
+              <div class="magnify-toolbar">
+                <a
+                  href="javascript:void(0)"
+                  class="magnify-btn el-icon-back"
+                  title="上一张"
+                  @click="jump(-1)"
+                ></a
+                ><a
+                  href="javascript:void(0)"
+                  class="magnify-btn el-icon-right"
+                  title="下一张"
+                  @click="jump(1)"
+                ></a>
+                <template v-if="itemFile.mediaTypeID == '2'">
+                  <a
+                    href="javascript:void(0)"
+                    class="magnify-btn el-icon-refresh-left"
+                    title="左旋转"
+                    @click="rotateImg('L')"
+                  ></a
+                  ><a
+                    href="javascript:void(0)"
+                    class="magnify-btn el-icon-refresh-right"
+                    title="右旋转"
+                    @click="rotateImg('R')"
+                  ></a
+                  ><a
+                    href="javascript:void(0)"
+                    class="magnify-btn el-icon-zoom-in"
+                    title="放大"
+                    @click="zoom(0.2)"
+                  ></a
+                  ><a
+                    href="javascript:void(0)"
+                    class="magnify-btn el-icon-refresh"
+                    title="实际尺寸"
+                    @click="actualSize()"
+                  ></a
+                  ><a
+                    href="javascript:void(0)"
+                    class="magnify-btn el-icon-zoom-out"
+                    title="缩小"
+                    @click="zoom(-0.2)"
+                  >
+                  </a> </template
+                ><a
+                  href="javascript:void(0)"
+                  class="magnify-btn el-icon-download"
+                  title="下载"
+                ></a>
+              </div>
+            </div>
+          </template>
+        </div>
+      </el-main>
+    </el-container>
+  </div>
+</template>
+ 
+
+<script>
+import dynamicElement from "../../mixins/dynamicElement";
+import dynamicViewerImage from "./dynamicViewerImage.vue";
+import dynamicViewerPDF from "./dynamicViewerPDF.vue";
+//import dynamicViewerVR from "./dynamicViewerVR.vue";
+export default {
+  name: "ct-viewerfile",
+  mixins: [dynamicElement],
+  components: {
+    "ct-viewerImage": dynamicViewerImage,
+    "ct-viewerPDF": dynamicViewerPDF,
+    // "ct-viewerVR": dynamicViewerVR,
+  },
+  props: {
+    MediaAlbum: Array,
+    groupIndex: Number,
+    index: Number,
+  },
+  data() {
+    return {
+      rotate: 0,
+      activeIndex: -1,
+      activeGroup: -1,
+      resultObject: "",
+      itemFile: {},
+      groupCountLen: 0,
+      activeitem: "",
+      openeds: [],
+      displayAreaWidth: 0,
+      displayAreabtm: 0,
+    };
+  },
+  created() {
+    var self = this;
+    this.groupCountLen = 0;
+    this.MediaAlbum.forEach((item, n) => {
+      self.openeds.push(n.toString());
+      item.medias.forEach((v) => {
+        this.groupCountLen++;
+      });
+    });
+  },
+
+  mounted() {
+    var self = this;
+    self.displayAreaWidth = this.DomWidth();
+    self.displayAreabtm =self.leftDomTop( self.$refs.displayArea.$el);
+    window.onresize = () => {
+        self.displayAreaWidth = self.DomWidth();
+      self.displayAreabtm =self.leftDomTop( self.$refs.displayArea.$el);
+    };
+
+    if (
+      this.groupIndex != undefined &&
+      this.index != undefined &&
+      this.groupIndex > -1 &&
+      this.index > -1
+    ) {
+      var item = this.MediaAlbum[this.groupIndex].medias[this.index];
+      this.handleClick(item, this.groupIndex, this.index);
+    }
+  },
+  methods: {
+  DomWidth(){ 
+      let arrLength = (window.innerWidth-this.$refs.viewerfile.offsetWidth);
+      arrLength=arrLength>0?arrLength:0;
+     var Width= window.innerWidth-arrLength-this.$refs.displayArea.$el.offsetLeft-40;
+     
+      return Width;
+    },
+    leftDomTop() {
+      const height = window.innerHeight; //可视区窗口高度
+      const curDomHeight = this.$refs.viewerfile.offsetHeight;
+      // const curDomHeight = dom.getBoundingClientRect().height
+      const curDomY = this.$refs.viewerfile.getBoundingClientRect().y;
+      let curDomBottom = height - curDomHeight - curDomY;
+      curDomBottom=curDomBottom>0?curDomBottom:0;
+      return curDomBottom;
+    },
+    FileExtension(item) {
+      return item.savedFileName.replace(/.+\./, "").toLowerCase();
+    },
+    offsetLeft(elements) {
+      var left = elements.offsetLeft;
+      var parent = elements.offsetParent;
+      while (parent != null) {
+        left += parent.offsetLeft;
+        parent = parent.offsetParent;
+      }
+
+      return left;
+    },
+    handleClick(item, groupIndex, index) {
+      if (index == this.activeIndex && groupIndex == this.activeGroup) return;
+      this.activeIndex = index;
+      this.activeGroup = groupIndex;
+      this.itemFile = item;
+
+      this.activeitem = groupIndex + "-" + index;
+
+      this.resultObject = this.itemFile.mediaUrl;
+
+      this.$forceUpdate();
+    },
+    jump(n) {
+      var item = {};
+      var groupIndex = this.activeGroup;
+      var index = -1;
+      if (n > 0) {
+        if (
+          this.activeGroup * 1 + this.activeIndex + 1 + n >=
+          this.groupCountLen
+        ) {
+          groupIndex = 0;
+          index = 0;
+        } else {
+          if (this.MediaAlbum[this.activeGroup].medias[this.activeIndex + n]) {
+            index = this.activeIndex + n;
+          } else {
+            if (
+              this.MediaAlbum[this.activeGroup + n] &&
+              this.MediaAlbum[this.activeGroup + n].medias[0]
+            ) {
+              index = 0;
+              groupIndex = this.activeGroup + n;
+            } else {
+              groupIndex = 0;
+              index = 0;
+            }
+          }
+        }
+      } else if (n < 0) {
+        if (this.activeGroup * 1 + this.activeIndex + n < 0) {
+          groupIndex = this.MediaAlbum.length - 1;
+          index = this.MediaAlbum[groupIndex].medias.length - 1;
+        } else {
+          if (this.MediaAlbum[this.activeGroup].medias[this.activeIndex + n]) {
+            index = this.activeIndex + n;
+          } else {
+            if (
+              this.MediaAlbum[this.activeGroup + n].medias[
+                this.MediaAlbum[this.activeGroup + n].medias.length - 1
+              ]
+            ) {
+              index = this.MediaAlbum[this.activeGroup + n].medias.length - 1;
+              groupIndex = this.activeGroup + n;
+            } else {
+              groupIndex = this.MediaAlbum.length - 1;
+              index = this.MediaAlbum[groupIndex].medias.length - 1;
+            }
+          }
+        }
+      }
+      item = this.MediaAlbum[groupIndex].medias[index];
+      this.handleClick(item, groupIndex, index);
+    },
+
+    //旋转图片
+    rotateImg(type) {
+      var currentDeg = this.rotate || 0;
+
+      if (type == "L") {
+        currentDeg = currentDeg - 90;
+      } else if (type == "R") {
+        currentDeg = currentDeg + 90;
+      }
+      if (Math.abs(currentDeg) >= 360) {
+        currentDeg = currentDeg % 360;
+      }
+      this.rotate = currentDeg;
+      this.$forceUpdate();
+    },
+
+    actualSize() {
+      this.rotate = 0;
+      this.$refs.viewerImage.actualSize();
+    },
+    zoom(n) {
+      this.$refs.viewerImage.zoom(n);
+    },
+  },
+};
+// 禁止右键菜单
+document.oncontextmenu = function () {
+  return false;
+};
+</script>
+
+<style>
+body,
+html {
+  height: 100%;
+}
+#viewer-file .el-container {
+  margin-bottom: 40px;
+  height: 100%;
+}
+
+.viewerContent {
+  cursor: move;
+  position: absolute !important;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+}
+
+.magnify-footer {
+  position: fixed;
+  height: 50px;
+  bottom: 0px;
+  text-align: center;
+  color: #fff;
+  z-index: 9;
+}
+
+.magnify-toolbar {
+  display: inline-block;
+  background-color: rgba(0, 0, 0, 0.5);
+  -webkit-border-radius: 5px 5px 0 0;
+  -moz-border-radius: 5px 5px 0 0;
+  border-radius: 5px 5px 0 0;
+}
+.magnify-toolbar .magnify-btn {
+  margin: 15px 20px;
+  color: #999;
+  font-size: 25px;
+  font-weight: 800;
+}
+.magnify-toolbar .magnify-btn:hover,
+.magnify-btn-close:hover {
+  color: #fff;
+}
+</style>

package/src/centaline/dynamicViewerFile/src/dynamicViewerImage.vue

@@ -0,0 +1,147 @@
+
+<template>
+  <div class="Imagebox" @mousewheel="bagimg($event)">
+    <img
+      id="ViewerImage"
+      class="scaleimg"
+      border="0"
+      v-bind:style="{
+        transform:
+          'scale(' +
+          (params.zoomVal || 1) +
+          ') rotate(' +
+          (rotate || 0) +
+          'deg)',
+      }"
+      :src="imgUrl"
+    />
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    imgUrl: String,
+    rotate: Number,
+  },
+  data() {
+    return {
+      params: {
+        zoomVal: 1,
+        left: 0,
+        top: 0,
+        currentX: 0,
+        currentY: 0,
+        flag: false,
+      },
+    };
+  },
+  mounted() {
+    this.startDrag(
+      document.getElementById("ViewerImage"),
+      document.getElementById("ViewerImage")
+    );
+  },
+  methods: {
+    zoom(n) {
+      this.params.zoomVal += n;
+    },
+    actualSize() {
+      this.params = {
+        zoomVal: 1,
+        left: 0,
+        top: 0,
+        currentX: 0,
+        currentY: 0,
+        flag: false,
+      };
+    },
+
+    bagimg(e) {
+      var e = document.getElementById("ViewerImage");
+      this.params.zoomVal += event.wheelDelta / 1200;
+      if (this.params.zoomVal >= 0.2) {
+      } else {
+        this.params.zoomVal = 0.2;
+        return false;
+      }
+    },
+    getImgCss(e, key) {
+      return e.currentStyle
+        ? e.currentStyle[key]
+        : document.defaultView.getComputedStyle(e, false)[key];
+    },
+    startDrag(bar, target, callback) {
+      let that = this;
+      if (that.getImgCss(target, "left") !== "auto") {
+        that.params.left = that.getImgCss(target, "left");
+      }
+      if (that.getImgCss(target, "top") !== "auto") {
+        that.params.top = that.getImgCss(target, "top");
+      }
+      bar.onmousedown = function (event) {
+        that.params.flag = true;
+        if (!event) {
+          event = window.event;
+          bar.onselectstart = function () {
+            return false;
+          };
+        }
+        let e = event;
+        that.params.currentX = e.clientX;
+        that.params.currentY = e.clientY;
+      };
+      document.onmouseup = function () {
+        that.params.flag = false;
+        if (that.getImgCss(target, "left") !== "auto") {
+          that.params.left = that.getImgCss(target, "left");
+        }
+        if (that.getImgCss(target, "top") !== "auto") {
+          that.params.top = that.getImgCss(target, "top");
+        }
+      };
+      document.onmousemove = function (event) {
+        let e = event ? event : window.event;
+        if (that.params.flag) {
+          let nowX = e.clientX,
+            nowY = e.clientY;
+          let disX = nowX - that.params.currentX,
+            disY = nowY - that.params.currentY;
+          target.style.left = parseInt(that.params.left) + disX + "px";
+          target.style.top = parseInt(that.params.top) + disY + "px";
+          if (typeof callback == "function") {
+            callback(
+              (parseInt(that.params.left) || 0) + disX,
+              (parseInt(that.params.top) || 0) + disY
+            );
+          }
+          if (event.preventDefault) {
+            event.preventDefault();
+          }
+          return false;
+        }
+      };
+    },
+  },
+};
+</script>
+
+<style>
+.Imagebox {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.scaleimg {
+  max-height: 100%;
+  max-width: 100%;
+  cursor: move;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+}
+</style>

package/src/centaline/dynamicViewerFile/src/dynamicViewerPDF.vue

@@ -0,0 +1,73 @@
+
+<template>
+  <div>
+    <pdf
+      v-for="i in numPages"
+      :key="i"
+      :src="fileUrl"
+      :page="i"
+      style="width: 100%"
+    >
+    </pdf>
+  </div>
+</template>
+<script>
+import pdf from "vue-pdf";
+export default {
+  components: {
+    pdf,
+  },
+  props: {
+    pdfUrl: String,
+  },
+  data() {
+    return {
+      numPages: 1,
+      fileUrl: "",
+    };
+  },
+  mounted() {
+    this.init(this.pdfUrl);
+  },
+  methods: {
+    init(pdfUrl) {
+      var self = this;
+      var loadingTask = pdf.createLoadingTask(pdfUrl);
+      loadingTask
+        .then((pdf) => {
+          self.fileUrl = loadingTask;
+          self.numPages = pdf.numPages;
+        })
+        .catch((err) => {
+          console.error("pdf加载失败");
+        });
+    },
+  },
+  watch: {
+    pdfUrl(newValue, oldValue) {
+      this.init(newValue);
+    },
+  },
+};
+</script>
+
+<style>
+.Imagebox {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.scaleimg {
+  max-height: 100%;
+  max-width: 100%;
+  cursor: move;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+}
+</style>