2023-8-23

src/views/component/detail.vue

@@ -68,8 +68,12 @@
                 detail.id_assets_file_files_file_id_relation.length > 0
               "
             >
-              <div v-for="item in detail.id_assets_file_files_file_id_relation">
+              <div v-for="item in detail.id_assets_file_files_file_id_relation" style="display: flex;justify-content: space-between;">
                 <a :download="item.url">{{ item.original_name }}</a>
+                <div>
+                  <el-button type="primary" icon="el-icon-download" circle size="mini" @click="down(item)"></el-button>
+                  <el-button type="primary" icon="el-icon-search" circle size="mini" @click="open(item.url)"></el-button>
+                </div>
               </div>
             </template>
             <template v-else>
@@ -95,7 +99,7 @@
                 <el-image
                   style="width: 100%; height: 100%"
                   :src="item.url"
-                  :preview-src-list="picList"
+                  :preview-src-list="detail.id_assets_picture_files_file_id_relation.map(i=>i.url)"
                   fit="contain"
                 ></el-image>
               </div>
@@ -144,6 +148,24 @@
         </el-card>
       </el-col>
     </el-row>
+
+
+    <Modal
+      :width="76"
+      transfer
+      :z-index="6000"
+      v-model="showModal"
+      :footer-hide="true"
+      title="预览"
+    >
+      <template>
+        <iframe
+          style="width: 100%; height: 57vh"
+          :src="codeUri"
+          border="0"
+        ></iframe>
+      </template>
+    </Modal>
   </div>
 </template>
 
@@ -152,10 +174,13 @@ import { show, index } from "@/api/system/baseForm";
 import { show as formShow } from "@/api/system/customForm";
 import { getparameter } from "@/api/system/dictionary";
 import { listdept } from "@/api/system/department";
+import { download } from "@/utils/downloadRequest";
 export default {
   name: "detail",
   data() {
     return {
+      showModal:false,
+      codeUri: "",
       center: [120.283692, 31.614211],
       marker: {},
 
@@ -178,6 +203,18 @@ export default {
     };
   },
   methods: {
+    open(url) {
+      this.codeUri = `http://view.ali251.langye.net:8012/onlinePreview?url=${encodeURIComponent(
+        new Buffer(url).toString("base64")
+      )}`;
+
+      this.showModal = true;
+    },
+
+    down(e) {
+      download(e.url, "get", {}, e.original_name);
+    },
+
     init() {
       this.map = new AMap.Map("detail-map", {
         center: this.center,
@@ -374,6 +411,17 @@ export default {
 ::v-deep .el-empty__image {
   width: 120px;
 }
+
+a {
+  color: red;
+  text-decoration: none;
+  transition: all 0.2s;
+}
+
+a:hover {
+  color: red;
+  text-decoration: underline;
+}
 </style>
 <style lang="scss">
 .map-marker {