图片附件预览

shuishen

2021-08-13 9a4b8c7ad8d51c5b588d5679b72045efd93a79a7

图片附件预览

 src/styles/common.scss

@@ -35,3 +35,31 @@
}
//滚动条样式
@include scrollBar;


.see-img-box {

  .el-dialog {
    width: 840px;
    height: 540px;

    .el-dialog__body {
      padding: 4px;
      position: relative;
      height: calc(100% - 62px);
    }

    div.img {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: calc(100% - 8px);
      height: calc(100% - 8px);
      overflow: hidden;
    }
  }

}

 src/views/record/record.vue

@@ -552,7 +552,7 @@
                this.selectionClear();
            });
        },
        rowStyle ({ row, column, rowIndex }) {
        rowStyle ({ row }) {
            if (row.dtype != null && row.dtype != "") {
                if (row.dtype == "2") {
                    return {

 src/views/resource/attach.vue

@@ -1,7 +1,6 @@
<template>
  <basic-container>
    <avue-crud
      :option="option"
        <avue-crud :option="option"
      :table-loading="loading"
      :data="data"
      :page.sync="page"
@@ -9,7 +8,6 @@
      :before-open="beforeOpen"
      v-model="form"
      ref="crud"
      @row-click="rowClick"
      @row-del="rowDel"
      @search-change="searchChange"
      @search-reset="searchReset"
@@ -17,8 +15,7 @@
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
                   @on-load="onLoad">
      <template slot="menuLeft">
        <!--        <el-button type="primary"-->
        <!--                   size="small"-->
@@ -33,33 +30,48 @@
        <!--                   @click="handleDelete">删 除-->
        <!--        </el-button>-->
      </template>
      <template slot-scope="scope" slot="menu">
        <el-button
          type="text"
            <template slot-scope="scope"
                      slot="menu">
                <el-button type="text"
          icon="el-icon-download"
          size="small"
          @click="handleDownload(scope.row)"
          >下载
                           @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">
            <template slot-scope="{ row }"
                      slot="attachSize">
        <el-tag>{{ `${row.attachSize} KB` }}</el-tag>
      </template>
    </avue-crud>
    <el-dialog
      title="附件管理"
        <el-dialog title="附件管理"
      append-to-body
      :visible.sync="attachBox"
      width="555px"
    >
      <avue-form
        ref="form"
                   width="555px">
            <avue-form ref="form"
        :option="attachOption"
        v-model="attachForm"
        :upload-after="uploadAfter"
      >
                       :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>

@@ -75,8 +87,6 @@
      form: {},
      query: {},
      loading: true,
      imgUrl: "",
      showViewer: false, // 显示查看器
      page: {
        pageSize: 10,
        currentPage: 1,
@@ -225,6 +235,9 @@
          },
        ],
      },

            imgSee: false,
            imgUrl: ""
    };
  },
  created() {
@@ -266,11 +279,6 @@
    },
  },
  methods: {
    rowClick(row) {
      var that = this;
      that.imgUrl = row.link;
      this.showViewer = true;
    },
    handleUpload() {
      this.attachBox = true;
    },
@@ -372,6 +380,23 @@
        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>

 src/views/resource/uploadNotice.vue

@@ -1,7 +1,6 @@
<template>
  <basic-container>
    <avue-crud
      :option="option"
        <avue-crud :option="option"
      :table-loading="loading"
      :data="data"
      :page.sync="page"
@@ -16,55 +15,64 @@
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
                   @on-load="onLoad">
      <template slot="menuLeft">
        <el-button
          type="primary"
                <el-button type="primary"
          size="small"
          plain
          v-if="permission.attach_upload"
          icon="el-icon-upload2"
          @click="handleUpload"
          >上 传
                           @click="handleUpload">上 传
        </el-button>
        <el-button
          type="danger"
                <el-button type="danger"
          size="small"
          icon="el-icon-delete"
          plain
          v-if="permission.attach_delete"
          @click="handleDelete"
          >删 除
                           @click="handleDelete">删 除
        </el-button>
      </template>
      <template slot-scope="scope" slot="menu">
        <el-button
          type="text"
            <template slot-scope="scope"
                      slot="menu">
                <el-button type="text"
          icon="el-icon-download"
          size="small"
          v-if="permission.attach_download"
          @click="handleDownload(scope.row)"
          >下载
                           @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">
            <template slot-scope="{ row }"
                      slot="attachSize">
        <el-tag>{{ `${row.attachSize} KB` }}</el-tag>
      </template>
    </avue-crud>
    <el-dialog
      title="附件管理"
        <el-dialog title="附件管理"
      append-to-body
      :visible.sync="attachBox"
      width="555px"
    >
      <avue-form
        ref="form"
                   width="555px">
            <avue-form ref="form"
        :option="attachOption"
        v-model="attachForm"
        :upload-after="uploadAfter"
      >
                       :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>
@@ -202,6 +210,9 @@
          },
        ],
      },

            imgSee: false,
            imgUrl: ""
    };
  },
  computed: {
@@ -342,6 +353,22 @@
        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>