:feat:新增应用图片和视频预览

base-manager-ui/admin/src/components/PrevieModal.vue

+<template>
+  <div class="previe-modal" v-if="Visible" @click="Visible = false">
+    <img @click.stop v-if="previeData.type === 'img'" :src="previeData.url" />
+    <video
+      @click.stop
+      v-else
+      :src="previeData.url"
+      autoplay
+      muted
+      controls
+    ></video>
+    <img class="close-btn" src="../assets/img/c.png" alt="" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    previeData: {
+      type: Object,
+      required: true,
+      default: () => {
+        return {};
+      },
+    },
+    previeVisible: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+  },
+  computed: {
+    Visible: {
+      get() {
+        return this.previeVisible;
+      },
+      set(val) {
+        this.$emit("update:previeVisible", val);
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.previe-modal {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  z-index: 10000;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  img,
+  video {
+    height: 400px;
+    max-width: 800px;
+    object-fit: contain;
+  }
+  .close-btn {
+    width: 40px;
+    height: 40px;
+    margin-top: 30px;
+    cursor: pointer;
+  }
+}
+</style>
\ No newline at end of file

base-manager-ui/admin/src/pages/basicset/appmarket/components/DataUpdate.vue

@@ -63,9 +63,24 @@
 
         <!-- 图片 -->
         <template slot="img" slot-scope="text">
-          <img width="40" :src="api + text.img" />
+          <img
+            v-if="text.img"
+            width="50"
+            :src="api + text.img"
+            @click="handlePreview('img', api + text.img)"
+          />
+          <span v-else>--</span>
+        </template>
+        <!-- 视频 -->
+        <template slot="video" slot-scope="text">
+          <video
+            v-if="text.video"
+            width="50"
+            :src="api + text.video"
+            @click="handlePreview('vidoe', api + text.video)"
+          />
+          <span v-else>--</span>
         </template>
-
         <!-- 操作 -->
         <template slot="action" slot-scope="text">
           <a-space size="middle">
@@ -82,6 +97,11 @@
       :AddVisible.sync="AddVisible"
       :title="title"
     ></AddData>
+    <!-- 预览 -->
+    <PrevieModal
+      :previeVisible.sync="previeVisible"
+      :previeData="previeData"
+    ></PrevieModal>
   </div>
 </template>
 
@@ -89,6 +109,7 @@
 import AddData from "../modal/AddData.vue";
 import { mapGetters } from "vuex";
 import { getDatasetList, deleteDataset } from "@/services/market";
+import PrevieModal from "@/components/PrevieModal.vue";
 export default {
   // props: {
   //   // 应用信息
@@ -102,6 +123,7 @@ export default {
   // },
   components: {
     AddData,
+    PrevieModal,
   },
   data() {
     return {
@@ -117,6 +139,8 @@ export default {
       AddVisible: false,
       title: "",
       fieldCode: "",
+      previeVisible: false,
+      previeData: {}, // 预览信息
     };
   },
   computed: {
@@ -145,6 +169,11 @@ export default {
               title: v.fieldName,
               scopedSlots: { customRender: "img" },
             };
+          } else if (v.fieldCode === "video") {
+            return {
+              title: v.fieldName,
+              scopedSlots: { customRender: "video" },
+            };
           } else {
             return {
               title: v.fieldName,
@@ -243,6 +272,14 @@ export default {
         },
       });
     },
+    // 预览
+    handlePreview(type, url) {
+      this.previeData = {
+        type,
+        url,
+      };
+      this.previeVisible = true;
+    },
   },
 };
 </script>
@@ -252,4 +289,8 @@ export default {
   display: flex;
   justify-content: flex-end;
 }
+img,
+video {
+  cursor: pointer;
+}
 </style>
\ No newline at end of file