From 8eac239e48680c37fa822e40b54a5bdad908043a Mon Sep 17 00:00:00 2001 From: RuoYi Date: Fri, 9 Jul 2021 21:10:08 +0800 Subject: [PATCH 1/7] =?UTF-8?q?FileUpload=E7=BB=84=E4=BB=B6=E6=94=AF?= =?UTF-8?q?=E6=8C=81=E5=A4=9A=E6=96=87=E4=BB=B6=E4=B8=8A=E4=BC=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ruoyi-ui/src/components/FileUpload/index.vue | 74 ++++++++++++-------- 1 file changed, 46 insertions(+), 28 deletions(-) diff --git a/ruoyi-ui/src/components/FileUpload/index.vue b/ruoyi-ui/src/components/FileUpload/index.vue index af22f19a..da14d724 100644 --- a/ruoyi-ui/src/components/FileUpload/index.vue +++ b/ruoyi-ui/src/components/FileUpload/index.vue @@ -4,7 +4,7 @@ :action="uploadFileUrl" :before-upload="handleBeforeUpload" :file-list="fileList" - :limit="1" + :limit="limit" :on-error="handleUploadError" :on-exceed="handleExceed" :on-success="handleUploadSuccess" @@ -26,7 +26,7 @@ -
  • +
  • {{ getFileName(file.name) }} @@ -42,9 +42,15 @@ import { getToken } from "@/utils/auth"; export default { + name: "FileUpload", props: { // 值 value: [String, Object, Array], + // 数量限制 + limit: { + type: Number, + default: 5, + }, // 大小限制(MB) fileSize: { type: Number, @@ -70,30 +76,35 @@ export default { fileList: [], }; }, + watch: { + value: { + handler(val) { + if (val) { + let temp = 1; + // 首先将值转为数组 + const list = Array.isArray(val) ? val : this.value.split(','); + // 然后将数组转为对象数组 + this.fileList = 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 []; + } + }, + deep: true, + immediate: true + } + }, 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: { // 上传前校检格式和大小 @@ -126,7 +137,7 @@ export default { }, // 文件个数超出 handleExceed() { - this.$message.error(`只允许上传单个文件`); + this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`); }, // 上传失败 handleUploadError(err) { @@ -135,12 +146,13 @@ export default { // 上传成功回调 handleUploadSuccess(res, file) { this.$message.success("上传成功"); - this.$emit("input", res.data.url); + this.fileList.push({ name: res.data.url, url: res.data.url }); + this.$emit("input", this.listToString(this.fileList)); }, // 删除文件 handleDelete(index) { this.fileList.splice(index, 1); - this.$emit("input", ''); + this.$emit("input", this.listToString(this.fileList)); }, // 获取文件名称 getFileName(name) { @@ -149,11 +161,17 @@ export default { } else { return ""; } + }, + // 对象转成指定字符串分隔 + listToString(list, separator) { + let strs = ""; + separator = separator || ","; + for (let i in list) { + strs += list[i].url + separator; + } + return strs != '' ? strs.substr(0, strs.length - 1) : ''; } - }, - created() { - this.fileList = this.list; - }, + } }; From 7e2dbc560891168eacee55d66c6e21789d2bc117 Mon Sep 17 00:00:00 2001 From: RuoYi Date: Fri, 9 Jul 2021 21:11:07 +0800 Subject: [PATCH 2/7] =?UTF-8?q?ImageUpload=E7=BB=84=E4=BB=B6=E6=94=AF?= =?UTF-8?q?=E6=8C=81=E5=A4=9A=E5=9B=BE=E7=89=87=E4=B8=8A=E4=BC=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ruoyi-ui/src/components/ImageUpload/index.vue | 195 ++++++++++++++---- ruoyi-ui/src/components/TopNav/index.vue | 4 +- 2 files changed, 152 insertions(+), 47 deletions(-) diff --git a/ruoyi-ui/src/components/ImageUpload/index.vue b/ruoyi-ui/src/components/ImageUpload/index.vue index cf772eed..8597595e 100644 --- a/ruoyi-ui/src/components/ImageUpload/index.vue +++ b/ruoyi-ui/src/components/ImageUpload/index.vue @@ -5,33 +5,38 @@ list-type="picture-card" :on-success="handleUploadSuccess" :before-upload="handleBeforeUpload" + :limit="limit" :on-error="handleUploadError" + :on-exceed="handleExceed" name="file" - :show-file-list="false" + :on-remove="handleRemove" + :show-file-list="true" :headers="headers" - style="display: inline-block; vertical-align: top" + :file-list="fileList" + :on-preview="handlePictureCardPreview" + :class="{hide: this.fileList.length >= this.limit}" > - -
    - -
    -     -
    - -
    -
    - - - - - - -
    -
    -
    + - - + + +
    + 请上传 + + + 的文件 +
    + + + @@ -40,36 +45,123 @@ import { getToken } from "@/utils/auth"; export default { + props: { + value: [String, Object, Array], + // 图片数量限制 + limit: { + type: Number, + default: 5, + }, + // 大小限制(MB) + fileSize: { + type: Number, + default: 5, + }, + // 文件类型, 例如['png', 'jpg', 'jpeg'] + fileType: { + type: Array, + default: () => ["png", "jpg", "jpeg"], + }, + // 是否显示提示 + isShowTip: { + type: Boolean, + default: true + } + }, data() { return { + dialogImageUrl: "", dialogVisible: false, + hideUpload: false, uploadImgUrl: process.env.VUE_APP_BASE_API + "/file/upload", // 上传的图片服务器地址 headers: { Authorization: "Bearer " + getToken(), }, + fileList: [] }; }, - props: { + watch: { value: { - type: String, - default: "", + handler(val) { + if (val) { + // 首先将值转为数组 + const list = Array.isArray(val) ? val : this.value.split(','); + // 然后将数组转为对象数组 + this.fileList = list.map(item => { + if (typeof item === "string") { + item = { name: item, url: item }; + } + return item; + }); + } else { + this.fileList = []; + return []; + } + }, + deep: true, + immediate: true + } + }, + computed: { + // 是否显示提示 + showTip() { + return this.isShowTip && (this.fileType || this.fileSize); }, }, methods: { - removeImage() { - this.$emit("input", ""); + // 删除图片 + handleRemove(file, fileList) { + const findex = this.fileList.indexOf(file.name); + this.fileList.splice(findex, 1); + this.$emit("input", this.listToString(this.fileList)); }, + // 上传成功回调 handleUploadSuccess(res) { - this.$emit("input", res.data.url); + this.fileList.push({ name: res.data.url, url: res.data.url }); + this.$emit("input", this.listToString(this.fileList)); this.loading.close(); }, - handleBeforeUpload() { + // 上传前loading加载 + handleBeforeUpload(file) { + let isImg = false; + if (this.fileType.length) { + let fileExtension = ""; + if (file.name.lastIndexOf(".") > -1) { + fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1); + } + isImg = this.fileType.some(type => { + if (file.type.indexOf(type) > -1) return true; + if (fileExtension && fileExtension.indexOf(type) > -1) return true; + return false; + }); + } else { + isImg = file.type.indexOf("image") > -1; + } + + if (!isImg) { + 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; + } + } this.loading = this.$loading({ lock: true, text: "上传中", background: "rgba(0, 0, 0, 0.7)", }); }, + // 文件个数超出 + handleExceed() { + this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`); + }, + // 上传失败 handleUploadError() { this.$message({ type: "error", @@ -77,24 +169,37 @@ export default { }); this.loading.close(); }, - }, - watch: {}, + // 预览 + handlePictureCardPreview(file) { + this.dialogImageUrl = file.url; + this.dialogVisible = true; + }, + // 对象转成指定字符串分隔 + listToString(list, separator) { + let strs = ""; + separator = separator || ","; + for (let i in list) { + strs += list[i].url + separator; + } + return strs != '' ? strs.substr(0, strs.length - 1) : ''; + } + } }; - \ No newline at end of file + + diff --git a/ruoyi-ui/src/components/TopNav/index.vue b/ruoyi-ui/src/components/TopNav/index.vue index d89930a8..c8837f2a 100644 --- a/ruoyi-ui/src/components/TopNav/index.vue +++ b/ruoyi-ui/src/components/TopNav/index.vue @@ -73,9 +73,9 @@ export default { if(router.path === "/") { router.children[item].path = "/redirect/" + router.children[item].path; } else { - if(!this.ishttp(router.children[item].path)) { + if(!this.ishttp(router.children[item].path)) { router.children[item].path = router.path + "/" + router.children[item].path; - } + } } router.children[item].parentPath = router.path; } From ee7607bccaa8d2b60a3b6c6e8bdee36eda41be62 Mon Sep 17 00:00:00 2001 From: RuoYi Date: Fri, 9 Jul 2021 21:12:37 +0800 Subject: [PATCH 3/7] =?UTF-8?q?=E5=85=A8=E5=B1=80=E6=B3=A8=E5=86=8C?= =?UTF-8?q?=E9=80=9A=E7=94=A8=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../main/resources/vm/vue/index-tree.vue.vm | 36 ------------------ .../src/main/resources/vm/vue/index.vue.vm | 38 ------------------- ruoyi-ui/src/main.js | 13 ++++++- ruoyi-ui/src/views/system/notice/index.vue | 6 +-- 4 files changed, 12 insertions(+), 81 deletions(-) diff --git a/ruoyi-modules/ruoyi-gen/src/main/resources/vm/vue/index-tree.vue.vm b/ruoyi-modules/ruoyi-gen/src/main/resources/vm/vue/index-tree.vue.vm index ab870681..f7105cba 100644 --- a/ruoyi-modules/ruoyi-gen/src/main/resources/vm/vue/index-tree.vue.vm +++ b/ruoyi-modules/ruoyi-gen/src/main/resources/vm/vue/index-tree.vue.vm @@ -258,46 +258,10 @@ import { list${BusinessName}, get${BusinessName}, del${BusinessName}, add${BusinessName}, update${BusinessName}, export${BusinessName} } from "@/api/${moduleName}/${businessName}"; import Treeselect from "@riophae/vue-treeselect"; import "@riophae/vue-treeselect/dist/vue-treeselect.css"; -#foreach($column in $columns) -#if($column.insert && !$column.superColumn && !$column.pk && $column.htmlType == "imageUpload") -import ImageUpload from '@/components/ImageUpload'; -#break -#end -#end -#foreach($column in $columns) -#if($column.insert && !$column.superColumn && !$column.pk && $column.htmlType == "fileUpload") -import FileUpload from '@/components/FileUpload'; -#break -#end -#end -#foreach($column in $columns) -#if($column.insert && !$column.superColumn && !$column.pk && $column.htmlType == "editor") -import Editor from '@/components/Editor'; -#break -#end -#end export default { name: "${BusinessName}", components: { -#foreach($column in $columns) -#if($column.insert && !$column.superColumn && !$column.pk && $column.htmlType == "imageUpload") - ImageUpload, -#break -#end -#end -#foreach($column in $columns) -#if($column.insert && !$column.superColumn && !$column.pk && $column.htmlType == "fileUpload") - FileUpload, -#break -#end -#end -#foreach($column in $columns) -#if($column.insert && !$column.superColumn && !$column.pk && $column.htmlType == "editor") - Editor, -#break -#end -#end Treeselect }, data() { diff --git a/ruoyi-modules/ruoyi-gen/src/main/resources/vm/vue/index.vue.vm b/ruoyi-modules/ruoyi-gen/src/main/resources/vm/vue/index.vue.vm index 57da66b1..1e35e567 100644 --- a/ruoyi-modules/ruoyi-gen/src/main/resources/vm/vue/index.vue.vm +++ b/ruoyi-modules/ruoyi-gen/src/main/resources/vm/vue/index.vue.vm @@ -309,47 +309,9 @@ diff --git a/ruoyi-ui/src/router/index.js b/ruoyi-ui/src/router/index.js index 0de4c2fd..7f0b1059 100644 --- a/ruoyi-ui/src/router/index.js +++ b/ruoyi-ui/src/router/index.js @@ -6,6 +6,7 @@ Vue.use(Router) /* Layout */ import Layout from '@/layout' import ParentView from '@/components/ParentView'; +import InnerLink from '@/layout/components/InnerLink' /** * Note: 路由配置项 diff --git a/ruoyi-ui/src/store/modules/permission.js b/ruoyi-ui/src/store/modules/permission.js index f3a1d11f..340524ab 100644 --- a/ruoyi-ui/src/store/modules/permission.js +++ b/ruoyi-ui/src/store/modules/permission.js @@ -2,6 +2,7 @@ import { constantRoutes } from '@/router' import { getRouters } from '@/api/menu' import Layout from '@/layout/index' import ParentView from '@/components/ParentView'; +import InnerLink from '@/layout/components/InnerLink' const permission = { state: { @@ -65,6 +66,8 @@ function filterAsyncRouter(asyncRouterMap, lastRouter = false, type = false) { route.component = Layout } else if (route.component === 'ParentView') { route.component = ParentView + } else if (route.component === 'InnerLink') { + route.component = InnerLink } else { route.component = loadView(route.component) }