Administrator
2022-04-11 79d9fc857559982b00b68b2d709807bdc4cd286f
src/views/resource/attachCopy.vue
@@ -1,5 +1,10 @@
<template>
  <basic-container class="hasButTwo">
  <basic-container
    :class="[
      'hasButTwo',
      $store.state.control.windowWidth >= 1024 ? 'oneRowSearch' : '',
    ]"
  >
    <avue-crud
      :option="option"
      :table-loading="loading"
@@ -47,6 +52,14 @@
          @click="handleDownload(scope.row)"
          >下载
        </el-button>
        <el-button
          type="text"
          icon="el-icon-picture-outline-round"
          size="small"
          v-show="!fileFormat(scope.row)"
          @click="seeImages(scope.row)"
          >预览
        </el-button>
      </template>
      <template slot-scope="{ row }" slot="attachSize">
        <el-tag>{{ `${row.attachSize} KB` }}</el-tag>
@@ -65,6 +78,15 @@
        :upload-after="uploadAfter"
      >
      </avue-form>
    </el-dialog>
    <el-dialog
      title="预览"
      append-to-body
      :visible.sync="imgSee"
      class="see-img-box"
    >
      <div class="img" :style="{ background: imgUrl }"></div>
    </el-dialog>
  </basic-container>
</template>
@@ -86,6 +108,7 @@
        pageSize: 10,
        currentPage: 1,
        total: 0,
        ...this.$store.state.control.changePageSize,
      },
      attachBox: false,
      selectionList: [],
@@ -95,12 +118,13 @@
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: false,
        border: true, //liu
        index: true,
        stripe: true,
        viewBtn: true,
        selection: true,
        dialogClickModal: false,
        ...this.$store.state.control.clearOtherBut,
        column: [
          {
            label: "附件地址",
@@ -172,6 +196,18 @@
            ],
          },
          {
            label: "附件预览",
            prop: "link",
            type: "img",
            // rules: [
            //   {
            //     required: true,
            //     message: "请输入附件拓展名",
            //     trigger: "blur",
            //   },
            // ],
          },
          {
            label: "附件大小",
            prop: "attachSize",
            slot: true,
@@ -209,6 +245,8 @@
          },
        ],
      },
      imgSee: false,
      imgUrl: "",
    };
  },
  computed: {
@@ -353,6 +391,32 @@
        this.selectionClear();
      });
    },
    seeImages(row) {
      this.imgUrl = "";
      this.imgUrl = "url(" + row.link + ") center center / contain no-repeat";
      this.imgSee = true;
    },
    fileFormat(row) {
      var index = row.link.lastIndexOf(".");
      var ext = row.link.substr(index + 1);
      return (
        [
          "png",
          "jpg",
          "jpeg",
          "bmp",
          "gif",
          "webp",
          "psd",
          "svg",
          "tiff",
        ].indexOf(ext.toLowerCase()) == -1
      );
    },
  },
};
</script>