文件查看组件

components/page/filesView.vue

+<template>
+  <div class="files-list">
+    <Tag v-for="(item, index) in nameList" :key="index" :name="item.id">
+      <a @click="downFile(item)" target="_blank">{{ item.fileName }}</a>
+    </Tag>
+    <Modal
+      v-model="modal"
+      title="查看"
+      width="800"
+      footer-hide
+      :mask-closable="false"
+    >
+      <div class="img">
+        <img :src="avatorPath" width="100%" height="100%" />
+      </div>
+    </Modal>
+  </div>
+</template>
+<script>
+export default {
+  name: "",
+  data() {
+    return {
+      downUrl: fileUrlDown,
+      avatorPath: "",
+      nameList: [],
+      modal: false,
+    };
+  },
+  props: {
+    parms: {
+      type: [String, Object],
+      default: "",
+    },
+  },
+
+  mounted() {
+    if (this.parms.eid) {
+      this.filesList();
+    }
+  },
+  methods: {
+    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.fileName = data.fileName;
+            objImag.filePath = data.downloadPath;
+            objImag.id = data.id;
+            objImag.fileType = data.fileType;
+            items.push(objImag);
+          });
+          this.nameList = items;
+        }
+      });
+    },
+    downFile(item) {
+      console.log(item);
+      if (
+        item.fileType == "jpg" ||
+        item.fileType == "gif" ||
+        item.fileType == "png"
+      ) {
+        this.avatorPath = this.downUrl + item.filePath;
+        this.modal = true;
+      } else {
+        window.open(this.downUrl + item.filePath, "_blank");
+      }
+    },
+  },
+  watch: {
+    "parms.eid"(v) {
+      if (v) {
+        this.filesList();
+      }
+    },
+  },
+};
+</script>
+<style scoped>
+</style>
+

pages/project/project/detail.vue

@@ -53,7 +53,6 @@ export default {
       detail: null,
       curId: this.eid,
       avatorPath: "",
-      downUrl: fileUrlDown,
       entity: {},
       rules: {
         name: [{ required: true, message: "必填", trigger: "blur" }],

pages/project/project/details.vue

@@ -47,7 +47,6 @@ export default {
   data() {
     return {
       avatorPath: "",
-      downUrl: fileUrlDown,
       entity: this.row,
       parms: {
         app: "material",

pages/project/project/index.vue

@@ -123,6 +123,15 @@
     >
       <component :is="detail" :eid="curId" @on-close="cancel" @on-ok="ok" />
     </Modal>
+    <Modal
+      v-model="modal1"
+      title="查看附件"
+      width="800"
+      footer-hide
+      :mask-closable="false"
+    >
+      <FilesView ref="refFile" :parms="parms" class="files-detail" />
+    </Modal>
   </div>
 </template>
 <script>
@@ -235,21 +244,21 @@ export default {
             );
           },
         },
-        // {
-        //   key: "attachment",
-        //   title: this.l("attachment"),
-        //   align: "center",
-        //   high: true,
-        //   render: (h, params) => {
-        //     return h(
-        //       "a",
-        //       {
-        //         on: { click: () => this.view(params.row.id) },
-        //       },
-        //       "查看附件"
-        //     );
-        //   },
-        // },
+        {
+          key: "attachment",
+          title: this.l("attachment"),
+          align: "center",
+          high: true,
+          render: (h, params) => {
+            return h(
+              "a",
+              {
+                on: { click: () => this.viewFiles(params.row) },
+              },
+              "查看附件"
+            );
+          },
+        },
         // {
         //   key: "phase",
         //   title: this.l("phase"),
@@ -345,10 +354,17 @@ export default {
       typeInfo: "table",
       iconInfo: "md-list",
       titleInfo: "列表模式",
+      parms: {
+        app: "material",
+        eid: null,
+        name: "",
+        field: "",
+      },
+      modal1: false,
     };
   },
   mounted() {
-    console.log(this);
+    this.parms.eid = this.$u.guid();
   },
   async fetch({ store, params }) {
     await store.dispatch("loadDictionary"); // 加载数据字典
@@ -390,6 +406,12 @@ export default {
       console.log(row);
       window.open(fileUrlDown + row.picture, "_blank");
     },
+    viewFiles(row) {
+      console.log(row);
+      this.parms.eid = row.attachment;
+    
+      this.modal1 = true;
+    },
     ok() {
       this.$refs.grid.load();
       this.modal = false;
@@ -540,4 +562,7 @@ export default {
     }
   }
 }
+.files-detail {
+  min-height: 300px;
+}
 </style>
\ No newline at end of file

plugins/iview.js

@@ -51,6 +51,8 @@ import NewInputFile from '@/components/page/newInputFile.vue'
 import imgUploadFile from '@/components/page/imgUploadFile.vue'
 import files from '@/components/page/files.vue'
 import FilesList from '@/components/page/filesList.vue'
+import FilesView from '@/components/page/filesView.vue'
+
 import DataGrid from '@/components/page/dataGrid.vue'
 import TreeGrid from '@/components/page/treeGrid/index.vue'
 import Filed from '@/components/page/filed.vue'
@@ -112,6 +114,7 @@ Vue.component("imgUploadFile", imgUploadFile)
 Vue.component("InputIcon", InputIcon)
 Vue.component("files", files)
 Vue.component("FilesList", FilesList)
+Vue.component("FilesView", FilesView)
 Vue.component("DataGrid", DataGrid)
 Vue.component("TreeGrid", TreeGrid)
 Vue.component("Filed", Filed)