dzqm.vue 2.71 KB
<template>
    <div class="from-clues">
      <!-- 表单部分 -->
      <div class="from-clues-header">
        <el-form :model="ruleForm" label-width="80px">
          <el-row>
            <el-col :span="5">
              <el-form-item label="电子签名">
                <el-input></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="19" class="btnColRight">
              <el-form-item>
                <el-button type="primary" native-type="submit">查询</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <di>
        <el-upload
          action="#"
          list-type="picture-card"
          
          :auto-upload="false">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url" alt=""
              >
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleDownload(file)"
                >
                  <i class="el-icon-download"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>

      </di>
      <!-- 表格 -->
    </div>
  </template>
    <script>
    import table from "@/utils/mixin/table";
    import { upload } from "@/api/file.js";

    export default {
      name: "dzqm",
      components: {},
      mixins: [table],
      mounted () {
      },
      data () {
        return {
          dialogImageUrl: '',
          dialogVisible: false,
          disabled: false

        }
      },
      methods: {

        handleRemove(file) {
          console.log(file);
        },
        handlePictureCardPreview(file) {
          this.dialogImageUrl = file.url;
          this.dialogVisible = true;
        },
        handleDownload(file) {
          console.log(file);
        }

      },
    };
    </script>
    <style scoped lang="scss">
    @import "~@/styles/public.scss";
  </style>