查看器组件ok

components/page/filesViewer.vue

+<template>
+  <div class="files-viewer">
+    <Card class="card1" :style="card1New">
+      <div class="icon-click">
+        <!-- <a><Icon type="ios-add-circle-outline" @click="magnify" /></a>
+        <a><Icon type="ios-remove-circle-outline" @click="shrink" /> </a>
+        <a><Icon type="ios-power" /> </a> -->
+        <a> <Icon type="md-undo" @click="rotate" /></a>&nbsp;
+        <!-- <a> <Icon type="ios-print-outline" /></a> -->
+        <a><Icon type="md-arrow-down" @click="download" /> </a>
+      </div>
+      <div class="body-img">
+        <Icon
+          type="ios-arrow-back"
+          class="bg-b"
+          @click="leftIcon"
+          :class="isactive == 0 ? 'bg-b' : 'bg-b1'"
+        />
+        <div class="list-shoucang">
+          <img :src="avatorPath" v-if="downloadPath" :style="styleObj" />
+          <div class="files-list" v-else>
+            <p>文件名称</p>
+            <p>{{ imgObj.filsesName }}</p>
+            <p><a @click="download">下载查看文件</a></p>
+          </div>
+        </div>
+        <Icon
+          type="ios-arrow-forward"
+          @click="rightIcon"
+          :class="isactive == listTask.length ? 'bg-l' : 'bg-l1'"
+        />
+      </div>
+    </Card>
+    <div class="show-list-img">
+      <div @click="showList">
+        <Icon type="md-arrow-dropdown" v-show="showIcon" />
+        <Icon type="md-arrow-dropup" v-show="!showIcon" />
+      </div>
+    </div>
+    <Card class="card-list" v-show="showIcon">
+      <Icon
+        type="ios-arrow-back"
+        :class="num < 0 ? 'bg-b1' : 'bg-b'"
+        @click="leftmove"
+      />
+      <div class="ying-cang">
+        <div
+          class="list-c"
+          :style="{ width: '100%', 'margin-left': num * 227 + 'px' }"
+        >
+          <div v-for="(item, index) in listTask" :key="index" :name="item.id">
+            <div
+              class="img-list"
+              @click="clickItem(item, index)"
+              :class="isactive == index ? 'addclass' : ''"
+            >
+              <img
+                v-if="
+                  item.fileType == 'jpg' ||
+                  item.fileType == 'gif' ||
+                  item.fileType == 'png'
+                "
+                :src="downUrl + item.downloadPath"
+                width="100%"
+                height="100%"
+              />
+              <div class="files-list" v-else>
+                <p>文件类型</p>
+                <p>{{ item.fileType }}</p>
+                <p>文件名称</p>
+                <p>{{ item.newName }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <Icon
+        type="ios-arrow-forward"
+        :class="listTask.length > 16 && showArrow ? 'bg-l1' : 'bg-l'"
+        @click="rightmove"
+      />
+    </Card>
+  </div>
+</template>
+<script>
+export default {
+  name: "",
+  data() {
+    return {
+      downUrl: fileUrlDown, //附件路径
+      downloadPath: "", //附件地址
+      card1New: {
+        height: "",
+      },
+      listTask: [],
+      imgObj: {
+        filesPath: "",
+        filsesName: "",
+      },
+      isactive: 0,
+      avatorPath: "",
+      num: 0,
+      num1: 0,
+      showIcon: true,
+      showArrow: true,
+      multiples: 1, // 放大或者缩小
+      deg: 0, // 旋转的角度
+      styleObj: null, // 拖拽时修改图片的样式
+      isDrag: false, // 是否开始拖拽
+      startX: 0, // 鼠标的点击X轴
+      startY: 0, // 鼠标的点击Y轴
+      moveX: 0, // 鼠标移动的X轴
+      moveY: 0, // 鼠标移动的Y轴
+      endX: 0,
+      endY: 0,
+    };
+  },
+  props: {
+    parms: {
+      type: [String, Object],
+      default: "",
+    },
+  },
+  mounted() {
+    if (this.parms.eid) {
+      this.filesList();
+    }
+  },
+  methods: {
+    // // 放大
+    // magnify() {
+    //   if (this.multiples >= 10) {
+    //     return;
+    //   }
+    //   this.multiples += 0.25;
+    //   this.styleObj = `transform: scale(${this.multiples}); rotateZ(${this.deg}deg);left:${this.endX}px;top:${this.endY}px`;
+    // },
+    // // 缩小
+    // shrink() {
+    //   if (this.multiples <= 0) {
+    //     return;
+    //   }
+    //   this.multiples -= 0.25;
+    //   this.styleObj = `transform: scale(${this.multiples}) rotateZ(${this.deg}deg);left:${this.endX}px;top:${this.endY}px`;
+    // },
+    // 旋转
+    rotate() {
+      this.deg += 90;
+      if (this.deg >= 360) {
+        this.deg = 0;
+      }
+      this.styleObj = `transform: scale(${this.multiples}) rotateZ(${this.deg}deg);left:${this.endX}px;top:${this.endY}px`;
+    },
+    showList() {
+      this.showIcon = !this.showIcon;
+      if (this.showIcon == true) {
+        this.card1New.height = "72vh";
+      } else {
+        this.card1New.height = "90vh";
+      }
+    },
+    leftIcon() {
+      if (this.isactive == 0) {
+        return false;
+        // this.$Message.error("已是第一个一个");
+      }
+      this.isactive = this.isactive - 1;
+    },
+    rightIcon() {
+      if (this.isactive == this.listTask.length) {
+        return false;
+        //  this.$Message.error("已是最后一个");
+      }
+      this.isactive = this.isactive + 1;
+    },
+    clickItem(item, index) {
+      this.isactive = index;
+      if (
+        item.fileType == "jpg" ||
+        item.fileType == "gif" ||
+        item.fileType == "png"
+      ) {
+        this.downloadPath = item.downloadPath;
+      } else {
+        this.downloadPath = "";
+      }
+      this.imgObj.id = item.id;
+      this.imgObj.filesPath = item.downloadPath;
+      this.imgObj.filsesName = item.newName;
+    },
+    download() {
+      window.open(this.downUrl + this.imgObj.filesPath, "_blank");
+    },
+
+    leftmove() {
+      if (this.num < 0) {
+        this.num += 1;
+        if (this.num == 0) {
+          this.showArrow = true;
+        }
+      }
+    },
+    rightmove() {
+      if (this.num + this.listTask.length > 16) {
+        this.num -= 1;
+        if (this.num + this.listTask.length == 16) {
+          this.showArrow = false;
+        }
+      } else {
+        this.showArrow = false;
+      }
+    },
+    filesList() {
+      //查询上传到文件服务器上的文件
+      this.$http.sysUser.getFile(this.parms).then((res) => {
+        if (res.data != [] && res.data.length > 0) {
+          var items = [];
+          res.data.forEach((data) => {
+            let objImag = {};
+            objImag.newName = data.newName;
+            objImag.downloadPath = data.downloadPath;
+            objImag.id = data.id;
+            objImag.fileType = data.fileType;
+            items.push(objImag);
+          });
+          this.listTask = items;
+          if (
+            this.listTask[0].fileType == "jpg" ||
+            this.listTask[0].fileType == "gif" ||
+            this.listTask[0].fileType == "png"
+          ) {
+            // this.avatorPath = this.downUrl + this.listTask[0].downloadPath;
+            this.downloadPath = this.listTask[0].downloadPath;
+          }
+        }
+      });
+    },
+  },
+  watch: {
+    "parms.eid"(v) {
+      if (v) {
+        this.filesList();
+      }
+    },
+    downloadPath(v) {
+      if (v) {
+        this.avatorPath = this.downUrl + v;
+      }
+    },
+    isactive(v) {
+      if (v) {
+        this.listTask.map((item, index) => {
+          if (v == index) {
+            if (
+              item.fileType == "jpg" ||
+              item.fileType == "gif" ||
+              item.fileType == "png"
+            ) {
+              this.downloadPath = item.downloadPath;
+            } else {
+              this.downloadPath = "";
+            }
+            this.imgObj.id = item.id;
+            this.imgObj.filesPath = item.downloadPath;
+            this.imgObj.filsesName = item.newName;
+          }
+        });
+      }
+    },
+  },
+};
+</script>
+<style lang="less">
+// @import "../../assets/css/custom.less";
+.files-viewer {
+  .card1 {
+    height: 72vh;
+    .icon-click {
+      text-align: center;
+      font-size: 17px;
+      a {
+        border: 1px dashed #999;
+      }
+    }
+    .body-img {
+      height: 100%;
+      display: flex;
+      display: -webkit-flex;
+      // flex-direction:column;
+      justify-content: center; /*定义body的里的元素水平居中*/
+      .bg-b {
+        width: 40px;
+        height: 40px;
+        padding: 5px 0 0 -4px;
+        font-size: 40px;
+        color: #515a6e;
+        opacity: 0.2;
+        margin-top: 15%;
+        cursor: pointer;
+        background-color: rgba(131, 134, 139, 0.5);
+        border-radius: 50%;
+      }
+      .bg-b1 {
+        width: 40px;
+        height: 40px;
+        padding: 5px 0 0 -4px;
+        font-size: 40px;
+        color: #515a6e;
+        opacity: 0.6;
+        margin-top: 15%;
+        cursor: pointer;
+        background-color: rgba(131, 134, 139, 0.5);
+        border-radius: 50%;
+      }
+      .bg-l {
+        width: 40px;
+        height: 40px;
+        padding: 1px 0 0 4px;
+        margin-top: 15%;
+        font-size: 40px;
+        opacity: 0.2;
+        color: #515a6e;
+        cursor: pointer;
+        background-color: rgba(131, 134, 139, 0.5);
+        border-radius: 50%;
+      }
+      .bg-l1 {
+        width: 40px;
+        height: 40px;
+        padding: 1px 0 0 4px;
+        margin-top: 15%;
+        font-size: 40px;
+        color: #515a6e;
+        opacity: 0.6;
+        cursor: pointer;
+        background-color: rgba(131, 134, 139, 0.5);
+        border-radius: 50%;
+      }
+      .list-shoucang {
+        width: 96%;
+        text-align: center;
+        img {
+          padding-top: 10%;
+        }
+        .files-list {
+          width: 500px;
+          height: 300px;
+          margin: 10% auto;
+          border: 1px dashed #999;
+          padding-top: 90px;
+          p {
+            height: 50px;
+          }
+        }
+      }
+    }
+  }
+  .show-list-img {
+    width: 100%;
+    height: 25px;
+    font-size: 30px;
+    margin-top: -18px;
+    text-align: center;
+    div {
+      cursor: pointer;
+    }
+  }
+  .card-list {
+    width: 100%;
+    height: 160px;
+    margin-top: 15px;
+    position: relative;
+    padding-top: 5px;
+    .bg-b {
+      font-size: 30px;
+      color: #515a6e;
+      opacity: 0.2;
+      position: absolute;
+      top: 55px;
+      left: 0;
+      cursor: pointer;
+    }
+    .bg-b1 {
+      font-size: 30px;
+      color: #515a6e;
+      opacity: 0.6;
+      position: absolute;
+      top: 55px;
+      left: 0;
+      cursor: pointer;
+    }
+    .bg-l {
+      font-size: 30px;
+      color: #515a6e;
+      opacity: 0.2;
+      position: absolute;
+      top: 55px;
+      right: 0;
+      cursor: pointer;
+    }
+    .bg-l1 {
+      font-size: 30px;
+      color: #515a6e;
+      opacity: 0.6;
+      position: absolute;
+      top: 55px;
+      right: 0;
+      cursor: pointer;
+    }
+    .ivu-card-body {
+      width: 100%;
+      display: flex;
+      display: -webkit-flex;
+      text-align: center;
+      padding: 15px 37px;
+      overflow: hidden;
+    }
+    .ying-cang {
+      width: 100%;
+      overflow: hidden;
+
+      .list-c {
+        width: 100%;
+        text-align: center;
+        margin: 0 auto;
+        display: -webkit-inline-box;
+        display: inline-box;
+        .img-list {
+          width: 101px;
+          height: 101px;
+          margin: 10px 6px;
+          border: 1px dashed #999;
+          padding: 1px;
+          cursor: pointer;
+        }
+        .img-list:hover {
+          box-shadow: darkgrey 3px 3px 12px 3px; //边框阴影
+        }
+        .files-list {
+          overflow: hidden;
+          text-align: center;
+          p {
+            height: 25px;
+          }
+        }
+      }
+    }
+  }
+  .addclass {
+    border: 2px solid #2680eb !important;
+  }
+}
+// .files-view .ivu-card > .ivu-card-body {
+//   padding: 14px 0 0 5px;
+// }
+</style>

pages/project/project/index.vue

@@ -123,14 +123,16 @@
     >
       <component :is="detail" :eid="curId" @on-close="cancel" @on-ok="ok" />
     </Modal>
+    <!-- width="800" -->
     <Modal
       v-model="modal1"
       title="查看附件"
-      width="800"
+      fullscreen
       footer-hide
       :mask-closable="false"
     >
-      <FilesView ref="refFile" :parms="parms" />
+      <FilesViewer :parms="parms"/>
+      <!-- <FilesView ref="refFile" :parms="parms" /> -->
     </Modal>
   </div>
 </template>

plugins/iview.js

@@ -74,6 +74,7 @@ import Pictrue from '@/components/page/pictrue.vue'
 import WordTree from '@/components/page/wordTree.vue'
 import Actions from '@/components/page/actions.vue'
 import TimeDifference from '@/components/page/timeDifference.vue'
+import FilesViewer from '@/components/page/filesViewer.vue'
 
 
 
@@ -153,6 +154,7 @@ Vue.component("Pictrue",Pictrue)
 Vue.component("WordTree",WordTree)
 Vue.component("Actions",Actions)
 Vue.component("TimeDifference",TimeDifference)
+Vue.component("FilesViewer",FilesViewer)