-
+
+
+
+ 请上传
+ 大小不超过 {{ fileSize }}MB
+ 格式为 {{ fileType.join("/") }}
+ 的文件
+
+
+
+
@@ -40,36 +45,128 @@
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,
+ baseUrl: process.env.VUE_APP_BASE_API,
uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/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") {
+ if (item.indexOf(this.baseUrl) === -1) {
+ item = { name: this.baseUrl + item, url: this.baseUrl + item };
+ } else {
+ 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.url);
+ this.fileList.push({ name: res.fileName, url: res.fileName });
+ 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 +174,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
+// 去掉动画效果
+::v-deep .el-list-enter-active,
+::v-deep .el-list-leave-active {
+ transition: all 0s;
+}
+
+::v-deep .el-list-enter, .el-list-leave-active {
+ opacity: 0;
+ transform: translateY(0);
+}
+
+
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..728f49dc
--- /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/permission/index.js b/ruoyi-ui/src/directive/index.js
similarity index 53%
rename from ruoyi-ui/src/directive/permission/index.js
rename to ruoyi-ui/src/directive/index.js
index d6f530de..5f150c72 100644
--- a/ruoyi-ui/src/directive/permission/index.js
+++ b/ruoyi-ui/src/directive/index.js
@@ -1,14 +1,17 @@
-import hasRole from './hasRole'
-import hasPermi from './hasPermi'
+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
}
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/AppMain.vue b/ruoyi-ui/src/layout/components/AppMain.vue
index 423437b7..7cc66748 100644
--- a/ruoyi-ui/src/layout/components/AppMain.vue
+++ b/ruoyi-ui/src/layout/components/AppMain.vue
@@ -51,7 +51,7 @@ export default {
// fix css style bug in open el-dialog
.el-popup-parent--hidden {
.fixed-header {
- padding-right: 15px;
+ padding-right: 17px;
}
}
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 789ffb7b..292cbb4a 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 './assets/icons' // icon
import './permission' // permission control
@@ -20,6 +20,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'
// 头部标签组件
@@ -52,8 +58,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/index.vue b/ruoyi-ui/src/views/index.vue
index f8249711..1fc8586c 100644
--- a/ruoyi-ui/src/views/index.vue
+++ b/ruoyi-ui/src/views/index.vue
@@ -147,6 +147,45 @@
更新日志
+
+
+ - 角色管理新增分配用户功能
+ - 用户管理新增分配角色功能
+ - 日志列表支持排序操作
+ - 优化参数&字典缓存操作
+ - 系统布局配置支持动态标题开关
+ - 菜单路由配置支持内链访问
+ - 默认访问后端首页新增提示语
+ - 富文本默认上传返回url类型
+ - 新增自定义弹窗拖拽指令
+ - 全局注册常用通用组件
+ - 全局挂载字典标签组件
+ - ImageUpload组件支持多图片上传
+ - FileUpload组件支持多文件上传
+ - 文件上传组件添加数量限制属性
+ - 富文本编辑组件添加类型属性
+ - 富文本组件工具栏配置视频
+ - 封装通用iframe组件
+ - 限制超级管理员不允许操作
+ - 用户信息长度校验限制
+ - 分页组件新增pagerCount属性
+ - 添加bat脚本执行应用
+ - 升级oshi到最新版本v5.7.4
+ - 升级element-ui到最新版本2.15.2
+ - 升级pagehelper到最新版1.3.1
+ - 升级commons.io到最新版本v2.10.0
+ - 升级commons.fileupload到最新版本v1.4
+ - 升级swagger到最新版本v3.0.0
+ - 修复关闭confirm提示框控制台报错问题
+ - 修复存在的SQL注入漏洞问题
+ - 定时任务屏蔽rmi远程调用
+ - 修复用户搜索分页变量错误
+ - 修复导出角色数据范围翻译缺少仅本人
+ - 修复表单构建选择下拉选择控制台报错问题
+ - 优化图片工具类读取文件
+ - 其他细节优化
+
+
- 新增菜单导航显示风格TopNav(false为左侧导航菜单,true为顶部导航菜单)
@@ -566,7 +605,7 @@ export default {
data() {
return {
// 版本号
- version: "3.5.0",
+ version: "3.6.0",
};
},
methods: {
diff --git a/ruoyi-ui/src/views/system/notice/index.vue b/ruoyi-ui/src/views/system/notice/index.vue
index 6dbbfcb0..cfbe761e 100644
--- a/ruoyi-ui/src/views/system/notice/index.vue
+++ b/ruoyi-ui/src/views/system/notice/index.vue
@@ -177,13 +177,9 @@