From 7076deb2b6da9ab0a8b599c61150ec2bd5a926f8 Mon Sep 17 00:00:00 2001 From: 疯狂的狮子li <15040126243@163.com> Date: 星期四, 20 五月 2021 13:23:12 +0800 Subject: [PATCH] update 请求响应对象 与 分页对象 结构修改 适配接口文档配置 --- ruoyi-ui/src/components/FileUpload/index.vue | 358 +++++++++++++++++++++++++++++----------------------------- 1 files changed, 179 insertions(+), 179 deletions(-) diff --git a/ruoyi-ui/src/components/FileUpload/index.vue b/ruoyi-ui/src/components/FileUpload/index.vue index d19a012..81e2b3a 100644 --- a/ruoyi-ui/src/components/FileUpload/index.vue +++ b/ruoyi-ui/src/components/FileUpload/index.vue @@ -1,179 +1,179 @@ -<template> - <div class="upload-file"> - <el-upload - :action="uploadFileUrl" - :before-upload="handleBeforeUpload" - :file-list="fileList" - :limit="1" - :on-error="handleUploadError" - :on-exceed="handleExceed" - :on-success="handleUploadSuccess" - :show-file-list="false" - :headers="headers" - class="upload-file-uploader" - ref="upload" - > - <!-- 涓婁紶鎸夐挳 --> - <el-button size="mini" type="primary">閫夊彇鏂囦欢</el-button> - <!-- 涓婁紶鎻愮ず --> - <div class="el-upload__tip" slot="tip" v-if="showTip"> - 璇蜂笂浼� - <template v-if="fileSize"> 澶у皬涓嶈秴杩� <b style="color: #f56c6c">{{ fileSize }}MB</b> </template> - <template v-if="fileType"> 鏍煎紡涓� <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template> - 鐨勬枃浠� - </div> - </el-upload> - - <!-- 鏂囦欢鍒楄〃 --> - <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul"> - <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in list"> - <el-link :href="file.url" :underline="false" target="_blank"> - <span class="el-icon-document"> {{ getFileName(file.name) }} </span> - </el-link> - <div class="ele-upload-list__item-content-action"> - <el-link :underline="false" @click="handleDelete(index)" type="danger">鍒犻櫎</el-link> - </div> - </li> - </transition-group> - </div> -</template> - -<script> -import { getToken } from "@/utils/auth"; - -export default { - props: { - // 鍊� - value: [String, Object, Array], - // 澶у皬闄愬埗(MB) - fileSize: { - type: Number, - default: 5, - }, - // 鏂囦欢绫诲瀷, 渚嬪['png', 'jpg', 'jpeg'] - fileType: { - type: Array, - default: () => ["doc", "xls", "ppt", "txt", "pdf"], - }, - // 鏄惁鏄剧ず鎻愮ず - isShowTip: { - type: Boolean, - default: true - } - }, - data() { - return { - uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 涓婁紶鐨勫浘鐗囨湇鍔″櫒鍦板潃 - headers: { - Authorization: "Bearer " + getToken(), - }, - fileList: [], - }; - }, - computed: { - // 鏄惁鏄剧ず鎻愮ず - showTip() { - return this.isShowTip && (this.fileType || this.fileSize); - }, - // 鍒楄〃 - list() { - let temp = 1; - if (this.value) { - // 棣栧厛灏嗗�艰浆涓烘暟缁� - const list = Array.isArray(this.value) ? this.value : [this.value]; - // 鐒跺悗灏嗘暟缁勮浆涓哄璞℃暟缁� - return list.map((item) => { - if (typeof item === "string") { - item = { name: item, url: item }; - } - item.uid = item.uid || new Date().getTime() + temp++; - return item; - }); - } else { - this.fileList = []; - return []; - } - }, - }, - methods: { - // 涓婁紶鍓嶆牎妫�鏍煎紡鍜屽ぇ灏� - handleBeforeUpload(file) { - // 鏍℃鏂囦欢绫诲瀷 - if (this.fileType) { - let fileExtension = ""; - if (file.name.lastIndexOf(".") > -1) { - fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1); - } - const isTypeOk = this.fileType.some((type) => { - if (file.type.indexOf(type) > -1) return true; - if (fileExtension && fileExtension.indexOf(type) > -1) return true; - return false; - }); - if (!isTypeOk) { - this.$message.error(`鏂囦欢鏍煎紡涓嶆纭�, 璇蜂笂浼�${this.fileType.join("/")}鏍煎紡鏂囦欢!`); - return false; - } - } - // 鏍℃鏂囦欢澶у皬 - if (this.fileSize) { - const isLt = file.size / 1024 / 1024 < this.fileSize; - if (!isLt) { - this.$message.error(`涓婁紶鏂囦欢澶у皬涓嶈兘瓒呰繃 ${this.fileSize} MB!`); - return false; - } - } - return true; - }, - // 鏂囦欢涓暟瓒呭嚭 - handleExceed() { - this.$message.error(`鍙厑璁镐笂浼犲崟涓枃浠禶); - }, - // 涓婁紶澶辫触 - handleUploadError(err) { - this.$message.error("涓婁紶澶辫触, 璇烽噸璇�"); - }, - // 涓婁紶鎴愬姛鍥炶皟 - handleUploadSuccess(res, file) { - this.$message.success("涓婁紶鎴愬姛"); - this.$emit("input", res.url); - }, - // 鍒犻櫎鏂囦欢 - handleDelete(index) { - this.fileList.splice(index, 1); - this.$emit("input", ''); - }, - // 鑾峰彇鏂囦欢鍚嶇О - getFileName(name) { - if (name.lastIndexOf("/") > -1) { - return name.slice(name.lastIndexOf("/") + 1).toLowerCase(); - } else { - return ""; - } - } - }, - created() { - this.fileList = this.list; - }, -}; -</script> - -<style scoped lang="scss"> -.upload-file-uploader { - margin-bottom: 5px; -} -.upload-file-list .el-upload-list__item { - border: 1px solid #e4e7ed; - line-height: 2; - margin-bottom: 10px; - position: relative; -} -.upload-file-list .ele-upload-list__item-content { - display: flex; - justify-content: space-between; - align-items: center; - color: inherit; -} -.ele-upload-list__item-content-action .el-link { - margin-right: 10px; -} -</style> \ No newline at end of file +<template> + <div class="upload-file"> + <el-upload + :action="uploadFileUrl" + :before-upload="handleBeforeUpload" + :file-list="fileList" + :limit="1" + :on-error="handleUploadError" + :on-exceed="handleExceed" + :on-success="handleUploadSuccess" + :show-file-list="false" + :headers="headers" + class="upload-file-uploader" + ref="upload" + > + <!-- 涓婁紶鎸夐挳 --> + <el-button size="mini" type="primary">閫夊彇鏂囦欢</el-button> + <!-- 涓婁紶鎻愮ず --> + <div class="el-upload__tip" slot="tip" v-if="showTip"> + 璇蜂笂浼� + <template v-if="fileSize"> 澶у皬涓嶈秴杩� <b style="color: #f56c6c">{{ fileSize }}MB</b> </template> + <template v-if="fileType"> 鏍煎紡涓� <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template> + 鐨勬枃浠� + </div> + </el-upload> + + <!-- 鏂囦欢鍒楄〃 --> + <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul"> + <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in list"> + <el-link :href="file.url" :underline="false" target="_blank"> + <span class="el-icon-document"> {{ getFileName(file.name) }} </span> + </el-link> + <div class="ele-upload-list__item-content-action"> + <el-link :underline="false" @click="handleDelete(index)" type="danger">鍒犻櫎</el-link> + </div> + </li> + </transition-group> + </div> +</template> + +<script> +import { getToken } from "@/utils/auth"; + +export default { + props: { + // 鍊� + value: [String, Object, Array], + // 澶у皬闄愬埗(MB) + fileSize: { + type: Number, + default: 5, + }, + // 鏂囦欢绫诲瀷, 渚嬪['png', 'jpg', 'jpeg'] + fileType: { + type: Array, + default: () => ["doc", "xls", "ppt", "txt", "pdf"], + }, + // 鏄惁鏄剧ず鎻愮ず + isShowTip: { + type: Boolean, + default: true + } + }, + data() { + return { + uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 涓婁紶鐨勫浘鐗囨湇鍔″櫒鍦板潃 + headers: { + Authorization: "Bearer " + getToken(), + }, + fileList: [], + }; + }, + computed: { + // 鏄惁鏄剧ず鎻愮ず + showTip() { + return this.isShowTip && (this.fileType || this.fileSize); + }, + // 鍒楄〃 + list() { + let temp = 1; + if (this.value) { + // 棣栧厛灏嗗�艰浆涓烘暟缁� + const list = Array.isArray(this.value) ? this.value : [this.value]; + // 鐒跺悗灏嗘暟缁勮浆涓哄璞℃暟缁� + return list.map((item) => { + if (typeof item === "string") { + item = { name: item, url: item }; + } + item.uid = item.uid || new Date().getTime() + temp++; + return item; + }); + } else { + this.fileList = []; + return []; + } + }, + }, + methods: { + // 涓婁紶鍓嶆牎妫�鏍煎紡鍜屽ぇ灏� + handleBeforeUpload(file) { + // 鏍℃鏂囦欢绫诲瀷 + if (this.fileType) { + let fileExtension = ""; + if (file.name.lastIndexOf(".") > -1) { + fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1); + } + const isTypeOk = this.fileType.some((type) => { + if (file.type.indexOf(type) > -1) return true; + if (fileExtension && fileExtension.indexOf(type) > -1) return true; + return false; + }); + if (!isTypeOk) { + this.$message.error(`鏂囦欢鏍煎紡涓嶆纭�, 璇蜂笂浼�${this.fileType.join("/")}鏍煎紡鏂囦欢!`); + return false; + } + } + // 鏍℃鏂囦欢澶у皬 + if (this.fileSize) { + const isLt = file.size / 1024 / 1024 < this.fileSize; + if (!isLt) { + this.$message.error(`涓婁紶鏂囦欢澶у皬涓嶈兘瓒呰繃 ${this.fileSize} MB!`); + return false; + } + } + return true; + }, + // 鏂囦欢涓暟瓒呭嚭 + handleExceed() { + this.$message.error(`鍙厑璁镐笂浼犲崟涓枃浠禶); + }, + // 涓婁紶澶辫触 + handleUploadError(err) { + this.$message.error("涓婁紶澶辫触, 璇烽噸璇�"); + }, + // 涓婁紶鎴愬姛鍥炶皟 + handleUploadSuccess(res, file) { + this.$message.success("涓婁紶鎴愬姛"); + this.$emit("input", res.data.url); + }, + // 鍒犻櫎鏂囦欢 + handleDelete(index) { + this.fileList.splice(index, 1); + this.$emit("input", ''); + }, + // 鑾峰彇鏂囦欢鍚嶇О + getFileName(name) { + if (name.lastIndexOf("/") > -1) { + return name.slice(name.lastIndexOf("/") + 1).toLowerCase(); + } else { + return ""; + } + } + }, + created() { + this.fileList = this.list; + }, +}; +</script> + +<style scoped lang="scss"> +.upload-file-uploader { + margin-bottom: 5px; +} +.upload-file-list .el-upload-list__item { + border: 1px solid #e4e7ed; + line-height: 2; + margin-bottom: 10px; + position: relative; +} +.upload-file-list .ele-upload-list__item-content { + display: flex; + justify-content: space-between; + align-items: center; + color: inherit; +} +.ele-upload-list__item-content-action .el-link { + margin-right: 10px; +} +</style> -- Gitblit v1.9.3