预览

src/views/workOrder/components/ApprovalDetails.vue

@@ -1,5 +1,5 @@
 <template>
-  <m-dialog ref="dialog" title="申请单" v-bind="$attrs" v-on="$listeners" hideFooter>
+  <m-dialog ref="dialog" title="申请单" v-bind="$attrs" v-on="$listeners" hideFooter @close="onClose">
     <el-form label-width="120px" v-loading="loading">
       <el-form-item label="审核状态">
         <div class="justify-between align-center" :class="{'d-flex': itemData.status === 0}">
@@ -23,11 +23,23 @@
             <template slot="label">
               {{ item.title }}
             </template>
-            {{ items[item.column] }}
+            <template v-if="item.columnType === 1">
+              <m-button size="mini" type="orange" @click="onOpenPreview(items[item.column])">查看附件 ({{ items[item.column]?.length ?? 0 }})</m-button>
+            </template>
+            <template v-else>
+              {{items[item.column]}}
+            </template>
           </el-descriptions-item>
         </el-descriptions>
       </el-form-item>
     </el-form>
+    <el-image
+      ref="hiddenPreview"
+      style="display: none;"
+      :src="previewUrl.length ? previewUrl[0] : ''"
+      :preview-src-list="previewUrl"
+      @load="onLoad"
+    ></el-image>
     <template #button-after>
       <slot name="button-after" :item="itemData"></slot>
     </template>
@@ -45,6 +57,7 @@ export default {
   name: 'ApprovalDetails',
   data () {
     return {
+      previewUrl: [],
       statusList: APPROVAL_STATUS,
       headers: [],
       items: [],
@@ -53,6 +66,23 @@ export default {
     }
   },
   methods: {
+    onClose () {
+      this.previewUrl = []
+      this.$emit('close')
+    },
+    onLoad (e) {
+      if (!this.previewUrl.length) {
+        return
+      }
+      const img = this.$refs.hiddenPreview.$el.querySelector('img')
+      img && img.click()
+    },
+    onOpenPreview (items) {
+      this.previewUrl = []
+      this.$nextTick(() => {
+        this.previewUrl = items
+      })
+    },
     close () {
       this.$refs.dialog.close()
     },