diff --git a/ruoyi-common/ruoyi-common-core/src/main/java/com/ruoyi/common/core/constant/UserConstants.java b/ruoyi-common/ruoyi-common-core/src/main/java/com/ruoyi/common/core/constant/UserConstants.java index cb01ba81..2d7f1e8a 100644 --- a/ruoyi-common/ruoyi-common-core/src/main/java/com/ruoyi/common/core/constant/UserConstants.java +++ b/ruoyi-common/ruoyi-common-core/src/main/java/com/ruoyi/common/core/constant/UserConstants.java @@ -57,6 +57,9 @@ public class UserConstants /** ParentView组件标识 */ public final static String PARENT_VIEW = "ParentView"; + /** InnerLink组件标识 */ + public final static String INNER_LINK = "InnerLink"; + /** 校验返回结果码 */ public final static String UNIQUE = "0"; diff --git a/ruoyi-common/ruoyi-common-core/src/main/java/com/ruoyi/common/core/utils/StringUtils.java b/ruoyi-common/ruoyi-common-core/src/main/java/com/ruoyi/common/core/utils/StringUtils.java index b549d604..bf86804c 100644 --- a/ruoyi-common/ruoyi-common-core/src/main/java/com/ruoyi/common/core/utils/StringUtils.java +++ b/ruoyi-common/ruoyi-common-core/src/main/java/com/ruoyi/common/core/utils/StringUtils.java @@ -4,6 +4,7 @@ import java.util.Collection; import java.util.List; import java.util.Map; import org.springframework.util.AntPathMatcher; +import com.ruoyi.common.core.constant.Constants; import com.ruoyi.common.core.text.StrFormatter; /** @@ -282,6 +283,17 @@ public class StringUtils extends org.apache.commons.lang3.StringUtils return StrFormatter.format(template, params); } + /** + * 是否为http(s)://开头 + * + * @param link 链接 + * @return 结果 + */ + public static boolean ishttp(String link) + { + return StringUtils.startsWithAny(link, Constants.HTTP, Constants.HTTPS); + } + /** * 驼峰转下划线命名 */ 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/components/HeaderSearch/index.vue b/ruoyi-ui/src/components/HeaderSearch/index.vue index ae952a98..09311842 100644 --- a/ruoyi-ui/src/components/HeaderSearch/index.vue +++ b/ruoyi-ui/src/components/HeaderSearch/index.vue @@ -70,9 +70,11 @@ export default { this.show = false }, change(val) { + const path = val.path; if(this.ishttp(val.path)) { // http(s):// 路径新窗口打开 - window.open(val.path, "_blank"); + const pindex = path.indexOf("http"); + window.open(path.substr(pindex, path.length), "_blank"); } else { this.$router.push(val.path) } 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; } diff --git a/ruoyi-ui/src/directive/dialog/drag.js b/ruoyi-ui/src/directive/dialog/drag.js new file mode 100644 index 00000000..2e823465 --- /dev/null +++ b/ruoyi-ui/src/directive/dialog/drag.js @@ -0,0 +1,64 @@ +/** +* v-dialogDrag 弹窗拖拽 +* Copyright (c) 2019 ruoyi +*/ + +export default { + bind(el, binding, vnode, oldVnode) { + const value = binding.value + if (value == false) return + // 获取拖拽内容头部 + const dialogHeaderEl = el.querySelector('.el-dialog__header'); + const dragDom = el.querySelector('.el-dialog'); + dialogHeaderEl.style.cursor = 'move'; + // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null); + const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null); + dragDom.style.position = 'absolute'; + dragDom.style.marginTop = 0; + let width = dragDom.style.width; + if (width.includes('%')) { + width = +document.body.clientWidth * (+width.replace(/\%/g, '') / 100); + } else { + width = +width.replace(/\px/g, ''); + } + dragDom.style.left = `${(document.body.clientWidth - width) / 2}px`; + // 鼠标按下事件 + dialogHeaderEl.onmousedown = (e) => { + // 鼠标按下，计算当前元素距离可视区的距离 (鼠标点击位置距离可视窗口的距离) + const disX = e.clientX - dialogHeaderEl.offsetLeft; + const disY = e.clientY - dialogHeaderEl.offsetTop; + + // 获取到的值带px 正则匹配替换 + let styL, styT; + + // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px + if (sty.left.includes('%')) { + styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100); + styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100); + } else { + styL = +sty.left.replace(/\px/g, ''); + styT = +sty.top.replace(/\px/g, ''); + }; + + // 鼠标拖拽事件 + document.onmousemove = function (e) { + // 通过事件委托，计算移动的距离 （开始拖拽至结束拖拽的距离） + const l = e.clientX - disX; + const t = e.clientY - disY; + + let finallyL = l + styL + let finallyT = t + styT + + // 移动当前元素 + dragDom.style.left = `${finallyL}px`; + dragDom.style.top = `${finallyT}px`; + + }; + + document.onmouseup = function (e) { + document.onmousemove = null; + document.onmouseup = null; + }; + } + } +}; \ No newline at end of file diff --git a/ruoyi-ui/src/directive/index.js b/ruoyi-ui/src/directive/index.js new file mode 100644 index 00000000..550109b4 --- /dev/null +++ b/ruoyi-ui/src/directive/index.js @@ -0,0 +1,18 @@ +import hasRole from './permission/hasRole' +import hasPermi from './permission/hasPermi' +import dialogDrag from './dialog/drag' + +const install = function(Vue) { + Vue.directive('hasRole', hasRole) + Vue.directive('hasPermi', hasPermi) + Vue.directive('dialogDrag', dialogDrag) +} + +if (window.Vue) { + window['hasRole'] = hasRole + window['hasPermi'] = hasPermi + window['dialogDrag'] = dialogDrag + Vue.use(install); // eslint-disable-line +} + +export default install diff --git a/ruoyi-ui/src/directive/permission/hasPermi.js b/ruoyi-ui/src/directive/permission/hasPermi.js index 74f9d325..799e0153 100644 --- a/ruoyi-ui/src/directive/permission/hasPermi.js +++ b/ruoyi-ui/src/directive/permission/hasPermi.js @@ -1,5 +1,5 @@ /** - * 操作权限处理 + * v-hasPermi 操作权限处理 * Copyright (c) 2019 ruoyi */ diff --git a/ruoyi-ui/src/directive/permission/hasRole.js b/ruoyi-ui/src/directive/permission/hasRole.js index ea966a34..406b9435 100644 --- a/ruoyi-ui/src/directive/permission/hasRole.js +++ b/ruoyi-ui/src/directive/permission/hasRole.js @@ -1,5 +1,5 @@ /** - * 角色权限处理 + * v-hasRole 角色权限处理 * Copyright (c) 2019 ruoyi */ diff --git a/ruoyi-ui/src/layout/components/InnerLink/index.vue b/ruoyi-ui/src/layout/components/InnerLink/index.vue new file mode 100644 index 00000000..227ff2a7 --- /dev/null +++ b/ruoyi-ui/src/layout/components/InnerLink/index.vue @@ -0,0 +1,27 @@ + diff --git a/ruoyi-ui/src/main.js b/ruoyi-ui/src/main.js index 4acdcb96..eae4cdd6 100644 --- a/ruoyi-ui/src/main.js +++ b/ruoyi-ui/src/main.js @@ -10,7 +10,7 @@ import '@/assets/styles/ruoyi.scss' // ruoyi css import App from './App' import store from './store' import router from './router' -import permission from './directive/permission' +import directive from './directive' //directive import { download } from '@/utils/request' import './assets/icons' // icon @@ -21,6 +21,12 @@ import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, import Pagination from "@/components/Pagination"; // 自定义表格工具组件 import RightToolbar from "@/components/RightToolbar" +// 富文本组件 +import Editor from "@/components/Editor" +// 文件上传组件 +import FileUpload from "@/components/FileUpload" +// 图片上传组件 +import ImageUpload from "@/components/ImageUpload" // 字典标签组件 import DictTag from '@/components/DictTag' // 头部标签组件 @@ -53,8 +59,11 @@ Vue.prototype.msgInfo = function (msg) { Vue.component('DictTag', DictTag) Vue.component('Pagination', Pagination) Vue.component('RightToolbar', RightToolbar) +Vue.component('Editor', Editor) +Vue.component('FileUpload', FileUpload) +Vue.component('ImageUpload', ImageUpload) -Vue.use(permission) +Vue.use(directive) Vue.use(VueMeta) /** 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) } diff --git a/ruoyi-ui/src/views/system/notice/index.vue b/ruoyi-ui/src/views/system/notice/index.vue index 504d1276..0946b8e4 100644 --- a/ruoyi-ui/src/views/system/notice/index.vue +++ b/ruoyi-ui/src/views/system/notice/index.vue @@ -176,15 +176,10 @@ +