mirror of
https://gitee.com/orangeform/orange-admin.git
synced 2026-01-18 19:16:37 +08:00
commit：同步2.3版本
This commit is contained in:
Jerry
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<el-breadcrumb class="app-breadcrumb" separator="/">
|
||||
<el-breadcrumb-item :to="{name: 'welcome'}" :replace="true">
|
||||
<i class="el-icon-s-home" style="margin-right: 5px;" />主页
|
||||
</el-breadcrumb-item>
|
||||
<el-breadcrumb-item v-for="item in menuPathList" :key="item.menuId">
|
||||
{{item.menuName}}
|
||||
</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters, mapMutations } from 'vuex';
|
||||
|
||||
export default {
|
||||
created () {
|
||||
this.getBreadcrumb();
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
menuPathList: null
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$route (newValue) {
|
||||
if (newValue.name === 'welcome') this.setCurrentMenuId(null);
|
||||
this.getBreadcrumb();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getBreadcrumb () {
|
||||
this.menuPathList = this.getMultiColumn ? null : this.getCurrentMenuPath;
|
||||
},
|
||||
...mapMutations(['setCurrentMenuId'])
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['getCurrentMenuPath', 'getMultiColumn'])
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.app-breadcrumb.el-breadcrumb {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
line-height: 60px;
|
||||
margin-left: 10px;
|
||||
.no-redirect {
|
||||
color: #97a8be;
|
||||
cursor: text;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<div class="form-single-fragment" style="position: relative;">
|
||||
<el-form ref="formModifyPassword" class="full-width-input" style="width: 100%;"
|
||||
label-width="80px" :size="defaultFormItemSize" label-position="right" @submit.native.prevent>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="用户头像">
|
||||
<el-upload
|
||||
class="upload-image-item" name="uploadFile" :headers="getUploadHeaders"
|
||||
:action="headImageUploadUrl"
|
||||
:show-file-list="false" accept=".jpg,.png,.jpeg"
|
||||
:on-success="onHeadImageUploadSuccess"
|
||||
:on-error="onUploadError" :on-exceed="onUploadLimit"
|
||||
>
|
||||
<img v-if="getHeadImageUrl()" class="upload-image-show" :src="getHeadImageUrl()">
|
||||
<i v-else class="el-icon-plus upload-image-item" />
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters, mapMutations } from 'vuex';
|
||||
import { SystemController } from '@/api';
|
||||
/* eslint-disable-next-line */
|
||||
import { uploadMixin, statsDateRangeMixin } from '@/core/mixins';
|
||||
|
||||
export default {
|
||||
name: 'formModifyHeadImage',
|
||||
mixins: [uploadMixin, statsDateRangeMixin],
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 课程图片上传成功
|
||||
*/
|
||||
onHeadImageUploadSuccess (response, file, fileList) {
|
||||
console.log(response, file);
|
||||
if (response.success) {
|
||||
this.setHeadImage(response.data);
|
||||
} else {
|
||||
this.$message.error(response.message);
|
||||
}
|
||||
},
|
||||
onUploadError (e, file, fileList) {
|
||||
this.$message.error('文件上传失败');
|
||||
},
|
||||
onUploadLimit (files, fileList) {
|
||||
this.$message.error('已经超出最大上传个数限制');
|
||||
},
|
||||
getHeadImageUrl () {
|
||||
if (this.getUserInfo && this.getUserInfo.headImageUrl != null && this.getUserInfo.headImageUrl !== '') {
|
||||
let temp = this.getUploadFileUrl(this.getUserInfo.headImageUrl, { filename: this.getUserInfo.headImageUrl.filename });
|
||||
return temp;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
...mapMutations(['setHeadImage'])
|
||||
},
|
||||
computed: {
|
||||
headImageUploadUrl () {
|
||||
return this.getUploadActionUrl(SystemController.changeHeadImageUrl());
|
||||
},
|
||||
...mapGetters(['getUserInfo'])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<div class="form-single-fragment" style="position: relative;">
|
||||
<el-form ref="formModifyPassword" :model="formData" class="full-width-input" :rules="rules" style="width: 100%;"
|
||||
label-width="120px" :size="defaultFormItemSize" label-position="right" @submit.native.prevent>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="旧密码" prop="oldPassword">
|
||||
<el-input class="input-item" v-model.trim="formData.oldPassword"
|
||||
type="password" show-password
|
||||
:clearable="true" placeholder="旧密码" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="新密码" prop="password">
|
||||
<el-input class="input-item" v-model.trim="formData.password"
|
||||
type="password" show-password
|
||||
:clearable="true" placeholder="新密码" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="新密码确认" prop="repeatPassword">
|
||||
<el-input class="input-item" v-model.trim="formData.repeatPassword"
|
||||
type="password" show-password
|
||||
:clearable="true" placeholder="新密码确认" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-row class="no-scroll flex-box" type="flex" justify="end">
|
||||
<el-button type="primary" :size="defaultFormItemSize" :plain="true"
|
||||
@click="onCancel(false)">
|
||||
取消
|
||||
</el-button>
|
||||
<el-button type="primary" :size="defaultFormItemSize" @click="onSave()">
|
||||
保存
|
||||
</el-button>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { SystemController } from '@/api';
|
||||
import { encrypt } from '@/utils';
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
formData: {
|
||||
oldPassword: undefined,
|
||||
password: undefined,
|
||||
repeatPassword: undefined
|
||||
},
|
||||
rules: {
|
||||
'oldPassword': [
|
||||
{required: true, message: '请输入旧密码', trigger: 'blur'}
|
||||
],
|
||||
'password': [
|
||||
{required: true, message: '请输入新密码', trigger: 'blur'}
|
||||
],
|
||||
'repeatPassword': [
|
||||
{required: true, message: '请输入新密码', trigger: 'blur'}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onCancel (isSuccess) {
|
||||
if (this.observer != null) {
|
||||
this.observer.cancel(isSuccess);
|
||||
}
|
||||
},
|
||||
onSave () {
|
||||
this.$refs.formModifyPassword.validate((valid) => {
|
||||
if (!valid) return;
|
||||
if (this.formData.password !== this.formData.repeatPassword) {
|
||||
this.$message.error('两次密码输入不一致，请核对！');
|
||||
return;
|
||||
}
|
||||
|
||||
let params = {
|
||||
oldPass: encrypt(this.formData.oldPassword),
|
||||
newPass: encrypt(this.formData.password)
|
||||
};
|
||||
|
||||
SystemController.changePassword(this, params).then(res => {
|
||||
this.$message.success('密码修改成功');
|
||||
this.onCancel(true);
|
||||
}).catch(e => {});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div class="menu-wrapper">
|
||||
<el-menu-item ref="item" :index="menu.menuId + ''" :key="menu.menuId" v-if="menu.children == null || menu.children.length <= 0">
|
||||
<template slot="title">
|
||||
<i v-if="menu.icon" :class="menu.icon" style="margin-right: 5px; font-size: 18px;" :style="getIconStyle(menu.icon)"></i>
|
||||
<span slot="title" :style="getTextStyle(!menu.icon)">{{menu.menuName}}</span>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
<el-submenu v-else :index="menu.menuId + ''" :key="menu.menuId">
|
||||
<template slot="title">
|
||||
<i v-if="menu.icon" :class="menu.icon" style="margin-right: 5px; font-size: 18px;" :style="getIconStyle(menu.icon)"></i>
|
||||
<span slot="title" :style="getTextStyle(!menu.icon)" v-show="!getCollapse">{{menu.menuName}}</span>
|
||||
</template>
|
||||
<template v-for="child in menu.children">
|
||||
<menu-item class="nest-menu" :menu="child" :isChild="true" :key="child.menuId" />
|
||||
</template>
|
||||
</el-submenu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapGetters} from 'vuex'
|
||||
export default {
|
||||
name: 'menuItem',
|
||||
props: {
|
||||
menu: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: undefined
|
||||
},
|
||||
isChild: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getIconStyle (isShow) {
|
||||
if (isShow && this.isChild) {
|
||||
return [
|
||||
{ 'margin-left': '13px' }
|
||||
]
|
||||
}
|
||||
},
|
||||
getTextStyle (isShow) {
|
||||
if (isShow && this.isChild) {
|
||||
return [
|
||||
{ 'padding-left': '13px' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
showText () {
|
||||
return !this.getCollapse;
|
||||
},
|
||||
...mapGetters(['getCollapse'])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<div style="height: 100%; position: relative;" class="sidebar-bg">
|
||||
<div class="sidebar-title">
|
||||
<img :src="logoImage" style="width: 32px; height: 32px; border-radius: 50%;" />
|
||||
<p class="sidebar-title-text">{{getProjectName()}}</p>
|
||||
</div>
|
||||
<div class="left-menu" style="height: 100%; padding-bottom: 60px;">
|
||||
<el-scrollbar wrap-class="scrollbar_dropdown__wrap" style="height: 100%;">
|
||||
<el-menu ref="menu" mode="vertical" :default-active="getCurrentMenuId" :unique-opened="true" @select="selectMenu"
|
||||
:active-text-color="activeTextColor" :collapse="getCollapse" >
|
||||
<template v-for="menu in getMenuList">
|
||||
<menu-item :menu="menu" :key="menu.menuId" />
|
||||
</template>
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import menuItem from './menu-item.vue';
|
||||
import { mapGetters, mapMutations } from 'vuex';
|
||||
import projectConfig from '@/core/config';
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
isCollapse: false,
|
||||
collapseLeft: '200px',
|
||||
showCollapseBtn: true,
|
||||
logoImage: require('../../../../assets/img/logo.png')
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'menu-item': menuItem
|
||||
},
|
||||
computed: {
|
||||
activeTextColor () {
|
||||
return undefined;
|
||||
},
|
||||
getCollapseStyle () {
|
||||
return [{
|
||||
left: this.collapseLeft
|
||||
}]
|
||||
},
|
||||
...mapGetters(['getMultiTags', 'getMenuList', 'getCollapse', 'getCurrentMenuPath', 'getCurrentMenuId', 'getMultiColumn'])
|
||||
},
|
||||
methods: {
|
||||
onCollapseChange () {
|
||||
this.showCollapseBtn = false;
|
||||
setTimeout(() => {
|
||||
this.setCollapse(!this.getCollapse);
|
||||
this.collapseLeft = this.getCollapse ? '65px' : '200px';
|
||||
this.showCollapseBtn = true;
|
||||
}, 100);
|
||||
},
|
||||
getProjectName () {
|
||||
if (this.getCollapse) {
|
||||
return projectConfig.projectName.substr(0, 1);
|
||||
} else {
|
||||
return projectConfig.projectName;
|
||||
}
|
||||
},
|
||||
selectMenu (index, path) {
|
||||
if (this.getCurrentMenuId === index) return;
|
||||
// 单页面清空所有tags和cachePage
|
||||
if (!this.getMultiTags) {
|
||||
this.clearAllTags();
|
||||
}
|
||||
this.setCurrentMenuId(index);
|
||||
},
|
||||
...mapMutations(['setCollapse', 'clearAllTags', 'setCurrentMenuId'])
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sidebar-title-text {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<div class="tags-item">
|
||||
<span class="title">{{title}}</span>
|
||||
<i :class="{'el-icon-close close': !enterClose, 'el-icon-error close hover-close': enterClose}"
|
||||
v-if="supportClose" @click.stop="onClose"
|
||||
@mouseenter="() => enterClose = true" @mouseleave="() => enterClose = false" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
title: String,
|
||||
supportClose: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
enterClose: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClose () {
|
||||
this.$emit('close');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/assets/style/element-variables.scss';
|
||||
.tags-item {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
border-radius: 3px;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
background: white;
|
||||
padding: 0px 20px;
|
||||
color: $--color-text-primary;
|
||||
}
|
||||
|
||||
.tags-item .title {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.close {
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tags-item.active .close {
|
||||
margin-left: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.close.hover-close {
|
||||
color: $--color-text-secondary;
|
||||
}
|
||||
|
||||
.tags-item:hover {
|
||||
color: $--color-primary;
|
||||
}
|
||||
.tags-item.active {
|
||||
color: $--color-primary;
|
||||
border-color: $--color-primary-light-5;
|
||||
background-color: $--color-primary-light-9;
|
||||
}
|
||||
|
||||
.tags-item + .tags-item {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<div class="tags-panel">
|
||||
<i class="el-icon-arrow-left arrow left" @click="beginPos > 0 && beginPos--" />
|
||||
<i class="el-icon-arrow-right arrow right" @click="getEndTagPos >= panelWidth && beginPos++" />
|
||||
<div class="main-panel">
|
||||
<div class="scroll-box">
|
||||
<TagItem class="item" title="主页" :class="{active: getCurrentMenuId == null}" v-show="0 >= beginPos" :supportClose="false"
|
||||
@click.native="onTagItemClick(null)" @contextmenu.prevent.native="openMenu(null, $event)" />
|
||||
<TagItem class="item" v-for="(item, index) in tagList" :key="item.menuId" :title="item.menuName"
|
||||
:class="{active: item.menuId === getCurrentMenuId}" v-show="(index + 1) >= beginPos"
|
||||
@close="onTagItemClose(item)" @click.native="onTagItemClick(item)"
|
||||
@contextmenu.prevent.native="openMenu(item, $event)" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="visible" @click.stop="onMenuMaskClick" @contextmenu="openMaskMenu"
|
||||
style="z-index: 99999; position: fixed; background: rgba(0, 0, 0, 0.01); width: 100vw; height: 100vh; top: 0px; left: 0px">
|
||||
<ul class="contextmenu" style="z-index: 99999; background: white;" :style="{left: left + 'px', top: top + 'px'}">
|
||||
<li @click="closeSelectTag">关闭</li>
|
||||
<li @click="closeOthersTags">关闭其他</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters, mapMutations } from 'vuex';
|
||||
import TagItem from './tagItem.vue';
|
||||
export default {
|
||||
props: {
|
||||
tagList: Array
|
||||
},
|
||||
components: {
|
||||
TagItem
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
panelWidth: 0,
|
||||
beginPos: 0,
|
||||
visible: false,
|
||||
top: 0,
|
||||
left: 0,
|
||||
selectedItem: undefined
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openMenu (item, e) {
|
||||
this.visible = true;
|
||||
this.selectedItem = item;
|
||||
this.left = e.clientX;
|
||||
this.top = e.clientY;
|
||||
},
|
||||
openMaskMenu (e) {
|
||||
e.preventDefault();
|
||||
},
|
||||
onMenuMaskClick () {
|
||||
this.visible = false;
|
||||
},
|
||||
closeSelectTag () {
|
||||
if (this.selectedItem != null) this.onTagItemClose(this.selectedItem);
|
||||
this.visible = false;
|
||||
},
|
||||
closeOthersTags () {
|
||||
this.selectedItem ? this.closeOtherTags(this.selectedItem.menuId) : this.clearAllTags();
|
||||
this.visible = false;
|
||||
},
|
||||
onTagItemClose (item) {
|
||||
this.removeTag(item.menuId);
|
||||
},
|
||||
onTagItemClick (item) {
|
||||
this.setCurrentMenuId(item ? item.menuId : undefined);
|
||||
},
|
||||
setCurrentTag (id) {
|
||||
if (id == null) {
|
||||
this.beginPos = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
let curPos = -1;
|
||||
for (let i = 0; i < this.tagList.length; i++) {
|
||||
if (this.tagList[i].menuId === id) {
|
||||
curPos = (i + 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (curPos > 0) {
|
||||
if (curPos > this.getEndPos()) {
|
||||
let timer = null;
|
||||
timer = setInterval(() => {
|
||||
let endPos = this.getEndPos();
|
||||
if (endPos >= curPos) {
|
||||
clearInterval(timer);
|
||||
} else {
|
||||
this.beginPos++;
|
||||
}
|
||||
}, 10);
|
||||
}
|
||||
|
||||
if (curPos < this.beginPos) this.beginPos = curPos;
|
||||
}
|
||||
},
|
||||
getEndPos () {
|
||||
let width = 0;
|
||||
let childList = this.$children;
|
||||
let endPos = 0;
|
||||
for (let i = this.beginPos; i < childList.length; i++) {
|
||||
width += childList[i].$el.offsetWidth;
|
||||
if (width >= this.panelWidth) break;
|
||||
endPos = i;
|
||||
}
|
||||
|
||||
return endPos;
|
||||
},
|
||||
onSizeChange () {
|
||||
this.$nextTick(() => {
|
||||
this.panelWidth = this.$el.offsetWidth - 60;
|
||||
});
|
||||
},
|
||||
...mapMutations(['removeTag', 'setCurrentMenuId', 'closeOtherTags', 'clearAllTags'])
|
||||
},
|
||||
computed: {
|
||||
getEndTagPos () {
|
||||
let width = 0;
|
||||
let childList = this.$children;
|
||||
for (let i = this.beginPos; i < childList.length; i++) {
|
||||
width += childList[i].$el.offsetWidth;
|
||||
// 间隔距离
|
||||
width += 5;
|
||||
if (width > this.panelWidth) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return width;
|
||||
},
|
||||
...mapGetters(['getCurrentMenuId'])
|
||||
},
|
||||
mounted () {
|
||||
this.panelWidth = this.$el.offsetWidth - 60;
|
||||
window.addEventListener('resize', this.onSizeChange);
|
||||
// this.getLastPosition();
|
||||
},
|
||||
destroyed () {
|
||||
window.removeEventListener('resize', this.onSizeChange);
|
||||
},
|
||||
watch: {
|
||||
getCurrentMenuId: {
|
||||
handler (newValue) {
|
||||
this.setCurrentTag(newValue);
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/assets/style/element-variables.scss';
|
||||
.tags-panel {
|
||||
}
|
||||
.main-panel {
|
||||
margin: 0px 30px;
|
||||
}
|
||||
.scroll-box {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
.arrow {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
width: 30px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
z-index: 100;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.arrow.left {
|
||||
float: left;
|
||||
}
|
||||
.arrow.right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.contextmenu {
|
||||
margin: 0px;
|
||||
z-index: 2;
|
||||
position: fixed;
|
||||
list-style-type: none;
|
||||
padding: 5px 0px;
|
||||
border-radius: 5px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.contextmenu li {
|
||||
margin: 0px;
|
||||
padding: 7px 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.contextmenu li:hover {
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<el-container :style="getMainStyle">
|
||||
<el-aside width='250px' class="sidebar">
|
||||
<side-bar style="overflow: hidden"></side-bar>
|
||||
</el-aside>
|
||||
<el-container style="background-color: #F5F8F9">
|
||||
<el-header class="header" style="box-shadow: 0px 2px 4px 0px rgba(206, 206, 206, 0.5);">
|
||||
<breadcrumb class="breadcrumb-container" />
|
||||
<div class="menu-column" v-if="getMultiColumn" style="margin-left: 20px;">
|
||||
<el-menu mode="horizontal" :default-active="getCurrentColumnId" @select="onColumnChange">
|
||||
<el-menu-item v-for="column in getColumnList" :key="column.columnId" :index="column.columnId">{{column.columnName}}</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
<div class="header-menu" style="flex-grow: 1;">
|
||||
<el-dropdown class="user-dropdown" trigger="click" @command="handleCommand">
|
||||
<span class="el-dropdown-link">{{(getUserInfo || {}).showName}}<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item class="user-dropdown-item" command="modifyPassword">修改密码</el-dropdown-item>
|
||||
<el-dropdown-item class="user-dropdown-item" command="modifyHeadImage">修改头像</el-dropdown-item>
|
||||
<el-dropdown-item class="user-dropdown-item" command="logout">退出登录</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<img :src="getHeadImageUrl ? getHeadImageUrl : header" class="header-img" />
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main :style="{'padding-bottom': '15px', 'padding-top': (getMultiTags ? '0px' : '15px')}">
|
||||
<tag-panel v-if="getMultiTags" :tagList="getTagList" style="margin: 0px 20px;" />
|
||||
<el-scrollbar :style="getContextStyle" wrap-class="scrollbar_dropdown__wrap">
|
||||
<transition name="fade" mode="out-in">
|
||||
<keep-alive :include="getCachePages">
|
||||
<router-view style="margin: 0px 15px; background-color: white; overflow: hidden; padding: 20px;" :style="getRouterViewStyle" />
|
||||
</keep-alive>
|
||||
</transition>
|
||||
</el-scrollbar>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SideBar from './components/sidebar/sidebar.vue';
|
||||
import { mapGetters, mapMutations } from 'vuex';
|
||||
/* eslint-disable-next-line */
|
||||
import { uploadMixin, statsDateRangeMixin } from '@/core/mixins';
|
||||
import Breadcrumb from './components/breadcrumb';
|
||||
import TagPanel from './components/tags/tagPanel.vue';
|
||||
import formModifyPassword from './components/formModifyPassword/index.vue';
|
||||
import formModifyHeadImage from './components/formModifyHeadImage/index.vue';
|
||||
import { SystemController } from '@/api';
|
||||
import { getToken, setToken } from '@/utils';
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
header: require('../../assets/img/default-header.jpg')
|
||||
};
|
||||
},
|
||||
components: {
|
||||
'side-bar': SideBar,
|
||||
'breadcrumb': Breadcrumb,
|
||||
'tag-panel': TagPanel
|
||||
},
|
||||
mixins: [uploadMixin, statsDateRangeMixin],
|
||||
methods: {
|
||||
toggleSideBar () {
|
||||
this.setCollapse(!this.getCollapse);
|
||||
},
|
||||
onColumnChange (columnId) {
|
||||
this.setCurrentColumnId(columnId);
|
||||
this.clearCachePage();
|
||||
this.$router.replace({
|
||||
name: 'welcome'
|
||||
});
|
||||
},
|
||||
resetDocumentClientHeight () {
|
||||
let timerID;
|
||||
let _this = this;
|
||||
return function () {
|
||||
clearTimeout(timerID);
|
||||
timerID = setTimeout(() => {
|
||||
var h = document.documentElement['clientHeight'];
|
||||
var w = document.documentElement['clientWidth'];
|
||||
_this.setClientHeight(h);
|
||||
_this.setClientWidth(w);
|
||||
}, 50);
|
||||
}
|
||||
},
|
||||
handleCommand (command) {
|
||||
if (command === 'logout') {
|
||||
this.$confirm('是否退出登录？', '', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
let options = {
|
||||
headers: {
|
||||
Authorization: getToken()
|
||||
},
|
||||
showMask: false
|
||||
}
|
||||
SystemController.logout(this, {}, options).catch(e => {});
|
||||
this.clearAllTags();
|
||||
setToken();
|
||||
window.sessionStorage.removeItem('isUaaLogin');
|
||||
this.$router.replace({name: 'login'});
|
||||
}).catch(e => {});
|
||||
} else if (command === 'modifyPassword') {
|
||||
this.$dialog.show('修改密码', formModifyPassword, {
|
||||
area: ['500px']
|
||||
}, {}).catch(e => {});
|
||||
} else if (command === 'modifyHeadImage') {
|
||||
this.$dialog.show('修改头像', formModifyHeadImage, {
|
||||
area: ['500px']
|
||||
}, {}).catch(e => {});
|
||||
}
|
||||
},
|
||||
...mapMutations([
|
||||
'setClientHeight',
|
||||
'setClientWidth',
|
||||
'setCurrentColumnId',
|
||||
'clearCachePage',
|
||||
'clearAllTags',
|
||||
'setUserInfo',
|
||||
'setMenuList'
|
||||
])
|
||||
},
|
||||
computed: {
|
||||
getMainStyle () {
|
||||
return [
|
||||
{'height': this.getClientHeight + 'px'}
|
||||
]
|
||||
},
|
||||
getContextStyle () {
|
||||
return [
|
||||
{'height': this.getMainContextHeight + 'px'}
|
||||
]
|
||||
},
|
||||
getRouterViewStyle () {
|
||||
return [
|
||||
{'min-height': this.getMainContextHeight + 'px'}
|
||||
]
|
||||
},
|
||||
getHeadImageUrl () {
|
||||
if (this.getUserInfo && this.getUserInfo.headImageUrl != null && this.getUserInfo.headImageUrl !== '') {
|
||||
let temp = this.getUploadFileUrl(this.getUserInfo.headImageUrl, { filename: this.getUserInfo.headImageUrl.filename });
|
||||
return temp;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
...mapGetters([
|
||||
'getMultiTags',
|
||||
'getClientHeight',
|
||||
'getUserInfo',
|
||||
'getCollapse',
|
||||
'getCachePages',
|
||||
'getTagList',
|
||||
'getMultiColumn',
|
||||
'getCurrentColumnId',
|
||||
'getColumnList',
|
||||
'getMenuItem',
|
||||
'getMainContextHeight'
|
||||
])
|
||||
},
|
||||
mounted () {
|
||||
let resetHeight = this.resetDocumentClientHeight();
|
||||
resetHeight();
|
||||
|
||||
window.onresize = () => {
|
||||
resetHeight();
|
||||
}
|
||||
|
||||
// 重新获取登录信息
|
||||
if (getToken() != null && getToken() !== '' && this.getUserInfo == null) {
|
||||
SystemController.getLoginInfo(this, {}).then(data => {
|
||||
this.setMenuList(data.data.menuList);
|
||||
delete data.data.menuList;
|
||||
this.setUserInfo(data.data);
|
||||
}).catch(e => {});
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
getMenuItem: {
|
||||
handler (newValue) {
|
||||
if (newValue == null) {
|
||||
if (this.$route.name !== 'welcome') {
|
||||
this.$router.replace({
|
||||
name: 'welcome'
|
||||
});
|
||||
}
|
||||
} else {
|
||||
this.$router.replace({
|
||||
name: newValue.formRouterName
|
||||
});
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
</style>
|
||||
@@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<div class="login-form">
|
||||
<div class="login-box">
|
||||
<img :src="bkImg" style="height: 100%; flex-shrink: 0" />
|
||||
<div class="login-input">
|
||||
<img :src="logoImg" />
|
||||
<span class="title">中台化低代码生成工具</span>
|
||||
<el-form :model="dataForm" :rules="dataRule" size="medium" ref="dataForm" @keyup.enter.native="dataFormSubmit()" style="width: 356px; margin-top: 4vh;">
|
||||
<el-col :span="24">
|
||||
<el-form-item prop="mobilePhone">
|
||||
<el-input v-model="dataForm.mobilePhone" style="width: 100%;" placeholder="帐号"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item prop="password">
|
||||
<el-input v-model="dataForm.password" style="width: 100%;" type="password" placeholder="密码" show-password></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-button class="login-btn-submit" type="warning" style="width: 100%;"
|
||||
@click="dataFormSubmit()"
|
||||
:loading="isHttpLoading">
|
||||
登录
|
||||
</el-button>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<Verify
|
||||
ref="verify"
|
||||
@success="onVerifySuccess"
|
||||
:mode="'pop'"
|
||||
captchaType="blockPuzzle"
|
||||
:imgSize="{ width: '330px', height: '155px' }"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { SystemController } from '@/api';
|
||||
import { mapMutations } from 'vuex';
|
||||
import projectConfig from '@/core/config';
|
||||
import { encrypt, setToken } from '@/utils';
|
||||
import Verify from '@/components/Verifition/Verify.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Verify
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
bkImg: require('@/assets/img/login.png'),
|
||||
logoImg: require('@/assets/img/login_logo.png'),
|
||||
dataForm: {
|
||||
mobilePhone: 'admin',
|
||||
password: '123456'
|
||||
},
|
||||
dataRule: {
|
||||
mobilePhone: [
|
||||
{ required: true, message: '帐号不能为空', trigger: 'blur' }
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: '密码不能为空', trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
projectName: projectConfig.projectName
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
dataFormSubmit () {
|
||||
this.$refs['dataForm'].validate(valid => {
|
||||
if (valid) {
|
||||
this.$refs.verify.show();
|
||||
}
|
||||
});
|
||||
},
|
||||
login (verifyParams) {
|
||||
let params = {
|
||||
loginName: this.dataForm.mobilePhone,
|
||||
password: encrypt(this.dataForm.password),
|
||||
captchaVerification: (verifyParams || {}).captchaVerification
|
||||
};
|
||||
|
||||
SystemController.login(this, params, null, {showMask: false}).then(data => {
|
||||
this.setMenuList(data.data.menuList);
|
||||
delete data.data.menuList;
|
||||
|
||||
this.setUserInfo(data.data);
|
||||
setToken(data.data.tokenData);
|
||||
this.setCurrentMenuId(null);
|
||||
this.$router.replace({ name: 'main' });
|
||||
}).catch(e => {});
|
||||
},
|
||||
onVerifySuccess (verifyParams) {
|
||||
this.login(verifyParams);
|
||||
},
|
||||
...mapMutations(['setUserInfo', 'setMenuList', 'setCurrentMenuId'])
|
||||
},
|
||||
mounted () {
|
||||
this.setMenuList([]);
|
||||
this.setUserInfo({});
|
||||
setToken();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.login-form {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: #292D36;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.login-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 70vh;
|
||||
padding: 7vh;
|
||||
border-radius: 3px;
|
||||
background: white;
|
||||
.login-input {
|
||||
height: 100%;
|
||||
width: 420px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
img {
|
||||
width: 356px;
|
||||
height: 42px;
|
||||
margin-top: 6vh;
|
||||
}
|
||||
.title {
|
||||
color: #232323;
|
||||
font-size: 20px;
|
||||
margin-top: 2vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-form .el-input__inner {
|
||||
height: 45px!important;
|
||||
}
|
||||
|
||||
.login-form .el-button {
|
||||
height: 45px!important;
|
||||
font-size: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<el-container class="advance-query-form">
|
||||
<el-aside width="300px">
|
||||
<el-card class="base-card" shadow="never" :body-style="{ padding: '0px' }" style="border: none;">
|
||||
<div slot="header" class="base-card-header">
|
||||
<span>字典列表</span>
|
||||
</div>
|
||||
<el-scrollbar :style="{'height': (getMainContextHeight - 51) + 'px'}" class="custom-scroll">
|
||||
<el-tree :data="dictList" :props="{label: 'name'}" node-key="variableName" :highlight-current="true"
|
||||
:current-node-key="(dictList[0] || {}).variableName" @node-click="onDictChange">
|
||||
<div class="module-node-item" slot-scope="{ data }">
|
||||
<span style="padding-left: 24px;">{{data.name}}</span>
|
||||
</div>
|
||||
</el-tree>
|
||||
</el-scrollbar>
|
||||
</el-card>
|
||||
</el-aside>
|
||||
<el-main style="margin-left: 15px; background-color: white; padding: 20px;">
|
||||
<el-form label-width="120px" :size="defaultFormItemSize" label-position="left" @submit.native.prevent>
|
||||
<filter-box :item-width="350">
|
||||
<el-form-item v-if="dirtyCount > 0" label="失效缓存数量：">
|
||||
<span style="color: #F56C6C;">{{dirtyCount}}</span>
|
||||
</el-form-item>
|
||||
<el-button slot="operator" type="primary" :size="defaultFormItemSize" :plain="true"
|
||||
:disabled="!checkPermCodeExist('formSysDict:fragmentSysDict:reloadCache') || currentDict == null"
|
||||
@click="onRefreshCacheData">
|
||||
同步缓存
|
||||
</el-button>
|
||||
<el-button slot="operator" type="primary" :size="defaultFormItemSize"
|
||||
:disabled="!checkPermCodeExist('formSysDict:fragmentSysDict:add') || currentDict == null"
|
||||
@click="onAddDictData">
|
||||
添加数据
|
||||
</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="getCurrentDictData" :size="defaultFormItemSize" header-cell-class-name="table-header-gray"
|
||||
:row-style="tableRowStyle"
|
||||
:height="(getMainContextHeight - 90) + 'px'" row-key="id">
|
||||
<el-table-column label="ID" prop="id" />
|
||||
<el-table-column label="字典名称" prop="name">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.name}}</span>
|
||||
<el-tag v-if="scope.row.dirty" :size="defaultFormItemSize" effect="dark" type="warning"
|
||||
style="margin-left: 15px;">
|
||||
缓存失效
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="150px">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" :size="defaultFormItemSize" :disabled="!checkPermCodeExist('formSysDict:fragmentSysDict:update')" @click="onUpdateDictDataClick(scope.row)">编辑</el-button>
|
||||
<el-button type="text" :size="defaultFormItemSize" :disabled="!checkPermCodeExist('formSysDict:fragmentSysDict:delete')" @click="onDeleteDictDataClick(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { treeDataTranslate, findItemFromList } from '@/utils';
|
||||
/* eslint-disable-next-line */
|
||||
import { DictionaryController } from '@/api';
|
||||
import editDict from '@/views/upms/formEditDict';
|
||||
|
||||
export default {
|
||||
name: 'formDictManagement',
|
||||
data () {
|
||||
return {
|
||||
dictList: [
|
||||
],
|
||||
dirtyCount: 0,
|
||||
currentDict: undefined,
|
||||
currentDictDataList: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
tableRowStyle ({row, rowIndex}) {
|
||||
if (row.dirty) {
|
||||
return {
|
||||
background: '#FFE1E1'
|
||||
}
|
||||
}
|
||||
},
|
||||
updateDictData () {
|
||||
this.currentDictDataList = [];
|
||||
this.dirtyCount = 0;
|
||||
this.currentDict.listApi(this).then(res => {
|
||||
let cachedMap = new Map();
|
||||
if (Array.isArray(res.cachedResultList)) {
|
||||
res.cachedResultList.forEach(item => {
|
||||
cachedMap.set(item.id, item);
|
||||
});
|
||||
}
|
||||
if (Array.isArray(res.fullResultList)) {
|
||||
res.fullResultList.forEach(item => {
|
||||
let cachedItem = cachedMap.get(item.id);
|
||||
if (cachedItem == null || cachedItem.name !== item.name) {
|
||||
item.dirty = true;
|
||||
this.dirtyCount++;
|
||||
}
|
||||
});
|
||||
}
|
||||
cachedMap = null;
|
||||
if (this.currentDict.treeFlag) {
|
||||
this.currentDictDataList = treeDataTranslate(res.fullResultList, 'id', 'parentId');
|
||||
} else {
|
||||
this.currentDictDataList = res.fullResultList;
|
||||
}
|
||||
}).catch(e => {});
|
||||
},
|
||||
onDictChange (data) {
|
||||
if (this.currentDict === data) return;
|
||||
this.currentDict = findItemFromList(this.dictList, (data || {}).variableName, 'variableName');
|
||||
this.currentDictDataList = [];
|
||||
if (this.currentDict == null) {
|
||||
this.$message.error('没有找到相关字典');
|
||||
return;
|
||||
}
|
||||
this.updateDictData();
|
||||
},
|
||||
onRefreshCacheData () {
|
||||
this.$confirm('是否同步缓存？').then(res => {
|
||||
return this.currentDict.reloadCachedDataApi(this);
|
||||
}).then(res => {
|
||||
this.$message.success('同步成功');
|
||||
this.updateDictData();
|
||||
}).catch(e => {});
|
||||
},
|
||||
onAddDictData () {
|
||||
this.$dialog.show(`新建字典数据 - [${this.currentDict.name}]`, editDict, {
|
||||
area: '500px'
|
||||
}, {
|
||||
dictInfo: this.currentDict,
|
||||
dictData: this.currentDict.treeFlag ? this.currentDictDataList : []
|
||||
}).then(res => {
|
||||
this.updateDictData();
|
||||
}).catch(e => {});
|
||||
},
|
||||
onUpdateDictDataClick (row) {
|
||||
this.$dialog.show(`编辑字典数据 - [${this.currentDict.name}]`, editDict, {
|
||||
area: '500px'
|
||||
}, {
|
||||
dictInfo: this.currentDict,
|
||||
currentData: row,
|
||||
dictData: this.currentDict.treeFlag ? this.currentDictDataList : []
|
||||
}).then(res => {
|
||||
this.updateDictData();
|
||||
}).catch(e => {});
|
||||
},
|
||||
onDeleteDictDataClick (row) {
|
||||
this.$confirm('是否删除此字典数据？').then(res => {
|
||||
let params = {};
|
||||
params[this.currentDict.idKey] = row.id;
|
||||
return this.currentDict.deleteApi(this, params);
|
||||
}).then(res => {
|
||||
this.$message.success('删除成功');
|
||||
this.updateDictData();
|
||||
}).catch(e => {});
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getCurrentDictData () {
|
||||
return this.currentDictDataList;
|
||||
},
|
||||
...mapGetters(['getMainContextHeight'])
|
||||
},
|
||||
mounted () {
|
||||
this.onDictChange(this.dictList[0]);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
>>> .el-tree-node__content {
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
>>> .el-tree-node__content .is-leaf {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.module-node-item {
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<el-form ref="form" :model="formData" :rules="rules" label-width="80px" :size="defaultFormItemSize" label-position="right" @submit.native.prevent>
|
||||
<el-row :gutter="20">
|
||||
<el-form-item v-if="dictInfo.treeFlag" label="父字典">
|
||||
<el-cascader style="width: 100%;"
|
||||
:options="dictData" v-model="parentPath"
|
||||
:props="{label: 'name', value: 'id'}" placeholder="请选择所属父字典"
|
||||
:clearable="true" :change-on-select="true"
|
||||
@change="onParentChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="字典名称" clearable />
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<el-row type="flex" justify="end" class="dialog-btn-layer">
|
||||
<el-button :size="defaultFormItemSize" @click="onCancel(false)" >取消</el-button>
|
||||
<el-button type="primary" :size="defaultFormItemSize" @click="onSubmit">确定</el-button>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { findTreeNodePath } from '@/utils';
|
||||
|
||||
export default {
|
||||
name: 'DictEdit',
|
||||
props: {
|
||||
dictInfo: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
currentData: {
|
||||
type: Object,
|
||||
default: undefined
|
||||
},
|
||||
dictData: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
parentPath: [],
|
||||
formData: {
|
||||
name: undefined,
|
||||
id: undefined
|
||||
},
|
||||
rules: {
|
||||
name: [{required: true, message: '字典数据名称不能为空', trigger: 'blur'}]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onParentChange (values) {
|
||||
if (Array.isArray(values) && values.length > 0) {
|
||||
this.formData.parentId = values[values.length - 1];
|
||||
} else {
|
||||
this.formData.parentId = undefined;
|
||||
}
|
||||
},
|
||||
onCancel (isSuccess = false) {
|
||||
if (this.observer != null) {
|
||||
this.observer.cancel(isSuccess);
|
||||
}
|
||||
},
|
||||
onSubmit () {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
let params = {};
|
||||
params[this.dictInfo.variableName + 'Dto'] = {};
|
||||
params[this.dictInfo.variableName + 'Dto'][this.dictInfo.nameKey] = this.formData.name;
|
||||
params[this.dictInfo.variableName + 'Dto'][this.dictInfo.parentKey] = this.formData.parentId;
|
||||
|
||||
if (this.formData.id == null) {
|
||||
this.dictInfo.addApi(this, params).then(res => {
|
||||
this.$message.success('操作成功');
|
||||
this.onCancel(true);
|
||||
}).catch(e => {
|
||||
|
||||
});
|
||||
} else {
|
||||
params[this.dictInfo.variableName + 'Dto'][this.dictInfo.idKey] = this.formData.id;
|
||||
this.dictInfo.updateApi(this, params).then(res => {
|
||||
this.$message.success('操作成功');
|
||||
this.onCancel(true);
|
||||
}).catch(e => {
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.currentData != null) {
|
||||
this.formData.id = this.currentData.id;
|
||||
this.formData.name = this.currentData.name;
|
||||
if (this.dictInfo.treeFlag && this.currentData.parentId != null && this.currentData.parentId !== '') {
|
||||
this.formData.parentId = this.currentData.parentId;
|
||||
this.parentPath = findTreeNodePath(this.dictData, this.formData.parentId, 'id');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,243 @@
|
||||
<template>
|
||||
<div class="form-single-fragment" style="position: relative;">
|
||||
<el-form ref="formEditSysDataPerm" :model="formData" class="full-width-input" :rules="rules" style="width: 100%;"
|
||||
label-width="120px" :size="defaultFormItemSize" label-position="right" @submit.native.prevent>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="数据权限名称" prop="SysDataPerm.dataPermName">
|
||||
<el-input class="input-item" v-model="formData.SysDataPerm.dataPermName"
|
||||
:clearable="true" placeholder="显示名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="过滤规则" prop="SysDataPerm.ruleType">
|
||||
<el-select class="input-item" v-model="formData.SysDataPerm.ruleType" :clearable="true"
|
||||
placeholder="过滤规则" :loading="formEditSysDataPerm.ruleType.impl.loading"
|
||||
@visible-change="onRuleTypeVisibleChange"
|
||||
@change="onRuleTypeValueChange">
|
||||
<el-option v-for="item in formEditSysDataPerm.ruleType.impl.dropdownList" :key="item.id" :value="item.id" :label="item.name" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-card shadow="never">
|
||||
<div slot="header" class="card-header">
|
||||
<span>部门列表</span>
|
||||
<el-input :size="defaultFormItemSize" v-model="deptNameFilter" placeholder="输入部门名称过滤" style="width: 250px;" clearable suffix-icon="el-icon-search" />
|
||||
</div>
|
||||
<el-scrollbar style="height: 250px;" wrap-class="scrollbar_dropdown__wrap">
|
||||
<el-tree ref="deptTree" :data="deptTree" show-checkbox node-key="id" default-expand-all
|
||||
:check-strictly="true" :props="{...deptProps, disabled: () => {return (formData.SysDataPerm.ruleType !== SysDataPermType.CUSTOM_DEPT_AND_CHILD && formData.SysDataPerm.ruleType !== SysDataPermType.CUSTOM_DEPT)}}" :filter-node-method="filterDeptNode" />
|
||||
</el-scrollbar>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-col :span="24" style="margin-top: 20px;">
|
||||
<el-row type="flex" justify="end">
|
||||
<el-button type="primary" :size="defaultFormItemSize" :plain="true" @click="onCancel(false)">
|
||||
取消
|
||||
</el-button>
|
||||
<el-button type="primary" :size="defaultFormItemSize" @click="onUpdateClick()"
|
||||
:disabled="!(checkPermCodeExist('formSysDataPerm:fragmentSysDataPerm:add') || checkPermCodeExist('formSysDataPerm:fragmentSysDataPerm:update'))">
|
||||
保存
|
||||
</el-button>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { treeDataTranslate } from '@/utils';
|
||||
/* eslint-disable-next-line */
|
||||
import { DropdownWidget, TableWidget, UploadWidget, ChartWidget } from '@/utils/widget.js';
|
||||
/* eslint-disable-next-line */
|
||||
import { uploadMixin, statsDateRangeMixin, cachedPageChildMixin } from '@/core/mixins';
|
||||
/* eslint-disable-next-line */
|
||||
import { SystemController, DictionaryController, SysDataPermController } from '@/api';
|
||||
|
||||
export default {
|
||||
name: 'formEditSysDataPerm',
|
||||
props: {
|
||||
dataPermId: {
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
mixins: [uploadMixin, statsDateRangeMixin, cachedPageChildMixin],
|
||||
data () {
|
||||
return {
|
||||
deptTree: [],
|
||||
deptNameFilter: undefined,
|
||||
deptProps: {
|
||||
label: 'name'
|
||||
},
|
||||
formData: {
|
||||
SysDataPerm: {
|
||||
dataPermId: undefined,
|
||||
dataPermName: undefined,
|
||||
ruleType: undefined,
|
||||
deptIdListString: undefined,
|
||||
createUserId: undefined,
|
||||
createUsername: undefined
|
||||
}
|
||||
},
|
||||
rules: {
|
||||
'SysDataPerm.dataPermName': [
|
||||
{required: true, message: '请输入数据权限名称', trigger: 'blur'}
|
||||
],
|
||||
'SysDataPerm.ruleType': [
|
||||
{required: true, message: '请选择过滤规则', trigger: 'blur'}
|
||||
]
|
||||
},
|
||||
formEditSysDataPerm: {
|
||||
formFilter: {
|
||||
},
|
||||
formFilterCopy: {
|
||||
},
|
||||
ruleType: {
|
||||
impl: new DropdownWidget(this.loadRuleTypeDropdownList)
|
||||
},
|
||||
isInit: false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
filterDeptNode (value, data) {
|
||||
if (!value) return true;
|
||||
return data.deptName ? data.deptName.indexOf(value) !== -1 : true;
|
||||
},
|
||||
onCancel (isSuccess) {
|
||||
if (this.observer != null) {
|
||||
this.observer.cancel(isSuccess);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 过滤规则下拉数据获取函数
|
||||
*/
|
||||
loadRuleTypeDropdownList () {
|
||||
return new Promise((resolve, reject) => {
|
||||
let params = {};
|
||||
DictionaryController.dictSysDataPermType(this, params).then(res => {
|
||||
resolve(res.getList());
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 过滤规则下拉框显隐
|
||||
*/
|
||||
onRuleTypeVisibleChange (show) {
|
||||
this.formEditSysDataPerm.ruleType.impl.onVisibleChange(show).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 过滤规则选中值改变
|
||||
*/
|
||||
onRuleTypeValueChange (value) {
|
||||
},
|
||||
/**
|
||||
* 部门列表数据获取函数
|
||||
*/
|
||||
loadDeptList () {
|
||||
return new Promise((resolve, reject) => {
|
||||
let params = {};
|
||||
DictionaryController.dictSysDept(this, params).then(res => {
|
||||
this.deptTree = treeDataTranslate(res.getList(), 'id');
|
||||
if (Array.isArray(this.formData.SysDataPerm.dataPermDeptList)) {
|
||||
this.$refs.deptTree.setCheckedKeys(this.formData.SysDataPerm.dataPermDeptList.map((item) => {
|
||||
return item.deptId;
|
||||
}));
|
||||
}
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 更新编辑数据权限
|
||||
*/
|
||||
refreshFormEditSysDataPerm (reloadData = false) {
|
||||
this.formEditSysDataPerm.ruleType.impl.onVisibleChange(true).catch(e => {});
|
||||
this.formEditSysDataPerm.isInit = true;
|
||||
},
|
||||
/**
|
||||
* 编辑
|
||||
*/
|
||||
onUpdateClick () {
|
||||
this.$refs.formEditSysDataPerm.validate((valid) => {
|
||||
if (!valid) return;
|
||||
let params = {
|
||||
sysDataPermDto: {
|
||||
dataPermId: this.dataPermId,
|
||||
ruleType: this.formData.SysDataPerm.ruleType,
|
||||
dataPermName: this.formData.SysDataPerm.dataPermName
|
||||
}
|
||||
};
|
||||
if (this.formData.SysDataPerm.ruleType === this.SysDataPermType.CUSTOM_DEPT_AND_CHILD ||
|
||||
this.formData.SysDataPerm.ruleType === this.SysDataPermType.CUSTOM_DEPT) {
|
||||
let deptList = this.$refs.deptTree.getCheckedKeys();
|
||||
if (deptList.length <= 0) {
|
||||
this.$message.error('请选择数据权限部门');
|
||||
return;
|
||||
}
|
||||
params.deptIdListString = Array.isArray(deptList) ? deptList.join(',') : undefined;
|
||||
}
|
||||
if (this.dataPermId == null) {
|
||||
SysDataPermController.add(this, params).then(res => {
|
||||
this.$message.success('添加成功');
|
||||
this.onCancel(true);
|
||||
}).catch(e => {});
|
||||
} else {
|
||||
SysDataPermController.update(this, params).then(res => {
|
||||
this.$message.success('编辑成功');
|
||||
this.onCancel(true);
|
||||
}).catch(e => {});
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 获取数据权限详细信息
|
||||
*/
|
||||
loadSysDataPermData () {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (this.dataPermId == null) {
|
||||
resolve();
|
||||
} else {
|
||||
let params = {
|
||||
dataPermId: this.dataPermId
|
||||
};
|
||||
SysDataPermController.view(this, params).then(res => {
|
||||
this.formData.SysDataPerm = {...res.data};
|
||||
resolve();
|
||||
}).catch(e => {
|
||||
reject();
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
initFormData () {
|
||||
},
|
||||
formInit () {
|
||||
let loadAllDatasource = [
|
||||
this.loadSysDataPermData()
|
||||
];
|
||||
Promise.all(loadAllDatasource).then(res => {
|
||||
this.initFormData();
|
||||
this.refreshFormEditSysDataPerm();
|
||||
this.loadDeptList();
|
||||
}).catch(e => {});
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.formInit();
|
||||
},
|
||||
watch: {
|
||||
deptNameFilter (val) {
|
||||
this.$refs.deptTree.filter(val);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<div class="form-single-fragment" style="position: relative;">
|
||||
<el-form ref="formEditSysDept" :model="formData" :rules="rules" style="width: 100%;"
|
||||
label-width="100px" :size="defaultFormItemSize" label-position="right" @submit.native.prevent>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="所属部门" prop="SysDept.parentId">
|
||||
<el-cascader class="input-item" v-model="formEditSysDept.parentId.value" :clearable="true"
|
||||
placeholder="所属部门" :loading="formEditSysDept.parentId.impl.loading" :props="{value: 'id', label: 'name', checkStrictly: true}"
|
||||
@visible-change="onParentIdVisibleChange" :options="formEditSysDept.parentId.impl.dropdownList"
|
||||
@change="onParentIdValueChange">
|
||||
</el-cascader>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="部门名称" prop="SysDept.deptName">
|
||||
<el-input class="input-item" v-model="formData.SysDept.deptName"
|
||||
:clearable="true" placeholder="部门名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="显示顺序" prop="SysDept.showOrder">
|
||||
<el-input-number class="input-item" v-model="formData.SysDept.showOrder"
|
||||
:clearable="true" controls-position="right" placeholder="显示顺序" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-row type="flex" justify="end">
|
||||
<el-button type="primary" :size="defaultFormItemSize" :plain="true"
|
||||
@click="onCancel(false)">
|
||||
取消
|
||||
</el-button>
|
||||
<el-button type="primary" :size="defaultFormItemSize" @click="onUpdateClick()"
|
||||
:disabled="!(checkPermCodeExist('formSysDept:fragmentSysDept:update') || checkPermCodeExist('formSysDept:fragmentSysDept:add'))">
|
||||
保存
|
||||
</el-button>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { findTreeNodePath } from '@/utils';
|
||||
/* eslint-disable-next-line */
|
||||
import { DropdownWidget, TableWidget, UploadWidget, ChartWidget } from '@/utils/widget.js';
|
||||
/* eslint-disable-next-line */
|
||||
import { uploadMixin, statsDateRangeMixin, cachedPageChildMixin } from '@/core/mixins';
|
||||
/* eslint-disable-next-line */
|
||||
import { SysDeptController, DictionaryController } from '@/api';
|
||||
|
||||
export default {
|
||||
name: 'formEditSysDept',
|
||||
props: {
|
||||
deptId: {
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
mixins: [uploadMixin, statsDateRangeMixin, cachedPageChildMixin],
|
||||
data () {
|
||||
return {
|
||||
formData: {
|
||||
SysDept: {
|
||||
deptId: undefined,
|
||||
deptName: undefined,
|
||||
showOrder: undefined,
|
||||
parentId: undefined,
|
||||
deletedFlag: undefined
|
||||
}
|
||||
},
|
||||
rules: {
|
||||
'SysDept.deptName': [
|
||||
{required: true, message: '请输入部门名称', trigger: 'blur'}
|
||||
],
|
||||
'SysDept.showOrder': [
|
||||
{required: true, message: '请输入显示顺序', trigger: 'blur'}
|
||||
]
|
||||
},
|
||||
formEditSysDept: {
|
||||
formFilter: {
|
||||
},
|
||||
formFilterCopy: {
|
||||
},
|
||||
parentId: {
|
||||
impl: new DropdownWidget(this.loadParentIdDropdownList, true, 'id'),
|
||||
value: []
|
||||
},
|
||||
isInit: false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onCancel (isSuccess) {
|
||||
if (this.observer != null) {
|
||||
this.observer.cancel(isSuccess);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 所属部门下拉数据获取函数
|
||||
*/
|
||||
loadParentIdDropdownList () {
|
||||
return new Promise((resolve, reject) => {
|
||||
let params = {};
|
||||
DictionaryController.dictSysDept(this, params).then(res => {
|
||||
resolve(res.getList());
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 所属部门下拉框显隐
|
||||
*/
|
||||
onParentIdVisibleChange (show) {
|
||||
this.formEditSysDept.parentId.impl.onVisibleChange(show).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 所属部门选中值改变
|
||||
*/
|
||||
onParentIdValueChange (value) {
|
||||
},
|
||||
/**
|
||||
* 更新编辑用户
|
||||
*/
|
||||
refreshFormEditSysDept (reloadData = false) {
|
||||
this.formEditSysDept.parentId.impl.onVisibleChange(true).then(res => {
|
||||
if (!this.formEditSysDept.isInit) {
|
||||
this.formEditSysDept.parentId.value = findTreeNodePath(
|
||||
this.formEditSysDept.parentId.impl.dropdownList, this.formData.SysDept.parentId, 'id');
|
||||
}
|
||||
this.formEditSysDept.isInit = true;
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 编辑
|
||||
*/
|
||||
onUpdateClick () {
|
||||
this.$refs.formEditSysDept.validate((valid) => {
|
||||
if (!valid) return;
|
||||
let params = {
|
||||
sysDeptDto: {
|
||||
deptName: this.formData.SysDept.deptName,
|
||||
showOrder: this.formData.SysDept.showOrder,
|
||||
parentId: Array.isArray(this.formEditSysDept.parentId.value) ? this.formEditSysDept.parentId.value[this.formEditSysDept.parentId.value.length - 1] : undefined,
|
||||
deptId: this.deptId
|
||||
}
|
||||
};
|
||||
if (this.isEdit) {
|
||||
SysDeptController.update(this, params).then(res => {
|
||||
this.$message.success('编辑成功');
|
||||
this.onCancel(true);
|
||||
}).catch(e => {});
|
||||
} else {
|
||||
SysDeptController.add(this, params).then(res => {
|
||||
this.$message.success('新建成功');
|
||||
this.onCancel(true);
|
||||
}).catch(e => {});
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 获取部门管理详细信息
|
||||
*/
|
||||
loadSysDeptData () {
|
||||
if (!this.isEdit) return;
|
||||
let params = {
|
||||
deptId: this.deptId
|
||||
};
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
SysDeptController.view(this, params).then(res => {
|
||||
this.formData.SysDept = {...res.data};
|
||||
resolve();
|
||||
}).catch(e => {
|
||||
reject();
|
||||
});
|
||||
});
|
||||
},
|
||||
initFormData () {
|
||||
},
|
||||
formInit () {
|
||||
let loadAllDatasource = [
|
||||
this.loadSysDeptData()
|
||||
];
|
||||
Promise.all(loadAllDatasource).then(res => {
|
||||
this.initFormData();
|
||||
this.refreshFormEditSysDept();
|
||||
}).catch(e => {});
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isEdit () {
|
||||
return this.deptId != null;
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.formInit();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<el-form ref="form" :model="formData" :rules="rules" label-width="110px" :size="defaultFormItemSize" label-position="right" @submit.native.prevent>
|
||||
<el-row :gutter="20" class="full-width-input">
|
||||
<el-col :span="24" >
|
||||
<el-form-item label="菜单名称" prop="menuName">
|
||||
<el-input v-model="formData.menuName" placeholder="菜单名称" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="显示顺序" prop="showOrder">
|
||||
<el-input-number v-model="formData.showOrder" controls-position="right"
|
||||
:min="1" :max="99999" placeholder="请输入显示顺序"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 弹窗按钮 -->
|
||||
<el-row type="flex" justify="end" class="dialog-btn-layer mt20">
|
||||
<el-button :size="defaultFormItemSize" @click="onCancel(false)" >取消</el-button>
|
||||
<el-button type="primary" :size="defaultFormItemSize" @click="onSubmit">确定</el-button>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { SystemController } from '@/api';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
columnId: {
|
||||
type: String
|
||||
},
|
||||
columnName: {
|
||||
type: String
|
||||
},
|
||||
showOrder: {
|
||||
type: Number
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// 是否自动用上级菜单的名称过滤权限字列表，当这个开关打开后，会使用getAutoFilterString返回的字符串当做过滤字符串
|
||||
autoFilter: false,
|
||||
permCodeNameFilter: undefined,
|
||||
allowParentList: [],
|
||||
formData: {
|
||||
menuId: this.columnId,
|
||||
parentId: undefined,
|
||||
menuName: this.columnName,
|
||||
showOrder: this.showOrder,
|
||||
menuType: this.SysMenuType.DIRECTORY,
|
||||
icon: undefined,
|
||||
formRouterName: undefined
|
||||
},
|
||||
rules: {
|
||||
menuName: [{required: true, message: '请输入栏目名称', trigger: 'blur'}],
|
||||
showOrder: [{required: true, message: '请输入栏目显示顺序', trigger: 'blur'}]
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onCancel (isSuccess) {
|
||||
if (this.observer != null) {
|
||||
this.observer.cancel(isSuccess);
|
||||
}
|
||||
},
|
||||
onSubmit () {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
let params = {};
|
||||
params.sysMenuDto = {...this.formData};
|
||||
|
||||
if (this.isEdit) {
|
||||
SystemController.updateMenu(this, params).then(res => {
|
||||
resolve(res);
|
||||
this.$message.success('编辑成功');
|
||||
this.onCancel(true);
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
} else {
|
||||
SystemController.addMenu(this, params).then(res => {
|
||||
resolve(res);
|
||||
this.$message.success('添加成功');
|
||||
this.onCancel(true);
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
}
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
initData () {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isEdit () {
|
||||
return this.formData.menuId != null;
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initData();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,283 @@
|
||||
<template>
|
||||
<el-form ref="form" :model="formData" :rules="rules" label-width="110px" :size="defaultFormItemSize" label-position="right" @submit.native.prevent>
|
||||
<el-row :gutter="20" class="full-width-input">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="上级菜单">
|
||||
<el-cascader :options="menuTree" v-model="parentMenuPath" :props="menuProps" placeholder="选择父菜单"
|
||||
:clearable="true" :change-on-select="true" :size="defaultFormItemSize"
|
||||
@change="onParentMenuChange" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" >
|
||||
<el-form-item label="菜单名称" prop="menuName">
|
||||
<el-input v-model="formData.menuName" placeholder="菜单名称" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="菜单类型" prop="menuType">
|
||||
<el-select v-model="formData.menuType" :disabled="isEdit" placeholder="菜单类型" @change="onMenuTypeChange">
|
||||
<el-option v-for="item in getValidMenuType" :key="item.id" :value="item.id" :label="item.name" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="显示顺序" prop="showOrder">
|
||||
<el-input-number v-model="formData.showOrder" controls-position="right"
|
||||
:min="1" :max="99999" placeholder="请输入显示顺序"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="菜单路由">
|
||||
<el-input v-model="formData.formRouterName" placeholder="菜单路由"
|
||||
:disabled="formData.menuType !== 1" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="菜单图标" prop="icon">
|
||||
<icon-select v-model="formData.icon" :height="28" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-card shadow="never">
|
||||
<div slot="header" class="card-header">
|
||||
<span>权限字列表</span>
|
||||
<el-input :size="defaultFormItemSize" v-model="permCodeNameFilter" placeholder="输入权限字名称过滤" style="width: 250px;" clearable suffix-icon="el-icon-search" />
|
||||
</div>
|
||||
<el-scrollbar style="height: 210px;" wrap-class="scrollbar_dropdown__wrap">
|
||||
<el-tree ref="permCodeTree" :check-strictly="true"
|
||||
v-show="formData.menuType"
|
||||
:props="treeProps" node-key="permCodeId" :default-expanded-keys="defaultExpandedKeys"
|
||||
show-checkbox :data="getPermCodeTree" :filter-node-method="filterPermCodeNode"></el-tree>
|
||||
</el-scrollbar>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 弹窗按钮 -->
|
||||
<el-row type="flex" justify="end" class="dialog-btn-layer mt20">
|
||||
<el-button :size="defaultFormItemSize" @click="onCancel(false)" >取消</el-button>
|
||||
<el-button type="primary" :size="defaultFormItemSize" @click="onSubmit"
|
||||
:disabled="!(checkPermCodeExist('formSysMenu:fragmentSysMenu:add') || checkPermCodeExist('formSysMenu:fragmentSysMenu:update'))">
|
||||
确定
|
||||
</el-button>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import { treeDataTranslate, findTreeNodePath, findTreeNode, findItemFromList } from '@/utils';
|
||||
import { SystemController } from '@/api';
|
||||
import IconSelect from '@/components/IconSelect/index.vue';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
menuId: {
|
||||
type: String
|
||||
},
|
||||
parentId: {
|
||||
type: String
|
||||
},
|
||||
menuList: {
|
||||
type: Array,
|
||||
default: undefined
|
||||
},
|
||||
rowData: {
|
||||
type: Object,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
components: {
|
||||
IconSelect
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// 是否自动用上级菜单的名称过滤权限字列表，当这个开关打开后，会使用getAutoFilterString返回的字符串当做过滤字符串
|
||||
autoFilter: false,
|
||||
permCodeNameFilter: undefined,
|
||||
allowParentList: [],
|
||||
formData: {
|
||||
menuId: undefined,
|
||||
parentId: undefined,
|
||||
menuName: undefined,
|
||||
showOrder: undefined,
|
||||
menuType: undefined,
|
||||
icon: undefined,
|
||||
formRouterName: undefined
|
||||
},
|
||||
menuProps: {
|
||||
label: 'menuName',
|
||||
value: 'menuId'
|
||||
},
|
||||
parentMenuType: undefined,
|
||||
parentMenuPath: [],
|
||||
menuTree: [],
|
||||
permCodeList: [],
|
||||
defaultExpandedKeys: [],
|
||||
rules: {
|
||||
menuName: [{required: true, message: '请输入菜单名称', trigger: 'blur'}],
|
||||
showOrder: [{required: true, message: '请输入菜单显示顺序', trigger: 'blur'}],
|
||||
formRouterName: [{required: true, message: '请输入菜单路由名称', trigger: 'blur'}]
|
||||
},
|
||||
treeProps: {
|
||||
label: 'showName'
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getAutoFilterString () {
|
||||
let node = findTreeNode(this.menuTree, this.parentMenuPath[this.parentMenuPath.length - 1], 'menuId');
|
||||
return node ? node.menuName : undefined;
|
||||
},
|
||||
onMenuTypeChange (value) {
|
||||
if (this.autoFilter && value === this.SysMenuType.BUTTON && (this.permCodeNameFilter == null || this.permCodeNameFilter === '')) {
|
||||
this.permCodeNameFilter = this.getAutoFilterString();
|
||||
}
|
||||
},
|
||||
filterPermCodeNode (value, data) {
|
||||
if (!value) return true;
|
||||
if (data.showName.indexOf(value) !== -1) {
|
||||
this.allowParentList.push(data.permCodeId);
|
||||
return true;
|
||||
} else {
|
||||
return this.allowParentList.indexOf(data.parentId) !== -1;
|
||||
}
|
||||
},
|
||||
onParentMenuChange (value, isInit) {
|
||||
this.parentMenuType = undefined;
|
||||
if (Array.isArray(value) && value.length > 0) {
|
||||
let node = findTreeNode(this.menuTree, value[value.length - 1], 'menuId');
|
||||
if (node) this.parentMenuType = node.menuType;
|
||||
}
|
||||
// 父菜单切换后判断可用菜单类型是否改变，如果改变则清空
|
||||
if (!isInit && this.getValidMenuType.map(item => item.id).indexOf(this.formData.menuType) === -1) this.formData.menuType = undefined;
|
||||
},
|
||||
onCancel (isSuccess) {
|
||||
if (this.observer != null) {
|
||||
this.observer.cancel(isSuccess);
|
||||
}
|
||||
},
|
||||
onSubmit () {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
let params = {};
|
||||
params.sysMenuDto = {...this.formData};
|
||||
if (this.parentMenuPath.length > 0) {
|
||||
params.sysMenuDto.parentId = this.parentMenuPath[this.parentMenuPath.length - 1];
|
||||
}
|
||||
if ([this.SysMenuType.MENU, this.SysMenuType.BUTTON, this.SysMenuType.FRAGMENT].indexOf(params.sysMenuDto.menuType) !== -1) {
|
||||
let tempList = this.$refs.permCodeTree.getHalfCheckedKeys();
|
||||
tempList = tempList.concat(this.$refs.permCodeTree.getCheckedKeys());
|
||||
params.permCodeIdListString = tempList.join(',');
|
||||
}
|
||||
if (this.isEdit) {
|
||||
SystemController.updateMenu(this, params).then(res => {
|
||||
resolve(res);
|
||||
this.$message.success('编辑成功');
|
||||
this.onCancel(true);
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
} else {
|
||||
SystemController.addMenu(this, params).then(res => {
|
||||
resolve(res);
|
||||
this.$message.success('添加成功');
|
||||
this.onCancel(true);
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
}
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
formatMenuTree () {
|
||||
this.menuTree = [];
|
||||
if (Array.isArray(this.menuList)) {
|
||||
this.menuTree = this.menuList.filter((item) => {
|
||||
return item.menuType !== this.SysMenuType.BUTTON && item.menuId !== this.formData.menuId;
|
||||
});
|
||||
}
|
||||
this.menuTree = treeDataTranslate(this.menuTree, 'menuId', 'parentId');
|
||||
},
|
||||
initData () {
|
||||
this.defaultExpandedKeys = [];
|
||||
this.formatMenuTree();
|
||||
this.parentMenuPath = findTreeNodePath(this.menuTree, this.formData.parentId, 'menuId');
|
||||
this.onParentMenuChange(this.parentMenuPath, true);
|
||||
this.onMenuTypeChange(this.formData.menuType);
|
||||
SystemController.getPermCodeList(this, {}).then(res => {
|
||||
this.permCodeList = res.data;
|
||||
if (Array.isArray(this.formData.permCodeIdList) && this.formData.permCodeIdList.length > 0) {
|
||||
let tempList = [];
|
||||
this.permCodeList.forEach((item) => {
|
||||
if (findItemFromList(this.formData.permCodeIdList, item.permCodeId) != null) {
|
||||
tempList.push(item.permCodeId);
|
||||
}
|
||||
});
|
||||
this.defaultExpandedKeys = tempList;
|
||||
this.$refs.permCodeTree.setCheckedKeys(tempList);
|
||||
this.$nextTick(() => {
|
||||
this.allowParentList = [];
|
||||
if (this.permCodeNameFilter != null && this.permCodeNameFilter !== '') this.$refs.permCodeTree.filter(this.permCodeNameFilter);
|
||||
});
|
||||
}
|
||||
}).catch(e => {});
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getValidMenuType () {
|
||||
let allList = this.SysMenuType.getList();
|
||||
if (this.parentMenuType == null) {
|
||||
return allList.filter((item) => {
|
||||
return [this.SysMenuType.MENU, this.SysMenuType.DIRECTORY].indexOf(item.id) !== -1;
|
||||
});
|
||||
} else {
|
||||
return allList.filter((item) => {
|
||||
switch (Number.parseInt(this.parentMenuType)) {
|
||||
case this.SysMenuType.DIRECTORY: return [this.SysMenuType.MENU, this.SysMenuType.DIRECTORY].indexOf(item.id) !== -1;
|
||||
case this.SysMenuType.MENU: return [this.SysMenuType.FRAGMENT, this.SysMenuType.BUTTON].indexOf(item.id) !== -1;
|
||||
case this.SysMenuType.FRAGMENT: return item.id === this.SysMenuType.BUTTON;
|
||||
default: return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
isEdit () {
|
||||
return this.formData.menuId != null;
|
||||
},
|
||||
// 判断是否新建一个目录
|
||||
isNew () {
|
||||
return this.formData.parentId == null && this.formData.menuId == null;
|
||||
},
|
||||
canEditParent () {
|
||||
return this.parentId == null;
|
||||
},
|
||||
getPermCodeTree () {
|
||||
if (this.permCodeList != null) {
|
||||
return treeDataTranslate(this.permCodeList, 'permCodeId', 'parentId');
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.rowData != null) {
|
||||
this.formData = {...this.formData, ...this.rowData};
|
||||
if (Array.isArray(this.formData.sysMenuPermCodeList)) {
|
||||
this.formData.permCodeIdList = this.formData.sysMenuPermCodeList.map(item => item.permCodeId);
|
||||
}
|
||||
}
|
||||
if (this.parentId != null) this.formData.parentId = this.parentId;
|
||||
this.initData();
|
||||
},
|
||||
watch: {
|
||||
permCodeNameFilter (val) {
|
||||
this.allowParentList = [];
|
||||
this.$refs.permCodeTree.filter(val);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<div class="form-single-fragment" style="position: relative;">
|
||||
<el-form ref="formCreatePerm" :model="formData" class="full-width-input" :rules="rules" style="width: 100%;"
|
||||
label-width="100px" :size="defaultFormItemSize" label-position="right" @submit.native.prevent>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="权限名称" prop="SysPerm.permName">
|
||||
<el-input class="input-item" v-model="formData.SysPerm.permName"
|
||||
:clearable="true" placeholder="权限名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="所属模块" prop="SysPerm.moduleId">
|
||||
<el-cascader class="input-item" :options="permModuleList" v-model="formData.SysPerm.moduleId"
|
||||
placeholder="选择所属模块" :clearable="true" :size="defaultFormItemSize" :props="{value: 'moduleId', label: 'moduleName'}" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="关联的url" prop="SysPerm.url">
|
||||
<el-input class="input-item" v-model="formData.SysPerm.url"
|
||||
:clearable="true" placeholder="关联的url" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="显示顺序" prop="SysPerm.showOrder">
|
||||
<el-input-number class="input-item" v-model="formData.SysPerm.showOrder"
|
||||
:clearable="true" controls-position="right" placeholder="权限在当前模块下的顺序" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-row type="flex" justify="end">
|
||||
<el-button type="primary" :size="defaultFormItemSize" :plain="true"
|
||||
@click="onCancel(false)">
|
||||
取消
|
||||
</el-button>
|
||||
<el-button type="primary" :size="defaultFormItemSize" @click="onAddClick()"
|
||||
:disabled="!(checkPermCodeExist('formSysPerm:fragmentSysPerm:updatePerm') || checkPermCodeExist('formSysPerm:fragmentSysPerm:addPerm'))">
|
||||
保存
|
||||
</el-button>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { findTreeNodePath } from '@/utils';
|
||||
/* eslint-disable-next-line */
|
||||
import { uploadMixin, statsDateRangeMixin, cachedPageChildMixin } from '@/core/mixins';
|
||||
/* eslint-disable-next-line */
|
||||
import { SystemController, DictionaryController } from '@/api';
|
||||
|
||||
export default {
|
||||
name: 'formEditSysPerm',
|
||||
props: {
|
||||
permId: {
|
||||
default: undefined
|
||||
},
|
||||
moduleId: {
|
||||
default: undefined
|
||||
},
|
||||
rowData: {
|
||||
type: Object
|
||||
},
|
||||
currentPermGroupId: String,
|
||||
permModuleList: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
},
|
||||
mixins: [uploadMixin, statsDateRangeMixin, cachedPageChildMixin],
|
||||
data () {
|
||||
return {
|
||||
formData: {
|
||||
SysPerm: {
|
||||
permId: undefined,
|
||||
moduleId: this.currentPermGroupId,
|
||||
permName: undefined,
|
||||
url: undefined,
|
||||
showOrder: undefined,
|
||||
deletedFlag: undefined
|
||||
}
|
||||
},
|
||||
rules: {
|
||||
'SysPerm.permName': [
|
||||
{required: true, message: '请输入权限名称', trigger: 'blur'}
|
||||
],
|
||||
'SysPerm.url': [
|
||||
{required: true, message: '请输入关联的url', trigger: 'blur'}
|
||||
],
|
||||
'SysPerm.showOrder': [
|
||||
{required: true, message: '请输入显示顺序', trigger: 'blur'}
|
||||
]
|
||||
},
|
||||
formCreatePerm: {
|
||||
formFilter: {
|
||||
},
|
||||
formFilterCopy: {
|
||||
},
|
||||
isInit: false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onCancel (isSuccess) {
|
||||
if (this.observer != null) {
|
||||
this.observer.cancel(isSuccess);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 更新新建权限
|
||||
*/
|
||||
refreshFormCreatePerm (reloadData = false) {
|
||||
if (!this.formCreatePerm.isInit) {
|
||||
this.formData.SysPerm.moduleId = findTreeNodePath(this.permModuleList, this.formData.SysPerm.moduleId, 'moduleId');
|
||||
}
|
||||
this.formCreatePerm.isInit = true;
|
||||
},
|
||||
/**
|
||||
* 新增
|
||||
*/
|
||||
onAddClick () {
|
||||
this.$refs.formCreatePerm.validate((valid) => {
|
||||
if (!valid) return;
|
||||
let params = {
|
||||
sysPermDto: {
|
||||
permId: this.permId,
|
||||
showOrder: this.formData.SysPerm.showOrder,
|
||||
moduleId: Array.isArray(this.formData.SysPerm.moduleId) ? this.formData.SysPerm.moduleId[this.formData.SysPerm.moduleId.length - 1] : undefined,
|
||||
url: this.formData.SysPerm.url,
|
||||
permName: this.formData.SysPerm.permName
|
||||
}
|
||||
};
|
||||
|
||||
if (this.isEdit) {
|
||||
SystemController.updatePerm(this, params).then(res => {
|
||||
this.$message.success('编辑成功');
|
||||
this.onCancel(true);
|
||||
}).catch(e => {});
|
||||
} else {
|
||||
SystemController.addPerm(this, params).then(res => {
|
||||
this.$message.success('新增成功');
|
||||
this.onCancel(true);
|
||||
}).catch(e => {});
|
||||
}
|
||||
});
|
||||
},
|
||||
initFormData () {
|
||||
if (this.rowData != null) this.formData.SysPerm = {...this.formData.SysPerm, ...this.rowData};
|
||||
},
|
||||
formInit () {
|
||||
this.initFormData();
|
||||
this.refreshFormCreatePerm();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isEdit () {
|
||||
return this.permId != null;
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.formInit();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,221 @@
|
||||
<template>
|
||||
<el-form ref="form" :model="formData" :rules="rules" label-width="110px" :size="defaultFormItemSize" label-position="right" @submit.native.prevent>
|
||||
<el-row :gutter="20" class="full-width-input">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="所属权限字">
|
||||
<el-cascader :options="permCodeTree" v-model="parentPermCodePath" :props="permCodeProps" filterable
|
||||
:disabled="formData.permCodeId != null || formData.parenId == null" placeholder="选择父权限字" :clearable="true" :change-on-select="true" :size="defaultFormItemSize" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="权限字名称" prop="showName">
|
||||
<el-input v-model="formData.showName" placeholder="权限字名称" clearable ></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="权限字标识" prop="permCode">
|
||||
<el-input v-model="formData.permCode" placeholder="权限字标识" clearable ></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="权限字类型" prop="permCode">
|
||||
<el-select v-model="formData.permCodeType" placeholder="权限字类型" :disabled="true">
|
||||
<el-option v-for="item in SysPermCodeType.getList()" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="显示顺序" prop="showOrder">
|
||||
<el-input-number v-model="formData.showOrder" controls-position="right"
|
||||
:min="1" :max="99999" placeholder="请输入显示顺序"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-card shadow="never">
|
||||
<div slot="header" class="card-header">
|
||||
<span>权限列表</span>
|
||||
<el-input :size="defaultFormItemSize" v-model="permNameFilter" placeholder="输入权限名称过滤" style="width: 250px;" clearable suffix-icon="el-icon-search" />
|
||||
</div>
|
||||
<el-scrollbar style="height: 215px;" wrap-class="scrollbar_dropdown__wrap">
|
||||
<el-tree ref="permTree" :data="formData.permCodeType === SysPermCodeType.FORM ? [] : getPermTree" :props="treeProps" show-checkbox
|
||||
node-key="id" empty-text="暂无权限资源" :filter-node-method="filterPermNode"
|
||||
:default-expanded-keys="defaultExpandedKeys">
|
||||
<div slot-scope="{ data }" style="display: flex; justify-content: space-between; width: 100%">
|
||||
<span>{{ data.name }}</span>
|
||||
<span style="margin-right: 10px;">{{ data.url }}</span>
|
||||
</div>
|
||||
</el-tree>
|
||||
</el-scrollbar>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 弹窗按钮 -->
|
||||
<el-row type="flex" justify="end" class="dialog-btn-layer mt20">
|
||||
<el-button :size="defaultFormItemSize" @click="onCancel(false)" >取消</el-button>
|
||||
<el-button type="primary" :size="defaultFormItemSize" @click="onSubmit"
|
||||
:disabled="!(checkPermCodeExist('formSysPermCode:fragmentSysPermCode:add') || checkPermCodeExist('formSysPermCode:fragmentSysPermCode:update'))">
|
||||
确定
|
||||
</el-button>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { treeDataTranslate, findTreeNodePath } from '@/utils'
|
||||
import { SystemController } from '@/api'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
permCodeTree: {
|
||||
type: Array,
|
||||
default: function () {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
permCodeType: {
|
||||
type: Number,
|
||||
default: undefined
|
||||
},
|
||||
rowData: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
permNameFilter: undefined,
|
||||
allowParentList: [],
|
||||
formData: {
|
||||
permCodeId: undefined,
|
||||
parentId: undefined,
|
||||
permCode: undefined,
|
||||
permCodeType: this.permCodeType || this.SysPermCodeType.FORM,
|
||||
showName: undefined,
|
||||
showOrder: undefined
|
||||
},
|
||||
parentPermCodePath: [],
|
||||
permList: [],
|
||||
defaultExpandedKeys: [],
|
||||
treeProps: {
|
||||
label: 'name',
|
||||
isLeaf: function (data, node) {
|
||||
return data.isPerm;
|
||||
}
|
||||
},
|
||||
permCodeProps: {
|
||||
label: 'showName',
|
||||
value: 'permCodeId'
|
||||
},
|
||||
rules: {
|
||||
showName: [{required: true, message: '权限字名称不能为空', trigger: 'blur'}],
|
||||
permCode: [{required: true, message: '权限字标识不能为空', trigger: 'blur'}],
|
||||
showOrder: [{required: true, message: '请输入权限字显示顺序', trigger: 'blur'}],
|
||||
permCodeType: [{required: true, message: '请选择权限字类型', trigger: 'blur'}]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
filterPermNode (value, data) {
|
||||
if (!value) return true;
|
||||
if (data.name.indexOf(value) !== -1) {
|
||||
this.allowParentList.push(data.id);
|
||||
return true;
|
||||
} else {
|
||||
return this.allowParentList.indexOf(data.parentId) !== -1;
|
||||
}
|
||||
},
|
||||
getTreeLeafKeys () {
|
||||
let selectPermNodeList = this.$refs.permTree.getCheckedNodes();
|
||||
let tempList = [];
|
||||
selectPermNodeList.forEach((item) => {
|
||||
if (item.isPerm) {
|
||||
tempList.push(item.id);
|
||||
}
|
||||
});
|
||||
|
||||
return tempList;
|
||||
},
|
||||
onCancel (isSuccess) {
|
||||
if (this.observer != null) {
|
||||
this.observer.cancel(isSuccess);
|
||||
}
|
||||
},
|
||||
onSubmit () {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
let selectedPermList = this.getTreeLeafKeys();
|
||||
let params = {};
|
||||
params.sysPermCodeDto = {...this.formData};
|
||||
delete params.sysPermCodeDto.children;
|
||||
params.sysPermCodeDto.permCodeType = (this.permCodeType == null) ? this.SysPermCodeType.FORM : this.permCodeType;
|
||||
if (this.parentPermCodePath.length > 0) {
|
||||
params.sysPermCodeDto.parentId = this.parentPermCodePath[this.parentPermCodePath.length - 1];
|
||||
}
|
||||
params.permIdListString = selectedPermList.join(',');
|
||||
if (params.sysPermCodeDto.permCodeId != null) {
|
||||
SystemController.updatePermCode(this, params).then(res => {
|
||||
resolve(res);
|
||||
this.$message.success('编辑成功');
|
||||
this.onCancel(true);
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
} else {
|
||||
SystemController.addPermCode(this, params).then(res => {
|
||||
resolve(res);
|
||||
this.$message.success('添加成功');
|
||||
this.onCancel(true);
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
}
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
initData () {
|
||||
SystemController.getAllPermList(this, {}).then(res => {
|
||||
res.data.forEach((item) => {
|
||||
item.id = item.id + '';
|
||||
item.parentId = item.parentId + '';
|
||||
});
|
||||
this.permList = res.data;
|
||||
this.defaultExpandedKeys = this.formData.permIdList;
|
||||
if (Array.isArray(this.formData.permIdList)) {
|
||||
this.$refs.permTree.setCheckedKeys(this.formData.permIdList, true);
|
||||
}
|
||||
}).catch(e => {});
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getPermTree () {
|
||||
return treeDataTranslate(this.permList.map((item) => {
|
||||
return {...item};
|
||||
}), 'id', 'parentId');
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.rowData != null) {
|
||||
this.formData = {...this.formData, ...this.rowData};
|
||||
if (Array.isArray(this.formData.sysPermCodePermList)) {
|
||||
this.formData.permIdList = this.formData.sysPermCodePermList.map(item => item.permId);
|
||||
}
|
||||
if (this.formData.parentId != null && this.permCodeTree != null && Array.isArray(this.permCodeTree)) {
|
||||
this.parentPermCodePath = findTreeNodePath(this.permCodeTree, this.formData.parentId, 'permCodeId');
|
||||
} else {
|
||||
this.parentPermCodePath = [];
|
||||
}
|
||||
}
|
||||
|
||||
this.initData();
|
||||
},
|
||||
watch: {
|
||||
permNameFilter (val) {
|
||||
this.allowParentList = [];
|
||||
this.$refs.permTree.filter(val);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,184 @@
|
||||
<template>
|
||||
<div class="form-single-fragment" style="position: relative;">
|
||||
<el-form ref="formCreatePermModule" :model="formData" class="full-width-input" :rules="rules" style="width: 100%;"
|
||||
label-width="120px" :size="defaultFormItemSize" label-position="right" @submit.native.prevent>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="模块名称" prop="SysPermModule.moduleName">
|
||||
<el-input class="input-item" v-model="formData.SysPermModule.moduleName"
|
||||
:clearable="true" placeholder="权限模块名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="模块类型">
|
||||
<el-select class="input-item" v-model="formData.SysPermModule.moduleType"
|
||||
placeholder="模块类型" :clearable="true" :size="defaultFormItemSize" :disabled="isEdit">
|
||||
<el-option v-for="item in SysPermModuleType.getList()" :key="item.id" :value="item.id" :label="item.name" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="所属模块">
|
||||
<el-cascader class="input-item" :options="getPermGroupTree" v-model="formData.SysPermModule.parentId"
|
||||
placeholder="选择所属模块" :clearable="true" :size="defaultFormItemSize"
|
||||
:props="{value: 'moduleId', label: 'moduleName', checkStrictly: true}" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="显示顺序" prop="SysPermModule.showOrder">
|
||||
<el-input-number class="input-item" v-model="formData.SysPermModule.showOrder"
|
||||
:clearable="true" controls-position="right" placeholder="权限模块在当前层级下的顺序" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-row type="flex" justify="end">
|
||||
<el-button type="primary" :size="defaultFormItemSize" :plain="true" @click="onCancel(false)">
|
||||
取消
|
||||
</el-button>
|
||||
<el-button type="primary" :size="defaultFormItemSize" @click="onAddClick()"
|
||||
:disabled="!(checkPermCodeExist('formSysPerm:fragmentSysPerm:addPermModule') || checkPermCodeExist('formSysPerm:fragmentSysPerm:updatePermModule'))">
|
||||
保存
|
||||
</el-button>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { treeDataTranslate, findTreeNodePath } from '@/utils';
|
||||
/* eslint-disable-next-line */
|
||||
import { uploadMixin, statsDateRangeMixin, cachedPageChildMixin } from '@/core/mixins';
|
||||
/* eslint-disable-next-line */
|
||||
import { DictionaryController, SystemController } from '@/api';
|
||||
|
||||
export default {
|
||||
name: 'formEditSysPermModule',
|
||||
props: {
|
||||
parentId: {
|
||||
default: undefined
|
||||
},
|
||||
moduleType: {
|
||||
default: undefined
|
||||
},
|
||||
moduleId: {
|
||||
default: undefined
|
||||
},
|
||||
rowData: {
|
||||
type: Object,
|
||||
default: undefined
|
||||
},
|
||||
moduleList: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
mixins: [uploadMixin, statsDateRangeMixin, cachedPageChildMixin],
|
||||
data () {
|
||||
return {
|
||||
formData: {
|
||||
SysPermModule: {
|
||||
moduleId: undefined,
|
||||
parentId: undefined,
|
||||
moduleName: undefined,
|
||||
moduleType: undefined,
|
||||
level: undefined,
|
||||
showOrder: undefined
|
||||
}
|
||||
},
|
||||
rules: {
|
||||
'SysPermModule.moduleName': [
|
||||
{required: true, message: '请输入模块名称', trigger: 'blur'}
|
||||
],
|
||||
'SysPermModule.showOrder': [
|
||||
{required: true, message: '请输入显示顺序', trigger: 'blur'}
|
||||
]
|
||||
},
|
||||
formCreatePermModule: {
|
||||
formFilter: {
|
||||
},
|
||||
formFilterCopy: {
|
||||
},
|
||||
isInit: false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onCancel (isSuccess) {
|
||||
if (this.observer != null) {
|
||||
this.observer.cancel(isSuccess);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 更新新建权限模块
|
||||
*/
|
||||
refreshFormCreatePermModule (reloadData = false) {
|
||||
if (!this.formCreatePermModule.isInit) {
|
||||
this.formData.SysPermModule.parentId = findTreeNodePath(this.getPermGroupTree, this.formData.SysPermModule.parentId, 'moduleId')
|
||||
}
|
||||
this.formCreatePermModule.isInit = true;
|
||||
},
|
||||
/**
|
||||
* 新增
|
||||
*/
|
||||
onAddClick () {
|
||||
this.$refs.formCreatePermModule.validate((valid) => {
|
||||
if (!valid) return;
|
||||
let params = {
|
||||
sysPermModuleDto: {
|
||||
moduleId: this.moduleId,
|
||||
moduleName: this.formData.SysPermModule.moduleName,
|
||||
showOrder: this.formData.SysPermModule.showOrder,
|
||||
moduleType: this.formData.SysPermModule.moduleType,
|
||||
parentId: Array.isArray(this.formData.SysPermModule.parentId) ? this.formData.SysPermModule.parentId[this.formData.SysPermModule.parentId.length - 1] : undefined
|
||||
}
|
||||
};
|
||||
|
||||
if (this.isEdit) {
|
||||
SystemController.updatePermGroup(this, params).then(res => {
|
||||
this.$message.success('编辑成功');
|
||||
this.onCancel(true);
|
||||
}).catch(e => {});
|
||||
} else {
|
||||
SystemController.addPermGroup(this, params).then(res => {
|
||||
this.$message.success('新增成功');
|
||||
this.onCancel(true);
|
||||
}).catch(e => {});
|
||||
}
|
||||
});
|
||||
},
|
||||
initFormData () {
|
||||
if (this.rowData != null) {
|
||||
this.formData.SysPermModule = {...this.formData.SysPermModule, ...this.rowData};
|
||||
}
|
||||
if (this.parentId != null) this.formData.SysPermModule.parentId = this.parentId;
|
||||
if (this.moduleType != null) this.formData.SysPermModule.moduleType = this.moduleType;
|
||||
},
|
||||
formInit () {
|
||||
this.initFormData();
|
||||
this.refreshFormCreatePermModule();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isEdit () {
|
||||
return this.moduleId != null;
|
||||
},
|
||||
getPermGroupTree () {
|
||||
let tempList = this.moduleList.map((item) => {
|
||||
if (item.moduleType === this.SysPermModuleType.GROUP) {
|
||||
return {...item, children: undefined};
|
||||
}
|
||||
}).filter((item) => {
|
||||
return item != null;
|
||||
});
|
||||
return treeDataTranslate(tempList, 'moduleId');
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.formInit();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<el-form ref="form" :model="formData" :rules="rules" label-width="80px" :size="defaultFormItemSize" label-position="right" @submit.native.prevent>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="角色名称" prop="roleName">
|
||||
<el-input v-model="formData.roleName" placeholder="角色名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="false" label="角色类型" :required="true">
|
||||
<el-radio-group v-model="formData.adminRole">
|
||||
<el-radio :label="1">管理员</el-radio>
|
||||
<el-radio :label="0">其他</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-card shadow="never">
|
||||
<div slot="header" class="card-header">
|
||||
<span>菜单权限</span>
|
||||
<el-input :size="defaultFormItemSize" v-model="menuNameFilter" placeholder="输入菜单名称过滤" style="width: 250px;" clearable suffix-icon="el-icon-search" />
|
||||
</div>
|
||||
<el-scrollbar style="height: 230px;" wrap-class="scrollbar_dropdown__wrap">
|
||||
<el-tree ref="authTree" :data="authData" :props="treeProps" :check-strictly="false"
|
||||
show-checkbox node-key="menuId" :filter-node-method="filterMneuNode">
|
||||
</el-tree>
|
||||
</el-scrollbar>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 弹窗下发按钮栏，必须设置class为dialog-btn-layer -->
|
||||
<el-row type="flex" justify="end" class="dialog-btn-layer" style="margin-top: 20px;">
|
||||
<el-button :size="defaultFormItemSize" @click="onCancel(false)" >取消</el-button>
|
||||
<el-button type="primary" :size="defaultFormItemSize" @click="onSubmit"
|
||||
:disabled="!(checkPermCodeExist('formSysRole:fragmentSysRole:update') || checkPermCodeExist('formSysRole:fragmentSysRole:add'))">
|
||||
确定
|
||||
</el-button>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { treeDataTranslate, findItemFromList } from '@/utils'
|
||||
import { SystemController } from '@/api'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
rowData: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
menuNameFilter: undefined,
|
||||
formData: {
|
||||
roleId: undefined,
|
||||
roleName: undefined,
|
||||
adminRole: false,
|
||||
menuIdListString: undefined
|
||||
/*
|
||||
permsJsonData: {
|
||||
checked: [],
|
||||
halfChecked: [],
|
||||
},
|
||||
*/
|
||||
},
|
||||
rules: {
|
||||
roleName: [{required: true, message: '角色名称不能为空', trigger: 'blur'}]
|
||||
},
|
||||
treeProps: {
|
||||
label: 'menuName'
|
||||
},
|
||||
authData: [],
|
||||
allowParentList: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
filterMneuNode (value, data) {
|
||||
if (!value) return true;
|
||||
if (data.menuName.indexOf(value) !== -1) {
|
||||
this.allowParentList.push(data.menuId);
|
||||
return true;
|
||||
} else {
|
||||
return this.allowParentList.indexOf(data.parentId) !== -1;
|
||||
}
|
||||
},
|
||||
onCancel (isSuccess = false) {
|
||||
if (this.observer != null) {
|
||||
this.observer.cancel(isSuccess);
|
||||
}
|
||||
},
|
||||
onSubmit () {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
let selectMenu = [];
|
||||
selectMenu = this.$refs.authTree.getHalfCheckedKeys();
|
||||
selectMenu = selectMenu.concat(this.$refs.authTree.getCheckedKeys());
|
||||
|
||||
if (selectMenu.length <= 0) {
|
||||
this.$message.error({message: '请选择角色的菜单权限', showClose: true});
|
||||
return;
|
||||
}
|
||||
let params = {
|
||||
sysRoleDto: {...this.formData}
|
||||
}
|
||||
params.menuIdListString = selectMenu.join(',');
|
||||
if (this.isEdit) {
|
||||
SystemController.updateRole(this, params).then(res => {
|
||||
this.$message.success('编辑成功');
|
||||
this.onCancel(true);
|
||||
}).catch(e => {});
|
||||
} else {
|
||||
SystemController.addRole(this, params).then(res => {
|
||||
this.$message.success('添加成功');
|
||||
this.onCancel(true);
|
||||
}).catch(e => {});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
loadAuthData () {
|
||||
SystemController.getMenuPermList(this, {}).then(res => {
|
||||
this.authData = treeDataTranslate(res.data, 'menuId', 'parentId');
|
||||
if (Array.isArray(this.formData.menuIdList)) {
|
||||
let tempList = [];
|
||||
this.formData.menuIdList.forEach((item) => {
|
||||
let tempMenu = findItemFromList(res.data, item, 'menuId');
|
||||
// 判断是否为叶子节点
|
||||
if (tempMenu != null && (!Array.isArray(tempMenu.children) || tempMenu.children.length <= 0)) {
|
||||
tempList.push(item);
|
||||
}
|
||||
});
|
||||
this.$refs.authTree.setCheckedKeys(tempList);
|
||||
}
|
||||
}).catch(e => {});
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isEdit () {
|
||||
return this.formData.roleId != null;
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.rowData) {
|
||||
this.formData = {...this.formData, ...this.rowData};
|
||||
if (Array.isArray(this.formData.sysRoleMenuList)) {
|
||||
this.formData.menuIdList = this.formData.sysRoleMenuList.map(item => item.menuId);
|
||||
}
|
||||
}
|
||||
this.loadAuthData();
|
||||
},
|
||||
watch: {
|
||||
menuNameFilter (val) {
|
||||
this.allowParentList = [];
|
||||
this.$refs.authTree.filter(val);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,226 @@
|
||||
<template>
|
||||
<el-form ref="form" :model="formData" :rules="rules" label-width="110px" :size="defaultFormItemSize" label-position="right" @submit.native.prevent>
|
||||
<el-row :gutter="20" class="full-width-input">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="登录名称" prop="loginName">
|
||||
<el-input v-model="formData.loginName" placeholder="用户登录名称" clearable :disabled="isEdit" />
|
||||
</el-form-item>
|
||||
<el-form-item label="登录密码" v-if="!isEdit" prop="password">
|
||||
<el-input v-model="formData.password" type="password" placeholder="用户登录密码" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="再次输入密码" v-if="!isEdit" prop="passwordRepeat">
|
||||
<el-input v-model="formData.passwordRepeat" type="password" placeholder="再次输入用户密码" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="用户昵称" prop="showName">
|
||||
<el-input v-model="formData.showName" placeholder="用户昵称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="账号类型" prop="userType">
|
||||
<el-select v-model="formData.userType">
|
||||
<el-option v-for="item in SysUserType.getList()" :key="item.id"
|
||||
:label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户状态" prop="userStatus" v-if="isEdit">
|
||||
<el-radio-group v-model="formData.userStatus">
|
||||
<el-radio v-for="item in SysUserStatus.getList()" :key="item.id" :label="item.id">
|
||||
{{item.name}}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属部门" prop="deptId">
|
||||
<el-cascader class="input-item" v-model="deptId.value" :clearable="true"
|
||||
placeholder="所属部门" :loading="deptId.impl.loading" :props="{value: 'deptId', label: 'deptName', checkStrictly: true}"
|
||||
@visible-change="onDeptIdVisibleChange" :options="deptId.impl.dropdownList"
|
||||
@change="onDeptIdValueChange">
|
||||
</el-cascader>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户角色" prop="roleIdList">
|
||||
<el-select v-model="formData.roleIdList" multiple placeholder="用户角色">
|
||||
<el-option v-for="role in roleList" :key="role.roleId"
|
||||
:label="role.roleName" :value="role.roleId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据权限" prop="dataPermIdList">
|
||||
<el-select v-model="formData.dataPermIdList" multiple placeholder="数据权限">
|
||||
<el-option v-for="dataPerm in dataPermList" :key="dataPerm.dataPermId"
|
||||
:label="dataPerm.dataPermName" :value="dataPerm.dataPermId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 弹窗下发按钮栏，必须设置class为dialog-btn-layer -->
|
||||
<el-row type="flex" justify="end" class="dialog-btn-layer">
|
||||
<el-button :size="defaultFormItemSize" type="primary" :plain="true" @click="onCancel(false)" >取消</el-button>
|
||||
<el-button type="primary" :size="defaultFormItemSize" @click="onSubmit"
|
||||
:disabled="!(checkPermCodeExist('formSysUser:fragmentSysUser:update') || checkPermCodeExist('formSysUser:fragmentSysUser:add'))">
|
||||
确定
|
||||
</el-button>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/* eslint-disable-next-line */
|
||||
import { findTreeNodePath } from '@/utils';
|
||||
/* eslint-disable-next-line */
|
||||
import { DropdownWidget, TableWidget, UploadWidget, ChartWidget } from '@/utils/widget.js';
|
||||
import { SystemController, SysDeptController, SysDataPermController } from '@/api';
|
||||
import { uploadMixin } from '@/core/mixins';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
rowData: Object
|
||||
},
|
||||
mixins: [uploadMixin],
|
||||
data () {
|
||||
return {
|
||||
formData: {
|
||||
userId: undefined,
|
||||
loginName: undefined,
|
||||
password: undefined,
|
||||
showName: undefined,
|
||||
userType: 2,
|
||||
userStatus: 0,
|
||||
dataPermIdList: [],
|
||||
roleIdList: []
|
||||
},
|
||||
params: {
|
||||
userId: undefined,
|
||||
loginName: undefined,
|
||||
password: undefined,
|
||||
showName: undefined,
|
||||
deptId: '',
|
||||
userType: 2,
|
||||
userStatus: 0,
|
||||
dataPermIdListString: undefined,
|
||||
roleIdListString: undefined
|
||||
},
|
||||
deptId: {
|
||||
impl: new DropdownWidget(this.loadDeptmentDropdownList, true, 'deptId'),
|
||||
value: []
|
||||
},
|
||||
rules: {
|
||||
loginName: [{required: true, message: '用户名称不能为空', trigger: 'blur'}],
|
||||
password: [{required: true, message: '用户密码不能为空', trigger: 'blur'}],
|
||||
passwordRepeat: [{required: true, message: '重输密码不能为空', trigger: 'blur'}],
|
||||
showName: [{required: true, message: '用户昵称不能为空', trigger: 'blur'}],
|
||||
dataPermIdList: [{required: true, message: '数据权限不能为空', trigger: 'change'}],
|
||||
roleIdList: [{required: true, message: '用户角色不能为空', trigger: 'change'}]
|
||||
},
|
||||
showHeaderSelect: false,
|
||||
dataPermList: [],
|
||||
roleList: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 所属部门下拉数据获取函数
|
||||
*/
|
||||
loadDeptmentDropdownList () {
|
||||
return new Promise((resolve, reject) => {
|
||||
let params = {};
|
||||
SysDeptController.list(this, params).then(res => {
|
||||
resolve(res.data.dataList);
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 所属部门下拉框显隐
|
||||
*/
|
||||
onDeptIdVisibleChange (show) {
|
||||
this.deptId.impl.onVisibleChange(show).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 所属部门选中值改变
|
||||
*/
|
||||
onDeptIdValueChange (value) {
|
||||
this.formData.deptId = Array.isArray(value) ? value[value.length - 1] : undefined;
|
||||
},
|
||||
onCancel (isSuccess = false) {
|
||||
if (this.observer != null) {
|
||||
this.observer.cancel(isSuccess);
|
||||
}
|
||||
},
|
||||
onSubmit () {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.formData.userId == null && (this.formData.password !== this.formData.passwordRepeat)) {
|
||||
this.$message.error({message: '两次密码输入不一致，请重新输入', showClose: true});
|
||||
return;
|
||||
}
|
||||
|
||||
let params = {
|
||||
sysUserDto: {
|
||||
userId: this.formData.userId,
|
||||
loginName: this.formData.loginName,
|
||||
password: this.formData.password,
|
||||
showName: this.formData.showName,
|
||||
userType: this.formData.userType,
|
||||
deptId: this.formData.deptId,
|
||||
userStatus: this.formData.userStatus
|
||||
},
|
||||
dataPermIdListString: Array.isArray(this.formData.dataPermIdList) ? this.formData.dataPermIdList.join(',') : undefined,
|
||||
roleIdListString: Array.isArray(this.formData.roleIdList) ? this.formData.roleIdList.join(',') : undefined
|
||||
}
|
||||
|
||||
let operation = null;
|
||||
if (this.formData.userId != null) {
|
||||
operation = SystemController.updateUser(this, params);
|
||||
} else {
|
||||
operation = SystemController.addUser(this, params);
|
||||
}
|
||||
|
||||
operation.then(res => {
|
||||
this.$message.success(this.formData.userId != null ? '编辑成功' : '添加成功');
|
||||
this.onCancel(true);
|
||||
}).catch(e => {
|
||||
//
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
loadRole () {
|
||||
SystemController.getRoleList(this, {}).then(res => {
|
||||
this.roleList = res.data.dataList;
|
||||
}).catch(e => {});
|
||||
},
|
||||
loadDataPerm () {
|
||||
SysDataPermController.list(this, {}).then(res => {
|
||||
this.dataPermList = res.data.dataList;
|
||||
}).catch(e => {});
|
||||
},
|
||||
loadRowData (id) {
|
||||
var params = {
|
||||
userId: id
|
||||
}
|
||||
return SystemController.getUser(this, params);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isEdit () {
|
||||
return (this.formData.userId != null);
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.rowData != null) {
|
||||
this.formData = {...this.rowData, dataPermIdList: [], roleIdList: []};
|
||||
if (Array.isArray(this.formData.sysDataPermUserList)) {
|
||||
this.formData.dataPermIdList = this.formData.sysDataPermUserList.map(item => item.dataPermId);
|
||||
}
|
||||
if (Array.isArray(this.formData.sysUserRoleList)) {
|
||||
this.formData.roleIdList = this.formData.sysUserRoleList.map(item => item.roleId);
|
||||
}
|
||||
}
|
||||
this.deptId.impl.onVisibleChange(true).then(res => {
|
||||
this.deptId.value = findTreeNodePath(this.deptId.impl.dropdownList, this.formData.deptId, 'deptId');
|
||||
});
|
||||
this.loadRole();
|
||||
this.loadDataPerm();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form label-width="75px" :size="defaultFormItemSize" label-position="right" @submit.native.prevent>
|
||||
<filter-box :item-width="350">
|
||||
<el-form-item label="关联URL">
|
||||
<el-input class="filter-item" v-model="formMenuPerm.formFilter.url"
|
||||
:clearable="true" placeholder="权限字名称" />
|
||||
</el-form-item>
|
||||
<el-button slot="operator" type="primary" :size="defaultFormItemSize" :plain="true" @click="refreshFormMenuPerm(true)">
|
||||
查询
|
||||
</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="getPermList" :size="defaultFormItemSize" height="459px"
|
||||
@sort-change="formMenuPerm.SysPerm.impl.onSortChange"
|
||||
header-cell-class-name="table-header-gray">
|
||||
<el-table-column label="序号" header-align="center" align="center" type="index" width="50px" :index="formMenuPerm.SysPerm.impl.getTableIndex" />
|
||||
<el-table-column label="权限字名称" prop="showName" width="150px">
|
||||
</el-table-column>
|
||||
<el-table-column label="权限字类型" width="100px">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :size="defaultFormItemSize" :type="getPermCodeType(scope.row.permCodeType)">
|
||||
{{SysPermCodeType.getValue(scope.row.permCodeType)}}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="权限字标识" prop="permCode" width="300px" />
|
||||
<el-table-column label="权限名称" prop="permName" width="150px" />
|
||||
<el-table-column label="关联URL" prop="url" min-width="300px">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/* eslint-disable-next-line */
|
||||
import { DropdownWidget, TableWidget, UploadWidget, ChartWidget } from '@/utils/widget.js';
|
||||
/* eslint-disable-next-line */
|
||||
import { uploadMixin, statsDateRangeMixin, cachePageMixin, cachedPageChildMixin } from '@/core/mixins';
|
||||
/* eslint-disable-next-line */
|
||||
import { SystemController, DictionaryController } from '@/api';
|
||||
|
||||
export default {
|
||||
name: 'formMenuPerm',
|
||||
props: {
|
||||
menuId: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
mixins: [uploadMixin, statsDateRangeMixin, cachePageMixin],
|
||||
data () {
|
||||
return {
|
||||
formMenuPerm: {
|
||||
formFilter: {
|
||||
menuId: this.menuId,
|
||||
url: undefined
|
||||
},
|
||||
formFilterCopy: {
|
||||
menuId: this.menuId,
|
||||
url: undefined
|
||||
},
|
||||
SysPerm: {
|
||||
impl: new TableWidget(this.loadSysPermData, this.loadSysPermVerify, false)
|
||||
},
|
||||
isInit: false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getPermCodeType (permCodeType) {
|
||||
switch (permCodeType) {
|
||||
case this.SysPermCodeType.FORM: return 'primary';
|
||||
case this.SysPermCodeType.FRAGMENT: return 'warning';
|
||||
case this.SysPermCodeType.OPERATION: return 'success';
|
||||
default: return 'info';
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 权限数据获取函数，返回Primise
|
||||
*/
|
||||
loadSysPermData (params) {
|
||||
params = {
|
||||
...params,
|
||||
menuId: this.formMenuPerm.formFilterCopy.menuId
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.listMenuPerm(this, params).then(res => {
|
||||
resolve({
|
||||
dataList: res.data
|
||||
});
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 权限数据获取检测函数，返回true正常获取数据，返回false停止获取数据
|
||||
*/
|
||||
loadSysPermVerify () {
|
||||
this.formMenuPerm.formFilterCopy.url = this.formMenuPerm.formFilter.url;
|
||||
this.formMenuPerm.formFilterCopy.menuId = this.formMenuPerm.formFilter.menuId;
|
||||
if (this.formMenuPerm.formFilterCopy.menuId == null || this.formMenuPerm.formFilterCopy.menuId === '') {
|
||||
this.$message.error('所属菜单不能为空！');
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
/**
|
||||
* 更新权限管理
|
||||
*/
|
||||
refreshFormMenuPerm (reloadData = false) {
|
||||
// 重新获取数据组件的数据
|
||||
if (reloadData) {
|
||||
this.formMenuPerm.SysPerm.impl.refreshTable(true, 1);
|
||||
} else {
|
||||
this.formMenuPerm.SysPerm.impl.refreshTable();
|
||||
}
|
||||
this.formMenuPerm.isInit = true;
|
||||
},
|
||||
onResume () {
|
||||
this.refreshFormMenuPerm();
|
||||
},
|
||||
initFormData () {
|
||||
},
|
||||
formInit () {
|
||||
this.initFormData();
|
||||
this.refreshFormMenuPerm();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getPermList () {
|
||||
return this.formMenuPerm.SysPerm.impl.dataList.filter((item) => {
|
||||
return (this.formMenuPerm.formFilterCopy.url == null || this.formMenuPerm.formFilterCopy.url === '') ||
|
||||
(item.url.indexOf(this.formMenuPerm.formFilterCopy.url) !== -1);
|
||||
});
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.formInit();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="formSetRoleUsers" :model="formSysUser" label-width="75px" :size="defaultFormItemSize" label-position="right" @submit.native.prevent>
|
||||
<filter-box :item-width="325">
|
||||
<el-form-item label="用户状态" prop="formFilter.sysUserStatus">
|
||||
<el-select class="filter-item" v-model="formSysUser.formFilter.sysUserStatus" :clearable="true"
|
||||
placeholder="用户状态" :loading="formSysUser.sysUserStatus.impl.loading"
|
||||
@visible-change="onSysUserStatusVisibleChange">
|
||||
<el-option v-for="item in formSysUser.sysUserStatus.impl.dropdownList" :key="item.id" :value="item.id" :label="item.name" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名" prop="formFilter.sysUserLoginName">
|
||||
<el-input class="filter-item" v-model="formSysUser.formFilter.sysUserLoginName"
|
||||
:clearable="true" placeholder="用户名" />
|
||||
</el-form-item>
|
||||
<el-button slot="operator" type="default" :plain="true" :size="defaultFormItemSize" @click="onReset">重置</el-button>
|
||||
<el-button slot="operator" type="primary" :plain="true" :size="defaultFormItemSize" @click="refreshFormSysUser(true)">查询</el-button>
|
||||
<el-button slot="operator" :size="defaultFormItemSize" type="primary" :plain="false" @click="onSetUser"
|
||||
:disabled="selectUsers == null || selectUsers.length <= 0">授权人员</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="formSysUser.SysUser.impl.dataList" :size="defaultFormItemSize" row-key="userId" ref="userTable"
|
||||
header-cell-class-name="table-header-gray" height="395px" @selection-change="onTableSelectionChange">
|
||||
<el-table-column label="序号" header-align="center" align="center" type="index" width="50px" :index="formSysUser.SysUser.impl.getTableIndex" />
|
||||
<el-table-column header-align="center" align="center" type="selection" width="50px" :reserve-selection="true" />
|
||||
<el-table-column label="用户名" prop="loginName">
|
||||
</el-table-column>
|
||||
<el-table-column label="昵称" prop="showName">
|
||||
</el-table-column>
|
||||
<el-table-column label="账号类型">
|
||||
<template slot-scope="scope">
|
||||
<span>{{SysUserType.getValue(scope.row.userType)}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="getUserStatusType(scope.row.userStatus)" :size="defaultFormItemSize">{{SysUserStatus.getValue(scope.row.userStatus)}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-col :span="24">
|
||||
<el-row type="flex" justify="end" style="margin-top: 10px;">
|
||||
<el-pagination
|
||||
:total="formSysUser.SysUser.impl.totalCount"
|
||||
:current-page="formSysUser.SysUser.impl.currentPage"
|
||||
:page-size="formSysUser.SysUser.impl.pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, prev, pager, next, sizes"
|
||||
@current-change="formSysUser.SysUser.impl.onCurrentPageChange"
|
||||
@size-change="formSysUser.SysUser.impl.onPageSizeChange">
|
||||
</el-pagination>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
/* eslint-disable-next-line */
|
||||
import { DropdownWidget, TableWidget, UploadWidget, ChartWidget } from '@/utils/widget.js';
|
||||
/* eslint-disable-next-line */
|
||||
import { uploadMixin, statsDateRangeMixin, cachePageMixin, cachedPageChildMixin } from '@/core/mixins';
|
||||
/* eslint-disable-next-line */
|
||||
import { SystemController, DictionaryController } from '@/api';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
roleId: {
|
||||
type: [String, Number],
|
||||
required: true
|
||||
}
|
||||
},
|
||||
mixins: [uploadMixin, statsDateRangeMixin, cachePageMixin],
|
||||
data () {
|
||||
return {
|
||||
formSysUser: {
|
||||
formFilter: {
|
||||
sysUserStatus: undefined,
|
||||
sysUserLoginName: undefined
|
||||
},
|
||||
formFilterCopy: {
|
||||
sysUserStatus: undefined,
|
||||
sysUserLoginName: undefined
|
||||
},
|
||||
sysUserStatus: {
|
||||
impl: new DropdownWidget(this.loadSysUserStatusDropdownList)
|
||||
},
|
||||
SysUser: {
|
||||
impl: new TableWidget(this.loadSysUserData, this.loadSysUserVerify, true, false)
|
||||
},
|
||||
isInit: false
|
||||
},
|
||||
selectUsers: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 用户状态下拉数据获取函数
|
||||
*/
|
||||
loadSysUserStatusDropdownList () {
|
||||
return new Promise((resolve, reject) => {
|
||||
let params = {};
|
||||
DictionaryController.dictSysUserStatus(this, params).then(res => {
|
||||
resolve(res.getList());
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 用户状态下拉框显隐
|
||||
*/
|
||||
onSysUserStatusVisibleChange (show) {
|
||||
this.formSysUser.sysUserStatus.impl.onVisibleChange(show).catch(e => {});
|
||||
},
|
||||
getUserStatusType (status) {
|
||||
if (status === this.SysUserStatus.NORMAL) {
|
||||
return 'success';
|
||||
} else if (status === this.SysUserStatus.LOCKED) {
|
||||
return 'danger';
|
||||
} else {
|
||||
return 'info';
|
||||
}
|
||||
},
|
||||
onTableSelectionChange (values) {
|
||||
this.selectUsers = values;
|
||||
},
|
||||
onSetUser () {
|
||||
let params = {
|
||||
roleId: this.roleId,
|
||||
userIdListString: this.selectUsers.map((item) => {
|
||||
return item.userId
|
||||
}).join(',')
|
||||
}
|
||||
|
||||
SystemController.addRoleUser(this, params).then(res => {
|
||||
this.$message.success('授权成功');
|
||||
this.refreshFormSysUser(true);
|
||||
this.$refs.userTable.clearSelection();
|
||||
this.selectUsers = [];
|
||||
}).catch(e => {});
|
||||
},
|
||||
onCancel () {
|
||||
this.$router.go(-1);
|
||||
},
|
||||
onReset () {
|
||||
this.$refs.formSetRoleUsers.resetFields();
|
||||
this.refreshFormSysUser(true);
|
||||
},
|
||||
loadSysUserData (params) {
|
||||
params.roleId = this.roleId;
|
||||
params.sysUserDtoFilter = {
|
||||
loginName: this.formSysUser.formFilterCopy.sysUserLoginName,
|
||||
userStatus: this.formSysUser.formFilterCopy.sysUserStatus
|
||||
}
|
||||
this.$refs.userTable.clearSelection();
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.listNotInUserRole(this, params).then(res => {
|
||||
resolve({
|
||||
dataList: res.data.dataList,
|
||||
totalCount: res.data.totalCount
|
||||
});
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 获取检测函数，返回true正常获取数据，返回false停止获取数据
|
||||
*/
|
||||
loadSysUserVerify () {
|
||||
this.formSysUser.formFilterCopy.sysUserLoginName = this.formSysUser.formFilter.sysUserLoginName;
|
||||
this.formSysUser.formFilterCopy.sysUserStatus = this.formSysUser.formFilter.sysUserStatus;
|
||||
return true;
|
||||
},
|
||||
refreshFormSysUser (reloadData = false) {
|
||||
// 重新获取数据组件的数据
|
||||
if (reloadData) {
|
||||
this.formSysUser.SysUser.impl.refreshTable(true, 1);
|
||||
} else {
|
||||
this.formSysUser.SysUser.impl.refreshTable();
|
||||
}
|
||||
this.formSysUser.sysUserStatus.impl.onVisibleChange(true).catch(e => {});
|
||||
this.formSysUser.isInit = true;
|
||||
},
|
||||
initData () {
|
||||
this.refreshFormSysUser();
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initData();
|
||||
},
|
||||
computed: {
|
||||
getContextHeightStyle () {
|
||||
return [
|
||||
{'height': (this.getClientHeight - 142) + 'px'}
|
||||
]
|
||||
},
|
||||
...mapGetters(['getClientHeight'])
|
||||
},
|
||||
watch: {
|
||||
currentPage: function (value, oldValue) {
|
||||
this.loadDatasource(false).catch(e => {
|
||||
this.currentPage = oldValue;
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="formSysUser" :model="formSysUser" label-width="75px" :size="defaultFormItemSize" label-position="right" @submit.native.prevent>
|
||||
<filter-box :item-width="325">
|
||||
<el-form-item label="用户状态" prop="formFilter.sysUserStatus">
|
||||
<el-select class="filter-item" v-model="formSysUser.formFilter.sysUserStatus" :clearable="true"
|
||||
placeholder="用户状态" :loading="formSysUser.sysUserStatus.impl.loading"
|
||||
@visible-change="onSysUserStatusVisibleChange">
|
||||
<el-option v-for="item in formSysUser.sysUserStatus.impl.dropdownList" :key="item.id" :value="item.id" :label="item.name" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名" prop="formFilter.sysUserLoginName">
|
||||
<el-input class="filter-item" v-model="formSysUser.formFilter.sysUserLoginName"
|
||||
:clearable="true" placeholder="用户名" />
|
||||
</el-form-item>
|
||||
<el-button slot="operator" type="default" :plain="true" :size="defaultFormItemSize" @click="onReset">重置</el-button>
|
||||
<el-button slot="operator" type="primary" :plain="true" :size="defaultFormItemSize" @click="refreshFormSysUser(true)">查询</el-button>
|
||||
<el-button slot="operator" :size="defaultFormItemSize" type="primary" :plain="false" @click="onSetUser"
|
||||
:disabled="selectUsers == null || selectUsers.length <= 0">授权人员</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="formSysUser.SysUser.impl.dataList" :size="defaultFormItemSize" row-key="userId" ref="userTable"
|
||||
header-cell-class-name="table-header-gray" height="395px" @selection-change="onTableSelectionChange">
|
||||
<el-table-column label="序号" header-align="center" align="center" type="index" width="50px" :index="formSysUser.SysUser.impl.getTableIndex" />
|
||||
<el-table-column header-align="center" align="center" type="selection" width="50px" :reserve-selection="true" />
|
||||
<el-table-column label="用户名" prop="loginName">
|
||||
</el-table-column>
|
||||
<el-table-column label="昵称" prop="showName">
|
||||
</el-table-column>
|
||||
<el-table-column label="账号类型">
|
||||
<template slot-scope="scope">
|
||||
<span>{{SysUserType.getValue(scope.row.userType)}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="getUserStatusType(scope.row.userStatus)" :size="defaultFormItemSize">{{SysUserStatus.getValue(scope.row.userStatus)}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-col :span="24">
|
||||
<el-row type="flex" justify="end" style="margin-top: 10px;">
|
||||
<el-pagination
|
||||
:total="formSysUser.SysUser.impl.totalCount"
|
||||
:current-page="formSysUser.SysUser.impl.currentPage"
|
||||
:page-size="formSysUser.SysUser.impl.pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, prev, pager, next, sizes"
|
||||
@current-change="formSysUser.SysUser.impl.onCurrentPageChange"
|
||||
@size-change="formSysUser.SysUser.impl.onPageSizeChange">
|
||||
</el-pagination>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
/* eslint-disable-next-line */
|
||||
import { DropdownWidget, TableWidget, UploadWidget, ChartWidget } from '@/utils/widget.js';
|
||||
/* eslint-disable-next-line */
|
||||
import { uploadMixin, statsDateRangeMixin, cachePageMixin, cachedPageChildMixin } from '@/core/mixins';
|
||||
/* eslint-disable-next-line */
|
||||
import { SysDataPermController, DictionaryController } from '@/api';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
dataPermId: {
|
||||
type: [String, Number],
|
||||
required: true
|
||||
}
|
||||
},
|
||||
mixins: [uploadMixin, statsDateRangeMixin, cachePageMixin],
|
||||
data () {
|
||||
return {
|
||||
formSysUser: {
|
||||
formFilter: {
|
||||
sysUserStatus: undefined,
|
||||
sysUserLoginName: undefined
|
||||
},
|
||||
formFilterCopy: {
|
||||
sysUserStatus: undefined,
|
||||
sysUserLoginName: undefined
|
||||
},
|
||||
sysUserStatus: {
|
||||
impl: new DropdownWidget(this.loadSysUserStatusDropdownList)
|
||||
},
|
||||
SysUser: {
|
||||
impl: new TableWidget(this.loadSysUserData, this.loadSysUserVerify, true, false)
|
||||
},
|
||||
isInit: false
|
||||
},
|
||||
selectUsers: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onReset () {
|
||||
this.$refs.formSysUser.resetFields();
|
||||
this.refreshFormSysUser(true);
|
||||
},
|
||||
/**
|
||||
* 用户状态下拉数据获取函数
|
||||
*/
|
||||
loadSysUserStatusDropdownList () {
|
||||
return new Promise((resolve, reject) => {
|
||||
let params = {};
|
||||
DictionaryController.dictSysUserStatus(this, params).then(res => {
|
||||
resolve(res.getList());
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 用户状态下拉框显隐
|
||||
*/
|
||||
onSysUserStatusVisibleChange (show) {
|
||||
this.formSysUser.sysUserStatus.impl.onVisibleChange(show).catch(e => {});
|
||||
},
|
||||
getUserStatusType (status) {
|
||||
if (status === this.SysUserStatus.NORMAL) {
|
||||
return 'success';
|
||||
} else if (status === this.SysUserStatus.LOCKED) {
|
||||
return 'danger';
|
||||
} else {
|
||||
return 'info';
|
||||
}
|
||||
},
|
||||
onTableSelectionChange (values) {
|
||||
this.selectUsers = values;
|
||||
},
|
||||
onSetUser () {
|
||||
let params = {
|
||||
dataPermId: this.dataPermId,
|
||||
userIdListString: this.selectUsers.map((item) => {
|
||||
return item.userId
|
||||
}).join(',')
|
||||
}
|
||||
|
||||
SysDataPermController.addDataPermUser(this, params).then(res => {
|
||||
this.$message.success('授权成功');
|
||||
this.refreshFormSysUser(true);
|
||||
this.$refs.userTable.clearSelection();
|
||||
this.selectUsers = [];
|
||||
}).catch(e => {});
|
||||
},
|
||||
onCancel () {
|
||||
this.$router.go(-1);
|
||||
},
|
||||
loadSysUserData (params) {
|
||||
params.dataPermId = this.dataPermId;
|
||||
params.sysUserDtoFilter = {
|
||||
loginName: this.formSysUser.formFilterCopy.sysUserLoginName,
|
||||
userStatus: this.formSysUser.formFilterCopy.sysUserStatus
|
||||
}
|
||||
this.$refs.userTable.clearSelection();
|
||||
return new Promise((resolve, reject) => {
|
||||
SysDataPermController.listNotInDataPermUser(this, params).then(res => {
|
||||
resolve({
|
||||
dataList: res.data.dataList,
|
||||
totalCount: res.data.totalCount
|
||||
});
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 获取检测函数，返回true正常获取数据，返回false停止获取数据
|
||||
*/
|
||||
loadSysUserVerify () {
|
||||
this.formSysUser.formFilterCopy.sysUserLoginName = this.formSysUser.formFilter.sysUserLoginName;
|
||||
this.formSysUser.formFilterCopy.sysUserStatus = this.formSysUser.formFilter.sysUserStatus;
|
||||
return true;
|
||||
},
|
||||
refreshFormSysUser (reloadData = false) {
|
||||
// 重新获取数据组件的数据
|
||||
if (reloadData) {
|
||||
this.formSysUser.SysUser.impl.refreshTable(true, 1);
|
||||
} else {
|
||||
this.formSysUser.SysUser.impl.refreshTable();
|
||||
}
|
||||
this.formSysUser.sysUserStatus.impl.onVisibleChange(true).catch(e => {});
|
||||
this.formSysUser.isInit = true;
|
||||
},
|
||||
initData () {
|
||||
this.refreshFormSysUser();
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initData();
|
||||
},
|
||||
computed: {
|
||||
getContextHeightStyle () {
|
||||
return [
|
||||
{'height': (this.getClientHeight - 142) + 'px'}
|
||||
]
|
||||
},
|
||||
...mapGetters(['getClientHeight'])
|
||||
},
|
||||
watch: {
|
||||
currentPage: function (value, oldValue) {
|
||||
this.loadDatasource(false).catch(e => {
|
||||
this.currentPage = oldValue;
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,489 @@
|
||||
<template>
|
||||
<div class="tab-dialog-box" style="position: relative;">
|
||||
<el-tabs v-model="activeFragmentId" :before-leave="onFragmentChange">
|
||||
<el-tab-pane label="数据权限管理" name="fragmentSysDataPerm" style="width: 100%;"
|
||||
v-if="checkPermCodeExist('formSysDataPerm:fragmentSysDataPerm')">
|
||||
<el-form ref="fragmentSysDataPerm" :model="fragmentSysDataPerm" label-width="100px" :size="defaultFormItemSize" label-position="right" @submit.native.prevent>
|
||||
<filter-box :item-width="350">
|
||||
<el-form-item label="过滤规则" prop="formFilter.sysDatapermType">
|
||||
<el-select class="filter-item" v-model="fragmentSysDataPerm.formFilter.sysDatapermType" :clearable="true"
|
||||
placeholder="过滤规则" :loading="fragmentSysDataPerm.sysDatapermType.impl.loading"
|
||||
@visible-change="onSysDatapermTypeVisibleChange"
|
||||
@change="onSysDatapermTypeValueChange">
|
||||
<el-option v-for="item in fragmentSysDataPerm.sysDatapermType.impl.dropdownList" :key="item.id" :value="item.id" :label="item.name" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据权限名称" prop="formFilter.sysDataPermName">
|
||||
<el-input class="filter-item" v-model="fragmentSysDataPerm.formFilter.sysDataPermName"
|
||||
:clearable="true" placeholder="数据权限名称" />
|
||||
</el-form-item>
|
||||
<el-button slot="operator" type="default" :plain="true" :size="defaultFormItemSize" @click="onResetDataPerm">重置</el-button>
|
||||
<el-button slot="operator" type="primary" :plain="true" :size="defaultFormItemSize" @click="refreshFragmentSysDataPerm(true)">查询</el-button>
|
||||
<el-button slot="operator" type="primary" :size="defaultFormItemSize" :disabled="!checkPermCodeExist('formSysDataPerm:fragmentSysDataPerm:add')"
|
||||
@click="onAddDataPermClick()">
|
||||
新建
|
||||
</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="fragmentSysDataPerm.SysDataPerm.impl.dataList" :size="defaultFormItemSize" :height="getTableHeight + 'px'"
|
||||
@sort-change="fragmentSysDataPerm.SysDataPerm.impl.onSortChange"
|
||||
header-cell-class-name="table-header-gray">
|
||||
<el-table-column label="序号" header-align="center" align="center" type="index" width="55px"
|
||||
:index="fragmentSysDataPerm.SysDataPerm.impl.getTableIndex" />
|
||||
<el-table-column label="权限名称" prop="dataPermName">
|
||||
</el-table-column>
|
||||
<el-table-column label="过滤规则">
|
||||
<template slot-scope="scope">
|
||||
<span>{{SysDataPermType.getValue(scope.row.ruleType)}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建人" prop="createUsername">
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="onEditDataPermClick(scope.row)" type="text" :size="defaultFormItemSize"
|
||||
:disabled="!checkPermCodeExist('formSysDataPerm:fragmentSysDataPerm:update')">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button @click="onDeleteClick(scope.row)" type="text" :size="defaultFormItemSize"
|
||||
:disabled="!checkPermCodeExist('formSysDataPerm:fragmentSysDataPerm:delete')">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-col :span="24">
|
||||
<el-row type="flex" justify="end" style="margin-top: 10px;">
|
||||
<el-pagination
|
||||
:total="fragmentSysDataPerm.SysDataPerm.impl.totalCount"
|
||||
:current-page="fragmentSysDataPerm.SysDataPerm.impl.currentPage"
|
||||
:page-size="fragmentSysDataPerm.SysDataPerm.impl.pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, prev, pager, next, sizes"
|
||||
@current-change="fragmentSysDataPerm.SysDataPerm.impl.onCurrentPageChange"
|
||||
@size-change="fragmentSysDataPerm.SysDataPerm.impl.onPageSizeChange">
|
||||
</el-pagination>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="用户授权" name="fragmentSysDataPermUser" style="width: 100%;"
|
||||
v-if="checkPermCodeExist('formSysDataPerm:fragmentSysDataPermUser')">
|
||||
<el-form ref="fragmentSysDataPermUser" :model="fragmentSysDataPermUser" label-width="75px" :size="defaultFormItemSize" label-position="right" @submit.native.prevent>
|
||||
<filter-box :item-width="350">
|
||||
<el-form-item label="数据权限" prop="formFilter.dataPermId">
|
||||
<el-select class="filter-item" v-model="fragmentSysDataPermUser.formFilter.dataPermId" clearable
|
||||
placeholder="数据权限" :loading="fragmentSysDataPermUser.dataPermId.impl.loading"
|
||||
@visible-change="fragmentSysDataPermUser.dataPermId.impl.onVisibleChange"
|
||||
@change="onDataPermChange">
|
||||
<el-option v-for="item in fragmentSysDataPermUser.dataPermId.impl.dropdownList" :key="item.dataPermId"
|
||||
:value="item.dataPermId" :label="item.dataPermName" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名" prop="formFilter.searchString">
|
||||
<el-input class="filter-item" v-model="fragmentSysDataPermUser.formFilter.searchString"
|
||||
:clearable="true" placeholder="输入用户名 / 昵称查询" @change="refreshFragmentSysDataPermUser(true)" />
|
||||
</el-form-item>
|
||||
<el-button slot="operator" type="default" :plain="true" :size="defaultFormItemSize" @click="onResetDataPermUser">重置</el-button>
|
||||
<el-button slot="operator" type="primary" :plain="true" :size="defaultFormItemSize" @click="refreshFragmentSysDataPermUser(true)">
|
||||
查询
|
||||
</el-button>
|
||||
<el-button slot="operator" type="primary" :size="defaultFormItemSize" @click="onAddDataPermUserClick()"
|
||||
:disabled="!checkPermCodeExist('formSysDataPerm:fragmentSysDataPermUser:addDataPermUser') ||
|
||||
fragmentSysDataPermUser.formFilter.dataPermId == null || fragmentSysDataPermUser.formFilter.dataPermId === ''">
|
||||
添加用户
|
||||
</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="fragmentSysDataPermUser.SysDataPermUserList.impl.dataList" :size="defaultFormItemSize" :height="getTableHeight + 'px'"
|
||||
@sort-change="fragmentSysDataPermUser.SysDataPermUserList.impl.onSortChange"
|
||||
header-cell-class-name="table-header-gray">
|
||||
<el-table-column label="序号" header-align="center" align="center" type="index" width="55px"
|
||||
:index="fragmentSysDataPermUser.SysDataPermUserList.impl.getTableIndex" />
|
||||
<el-table-column label="用户名" prop="loginName">
|
||||
</el-table-column>
|
||||
<el-table-column label="昵称" prop="showName">
|
||||
</el-table-column>
|
||||
<el-table-column label="账号类型">
|
||||
<template slot-scope="scope">
|
||||
<span>{{SysUserType.getValue(scope.row.userType)}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="getUserStatusType(scope.row.userStatus)" :size="defaultFormItemSize">{{SysUserStatus.getValue(scope.row.userStatus)}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" fixed="right" width="80px">
|
||||
<template slot-scope="scope">
|
||||
<el-button class="btn-table-delete" type="text" :size="defaultFormItemSize"
|
||||
:disabled="!checkPermCodeExist('formSysDataPerm:fragmentSysDataPermUser:deleteDataPermUser')"
|
||||
@click="onDeleteRow(scope.row)">移除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-col :span="24">
|
||||
<el-row type="flex" justify="end" style="margin-top: 10px;">
|
||||
<el-pagination
|
||||
:total="fragmentSysDataPermUser.SysDataPermUserList.impl.totalCount"
|
||||
:current-page="fragmentSysDataPermUser.SysDataPermUserList.impl.currentPage"
|
||||
:page-size="fragmentSysDataPermUser.SysDataPermUserList.impl.pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, prev, pager, next, sizes"
|
||||
@current-change="fragmentSysDataPermUser.SysDataPermUserList.impl.onCurrentPageChange"
|
||||
@size-change="fragmentSysDataPermUser.SysDataPermUserList.impl.onPageSizeChange">
|
||||
</el-pagination>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
/* eslint-disable-next-line */
|
||||
import { DropdownWidget, TableWidget, UploadWidget, ChartWidget } from '@/utils/widget.js';
|
||||
/* eslint-disable-next-line */
|
||||
import { uploadMixin, statsDateRangeMixin, cachePageMixin, cachedPageChildMixin } from '@/core/mixins';
|
||||
/* eslint-disable-next-line */
|
||||
import { SysDataPermController, DictionaryController } from '@/api';
|
||||
import formEditSysDataPerm from '@/views/upms/formEditSysDataPerm';
|
||||
import formSetSysDataPermUser from '@/views/upms/formSetSysDataPermUser';
|
||||
|
||||
export default {
|
||||
name: 'formSysDataPerm',
|
||||
props: {
|
||||
},
|
||||
mixins: [uploadMixin, statsDateRangeMixin, cachePageMixin],
|
||||
data () {
|
||||
return {
|
||||
activeFragmentId: undefined,
|
||||
fragmentSysDataPerm: {
|
||||
formFilter: {
|
||||
sysDatapermType: undefined,
|
||||
sysDataPermName: undefined
|
||||
},
|
||||
formFilterCopy: {
|
||||
sysDatapermType: undefined,
|
||||
sysDataPermName: undefined
|
||||
},
|
||||
sysDatapermType: {
|
||||
impl: new DropdownWidget(this.loadSysDatapermTypeDropdownList)
|
||||
},
|
||||
SysDataPerm: {
|
||||
impl: new TableWidget(this.loadSysDataPermData, this.loadSysDataPermVerify, true, false)
|
||||
},
|
||||
isInit: false
|
||||
},
|
||||
fragmentSysDataPermUser: {
|
||||
formFilter: {
|
||||
dataPermId: undefined,
|
||||
searchString: undefined
|
||||
},
|
||||
dataPermId: {
|
||||
impl: new DropdownWidget(this.loadDataPermDropdownList)
|
||||
},
|
||||
SysDataPermUserList: {
|
||||
impl: new TableWidget(this.loadSysDataPermUserListData, this.loadSysDataPermUserListVerify, true, false)
|
||||
},
|
||||
isInit: false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onResetDataPerm () {
|
||||
this.$refs.fragmentSysDataPerm.resetFields();
|
||||
this.refreshFragmentSysDataPerm(true);
|
||||
},
|
||||
onResetDataPermUser () {
|
||||
this.$refs.fragmentSysDataPermUser.resetFields();
|
||||
this.refreshFragmentSysDataPermUser(true);
|
||||
},
|
||||
/**
|
||||
* 数据权限数据获取函数，返回Primise
|
||||
*/
|
||||
loadSysDataPermData (params) {
|
||||
params.sysDataPermDtoFilter = {
|
||||
searchString: this.fragmentSysDataPerm.formFilterCopy.sysDataPermName,
|
||||
ruleType: this.fragmentSysDataPerm.formFilterCopy.sysDatapermType
|
||||
};
|
||||
return new Promise((resolve, reject) => {
|
||||
SysDataPermController.list(this, params).then(res => {
|
||||
resolve({
|
||||
dataList: res.data.dataList,
|
||||
totalCount: res.data.totalCount
|
||||
});
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 数据权限数据获取检测函数，返回true正常获取数据，返回false停止获取数据
|
||||
*/
|
||||
loadSysDataPermVerify () {
|
||||
this.fragmentSysDataPerm.formFilterCopy.sysDataPermName = this.fragmentSysDataPerm.formFilter.sysDataPermName;
|
||||
this.fragmentSysDataPerm.formFilterCopy.sysDatapermType = this.fragmentSysDataPerm.formFilter.sysDatapermType;
|
||||
return true;
|
||||
},
|
||||
/**
|
||||
* 过滤规则下拉数据获取函数
|
||||
*/
|
||||
loadSysDatapermTypeDropdownList () {
|
||||
return new Promise((resolve, reject) => {
|
||||
let params = {};
|
||||
DictionaryController.dictSysDataPermType(this, params).then(res => {
|
||||
resolve(res.getList());
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 过滤规则下拉框显隐
|
||||
*/
|
||||
onSysDatapermTypeVisibleChange (show) {
|
||||
this.fragmentSysDataPerm.sysDatapermType.impl.onVisibleChange(show).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 过滤规则选中值改变
|
||||
*/
|
||||
onSysDatapermTypeValueChange (value) {
|
||||
},
|
||||
/**
|
||||
* 更新数据权限管理
|
||||
*/
|
||||
refreshFragmentSysDataPerm (reloadData = false) {
|
||||
// 重新获取数据组件的数据
|
||||
if (reloadData) {
|
||||
this.fragmentSysDataPerm.SysDataPerm.impl.refreshTable(true, 1);
|
||||
} else {
|
||||
this.fragmentSysDataPerm.SysDataPerm.impl.refreshTable();
|
||||
}
|
||||
this.fragmentSysDataPerm.sysDatapermType.impl.onVisibleChange(true).catch(e => {});
|
||||
this.fragmentSysDataPerm.isInit = true;
|
||||
},
|
||||
/**
|
||||
* 新建
|
||||
*/
|
||||
onAddDataPermClick () {
|
||||
let params = {};
|
||||
|
||||
this.$dialog.show('新建数据权限', formEditSysDataPerm, {
|
||||
area: ['800px', '520px']
|
||||
}, params).then(res => {
|
||||
this.fragmentSysDataPermUser.dataPermId.impl.dirty = true;
|
||||
this.refreshFragmentSysDataPerm();
|
||||
}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 编辑
|
||||
*/
|
||||
onEditDataPermClick (row) {
|
||||
let params = {
|
||||
dataPermId: row.dataPermId
|
||||
};
|
||||
|
||||
this.$dialog.show('编辑数据权限', formEditSysDataPerm, {
|
||||
area: ['800px', '520px']
|
||||
}, params).then(res => {
|
||||
if (row.dataPermId === this.fragmentSysDataPermUser.formFilter.dataPermId) {
|
||||
this.fragmentSysDataPermUser.formFilter.dataPermId = undefined;
|
||||
this.fragmentSysDataPermUser.SysDataPermUserList.impl.clearTable();
|
||||
}
|
||||
this.fragmentSysDataPermUser.dataPermId.impl.dirty = true;
|
||||
this.fragmentSysDataPerm.SysDataPerm.impl.refreshTable();
|
||||
}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 删除
|
||||
*/
|
||||
onDeleteClick (row) {
|
||||
let params = {
|
||||
dataPermId: row.dataPermId
|
||||
};
|
||||
|
||||
this.$confirm('是否删除此数据权限？').then(res => {
|
||||
SysDataPermController.delete(this, params).then(res => {
|
||||
this.$message.success('删除成功');
|
||||
if (row.dataPermId === this.fragmentSysDataPermUser.formFilter.dataPermId) {
|
||||
this.fragmentSysDataPermUser.formFilter.dataPermId = undefined;
|
||||
this.fragmentSysDataPermUser.SysDataPermUserList.impl.clearTable();
|
||||
}
|
||||
this.fragmentSysDataPermUser.dataPermId.impl.dirty = true;
|
||||
this.fragmentSysDataPerm.SysDataPerm.impl.refreshTable();
|
||||
}).catch(e => {});
|
||||
}).catch(e => {});
|
||||
},
|
||||
onDataPermChange (value) {
|
||||
this.refreshFragmentSysDataPermUser(true);
|
||||
},
|
||||
getUserStatusType (status) {
|
||||
if (status === this.SysUserStatus.NORMAL) {
|
||||
return 'success';
|
||||
} else if (status === this.SysUserStatus.LOCKED) {
|
||||
return 'danger';
|
||||
} else {
|
||||
return 'info';
|
||||
}
|
||||
},
|
||||
loadDataPermDropdownList () {
|
||||
return new Promise((resolve, reject) => {
|
||||
let params = {};
|
||||
SysDataPermController.list(this, params).then(res => {
|
||||
resolve(res.data.dataList);
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 用户列表数据获取函数，返回Primise
|
||||
*/
|
||||
loadSysDataPermUserListData (params) {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (this.fragmentSysDataPermUser.formFilter.dataPermId == null || this.fragmentSysDataPermUser.formFilter.dataPermId === '') {
|
||||
this.$message.error('请选择数据权限');
|
||||
resolve({
|
||||
dataList: [],
|
||||
totalCount: 0
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
params.dataPermId = this.fragmentSysDataPermUser.formFilter.dataPermId;
|
||||
params.searchString = this.fragmentSysDataPermUser.formFilter.searchString;
|
||||
SysDataPermController.listDataPermUser(this, params).then(res => {
|
||||
resolve({
|
||||
dataList: res.data.dataList,
|
||||
totalCount: res.data.totalCount
|
||||
});
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 用户列表数据获取检测函数，返回true正常获取数据，返回false停止获取数据
|
||||
*/
|
||||
loadSysDataPermUserListVerify () {
|
||||
return true;
|
||||
},
|
||||
onDeleteRow (row) {
|
||||
this.$confirm('是否移除此用户?').then(res => {
|
||||
let params = {
|
||||
dataPermId: this.fragmentSysDataPermUser.formFilter.dataPermId,
|
||||
userId: row.userId
|
||||
}
|
||||
|
||||
SysDataPermController.deleteDataPermUser(this, params).then(res => {
|
||||
this.refreshFragmentSysDataPermUser(true);
|
||||
this.$message.success('移除成功');
|
||||
}).catch(e => {});
|
||||
}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 更新数据权限授权
|
||||
*/
|
||||
refreshFragmentSysDataPermUser (reloadData = false) {
|
||||
// 重新获取数据组件的数据
|
||||
if (reloadData) {
|
||||
this.fragmentSysDataPermUser.SysDataPermUserList.impl.refreshTable(true, 1);
|
||||
} else {
|
||||
this.fragmentSysDataPermUser.SysDataPermUserList.impl.refreshTable();
|
||||
}
|
||||
this.fragmentSysDataPermUser.isInit = true;
|
||||
},
|
||||
/**
|
||||
* 授权用户
|
||||
*/
|
||||
onAddDataPermUserClick () {
|
||||
let params = {
|
||||
dataPermId: this.fragmentSysDataPermUser.formFilter.dataPermId
|
||||
};
|
||||
|
||||
this.$dialog.show('授权用户', formSetSysDataPermUser, {
|
||||
area: ['1100px', '580px']
|
||||
}, params).then(res => {
|
||||
this.refreshFragmentSysDataPermUser(true);
|
||||
}).catch(e => {
|
||||
this.refreshFragmentSysDataPermUser(true);
|
||||
});
|
||||
},
|
||||
buildFragmentPermCodeMap () {
|
||||
this.permCodeList = [
|
||||
{
|
||||
key: 'fragmentSysDataPerm',
|
||||
permCode: 'formSysDataPerm:fragmentSysDataPerm',
|
||||
refresh: this.refreshFragmentSysDataPerm
|
||||
},
|
||||
{
|
||||
key: 'fragmentSysDataPermUser',
|
||||
permCode: 'formSysDataPerm:fragmentSysDataPermUser',
|
||||
refresh: this.refreshFragmentSysDataPermUser
|
||||
}
|
||||
];
|
||||
},
|
||||
onFragmentChange (fragmentId) {
|
||||
for (let i = 0; i < this.permCodeList.length; i++) {
|
||||
if (this.permCodeList[i].key === fragmentId) {
|
||||
this.activeFragmentId = fragmentId;
|
||||
// if (this.permCodeList[i].refresh) this.permCodeList[i].refresh();
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
getActiveFragment () {
|
||||
for (let i = 0; i < this.permCodeList.length; i++) {
|
||||
if (this.permCodeList[i].key === this.activeFragmentId) {
|
||||
return this.permCodeList[i];
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 根据权限获取默认显示的fragment
|
||||
*/
|
||||
getDefaultFragment () {
|
||||
for (let i = 0; i < this.permCodeList.length; i++) {
|
||||
if (this.checkPermCodeExist(this.permCodeList[i].permCode)) {
|
||||
this.activeFragmentId = this.permCodeList[i].key;
|
||||
return this.permCodeList[i];
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
},
|
||||
onResume () {
|
||||
this.refreshFragmentSysDataPerm();
|
||||
},
|
||||
initFormData () {
|
||||
},
|
||||
formInit () {
|
||||
this.buildFragmentPermCodeMap();
|
||||
let defaultFragment = this.getDefaultFragment();
|
||||
if (defaultFragment == null) {
|
||||
this.$message.error('您没有访问这个页面的权限，请与系统管理员联系！');
|
||||
} else {
|
||||
if (defaultFragment.refresh) defaultFragment.refresh();
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getTableHeight () {
|
||||
return (this.getMainContextHeight - 192);
|
||||
},
|
||||
...mapGetters(['getMainContextHeight'])
|
||||
},
|
||||
created () {
|
||||
this.formInit();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,190 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="formSysDept" :model="formSysDept" label-width="75px" :size="defaultFormItemSize" label-position="right" @submit.native.prevent>
|
||||
<filter-box :item-width="350">
|
||||
<el-form-item label="部门名称" prop="formFilter.deptName">
|
||||
<el-input class="filter-item" v-model="formSysDept.formFilter.deptName"
|
||||
:clearable="true" placeholder="部门名称" />
|
||||
</el-form-item>
|
||||
<el-button slot="operator" type="default" :plain="true" :size="defaultFormItemSize" @click="onReset">重置</el-button>
|
||||
<el-button slot="operator" type="primary" :plain="true" :size="defaultFormItemSize" @click="refreshFormSysDept(true)">查询</el-button>
|
||||
<el-button slot="operator" type="primary" :size="defaultFormItemSize" :disabled="!checkPermCodeExist('formSysDept:fragmentSysDept:add')"
|
||||
@click="onCreateSysDeptClick()">
|
||||
新建
|
||||
</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="formSysDept.SysDeptList.impl.dataList" :size="defaultFormItemSize" row-key="deptId"
|
||||
header-cell-class-name="table-header-gray">
|
||||
<el-table-column label="序号" header-align="center" align="center" type="index" width="50px">
|
||||
</el-table-column>
|
||||
<el-table-column label="部门名称" prop="deptName">
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" fixed="right" width="150px">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="onEditSysDeptClick(scope.row)" type="text" :size="defaultFormItemSize"
|
||||
:disabled="!checkPermCodeExist('formSysDept:fragmentSysDept:update')">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button @click="onDeleteClick(scope.row)" type="text" :size="defaultFormItemSize"
|
||||
:disabled="!checkPermCodeExist('formSysDept:fragmentSysDept:delete')">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { treeDataTranslate } from '@/utils';
|
||||
/* eslint-disable-next-line */
|
||||
import { DropdownWidget, TableWidget, UploadWidget, ChartWidget } from '@/utils/widget.js';
|
||||
/* eslint-disable-next-line */
|
||||
import { uploadMixin, statsDateRangeMixin, cachePageMixin, cachedPageChildMixin } from '@/core/mixins';
|
||||
/* eslint-disable-next-line */
|
||||
import { SysDeptController, DictionaryController } from '@/api';
|
||||
import formEditSysDept from '../formEditSysDept';
|
||||
|
||||
export default {
|
||||
name: 'formSysDept',
|
||||
props: {
|
||||
},
|
||||
mixins: [uploadMixin, statsDateRangeMixin, cachePageMixin],
|
||||
data () {
|
||||
return {
|
||||
formSysDept: {
|
||||
formFilter: {
|
||||
deptName: undefined
|
||||
},
|
||||
formFilterCopy: {
|
||||
deptName: undefined
|
||||
},
|
||||
SysDeptList: {
|
||||
impl: new TableWidget(this.loadSysDeptListData, this.loadSysDeptListVerify, false)
|
||||
},
|
||||
isInit: false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onReset () {
|
||||
this.$refs.formSysDept.resetFields();
|
||||
this.refreshFormSysDept(true);
|
||||
},
|
||||
/**
|
||||
* 部门列表数据获取函数，返回Primise
|
||||
*/
|
||||
loadSysDeptListData (params) {
|
||||
params.sysDeptDtoFilter = {
|
||||
deptName: this.formSysDept.formFilterCopy.deptName
|
||||
};
|
||||
// 按照显示顺序排序
|
||||
params.orderParam = [
|
||||
{
|
||||
fieldName: 'showOrder',
|
||||
asc: true
|
||||
}
|
||||
];
|
||||
return new Promise((resolve, reject) => {
|
||||
SysDeptController.list(this, params).then(res => {
|
||||
resolve({
|
||||
dataList: treeDataTranslate(res.data.dataList, 'deptId', 'parentId'),
|
||||
totalCount: res.data.totalCount
|
||||
});
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 部门列表数据获取检测函数，返回true正常获取数据，返回false停止获取数据
|
||||
*/
|
||||
loadSysDeptListVerify () {
|
||||
this.formSysDept.formFilterCopy.deptName = this.formSysDept.formFilter.deptName;
|
||||
return true;
|
||||
},
|
||||
/**
|
||||
* 部门列表当前页变化函数
|
||||
*/
|
||||
onSysDeptListCurrentPageChange (newPage) {
|
||||
this.formSysDept.SysDeptList.impl.onCurrentPageChange(newPage);
|
||||
},
|
||||
/**
|
||||
* 部门列表每页显示数量变化函数（跳转回第一页）
|
||||
*/
|
||||
onSysDeptListPageSizeChange (newPage) {
|
||||
this.formSysDept.SysDeptList.impl.onPageSizeChange(newPage);
|
||||
},
|
||||
/**
|
||||
* 更新部门管理
|
||||
*/
|
||||
refreshFormSysDept (reloadData = false) {
|
||||
// 重新获取数据组件的数据
|
||||
if (reloadData) {
|
||||
this.formSysDept.SysDeptList.impl.refreshTable(true, 1);
|
||||
} else {
|
||||
this.formSysDept.SysDeptList.impl.refreshTable();
|
||||
}
|
||||
this.formSysDept.isInit = true;
|
||||
},
|
||||
/**
|
||||
* 新建
|
||||
*/
|
||||
onCreateSysDeptClick () {
|
||||
let params = {};
|
||||
|
||||
this.$dialog.show('新建部门', formEditSysDept, {
|
||||
area: ['500px']
|
||||
}, params).then(res => {
|
||||
this.refreshFormSysDept();
|
||||
}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 编辑部门
|
||||
*/
|
||||
onEditSysDeptClick (row) {
|
||||
let params = {
|
||||
deptId: row.deptId
|
||||
};
|
||||
|
||||
this.$dialog.show('编辑部门', formEditSysDept, {
|
||||
area: ['500px']
|
||||
}, params).then(res => {
|
||||
this.formSysDept.SysDeptList.impl.refreshTable();
|
||||
}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 删除
|
||||
*/
|
||||
onDeleteClick (row) {
|
||||
let params = {
|
||||
deptId: row.deptId
|
||||
};
|
||||
|
||||
this.$confirm('是否删除部门？').then(res => {
|
||||
SysDeptController.delete(this, params).then(res => {
|
||||
this.$message.success('删除成功');
|
||||
this.formSysDept.SysDeptList.impl.refreshTable();
|
||||
}).catch(e => {});
|
||||
}).catch(e => {});
|
||||
},
|
||||
onResume () {
|
||||
this.refreshFormSysDept();
|
||||
},
|
||||
initFormData () {
|
||||
},
|
||||
formInit () {
|
||||
this.initFormData();
|
||||
this.refreshFormSysDept();
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.formInit();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<div style="position: relative;">
|
||||
<el-form ref="formSysLoginUser" :model="formSysLoginUser" label-width="100px" :size="defaultFormItemSize" label-position="right" @submit.native.prevent>
|
||||
<filter-box :item-width="350">
|
||||
<el-form-item label="登录名称" prop="formFilter.loginName">
|
||||
<el-input class="filter-item" v-model="formSysLoginUser.formFilter.loginName" :clearable="true" />
|
||||
</el-form-item>
|
||||
<el-button slot="operator" type="default" :plain="true" :size="defaultFormItemSize" @click="onReset">重置</el-button>
|
||||
<el-button slot="operator" type="primary" :plain="true" :size="defaultFormItemSize" @click="refreshFormOperationType(true)">查询</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table ref="teacher" :data="formSysLoginUser.loginUser.impl.dataList" :size="defaultFormItemSize" @sort-change="formSysLoginUser.loginUser.impl.onSortChange"
|
||||
header-cell-class-name="table-header-gray">
|
||||
<el-table-column label="序号" header-align="center" align="center" type="index" width="55px" :index="formSysLoginUser.loginUser.impl.getTableIndex" />
|
||||
<el-table-column label="登录名称" prop="loginName" />
|
||||
<el-table-column label="用户昵称" prop="showName" />
|
||||
<el-table-column label="登录 IP" prop="loginIp" />
|
||||
<el-table-column label="登录时间" prop="loginTime" />
|
||||
<el-table-column label="操作" fixed="right" width="150px" >
|
||||
<template slot-scope="scope">
|
||||
<el-button @click.stop="onDeleteLoginUserClick(scope.row)" type="text" :size="defaultFormItemSize">
|
||||
强退
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-row type="flex" justify="end" style="margin-top: 10px;">
|
||||
<el-pagination
|
||||
:total="formSysLoginUser.loginUser.impl.totalCount"
|
||||
:current-page="formSysLoginUser.loginUser.impl.currentPage"
|
||||
:page-size="formSysLoginUser.loginUser.impl.pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, prev, pager, next, sizes"
|
||||
@current-change="formSysLoginUser.loginUser.impl.onCurrentPageChange"
|
||||
@size-change="formSysLoginUser.loginUser.impl.onPageSizeChange">
|
||||
</el-pagination>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/* eslint-disable-next-line */
|
||||
import { TableWidget } from '@/utils/widget.js';
|
||||
/* eslint-disable-next-line */
|
||||
import { uploadMixin, statsDateRangeMixin, cachePageMixin } from '@/core/mixins';
|
||||
/* eslint-disable-next-line */
|
||||
import { SystemController } from '@/api';
|
||||
|
||||
export default {
|
||||
name: 'formSysLoginUser',
|
||||
mixins: [uploadMixin, statsDateRangeMixin, cachePageMixin],
|
||||
data () {
|
||||
return {
|
||||
formSysLoginUser: {
|
||||
formFilter: {
|
||||
loginName: undefined
|
||||
},
|
||||
formFilterCopy: {
|
||||
loginName: undefined
|
||||
},
|
||||
loginUser: {
|
||||
impl: new TableWidget(this.loadLoginUserWidgetData, this.loadLoginUserVerify, true, false)
|
||||
},
|
||||
isInit: false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onReset () {
|
||||
this.$refs.formSysLoginUser.resetFields();
|
||||
this.refreshFormOperationType(true);
|
||||
},
|
||||
/**
|
||||
* 登录用户数据数据获取函数，返回Promise
|
||||
*/
|
||||
loadLoginUserWidgetData (params) {
|
||||
if (params == null) params = {};
|
||||
params = {
|
||||
...params,
|
||||
loginName: this.formSysLoginUser.formFilterCopy.loginName
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.listSysLoginUser(this, params).then(res => {
|
||||
console.log(res);
|
||||
resolve({
|
||||
dataList: res.data.dataList,
|
||||
totalCount: res.data.totalCount
|
||||
});
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 登录用户数据获取检测函数，返回true正常获取数据，返回false停止获取数据
|
||||
*/
|
||||
loadLoginUserVerify () {
|
||||
this.formSysLoginUser.formFilterCopy = { ...this.formSysLoginUser.formFilter };
|
||||
return true;
|
||||
},
|
||||
/**
|
||||
* 强制踢出登录用户
|
||||
*/
|
||||
onDeleteLoginUserClick (row) {
|
||||
this.$confirm('是否删除此用户？').then(res => {
|
||||
SystemController.deleteSysLoginUser(this, {
|
||||
sessionId: row.sessionId
|
||||
}).then(res => {
|
||||
this.$message.success('删除成功');
|
||||
this.formSysLoginUser.loginUser.impl.refreshTable();
|
||||
}).catch(e => {});
|
||||
}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 更新操作日志
|
||||
*/
|
||||
refreshFormOperationType (reloadData = false) {
|
||||
if (reloadData) {
|
||||
this.formSysLoginUser.loginUser.impl.refreshTable(true, 1);
|
||||
} else {
|
||||
this.formSysLoginUser.loginUser.impl.refreshTable();
|
||||
}
|
||||
if (!this.formSysLoginUser.isInit) {
|
||||
// 初始化下拉数据
|
||||
}
|
||||
this.formSysLoginUser.isInit = true;
|
||||
},
|
||||
onResume () {
|
||||
this.refreshFormOperationType();
|
||||
},
|
||||
initFormData () {
|
||||
},
|
||||
formInit () {
|
||||
this.refreshFormOperationType();
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
// 初始化页面数据
|
||||
this.formInit();
|
||||
},
|
||||
watch: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,307 @@
|
||||
<template>
|
||||
<div class="tab-dialog-box" style="position: relative;">
|
||||
<el-tabs v-model="activeFragment">
|
||||
<el-tab-pane label="栏目管理" name="fragmentSysColumn" style="width: 100%;">
|
||||
<el-form label-width="100px" :size="defaultFormItemSize" label-position="right" @submit.native.prevent>
|
||||
<el-row type="flex" justify="end" style="margin-bottom: 18px;">
|
||||
<el-button type="primary" :size="defaultFormItemSize" :plain="true"
|
||||
@click="initFormData()">
|
||||
刷新
|
||||
</el-button>
|
||||
<el-button type="primary" :size="defaultFormItemSize" :disabled="!checkPermCodeExist('formSysMenu:fragmentSysMenu:add')"
|
||||
@click="onCreateSysColumnClick()">
|
||||
新建
|
||||
</el-button>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="columnList" :size="defaultFormItemSize" :height="getTabPaneHeight + 'px'"
|
||||
header-cell-class-name="table-header-gray" row-key="menuId">
|
||||
<el-table-column label="序号" header-align="center" align="center" type="index" width="55px" />
|
||||
<el-table-column label="栏目名称" prop="columnName" />
|
||||
<el-table-column label="显示顺序" prop="showOrder" />
|
||||
<el-table-column label="操作" width="200px">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="onEditSysColumnClick(scope.row)" type="text" :size="defaultFormItemSize"
|
||||
:disabled="!checkPermCodeExist('formSysMenu:fragmentSysMenu:update')">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button @click="onDeleteClick(scope.row)" type="text" :size="defaultFormItemSize"
|
||||
:disabled="!checkPermCodeExist('formSysMenu:fragmentSysMenu:delete')">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="菜单管理" name="fragmentSysMenu" style="width: 100%;">
|
||||
<el-form label-width="80px" :size="defaultFormItemSize" label-position="right" @submit.native.prevent>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="所属栏目" style="flex-grow: 1">
|
||||
<el-select class="filter-item" v-model="currentColumnId" filterable
|
||||
placeholder="所属栏目">
|
||||
<el-option v-for="item in columnList" :key="item.columnId" :value="item.columnId" :label="item.columnName" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-row type="flex" justify="end">
|
||||
<el-button type="primary" :size="defaultFormItemSize" :plain="true"
|
||||
@click="initFormData(true)">
|
||||
刷新
|
||||
</el-button>
|
||||
<el-button type="primary" :size="defaultFormItemSize" :disabled="!checkPermCodeExist('formSysMenu:fragmentSysMenu:add')"
|
||||
@click="onCreateSysMenuClick()">
|
||||
新建
|
||||
</el-button>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="currentMenuTree" :size="defaultFormItemSize" :height="getTabPaneHeight + 'px'"
|
||||
header-cell-class-name="table-header-gray" row-key="menuId">
|
||||
<el-table-column label="菜单名称" prop="menuName" width="300px">
|
||||
</el-table-column>
|
||||
<el-table-column label="菜单图标" prop="icon" width="100px">
|
||||
<template slot-scope="scope">
|
||||
<i :class="scope.row.icon" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="菜单顺序" prop="showOrder" width="100px">
|
||||
</el-table-column>
|
||||
<el-table-column label="菜单类型" prop="menuType" width="100px">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :size="defaultFormItemSize" :type="getMenuType(scope.row)">{{SysMenuType.getValue(scope.row.menuType)}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="菜单路由" prop="formRouterName" min-width="250px">
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="200px">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="onEditSysMenuClick(scope.row)" type="text" :size="defaultFormItemSize"
|
||||
:disabled="!checkPermCodeExist('formSysMenu:fragmentSysMenu:update')">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button @click="onAddChildSysMenuClick(scope.row)" type="text" :size="defaultFormItemSize"
|
||||
:disabled="!checkPermCodeExist('formSysMenu:fragmentSysMenu:add') || scope.row.menuType === SysMenuType.BUTTON">
|
||||
添加
|
||||
</el-button>
|
||||
<el-button @click="onDeleteClick(scope.row)" type="text" :size="defaultFormItemSize"
|
||||
:disabled="!checkPermCodeExist('formSysMenu:fragmentSysMenu:delete')">
|
||||
删除
|
||||
</el-button>
|
||||
<el-button @click="onShowPermList(scope.row)" type="text" :size="defaultFormItemSize"
|
||||
v-if="checkPermCodeExist('formSysMenu:fragmentSysMenu:listSysMenuPermDetail')"
|
||||
:disabled="scope.row.menuType === SysMenuType.DIRECTORY">
|
||||
权限详情
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { treeDataTranslate } from '@/utils';
|
||||
/* eslint-disable-next-line */
|
||||
import { DropdownWidget, TableWidget, UploadWidget, ChartWidget } from '@/utils/widget.js';
|
||||
/* eslint-disable-next-line */
|
||||
import { uploadMixin, statsDateRangeMixin, cachePageMixin, cachedPageChildMixin } from '@/core/mixins';
|
||||
/* eslint-disable-next-line */
|
||||
import { DictionaryController, SystemController } from '@/api';
|
||||
import formEditSysMenu from '@/views/upms/formEditSysMenu';
|
||||
import formMenuPerm from './formSysMenuPerm';
|
||||
import formEditColumn from '@/views/upms/formEditSysMenu/editColumn.vue';
|
||||
|
||||
export default {
|
||||
name: 'formSysMenu',
|
||||
props: {
|
||||
},
|
||||
mixins: [uploadMixin, statsDateRangeMixin, cachePageMixin],
|
||||
data () {
|
||||
return {
|
||||
activeFragment: 'fragmentSysColumn',
|
||||
allMenuList: [],
|
||||
menuTree: [],
|
||||
currentColumnId: undefined,
|
||||
formSysMenu: {
|
||||
currentColumnId: {
|
||||
impl: new DropdownWidget(this.loadCurrentColumnDropdownList, false, 'columnId', 'columnName'),
|
||||
value: []
|
||||
},
|
||||
isInit: false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getMenuType (row) {
|
||||
if (row.menuType === 0) {
|
||||
return 'primary'
|
||||
} else if (row.menuType === 1) {
|
||||
return 'success';
|
||||
} else if (row.menuType === 2) {
|
||||
return 'danger';
|
||||
} else if (row.menuType === 3) {
|
||||
return 'warning';
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 新建栏目
|
||||
*/
|
||||
onCreateSysColumnClick () {
|
||||
this.$dialog.show('新建', formEditColumn, {
|
||||
area: ['500px']
|
||||
}, {}).then(res => {
|
||||
this.initFormData();
|
||||
}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 编辑栏目
|
||||
*/
|
||||
onEditSysColumnClick (row) {
|
||||
this.$dialog.show('编辑', formEditColumn, {
|
||||
area: ['500px']
|
||||
}, {
|
||||
...row
|
||||
}).then(res => {
|
||||
this.initFormData();
|
||||
}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 新建菜单
|
||||
*/
|
||||
onCreateSysMenuClick () {
|
||||
let params = {
|
||||
parentId: this.currentColumnId,
|
||||
menuList: this.allMenuList
|
||||
};
|
||||
this.$dialog.show('新建', formEditSysMenu, {
|
||||
area: ['800px']
|
||||
}, params).then(res => {
|
||||
this.initFormData();
|
||||
}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 编辑菜单
|
||||
*/
|
||||
onEditSysMenuClick (row) {
|
||||
SystemController.viewMenu(this, {menuId: row.menuId}).then(res => {
|
||||
let params = {
|
||||
rowData: res.data,
|
||||
menuId: row.menuId,
|
||||
menuList: this.allMenuList
|
||||
};
|
||||
|
||||
this.$dialog.show('编辑', formEditSysMenu, {
|
||||
area: ['800px']
|
||||
}, params).then(res => {
|
||||
this.formSysMenu.SysMenu.impl.refreshTable();
|
||||
}).catch(e => {});
|
||||
}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 添加子菜单
|
||||
*/
|
||||
onAddChildSysMenuClick (row) {
|
||||
let params = {
|
||||
parentId: row.menuId,
|
||||
menuList: this.allMenuList
|
||||
};
|
||||
|
||||
this.$dialog.show('添加子菜单', formEditSysMenu, {
|
||||
area: ['800px']
|
||||
}, params).then(res => {
|
||||
this.formSysMenu.SysMenu.impl.refreshTable();
|
||||
}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 删除
|
||||
*/
|
||||
onDeleteClick (row) {
|
||||
let params = {
|
||||
menuId: row.menuId
|
||||
};
|
||||
|
||||
this.$confirm('是否删除此菜单项？').then(res => {
|
||||
SystemController.deleteMenu(this, params).then(res => {
|
||||
this.$message.success('删除成功');
|
||||
this.formSysMenu.SysMenu.impl.refreshTable();
|
||||
}).catch(e => {});
|
||||
}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 权限详情
|
||||
*/
|
||||
onShowPermList (row) {
|
||||
let params = {
|
||||
menuId: row.menuId
|
||||
};
|
||||
|
||||
this.$dialog.show('权限详情 - ' + row.menuName, formMenuPerm, {
|
||||
area: '1200px',
|
||||
offset: '30px'
|
||||
}, params).catch(e => {
|
||||
});
|
||||
},
|
||||
onResume () {
|
||||
this.initFormData();
|
||||
},
|
||||
initFormData () {
|
||||
SystemController.getMenuPermList(this, {}).then(res => {
|
||||
this.allMenuList = res.data.map((item) => {
|
||||
return {...item};
|
||||
});
|
||||
this.menuTree = treeDataTranslate(res.data, 'menuId');
|
||||
// 获取默认的栏目
|
||||
this.currentColumnId = undefined;
|
||||
for (let i = 0; i < this.menuTree.length; i++) {
|
||||
if (this.menuTree[i].menuType === this.SysMenuType.DIRECTORY) {
|
||||
this.currentColumnId = this.menuTree[i].menuId;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}).catch(e => {});
|
||||
},
|
||||
formInit () {
|
||||
this.initFormData();
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.formInit();
|
||||
},
|
||||
computed: {
|
||||
getTabPaneHeight () {
|
||||
return (this.getMainContextHeight - 150);
|
||||
},
|
||||
currentMenuTree () {
|
||||
if (this.currentColumnId == null || this.currentColumnId === '') return [];
|
||||
for (let i = 0; i < this.menuTree.length; i++) {
|
||||
if (this.menuTree[i].menuId === this.currentColumnId) return this.menuTree[i].children;
|
||||
}
|
||||
return [];
|
||||
},
|
||||
columnList () {
|
||||
return this.menuTree.map((item) => {
|
||||
return {
|
||||
menuId: item.menuId,
|
||||
columnId: item.menuId,
|
||||
columnName: item.menuName,
|
||||
showOrder: item.showOrder
|
||||
};
|
||||
});
|
||||
},
|
||||
...mapGetters(['getMainContextHeight'])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<div class="tab-dialog-box" style="position: relative; margin-top: -15px;">
|
||||
<el-tabs v-model="activeFragmentId">
|
||||
<el-tab-pane label="权限资源" name="fragmentSysMenuPerm" style="width: 100%;">
|
||||
<el-form label-width="100px" :size="defaultFormItemSize" label-position="left" @submit.native.prevent>
|
||||
<filter-box :item-width="350">
|
||||
<el-form-item label="URL">
|
||||
<el-input class="filter-item" v-model="fragmentSysMenuPerm.formFilter.url" clearable
|
||||
placeholder="" />
|
||||
</el-form-item>
|
||||
<el-button slot="operator" type="primary" :plain="true" :size="defaultFormItemSize" @click="refreshfragmentSysMenuPerm(true)">查询</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="fragmentSysMenuPerm.SysMenuPerm.impl.dataList" :size="defaultFormItemSize" :height="getTableHeight + 'px'"
|
||||
@sort-change="fragmentSysMenuPerm.SysMenuPerm.impl.onSortChange"
|
||||
header-cell-class-name="table-header-gray">
|
||||
<el-table-column label="序号" header-align="center" align="center" type="index" width="55px"
|
||||
:index="fragmentSysMenuPerm.SysMenuPerm.impl.getTableIndex" />
|
||||
<el-table-column label="权限字名称" prop="showName" width="150px">
|
||||
</el-table-column>
|
||||
<el-table-column label="权限字类型" width="100px">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :size="defaultFormItemSize" :type="getPermCodeType(scope.row.permCodeType)">
|
||||
{{SysPermCodeType.getValue(scope.row.permCodeType)}}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="权限字标识" prop="permCode" width="300px" />
|
||||
<el-table-column label="权限名称" prop="permName" width="150px" />
|
||||
<el-table-column label="关联URL" prop="url" min-width="300px">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="用户查询" name="fragmentSysMenuUser" style="width: 100%;">
|
||||
<el-form label-width="100px" :size="defaultFormItemSize" label-position="left" @submit.native.prevent>
|
||||
<filter-box :item-width="350">
|
||||
<el-form-item label="用户名">
|
||||
<el-input class="filter-item" v-model="fragmentSysMenuUser.formFilter.loginName" clearable
|
||||
placeholder="" />
|
||||
</el-form-item>
|
||||
<el-button slot="operator" type="primary" :plain="true" :size="defaultFormItemSize" @click="refreshFragmentSysMenuUser(true)">查询</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="fragmentSysMenuUser.SysMenuUser.impl.dataList" :size="defaultFormItemSize" :height="getTableHeight + 'px'"
|
||||
@sort-change="fragmentSysMenuUser.SysMenuUser.impl.onSortChange"
|
||||
header-cell-class-name="table-header-gray">
|
||||
<el-table-column label="序号" header-align="center" align="center" type="index" width="55px"
|
||||
:index="fragmentSysMenuUser.SysMenuUser.impl.getTableIndex" />
|
||||
<el-table-column label="用户名" prop="loginName" />
|
||||
<el-table-column label="用户昵称" prop="showName" />
|
||||
<el-table-column label="用户角色" prop="roleName" />
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
/* eslint-disable-next-line */
|
||||
import { DropdownWidget, TableWidget, UploadWidget, ChartWidget } from '@/utils/widget.js';
|
||||
import { SystemController } from '@/api';
|
||||
|
||||
export default {
|
||||
name: 'SysMenuPerm',
|
||||
props: {
|
||||
menuId: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
activeFragmentId: 'fragmentSysMenuPerm',
|
||||
fragmentSysMenuPerm: {
|
||||
formFilter: {
|
||||
url: undefined
|
||||
},
|
||||
formFilterCopy: {
|
||||
url: undefined
|
||||
},
|
||||
SysMenuPerm: {
|
||||
impl: new TableWidget(this.loadSysMenuPermData, this.loadSysMenuPermVerify, false, false)
|
||||
}
|
||||
},
|
||||
fragmentSysMenuUser: {
|
||||
formFilter: {
|
||||
loginName: undefined
|
||||
},
|
||||
formFilterCopy: {
|
||||
loginName: undefined
|
||||
},
|
||||
SysMenuUser: {
|
||||
impl: new TableWidget(this.loadSysMenuUserData, this.loadSysMenuUserVerify, false, false)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 获取菜单权限资源函数，返回Promise
|
||||
*/
|
||||
loadSysMenuPermData (params) {
|
||||
params.menuId = this.menuId;
|
||||
params.url = this.fragmentSysMenuPerm.formFilterCopy.url;
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.listSysPermByMenuIdWithDetail(this, params).then(res => {
|
||||
resolve({
|
||||
dataList: res.data,
|
||||
totalCount: res.data.length
|
||||
});
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 菜单权限资源获取检测函数，返回true正常获取数据，返回false停止获取数据
|
||||
*/
|
||||
loadSysMenuPermVerify () {
|
||||
this.fragmentSysMenuPerm.formFilterCopy.url = this.fragmentSysMenuPerm.formFilter.url;
|
||||
return true;
|
||||
},
|
||||
getPermCodeType (permCodeType) {
|
||||
switch (permCodeType) {
|
||||
case this.SysPermCodeType.FORM: return 'primary';
|
||||
case this.SysPermCodeType.FRAGMENT: return 'warning';
|
||||
case this.SysPermCodeType.OPERATION: return 'success';
|
||||
default: return 'info';
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 更新菜单权限资源
|
||||
*/
|
||||
refreshfragmentSysMenuPerm (reloadData = false) {
|
||||
// 重新获取数据组件的数据
|
||||
if (reloadData) {
|
||||
this.fragmentSysMenuPerm.SysMenuPerm.impl.refreshTable(true, 1);
|
||||
} else {
|
||||
this.fragmentSysMenuPerm.SysMenuPerm.impl.refreshTable();
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取菜单用户函数，返回Promise
|
||||
*/
|
||||
loadSysMenuUserData (params) {
|
||||
params.menuId = this.menuId;
|
||||
params.loginName = this.fragmentSysMenuUser.formFilterCopy.loginName;
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.listSysUserByMenuIdWithDetail(this, params).then(res => {
|
||||
resolve({
|
||||
dataList: res.data,
|
||||
totalCount: res.data.length
|
||||
});
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 菜单用户获取检测函数，返回true正常获取数据，返回false停止获取数据
|
||||
*/
|
||||
loadSysMenuUserVerify () {
|
||||
if (this.fragmentSysMenuUser.formFilter.loginName == null || this.fragmentSysMenuUser.formFilter.loginName === '') {
|
||||
this.$message.error('请输入用户名！');
|
||||
return false;
|
||||
}
|
||||
this.fragmentSysMenuUser.formFilterCopy.loginName = this.fragmentSysMenuUser.formFilter.loginName;
|
||||
return true;
|
||||
},
|
||||
/**
|
||||
* 更新菜单用户
|
||||
*/
|
||||
refreshFragmentSysMenuUser (reloadData = false) {
|
||||
// 重新获取数据组件的数据
|
||||
if (reloadData) {
|
||||
this.fragmentSysMenuUser.SysMenuUser.impl.refreshTable(true, 1);
|
||||
} else {
|
||||
this.fragmentSysMenuUser.SysMenuUser.impl.refreshTable();
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getTableHeight () {
|
||||
return (this.getMainContextHeight - 150);
|
||||
},
|
||||
...mapGetters(['getMainContextHeight'])
|
||||
},
|
||||
mounted () {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,241 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form label-width="100px" :size="defaultFormItemSize" label-position="right" @submit.native.prevent>
|
||||
<filter-box :item-width="350">
|
||||
<el-button slot="operator" type="primary" :size="defaultFormItemSize" :plain="true"
|
||||
@click="refreshFormSysMenu(true)">
|
||||
刷新
|
||||
</el-button>
|
||||
<el-button slot="operator" type="primary" :size="defaultFormItemSize" :disabled="!checkPermCodeExist('formSysMenu:fragmentSysMenu:add')"
|
||||
@click="onCreateSysMenuClick()">
|
||||
新建
|
||||
</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="formSysMenu.SysMenu.impl.dataList" :size="defaultFormItemSize"
|
||||
header-cell-class-name="table-header-gray" row-key="menuId">
|
||||
<el-table-column label="菜单名称" prop="menuName" width="300px">
|
||||
</el-table-column>
|
||||
<el-table-column label="菜单图标" prop="icon" width="100px">
|
||||
<template slot-scope="scope">
|
||||
<i :class="scope.row.icon" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="菜单顺序" prop="showOrder" width="100px">
|
||||
</el-table-column>
|
||||
<el-table-column label="菜单类型" prop="menuType" width="100px">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :size="defaultFormItemSize" :type="getMenuType(scope.row)">{{SysMenuType.getValue(scope.row.menuType)}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="菜单路由" prop="formRouterName" min-width="250px">
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" fixed="right" width="200px">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="onEditSysMenuClick(scope.row)" type="text" :size="defaultFormItemSize"
|
||||
:disabled="!checkPermCodeExist('formSysMenu:fragmentSysMenu:update')">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button @click="onAddChildSysMenuClick(scope.row)" type="text" :size="defaultFormItemSize"
|
||||
:disabled="!checkPermCodeExist('formSysMenu:fragmentSysMenu:add') || scope.row.menuType === SysMenuType.BUTTON">
|
||||
添加
|
||||
</el-button>
|
||||
<el-button @click="onDeleteClick(scope.row)" type="text" :size="defaultFormItemSize"
|
||||
:disabled="!checkPermCodeExist('formSysMenu:fragmentSysMenu:delete')">
|
||||
删除
|
||||
</el-button>
|
||||
<el-button @click="onShowPermList(scope.row)" type="text" :size="defaultFormItemSize"
|
||||
v-if="checkPermCodeExist('formSysMenu:fragmentSysMenu:listSysMenuPermDetail')"
|
||||
:disabled="scope.row.menuType === SysMenuType.DIRECTORY">
|
||||
权限详情
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { treeDataTranslate } from '@/utils';
|
||||
/* eslint-disable-next-line */
|
||||
import { DropdownWidget, TableWidget, UploadWidget, ChartWidget } from '@/utils/widget.js';
|
||||
/* eslint-disable-next-line */
|
||||
import { uploadMixin, statsDateRangeMixin, cachePageMixin, cachedPageChildMixin } from '@/core/mixins';
|
||||
/* eslint-disable-next-line */
|
||||
import { DictionaryController, SystemController } from '@/api';
|
||||
import formEditSysMenu from '@/views/upms/formEditSysMenu';
|
||||
import formMenuPerm from './formSysMenuPerm';
|
||||
|
||||
export default {
|
||||
name: 'formSysMenu',
|
||||
props: {
|
||||
},
|
||||
mixins: [uploadMixin, statsDateRangeMixin, cachePageMixin],
|
||||
data () {
|
||||
return {
|
||||
formSysMenu: {
|
||||
formFilter: {
|
||||
},
|
||||
formFilterCopy: {
|
||||
},
|
||||
SysMenu: {
|
||||
impl: new TableWidget(this.loadSysMenuData, this.loadSysMenuVerify, false)
|
||||
},
|
||||
isInit: false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getMenuType (row) {
|
||||
if (row.menuType === this.SysMenuType.DIRECTORY) {
|
||||
return 'primary'
|
||||
} else if (row.menuType === this.SysMenuType.MENU) {
|
||||
return 'success';
|
||||
} else if (row.menuType === this.SysMenuType.FRAGMENT) {
|
||||
return 'danger';
|
||||
} else if (row.menuType === this.SysMenuType.BUTTON) {
|
||||
return 'warning';
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 菜单数据数据获取函数，返回Primise
|
||||
*/
|
||||
loadSysMenuData (params) {
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.getMenuPermList(this, params).then(res => {
|
||||
this.allMenuList = res.data.map((item) => {
|
||||
return {...item};
|
||||
});
|
||||
resolve({
|
||||
dataList: treeDataTranslate(res.data, 'menuId'),
|
||||
totalCount: res.data.length
|
||||
});
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 菜单数据数据获取检测函数，返回true正常获取数据，返回false停止获取数据
|
||||
*/
|
||||
loadSysMenuVerify () {
|
||||
return true;
|
||||
},
|
||||
/**
|
||||
* 菜单数据当前页变化函数
|
||||
*/
|
||||
onSysMenuCurrentPageChange (newPage) {
|
||||
this.formSysMenu.SysMenu.impl.onCurrentPageChange(newPage);
|
||||
},
|
||||
/**
|
||||
* 菜单数据每页显示数量变化函数（跳转回第一页）
|
||||
*/
|
||||
onSysMenuPageSizeChange (newPage) {
|
||||
this.formSysMenu.SysMenu.impl.onPageSizeChange(newPage);
|
||||
},
|
||||
/**
|
||||
* 更新菜单管理
|
||||
*/
|
||||
refreshFormSysMenu (reloadData = false) {
|
||||
// 重新获取数据组件的数据
|
||||
if (reloadData) {
|
||||
this.formSysMenu.SysMenu.impl.refreshTable(true, 1);
|
||||
} else {
|
||||
this.formSysMenu.SysMenu.impl.refreshTable();
|
||||
}
|
||||
this.formSysMenu.isInit = true;
|
||||
},
|
||||
/**
|
||||
* 新建
|
||||
*/
|
||||
onCreateSysMenuClick () {
|
||||
let params = {
|
||||
menuList: this.allMenuList
|
||||
};
|
||||
this.$dialog.show('新建', formEditSysMenu, {
|
||||
area: ['800px']
|
||||
}, params).then(res => {
|
||||
this.refreshFormSysMenu();
|
||||
}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 编辑
|
||||
*/
|
||||
onEditSysMenuClick (row) {
|
||||
SystemController.viewMenu(this, {menuId: row.menuId}).then(res => {
|
||||
let params = {
|
||||
rowData: res.data,
|
||||
menuId: row.menuId,
|
||||
menuList: this.allMenuList
|
||||
};
|
||||
|
||||
this.$dialog.show('编辑', formEditSysMenu, {
|
||||
area: ['800px']
|
||||
}, params).then(res => {
|
||||
this.formSysMenu.SysMenu.impl.refreshTable();
|
||||
}).catch(e => {});
|
||||
}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 添加子菜单
|
||||
*/
|
||||
onAddChildSysMenuClick (row) {
|
||||
let params = {
|
||||
parentId: row.menuId,
|
||||
menuList: this.allMenuList
|
||||
};
|
||||
|
||||
this.$dialog.show('添加子菜单', formEditSysMenu, {
|
||||
area: ['800px']
|
||||
}, params).then(res => {
|
||||
this.formSysMenu.SysMenu.impl.refreshTable();
|
||||
}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 删除
|
||||
*/
|
||||
onDeleteClick (row) {
|
||||
let params = {
|
||||
menuId: row.menuId
|
||||
};
|
||||
|
||||
this.$confirm('是否删除此菜单项？').then(res => {
|
||||
SystemController.deleteMenu(this, params).then(res => {
|
||||
this.$message.success('删除成功');
|
||||
this.formSysMenu.SysMenu.impl.refreshTable();
|
||||
}).catch(e => {});
|
||||
}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 权限详情
|
||||
*/
|
||||
onShowPermList (row) {
|
||||
let params = {
|
||||
menuId: row.menuId
|
||||
};
|
||||
|
||||
this.$dialog.show('权限详情 - ' + row.menuName, formMenuPerm, {
|
||||
area: '1200px',
|
||||
offset: '30px'
|
||||
}, params).catch(e => {
|
||||
});
|
||||
},
|
||||
onResume () {
|
||||
this.refreshFormSysMenu();
|
||||
},
|
||||
initFormData () {
|
||||
},
|
||||
formInit () {
|
||||
this.initFormData();
|
||||
this.refreshFormSysMenu();
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.formInit();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,220 @@
|
||||
<template>
|
||||
<div style="position: relative;">
|
||||
<el-form ref="formSysOperationLog" :model="formSysOperationLog" label-width="100px" :size="defaultFormItemSize" label-position="right" @submit.native.prevent>
|
||||
<filter-box :item-width="350">
|
||||
<el-form-item label="操作人员" prop="formFilter.operatorName">
|
||||
<el-input class="filter-item" v-model="formSysOperationLog.formFilter.operatorName" :clearable="true" />
|
||||
</el-form-item>
|
||||
<el-form-item label="操作类型" prop="formFilter.operationType">
|
||||
<el-select class="filter-item" v-model="formSysOperationLog.formFilter.operationType" :clearable="true" placeholder=""
|
||||
filterable :loading="formSysOperationLog.operationType.impl.loading"
|
||||
@visible-change="formSysOperationLog.operationType.impl.onVisibleChange">
|
||||
<el-option v-for="item in formSysOperationLog.operationType.impl.dropdownList" :key="item.id" :value="item.id" :label="item.name" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="操作状态" prop="formFilter.success">
|
||||
<el-select class="filter-item" v-model="formSysOperationLog.formFilter.success" :clearable="true" filterable placeholder="">
|
||||
<el-option :value="1" label="成功" />
|
||||
<el-option :value="0" label="失败" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="Trace Id" prop="formFilter.traceId">
|
||||
<el-input class="filter-item" v-model="formSysOperationLog.formFilter.traceId" :clearable="true" />
|
||||
</el-form-item>
|
||||
<el-form-item label="调用时长" prop="formFilter.elapse">
|
||||
<input-number-range class="filter-item" v-model="formSysOperationLog.formFilter.elapse" :clearable="true" />
|
||||
</el-form-item>
|
||||
<el-form-item label="操作日期" prop="formFilter.operationTime">
|
||||
<date-range class="filter-item" v-model="formSysOperationLog.formFilter.operationTime" :clearable="true" :allowTypes="['day']" align="left"
|
||||
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
|
||||
format="yyyy-MM-dd" value-format="yyyy-MM-dd hh:mm:ss" />
|
||||
</el-form-item>
|
||||
<el-button slot="operator" type="default" :plain="true" :size="defaultFormItemSize" @click="onReset">重置</el-button>
|
||||
<el-button slot="operator" type="primary" :plain="true" :size="defaultFormItemSize" @click="refreshFormOperationType(true)">查询</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table ref="teacher" :data="formSysOperationLog.operationLog.impl.dataList" :size="defaultFormItemSize" @sort-change="formSysOperationLog.operationLog.impl.onSortChange"
|
||||
header-cell-class-name="table-header-gray">
|
||||
<el-table-column label="序号" header-align="center" align="center" type="index" width="55px" :index="formSysOperationLog.operationLog.impl.getTableIndex" />
|
||||
<el-table-column label="系统模块" prop="serviceName" width="200px" />
|
||||
<el-table-column label="操作类型" prop="operationType" width="150px">
|
||||
<template slot-scope="scope">
|
||||
<span>{{SysOperationType.getValue(scope.row.operationType)}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作员" prop="operatorName" width="150px" />
|
||||
<el-table-column label="调用地址" prop="requestUrl" min-width="300px"/>
|
||||
<el-table-column label="登录 IP" prop="requestIp" width="150px" />
|
||||
<el-table-column label="调用时长" prop="elapse" width="100px" />
|
||||
<el-table-column label="操作状态" prop="success" width="100px" >
|
||||
<template slot-scope="scope">
|
||||
<el-tag :size="defaultFormItemSize" v-if="scope.row.success != null"
|
||||
:type="scope.row.success ? 'success' : 'danger'">
|
||||
{{scope.row.success ? '成功' : '失败'}}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作时间" prop="operationTime" width="150px" />
|
||||
<el-table-column label="操作" fixed="right" width="150px" >
|
||||
<template slot-scope="scope">
|
||||
<el-button @click.stop="onFormViewSysOperationLogClick(scope.row)" type="text" :size="defaultFormItemSize">
|
||||
详情
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-row type="flex" justify="end" style="margin-top: 10px;">
|
||||
<el-pagination
|
||||
:total="formSysOperationLog.operationLog.impl.totalCount"
|
||||
:current-page="formSysOperationLog.operationLog.impl.currentPage"
|
||||
:page-size="formSysOperationLog.operationLog.impl.pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, prev, pager, next, sizes"
|
||||
@current-change="formSysOperationLog.operationLog.impl.onCurrentPageChange"
|
||||
@size-change="formSysOperationLog.operationLog.impl.onPageSizeChange">
|
||||
</el-pagination>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/* eslint-disable-next-line */
|
||||
import { DropdownWidget, TableWidget, UploadWidget, ChartWidget } from '@/utils/widget.js';
|
||||
/* eslint-disable-next-line */
|
||||
import { uploadMixin, statsDateRangeMixin, cachePageMixin } from '@/core/mixins';
|
||||
/* eslint-disable-next-line */
|
||||
import { SystemController } from '@/api';
|
||||
import formViewSysOperationLog from '@/views/upms/formViewSysOperationLog';
|
||||
|
||||
export default {
|
||||
name: 'formSysOperationLog',
|
||||
mixins: [uploadMixin, statsDateRangeMixin, cachePageMixin],
|
||||
data () {
|
||||
return {
|
||||
formSysOperationLog: {
|
||||
formFilter: {
|
||||
operatorName: undefined,
|
||||
operationType: undefined,
|
||||
success: undefined,
|
||||
traceId: undefined,
|
||||
elapse: undefined,
|
||||
operationTime: undefined
|
||||
},
|
||||
formFilterCopy: {
|
||||
operatorName: undefined,
|
||||
operationType: undefined,
|
||||
success: undefined,
|
||||
traceId: undefined,
|
||||
elapse: undefined,
|
||||
operationTime: undefined
|
||||
},
|
||||
operationType: {
|
||||
impl: new DropdownWidget(this.loadOperationTypeDropdownList)
|
||||
},
|
||||
operationLog: {
|
||||
impl: new TableWidget(this.loadOperationLogWidgetData, this.loadOperationLogVerify, true, false, 'logId', false)
|
||||
},
|
||||
isInit: false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onReset () {
|
||||
this.$refs.formSysOperationLog.resetFields();
|
||||
this.refreshFormOperationType(true);
|
||||
},
|
||||
/**
|
||||
* 操作日志数据数据获取函数，返回Promise
|
||||
*/
|
||||
loadOperationLogWidgetData (params) {
|
||||
if (params == null) params = {};
|
||||
params = {
|
||||
...params,
|
||||
sysOperationLogDtoFilter: {
|
||||
operatorName: this.formSysOperationLog.formFilterCopy.operatorName,
|
||||
operationType: this.formSysOperationLog.formFilterCopy.operationType,
|
||||
success: this.formSysOperationLog.formFilterCopy.success,
|
||||
traceId: this.formSysOperationLog.formFilterCopy.traceId,
|
||||
elapseMin: Array.isArray(this.formSysOperationLog.formFilterCopy.elapse) ? this.formSysOperationLog.formFilterCopy.elapse[0] : undefined,
|
||||
elapseMax: Array.isArray(this.formSysOperationLog.formFilterCopy.elapse) ? this.formSysOperationLog.formFilterCopy.elapse[1] : undefined,
|
||||
operationTimeStart: Array.isArray(this.formSysOperationLog.formFilterCopy.operationTime) ? this.formSysOperationLog.formFilterCopy.operationTime[0] : undefined,
|
||||
operationTimeEnd: Array.isArray(this.formSysOperationLog.formFilterCopy.operationTime) ? this.formSysOperationLog.formFilterCopy.operationTime[1] : undefined
|
||||
}
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.listSysOperationLog(this, params).then(res => {
|
||||
console.log(res);
|
||||
resolve({
|
||||
dataList: res.data.dataList,
|
||||
totalCount: res.data.totalCount
|
||||
});
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 操作日志数据获取检测函数，返回true正常获取数据，返回false停止获取数据
|
||||
*/
|
||||
loadOperationLogVerify () {
|
||||
this.formSysOperationLog.formFilterCopy = { ...this.formSysOperationLog.formFilter };
|
||||
return true;
|
||||
},
|
||||
/**
|
||||
* 操作类型下拉数据获取函数
|
||||
*/
|
||||
loadOperationTypeDropdownList () {
|
||||
return new Promise((resolve) => {
|
||||
resolve(this.SysOperationType.getList());
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 操作日志详情
|
||||
*/
|
||||
onFormViewSysOperationLogClick (row) {
|
||||
let params = {
|
||||
rowData: row
|
||||
};
|
||||
|
||||
this.$dialog.show('操作日志详情', formViewSysOperationLog, {
|
||||
area: ['800px', '85vh']
|
||||
}, params).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 更新操作日志
|
||||
*/
|
||||
refreshFormOperationType (reloadData = false) {
|
||||
if (reloadData) {
|
||||
this.formSysOperationLog.operationLog.impl.refreshTable(true, 1);
|
||||
} else {
|
||||
this.formSysOperationLog.operationLog.impl.refreshTable();
|
||||
}
|
||||
if (!this.formSysOperationLog.isInit) {
|
||||
// 初始化下拉数据
|
||||
}
|
||||
this.formSysOperationLog.isInit = true;
|
||||
},
|
||||
onResume () {
|
||||
this.refreshFormOperationType();
|
||||
},
|
||||
initFormData () {
|
||||
},
|
||||
formInit () {
|
||||
this.refreshFormOperationType();
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
// 初始化页面数据
|
||||
this.formInit();
|
||||
},
|
||||
watch: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,323 @@
|
||||
<template>
|
||||
<div class="tab-dialog-box" style="position: relative; margin-top: -15px;">
|
||||
<el-tabs v-model="activeFragmentId">
|
||||
<el-tab-pane label="用户查询" name="fragmentSysPermUser" style="width: 100%;">
|
||||
<el-form label-width="100px" :size="defaultFormItemSize" label-position="left" @submit.native.prevent>
|
||||
<filter-box :item-width="350">
|
||||
<el-form-item label="用户名">
|
||||
<el-input class="filter-item" v-model="fragmentSysPermUser.formFilter.loginName" clearable
|
||||
placeholder="" />
|
||||
</el-form-item>
|
||||
<el-button slot="operator" type="primary" :plain="true" :size="defaultFormItemSize" @click="refreshFragmentSysPermUser(true)">查询</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="fragmentSysPermUser.SysUser.impl.dataList" :size="defaultFormItemSize" :height="getTableHeight + 'px'"
|
||||
@sort-change="fragmentSysPermUser.SysUser.impl.onSortChange"
|
||||
header-cell-class-name="table-header-gray">
|
||||
<el-table-column label="序号" header-align="center" align="center" type="index" width="55px"
|
||||
:index="fragmentSysPermUser.SysUser.impl.getTableIndex" />
|
||||
<el-table-column label="用户名" prop="loginName" />
|
||||
<el-table-column label="用户昵称" prop="showName" />
|
||||
<el-table-column label="用户角色" prop="roleName" />
|
||||
<el-table-column label="权限字" prop="permCode" />
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="角色查询" name="fragmentSysPermRole" style="width: 100%;">
|
||||
<el-form label-width="100px" :size="defaultFormItemSize" label-position="left" @submit.native.prevent>
|
||||
<filter-box :item-width="350">
|
||||
<el-form-item label="角色名称">
|
||||
<el-input class="filter-item" v-model="fragmentSysPermRole.formFilter.roleName" clearable
|
||||
placeholder="" />
|
||||
</el-form-item>
|
||||
<el-button slot="operator" type="primary" :plain="true" :size="defaultFormItemSize" @click="refreshFragmentSysPermRole(true)">查询</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="fragmentSysPermRole.SysRole.impl.dataList" :size="defaultFormItemSize" :height="getTableHeight + 'px'"
|
||||
@sort-change="fragmentSysPermRole.SysRole.impl.onSortChange"
|
||||
header-cell-class-name="table-header-gray">
|
||||
<el-table-column label="序号" header-align="center" align="center" type="index" width="55px"
|
||||
:index="fragmentSysPermRole.SysRole.impl.getTableIndex" />
|
||||
<el-table-column label="菜单">
|
||||
<template slot-scope="scope">
|
||||
<span>{{getMenuPathString(getMenuPathById(scope.row.menuId)) || scope.row.menuName}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="菜单类型" prop="permCodeType">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :size="defaultFormItemSize" :type="getMenuType(scope.row)">{{SysMenuType.getValue(scope.row.menuType)}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="角色名称" prop="roleName" />
|
||||
<el-table-column label="权限字" prop="permCode" />
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="菜单查询" name="fragmentSysPermMenu" style="width: 100%;">
|
||||
<el-form label-width="100px" :size="defaultFormItemSize" label-position="left" @submit.native.prevent>
|
||||
<filter-box :item-width="350">
|
||||
<el-form-item label="菜单名称">
|
||||
<el-input class="filter-item" v-model="fragmentSysPermMenu.formFilter.menuName" clearable
|
||||
placeholder="" />
|
||||
</el-form-item>
|
||||
<el-button slot="operator" type="primary" :plain="true" :size="defaultFormItemSize" @click="refreshFragmentSysPermMenu(true)">查询</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="fragmentSysPermMenu.SysMenu.impl.dataList" :size="defaultFormItemSize" :height="getTableHeight + 'px'"
|
||||
@sort-change="fragmentSysPermMenu.SysMenu.impl.onSortChange"
|
||||
header-cell-class-name="table-header-gray">
|
||||
<el-table-column label="序号" header-align="center" align="center" type="index" width="55px"
|
||||
:index="fragmentSysPermMenu.SysMenu.impl.getTableIndex" />
|
||||
<el-table-column label="菜单">
|
||||
<template slot-scope="scope">
|
||||
<span>{{getMenuPathString(getMenuPathById(scope.row.menuId)) || scope.row.menuName}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="菜单类型" prop="menuType">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :size="defaultFormItemSize" :type="getMenuType(scope.row)">{{SysMenuType.getValue(scope.row.menuType)}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="权限字" prop="permCode" />
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
/* eslint-disable-next-line */
|
||||
import { DropdownWidget, TableWidget, UploadWidget, ChartWidget } from '@/utils/widget.js';
|
||||
import { SystemController } from '@/api';
|
||||
|
||||
export default {
|
||||
name: 'SysMenuPerm',
|
||||
props: {
|
||||
permId: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
activeFragmentId: 'fragmentSysPermUser',
|
||||
menuMap: new Map(),
|
||||
fragmentSysPermUser: {
|
||||
formFilter: {
|
||||
loginName: undefined
|
||||
},
|
||||
formFilterCopy: {
|
||||
loginName: undefined
|
||||
},
|
||||
SysUser: {
|
||||
impl: new TableWidget(this.loadSysUserData, this.loadSysUserVerify, false, false)
|
||||
}
|
||||
},
|
||||
fragmentSysPermRole: {
|
||||
formFilter: {
|
||||
roleName: undefined
|
||||
},
|
||||
formFilterCopy: {
|
||||
roleName: undefined
|
||||
},
|
||||
SysRole: {
|
||||
impl: new TableWidget(this.loadSysRoleData, this.loadSysRoleVerify, false, false)
|
||||
}
|
||||
},
|
||||
fragmentSysPermMenu: {
|
||||
formFilter: {
|
||||
menuName: undefined
|
||||
},
|
||||
formFilterCopy: {
|
||||
menuName: undefined
|
||||
},
|
||||
SysMenu: {
|
||||
impl: new TableWidget(this.loadPermSysMenuData, this.loadPermSysMenuVerify, false, false)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getMenuType (row) {
|
||||
if (row.menuType === 0) {
|
||||
return 'primary'
|
||||
} else if (row.menuType === 1) {
|
||||
return 'success';
|
||||
} else if (row.menuType === 2) {
|
||||
return 'danger';
|
||||
} else if (row.menuType === 3) {
|
||||
return 'warning';
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取所有菜单项
|
||||
*/
|
||||
loadSysMenuData () {
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.getMenuPermList(this, {}).then(res => {
|
||||
res.data.forEach(item => {
|
||||
this.menuMap.set(item.menuId, item);
|
||||
});
|
||||
resolve();
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
getMenuPathById (menuId) {
|
||||
if (menuId == null || menuId === '') return null;
|
||||
let menuPath = [];
|
||||
do {
|
||||
let menuItem = this.menuMap.get(menuId);
|
||||
if (menuItem != null) {
|
||||
menuPath.unshift(menuItem);
|
||||
menuId = menuItem.parentId;
|
||||
} else {
|
||||
menuId = null;
|
||||
}
|
||||
} while (menuId != null);
|
||||
|
||||
return menuPath;
|
||||
},
|
||||
getMenuPathString (menuPath) {
|
||||
if (Array.isArray(menuPath) && menuPath.length > 0) {
|
||||
return menuPath.map(item => item.menuName).join(' / ');
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取用户函数，返回Promise
|
||||
*/
|
||||
loadSysUserData (params) {
|
||||
params.permId = this.permId;
|
||||
params.loginName = this.fragmentSysPermUser.formFilterCopy.loginName;
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.listSysUserByPermIdWithDetail(this, params).then(res => {
|
||||
resolve({
|
||||
dataList: res.data,
|
||||
totalCount: res.data.length
|
||||
});
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 用户获取检测函数，返回true正常获取数据，返回false停止获取数据
|
||||
*/
|
||||
loadSysUserVerify () {
|
||||
if (this.fragmentSysPermUser.formFilter.loginName == null || this.fragmentSysPermUser.formFilter.loginName === '') {
|
||||
this.$message.error('请输入用户名！');
|
||||
return false;
|
||||
}
|
||||
this.fragmentSysPermUser.formFilterCopy.loginName = this.fragmentSysPermUser.formFilter.loginName;
|
||||
return true;
|
||||
},
|
||||
/**
|
||||
* 更新用户
|
||||
*/
|
||||
refreshFragmentSysPermUser (reloadData = false) {
|
||||
// 重新获取数据组件的数据
|
||||
if (reloadData) {
|
||||
this.fragmentSysPermUser.SysUser.impl.refreshTable(true, 1);
|
||||
} else {
|
||||
this.fragmentSysPermUser.SysUser.impl.refreshTable();
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取角色函数，返回Promise
|
||||
*/
|
||||
loadSysRoleData (params) {
|
||||
params.permId = this.permId;
|
||||
params.roleName = this.fragmentSysPermRole.formFilterCopy.roleName;
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.listSysRoleByPermIdWithDetail(this, params).then(res => {
|
||||
resolve({
|
||||
dataList: res.data,
|
||||
totalCount: res.data.length
|
||||
});
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 角色获取检测函数，返回true正常获取数据，返回false停止获取数据
|
||||
*/
|
||||
loadSysRoleVerify () {
|
||||
this.fragmentSysPermRole.formFilterCopy.roleName = this.fragmentSysPermRole.formFilter.roleName;
|
||||
return true;
|
||||
},
|
||||
/**
|
||||
* 更新角色
|
||||
*/
|
||||
refreshFragmentSysPermRole (reloadData = false) {
|
||||
// 重新获取数据组件的数据
|
||||
if (reloadData) {
|
||||
this.fragmentSysPermRole.SysRole.impl.refreshTable(true, 1);
|
||||
} else {
|
||||
this.fragmentSysPermRole.SysRole.impl.refreshTable();
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取菜单函数，返回Promise
|
||||
*/
|
||||
loadPermSysMenuData (params) {
|
||||
params.permId = this.permId;
|
||||
params.menuName = this.fragmentSysPermMenu.formFilterCopy.menuName;
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.listSysMenuByPermIdWithDetail(this, params).then(res => {
|
||||
resolve({
|
||||
dataList: res.data,
|
||||
totalCount: res.data.length
|
||||
});
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 角色获取检测函数，返回true正常获取数据，返回false停止获取数据
|
||||
*/
|
||||
loadPermSysMenuVerify () {
|
||||
this.fragmentSysPermMenu.formFilterCopy.menuName = this.fragmentSysPermMenu.formFilter.menuName;
|
||||
return true;
|
||||
},
|
||||
/**
|
||||
* 更新角色
|
||||
*/
|
||||
refreshFragmentSysPermMenu (reloadData = false) {
|
||||
// 重新获取数据组件的数据
|
||||
if (reloadData) {
|
||||
this.fragmentSysPermMenu.SysMenu.impl.refreshTable(true, 1);
|
||||
} else {
|
||||
this.fragmentSysPermMenu.SysMenu.impl.refreshTable();
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getTableHeight () {
|
||||
return (this.getMainContextHeight - 150);
|
||||
},
|
||||
...mapGetters(['getMainContextHeight'])
|
||||
},
|
||||
mounted () {
|
||||
this.loadSysMenuData().catch(e => {});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,412 @@
|
||||
<template>
|
||||
<el-container class="advance-query-form">
|
||||
<el-aside width="300px">
|
||||
<el-card class="base-card" shadow="never" :body-style="{ padding: '0px' }" style="border: none;">
|
||||
<div slot="header" class="base-card-header">
|
||||
<span style="font-size: 16px; font-weight: 500; color: #282828;">权限模块</span>
|
||||
<div class="base-card-operation">
|
||||
<el-button type="text"
|
||||
:disabled="!checkPermCodeExist('formSysPerm:fragmentSysPerm:addPermModule')"
|
||||
icon="el-icon-circle-plus-outline" @click="onCreatePermModuleClick()" />
|
||||
</div>
|
||||
</div>
|
||||
<el-scrollbar :style="{height: (getMainContextHeight - 56) + 'px'}" class="custom-scroll">
|
||||
<el-tree ref="moduleTree" :data="getModuleTreeData" :props="{label: 'moduleName'}"
|
||||
node-key="moduleId" @node-click="onModuleNodeClick" :default-expanded-keys="formPerm.expandedModule"
|
||||
:highlight-current="true" @node-expand="onModuleNodeExpand" @node-collapse="onModuleNodeCollapse">
|
||||
<div class="module-node-item" slot-scope="{ data }">
|
||||
<div class="module-node-menu" :class="{group: data.moduleType === SysPermModuleType.GROUP}" v-if="!data.isAll">
|
||||
<el-button type="text" :size="defaultFormItemSize" @click.stop="onEditpermModuleClick(data)" icon="el-icon-edit-outline"
|
||||
:disabled="!checkPermCodeExist('formSysPerm:fragmentSysPerm:updatePermModule')"></el-button>
|
||||
<el-button type="text" :size="defaultFormItemSize" v-show="data.moduleType === SysPermModuleType.GROUP"
|
||||
:disabled="!checkPermCodeExist('formSysPerm:fragmentSysPerm:addPermModule')" icon="el-icon-circle-plus-outline"
|
||||
@click.stop="onAddChildPermModuleClick(data)"></el-button>
|
||||
<el-button type="text" :size="defaultFormItemSize" @click.stop="onDeleteModuleClick(data)" icon="el-icon-delete"
|
||||
:disabled="!checkPermCodeExist('formSysPerm:fragmentSysPerm:deletePermModule')"></el-button>
|
||||
</div>
|
||||
<div class="module-node-text" :class="{group: data.moduleType === SysPermModuleType.GROUP}">
|
||||
<div class="text">{{ data.moduleName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tree>
|
||||
</el-scrollbar>
|
||||
</el-card>
|
||||
</el-aside>
|
||||
<el-main style="margin-left: 15px; background-color: white; padding: 20px;">
|
||||
<el-form ref="formPerm" :model="formPerm" label-width="75px" :size="defaultFormItemSize" label-position="right" @submit.native.prevent>
|
||||
<filter-box :item-width="350">
|
||||
<el-form-item label="关联URL" prop="formFilter.url">
|
||||
<el-input class="filter-item" placeholder="URL模糊搜索" v-model="formPerm.formFilter.url"
|
||||
:size="defaultFormItemSize" clearable />
|
||||
</el-form-item>
|
||||
<el-button slot="operator" type="default" :plain="true" :size="defaultFormItemSize" @click="onReset">重置</el-button>
|
||||
<el-button slot="operator" type="primary" :plain="true" :size="defaultFormItemSize" @click="refreshFormPerm(true)">查询</el-button>
|
||||
<el-button slot="operator" type="primary" :size="defaultFormItemSize" :disabled="!checkPermCodeExist('formSysPerm:fragmentSysPerm:addPerm')"
|
||||
@click="onCreatePermClick()">
|
||||
新建
|
||||
</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="formPerm.SysPerm.impl.dataList" :size="defaultFormItemSize" @sort-change="formPerm.SysPerm.impl.onSortChange"
|
||||
header-cell-class-name="table-header-gray" :height="(getMainContextHeight - 132) + 'px'">
|
||||
<el-table-column label="序号" header-align="center" align="center" type="index" width="50px" :index="formPerm.SysPerm.impl.getTableIndex" />
|
||||
<el-table-column label="权限名称" prop="permName" width="150px">
|
||||
</el-table-column>
|
||||
<el-table-column label="权限模块" prop="moduleIdDictMap.name" width="100px">
|
||||
</el-table-column>
|
||||
<el-table-column label="关联URL" prop="url" min-width="250px">
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" fixed="right" width="150px">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="onEditPermModuleClick(scope.row)" type="text" :size="defaultFormItemSize"
|
||||
:disabled="!checkPermCodeExist('formSysPerm:fragmentSysPerm:updatePerm')">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button @click="onDeleteClick(scope.row)" type="text" :size="defaultFormItemSize"
|
||||
:disabled="!checkPermCodeExist('formSysPerm:fragmentSysPerm:deletePerm')">
|
||||
删除
|
||||
</el-button>
|
||||
<el-button class="btn-table-primary" type="text" :size="defaultFormItemSize"
|
||||
v-if="checkPermCodeExist('formSysPerm:fragmentSysPerm:listSysPermPermDetail')"
|
||||
@click="onSysPermDetailClick(scope.row)">
|
||||
权限详情
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-col :span="24">
|
||||
<el-row type="flex" justify="end" style="margin-top: 10px;">
|
||||
<el-pagination
|
||||
:total="formPerm.SysPerm.impl.totalCount"
|
||||
:current-page="formPerm.SysPerm.impl.currentPage"
|
||||
:page-size="formPerm.SysPerm.impl.pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, prev, pager, next, sizes"
|
||||
@current-change="formPerm.SysPerm.impl.onCurrentPageChange"
|
||||
@size-change="formPerm.SysPerm.impl.onPageSizeChange">
|
||||
</el-pagination>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
/* eslint-disable-next-line */
|
||||
import { DropdownWidget, TableWidget, UploadWidget, ChartWidget } from '@/utils/widget.js';
|
||||
/* eslint-disable-next-line */
|
||||
import { uploadMixin, statsDateRangeMixin, cachePageMixin, cachedPageChildMixin } from '@/core/mixins';
|
||||
/* eslint-disable-next-line */
|
||||
import { SystemController, DictionaryController } from '@/api';
|
||||
import formEditSysPerm from '../formEditSysPerm';
|
||||
import formEditSysPermModule from '../formEditSysPermModule';
|
||||
import FormSysPermDetail from './formSysPermDetail.vue';
|
||||
|
||||
export default {
|
||||
name: 'formSysPerm',
|
||||
props: {
|
||||
},
|
||||
mixins: [uploadMixin, statsDateRangeMixin, cachePageMixin],
|
||||
data () {
|
||||
return {
|
||||
formPerm: {
|
||||
formFilter: {
|
||||
permModuleId: undefined,
|
||||
url: undefined
|
||||
},
|
||||
formFilterCopy: {
|
||||
permModuleId: undefined,
|
||||
url: undefined
|
||||
},
|
||||
permModuleId: {
|
||||
impl: new DropdownWidget(this.loadPermModuleIdDropdownList, true, 'moduleId', 'parentId')
|
||||
},
|
||||
SysPerm: {
|
||||
impl: new TableWidget(this.loadSysPermData, this.loadSysPermVerify, true)
|
||||
},
|
||||
permModuleList: [],
|
||||
expandedModule: [],
|
||||
isInit: false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onReset () {
|
||||
this.$refs.formPerm.resetFields();
|
||||
this.refreshFormPerm(true);
|
||||
},
|
||||
/**
|
||||
* 权限数据获取函数，返回Primise
|
||||
*/
|
||||
loadSysPermData (params) {
|
||||
params.sysPermDtoFilter = {
|
||||
url: this.formPerm.formFilterCopy.url === '' ? undefined : this.formPerm.formFilterCopy.url,
|
||||
moduleId: this.formPerm.formFilterCopy.permModuleId === '' ? undefined : this.formPerm.formFilterCopy.permModuleId
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.getPermList(this, params).then(res => {
|
||||
resolve({
|
||||
dataList: res.data.dataList,
|
||||
totalCount: res.data.totalCount
|
||||
});
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 权限数据获取检测函数，返回true正常获取数据，返回false停止获取数据
|
||||
*/
|
||||
loadSysPermVerify () {
|
||||
this.formPerm.formFilterCopy.url = this.formPerm.formFilter.url;
|
||||
this.formPerm.formFilterCopy.permModuleId = this.formPerm.formFilter.permModuleId;
|
||||
return true;
|
||||
},
|
||||
/**
|
||||
* 所属权限模块下拉数据获取函数
|
||||
*/
|
||||
loadPermModuleIdDropdownList () {
|
||||
return new Promise((resolve, reject) => {
|
||||
let params = {};
|
||||
SystemController.getPermGroupList(this, params).then(res => {
|
||||
this.formPerm.permModuleList = res.data;
|
||||
resolve(res.data);
|
||||
}).catch(e => {
|
||||
reject();
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 所属权限模块下拉框显隐
|
||||
*/
|
||||
onPermModuleIdVisibleChange (show) {
|
||||
this.formPerm.permModuleId.impl.onVisibleChange(show).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 所属权限模块选中值改变
|
||||
*/
|
||||
onPermModuleIdValueChange (value) {
|
||||
},
|
||||
onSysPermDetailClick (row) {
|
||||
this.$dialog.show('权限详情', FormSysPermDetail, {
|
||||
area: '1200px',
|
||||
offset: '30px'
|
||||
}, {
|
||||
permId: row.permId
|
||||
}).then(res => {}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 更新权限管理
|
||||
*/
|
||||
refreshFormPerm (reloadData = false) {
|
||||
// 重新获取数据组件的数据
|
||||
if (reloadData) {
|
||||
this.formPerm.SysPerm.impl.refreshTable(true, 1);
|
||||
} else {
|
||||
this.formPerm.SysPerm.impl.refreshTable();
|
||||
}
|
||||
this.formPerm.permModuleId.impl.onVisibleChange(true).catch(e => {});
|
||||
this.formPerm.isInit = true;
|
||||
},
|
||||
/**
|
||||
* 新建
|
||||
*/
|
||||
onCreatePermClick () {
|
||||
let params = {
|
||||
currentPermGroupId: this.formPerm.formFilterCopy.permModuleId,
|
||||
permModuleList: this.formPerm.permModuleId.impl.dropdownList
|
||||
};
|
||||
|
||||
this.$dialog.show('新建', formEditSysPerm, {
|
||||
area: ['600px']
|
||||
}, params).then(res => {
|
||||
this.refreshFormPerm();
|
||||
}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 编辑
|
||||
*/
|
||||
onEditPermModuleClick (row) {
|
||||
let params = {
|
||||
moduleId: row.moduleId,
|
||||
permId: row.permId,
|
||||
rowData: row,
|
||||
permModuleList: this.formPerm.permModuleId.impl.dropdownList
|
||||
};
|
||||
|
||||
this.$dialog.show('编辑', formEditSysPerm, {
|
||||
area: ['600px']
|
||||
}, params).then(res => {
|
||||
this.formPerm.SysPerm.impl.refreshTable();
|
||||
}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 删除
|
||||
*/
|
||||
onDeleteClick (row) {
|
||||
let params = {
|
||||
permId: row.permId
|
||||
};
|
||||
|
||||
this.$confirm('是否删除此权限？').then(res => {
|
||||
SystemController.deletePerm(this, params).then(res => {
|
||||
this.$message.success('删除成功');
|
||||
this.formPerm.SysPerm.impl.refreshTable();
|
||||
}).catch(e => {});
|
||||
}).catch(e => {});
|
||||
},
|
||||
onResume () {
|
||||
this.refreshFormPerm();
|
||||
},
|
||||
initFormData () {
|
||||
},
|
||||
formInit () {
|
||||
this.initFormData();
|
||||
this.refreshFormPerm();
|
||||
},
|
||||
onModuleNodeClick (data) {
|
||||
if (data.moduleType === this.SysPermModuleType.CONTROLLER) {
|
||||
this.formPerm.formFilter.permModuleId = data.moduleId;
|
||||
this.refreshFormPerm(true);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 新建模块
|
||||
*/
|
||||
onCreatePermModuleClick () {
|
||||
let params = {
|
||||
moduleType: this.SysPermModuleType.GROUP,
|
||||
moduleList: this.formPerm.permModuleList
|
||||
};
|
||||
|
||||
this.$dialog.show('新建模块', formEditSysPermModule, {
|
||||
area: ['600px']
|
||||
}, params).then(res => {
|
||||
this.formPerm.permModuleId.impl.reloadDropdownData().catch(e => {});
|
||||
}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 编辑模块
|
||||
*/
|
||||
onEditpermModuleClick (row) {
|
||||
let params = {
|
||||
moduleId: row.moduleId,
|
||||
moduleType: row.moduleType,
|
||||
rowData: row,
|
||||
moduleList: this.formPerm.permModuleList
|
||||
};
|
||||
|
||||
this.$dialog.show('编辑模块', formEditSysPermModule, {
|
||||
area: ['600px']
|
||||
}, params).then(res => {
|
||||
this.formPerm.permModuleId.impl.reloadDropdownData().catch(e => {});
|
||||
}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 删除
|
||||
*/
|
||||
onDeleteModuleClick (row) {
|
||||
let params = {
|
||||
moduleId: row.moduleId
|
||||
};
|
||||
|
||||
this.$confirm('是否删除此模块？').then(res => {
|
||||
SystemController.deletePermGroup(this, params).then(res => {
|
||||
this.$message.success('删除成功');
|
||||
this.formPerm.permModuleId.impl.reloadDropdownData(true).catch(e => {});
|
||||
}).catch(e => {});
|
||||
}).catch(e => {});
|
||||
},
|
||||
onAddChildPermModuleClick (row) {
|
||||
let params = {
|
||||
parentId: row.moduleId,
|
||||
moduleType: this.SysPermModuleType.CONTROLLER,
|
||||
moduleList: this.formPerm.permModuleList
|
||||
};
|
||||
|
||||
this.$dialog.show('添加子模块', formEditSysPermModule, {
|
||||
area: ['600px']
|
||||
}, params).then(res => {
|
||||
this.formPerm.permModuleId.impl.reloadDropdownData(true).catch(e => {});
|
||||
}).catch(e => {});
|
||||
},
|
||||
onModuleNodeCollapse (data, node) {
|
||||
let pos = this.formPerm.expandedModule.indexOf(data.moduleId);
|
||||
if (pos !== -1) {
|
||||
this.formPerm.expandedModule.splice(pos, 1);
|
||||
}
|
||||
},
|
||||
onModuleNodeExpand (data, node) {
|
||||
let pos = this.formPerm.expandedModule.indexOf(data.moduleId);
|
||||
if (pos === -1) {
|
||||
this.formPerm.expandedModule.push(data.moduleId);
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getModuleTreeData () {
|
||||
let tempList = [{
|
||||
moduleId: undefined,
|
||||
moduleName: '全部',
|
||||
moduleType: this.SysPermModuleType.CONTROLLER,
|
||||
isAll: true
|
||||
}];
|
||||
return tempList.concat(this.formPerm.permModuleId.impl.dropdownList);
|
||||
},
|
||||
...mapGetters(['getMainContextHeight'])
|
||||
},
|
||||
created () {
|
||||
this.formInit();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
>>> .el-tree-node__content {
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
>>> .el-tree-node__content .is-leaf {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.module-node-item {
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
.module-node-menu {
|
||||
float: right;
|
||||
width: 56px;
|
||||
}
|
||||
|
||||
.module-node-menu.group {
|
||||
width: 84px;
|
||||
}
|
||||
|
||||
.module-node-text {
|
||||
width: 100%;
|
||||
margin-right: 56px;
|
||||
}
|
||||
|
||||
.module-node-text.group {
|
||||
margin-right: 84px;
|
||||
}
|
||||
|
||||
.el-tree-node__content .is-leaf + .module-node-item .module-node-text {
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.module-node-text .text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,253 @@
|
||||
<template>
|
||||
<div class="tab-dialog-box" style="position: relative; margin-top: -15px;">
|
||||
<el-tabs v-model="activeFragmentId">
|
||||
<el-tab-pane label="用户查询" name="fragmentSysPermCodeUser" style="width: 100%;">
|
||||
<el-form label-width="100px" :size="defaultFormItemSize" label-position="left" @submit.native.prevent>
|
||||
<filter-box :item-width="350">
|
||||
<el-form-item label="用户名">
|
||||
<el-input class="filter-item" v-model="fragmentSysPermCodeUser.formFilter.loginName" clearable
|
||||
placeholder="" />
|
||||
</el-form-item>
|
||||
<el-button slot="operator" type="primary" :plain="true" :size="defaultFormItemSize" @click="refreshFragmentSysPermCodeUser(true)">查询</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="fragmentSysPermCodeUser.SysUser.impl.dataList" :size="defaultFormItemSize" :height="getTableHeight + 'px'"
|
||||
@sort-change="fragmentSysPermCodeUser.SysUser.impl.onSortChange"
|
||||
header-cell-class-name="table-header-gray">
|
||||
<el-table-column label="序号" header-align="center" align="center" type="index" width="55px"
|
||||
:index="fragmentSysPermCodeUser.SysUser.impl.getTableIndex" />
|
||||
<el-table-column label="用户名" prop="loginName" />
|
||||
<el-table-column label="用户昵称" prop="showName" />
|
||||
<el-table-column label="用户角色" prop="roleName" />
|
||||
<el-table-column label="菜单">
|
||||
<template slot-scope="scope">
|
||||
<span>{{getMenuPathString(getMenuPathById(scope.row.menuId)) || scope.row.menuName}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="菜单类型" prop="permCodeType">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :size="defaultFormItemSize" :type="getMenuType(scope.row)">{{SysMenuType.getValue(scope.row.menuType)}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="角色查询" name="fragmentSysPermCodeRole" style="width: 100%;">
|
||||
<el-form label-width="100px" :size="defaultFormItemSize" label-position="left" @submit.native.prevent>
|
||||
<filter-box :item-width="350">
|
||||
<el-form-item label="角色名称">
|
||||
<el-input class="filter-item" v-model="fragmentSysPermCodeRole.formFilter.roleName" clearable
|
||||
placeholder="" />
|
||||
</el-form-item>
|
||||
<el-button slot="operator" type="primary" :plain="true" :size="defaultFormItemSize" @click="refreshFragmentSysPermCodeRole(true)">查询</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="fragmentSysPermCodeRole.SysRole.impl.dataList" :size="defaultFormItemSize" :height="getTableHeight + 'px'"
|
||||
@sort-change="fragmentSysPermCodeRole.SysRole.impl.onSortChange"
|
||||
header-cell-class-name="table-header-gray">
|
||||
<el-table-column label="序号" header-align="center" align="center" type="index" width="55px"
|
||||
:index="fragmentSysPermCodeRole.SysRole.impl.getTableIndex" />
|
||||
<el-table-column label="菜单">
|
||||
<template slot-scope="scope">
|
||||
<span>{{getMenuPathString(getMenuPathById(scope.row.menuId)) || scope.row.menuName}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="菜单类型" prop="permCodeType">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :size="defaultFormItemSize" :type="getMenuType(scope.row)">{{SysMenuType.getValue(scope.row.menuType)}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="角色名称" prop="roleName" />
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
/* eslint-disable-next-line */
|
||||
import { DropdownWidget, TableWidget, UploadWidget, ChartWidget } from '@/utils/widget.js';
|
||||
import { SystemController } from '@/api';
|
||||
|
||||
export default {
|
||||
name: 'SysMenuPerm',
|
||||
props: {
|
||||
permCodeId: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
activeFragmentId: 'fragmentSysPermCodeUser',
|
||||
menuMap: new Map(),
|
||||
fragmentSysPermCodeUser: {
|
||||
formFilter: {
|
||||
loginName: undefined
|
||||
},
|
||||
formFilterCopy: {
|
||||
loginName: undefined
|
||||
},
|
||||
SysUser: {
|
||||
impl: new TableWidget(this.loadSysUserData, this.loadSysUserVerify, false, false)
|
||||
}
|
||||
},
|
||||
fragmentSysPermCodeRole: {
|
||||
formFilter: {
|
||||
roleName: undefined
|
||||
},
|
||||
formFilterCopy: {
|
||||
roleName: undefined
|
||||
},
|
||||
SysRole: {
|
||||
impl: new TableWidget(this.loadSysRoleData, this.loadSysRoleVerify, false, false)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getMenuType (row) {
|
||||
if (row.menuType === 0) {
|
||||
return 'primary'
|
||||
} else if (row.menuType === 1) {
|
||||
return 'success';
|
||||
} else if (row.menuType === 2) {
|
||||
return 'danger';
|
||||
} else if (row.menuType === 3) {
|
||||
return 'warning';
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取所有菜单项
|
||||
*/
|
||||
loadSysMenuData () {
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.getMenuPermList(this, {}).then(res => {
|
||||
res.data.forEach(item => {
|
||||
this.menuMap.set(item.menuId, item);
|
||||
});
|
||||
resolve();
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
getMenuPathById (menuId) {
|
||||
if (menuId == null || menuId === '') return null;
|
||||
let menuPath = [];
|
||||
do {
|
||||
let menuItem = this.menuMap.get(menuId);
|
||||
if (menuItem != null) {
|
||||
menuPath.unshift(menuItem);
|
||||
menuId = menuItem.parentId;
|
||||
} else {
|
||||
menuId = null;
|
||||
}
|
||||
} while (menuId != null);
|
||||
|
||||
return menuPath;
|
||||
},
|
||||
getMenuPathString (menuPath) {
|
||||
if (Array.isArray(menuPath) && menuPath.length > 0) {
|
||||
return menuPath.map(item => item.menuName).join(' / ');
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取用户函数，返回Promise
|
||||
*/
|
||||
loadSysUserData (params) {
|
||||
params.permCodeId = this.permCodeId;
|
||||
params.loginName = this.fragmentSysPermCodeUser.formFilterCopy.loginName;
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.listSysUserByPermCodeIdWithDetail(this, params).then(res => {
|
||||
resolve({
|
||||
dataList: res.data,
|
||||
totalCount: res.data.length
|
||||
});
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 用户获取检测函数，返回true正常获取数据，返回false停止获取数据
|
||||
*/
|
||||
loadSysUserVerify () {
|
||||
if (this.fragmentSysPermCodeUser.formFilter.loginName == null || this.fragmentSysPermCodeUser.formFilter.loginName === '') {
|
||||
this.$message.error('请输入用户名！');
|
||||
return false;
|
||||
}
|
||||
this.fragmentSysPermCodeUser.formFilterCopy.loginName = this.fragmentSysPermCodeUser.formFilter.loginName;
|
||||
return true;
|
||||
},
|
||||
/**
|
||||
* 更新用户
|
||||
*/
|
||||
refreshFragmentSysPermCodeUser (reloadData = false) {
|
||||
// 重新获取数据组件的数据
|
||||
if (reloadData) {
|
||||
this.fragmentSysPermCodeUser.SysUser.impl.refreshTable(true, 1);
|
||||
} else {
|
||||
this.fragmentSysPermCodeUser.SysUser.impl.refreshTable();
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取角色函数，返回Promise
|
||||
*/
|
||||
loadSysRoleData (params) {
|
||||
params.permCodeId = this.permCodeId;
|
||||
params.roleName = this.fragmentSysPermCodeRole.formFilterCopy.roleName;
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.listSysRoleByPermCodeIdWithDetail(this, params).then(res => {
|
||||
resolve({
|
||||
dataList: res.data,
|
||||
totalCount: res.data.length
|
||||
});
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 角色获取检测函数，返回true正常获取数据，返回false停止获取数据
|
||||
*/
|
||||
loadSysRoleVerify () {
|
||||
this.fragmentSysPermCodeRole.formFilterCopy.roleName = this.fragmentSysPermCodeRole.formFilter.roleName;
|
||||
return true;
|
||||
},
|
||||
/**
|
||||
* 更新角色
|
||||
*/
|
||||
refreshFragmentSysPermCodeRole (reloadData = false) {
|
||||
// 重新获取数据组件的数据
|
||||
if (reloadData) {
|
||||
this.fragmentSysPermCodeRole.SysRole.impl.refreshTable(true, 1);
|
||||
} else {
|
||||
this.fragmentSysPermCodeRole.SysRole.impl.refreshTable();
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getTableHeight () {
|
||||
return (this.getMainContextHeight - 150);
|
||||
},
|
||||
...mapGetters(['getMainContextHeight'])
|
||||
},
|
||||
mounted () {
|
||||
this.loadSysMenuData().catch(e => {});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,275 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="formPermCode" :model="formPermCode" label-width="100px" :size="defaultFormItemSize" label-position="right" @submit.native.prevent>
|
||||
<filter-box :item-width="350">
|
||||
<el-form-item label="权限字名称" prop="formFilter.showName">
|
||||
<el-input class="filter-item" v-model="formPermCode.formFilter.showName"
|
||||
:clearable="true" placeholder="权限字名称" />
|
||||
</el-form-item>
|
||||
<el-button slot="operator" type="default" :plain="true" :size="defaultFormItemSize" @click="onReset">重置</el-button>
|
||||
<el-button slot="operator" type="primary" :size="defaultFormItemSize" :plain="true" @click="refreshFormPermCode(true)">
|
||||
查询
|
||||
</el-button>
|
||||
<el-button slot="operator" type="primary" :size="defaultFormItemSize" :disabled="!checkPermCodeExist('formSysPermCode:fragmentSysPermCode:add')"
|
||||
@click="onCreatePermCodeClick()">
|
||||
新建
|
||||
</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="getPermCodeList" :size="defaultFormItemSize" @sort-change="formPermCode.SysPermCode.impl.onSortChange"
|
||||
row-key="permCodeId" header-cell-class-name="table-header-gray">
|
||||
<el-table-column label="权限字名称" prop="showName" width="250px">
|
||||
</el-table-column>
|
||||
<el-table-column label="权限字类型" prop="permCodeType" width="150px">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :size="defaultFormItemSize" :type="getPermCodeType(scope.row.permCodeType)">{{SysPermCodeType.getValue(scope.row.permCodeType)}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="显示顺序" prop="showOrder" width="100px">
|
||||
</el-table-column>
|
||||
<el-table-column label="权限字标识" prop="permCode" min-width="200px">
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" fixed="right" width="200px">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="onEditPermCodeClick(scope.row)" type="text" :size="defaultFormItemSize"
|
||||
:disabled="!checkPermCodeExist('formSysPermCode:fragmentSysPermCode:update')">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button @click="onAddChildPermCodeClick(scope.row)" type="text" :size="defaultFormItemSize"
|
||||
:disabled="scope.row.permCodeType === 2 || !checkPermCodeExist('formSysPermCode:fragmentSysPermCode:add')">
|
||||
添加
|
||||
</el-button>
|
||||
<el-button @click="onDeleteClick(scope.row)" type="text" :size="defaultFormItemSize"
|
||||
:disabled="!checkPermCodeExist('formSysPermCode:fragmentSysPermCode:delete')">
|
||||
删除
|
||||
</el-button>
|
||||
<el-button class="btn-table-primary" type="text" :size="defaultFormItemSize"
|
||||
v-if="checkPermCodeExist('formSysPermCode:fragmentSysPermCode:listSysPermCodePermDetail')"
|
||||
@click="onSysPermCodeDetailClick(scope.row)">
|
||||
权限详情
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { treeDataTranslate } from '@/utils';
|
||||
/* eslint-disable-next-line */
|
||||
import { DropdownWidget, TableWidget, UploadWidget, ChartWidget } from '@/utils/widget.js';
|
||||
/* eslint-disable-next-line */
|
||||
import { uploadMixin, statsDateRangeMixin, cachePageMixin, cachedPageChildMixin } from '@/core/mixins';
|
||||
/* eslint-disable-next-line */
|
||||
import { SystemController, DictionaryController } from '@/api';
|
||||
import formEditSysPermCode from '@/views/upms/formEditSysPermCode';
|
||||
import FormSysPermCodeDetail from '@/views/upms/formSysPermCode/formSysPermCodeDetail.vue';
|
||||
|
||||
export default {
|
||||
name: 'formSysPermCode',
|
||||
props: {
|
||||
},
|
||||
mixins: [uploadMixin, statsDateRangeMixin, cachePageMixin],
|
||||
data () {
|
||||
return {
|
||||
formPermCode: {
|
||||
formFilter: {
|
||||
showName: undefined
|
||||
},
|
||||
formFilterCopy: {
|
||||
showName: undefined
|
||||
},
|
||||
SysPermCode: {
|
||||
impl: new TableWidget(this.loadSysPermCodeData, this.loadSysPermCodeVerify, false, false, 'showOrder', 1),
|
||||
totalCount: 0,
|
||||
sortInfo: {
|
||||
orderField: 'showOrder',
|
||||
asc: 1
|
||||
}
|
||||
},
|
||||
isInit: false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onReset () {
|
||||
this.$refs.formPermCode.resetFields();
|
||||
this.refreshFormPermCode(true);
|
||||
},
|
||||
getPermCodeType (permCodeType) {
|
||||
switch (permCodeType) {
|
||||
case this.SysPermCodeType.FORM: return 'primary';
|
||||
case this.SysPermCodeType.FRAGMENT: return 'warning';
|
||||
case this.SysPermCodeType.OPERATION: return 'success';
|
||||
default: return 'info';
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 权限资源数据获取函数，返回Primise
|
||||
*/
|
||||
loadSysPermCodeData (params) {
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.getPermCodeList(this, params).then(res => {
|
||||
resolve({
|
||||
dataList: treeDataTranslate(res.data, 'permCodeId'),
|
||||
totalCount: res.data.totalCount
|
||||
});
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 权限资源数据获取检测函数，返回true正常获取数据，返回false停止获取数据
|
||||
*/
|
||||
loadSysPermCodeVerify () {
|
||||
this.formPermCode.formFilterCopy.showName = this.formPermCode.formFilter.showName;
|
||||
return true;
|
||||
},
|
||||
/**
|
||||
* 权限资源当前页变化函数
|
||||
*/
|
||||
onSysPermCodeCurrentPageChange (newPage) {
|
||||
this.formPermCode.SysPermCode.impl.onCurrentPageChange(newPage);
|
||||
},
|
||||
/**
|
||||
* 权限资源每页显示数量变化函数（跳转回第一页）
|
||||
*/
|
||||
onSysPermCodePageSizeChange (newPage) {
|
||||
this.formPermCode.SysPermCode.impl.onPageSizeChange(newPage);
|
||||
},
|
||||
/**
|
||||
* 权限资源列排序变化函数
|
||||
*/
|
||||
onSysPermCodeSortChange ({ column, prop, order }) {
|
||||
this.formPermCode.SysPermCode.sortInfo.orderField = prop;
|
||||
this.formPermCode.SysPermCode.sortInfo.asc = (order === 'ascending');
|
||||
this.formPermCode.SysPermCode.impl.refreshTable();
|
||||
},
|
||||
onSysPermCodeDetailClick (row) {
|
||||
this.$dialog.show('权限详情', FormSysPermCodeDetail, {
|
||||
area: '1200px',
|
||||
offset: '30px'
|
||||
}, {
|
||||
permCodeId: row.permCodeId
|
||||
}).then(res => {}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 更新权限资源管理
|
||||
*/
|
||||
refreshFormPermCode (reloadData = false) {
|
||||
// 重新获取数据组件的数据
|
||||
if (reloadData) {
|
||||
this.formPermCode.SysPermCode.impl.refreshTable(true, 1);
|
||||
} else {
|
||||
this.formPermCode.SysPermCode.impl.refreshTable();
|
||||
}
|
||||
this.formPermCode.isInit = true;
|
||||
},
|
||||
/**
|
||||
* 添加
|
||||
*/
|
||||
onCreatePermCodeClick () {
|
||||
let params = {
|
||||
permCodeTree: this.formPermCode.SysPermCode.impl.dataList
|
||||
};
|
||||
|
||||
this.$dialog.show('添加', formEditSysPermCode, {
|
||||
area: ['800px', '583px']
|
||||
}, params).then(res => {
|
||||
this.refreshFormPermCode();
|
||||
}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 编辑
|
||||
*/
|
||||
onEditPermCodeClick (row) {
|
||||
SystemController.viewPermCode(this, {
|
||||
permCodeId: row.permCodeId
|
||||
}).then(res => {
|
||||
let params = {
|
||||
permCodeTree: this.formPermCode.SysPermCode.impl.dataList,
|
||||
permCodeType: row.permCodeType,
|
||||
rowData: res.data
|
||||
};
|
||||
return this.$dialog.show('编辑', formEditSysPermCode, {
|
||||
area: ['800px', '583px']
|
||||
}, params).then(res => {
|
||||
this.formPermCode.SysPermCode.impl.refreshTable();
|
||||
}).catch(e => {});
|
||||
}).then(res => {
|
||||
this.loadPermCodeData().catch(e => {});
|
||||
}).catch(e => {
|
||||
//
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 添加权限字
|
||||
*/
|
||||
onAddChildPermCodeClick (row) {
|
||||
let params = {
|
||||
permCodeTree: this.formPermCode.SysPermCode.impl.dataList,
|
||||
permCodeType: row.permCodeType + 1,
|
||||
rowData: {
|
||||
parentId: row.permCodeId
|
||||
}
|
||||
};
|
||||
|
||||
this.$dialog.show('添加权限字', formEditSysPermCode, {
|
||||
area: ['800px', '583px']
|
||||
}, params).then(res => {
|
||||
this.formPermCode.SysPermCode.impl.refreshTable();
|
||||
}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 删除
|
||||
*/
|
||||
onDeleteClick (row) {
|
||||
let params = {
|
||||
permCodeId: row.permCodeId
|
||||
};
|
||||
|
||||
this.$confirm('是否删除此权限字？').then(res => {
|
||||
SystemController.deletePermCode(this, params).then(res => {
|
||||
this.$message.success('删除成功');
|
||||
this.formPermCode.SysPermCode.impl.refreshTable();
|
||||
}).catch(e => {});
|
||||
}).catch(e => {});
|
||||
},
|
||||
onResume () {
|
||||
this.refreshFormPermCode();
|
||||
},
|
||||
initFormData () {
|
||||
},
|
||||
formInit () {
|
||||
this.initFormData();
|
||||
this.refreshFormPermCode();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getPermCodeList () {
|
||||
try {
|
||||
if (Array.isArray(this.formPermCode.SysPermCode.impl.dataList)) {
|
||||
let temp = this.formPermCode.SysPermCode.impl.dataList.filter((item) => {
|
||||
if (this.formPermCode.formFilterCopy.showName == null || this.formPermCode.formFilterCopy.showName === '') return true;
|
||||
return (item.showName.indexOf(this.formPermCode.formFilterCopy.showName) !== -1);
|
||||
});
|
||||
return temp;
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
return [];
|
||||
},
|
||||
...mapGetters(['getMainContextHeight'])
|
||||
},
|
||||
created () {
|
||||
this.formInit();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,264 @@
|
||||
<template>
|
||||
<div class="tab-dialog-box" style="position: relative; margin-top: -15px;">
|
||||
<el-tabs v-model="activeFragmentId">
|
||||
<el-tab-pane ref="fragmentSysRolePerm" :model="fragmentSysRolePerm" label="权限资源" name="fragmentSysRolePerm" style="width: 100%;">
|
||||
<el-form label-width="100px" :size="defaultFormItemSize" label-position="left" @submit.native.prevent>
|
||||
<filter-box :item-width="350">
|
||||
<el-form-item label="URL">
|
||||
<el-input class="filter-item" v-model="fragmentSysRolePerm.formFilter.url" clearable
|
||||
placeholder="" />
|
||||
</el-form-item>
|
||||
<el-button slot="operator" type="default" :plain="true" :size="defaultFormItemSize" @click="onResetPerm">重置</el-button>
|
||||
<el-button slot="operator" type="primary" :plain="true" :size="defaultFormItemSize" @click="refreshfragmentSysRolePerm(true)">查询</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="fragmentSysRolePerm.SysRolePerm.impl.dataList" :size="defaultFormItemSize" :height="getTableHeight + 'px'"
|
||||
@sort-change="fragmentSysRolePerm.SysRolePerm.impl.onSortChange"
|
||||
header-cell-class-name="table-header-gray">
|
||||
<el-table-column label="序号" header-align="center" align="center" type="index" width="55px"
|
||||
:index="fragmentSysRolePerm.SysRolePerm.impl.getTableIndex" />
|
||||
<el-table-column label="菜单">
|
||||
<template slot-scope="scope">
|
||||
<span>{{getMenuPathString(getMenuPathById(scope.row.menuId)) || scope.row.menuName}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="所属权限字" prop="permCode" />
|
||||
<el-table-column label="URL" prop="url" />
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="权限字" name="fragmentSysRolePermCode" style="width: 100%;">
|
||||
<el-form ref="fragmentSysRolePermCode" :model="fragmentSysRolePermCode" label-width="100px" :size="defaultFormItemSize" label-position="left" @submit.native.prevent>
|
||||
<filter-box :item-width="350">
|
||||
<el-form-item label="权限字" prop="formFilter.permCode">
|
||||
<el-input class="filter-item" v-model="fragmentSysRolePermCode.formFilter.permCode" clearable
|
||||
placeholder="" />
|
||||
</el-form-item>
|
||||
<el-button slot="operator" type="default" :plain="true" :size="defaultFormItemSize" @click="onResetPermCode">重置</el-button>
|
||||
<el-button slot="operator" type="primary" :plain="true" :size="defaultFormItemSize" @click="refreshfragmentSysRolePermCode(true)">查询</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="fragmentSysRolePermCode.SysRolePermCode.impl.dataList" :size="defaultFormItemSize" :height="getTableHeight + 'px'"
|
||||
@sort-change="fragmentSysRolePermCode.SysRolePermCode.impl.onSortChange"
|
||||
header-cell-class-name="table-header-gray">
|
||||
<el-table-column label="序号" header-align="center" align="center" type="index" width="55px"
|
||||
:index="fragmentSysRolePermCode.SysRolePermCode.impl.getTableIndex" />
|
||||
<el-table-column label="菜单">
|
||||
<template slot-scope="scope">
|
||||
<span>{{getMenuPathString(getMenuPathById(scope.row.menuId)) || scope.row.menuName}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="权限字" prop="permCode" />
|
||||
<el-table-column label="权限字类型" prop="permCodeType">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :size="defaultFormItemSize" :type="getPermCodeType(scope.row.permCodeType)">{{SysPermCodeType.getValue(scope.row.permCodeType)}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
/* eslint-disable-next-line */
|
||||
import { DropdownWidget, TableWidget, UploadWidget, ChartWidget } from '@/utils/widget.js';
|
||||
import { SystemController } from '@/api';
|
||||
|
||||
export default {
|
||||
name: 'SysRolePerm',
|
||||
props: {
|
||||
roleId: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
activeFragmentId: 'fragmentSysRolePerm',
|
||||
menuMap: new Map(),
|
||||
fragmentSysRolePerm: {
|
||||
formFilter: {
|
||||
url: undefined
|
||||
},
|
||||
formFilterCopy: {
|
||||
url: undefined
|
||||
},
|
||||
SysRolePerm: {
|
||||
impl: new TableWidget(this.loadSysRolePermData, this.loadSysRolePermVerify, false, false)
|
||||
},
|
||||
isInit: false
|
||||
},
|
||||
fragmentSysRolePermCode: {
|
||||
formFilter: {
|
||||
permCode: undefined
|
||||
},
|
||||
formFilterCopy: {
|
||||
permCode: undefined
|
||||
},
|
||||
SysRolePermCode: {
|
||||
impl: new TableWidget(this.loadSysRolePermCodeData, this.loadSysRolePermCodeVerify, false, false)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onResetPerm () {
|
||||
this.$refs.fragmentSysRolePerm.resetFields();
|
||||
this.refreshfragmentSysRolePerm(true);
|
||||
},
|
||||
onResetPermCode () {
|
||||
this.$refs.fragmentSysRolePermCode.resetFields();
|
||||
this.refreshfragmentSysRolePermCode(true);
|
||||
},
|
||||
getMenuType (row) {
|
||||
if (row.menuType === 0) {
|
||||
return 'primary'
|
||||
} else if (row.menuType === 1) {
|
||||
return 'success';
|
||||
} else if (row.menuType === 2) {
|
||||
return 'danger';
|
||||
} else if (row.menuType === 3) {
|
||||
return 'warning';
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取所有菜单项
|
||||
*/
|
||||
loadSysMenuData () {
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.getMenuPermList(this, {}).then(res => {
|
||||
res.data.forEach(item => {
|
||||
this.menuMap.set(item.menuId, item);
|
||||
});
|
||||
resolve();
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
getMenuPathById (menuId) {
|
||||
if (menuId == null || menuId === '') return null;
|
||||
let menuPath = [];
|
||||
do {
|
||||
let menuItem = this.menuMap.get(menuId);
|
||||
if (menuItem != null) {
|
||||
menuPath.unshift(menuItem);
|
||||
menuId = menuItem.parentId;
|
||||
} else {
|
||||
menuId = null;
|
||||
}
|
||||
} while (menuId != null);
|
||||
|
||||
return menuPath;
|
||||
},
|
||||
getMenuPathString (menuPath) {
|
||||
if (Array.isArray(menuPath) && menuPath.length > 0) {
|
||||
return menuPath.map(item => item.menuName).join(' / ');
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取角色权限资源列表函数，返回Promise
|
||||
*/
|
||||
loadSysRolePermData (params) {
|
||||
params.roleId = this.roleId;
|
||||
params.url = this.fragmentSysRolePerm.formFilterCopy.url;
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.listSysPermByRoleIdWithDetail(this, params).then(res => {
|
||||
resolve({
|
||||
dataList: res.data,
|
||||
totalCount: res.data.length
|
||||
});
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 角色权限资源获取检测函数，返回true正常获取数据，返回false停止获取数据
|
||||
*/
|
||||
loadSysRolePermVerify () {
|
||||
this.fragmentSysRolePerm.formFilterCopy.url = this.fragmentSysRolePerm.formFilter.url;
|
||||
return true;
|
||||
},
|
||||
/**
|
||||
* 更新角色权限资源
|
||||
*/
|
||||
refreshfragmentSysRolePerm (reloadData = false) {
|
||||
// 重新获取数据组件的数据
|
||||
if (reloadData) {
|
||||
this.fragmentSysRolePerm.SysRolePerm.impl.refreshTable(true, 1);
|
||||
} else {
|
||||
this.fragmentSysRolePerm.SysRolePerm.impl.refreshTable();
|
||||
}
|
||||
this.fragmentSysRolePerm.isInit = true;
|
||||
},
|
||||
/**
|
||||
* 获取角色权限字列表函数，返回Promise
|
||||
*/
|
||||
loadSysRolePermCodeData (params) {
|
||||
params.roleId = this.roleId;
|
||||
params.permCode = this.fragmentSysRolePermCode.formFilterCopy.permCode;
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.listSysPermCodeByRoleIdWithDetail(this, params).then(res => {
|
||||
resolve({
|
||||
dataList: res.data,
|
||||
totalCount: res.data.length
|
||||
});
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 角色权限资源获取检测函数，返回true正常获取数据，返回false停止获取数据
|
||||
*/
|
||||
loadSysRolePermCodeVerify () {
|
||||
this.fragmentSysRolePermCode.formFilterCopy.permCode = this.fragmentSysRolePermCode.formFilter.permCode;
|
||||
return true;
|
||||
},
|
||||
getPermCodeType (permCodeType) {
|
||||
switch (permCodeType) {
|
||||
case this.SysPermCodeType.FORM: return 'primary';
|
||||
case this.SysPermCodeType.FRAGMENT: return 'warning';
|
||||
case this.SysPermCodeType.OPERATION: return 'success';
|
||||
default: return 'info';
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 更新角色权限资源
|
||||
*/
|
||||
refreshfragmentSysRolePermCode (reloadData = false) {
|
||||
// 重新获取数据组件的数据
|
||||
if (reloadData) {
|
||||
this.fragmentSysRolePermCode.SysRolePermCode.impl.refreshTable(true, 1);
|
||||
} else {
|
||||
this.fragmentSysRolePermCode.SysRolePermCode.impl.refreshTable();
|
||||
}
|
||||
this.fragmentSysRolePermCode.isInit = true;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getTableHeight () {
|
||||
return (this.getMainContextHeight - 150);
|
||||
},
|
||||
...mapGetters(['getMainContextHeight'])
|
||||
},
|
||||
mounted () {
|
||||
this.loadSysMenuData().catch(e => {});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,483 @@
|
||||
<template>
|
||||
<div class="tab-dialog-box" style="position: relative;">
|
||||
<el-tabs v-model="activeFragmentId" :before-leave="onFragmentChange">
|
||||
<el-tab-pane label="角色管理" name="fragmentSysRole" style="width: 100%;"
|
||||
v-if="checkPermCodeExist('formSysRole:fragmentSysRole')">
|
||||
<el-form ref="fragmentSysRole" :model="fragmentSysRole" label-width="75px" :size="defaultFormItemSize" label-position="right" @submit.native.prevent>
|
||||
<filter-box :item-width="350">
|
||||
<el-form-item label="角色名称" prop="formFilter.sysRoleName">
|
||||
<el-input class="filter-item" v-model="fragmentSysRole.formFilter.sysRoleName"
|
||||
:clearable="true" placeholder="角色名称" />
|
||||
</el-form-item>
|
||||
<el-button slot="operator" type="default" :plain="true" :size="defaultFormItemSize" @click="onResetRole">重置</el-button>
|
||||
<el-button slot="operator" type="primary" :plain="true" :size="defaultFormItemSize" @click="refreshFragmentSysRole(true)">查询</el-button>
|
||||
<el-button slot="operator" type="primary" :size="defaultFormItemSize" :disabled="!checkPermCodeExist('formSysRole:fragmentSysRole:add')"
|
||||
@click="onAddSysRoleClick()">
|
||||
新建
|
||||
</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="fragmentSysRole.SysRole.impl.dataList" :size="defaultFormItemSize" :height="getTableHeight + 'px'"
|
||||
@sort-change="fragmentSysRole.SysRole.impl.onSortChange"
|
||||
header-cell-class-name="table-header-gray">
|
||||
<el-table-column label="序号" header-align="center" align="center" type="index" width="50px"
|
||||
:index="fragmentSysRole.SysRole.impl.getTableIndex" />
|
||||
<el-table-column label="角色名称" prop="roleName">
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" fixed="right" width="150px">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="onEditSysRoleClick(scope.row)" type="text" :size="defaultFormItemSize"
|
||||
:disabled="!checkPermCodeExist('formSysRole:fragmentSysRole:update')">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button @click="onDeleteClick(scope.row)" type="text" :size="defaultFormItemSize"
|
||||
:disabled="!checkPermCodeExist('formSysRole:fragmentSysRole:delete')">
|
||||
删除
|
||||
</el-button>
|
||||
<el-button class="btn-table-primary" type="text" :size="defaultFormItemSize"
|
||||
v-if="checkPermCodeExist('formSysRole:fragmentSysRole:listSysRolePermDetail')"
|
||||
@click="onSysRolePermClick(scope.row)">
|
||||
权限详情
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-col :span="24">
|
||||
<el-row type="flex" justify="end" style="margin-top: 10px;">
|
||||
<el-pagination
|
||||
:total="fragmentSysRole.SysRole.impl.totalCount"
|
||||
:current-page="fragmentSysRole.SysRole.impl.currentPage"
|
||||
:page-size="fragmentSysRole.SysRole.impl.pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, prev, pager, next, sizes"
|
||||
@current-change="fragmentSysRole.SysRole.impl.onCurrentPageChange"
|
||||
@size-change="fragmentSysRole.SysRole.impl.onPageSizeChange">
|
||||
</el-pagination>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="用户授权" name="fragmentSysRoleUser" style="width: 100%;"
|
||||
v-if="checkPermCodeExist('formSysRole:fragmentSysRoleUser')">
|
||||
<el-form ref="fragmentSysRoleUser" :model="fragmentSysRoleUser" label-width="75px" :size="defaultFormItemSize" label-position="right" @submit.native.prevent>
|
||||
<filter-box :item-width="350">
|
||||
<el-form-item label="用户角色">
|
||||
<el-select class="filter-item" v-model="fragmentSysRoleUser.formFilter.sysRoleId" clearable
|
||||
placeholder="用户角色" :loading="fragmentSysRoleUser.sysRole.impl.loading"
|
||||
@visible-change="fragmentSysRoleUser.sysRole.impl.onVisibleChange"
|
||||
@change="onRoleChange">
|
||||
<el-option v-for="item in fragmentSysRoleUser.sysRole.impl.dropdownList" :key="item.roleId" :value="item.roleId" :label="item.roleName" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名" prop="formFilter.sysUserLoginName">
|
||||
<el-input class="filter-item" v-model="fragmentSysRoleUser.formFilter.sysUserLoginName"
|
||||
:clearable="true" placeholder="输入用户名 / 昵称查询" @change="refreshFragmentSysRoleUser(true)" />
|
||||
</el-form-item>
|
||||
<el-button slot="operator" type="default" :plain="true" :size="defaultFormItemSize" @click="onResetRoleUser">重置</el-button>
|
||||
<el-button slot="operator" type="primary" :plain="true" :size="defaultFormItemSize" @click="refreshFragmentSysRoleUser(true)">
|
||||
查询
|
||||
</el-button>
|
||||
<el-button slot="operator" type="primary" :size="defaultFormItemSize" @click="onAddRow()"
|
||||
:disabled="!checkPermCodeExist('formSysRole:fragmentSysRoleUser:addUserRole') ||
|
||||
fragmentSysRoleUser.formFilter.sysRoleId == null || fragmentSysRoleUser.formFilter.sysRoleId === ''">
|
||||
添加用户
|
||||
</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="fragmentSysRoleUser.SysUser.impl.dataList" :size="defaultFormItemSize" :height="getTableHeight + 'px'"
|
||||
@sort-change="fragmentSysRoleUser.SysUser.impl.onSortChange"
|
||||
header-cell-class-name="table-header-gray">
|
||||
<el-table-column label="序号" header-align="center" align="center" type="index" width="50px" :index="fragmentSysRoleUser.SysUser.impl.getTableIndex" />
|
||||
<el-table-column label="用户名" prop="loginName">
|
||||
</el-table-column>
|
||||
<el-table-column label="昵称" prop="showName">
|
||||
</el-table-column>
|
||||
<el-table-column label="账号类型">
|
||||
<template slot-scope="scope">
|
||||
<span>{{SysUserType.getValue(scope.row.userType)}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="getUserStatusType(scope.row.userStatus)" :size="defaultFormItemSize">{{SysUserStatus.getValue(scope.row.userStatus)}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" fixed="right" width="80px">
|
||||
<template slot-scope="scope">
|
||||
<el-button class="btn-table-delete" type="text" :size="defaultFormItemSize"
|
||||
:disabled="!checkPermCodeExist('formSysRole:fragmentSysRoleUser:deleteUserRole')"
|
||||
@click="onDeleteRow(scope.row)">
|
||||
移除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-col :span="24">
|
||||
<el-row type="flex" justify="end" style="margin-top: 10px;">
|
||||
<el-pagination
|
||||
:total="fragmentSysRoleUser.SysUser.impl.totalCount"
|
||||
:current-page="fragmentSysRoleUser.SysUser.impl.currentPage"
|
||||
:page-size="fragmentSysRoleUser.SysUser.impl.pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, prev, pager, next, sizes"
|
||||
@current-change="fragmentSysRoleUser.SysUser.impl.onCurrentPageChange"
|
||||
@size-change="fragmentSysRoleUser.SysUser.impl.onPageSizeChange">
|
||||
</el-pagination>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
/* eslint-disable-next-line */
|
||||
import { DropdownWidget, TableWidget, UploadWidget, ChartWidget } from '@/utils/widget.js';
|
||||
/* eslint-disable-next-line */
|
||||
import { uploadMixin, statsDateRangeMixin, cachePageMixin, cachedPageChildMixin } from '@/core/mixins';
|
||||
/* eslint-disable-next-line */
|
||||
import { SystemController, DictionaryController } from '@/api';
|
||||
import formEditSysRole from '../formEditSysRole';
|
||||
import formSetRoleUsers from '@/views/upms/formSetRoleUsers';
|
||||
import FormSysRolePerm from './formSysRolePerm.vue';
|
||||
|
||||
export default {
|
||||
name: 'formSysRole',
|
||||
props: {
|
||||
},
|
||||
mixins: [uploadMixin, statsDateRangeMixin, cachePageMixin],
|
||||
data () {
|
||||
return {
|
||||
activeFragmentId: undefined,
|
||||
fragmentSysRole: {
|
||||
formFilter: {
|
||||
sysRoleName: undefined
|
||||
},
|
||||
formFilterCopy: {
|
||||
sysRoleName: undefined
|
||||
},
|
||||
SysRole: {
|
||||
impl: new TableWidget(this.loadSysRoleData, this.loadSysRoleVerify, true, false)
|
||||
},
|
||||
isInit: false
|
||||
},
|
||||
fragmentSysRoleUser: {
|
||||
formFilter: {
|
||||
sysRoleId: undefined,
|
||||
sysUserLoginName: undefined
|
||||
},
|
||||
sysRole: {
|
||||
impl: new DropdownWidget(this.loadSysRoleDropdownList)
|
||||
},
|
||||
SysUser: {
|
||||
impl: new TableWidget(this.loadSysUserData, this.loadSysUserVerify, true, false)
|
||||
},
|
||||
isInit: false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onResetRole () {
|
||||
this.$refs.fragmentSysRole.resetFields();
|
||||
this.refreshFragmentSysRole(true);
|
||||
},
|
||||
onResetRoleUser () {
|
||||
this.$refs.fragmentSysRoleUser.resetFields();
|
||||
this.refreshFragmentSysRoleUser(true);
|
||||
},
|
||||
/**
|
||||
* 用户角色数据获取函数，返回Primise
|
||||
*/
|
||||
loadSysRoleData (params) {
|
||||
params.sysRoleDtoFilter = {
|
||||
roleName: this.fragmentSysRole.formFilterCopy.sysRoleName
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.getRoleList(this, params).then(res => {
|
||||
resolve({
|
||||
dataList: res.data.dataList,
|
||||
totalCount: res.data.totalCount
|
||||
});
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 用户角色数据获取检测函数，返回true正常获取数据，返回false停止获取数据
|
||||
*/
|
||||
loadSysRoleVerify () {
|
||||
this.fragmentSysRole.formFilterCopy.sysRoleName = this.fragmentSysRole.formFilter.sysRoleName;
|
||||
return true;
|
||||
},
|
||||
/**
|
||||
* 更新角色列表
|
||||
*/
|
||||
refreshFragmentSysRole (reloadData = false) {
|
||||
// 重新获取数据组件的数据
|
||||
if (reloadData) {
|
||||
this.fragmentSysRole.SysRole.impl.refreshTable(true, 1);
|
||||
} else {
|
||||
this.fragmentSysRole.SysRole.impl.refreshTable();
|
||||
}
|
||||
this.fragmentSysRole.isInit = true;
|
||||
},
|
||||
/**
|
||||
* 新建
|
||||
*/
|
||||
onAddSysRoleClick () {
|
||||
let params = {};
|
||||
|
||||
this.$dialog.show('新建', formEditSysRole, {
|
||||
area: ['800px', '500px'],
|
||||
offset: '100px'
|
||||
}, params).then(res => {
|
||||
this.fragmentSysRoleUser.sysRole.impl.dirty = true;
|
||||
this.refreshFragmentSysRole();
|
||||
}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 编辑
|
||||
*/
|
||||
onEditSysRoleClick (row) {
|
||||
this.loadRowData(row).then(rowData => {
|
||||
return this.$dialog.show('编辑角色', formEditSysRole, {
|
||||
area: ['600px', '500px']
|
||||
}, {
|
||||
rowData
|
||||
});
|
||||
}).then(res => {
|
||||
if (row.roleId === this.fragmentSysRoleUser.formFilter.sysRoleId) {
|
||||
this.fragmentSysRoleUser.formFilter.sysRoleId = undefined;
|
||||
this.fragmentSysRoleUser.SysUser.impl.clearTable();
|
||||
}
|
||||
this.fragmentSysRoleUser.sysRole.impl.dirty = true;
|
||||
this.fragmentSysRole.SysRole.impl.refreshTable();
|
||||
}).catch((e) => {});
|
||||
},
|
||||
/**
|
||||
* 删除
|
||||
*/
|
||||
onDeleteClick (row) {
|
||||
let params = {
|
||||
roleId: row.roleId
|
||||
};
|
||||
|
||||
this.$confirm('是否删除此角色？').then(res => {
|
||||
SystemController.deleteRole(this, params).then(res => {
|
||||
this.$message.success('删除成功');
|
||||
if (row.roleId === this.fragmentSysRoleUser.formFilter.sysRoleId) {
|
||||
this.fragmentSysRoleUser.formFilter.sysRoleId = undefined;
|
||||
this.fragmentSysRoleUser.SysUser.impl.clearTable();
|
||||
}
|
||||
this.fragmentSysRoleUser.sysRole.impl.dirty = true;
|
||||
this.fragmentSysRole.SysRole.impl.refreshTable();
|
||||
}).catch(e => {});
|
||||
}).catch(e => {});
|
||||
},
|
||||
loadRowData (row) {
|
||||
return new Promise((resolve, reject) => {
|
||||
var params = {
|
||||
roleId: row.roleId
|
||||
}
|
||||
SystemController.getRole(this, params).then(res => {
|
||||
if (typeof res.data.permsJsonData === 'string') {
|
||||
res.data.permsJsonData = JSON.parse(res.data.permsJsonData);
|
||||
}
|
||||
resolve(res.data);
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
buildFragmentPermCodeMap () {
|
||||
this.permCodeList = [
|
||||
{
|
||||
key: 'fragmentSysRole',
|
||||
permCode: 'formSysRole:fragmentSysRole',
|
||||
refresh: this.refreshFragmentSysRole
|
||||
},
|
||||
{
|
||||
key: 'fragmentSysRoleUser',
|
||||
permCode: 'formSysRole:fragmentSysRoleUser',
|
||||
refresh: this.refreshFragmentSysRoleUser
|
||||
}
|
||||
];
|
||||
},
|
||||
onFragmentChange (fragmentId) {
|
||||
for (let i = 0; i < this.permCodeList.length; i++) {
|
||||
if (this.permCodeList[i].key === fragmentId) {
|
||||
this.activeFragmentId = fragmentId;
|
||||
// if (this.permCodeList[i].refresh) this.permCodeList[i].refresh();
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
getActiveFragment () {
|
||||
for (let i = 0; i < this.permCodeList.length; i++) {
|
||||
if (this.permCodeList[i].key === this.activeFragmentId) {
|
||||
return this.permCodeList[i];
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 根据权限获取默认显示的fragment
|
||||
*/
|
||||
getDefaultFragment () {
|
||||
for (let i = 0; i < this.permCodeList.length; i++) {
|
||||
if (this.checkPermCodeExist(this.permCodeList[i].permCode)) {
|
||||
this.activeFragmentId = this.permCodeList[i].key;
|
||||
return this.permCodeList[i];
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
},
|
||||
onRoleChange (value) {
|
||||
this.refreshFragmentSysRoleUser(true);
|
||||
},
|
||||
getUserStatusType (status) {
|
||||
if (status === this.SysUserStatus.NORMAL) {
|
||||
return 'success';
|
||||
} else if (status === this.SysUserStatus.LOCKED) {
|
||||
return 'danger';
|
||||
} else {
|
||||
return 'info';
|
||||
}
|
||||
},
|
||||
onAddRow () {
|
||||
if (this.fragmentSysRoleUser.formFilter.sysRoleId == null || this.fragmentSysRoleUser.formFilter.sysRoleId === '') {
|
||||
this.$message.error('请选择角色');
|
||||
return false;
|
||||
}
|
||||
this.$dialog.show('角色用户授权', formSetRoleUsers, {
|
||||
area: ['1100px', '600px']
|
||||
}, {
|
||||
roleId: this.fragmentSysRoleUser.formFilter.sysRoleId
|
||||
}).catch(e => {
|
||||
this.refreshFragmentSysRoleUser(true);
|
||||
});
|
||||
},
|
||||
onDeleteRow (row) {
|
||||
this.$confirm('是否移除此用户?').then(res => {
|
||||
let params = {
|
||||
roleId: this.fragmentSysRoleUser.formFilter.sysRoleId,
|
||||
userId: row.userId
|
||||
}
|
||||
return SystemController.deleteRoleUser(this, params);
|
||||
}).then(res => {
|
||||
this.$message.success('移除成功');
|
||||
this.refreshFragmentSysRoleUser(true);
|
||||
}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 用户管理数据获取函数，返回Primise
|
||||
*/
|
||||
loadSysUserData (params) {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (this.fragmentSysRoleUser.formFilter.sysRoleId == null || this.fragmentSysRoleUser.formFilter.sysRoleId === '') {
|
||||
this.$message.error('请选择角色');
|
||||
resolve({
|
||||
dataList: [],
|
||||
totalCount: 0
|
||||
});
|
||||
return;
|
||||
}
|
||||
params.roleId = this.fragmentSysRoleUser.formFilter.sysRoleId;
|
||||
params.sysUserDtoFilter = {
|
||||
loginName: this.fragmentSysRoleUser.formFilter.sysUserLoginName
|
||||
}
|
||||
SystemController.listRoleUser(this, params).then(res => {
|
||||
resolve({
|
||||
dataList: res.data.dataList,
|
||||
totalCount: res.data.totalCount
|
||||
});
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 用户管理数据获取检测函数，返回true正常获取数据，返回false停止获取数据
|
||||
*/
|
||||
loadSysUserVerify () {
|
||||
if (this.fragmentSysRoleUser.formFilter.sysRoleId == null || this.fragmentSysRoleUser.formFilter.sysRoleId === '') {
|
||||
this.$message.error('请选择角色');
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
/**
|
||||
* 角色下拉数据获取函数
|
||||
*/
|
||||
loadSysRoleDropdownList () {
|
||||
return new Promise((resolve, reject) => {
|
||||
let params = {};
|
||||
SystemController.getRoleList(this, params).then(res => {
|
||||
resolve(res.data.dataList);
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
onRuleChange (value) {
|
||||
this.refreshFragmentSysRoleUser(true);
|
||||
},
|
||||
/**
|
||||
* 权限详情
|
||||
*/
|
||||
onSysRolePermClick (row) {
|
||||
this.$dialog.show('权限详情', FormSysRolePerm, {
|
||||
area: '1200px',
|
||||
offset: '30px'
|
||||
}, {
|
||||
roleId: row.roleId
|
||||
}).then(res => {}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 更新用户管理
|
||||
*/
|
||||
refreshFragmentSysRoleUser (reloadData = false) {
|
||||
// 重新获取数据组件的数据
|
||||
if (reloadData) {
|
||||
this.fragmentSysRoleUser.SysUser.impl.refreshTable(true, 1);
|
||||
} else {
|
||||
this.fragmentSysRoleUser.SysUser.impl.refreshTable();
|
||||
}
|
||||
this.fragmentSysRoleUser.sysRole.impl.onVisibleChange(true).catch(e => {});
|
||||
this.fragmentSysRoleUser.isInit = true;
|
||||
},
|
||||
onResume () {
|
||||
this.refreshFragmentSysRole();
|
||||
},
|
||||
initFormData () {
|
||||
},
|
||||
formInit () {
|
||||
this.buildFragmentPermCodeMap();
|
||||
let defaultFragment = this.getDefaultFragment();
|
||||
if (defaultFragment == null) {
|
||||
this.$message.error('您没有访问这个页面的权限，请与系统管理员联系！');
|
||||
} else {
|
||||
if (defaultFragment.refresh) defaultFragment.refresh();
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getTableHeight () {
|
||||
return (this.getMainContextHeight - 192);
|
||||
},
|
||||
...mapGetters(['getMainContextHeight'])
|
||||
},
|
||||
created () {
|
||||
this.formInit();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,335 @@
|
||||
<template>
|
||||
<div class="tab-dialog-box" style="position: relative; margin-top: -15px;">
|
||||
<el-tabs v-model="activeFragmentId">
|
||||
<el-tab-pane label="权限资源" name="fragmentSysUserPerm" style="width: 100%;">
|
||||
<el-form label-width="100px" :size="defaultFormItemSize" label-position="left" @submit.native.prevent>
|
||||
<filter-box :item-width="350">
|
||||
<el-form-item label="URL">
|
||||
<el-input class="filter-item" v-model="fragmentSysUserPerm.formFilter.url" clearable
|
||||
placeholder="" />
|
||||
</el-form-item>
|
||||
<el-button slot="operator" type="primary" :plain="true" :size="defaultFormItemSize" @click="refreshFragmentSysUserPerm(true)">查询</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="fragmentSysUserPerm.SysUserPerm.impl.dataList" :size="defaultFormItemSize" :height="getTableHeight + 'px'"
|
||||
@sort-change="fragmentSysUserPerm.SysUserPerm.impl.onSortChange"
|
||||
header-cell-class-name="table-header-gray">
|
||||
<el-table-column label="序号" header-align="center" align="center" type="index" width="55px"
|
||||
:index="fragmentSysUserPerm.SysUserPerm.impl.getTableIndex" />
|
||||
<el-table-column label="所属角色" prop="roleName" width="150px" />
|
||||
<el-table-column label="菜单">
|
||||
<template slot-scope="scope">
|
||||
<span>{{getMenuPathString(getMenuPathById(scope.row.menuId)) || scope.row.menuName}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="所属权限字" prop="permCode" />
|
||||
<el-table-column label="URL" prop="url" />
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="权限字" name="fragmentSysUserPermCode" style="width: 100%;">
|
||||
<el-form label-width="100px" :size="defaultFormItemSize" label-position="left" @submit.native.prevent>
|
||||
<filter-box :item-width="350">
|
||||
<el-form-item label="权限字">
|
||||
<el-input class="filter-item" v-model="fragmentSysUserPermCode.formFilter.permCode" clearable
|
||||
placeholder="" />
|
||||
</el-form-item>
|
||||
<el-button slot="operator" type="primary" :plain="true" :size="defaultFormItemSize" @click="refreshFragmentSysUserPermCode(true)">查询</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="fragmentSysUserPermCode.SysUserPermCode.impl.dataList" :size="defaultFormItemSize" :height="getTableHeight + 'px'"
|
||||
@sort-change="fragmentSysUserPermCode.SysUserPermCode.impl.onSortChange"
|
||||
header-cell-class-name="table-header-gray">
|
||||
<el-table-column label="序号" header-align="center" align="center" type="index" width="55px"
|
||||
:index="fragmentSysUserPermCode.SysUserPermCode.impl.getTableIndex" />
|
||||
<el-table-column label="所属角色" prop="roleName" width="150px" />
|
||||
<el-table-column label="菜单">
|
||||
<template slot-scope="scope">
|
||||
<span>{{getMenuPathString(getMenuPathById(scope.row.menuId)) || scope.row.menuName}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="权限字" prop="permCode" />
|
||||
<el-table-column label="权限字类型" prop="permCodeType">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :size="defaultFormItemSize" :type="getPermCodeType(scope.row.permCodeType)">{{SysPermCodeType.getValue(scope.row.permCodeType)}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="菜单权限" name="fragmentSysUserMenu" style="width: 100%;">
|
||||
<el-form label-width="100px" :size="defaultFormItemSize" label-position="left" @submit.native.prevent>
|
||||
<filter-box :item-width="350">
|
||||
<el-form-item label="菜单名称">
|
||||
<el-input class="filter-item" v-model="fragmentSysUserMenu.formFilter.menuName" clearable
|
||||
placeholder="" />
|
||||
</el-form-item>
|
||||
<el-button slot="operator" type="primary" :plain="true" :size="defaultFormItemSize" @click="refreshFragmentSysUserMenu(true)">查询</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="fragmentSysUserMenu.SysUserMenu.impl.dataList" :size="defaultFormItemSize" :height="getTableHeight + 'px'"
|
||||
@sort-change="fragmentSysUserMenu.SysUserMenu.impl.onSortChange"
|
||||
header-cell-class-name="table-header-gray">
|
||||
<el-table-column label="序号" header-align="center" align="center" type="index" width="55px"
|
||||
:index="fragmentSysUserPermCode.SysUserPermCode.impl.getTableIndex" />
|
||||
<el-table-column label="所属角色" prop="roleName" width="150px" />
|
||||
<el-table-column label="菜单">
|
||||
<template slot-scope="scope">
|
||||
<span>{{getMenuPathString(getMenuPathById(scope.row.menuId)) || scope.row.menuName}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="菜单类型" prop="menuType">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :size="defaultFormItemSize" :type="getMenuType(scope.row)">{{SysMenuType.getValue(scope.row.menuType)}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
/* eslint-disable-next-line */
|
||||
import { DropdownWidget, TableWidget, UploadWidget, ChartWidget } from '@/utils/widget.js';
|
||||
import { SystemController } from '@/api';
|
||||
|
||||
export default {
|
||||
name: 'SysUserPerm',
|
||||
props: {
|
||||
userId: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
activeFragmentId: 'fragmentSysUserPerm',
|
||||
menuMap: new Map(),
|
||||
fragmentSysUserPerm: {
|
||||
formFilter: {
|
||||
url: undefined
|
||||
},
|
||||
formFilterCopy: {
|
||||
url: undefined
|
||||
},
|
||||
SysUserPerm: {
|
||||
impl: new TableWidget(this.loadSysUserPermData, this.loadSysUserPermVerify, false, false)
|
||||
},
|
||||
isInit: false
|
||||
},
|
||||
fragmentSysUserPermCode: {
|
||||
formFilter: {
|
||||
permCode: undefined
|
||||
},
|
||||
formFilterCopy: {
|
||||
permCode: undefined
|
||||
},
|
||||
SysUserPermCode: {
|
||||
impl: new TableWidget(this.loadSysUserPermCodeData, this.loadSysUserPermCodeVerify, false, false)
|
||||
}
|
||||
},
|
||||
fragmentSysUserMenu: {
|
||||
formFilter: {
|
||||
menuName: undefined
|
||||
},
|
||||
formFilterCopy: {
|
||||
menuName: undefined
|
||||
},
|
||||
SysUserMenu: {
|
||||
impl: new TableWidget(this.loadSysUserMenuData, this.loadSysUserMenuVerify, false, false)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getMenuType (row) {
|
||||
if (row.menuType === 0) {
|
||||
return 'primary'
|
||||
} else if (row.menuType === 1) {
|
||||
return 'success';
|
||||
} else if (row.menuType === 2) {
|
||||
return 'danger';
|
||||
} else if (row.menuType === 3) {
|
||||
return 'warning';
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取所有菜单项
|
||||
*/
|
||||
loadSysMenuData () {
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.getMenuPermList(this, {}).then(res => {
|
||||
res.data.forEach(item => {
|
||||
this.menuMap.set(item.menuId, item);
|
||||
});
|
||||
resolve();
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
getMenuPathById (menuId) {
|
||||
if (menuId == null || menuId === '') return null;
|
||||
let menuPath = [];
|
||||
do {
|
||||
let menuItem = this.menuMap.get(menuId);
|
||||
if (menuItem != null) {
|
||||
menuPath.unshift(menuItem);
|
||||
menuId = menuItem.parentId;
|
||||
} else {
|
||||
menuId = null;
|
||||
}
|
||||
} while (menuId != null);
|
||||
|
||||
return menuPath;
|
||||
},
|
||||
getMenuPathString (menuPath) {
|
||||
if (Array.isArray(menuPath) && menuPath.length > 0) {
|
||||
return menuPath.map(item => item.menuName).join(' / ');
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取用户权限资源列表函数，返回Promise
|
||||
*/
|
||||
loadSysUserPermData (params) {
|
||||
params.userId = this.userId;
|
||||
params.url = this.fragmentSysUserPerm.formFilterCopy.url;
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.listSysPermWithDetail(this, params).then(res => {
|
||||
resolve({
|
||||
dataList: res.data,
|
||||
totalCount: res.data.length
|
||||
});
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 用户权限资源获取检测函数，返回true正常获取数据，返回false停止获取数据
|
||||
*/
|
||||
loadSysUserPermVerify () {
|
||||
this.fragmentSysUserPerm.formFilterCopy.url = this.fragmentSysUserPerm.formFilter.url;
|
||||
return true;
|
||||
},
|
||||
/**
|
||||
* 更新用户权限资源
|
||||
*/
|
||||
refreshFragmentSysUserPerm (reloadData = false) {
|
||||
// 重新获取数据组件的数据
|
||||
if (reloadData) {
|
||||
this.fragmentSysUserPerm.SysUserPerm.impl.refreshTable(true, 1);
|
||||
} else {
|
||||
this.fragmentSysUserPerm.SysUserPerm.impl.refreshTable();
|
||||
}
|
||||
this.fragmentSysUserPerm.isInit = true;
|
||||
},
|
||||
/**
|
||||
* 获取用户权限字列表函数，返回Promise
|
||||
*/
|
||||
loadSysUserPermCodeData (params) {
|
||||
params.userId = this.userId;
|
||||
params.permCode = this.fragmentSysUserPermCode.formFilterCopy.permCode;
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.listSysPermCodeWithDetail(this, params).then(res => {
|
||||
resolve({
|
||||
dataList: res.data,
|
||||
totalCount: res.data.length
|
||||
});
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 用户权限资源获取检测函数，返回true正常获取数据，返回false停止获取数据
|
||||
*/
|
||||
loadSysUserPermCodeVerify () {
|
||||
this.fragmentSysUserPermCode.formFilterCopy.permCode = this.fragmentSysUserPermCode.formFilter.permCode;
|
||||
return true;
|
||||
},
|
||||
getPermCodeType (permCodeType) {
|
||||
switch (permCodeType) {
|
||||
case this.SysPermCodeType.FORM: return 'primary';
|
||||
case this.SysPermCodeType.FRAGMENT: return 'warning';
|
||||
case this.SysPermCodeType.OPERATION: return 'success';
|
||||
default: return 'info';
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 更新用户权限资源
|
||||
*/
|
||||
refreshFragmentSysUserPermCode (reloadData = false) {
|
||||
// 重新获取数据组件的数据
|
||||
if (reloadData) {
|
||||
this.fragmentSysUserPermCode.SysUserPermCode.impl.refreshTable(true, 1);
|
||||
} else {
|
||||
this.fragmentSysUserPermCode.SysUserPermCode.impl.refreshTable();
|
||||
}
|
||||
this.fragmentSysUserPermCode.isInit = true;
|
||||
},
|
||||
/**
|
||||
* 获取用户权限资源列表函数，返回Promise
|
||||
*/
|
||||
loadSysUserMenuData (params) {
|
||||
params.userId = this.userId;
|
||||
params.menuName = this.fragmentSysUserMenu.formFilterCopy.menuName;
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.listSysMenuWithDetail(this, params).then(res => {
|
||||
resolve({
|
||||
dataList: res.data,
|
||||
totalCount: res.data.length
|
||||
});
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 用户权限资源获取检测函数，返回true正常获取数据，返回false停止获取数据
|
||||
*/
|
||||
loadSysUserMenuVerify () {
|
||||
this.fragmentSysUserMenu.formFilterCopy.menuName = this.fragmentSysUserMenu.formFilter.menuName;
|
||||
return true;
|
||||
},
|
||||
/**
|
||||
* 更新用户权限资源
|
||||
*/
|
||||
refreshFragmentSysUserMenu (reloadData = false) {
|
||||
// 重新获取数据组件的数据
|
||||
if (reloadData) {
|
||||
this.fragmentSysUserMenu.SysUserMenu.impl.refreshTable(true, 1);
|
||||
} else {
|
||||
this.fragmentSysUserMenu.SysUserMenu.impl.refreshTable();
|
||||
}
|
||||
this.fragmentSysUserMenu.isInit = true;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getTableHeight () {
|
||||
return (this.getMainContextHeight - 150);
|
||||
},
|
||||
...mapGetters(['getMainContextHeight'])
|
||||
},
|
||||
mounted () {
|
||||
this.loadSysMenuData().catch(e => {});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,287 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="formSysUser" :model="formSysUser" label-width="75px" :size="defaultFormItemSize" label-position="right" @submit.native.prevent>
|
||||
<filter-box :item-width="350">
|
||||
<el-form-item label="用户状态" prop="formFilter.sysUserStatus">
|
||||
<el-select class="filter-item" v-model="formSysUser.formFilter.sysUserStatus" :clearable="true"
|
||||
placeholder="用户状态" :loading="formSysUser.sysUserStatus.impl.loading"
|
||||
@visible-change="formSysUser.sysUserStatus.impl.onVisibleChange"
|
||||
@change="onSysUserStatusValueChange">
|
||||
<el-option v-for="item in formSysUser.sysUserStatus.impl.dropdownList" :key="item.id" :value="item.id" :label="item.name" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="登录名称" prop="formFilter.sysUserLoginName">
|
||||
<el-input class="filter-item" v-model="formSysUser.formFilter.sysUserLoginName"
|
||||
:clearable="true" placeholder="登录名称" />
|
||||
</el-form-item>
|
||||
<el-button slot="operator" type="default" :plain="true" :size="defaultFormItemSize" @click="onReset">重置</el-button>
|
||||
<el-button slot="operator" type="primary" :plain="true" :size="defaultFormItemSize" @click="refreshFormSysUser(true)">查询</el-button>
|
||||
<el-button slot="operator" type="primary" :size="defaultFormItemSize" :disabled="!checkPermCodeExist('formSysUser:fragmentSysUser:add')"
|
||||
@click="onAddRow()">
|
||||
新建
|
||||
</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="formSysUser.SysUser.impl.dataList" :size="defaultFormItemSize" @sort-change="formSysUser.SysUser.impl.onSortChange"
|
||||
header-cell-class-name="table-header-gray">
|
||||
<el-table-column label="序号" header-align="center" align="center" type="index" width="50px" :index="formSysUser.SysUser.impl.getTableIndex" />
|
||||
<el-table-column label="用户名" prop="loginName" sortable="custom">
|
||||
</el-table-column>
|
||||
<el-table-column label="昵称" prop="showName">
|
||||
</el-table-column>
|
||||
<el-table-column label="账号类型" prop="userTypeDictMap.name" />
|
||||
<el-table-column label="状态">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="getUserStatusType(scope.row.userStatus)" :size="defaultFormItemSize">{{SysUserStatus.getValue(scope.row.userStatus)}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间">
|
||||
<template slot-scope="scope">
|
||||
<span>{{formatDateByStatsType(scope.row.createTime, 'day')}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" fixed="right" width="220px">
|
||||
<template slot-scope="scope">
|
||||
<el-button class="btn-table-edit" type="text" :size="defaultFormItemSize" @click="onEditRow(scope.row)"
|
||||
:disabled="isAdmin(scope.row) || !checkPermCodeExist('formSysUser:fragmentSysUser:update')"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button class="btn-table-delete" type="text" :size="defaultFormItemSize" @click="onDeleteRow(scope.row)"
|
||||
:disabled="isAdmin(scope.row) || !checkPermCodeExist('formSysUser:fragmentSysUser:delete')"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
<el-button class="btn-table-delete" type="text" :size="defaultFormItemSize" @click="onResetPassword(scope.row)"
|
||||
:disabled="!checkPermCodeExist('formSysUser:fragmentSysUser:resetPassword')"
|
||||
>
|
||||
重置密码
|
||||
</el-button>
|
||||
<el-button class="btn-table-primary" type="text" :size="defaultFormItemSize"
|
||||
v-if="checkPermCodeExist('formSysUser:fragmentSysUser:listSysUserPermDetail')"
|
||||
@click="onSysUserPermClick(scope.row)">
|
||||
权限详情
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-col :span="24">
|
||||
<el-row type="flex" justify="end" style="margin-top: 10px;">
|
||||
<el-pagination
|
||||
:total="formSysUser.SysUser.impl.totalCount"
|
||||
:current-page="formSysUser.SysUser.impl.currentPage"
|
||||
:page-size="formSysUser.SysUser.impl.pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, prev, pager, next, sizes"
|
||||
@current-change="formSysUser.SysUser.impl.onCurrentPageChange"
|
||||
@size-change="formSysUser.SysUser.impl.onPageSizeChange">
|
||||
</el-pagination>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/* eslint-disable-next-line */
|
||||
import { DropdownWidget, TableWidget, UploadWidget, ChartWidget } from '@/utils/widget.js';
|
||||
/* eslint-disable-next-line */
|
||||
import { uploadMixin, statsDateRangeMixin, cachePageMixin, cachedPageChildMixin } from '@/core/mixins';
|
||||
/* eslint-disable-next-line */
|
||||
import { SystemController, DictionaryController } from '@/api';
|
||||
import editUser from '@/views/upms/formEditSysUser';
|
||||
import FormSysUserPerm from './formSysUserPerm.vue';
|
||||
|
||||
export default {
|
||||
name: 'formSysUser',
|
||||
props: {
|
||||
},
|
||||
mixins: [uploadMixin, statsDateRangeMixin, cachePageMixin],
|
||||
data () {
|
||||
return {
|
||||
formSysUser: {
|
||||
formFilter: {
|
||||
sysUserStatus: undefined,
|
||||
sysUserLoginName: undefined
|
||||
},
|
||||
formFilterCopy: {
|
||||
sysUserStatus: undefined,
|
||||
sysUserLoginName: undefined
|
||||
},
|
||||
sysUserStatus: {
|
||||
impl: new DropdownWidget(this.loadSysUserStatusDropdownList)
|
||||
},
|
||||
SysUser: {
|
||||
impl: new TableWidget(this.loadSysUserData, this.loadSysUserVerify, true, false, 'createTime', 1)
|
||||
},
|
||||
isInit: false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onReset () {
|
||||
this.$refs.formSysUser.resetFields();
|
||||
this.refreshFormSysUser(true);
|
||||
},
|
||||
isAdmin (row) {
|
||||
return (row.userType === this.SysUserType.ADMIN);
|
||||
},
|
||||
getUserStatusType (status) {
|
||||
if (status === this.SysUserStatus.NORMAL) {
|
||||
return 'success';
|
||||
} else if (status === this.SysUserStatus.LOCKED) {
|
||||
return 'danger';
|
||||
} else {
|
||||
return 'info';
|
||||
}
|
||||
},
|
||||
onAddRow () {
|
||||
this.$dialog.show('新建用户', editUser, {
|
||||
area: '600px'
|
||||
}).then((res) => {
|
||||
this.refreshFormSysUser();
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
onEditRow (row) {
|
||||
this.loadRowData(row).then(rowData => {
|
||||
this.$dialog.show('编辑用户', editUser, {
|
||||
area: '600px'
|
||||
}, {
|
||||
rowData: rowData
|
||||
}).then((res) => {
|
||||
this.refreshFormSysUser();
|
||||
}).catch(e => {
|
||||
});
|
||||
}).catch(e => {
|
||||
//
|
||||
});
|
||||
},
|
||||
onDeleteRow (row) {
|
||||
let params = {
|
||||
userId: row.userId
|
||||
}
|
||||
this.$confirm('是否删除用户？').then(res => {
|
||||
return SystemController.deleteUser(this, params);
|
||||
}).then(res => {
|
||||
this.$message.success('删除成功');
|
||||
this.refreshFormSysUser(true);
|
||||
}).catch(e => {
|
||||
//
|
||||
});
|
||||
},
|
||||
onResetPassword (row) {
|
||||
this.$confirm('是否重置用户密码？').then(res => {
|
||||
return SystemController.resetUserPassword(this, {userId: row.userId});
|
||||
}).then(res => {
|
||||
this.$message.success('重置密码成功');
|
||||
}).catch(e => {
|
||||
//
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 用户管理数据获取函数，返回Primise
|
||||
*/
|
||||
loadSysUserData (params) {
|
||||
params.sysUserDtoFilter = {
|
||||
loginName: this.formSysUser.formFilterCopy.sysUserLoginName,
|
||||
userStatus: this.formSysUser.formFilterCopy.sysUserStatus
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.getUserList(this, params).then(res => {
|
||||
resolve({
|
||||
dataList: res.data.dataList,
|
||||
totalCount: res.data.totalCount
|
||||
});
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 用户管理数据获取检测函数，返回true正常获取数据，返回false停止获取数据
|
||||
*/
|
||||
loadSysUserVerify () {
|
||||
this.formSysUser.formFilterCopy.sysUserLoginName = this.formSysUser.formFilter.sysUserLoginName;
|
||||
this.formSysUser.formFilterCopy.sysUserStatus = this.formSysUser.formFilter.sysUserStatus;
|
||||
return true;
|
||||
},
|
||||
/**
|
||||
* 用户状态下拉数据获取函数
|
||||
*/
|
||||
loadSysUserStatusDropdownList () {
|
||||
return new Promise((resolve, reject) => {
|
||||
let params = {};
|
||||
DictionaryController.dictSysUserStatus(this, params).then(res => {
|
||||
resolve(res.getList());
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 用户状态下拉框显隐
|
||||
*/
|
||||
onSysUserStatusVisibleChange (show) {
|
||||
this.formSysUser.sysUserStatus.impl.onVisibleChange(show).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 用户状态选中值改变
|
||||
*/
|
||||
onSysUserStatusValueChange (value) {
|
||||
},
|
||||
/**
|
||||
* 权限详情
|
||||
*/
|
||||
onSysUserPermClick (row) {
|
||||
this.$dialog.show('权限详情', FormSysUserPerm, {
|
||||
area: '1200px',
|
||||
offset: '30px'
|
||||
}, {
|
||||
userId: row.userId
|
||||
}).then(res => {}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 更新用户管理
|
||||
*/
|
||||
refreshFormSysUser (reloadData = false) {
|
||||
// 重新获取数据组件的数据
|
||||
if (reloadData) {
|
||||
this.formSysUser.SysUser.impl.refreshTable(true, 1);
|
||||
} else {
|
||||
this.formSysUser.SysUser.impl.refreshTable();
|
||||
}
|
||||
this.formSysUser.sysUserStatus.impl.onVisibleChange(true).catch(e => {});
|
||||
this.formSysUser.isInit = true;
|
||||
},
|
||||
loadRowData (row) {
|
||||
return new Promise((resolve, reject) => {
|
||||
var params = {
|
||||
userId: row.userId
|
||||
}
|
||||
|
||||
SystemController.getUser(this, params).then(res => {
|
||||
resolve(res.data);
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
onResume () {
|
||||
this.refreshFormSysUser();
|
||||
},
|
||||
initFormData () {
|
||||
},
|
||||
formInit () {
|
||||
this.initFormData();
|
||||
this.refreshFormSysUser();
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.formInit();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<div class="form-single-fragment" style="position: relative;">
|
||||
<el-form ref="formViewOperationLog" :model="formData" class="full-width-input" style="width: 100%;"
|
||||
label-width="100px" :size="defaultFormItemSize" label-position="right" @submit.native.prevent>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="操作模块：">
|
||||
<span class="input-item">{{formData.formViewSysOperationLog.serviceName}}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="操作人员：">
|
||||
<span class="input-item">{{formData.formViewSysOperationLog.operatorName}}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="请求地址：">
|
||||
<span class="input-item">{{formData.formViewSysOperationLog.requestUrl}}</span>
|
||||
<el-tag :size="defaultFormItemSize" style="margin-left: 10px"
|
||||
:type="formData.formViewSysOperationLog.requestMethod === 'GET' ? 'success' : 'primary'">
|
||||
{{formData.formViewSysOperationLog.requestMethod}}
|
||||
</el-tag>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="主机地址：">
|
||||
<span class="input-item">{{formData.formViewSysOperationLog.requestIp}}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="操作方法：">
|
||||
<span class="input-item">{{formData.formViewSysOperationLog.apiMethod}}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="Trace Id：">
|
||||
<span class="input-item">{{formData.formViewSysOperationLog.traceId}}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="Session Id：">
|
||||
<span class="input-item">{{formData.formViewSysOperationLog.sessionId}}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="请求参数：">
|
||||
<JsonViewer v-model="formData.formViewSysOperationLog.requestArguments" :expand-depth="5" boxed />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="返回结果：">
|
||||
<JsonViewer v-model="formData.formViewSysOperationLog.responseResult" :expand-depth="5" boxed />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="登录状态：">
|
||||
<el-tag v-if="formData.formViewSysOperationLog.success != null"
|
||||
:type="formData.formViewSysOperationLog.success ? 'success' : 'danger'">
|
||||
{{formData.formViewSysOperationLog.success ? '成功' : '失败'}}
|
||||
</el-tag>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JsonViewer from 'vue-json-viewer';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
rowData: Object
|
||||
},
|
||||
components: {
|
||||
JsonViewer
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
formData: {
|
||||
formViewSysOperationLog: {
|
||||
apiClass: undefined,
|
||||
apiMethod: undefined,
|
||||
description: undefined,
|
||||
operationTime: undefined,
|
||||
operationType: undefined,
|
||||
operatorId: undefined,
|
||||
operatorName: undefined,
|
||||
requestArguments: {},
|
||||
requestIp: undefined,
|
||||
requestMethod: undefined,
|
||||
requestUrl: undefined,
|
||||
responseResult: {},
|
||||
serviceName: undefined,
|
||||
traceId: undefined,
|
||||
sessionId: undefined,
|
||||
success: true
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.formData.formViewSysOperationLog = { ...this.rowData };
|
||||
this.formData.formViewSysOperationLog.requestArguments = JSON.parse(this.rowData.requestArguments) || {};
|
||||
this.formData.formViewSysOperationLog.responseResult = JSON.parse(this.rowData.responseResult) || {};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.jv-code {
|
||||
padding: 0px!important;
|
||||
}
|
||||
|
||||
.jv-node {
|
||||
padding: 3px;
|
||||
margin: 0px;
|
||||
background: #F3F3F3;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="title">
|
||||
<p>无论是专业版还是企业版的脚手架，我们全部开源免费，这一切都由<span> 橙单 </span>为您生成。</p>
|
||||
</div>
|
||||
<el-row type="flex">
|
||||
<div style="width: 100%;">
|
||||
<el-card class="box-card" shadow="never" :body-style="{padding: '0px 20px'}">
|
||||
<el-collapse v-model="currentItem">
|
||||
<el-collapse-item title="选择我们的 5 个理由" name="1">
|
||||
<ul class="item-list">
|
||||
<li>是真正的生成器，而非脚手架。</li>
|
||||
<li>可生成卓越的架构和高质量的代码。</li>
|
||||
<li>生成后工程代码完全可读，包名和作者署名都由您钦定。</li>
|
||||
<li>授权极为宽松，生成后代码版权完全归属于您。</li>
|
||||
<li>详尽、完善、免费、护眼的开发文档。</li>
|
||||
</ul>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="我们的技术选型" name="2">
|
||||
<ul class="item-list">
|
||||
<li>Element (Vue) / Ant Design (React) / ECharts / AntV / Axios / Webpack</li>
|
||||
<li>Spring Boot / Spring Cloud / Spring Cloud Alibaba + Mybatis + Jwt</li>
|
||||
<li>Hutool + Guava + Caffeine + Lombok + MapStruct + Flowable + Activiti</li>
|
||||
<li>Redis + Zookeeper + Nacos + Consul + XXL-Job + Quartz + Kafka + RocketMQ + Seata</li>
|
||||
<li>ELK + PinPoint / SkyWalking + Grafana + Prometheus</li>
|
||||
</ul>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="可快速上手的高质量代码" name="3">
|
||||
<ul class="item-list">
|
||||
<li>完整的工作流支持。</li>
|
||||
<li>完整的在线表单支持。</li>
|
||||
<li>完整的静态表单支持。</li>
|
||||
<li>完整的多关联数据组装支持。</li>
|
||||
<li>完整的中台化核心组件支持。</li>
|
||||
</ul>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="设计理念和未来目标" name="4">
|
||||
<ul class="item-list">
|
||||
<li>全面且实用的日志跟踪、链路跟踪和服务监控体系。</li>
|
||||
<li>前沿的单表组合式设计，使系统拆分SO EASY。</li>
|
||||
<li>先代码，后SQL的原则，让服务扩充更具弹性。</li>
|
||||
<li>统一的数据组装接口，更高效的满足微服务的拆分与再合并。</li>
|
||||
<li>支持实时与离线的数据同步，更好的拥抱云原生架构。</li>
|
||||
</ul>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</el-card>
|
||||
</div>
|
||||
<el-card class="box-card" style="min-width: 450px; margin-left: 20px;" shadow="never" :body-style="{padding: '0px 20px'}">
|
||||
<div class="item">
|
||||
<span style="width: 120px;">产品名称</span>
|
||||
<el-tag effect="dark">橙单代码生成器</el-tag>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<div class="item">
|
||||
<span style="width: 120px;">网站首页</span>
|
||||
<a href="http://www.orangeforms.com/" target="_blank">http://www.orangeforms.com/</a>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<div class="item">
|
||||
<span style="width: 120px;">教学视频</span>
|
||||
<a href="https://www.bilibili.com/video/BV1Wg4y1i7vP" target="_blank">https://www.bilibili.com/video/BV1Wg4y1i7vP</a>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<div class="item">
|
||||
<span style="width: 120px;">更多演示</span>
|
||||
<a href="http://demo.orangeforms.com/" target="_blank">http://demo.orangeforms.com/</a>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<div class="item">
|
||||
<span style="width: 120px;">操作指南</span>
|
||||
<a href="http://www.orangeforms.com/orange-doc/" target="_blank">http://www.orangeforms.com/orange-doc/</a>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<div class="item">
|
||||
<span style="width: 120px;">开发文档</span>
|
||||
<a href="http://www.orangeforms.com/development-doc/" target="_blank">http://www.orangeforms.com/development-doc/</a>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<div class="item">
|
||||
<span style="width: 120px;">开源代码</span>
|
||||
<a href="https://gitee.com/orangeform/orange-admin" target="_blank">https://gitee.com/orangeform/orange-admin</a>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<div class="item">
|
||||
<span style="width: 120px;">联系方式</span>
|
||||
<span>
|
||||
QQ群
|
||||
<a target="_blank" style="margin-left: 5px;"
|
||||
href="https://qm.qq.com/cgi-bin/qm/qr?k=cMMom9SdX1j57T_58WihLZ4TBrBpokrv&jump_from=webapi">
|
||||
883176267
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<div style="width: 100%; text-align: center; padding: 10px;">
|
||||
<img src="../../assets/img/orange-group2.png" />
|
||||
</div>
|
||||
</el-card>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
currentItem: ['1', '2', '3', '4']
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
>>> .el-collapse {
|
||||
border: none;
|
||||
}
|
||||
|
||||
>>> .el-divider--horizontal {
|
||||
margin: 0px;
|
||||
}
|
||||
>>> .el-tag {
|
||||
padding: 0px 30px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/assets/style/element-variables.scss';
|
||||
.title {
|
||||
border: 1px solid #EDEDED;
|
||||
border-left-width: 5px;
|
||||
border-left-color: $--color-primary;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.title p {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 16px;
|
||||
margin: 0px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.title p span {
|
||||
font-size: 20px;
|
||||
color: $--color-primary;
|
||||
}
|
||||
|
||||
.item-list {
|
||||
margin: 0px;
|
||||
}
|
||||
.item-list li {
|
||||
margin: 10px 0px;
|
||||
}
|
||||
|
||||
.item {
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user