From 39a0e05f87494d6cc84001b0b6d8e534685aaed6 Mon Sep 17 00:00:00 2001 From: 疯狂的狮子li <15040126243@163.com> Date: 星期五, 21 五月 2021 17:58:01 +0800 Subject: [PATCH] update 请求响应对象 与 分页对象 结构修改 适配接口文档配置 --- ruoyi-ui/src/components/ImageUpload/index.vue | 200 +++++++++++++++++++++++++------------------------- 1 files changed, 100 insertions(+), 100 deletions(-) diff --git a/ruoyi-ui/src/components/ImageUpload/index.vue b/ruoyi-ui/src/components/ImageUpload/index.vue index ce540eb..17d30d8 100644 --- a/ruoyi-ui/src/components/ImageUpload/index.vue +++ b/ruoyi-ui/src/components/ImageUpload/index.vue @@ -1,100 +1,100 @@ -<template> - <div class="component-upload-image"> - <el-upload - :action="uploadImgUrl" - list-type="picture-card" - :on-success="handleUploadSuccess" - :before-upload="handleBeforeUpload" - :on-error="handleUploadError" - name="file" - :show-file-list="false" - :headers="headers" - style="display: inline-block; vertical-align: top" - > - <el-image v-if="!value" :src="value"> - <div slot="error" class="image-slot"> - <i class="el-icon-plus" /> - </div> - </el-image> - <div v-else class="image"> - <el-image :src="value" :style="`width:150px;height:150px;`" fit="fill"/> - <div class="mask"> - <div class="actions"> - <span title="棰勮" @click.stop="dialogVisible = true"> - <i class="el-icon-zoom-in" /> - </span> - <span title="绉婚櫎" @click.stop="removeImage"> - <i class="el-icon-delete" /> - </span> - </div> - </div> - </div> - </el-upload> - <el-dialog :visible.sync="dialogVisible" title="棰勮" width="800" append-to-body> - <img :src="value" style="display: block; max-width: 100%; margin: 0 auto;"> - </el-dialog> - </div> -</template> - -<script> -import { getToken } from "@/utils/auth"; - -export default { - data() { - return { - dialogVisible: false, - uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 涓婁紶鐨勫浘鐗囨湇鍔″櫒鍦板潃 - headers: { - Authorization: "Bearer " + getToken(), - }, - }; - }, - props: { - value: { - type: String, - default: "", - }, - }, - methods: { - removeImage() { - this.$emit("input", ""); - }, - handleUploadSuccess(res) { - this.$emit("input", res.url); - this.loading.close(); - }, - handleBeforeUpload() { - this.loading = this.$loading({ - lock: true, - text: "涓婁紶涓�", - background: "rgba(0, 0, 0, 0.7)", - }); - }, - handleUploadError() { - this.$message({ - type: "error", - message: "涓婁紶澶辫触", - }); - this.loading.close(); - }, - }, - watch: {}, -}; -</script> - -<style scoped lang="scss"> -.image { - position: relative; - .mask { - opacity: 0; - position: absolute; - top: 0; - width: 100%; - background-color: rgba(0, 0, 0, 0.5); - transition: all 0.3s; - } - &:hover .mask { - opacity: 1; - } -} -</style> \ No newline at end of file +<template> + <div class="component-upload-image"> + <el-upload + :action="uploadImgUrl" + list-type="picture-card" + :on-success="handleUploadSuccess" + :before-upload="handleBeforeUpload" + :on-error="handleUploadError" + name="file" + :show-file-list="false" + :headers="headers" + style="display: inline-block; vertical-align: top" + > + <el-image v-if="!value" :src="value"> + <div slot="error" class="image-slot"> + <i class="el-icon-plus" /> + </div> + </el-image> + <div v-else class="image"> + <el-image :src="value" :style="`width:150px;height:150px;`" fit="fill"/> + <div class="mask"> + <div class="actions"> + <span title="棰勮" @click.stop="dialogVisible = true"> + <i class="el-icon-zoom-in" /> + </span> + <span title="绉婚櫎" @click.stop="removeImage"> + <i class="el-icon-delete" /> + </span> + </div> + </div> + </div> + </el-upload> + <el-dialog :visible.sync="dialogVisible" title="棰勮" width="800" append-to-body> + <img :src="value" style="display: block; max-width: 100%; margin: 0 auto;"> + </el-dialog> + </div> +</template> + +<script> +import { getToken } from "@/utils/auth"; + +export default { + data() { + return { + dialogVisible: false, + uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 涓婁紶鐨勫浘鐗囨湇鍔″櫒鍦板潃 + headers: { + Authorization: "Bearer " + getToken(), + }, + }; + }, + props: { + value: { + type: String, + default: "", + }, + }, + methods: { + removeImage() { + this.$emit("input", ""); + }, + handleUploadSuccess(res) { + this.$emit("input", res.data.url); + this.loading.close(); + }, + handleBeforeUpload() { + this.loading = this.$loading({ + lock: true, + text: "涓婁紶涓�", + background: "rgba(0, 0, 0, 0.7)", + }); + }, + handleUploadError() { + this.$message({ + type: "error", + message: "涓婁紶澶辫触", + }); + this.loading.close(); + }, + }, + watch: {}, +}; +</script> + +<style scoped lang="scss"> +.image { + position: relative; + .mask { + opacity: 0; + position: absolute; + top: 0; + width: 100%; + background-color: rgba(0, 0, 0, 0.5); + transition: all 0.3s; + } + &:hover .mask { + opacity: 1; + } +} +</style> -- Gitblit v1.9.3