图表颜色

liuyg

2021-09-27 8c6cf205affbbc8ada74f00a7ca25ebca867e9ed

 src/views/resource/attachCopy.vue

@@ -47,6 +47,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 +73,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>
@@ -95,7 +112,7 @@
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: false,
        border: true, //liu
        index: true,
        stripe: true,
        viewBtn: true,
@@ -172,6 +189,18 @@
            ],
          },
          {
            label: "附件预览",
            prop: "link",
            type: "img",
            // rules: [
            //   {
            //     required: true,
            //     message: "请输入附件拓展名",
            //     trigger: "blur",
            //   },
            // ],
          },
          {
            label: "附件大小",
            prop: "attachSize",
            slot: true,
@@ -209,6 +238,8 @@
          },
        ],
      },
      imgSee: false,
      imgUrl: "",
    };
  },
  computed: {
@@ -353,6 +384,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>