From 76e9bb6df786f5d63b3ece31958bd989b3e6a9db Mon Sep 17 00:00:00 2001
From: Administrator <admin>
Date: Mon, 29 Mar 2021 09:36:20 +0800
Subject: [PATCH] 违禁品包裹图片预览优化
---
src/views/parcel/parcelKind.vue | 84 +++++++++++++++---------------------------
src/views/parcel/parcel.vue | 29 +++++++++-----
2 files changed, 48 insertions(+), 65 deletions(-)
diff --git a/src/views/parcel/parcel.vue b/src/views/parcel/parcel.vue
index 8d64188..6d30f8a 100644
--- a/src/views/parcel/parcel.vue
+++ b/src/views/parcel/parcel.vue
@@ -33,17 +33,14 @@
</template>
</avue-crud>
- <el-dialog
- :visible.sync="dialogTableVisible"
- :append-to-body="true"
- :close-on-click-modal="false"
- @opened="parcelConversation = true"
- @close="(parcelConversation = false), (oldParcelSatart = false)" >
+ <template>
<div>
- <el-image :src="'data:image/png;base64,'+imgUrl" :preview-src-list="'data:image/png;base64,'+imgUrl">
- </el-image>
+ <el-image-viewer
+ v-if="showViewer"
+ :on-close="closeViewer"
+ :url-list="['data:image/png;base64,'+imgUrl]" />
</div>
- </el-dialog>
+ </template>
</basic-container>
</template>
@@ -51,12 +48,16 @@
<script>
import {getList, getDetail, getParcelPic} from "@/api/parcel/parcel";
import {mapGetters} from "vuex";
+ import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
+ name:'index',
+ components: { ElImageViewer },
data() {
return {
form: {},
query: {},
+ showViewer: false, // 显示查看器
imgUrl:'',
loading: true,
dialogTableVisible: false,
@@ -309,10 +310,16 @@
});
},
handleParcelPic(row) {
+ var that=this;
getParcelPic(row.imgUrl).then(res => {
- this.imgUrl = res.data.data.imgBase64;
+ that.imgUrl = res.data.data.imgBase64;
+ //that.$refs.preview.clickHandler();
+ this.showViewer = true
});
- this.dialogTableVisible=true;
+ },
+ // 关闭查看器
+ closeViewer() {
+ this.showViewer = false
}
}
};
diff --git a/src/views/parcel/parcelKind.vue b/src/views/parcel/parcelKind.vue
index b3189e3..e922997 100644
--- a/src/views/parcel/parcelKind.vue
+++ b/src/views/parcel/parcelKind.vue
@@ -1,5 +1,5 @@
<template>
- <basic-container>
+ <basic-container>
<avue-crud :option="option"
:table-loading="loading"
:data="data"
@@ -25,65 +25,49 @@
:size="size"
:type="type"
@click.stop="handleParcelPic(row)"
- id="show"
>查看包裹图片
</el-button>
-
-
</template>
-
-
</avue-crud>
- <!-- <el-dialog
- :visible.sync="dialogTableVisible"
- :append-to-body="true"
- :close-on-click-modal="false"
- @opened="parcelConversation = true"
- @close="(parcelConversation = false), (oldParcelSatart = false)" >
- <div>
- <el-image :src="'data:image/png;base64,'+imgUrl">
- </el-image>
- </div>
- </el-dialog> -->
-
- <!-- <template>
- <div style="width: 100%; height: 100%;" id="divImage">
- <el-image v-show="flag" ref="image" v-image-preview :src="'data:image/png;base64,'+imgUrl"/>
- </div>
- </template> -->
<template>
- <div id="imgs">
- <!-- <el-button v-model="show" :images="images" @change="onChange">查看包裹图片</el-button> -->
- <el-image :src="'data:image/png;base64,'+imgUrl"/>
+ <div>
+ <!-- style="display:none" -->
+ <!-- <el-image
+ ref="preview"
+ :src="'data:image/png;base64,'+imgUrl"
+ :preview-src-list="['data:image/png;base64,'+imgUrl]"
+ z-index=9999></el-image> -->
+ <el-image-viewer
+ v-if="showViewer"
+ :on-close="closeViewer"
+ :url-list="['data:image/png;base64,'+imgUrl]" />
</div>
</template>
- </basic-container>
+ </basic-container>
+
</template>
+
<script>
import {getKindList, getParcelPic} from "@/api/parcel/parcel";
import {mapGetters} from "vuex";
- //import {ImagePreview} from "@/view/parcel/ImagePreview"
- // import VueDirectiveImagePreviewer from 'vue-directive-image-previewer';
- // import 'vue-directive-image-previewer/dist/assets/style.css';
import Vue from 'vue';
- import { ImagePreview } from 'vant';
- //Vue.use(ImagePreview);
- // Vue.use(VueDirectiveImagePreviewer, {
- // zIndex: 9999, //层级显示
- // previewSize: 3 //三倍图
- // });
+ import ElementUI from 'element-ui'
+ import 'element-ui/lib/theme-chalk/index.css'
+ import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
+ Vue.use(ElementUI)
+
export default {
+ name:'index',
+ components: { ElImageViewer },
data() {
return {
form: {},
query: {},
+ showViewer: false, // 显示查看器
imgUrl:'',
loading: true,
- dialogTableVisible: false,
- parcelConversation:false,
- oldParcelSatart:false,
page: {
pageSize: 10,
currentPage: 1,
@@ -294,22 +278,14 @@
var that = this;
getParcelPic(row.imgUrl).then(res => {
that.imgUrl = res.data.data.imgBase64;
- this.flag=true;
+ //that.$refs.preview.clickHandler();
+ this.showViewer = true
});
- // var divImage= document.getElementById("divImage");
- // console.log(divImage,111);
- // divImage.innerHTML=divImage.innerHTML+`<el-image ref="image" v-image-preview :src="'data:image/png;base64,'+imgUrl"/>`;
- // console.log(divImage,111);
- setTimeout(() => {
- //代码
- //that.$refs.image.$el.click();
- var image=new ImagePreview();
- image.Image(document.getElementById("imgs"));
- document.getElementById("show").onclick=function(){
- image.show(0);
- }
- }, 1000);
- }
+ },
+ // 关闭查看器
+ closeViewer() {
+ this.showViewer = false
+ }
}
};
</script>
--
Gitblit v1.9.3