新增图片展示

src/components/ImagePreview/index.js

@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import main from './src'
+
+const testComponent = Vue.extend(main)
+
+export default function (src) {
+  const extendComponent = new testComponent({
+    data() {
+      return {
+        src,
+      }
+    },
+  }).$mount()
+  document.body.appendChild(extendComponent.$el)
+}

src/components/ImagePreview/src/index.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="background-box">
+    <div class="video-box">
+      <el-button type="primary" class="close-icon" @click="destroyElement"
+        >关闭</el-button
+      >
+      <img :src="src" class="image" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      src: "",
+    };
+  },
+  methods: {
+    destroyElement() {
+      this.$destroy(true);
+      this.$el.parentNode.removeChild(this.$el);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.background-box {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: rgba($color: #000000, $alpha: 0.325);
+  z-index: 9999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .video-box {
+    width: 50%;
+    height: 50%;
+    position: relative;
+    .close-icon {
+      position: absolute;
+      margin: auto;
+      right: 0;
+      top: -50px;
+    }
+    .image {
+      width: 100%;
+      height: 100%;
+      background-color: #000000;
+      object-fit: contain;
+    }
+  }
+}
+</style>

src/views/subject/index.vue

@@ -23,6 +23,7 @@
         <el-select v-model="queryParams.issueValue" placeholder="请选择分类">
           <el-option
             v-for="item in issueTypeList"
+            :key="item.typeId"
             :label="item.title"
             :value="item.typeId"
           />
@@ -46,12 +47,20 @@
     <div class="table-box">
       <el-table v-loading="loading" :data="list" height="100%">
         <el-table-column label="ID" align="center" prop="id" />
-        <el-table-column
-          label="题目"
-          width="300px"
-          align="center"
-          prop="issue"
-        />
+        <el-table-column label="指定顺序" align="center" width="300px">
+          <template slot-scope="scope">
+            <el-card :body-style="{ padding: '5px' }">
+              <div class="issue-card">
+                <span>{{ scope.row.issue }}</span>
+                <img
+                  v-if="scope.row.image"
+                  :src="scope.row.image"
+                  @click="imagePreview(scope.row.image)"
+                />
+              </div>
+            </el-card>
+          </template>
+        </el-table-column>
         <el-table-column label="指定顺序" align="center" width="130px">
           <template slot-scope="scope">
             <el-card :body-style="{ padding: '5px' }">
@@ -102,6 +111,7 @@
 
 <script>
 import subjectApi from "@/api/subject";
+import imagePreview from "@/components/ImagePreview";
 
 export default {
   name: "Subject",
@@ -142,6 +152,8 @@ export default {
     },
   },
   methods: {
+    /**预览图片 */
+    imagePreview: imagePreview,
     /**查询用户列表 */
     async getList() {
       this.loading = true;
@@ -212,7 +224,16 @@ export default {
     flex-grow: 1;
   }
 }
-
+.issue-card {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  img {
+    width: 50%;
+    cursor: pointer;
+  }
+}
 .sort-card {
   display: flex;
   flex-direction: column;