南昌市物联网技防平台-前端
zengh
2021-03-26 ed9f239c21cf3e4b5f68b0c6ca0cdb6a8a3ec41a
src/views/parcel/parcelKind.vue
@@ -31,12 +31,23 @@
      
    </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"  :preview-src-list="'data:image/png;base64,'+imgUrl">
        </el-image>
      </div>
    </el-dialog>
    <!-- <template>
        <div>
          <img v-image-preview src="'data:image/png;base64,'+imgUrl"/>
        <div style="width: 100%; height: 100%;">
          <el-image ref="image" v-image-preview :src="'data:image/png;base64,'+imgUrl"/>
        </div>
      </template> -->
    </template> -->
  </basic-container>
</template>
@@ -46,7 +57,10 @@
  import VueDirectiveImagePreviewer from 'vue-directive-image-previewer';
  import 'vue-directive-image-previewer/dist/assets/style.css';
  import Vue from 'vue';
  Vue.use(VueDirectiveImagePreviewer);
  Vue.use(VueDirectiveImagePreviewer, {
    zIndex: 9999,  //层级显示
    previewSize: 3 //三倍图
  });
  export default {
    data() {
@@ -54,7 +68,11 @@
        form: {},
        query: {},
        imgUrl:'',
        isShow:true,
        loading: true,
        dialogTableVisible: false,
        parcelConversation:false,
        oldParcelSatart:false,
        page: {
          pageSize: 10,
          currentPage: 1,
@@ -185,11 +203,7 @@
    },
    methods: {
      beforeOpen(done, type) {
        if (["edit", "view"].includes(type)) {
          getDetail(this.form.id).then(res => {
            this.form = res.data.data;
          });
        }
        done();
      },
      searchReset() {
@@ -264,12 +278,20 @@
          this.selectionClear();
        });
      },
      // handleParcelPic(row) {
      //   getParcelPic(row.imgUrl).then(res => {
      //       this.imgUrl = res.data.data.imgBase64;
      //     });
      //   setTimeout(() => {
      //       //代码
      //       this.$refs.image.$el.click();
      //   }, 1000);
      // },
      handleParcelPic(row) {
        console.log(row.imgUrl);
        getParcelPic(row.imgUrl).then(res => {
            this.imgUrl = res.data.data.imgBase64;
          });
        this.dialogTableVisible = true;
          this.dialogTableVisible=true;
      }
    }
  };