添加图片预览和下载

public/config.js

@@ -76,6 +76,7 @@ window.SERVICE_ID = {
   baggageDetails: 44, // 行李-详情列表
   baggageMessage: 3066, // 行李-原始报文
   baggageTime: 20039, //行李-起飞降落日期
+  baggageImage: 3230, //行李-照片
 
   /***-----容器视图------***/
   containerHistory: 18026,

src/views/newBagDetails/index.vue

@@ -14,7 +14,7 @@
           <el-col :span="20">
             <el-scrollbar>
               <div class="tags-view-wrapper">
-                <div v-for="(item,index) in detailsArr" class="tags-view-item" @click="tagClick(item,index)" :class="activeIndex == index ? 'active' : ''" :key="index">{{ item.luggageNum }}</div>
+                <div v-for="(item,index) in detailsArr" class="tags-view-item" @click="tagClick(item,index)" :class="activeIndex == index ? 'active' : ''" :key="index">{{ item.luggageNum }}-<el-button @click.stop="getImg(item)" type="text">照片</el-button></div>
               </div>
             </el-scrollbar>
           </el-col>
@@ -45,6 +45,22 @@
         <component ref="dataChild" :query="query" :queryObj="queryObj" :tableDatas="tableDatas" :tagObj="tagObj" :is="componentName"></component>
       </div>
     </div>
+    <Dialog :flag="imgFlag" width="600px" class="dialog-check-img">
+      <div class="dialog-wrapper">
+        <div class="title">照片预览</div>
+        <div style="height: 600px" class="content">
+          <el-row :gutter="20">
+            <el-col v-for="(item,index) in srcUrl" :key="index" :span="8">
+              <el-image :src="'data:image/gif;base64,'+item.picData" :preview-src-list="srcList">
+              </el-image>
+            </el-col>
+          </el-row>
+        </div>
+        <div class="foot right t30">
+          <el-button size="medium" class="r24" @click="imgFlag = false" type="primary">确定</el-button>
+        </div>
+      </div>
+    </Dialog>
   </div>
 </template>
 
@@ -53,13 +69,14 @@ import ScrollPane from "@/layout/components/TagsView/ScrollPane.vue"
 import baggageView from './components/baggageView.vue'
 import baggageList from './components/baggageList.vue'
 import baggageMessage from './components/baggageMessage.vue'
+import Dialog from '@/layout/components/Dialog/index.vue'
 import pf from '@/layout/mixin/publicFunc'
 import { getAuthData, formatOrder } from '@/utils/validate'
 import { getToken } from '@/utils/auth'
 export default {
   name: 'NewBagDetails',
   mixins: [pf],
-  components: { ScrollPane, baggageView, baggageList, baggageMessage },
+  components: { ScrollPane, baggageView, baggageList, baggageMessage, Dialog },
   data () {
     return {
       infoArrs: [],
@@ -90,7 +107,10 @@ export default {
       tableDatas: [],
       tableDatas5Id: '',
       loading: false,
-      queryObj: {}
+      queryObj: {},
+      imgFlag: false,
+      srcList: [],
+      srcUrl: []
     }
   },
   created () {
@@ -238,6 +258,22 @@ export default {
         this.tabIndex = index
         this.componentName = item.key
       }, 10);
+    },
+    async getImg (item) {
+      const { luggageNum, carrierFlightsDate } = item
+      const { code, returnData } = await this.getQueryList(SERVICE_ID.baggageImage, { luggageNum, carrierFlightsDate })
+      if (code == 0 && returnData && returnData.length) {
+        const urls = []
+        this.imgFlag = true
+        this.srcUrl = returnData
+        const datas = [...returnData]
+        datas.forEach(item => {
+          urls.push('data:image/gif;base64,' + item.picData)
+        })
+        this.srcList = urls
+      } else {
+        this.$message.warning('暂无照片')
+      }
     }
   }
 }

src/views/table/css/index.scss

@@ -8,6 +8,14 @@
       margin-top: 25px;
     }
   }
+  .manageTitle{
+    line-height: 41px;
+  }
+  .btn-img{
+    position: relative;
+    top: 10px;
+    margin-left: 10px;
+  }
   ::v-deep .table {
     width: 100%;
     margin-top: 25px;

src/views/table/index.vue

@@ -6,6 +6,7 @@
         <div>
           <auth-button :auth="btnAddObj" />
           <auth-button :auth="btnQueryObj" />
+          <img v-if="isDown" class="btn-img btn-shadow" src="@/assets/baggage/ic_export.png" title="导出" @click="exportHandler('table', pageTitle)" />
         </div>
       </div>
       <template v-if="tableData.length || tableCols.length">
@@ -114,6 +115,7 @@ import Dialog from "@/layout/components/Dialog/index.vue";
 import NoData from "@/components/nodata";
 import AdvanceQuery from './components/advanceQuery.vue';
 import AuthButton from './components/authButton.vue';
+import { exportToExcel } from "@/utils/table";
 import { translateDataToTreeAllTreeMsg, getAuthData } from "@/utils/validate";
 import { Query, newData, modifyData, moveData, abnormalDataRecovery } from "@/api/webApi";
 import { getToken } from '@/utils/auth';
@@ -221,7 +223,8 @@ export default {
       authId: '',
       tableDataSortRules: {},
       tableKey: '',
-      dataContent: {}
+      dataContent: {},
+      downPath: ['/successlog', '/errorlog']
     };
   },
   computed: {
@@ -285,6 +288,14 @@ export default {
       )
       return this._.orderBy(filtered, sortRules[0], sortRules[1])
     },
+    isDown () {
+      const url = this.$route.path
+      if (this.downPath.includes(url)) {
+        return true
+      } else {
+        return false
+      }
+    }
   },
   mounted () {
     const { query } = this.$route
@@ -1019,7 +1030,12 @@ export default {
         return (cellValue ?? '').replace('T', ' ')
       }
       return cellValue
-    }
+    },
+    exportHandler (refName, tableName) {
+      const table = this.$refs[refName].$el.cloneNode(true);
+      const fileName = `${tableName}.xlsx`;
+      exportToExcel(table, tableName, fileName);
+    },
   },
 };
 </script>