违禁品包裹图片预览优化

Administrator

2021-03-29 76e9bb6df786f5d63b3ece31958bd989b3e6a9db

 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
      }
    }
  };