前后端分目录
This commit is contained in:
andywang
280
h5-auth-manager/src/components/common/Header.vue
Normal file
280
h5-auth-manager/src/components/common/Header.vue
Normal file
@@ -0,0 +1,280 @@
|
||||
<template>
|
||||
<div class="header">
|
||||
<!-- 折叠按钮 -->
|
||||
<div class="collapse-btn" @click="collapseChage">
|
||||
<i v-if="!collapse" class="el-icon-s-fold"></i>
|
||||
<i v-else class="el-icon-s-unfold"></i>
|
||||
</div>
|
||||
<div class="logo">权限系统</div>
|
||||
<div class="header-right">
|
||||
<!-- {{fielduser}} -->
|
||||
<!-- {{ruleList}} -->
|
||||
|
||||
<!-- {{fielduser==''}} -->
|
||||
<!-- {{ruleList==null}} -->
|
||||
<div class="header-user-con">
|
||||
<!-- -->
|
||||
<div style="display: flex;font-size: 14px;">
|
||||
|
||||
<div v-for="value in link.a" class="header_link" @click="go(value)">
|
||||
{{value.title}}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 全屏显示 -->
|
||||
<div class="btn-fullscreen" @click="handleFullScreen">
|
||||
<el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
|
||||
<i class="el-icon-rank"></i>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
||||
<!-- 用户头像 -->
|
||||
<div class="user-avator">
|
||||
<img src="../../assets/img/img.jpg" />
|
||||
</div>
|
||||
<!-- 用户名下拉菜单 -->
|
||||
<el-dropdown class="user-name" trigger="click" @command="handleCommand">
|
||||
<span class="el-dropdown-link">
|
||||
{{username}}
|
||||
<i class="el-icon-caret-bottom"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import bus from '../common/bus';
|
||||
import {
|
||||
getLogout
|
||||
} from '../../api/index';
|
||||
import linkOr from '@/utils/link.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
collapse: false,
|
||||
fullscreen: false,
|
||||
name: '',
|
||||
message: 2,
|
||||
link:[]
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.link = linkOr
|
||||
bus.$on('collapseHeader', res => {
|
||||
this.busCollapseChage(res)
|
||||
})
|
||||
bus.$on('regetcache',res=>{
|
||||
|
||||
this.$store.dispatch('regetcache',res)
|
||||
})
|
||||
|
||||
|
||||
|
||||
this.$store.commit('setbarShrink', this.collapse)
|
||||
},
|
||||
computed: {
|
||||
username() {
|
||||
if (localStorage.getItem('ms_username')) {
|
||||
return localStorage.getItem('ms_username');
|
||||
} else {
|
||||
return "未命名"
|
||||
}
|
||||
},
|
||||
fielduser() {
|
||||
if (this.$store.state.FieldUser) {
|
||||
return this.$store.state.FieldUser.data.fieldList
|
||||
} else {
|
||||
|
||||
return null
|
||||
}
|
||||
},
|
||||
ruleList() {
|
||||
if (this.$store.state.RuleList) {
|
||||
return this.$store.state.RuleList
|
||||
|
||||
} else {
|
||||
|
||||
return null
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
go(value) {
|
||||
var url = window.location.href
|
||||
|
||||
if (value[url.split('#')[0]]) {
|
||||
window.open(value[url.split('#')[0]])
|
||||
} else {
|
||||
this.$message.error('请检查跳转配置')
|
||||
}
|
||||
},
|
||||
ReGetStorage() {
|
||||
|
||||
if (this.Loading) {
|
||||
return
|
||||
}
|
||||
|
||||
this.mixinReGetStorage()
|
||||
},
|
||||
// 用户名下拉菜单选择事件
|
||||
handleCommand(command) {
|
||||
if (command == 'loginout') {
|
||||
// 调用退出登录接口
|
||||
getLogout();
|
||||
localStorage.removeItem("engineId");
|
||||
// localStorage.removeItem("token");
|
||||
localStorage.removeItem('ms_username');
|
||||
this.$router.push('/login');
|
||||
}
|
||||
},
|
||||
// Bus侧边栏折叠
|
||||
busCollapseChage(res) {
|
||||
this.collapse = res;
|
||||
this.$store.commit('setbarShrink', this.collapse)
|
||||
bus.$emit('collapse', this.collapse);
|
||||
},
|
||||
// 侧边栏折叠
|
||||
collapseChage() {
|
||||
this.collapse = !this.collapse;
|
||||
this.$store.commit('setbarShrink', this.collapse)
|
||||
bus.$emit('collapse', this.collapse);
|
||||
},
|
||||
// 全屏事件
|
||||
handleFullScreen() {
|
||||
let element = document.documentElement;
|
||||
if (this.fullscreen) {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen();
|
||||
} else if (document.webkitCancelFullScreen) {
|
||||
document.webkitCancelFullScreen();
|
||||
} else if (document.mozCancelFullScreen) {
|
||||
document.mozCancelFullScreen();
|
||||
} else if (document.msExitFullscreen) {
|
||||
document.msExitFullscreen();
|
||||
}
|
||||
} else {
|
||||
if (element.requestFullscreen) {
|
||||
element.requestFullscreen();
|
||||
} else if (element.webkitRequestFullScreen) {
|
||||
element.webkitRequestFullScreen();
|
||||
} else if (element.mozRequestFullScreen) {
|
||||
element.mozRequestFullScreen();
|
||||
} else if (element.msRequestFullscreen) {
|
||||
// IE11
|
||||
element.msRequestFullscreen();
|
||||
}
|
||||
}
|
||||
this.fullscreen = !this.fullscreen;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (document.body.clientWidth < 1500) {
|
||||
this.collapseChage();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.header {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
font-size: 22px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.collapse-btn {
|
||||
float: left;
|
||||
padding: 0 21px;
|
||||
cursor: pointer;
|
||||
line-height: 70px;
|
||||
}
|
||||
.header_link {
|
||||
padding: 4px;
|
||||
margin-right: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.header_link:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.header .logo {
|
||||
float: left;
|
||||
width: 250px;
|
||||
line-height: 70px;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
float: right;
|
||||
padding-right: 50px;
|
||||
}
|
||||
|
||||
.header-user-con {
|
||||
display: flex;
|
||||
height: 70px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-fullscreen {
|
||||
transform: rotate(45deg);
|
||||
margin-right: 5px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.btn-bell,
|
||||
.btn-fullscreen {
|
||||
position: relative;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
border-radius: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-bell-badge {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -2px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
background: #f56c6c;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-bell .el-icon-bell {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.user-avator {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.user-avator img {
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.el-dropdown-link {
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.el-dropdown-menu__item {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
51
h5-auth-manager/src/components/common/Home.vue
Normal file
51
h5-auth-manager/src/components/common/Home.vue
Normal file
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<v-head></v-head>
|
||||
<v-sidebar></v-sidebar>
|
||||
<div class="content-box" :class="{'content-collapse':collapse}">
|
||||
<v-tags></v-tags>
|
||||
<div class="content" >
|
||||
<transition name="move" mode="out-in">
|
||||
<keep-alive :include="tagsList">
|
||||
<router-view></router-view>
|
||||
</keep-alive>
|
||||
</transition>
|
||||
<el-backtop target=".content"></el-backtop>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vHead from './Header.vue';
|
||||
import vSidebar from './Sidebar.vue';
|
||||
import vTags from './Tags.vue';
|
||||
import bus from './bus';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tagsList: [],
|
||||
collapse: false
|
||||
};
|
||||
},
|
||||
components: {
|
||||
vHead,
|
||||
vSidebar,
|
||||
vTags
|
||||
},
|
||||
created() {
|
||||
bus.$on('collapse-content', msg => {
|
||||
this.collapse = msg;
|
||||
});
|
||||
|
||||
// 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
|
||||
bus.$on('tags', msg => {
|
||||
let arr = [];
|
||||
for (let i = 0, len = msg.length; i < len; i++) {
|
||||
msg[i].name && arr.push(msg[i].name);
|
||||
}
|
||||
this.tagsList = arr;
|
||||
});
|
||||
},
|
||||
};
|
||||
</script>
|
||||
107
h5-auth-manager/src/components/common/Sidebar.vue
Normal file
107
h5-auth-manager/src/components/common/Sidebar.vue
Normal file
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<div class="sidebar">
|
||||
<el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#324157"
|
||||
text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened :router="true">
|
||||
<template v-for="item in items">
|
||||
<template v-if="item.subs">
|
||||
<el-submenu :index="item.index" :key="item.index">
|
||||
<template slot="title">
|
||||
<i :class="item.icon"></i>
|
||||
<span slot="title">{{ item.title }}</span>
|
||||
</template>
|
||||
<template v-for="subItem in item.subs">
|
||||
<el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
|
||||
<template slot="title">{{ subItem.title }}</template>
|
||||
<el-menu-item v-for="(threeItem,i) in subItem.subs" :key="i" :index="threeItem.index">{{ threeItem.title }}</el-menu-item>
|
||||
</el-submenu>
|
||||
<el-menu-item v-else :index="subItem.index" :key="subItem.index">{{ subItem.title }}</el-menu-item>
|
||||
</template>
|
||||
</el-submenu>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-menu-item :index="item.index" :key="item.index">
|
||||
<i :class="item.icon"></i>
|
||||
<span slot="title">{{ item.title }}</span>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</template>
|
||||
</el-menu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bus from './bus';
|
||||
import {
|
||||
getMenus,
|
||||
|
||||
} from '../../api/index';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
collapse: false,
|
||||
items: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
onRoutes() {
|
||||
return this.$route.path
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 通过 Event Bus 进行组件间通信，来折叠侧边栏
|
||||
bus.$on('collapse', msg => {
|
||||
this.collapse = msg;
|
||||
// bus.$emit('setcanvasn',msg)
|
||||
bus.$emit('collapse-content', msg);
|
||||
});
|
||||
|
||||
// 获取菜单接口
|
||||
this.getMenus()
|
||||
// refreshCache()
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
async getMenus() {
|
||||
const data = await getMenus({entity:{resourceSystem:'Auth'}});
|
||||
// console.log('菜单接口返回的数据',data);
|
||||
if (data.status === "0") {
|
||||
this.$message.error(data.msg);
|
||||
if (data.error === "01000103") {
|
||||
this.$router.push('/login')
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
this.items = data.data;
|
||||
if(this.items.length == 0){
|
||||
this.$message.error('您没有导航权限,请联系管理员');
|
||||
}
|
||||
// console.log("items", this.items);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sidebar {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 70px;
|
||||
bottom: 0;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.sidebar::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.sidebar-el-menu:not(.el-menu--collapse) {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.sidebar>ul {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
186
h5-auth-manager/src/components/common/Tags.vue
Normal file
186
h5-auth-manager/src/components/common/Tags.vue
Normal file
@@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<div class="tags" v-if="showTags">
|
||||
<ul>
|
||||
<li class="tags-li" v-for="(item,index) in tagsList" :class="{'active': isActive(item.path)}" :key="index">
|
||||
<router-link :to="item.path" class="tags-li-title">
|
||||
{{item.title}}
|
||||
</router-link>
|
||||
<span class="tags-li-icon" @click="closeTags(index)"><i class="el-icon-close"></i></span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tags-close-box">
|
||||
<el-dropdown @command="handleTags">
|
||||
<el-button size="mini" type="primary">
|
||||
标签选项<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</el-button>
|
||||
<el-dropdown-menu size="small" slot="dropdown">
|
||||
<el-dropdown-item command="other">关闭其他</el-dropdown-item>
|
||||
<el-dropdown-item command="all">关闭所有</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bus from './bus';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tagsList: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isActive(path) {
|
||||
return path === this.$route.fullPath;
|
||||
},
|
||||
// 关闭单个标签
|
||||
closeTags(index) {
|
||||
const delItem = this.tagsList.splice(index, 1)[0];
|
||||
const item = this.tagsList[index] ? this.tagsList[index] : this.tagsList[index - 1];
|
||||
if (item) {
|
||||
delItem.path === this.$route.fullPath && this.$router.push(item.path);
|
||||
}else{
|
||||
this.$router.push('/');
|
||||
}
|
||||
},
|
||||
// 关闭全部标签
|
||||
closeAll(){
|
||||
this.tagsList = [];
|
||||
this.$router.push('/');
|
||||
},
|
||||
// 关闭其他标签
|
||||
closeOther(){
|
||||
const curItem = this.tagsList.filter(item => {
|
||||
return item.path === this.$route.fullPath;
|
||||
})
|
||||
this.tagsList = curItem;
|
||||
},
|
||||
// 设置标签
|
||||
setTags(route){
|
||||
const isExist = this.tagsList.some(item => {
|
||||
return item.path === route.fullPath;
|
||||
})
|
||||
if(!isExist){
|
||||
if(this.tagsList.length >= 8){
|
||||
this.tagsList.shift();
|
||||
}
|
||||
this.tagsList.push({
|
||||
title: route.meta.title,
|
||||
path: route.fullPath,
|
||||
name: route.matched[1].components.default.name
|
||||
})
|
||||
}
|
||||
bus.$emit('tags', this.tagsList);
|
||||
},
|
||||
handleTags(command){
|
||||
command === 'other' ? this.closeOther() : this.closeAll();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
showTags() {
|
||||
return this.tagsList.length > 0;
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
$route(newValue, oldValue){
|
||||
this.setTags(newValue);
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.setTags(this.$route);
|
||||
// 监听关闭当前页面的标签页
|
||||
bus.$on('close_current_tags', () => {
|
||||
for (let i = 0, len = this.tagsList.length; i < len; i++) {
|
||||
const item = this.tagsList[i];
|
||||
if(item.path === this.$route.fullPath){
|
||||
if(i < len - 1){
|
||||
this.$router.push(this.tagsList[i+1].path);
|
||||
}else if(i > 0){
|
||||
this.$router.push(this.tagsList[i-1].path);
|
||||
}else{
|
||||
this.$router.push('/');
|
||||
}
|
||||
this.tagsList.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
.tags {
|
||||
position: relative;
|
||||
height: 30px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
padding-right: 120px;
|
||||
box-shadow: 0 5px 10px #ddd;
|
||||
}
|
||||
|
||||
.tags ul {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tags-li {
|
||||
float: left;
|
||||
margin: 3px 5px 2px 3px;
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
height: 23px;
|
||||
line-height: 23px;
|
||||
border: 1px solid #e9eaec;
|
||||
background: #fff;
|
||||
padding: 0 5px 0 12px;
|
||||
vertical-align: middle;
|
||||
color: #666;
|
||||
-webkit-transition: all .3s ease-in;
|
||||
-moz-transition: all .3s ease-in;
|
||||
transition: all .3s ease-in;
|
||||
}
|
||||
|
||||
.tags-li:not(.active):hover {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
.tags-li.active {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tags-li-title {
|
||||
float: left;
|
||||
max-width: 80px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin-right: 5px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.tags-li.active .tags-li-title {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tags-close-box {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
box-sizing: border-box;
|
||||
padding-top: 1px;
|
||||
text-align: center;
|
||||
width: 110px;
|
||||
height: 30px;
|
||||
background: #fff;
|
||||
box-shadow: -3px 0 15px 3px rgba(0, 0, 0, .1);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
</style>
|
||||
6
h5-auth-manager/src/components/common/bus.js
Normal file
6
h5-auth-manager/src/components/common/bus.js
Normal file
@@ -0,0 +1,6 @@
|
||||
import Vue from 'vue';
|
||||
|
||||
// 使用 Event Bus
|
||||
const bus = new Vue();
|
||||
|
||||
export default bus;
|
||||
55
h5-auth-manager/src/components/common/charts.vue
Normal file
55
h5-auth-manager/src/components/common/charts.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div :id="sid" :style="{height: height,width:width}">
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
export default {
|
||||
props: {
|
||||
sid: {
|
||||
type: String,
|
||||
default: 'echartsId'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
},
|
||||
option: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chartDom: null,
|
||||
myChart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.chartDom = document.getElementById(this.sid);
|
||||
this.myChart = echarts.init(this.chartDom);
|
||||
this.myChart.setOption(this.option);
|
||||
},
|
||||
watch: {
|
||||
option: {
|
||||
handler: function() {
|
||||
this.myChart.clear()
|
||||
this.myChart.setOption(this.option);
|
||||
},
|
||||
// 开启深度监听：只要obj中的任何一个属性发生改变，都会触发相应的代码
|
||||
deep: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
378
h5-auth-manager/src/components/models/addResourceDialog.vue
Normal file
378
h5-auth-manager/src/components/models/addResourceDialog.vue
Normal file
@@ -0,0 +1,378 @@
|
||||
<template>
|
||||
<div class="user-edit-wrapper">
|
||||
<el-dialog title="资源配置" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
|
||||
<el-form ref="myform" :model="form" :rules="rules" label-width="80px" label-position="left">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<div class="grid-conten">
|
||||
<el-form-item label="资源编号" prop="code">
|
||||
<el-input v-model="form.code" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="grid-conten">
|
||||
<el-form-item label="资源名" prop="name">
|
||||
<el-input v-model="form.name" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="grid-conten">
|
||||
<el-form-item label="icon" prop="icon">
|
||||
<el-input v-model="form.icon" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<div class="grid-conten">
|
||||
<el-form-item label="资源描述" prop="des">
|
||||
<el-input v-model="form.des" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="grid-conten">
|
||||
<el-form-item label="访问路径" prop="url">
|
||||
<el-input v-model="form.url" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<div class="grid-conten">
|
||||
<el-form-item label="菜单排序" prop="sort">
|
||||
<el-input v-model="form.sort" autocomplete="off" minlength="1" maxlength="3"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<div class="grid-conten">
|
||||
<el-form-item label="系统分类" prop="sort">
|
||||
|
||||
<el-select v-model="form.resourceSystem" placeholder="请选择" @change="gettreeList(parentId)">
|
||||
<el-option :label="value.label" :value="value.value" v-for="value in systemList" :key="value.value"></el-option>
|
||||
|
||||
</el-select>
|
||||
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-divider></el-divider>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<div class="grid-conten">
|
||||
<h3 style="margin-bottom:30px">
|
||||
父类资源：
|
||||
</h3>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<div class="grid-conten">
|
||||
<el-tree ref="tree" :props="props" node-key="resourceId" :data="systemList.find(x=>x.value==this.form.resourceSystem)?systemList.find(x=>x.value==this.form.resourceSystem).data:[]" :key="num"
|
||||
:current-node-key="checkedKeys" :highlight-current="true" @node-click="handleNodeClick">
|
||||
</el-tree>
|
||||
<div style="padding: 20px;display: flex;justify-content: flex-end;">
|
||||
<el-button type="primary" @click="stick" size="mini">置为顶层目录</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-form-item class="btn-group">
|
||||
<el-button type="primary" @click="onSubmit('myform')">确认</el-button>
|
||||
<el-button @click="handleClose()">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
getResourceTreeMenu,
|
||||
resourceUpdate,
|
||||
resourceSave
|
||||
} from '@/api/index.js'
|
||||
import mixin from '@/utils/mixin.js'
|
||||
export default {
|
||||
name: 'resourceDialog',
|
||||
mixins:[mixin],
|
||||
props: {
|
||||
dialogVisible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
dataItem: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dataItem(newVal) {
|
||||
console.log(newVal)
|
||||
|
||||
},
|
||||
dialogVisible: function(val, oldVla) {
|
||||
if (this.$refs['myform'] != undefined) {
|
||||
this.$refs["myform"].resetFields();
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.form.resourceSystem =this.systemList[0]?this.systemList[0].value:''
|
||||
|
||||
if(this.dataItem.name){
|
||||
// this.dataItem = newVal;
|
||||
if (JSON.stringify(this.dataItem) !== '{}') {
|
||||
this.form = {
|
||||
"name": this.dataItem.name,
|
||||
"code": this.dataItem.code,
|
||||
"url": this.dataItem.url,
|
||||
"parentId": this.dataItem.parentId,
|
||||
"des": this.dataItem.des,
|
||||
"icon": this.dataItem.icon,
|
||||
"sort": this.dataItem.sort,
|
||||
"resourceSystem": this.dataItem.resourceSystem,
|
||||
}
|
||||
this.parentId = this.dataItem.parentId;
|
||||
this.checkedKeys = this.dataItem.parentId;
|
||||
console.log(this.dataItem,this.form)
|
||||
// this.resourceSystem = this.dataItem.resourceSystem
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
this.gettreeList(this.parentId);
|
||||
},
|
||||
|
||||
data() {
|
||||
let checkSort = (rule, value, callback) => {
|
||||
console.log(value)
|
||||
if (value === 0) {
|
||||
return callback(new Error('超出可选范围（1-100）'));
|
||||
}
|
||||
if (!value) {
|
||||
return callback(new Error('菜单排序不能为空'));
|
||||
} else {
|
||||
if (value > 0 && value <= 100) {
|
||||
callback();
|
||||
} else {
|
||||
return callback(new Error('超出可选范围（1-100）'));
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
return {
|
||||
num:0,
|
||||
form: {
|
||||
name: "",
|
||||
code: "",
|
||||
url: "",
|
||||
parentId: 0,
|
||||
des: "",
|
||||
icon: "",
|
||||
sort: 1,
|
||||
resourceSystem: ""
|
||||
},
|
||||
parentId: 0,
|
||||
rules: {
|
||||
name: [{
|
||||
required: true,
|
||||
message: '请输入资源名称',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
code: [{
|
||||
required: true,
|
||||
message: '请输入资源编号',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
des: [{
|
||||
required: true,
|
||||
message: '请输入资源描述',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
sort: [{
|
||||
validator: checkSort,
|
||||
required: true,
|
||||
trigger: 'blur'
|
||||
}],
|
||||
resourceSystem: [{
|
||||
required: true,
|
||||
message: '请选择系统分类',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
},
|
||||
props: {
|
||||
label: 'name',
|
||||
children: 'children'
|
||||
},
|
||||
|
||||
// 默认选中节点
|
||||
checkedKeys: ""
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
stick(){
|
||||
this.parentId = 0
|
||||
this.form.parentId = 0
|
||||
this.checkedKeys = 0
|
||||
this.num++
|
||||
|
||||
console.log(this.parentId,this.form.parentId,this.checkedKeys)
|
||||
},
|
||||
handleNodeClick(data) {
|
||||
this.form.parentId = data.resourceId;
|
||||
},
|
||||
getTreeData(data) {
|
||||
let treeArr = data;
|
||||
let result = []
|
||||
for (let i = 0; i < treeArr.length; i++) {
|
||||
let item = treeArr[i];
|
||||
if (item.parentId === 0) {
|
||||
result.push(item);
|
||||
}
|
||||
}
|
||||
this.data2treeDG(treeArr, result);
|
||||
},
|
||||
data2treeDG(datas, dataArray, type) {
|
||||
for (let j = 0; j < dataArray.length; j++) {
|
||||
let dataArrayIndex = dataArray[j];
|
||||
let childrenArray = [];
|
||||
let Id = dataArrayIndex.resourceId;
|
||||
if (dataArrayIndex.checked) {
|
||||
this.checkedKeys = dataArrayIndex.resourceId
|
||||
}
|
||||
for (let i = 0; i < datas.length; i++) {
|
||||
let data = datas[i];
|
||||
let parentId = data.parentId;
|
||||
if (parentId == Id) { //判断是否为儿子节点
|
||||
childrenArray.push(data);
|
||||
}
|
||||
}
|
||||
dataArrayIndex.children = childrenArray;
|
||||
if (childrenArray.length > 0) { //有儿子节点则递归
|
||||
this.data2treeDG(datas, childrenArray)
|
||||
}
|
||||
}
|
||||
|
||||
this.systemList.find(x=>x.value==this.form.resourceSystem).data = dataArray;
|
||||
// console.log(this.systemList)
|
||||
},
|
||||
// 新增或编辑
|
||||
onSubmit(myForm) {
|
||||
let form = this.form;
|
||||
this.$refs[myForm].validate((valid) => {
|
||||
if (valid) {
|
||||
if (JSON.stringify(this.dataItem) == '{}') {
|
||||
// 新增
|
||||
this.saveResource(form);
|
||||
} else {
|
||||
// 编辑
|
||||
form.resourceId = this.dataItem.resourceId
|
||||
this.updateResource(form);
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
async updateResource(form) {
|
||||
const data = await resourceUpdate(form)
|
||||
if (data.status != "0") {
|
||||
if (data.data) {
|
||||
this.$message({
|
||||
message: '修改成功！',
|
||||
type: 'success'
|
||||
});
|
||||
this.handleClose();
|
||||
}
|
||||
}
|
||||
},
|
||||
async saveResource(form) {
|
||||
const data = await resourceSave(form)
|
||||
if (data.status != "0") {
|
||||
if (data.data) {
|
||||
this.$message({
|
||||
message: '添加成功！',
|
||||
type: 'success'
|
||||
});
|
||||
this.handleClose();
|
||||
}
|
||||
}
|
||||
},
|
||||
async gettreeList(id) {
|
||||
if(this.systemList.find(x=>x.value==this.form.resourceSystem).data) return
|
||||
const data = await getResourceTreeMenu({
|
||||
"parentId": id,
|
||||
entity:{
|
||||
"resourceSystem":this.form.resourceSystem
|
||||
}
|
||||
})
|
||||
if (data.status != "0") {
|
||||
this.getTreeData(data.data);
|
||||
this.$nextTick(() => {
|
||||
if (this.parentId != 0) {
|
||||
this.$refs.tree.setCurrentKey(this.checkedKeys)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
handleClose() {
|
||||
this.form = {
|
||||
"name": "",
|
||||
"code": "",
|
||||
"url": "",
|
||||
"parentId": null,
|
||||
"des": "",
|
||||
"icon": "",
|
||||
"sort": 1,
|
||||
"resourceSystem": "EngineX"
|
||||
}
|
||||
this.systemList.forEach(value=>{
|
||||
value.data = null
|
||||
})
|
||||
|
||||
|
||||
this.$refs["myform"].resetFields();
|
||||
this.$emit('closeEvent');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-dialog__body {
|
||||
padding: 20px 40px;
|
||||
}
|
||||
|
||||
.user-edit-wrapper .el-input {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.user-edit-wrapper .btn-group {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.user-edit-wrapper .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
|
||||
background: #409EFF;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.user-edit-wrapper .is-checked {
|
||||
background: #F5F7FA;
|
||||
}
|
||||
</style>
|
||||
275
h5-auth-manager/src/components/models/addUserDialog.vue
Normal file
275
h5-auth-manager/src/components/models/addUserDialog.vue
Normal file
@@ -0,0 +1,275 @@
|
||||
<template>
|
||||
<div class="user-edit-wrapper">
|
||||
<el-dialog title="配置账号" :visible.sync="dialogVisible" width="50%" @open="open" :before-close="handleClose">
|
||||
<el-form ref="myform" :model="form" :rules="rules" label-width="80px" label-position="left">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<div class="grid-conten">
|
||||
<el-form-item label="账号" prop="account">
|
||||
<el-input v-model="form.account"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="grid-conten">
|
||||
<el-form-item label="组织" prop="organId">
|
||||
<el-select v-model="form.organId" :disabled="listOrganArr.length==1?true:false" placeholder="" @change="organChange">
|
||||
<el-option v-for="item in listOrganArr" :key="item.organId" :label="item.name" :value="item.organId"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="grid-conten">
|
||||
<el-form-item label="角色">
|
||||
<el-select v-model="form.sysRole" placeholder="">
|
||||
<el-option v-for="item in validRoleArr" :key="item.roleId" :label="item.roleName" :value="item.roleId"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-divider></el-divider>
|
||||
<h3 style="margin-bottom:40px">
|
||||
使用人信息：
|
||||
</h3>
|
||||
|
||||
<el-row>
|
||||
|
||||
<el-col :span="12">
|
||||
<div class="grid-conten">
|
||||
<el-form-item label="姓名" prop="nickName">
|
||||
<el-input v-model="form.nickName"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="grid-conten">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<div class="grid-conten">
|
||||
<el-form-item label="手机号" prop="cellphone">
|
||||
<el-input v-model="form.cellphone"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="grid-conten">
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="form.email"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-form-item class="btn-group">
|
||||
<el-button type="primary" @click="onSubmit('myform')">确认</el-button>
|
||||
<el-button @click="handleClose()">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
getAllValidRole,
|
||||
saveUser,
|
||||
updateUser
|
||||
} from '@/api/index.js'
|
||||
export default {
|
||||
name: 'userDialog',
|
||||
props: {
|
||||
dialogVisible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
dataItem: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
listOrganArr: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
watch: {
|
||||
dataItem(newVal) {
|
||||
this.dataItem = newVal;
|
||||
if (JSON.stringify(newVal) !== '{}') {
|
||||
this.validRole(newVal.sysOrgan.organId);
|
||||
this.disabled = true;
|
||||
this.form = {
|
||||
organId: newVal.organId,
|
||||
remark: newVal.remark,
|
||||
account: newVal.account,
|
||||
nickName: newVal.nickName,
|
||||
cellphone: newVal.cellphone,
|
||||
email: newVal.email,
|
||||
sysRole: newVal.sysRole.roleId
|
||||
}
|
||||
}else{
|
||||
this.form = {
|
||||
organId: '',
|
||||
remark: '',
|
||||
account: '',
|
||||
nickName: '',
|
||||
cellphone: '',
|
||||
email: '',
|
||||
sysRole: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
dialogVisible: function(val, oldVla) {
|
||||
console.log(1)
|
||||
if (this.$refs['myform'] != undefined) {
|
||||
this.$refs["myform"].resetFields();
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
||||
return {
|
||||
text: "text",
|
||||
form: {
|
||||
organId: '',
|
||||
remark: '',
|
||||
account: '',
|
||||
nickName: '',
|
||||
cellphone: '',
|
||||
email: '',
|
||||
sysRole: ''
|
||||
},
|
||||
disabled: false,
|
||||
validRoleArr: [],
|
||||
rules: {
|
||||
account: [{
|
||||
required: true,
|
||||
message: '请输入账号',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
nickName: [{
|
||||
required: true,
|
||||
message: '请输入姓名',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
|
||||
organId: [{
|
||||
required: true,
|
||||
message: '请选择组织',
|
||||
trigger: 'change'
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
open() {
|
||||
if (this.listOrganArr.length == 1) {
|
||||
this.form.organId = this.listOrganArr[0].id
|
||||
this.organChange(this.listOrganArr[0].id)
|
||||
}
|
||||
},
|
||||
organChange(e) {
|
||||
this.validRoleArr = [];
|
||||
this.form.sysRole = "";
|
||||
this.validRole(e);
|
||||
},
|
||||
// 新增或编辑名单库
|
||||
onSubmit(myForm) {
|
||||
let form = JSON.parse(JSON.stringify(this.form));
|
||||
form.sysRole = {
|
||||
roleId: form.sysRole
|
||||
}
|
||||
this.$refs[myForm].validate((valid) => {
|
||||
if (valid) {
|
||||
if (JSON.stringify(this.dataItem) == '{}') {
|
||||
// 新增
|
||||
this.save(form);
|
||||
} else {
|
||||
// 编辑
|
||||
form.userId = this.dataItem.userId
|
||||
this.update(form);
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
async save(form) {
|
||||
const data = await saveUser(form)
|
||||
if (data.status != "0") {
|
||||
this.$message({
|
||||
message: '添加成功！',
|
||||
type: 'success'
|
||||
});
|
||||
this.handleClose();
|
||||
}
|
||||
|
||||
},
|
||||
async update(form) {
|
||||
const data = await updateUser(form)
|
||||
if (data.status != "0") {
|
||||
if (data.data) {
|
||||
this.$message({
|
||||
message: '修改成功！',
|
||||
type: 'success'
|
||||
});
|
||||
this.handleClose();
|
||||
}
|
||||
}
|
||||
},
|
||||
async validRole(id) {
|
||||
const data = await getAllValidRole({
|
||||
"organId": id
|
||||
})
|
||||
if (data.status != "0") {
|
||||
this.validRoleArr = data.data
|
||||
}
|
||||
},
|
||||
handleClose() {
|
||||
this.form = {
|
||||
organId: '',
|
||||
remark: '',
|
||||
account: '',
|
||||
nickName: '',
|
||||
cellphone: '',
|
||||
email: '',
|
||||
sysRole: ''
|
||||
}
|
||||
this.validRoleArr = [];
|
||||
this.disabled = false;
|
||||
this.$emit('closeEvent');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-dialog__body {
|
||||
padding: 20px 40px;
|
||||
}
|
||||
|
||||
.user-edit-wrapper .el-input {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.user-edit-wrapper .btn-group {
|
||||
margin-top: 30px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,365 @@
|
||||
<template>
|
||||
<div class="user-edit-wrapper">
|
||||
<el-dialog title="角色配置" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
|
||||
<el-form ref="myform" :model="form" label-width="80px" label-position="left">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<div class="grid-conten">
|
||||
<el-form-item label="角色名">
|
||||
<el-input v-model="form.roleName" autocomplete="off" :disabled="disabled"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="grid-conten">
|
||||
<el-form-item label="所属组织">
|
||||
<el-select v-model="form.organId" :disabled="disabled">
|
||||
<el-option v-for="item in listOrganArr" :key="item.organId" :label="item.name" :value="item.organId"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-divider></el-divider>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<div class="grid-conten">
|
||||
<h3 style="margin-bottom:30px">
|
||||
功能权限：
|
||||
</h3>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="grid-conten">
|
||||
<!-- <h3 style="margin-bottom:30px">
|
||||
搜索引擎子权限：
|
||||
</h3> -->
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-tabs v-model="tabs" >
|
||||
<el-tab-pane :label="value.value" :name="value.value" v-for="value in systemList"></el-tab-pane>
|
||||
|
||||
</el-tabs>
|
||||
|
||||
|
||||
<div class="grid-conten">
|
||||
<el-tree ref="tree" :props="props" :data="treeList[tabs]" show-checkbox node-key="resourceId" :default-checked-keys="checkedKeys[tabs]"
|
||||
@check-change="findTreeChange">
|
||||
</el-tree>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="grid-conten">
|
||||
<!-- <el-tree
|
||||
ref="engineTree"
|
||||
:props="props"
|
||||
:data="engineList"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
:default-checked-keys="engineCheckedKeys"
|
||||
@check-change="engineTreeChange"
|
||||
>
|
||||
</el-tree> -->
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
|
||||
<el-form-item class="btn-group">
|
||||
|
||||
<el-button @click="handleClose()">取消</el-button>
|
||||
<el-button type="primary" @click="onSubmit()">确认</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
getFindtreeList,
|
||||
getEngineTree,
|
||||
insertRoleMenu,
|
||||
insertRoleEngine
|
||||
} from '@/api/index.js'
|
||||
import mixin from '@/utils/mixin.js'
|
||||
export default {
|
||||
name: 'authorityAssignmentDialog',
|
||||
mixins:[mixin],
|
||||
props: {
|
||||
dialogVisible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
dataItem: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
listOrganArr: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dataItem(newVal) {
|
||||
this.dataItem = newVal;
|
||||
if (JSON.stringify(newVal) !== '{}') {
|
||||
|
||||
this.tabs = this.systemList[0].value
|
||||
// console.log(this.systemList[0].value)
|
||||
this.systemList.forEach(value=>{
|
||||
|
||||
this.$set(this.treeList,value.value,null)
|
||||
this.$set(this.checkedKeys,value.value,[])
|
||||
|
||||
this.gettreeList(newVal.roleId,value.value);
|
||||
})
|
||||
// this.getEnginetreeList(newVal.id);
|
||||
this.form = {
|
||||
roleId: newVal.roleId,
|
||||
organId: newVal.organId,
|
||||
roleName: newVal.roleName
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
roleId: '',
|
||||
organId: '',
|
||||
roleName: ''
|
||||
},
|
||||
tabs:"",
|
||||
disabled: true,
|
||||
props: {
|
||||
label: 'name',
|
||||
children: 'children'
|
||||
},
|
||||
count: 1,
|
||||
treeList: {
|
||||
|
||||
},
|
||||
engineList: [],
|
||||
// 默认选中节点
|
||||
checkedKeys: {
|
||||
|
||||
},
|
||||
engineCheckedKeys: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
findTreeChange(data, checked, indeterminate) {
|
||||
let nodes = this.$refs.tree.getCheckedNodes()
|
||||
this.checkedKeys[this.tabs] = nodes.map(item => {
|
||||
return item.resourceId
|
||||
})
|
||||
|
||||
},
|
||||
// 搜索引擎子权限：
|
||||
// engineTreeChange(data,checked,indeterminate){
|
||||
// let nodes = this.$refs.engineTree.getCheckedNodes()
|
||||
// this.engineCheckedKeys = nodes.map(item => {
|
||||
// return item.id
|
||||
// })
|
||||
// },
|
||||
getTreeData(data, type,str) {
|
||||
|
||||
let treeArr = data;
|
||||
let result = []
|
||||
for (let i = 0; i < treeArr.length; i++) {
|
||||
let item = treeArr[i];
|
||||
if (item.parentId == 0) {
|
||||
result.push(item);
|
||||
}
|
||||
}
|
||||
this.data2treeDG(treeArr, result, type,str);
|
||||
},
|
||||
data2treeDG(datas, dataArray, type,str) {
|
||||
// console.log(datas, dataArray, type)
|
||||
|
||||
|
||||
for (let j = 0; j < dataArray.length; j++) {
|
||||
let dataArrayIndex = dataArray[j];
|
||||
let childrenArray = [];
|
||||
let Id = dataArrayIndex.resourceId;
|
||||
if (dataArrayIndex.checked) {
|
||||
(type == 1) ? this.checkedKeys[str].push(dataArrayIndex.resourceId): this.engineCheckedKeys.push(dataArrayIndex.resourceId)
|
||||
}
|
||||
for (let i = 0; i < datas.length; i++) {
|
||||
let data = datas[i];
|
||||
let parentId = data.parentId;
|
||||
if (parentId == Id) { //判断是否为儿子节点
|
||||
childrenArray.push(data);
|
||||
if (data.checked) {
|
||||
(type == 1) ? this.checkedKeys[str].push(data.resourceId): this.engineCheckedKeys.push(data.resourceId)
|
||||
}
|
||||
}
|
||||
}
|
||||
dataArrayIndex.children = childrenArray;
|
||||
if (childrenArray.length > 0) { //有儿子节点则递归
|
||||
this.data2treeDG(datas, childrenArray)
|
||||
}
|
||||
}
|
||||
if (type == 1) {
|
||||
this.treeList[str] = dataArray;
|
||||
console.log(this.treeList)
|
||||
} else {
|
||||
this.engineList = dataArray;
|
||||
}
|
||||
},
|
||||
// 新增或编辑
|
||||
onSubmit() {
|
||||
|
||||
console.log(this.checkedKeys)
|
||||
|
||||
this.checkedKeys.EngineX.forEach(value => {
|
||||
if (this.deepparentId(value,'EngineX')) {
|
||||
this.checkedKeys.EngineX.push(this.deepparentId(value,'EngineX'))
|
||||
}
|
||||
|
||||
})
|
||||
this.checkedKeys.DataX.forEach(value => {
|
||||
if (this.deepparentId(value,'DataX')) {
|
||||
this.checkedKeys.DataX.push(this.deepparentId(value,'DataX'))
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
let arr = []
|
||||
this.systemList.forEach(value=>{
|
||||
arr.push(...this.checkedKeys[value.value])
|
||||
})
|
||||
console.log(arr)
|
||||
arr = this.unique(arr)
|
||||
this.updateInsertRoleMenu({
|
||||
roleId: this.dataItem.roleId,
|
||||
ids: arr.join(',')
|
||||
})
|
||||
// 搜索引擎子权限：
|
||||
// this.updateInsertRoleEngine({
|
||||
// roleId:this.dataItem.id,
|
||||
// ids:this.engineCheckedKeys.join(',')
|
||||
// })
|
||||
},
|
||||
unique(arr) {
|
||||
return Array.from(new Set(arr))
|
||||
},
|
||||
deepparentId(id,str) {
|
||||
let num
|
||||
this.treeList[str].forEach(value => {
|
||||
if (value.resourceId == id) {
|
||||
num = value.parentId
|
||||
}
|
||||
if (value.children.length > 0) {
|
||||
value.children.forEach(item => {
|
||||
if (item.resourceId == id) {
|
||||
num = item.parentId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
})
|
||||
return num
|
||||
|
||||
|
||||
|
||||
},
|
||||
async updateInsertRoleMenu(form) {
|
||||
const data = await insertRoleMenu(form)
|
||||
if (data.status != "0") {
|
||||
if (data.data) {
|
||||
this.$message({
|
||||
message: '修改成功！',
|
||||
type: 'success'
|
||||
});
|
||||
this.handleClose();
|
||||
}
|
||||
}
|
||||
},
|
||||
async updateInsertRoleEngine(form) {
|
||||
const data = await insertRoleEngine(form)
|
||||
if (data.status != "0") {
|
||||
if (data.data) {
|
||||
this.$message({
|
||||
message: '修改成功！',
|
||||
type: 'success'
|
||||
});
|
||||
this.handleClose();
|
||||
}
|
||||
}
|
||||
},
|
||||
async gettreeList(id,str) {
|
||||
if(this.treeList[str]) return
|
||||
const data = await getFindtreeList({
|
||||
"roleId": id,
|
||||
"entity":{
|
||||
"resourceSystem":str
|
||||
}
|
||||
})
|
||||
if (data.status != "0") {
|
||||
data.data.forEach(value=>{
|
||||
if(!value.checked){
|
||||
data.data.forEach(item=>{
|
||||
if(item.resourceId==value.parentId){
|
||||
item.checked = false
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
this.getTreeData(data.data, 1,str);
|
||||
}
|
||||
},
|
||||
async getEnginetreeList(id) {
|
||||
const data = await getEngineTree({
|
||||
"roleId": id,
|
||||
|
||||
})
|
||||
if (data.status != "0") {
|
||||
|
||||
this.getTreeData(data.data, 2);
|
||||
}
|
||||
},
|
||||
handleClose() {
|
||||
this.form = {
|
||||
roleId: '',
|
||||
organId: '',
|
||||
roleName: ''
|
||||
}
|
||||
this.checkedKeys.EngineX = []
|
||||
this.checkedKeys.DataX = []
|
||||
|
||||
this.treeList.EngineX=null
|
||||
this.treeList.DataX=null
|
||||
|
||||
this.tabs = 'EngineX'
|
||||
this.$emit('closeEvent');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-dialog__body {
|
||||
padding: 20px 40px;
|
||||
}
|
||||
|
||||
.user-edit-wrapper .el-input {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.user-edit-wrapper .btn-group {
|
||||
margin-top: 30px;
|
||||
}
|
||||
</style>
|
||||
56
h5-auth-manager/src/components/page/403.vue
Normal file
56
h5-auth-manager/src/components/page/403.vue
Normal file
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div class="error-page">
|
||||
<div class="error-code">4<span>0</span>3</div>
|
||||
<div class="error-desc">啊哦~ 你没有权限访问该页面哦</div>
|
||||
<div class="error-handle">
|
||||
<router-link to="/">
|
||||
<el-button type="primary" size="large">返回首页</el-button>
|
||||
</router-link>
|
||||
<el-button class="error-btn" type="primary" size="large" @click="goBack">返回上一页</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
goBack(){
|
||||
this.$router.go(-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.error-page{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #f3f3f3;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.error-code{
|
||||
line-height: 1;
|
||||
font-size: 250px;
|
||||
font-weight: bolder;
|
||||
color: #f02d2d;
|
||||
}
|
||||
.error-code span{
|
||||
color: #00a854;
|
||||
}
|
||||
.error-desc{
|
||||
font-size: 30px;
|
||||
color: #777;
|
||||
}
|
||||
.error-handle{
|
||||
margin-top: 30px;
|
||||
padding-bottom: 200px;
|
||||
}
|
||||
.error-btn{
|
||||
margin-left: 100px;
|
||||
}
|
||||
</style>
|
||||
56
h5-auth-manager/src/components/page/404.vue
Normal file
56
h5-auth-manager/src/components/page/404.vue
Normal file
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div class="error-page">
|
||||
<div class="error-code">4<span>0</span>4</div>
|
||||
<div class="error-desc">啊哦~ 你所访问的页面不存在</div>
|
||||
<div class="error-handle">
|
||||
<router-link to="/">
|
||||
<el-button type="primary" size="large">返回首页</el-button>
|
||||
</router-link>
|
||||
<el-button class="error-btn" type="primary" size="large" @click="goBack">返回上一页</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
goBack(){
|
||||
this.$router.go(-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.error-page{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #f3f3f3;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.error-code{
|
||||
line-height: 1;
|
||||
font-size: 250px;
|
||||
font-weight: bolder;
|
||||
color: #2d8cf0;
|
||||
}
|
||||
.error-code span{
|
||||
color: #00a854;
|
||||
}
|
||||
.error-desc{
|
||||
font-size: 30px;
|
||||
color: #777;
|
||||
}
|
||||
.error-handle{
|
||||
margin-top: 30px;
|
||||
padding-bottom: 200px;
|
||||
}
|
||||
.error-btn{
|
||||
margin-left: 100px;
|
||||
}
|
||||
</style>
|
||||
420
h5-auth-manager/src/components/page/Dashboard.vue
Normal file
420
h5-auth-manager/src/components/page/Dashboard.vue
Normal file
@@ -0,0 +1,420 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-card shadow="hover" class="mgb20" style="height:252px;">
|
||||
<div class="user-info">
|
||||
<img src="../../assets/img/img.jpg" class="user-avator" alt />
|
||||
<div class="user-info-cont">
|
||||
<div class="user-info-name">{{name}}</div>
|
||||
<!-- <div>{{role}}</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-info-list">
|
||||
上次登录时间：
|
||||
<span>{{lastLoginTime | formatDate}}</span>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card shadow="hover" style="height:252px;">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>引擎详情</span>
|
||||
</div>
|
||||
<span v-if="engineRatio1">{{engineRatio1.engineName}}
|
||||
<el-progress :percentage="engineRatio1.useRatio" color="#42b983"></el-progress>
|
||||
</span>
|
||||
<span v-if="engineRatio2">{{engineRatio2.engineName}}
|
||||
<el-progress :percentage="engineRatio2.useRatio" color="#f1e05a"></el-progress>
|
||||
</span>
|
||||
<span v-if="engineRatio3">{{engineRatio3.engineName}}
|
||||
<el-progress :percentage="engineRatio3.useRatio"></el-progress>
|
||||
</span>
|
||||
<span v-if="engineRatio4">{{engineRatio4.engineName}}
|
||||
<el-progress :percentage="engineRatio4.useRatio" color="#f56c6c"></el-progress>
|
||||
</span>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<el-row :gutter="20" class="mgb20">
|
||||
<el-col :span="8">
|
||||
<el-card shadow="hover" :body-style="{padding: '0px'}">
|
||||
<div class="grid-content grid-con-1">
|
||||
<i class="el-icon-lx-people grid-con-icon"></i>
|
||||
<div class="grid-cont-right">
|
||||
<div class="grid-num">{{engineNum}}</div>
|
||||
<div>引擎</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-card shadow="hover" :body-style="{padding: '0px'}">
|
||||
<div class="grid-content grid-con-2">
|
||||
<i class="el-icon-lx-notice grid-con-icon"></i>
|
||||
<div class="grid-cont-right">
|
||||
<div class="grid-num">{{engineNodeNum}}</div>
|
||||
<div>决策节点</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-card shadow="hover" :body-style="{padding: '0px'}">
|
||||
<div class="grid-content grid-con-3">
|
||||
<i class="el-icon-lx-goods grid-con-icon"></i>
|
||||
<div class="grid-cont-right">
|
||||
<div class="grid-num">{{engineResultNum}}</div>
|
||||
<div>决策结果</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-card shadow="hover" style="height:403px;">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>活动日志</span>
|
||||
</div>
|
||||
<el-table :show-header="false" :data="todoList" style="width:100%;">
|
||||
<el-table-column>
|
||||
<template slot-scope="scope">
|
||||
<div class="todo-item">{{scope.row.opUserName}} {{scope.row.ip}} 在{{scope.row.startTime | formatDate}}
|
||||
{{scope.row.opName}}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-card shadow="hover">
|
||||
<charts sid="dashboardLeft" height='250px' width='100%' :option="options"></charts>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-card shadow="hover">
|
||||
<charts sid="dashboardRight" height='250px' width='100%' :option="options2"></charts>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import charts from '@/components/common/charts.vue'
|
||||
import bus from '../common/bus';
|
||||
import {
|
||||
getIndexInfo
|
||||
} from '../../api/index';
|
||||
export default {
|
||||
name: 'dashboard',
|
||||
components: {
|
||||
// Schart,
|
||||
charts
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
name: localStorage.getItem('ms_username'),
|
||||
lastLoginTime: null,
|
||||
engineNum: null,
|
||||
engineNodeNum: null,
|
||||
engineResultNum: null,
|
||||
engineRatio1: {},
|
||||
engineRatio2: {},
|
||||
engineRatio3: {},
|
||||
engineRatio4: {},
|
||||
|
||||
todoList: [],
|
||||
options: {
|
||||
title: {
|
||||
text: '最近几天引擎使用情况',
|
||||
left: 'center'
|
||||
},
|
||||
grid: {
|
||||
bottom: '10% '
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
data: []
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value'
|
||||
}],
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
},
|
||||
series: []
|
||||
|
||||
},
|
||||
options2: {
|
||||
title: {
|
||||
text: '最近几个月引擎使用趋势图',
|
||||
left: 'center'
|
||||
},
|
||||
grid: {
|
||||
bottom: '10% '
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
data: []
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value'
|
||||
}],
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
series: []
|
||||
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
role() {
|
||||
return this.name === 'admin' ? '超级管理员' : '普通用户';
|
||||
}
|
||||
},
|
||||
// created() {
|
||||
// this.handleListener();
|
||||
// this.changeDate();
|
||||
// },
|
||||
// activated() {
|
||||
// this.handleListener();
|
||||
// },
|
||||
// deactivated() {
|
||||
// window.removeEventListener('resize', this.renderChart);
|
||||
// bus.$off('collapse', this.handleBus);
|
||||
// },
|
||||
|
||||
created() {
|
||||
// this.getIndexInfos();
|
||||
},
|
||||
|
||||
methods: {
|
||||
changeDate() {
|
||||
const now = new Date().getTime();
|
||||
this.data.forEach((item, index) => {
|
||||
const date = new Date(now - (6 - index) * 86400000);
|
||||
item.name = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
|
||||
});
|
||||
},
|
||||
|
||||
async getIndexInfos() {
|
||||
const result = await getIndexInfo();
|
||||
const data = result.data;
|
||||
|
||||
|
||||
// 引擎基本信息
|
||||
this.engineNum = data.engineBaseInfo.engineNum;
|
||||
this.engineNodeNum = data.engineBaseInfo.engineNodeNum;
|
||||
this.engineResultNum = data.engineBaseInfo.engineResultNum;
|
||||
|
||||
// 引擎使用占比
|
||||
this.engineRatio1 = data.engineUseRatio[0];
|
||||
this.engineRatio2 = data.engineUseRatio[1];
|
||||
this.engineRatio3 = data.engineUseRatio[2];
|
||||
this.engineRatio4 = data.engineUseRatio[3];
|
||||
|
||||
// 最近几天引擎使用情况
|
||||
|
||||
|
||||
|
||||
var labelOption = {
|
||||
show: true,
|
||||
position: 'insideBottomRight',
|
||||
distance: 10,
|
||||
align: 'left',
|
||||
verticalAlign: 'middle',
|
||||
rotate: 90,
|
||||
// formatter: '{c} {name|{a}}',
|
||||
fontSize: 12,
|
||||
rich: {
|
||||
name: {}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
this.options.xAxis[0].data = data.recentDayMap.labels;
|
||||
let arr = data.recentDayMap.datasets.map(value => {
|
||||
return {
|
||||
name: value.label,
|
||||
type: 'bar',
|
||||
barGap: 0,
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: value.data
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
this.options.series = arr.filter((value,index)=>{
|
||||
return index<5
|
||||
})
|
||||
|
||||
// 最近几个月引擎使用情况
|
||||
this.options2.xAxis[0].data = data.recentMonthMap.labels;
|
||||
this.options2.series = data.recentMonthMap.datasets.map(value => {
|
||||
return {
|
||||
name: value.label,
|
||||
type: 'line',
|
||||
barGap: 0,
|
||||
label: labelOption,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: value.data
|
||||
}
|
||||
})
|
||||
|
||||
// 上次登录时间
|
||||
this.lastLoginTime = data.lastLoginTime;
|
||||
|
||||
// 活动日志
|
||||
this.todoList = data.logList;
|
||||
}
|
||||
},
|
||||
|
||||
filters: {
|
||||
formatDate: function(value) {
|
||||
let date = new Date(value);
|
||||
let y = date.getFullYear();
|
||||
let MM = date.getMonth() + 1;
|
||||
MM = MM < 10 ? ('0' + MM) : MM;
|
||||
let d = date.getDate();
|
||||
d = d < 10 ? ('0' + d) : d;
|
||||
let h = date.getHours();
|
||||
h = h < 10 ? ('0' + h) : h;
|
||||
let m = date.getMinutes();
|
||||
m = m < 10 ? ('0' + m) : m;
|
||||
let s = date.getSeconds();
|
||||
s = s < 10 ? ('0' + s) : s;
|
||||
return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.grid-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.grid-cont-right {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.grid-num {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.grid-con-icon {
|
||||
font-size: 50px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.grid-con-1 .grid-con-icon {
|
||||
background: rgb(45, 140, 240);
|
||||
}
|
||||
|
||||
.grid-con-1 .grid-num {
|
||||
color: rgb(45, 140, 240);
|
||||
}
|
||||
|
||||
.grid-con-2 .grid-con-icon {
|
||||
background: rgb(100, 213, 114);
|
||||
}
|
||||
|
||||
.grid-con-2 .grid-num {
|
||||
color: rgb(45, 140, 240);
|
||||
}
|
||||
|
||||
.grid-con-3 .grid-con-icon {
|
||||
background: rgb(242, 94, 67);
|
||||
}
|
||||
|
||||
.grid-con-3 .grid-num {
|
||||
color: rgb(242, 94, 67);
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 2px solid #ccc;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.user-avator {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.user-info-cont {
|
||||
padding-left: 50px;
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.user-info-cont div:first-child {
|
||||
font-size: 30px;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.user-info-list {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
.user-info-list span {
|
||||
margin-left: 70px;
|
||||
}
|
||||
|
||||
.mgb20 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.todo-item {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.todo-item-del {
|
||||
text-decoration: line-through;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.schart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
</style>
|
||||
47
h5-auth-manager/src/components/page/I18n.vue
Normal file
47
h5-auth-manager/src/components/page/I18n.vue
Normal file
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<section class="main">
|
||||
<div class="crumbs">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item><i class="el-icon-lx-global"></i> {{$t('i18n.breadcrumb')}}</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="container">
|
||||
<span>{{$t('i18n.tips')}}</span>
|
||||
<el-button type="primary" @click="$i18n.locale = $i18n.locale === 'zh'?'en':'zh';">{{$t('i18n.btn')}}</el-button>
|
||||
<div class="list">
|
||||
<h2>{{$t('i18n.title1')}}</h2>
|
||||
<p>{{$t('i18n.p1')}}</p>
|
||||
<p>{{$t('i18n.p2')}}</p>
|
||||
<p>{{$t('i18n.p3')}}</p>
|
||||
</div>
|
||||
<h2>{{$t('i18n.title2')}}</h2>
|
||||
<div>
|
||||
<i18n path="i18n.info" tag="p">
|
||||
<a place="action" href="https://element.eleme.cn/2.0/#/zh-CN/component/i18n">{{ $t('i18n.value') }}</a>
|
||||
</i18n>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
data(){
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.list{
|
||||
padding: 30px 0;
|
||||
}
|
||||
.list p{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
a{
|
||||
color: #409eff;
|
||||
}
|
||||
</style>
|
||||
225
h5-auth-manager/src/components/page/Icon.vue
Normal file
225
h5-auth-manager/src/components/page/Icon.vue
Normal file
@@ -0,0 +1,225 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="crumbs">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item><i class="el-icon-lx-emoji"></i> 自定义图标</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="container">
|
||||
<h2>使用方法</h2>
|
||||
<p style="line-height: 50px;">
|
||||
直接通过设置类名为 el-icon-lx-iconName 来使用即可。例如：（共{{iconList.length}}个图标）
|
||||
</p>
|
||||
<p class="example-p">
|
||||
<i class="el-icon-lx-redpacket_fill" style="font-size: 30px;color: #ff5900"></i>
|
||||
<span><i class="el-icon-lx-redpacket_fill"></i></span>
|
||||
</p>
|
||||
<p class="example-p">
|
||||
<i class="el-icon-lx-weibo" style="font-size: 30px;color:#fd5656"></i>
|
||||
<span><i class="el-icon-lx-weibo"></i></span>
|
||||
</p>
|
||||
<p class="example-p">
|
||||
<i class="el-icon-lx-emojifill" style="font-size: 30px;color: #ffc300"></i>
|
||||
<span><i class="el-icon-lx-emojifill"></i></span>
|
||||
</p>
|
||||
<br>
|
||||
<h2>图标</h2>
|
||||
<div class="search-box">
|
||||
<el-input class="search" size="large" v-model="keyword" clearable placeholder="请输入图标名称"></el-input>
|
||||
</div>
|
||||
<ul>
|
||||
<li class="icon-li" v-for="(item,index) in list" :key="index">
|
||||
<div class="icon-li-content">
|
||||
<i :class="`el-icon-lx-${item}`"></i>
|
||||
<span>{{item}}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: function(){
|
||||
return {
|
||||
keyword: '',
|
||||
iconList: [
|
||||
'attentionforbid',
|
||||
'attentionforbidfill',
|
||||
'attention',
|
||||
'attentionfill',
|
||||
'tag',
|
||||
'tagfill',
|
||||
'people',
|
||||
'peoplefill',
|
||||
'notice',
|
||||
'noticefill',
|
||||
'mobile',
|
||||
'mobilefill',
|
||||
'voice',
|
||||
'voicefill',
|
||||
'unlock',
|
||||
'lock',
|
||||
'home',
|
||||
'homefill',
|
||||
'delete',
|
||||
'deletefill',
|
||||
'notification',
|
||||
'notificationfill',
|
||||
'notificationforbidfill',
|
||||
'like',
|
||||
'likefill',
|
||||
'comment',
|
||||
'commentfill',
|
||||
'camera',
|
||||
'camerafill',
|
||||
'warn',
|
||||
'warnfill',
|
||||
'time',
|
||||
'timefill',
|
||||
'location',
|
||||
'locationfill',
|
||||
'favor',
|
||||
'favorfill',
|
||||
'skin',
|
||||
'skinfill',
|
||||
'news',
|
||||
'newsfill',
|
||||
'record',
|
||||
'recordfill',
|
||||
'emoji',
|
||||
'emojifill',
|
||||
'message',
|
||||
'messagefill',
|
||||
'goods',
|
||||
'goodsfill',
|
||||
'crown',
|
||||
'crownfill',
|
||||
'move',
|
||||
'add',
|
||||
'hot',
|
||||
'hotfill',
|
||||
'service',
|
||||
'servicefill',
|
||||
'present',
|
||||
'presentfill',
|
||||
'pic',
|
||||
'picfill',
|
||||
'rank',
|
||||
'rankfill',
|
||||
'male',
|
||||
'female',
|
||||
'down',
|
||||
'top',
|
||||
'recharge',
|
||||
'rechargefill',
|
||||
'forward',
|
||||
'forwardfill',
|
||||
'info',
|
||||
'infofill',
|
||||
'redpacket',
|
||||
'redpacket_fill',
|
||||
'roundadd',
|
||||
'roundaddfill',
|
||||
'friendadd',
|
||||
'friendaddfill',
|
||||
'cart',
|
||||
'cartfill',
|
||||
'more',
|
||||
'moreandroid',
|
||||
'back',
|
||||
'right',
|
||||
'shop',
|
||||
'shopfill',
|
||||
'question',
|
||||
'questionfill',
|
||||
'roundclose',
|
||||
'roundclosefill',
|
||||
'roundcheck',
|
||||
'roundcheckfill',
|
||||
'global',
|
||||
'mail',
|
||||
'punch',
|
||||
'exit',
|
||||
'upload',
|
||||
'read',
|
||||
'file',
|
||||
'link',
|
||||
'full',
|
||||
'group',
|
||||
'friend',
|
||||
'profile',
|
||||
'addressbook',
|
||||
'calendar',
|
||||
'text',
|
||||
'copy',
|
||||
'share',
|
||||
'wifi',
|
||||
'vipcard',
|
||||
'weibo',
|
||||
'remind',
|
||||
'refresh',
|
||||
'filter',
|
||||
'settings',
|
||||
'scan',
|
||||
'qrcode',
|
||||
'cascades',
|
||||
'apps',
|
||||
'sort',
|
||||
'searchlist',
|
||||
'search',
|
||||
'edit'
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
list(){
|
||||
return this.iconList.filter((item) => {
|
||||
return item.indexOf(this.keyword) !== -1;
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.example-p{
|
||||
height: 45px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.search-box{
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.search{
|
||||
width: 300px;
|
||||
}
|
||||
ul,li{
|
||||
list-style: none;
|
||||
}
|
||||
.icon-li{
|
||||
display: inline-block;
|
||||
padding: 10px;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
.icon-li-content{
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.icon-li-content i{
|
||||
font-size: 36px;
|
||||
color: #606266;
|
||||
}
|
||||
.icon-li-content span{
|
||||
margin-top: 10px;
|
||||
color: #787878;
|
||||
}
|
||||
</style>
|
||||
133
h5-auth-manager/src/components/page/Login.vue
Normal file
133
h5-auth-manager/src/components/page/Login.vue
Normal file
@@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<div class="login-wrap">
|
||||
<div class="ms-login">
|
||||
<div class="ms-title">权限系统</div>
|
||||
<el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
|
||||
<el-form-item prop="username">
|
||||
<el-input v-model="param.username" placeholder="username">
|
||||
<el-button slot="prepend" icon="el-icon-lx-people"></el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
type="password"
|
||||
placeholder="password"
|
||||
v-model="param.password"
|
||||
@keyup.enter.native="submitForm()"
|
||||
>
|
||||
<el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<div class="login-btn">
|
||||
<el-button type="primary" @click="submitForm()">登录</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getLogin } from '../../api/index';
|
||||
export default {
|
||||
created() {
|
||||
// if(this.$route.query.type=="token"){
|
||||
// this.$message.error('登陆授权码已过期')
|
||||
// this.$route.query.type=""
|
||||
// }
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
param: {
|
||||
username: '',
|
||||
password: '',
|
||||
},
|
||||
rules: {
|
||||
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
|
||||
password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
submitForm() {
|
||||
this.$refs.login.validate(valid => {
|
||||
if (valid) {
|
||||
// 调用登录接口
|
||||
this.getLogins();
|
||||
|
||||
} else {
|
||||
this.$message.error('请输入账号和密码');
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
async getLogins() {
|
||||
// var formdata = new FormData();
|
||||
// formdata.append('account', this.param.username);
|
||||
// formdata.append('password', this.param.password);
|
||||
var params ={
|
||||
account:this.param.username,
|
||||
password:this.param.password
|
||||
}
|
||||
|
||||
const data = await getLogin(params);
|
||||
console.log('登录接口返回的数据',data);
|
||||
const code = data.code;
|
||||
|
||||
if(data.status==="1"){
|
||||
this.$message.success('登录成功，即将跳转');
|
||||
localStorage.setItem('ms_username', this.param.username);
|
||||
localStorage.setItem('token', data.data.token);
|
||||
this.$router.push('/');
|
||||
}
|
||||
else{
|
||||
this.$message.error(data.msg);
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.login-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url(../../assets/img/login-bg.jpg);
|
||||
background-size: 100%;
|
||||
}
|
||||
.ms-title {
|
||||
width: 100%;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
.ms-login {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 350px;
|
||||
margin: -190px 0 0 -175px;
|
||||
border-radius: 5px;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
overflow: hidden;
|
||||
}
|
||||
.ms-content {
|
||||
padding: 30px 30px;
|
||||
}
|
||||
.login-btn {
|
||||
text-align: center;
|
||||
}
|
||||
.login-btn button {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.login-tips {
|
||||
font-size: 12px;
|
||||
line-height: 30px;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
6
h5-auth-manager/src/components/page/bus.js
Normal file
6
h5-auth-manager/src/components/page/bus.js
Normal file
@@ -0,0 +1,6 @@
|
||||
import Vue from 'vue';
|
||||
|
||||
// 使用 Event Bus
|
||||
const bus = new Vue();
|
||||
|
||||
export default bus;
|
||||
13
h5-auth-manager/src/components/page/redirect/index.vue
Normal file
13
h5-auth-manager/src/components/page/redirect/index.vue
Normal file
@@ -0,0 +1,13 @@
|
||||
<script>
|
||||
export default {
|
||||
created() {
|
||||
const { params, query } = this.$route
|
||||
console.log(params);
|
||||
const { path } = params
|
||||
this.$router.replace({ path: '/' + path, query })
|
||||
},
|
||||
render: function(h) {
|
||||
return h() // avoid warning message
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<div class="content-wrapper">
|
||||
<div>
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<div >
|
||||
当前时间：
|
||||
<el-date-picker v-model="dateValue" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
|
||||
value-format="yyyy-MM-dd" @change="getlist">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div >
|
||||
<el-input placeholder="搜索" v-model="searchVal" class="input-with-select">
|
||||
<el-button slot="append" icon="el-icon-search" @click="getlist"></el-button>
|
||||
</el-input>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="tab-wrapper">
|
||||
<div>
|
||||
<el-table border :data="dataList" style="width: 100%">
|
||||
|
||||
<el-table-column prop="id" width="200" label="ID">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="organName" label="组织名称" width="" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="opName" label="操作名称" width="" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="opUserName" label="操作人员名称" width="" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="ip" label="IP" width="" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="startTime" label="开始时间" width="" show-overflow-tooltip>
|
||||
<template slot-scope="scope">
|
||||
{{new Date(scope.row.startTime).format('yyyy-MM-dd hh:mm:ss')}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="endTime" label="结束时间" width="" show-overflow-tooltip>
|
||||
<template slot-scope="scope">
|
||||
{{new Date(scope.row.endTime).format('yyyy-MM-dd hh:mm:ss')}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" align="center" size="s">
|
||||
<template slot-scope="scope">
|
||||
<el-tooltip content="查看" placement="left">
|
||||
<el-button icon="el-icon-view" circle size="mini" @click="lockData(scope.row)"></el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination class="pagination-wrapper" background hide-on-single-page :current-page="pager.pageNum" :page-count="pager.lastPage"
|
||||
layout="prev, pager, next" @current-change="surrentChange">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 查看 -->
|
||||
<el-dialog title="日志详情" :visible.sync="dialogVisible" width="30%" center>
|
||||
<div class="log-info-wrapper">
|
||||
<p><strong>操作名称：</strong>{{currentItem.opName}}</p>
|
||||
<p><strong>操作人员名称：</strong>{{currentItem.opUserName}}</p>
|
||||
<p><strong>IP：</strong>{{currentItem.ip}}</p>
|
||||
<p><strong>请求路径：</strong>{{currentItem.requestPath}}</p>
|
||||
<p><strong>请求参数：</strong>{{currentItem.requestParam}}</p>
|
||||
<p><strong>响应参数：</strong>{{currentItem.responseParam}}</p>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
formatDate
|
||||
} from '@/assets/utils.js'
|
||||
import {
|
||||
getLogList
|
||||
} from '@/api/index.js'
|
||||
export default {
|
||||
//过滤
|
||||
name:'logManagement',
|
||||
filters: {
|
||||
formatDate(time) {
|
||||
let date = new Date(time)
|
||||
return formatDate(date, 'yyyy-MM-dd')
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
pager: {},
|
||||
dataList: [],
|
||||
dateValue: [formatDate(new Date, 'yyyy-MM-dd'), formatDate(new Date, 'yyyy-MM-dd')],
|
||||
searchVal: "",
|
||||
dialogVisible: false,
|
||||
currentItem: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getlist();
|
||||
},
|
||||
methods: {
|
||||
lockData(e) {
|
||||
this.currentItem = e;
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
surrentChange(e) {
|
||||
this.page = e;
|
||||
this.getlist();
|
||||
},
|
||||
async getlist() {
|
||||
const data = await getLogList({
|
||||
searchKey: this.searchVal,
|
||||
startDate: this.dateValue[0],
|
||||
endDate: this.dateValue[1],
|
||||
pageNo: this.page,
|
||||
pageSize: this.pageSize
|
||||
})
|
||||
if (data.status != "0") {
|
||||
const listUser = data.data.logList;
|
||||
const pager = data.data.pager;
|
||||
this.pager = pager;
|
||||
this.dataList = listUser
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.tab-wrapper {
|
||||
padding: 21px 0;
|
||||
}
|
||||
|
||||
.pagination-wrapper {
|
||||
margin-right: 40px;
|
||||
margin-top: 40px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.content-wrapper .el-date-editor .el-range-separator {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
.el-dialog--center .el-dialog__body {
|
||||
max-height: 500px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.log-info-wrapper p {
|
||||
line-height: 2;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,247 @@
|
||||
<template>
|
||||
<div class="content-wrapper">
|
||||
<div>
|
||||
<el-row :gutter="20">
|
||||
<!-- <el-col :span="16"> -->
|
||||
<div >
|
||||
<el-button @click="add()" type="primary">新增</el-button>
|
||||
<el-button @click="using(-1)" type="danger">删除</el-button>
|
||||
<el-button @click="using(1)" type="success">启用</el-button>
|
||||
<el-button @click="using(0)" type="warning">停用</el-button>
|
||||
</div>
|
||||
<!-- </el-col> -->
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="tab-wrapper">
|
||||
<div>
|
||||
<el-table border ref="multipleTable" :data="dataList" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="organId" width="200" label="ID">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="name" label="组织名称" width="" show-overflow-tooltip>
|
||||
<!-- <template slot-scope="scope">
|
||||
{{scope.row.name}}
|
||||
</template> -->
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="code" label="组织编号" width="" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="status" width="" label="状态">
|
||||
<template slot-scope="scope">
|
||||
{{scope.row.status===0?'停用':'启用'}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
|
||||
|
||||
<el-table-column label="操作" align="center" size="s">
|
||||
<template slot-scope="scope">
|
||||
<el-tooltip content="编辑" placement="left">
|
||||
<el-button icon="el-icon-edit" circle size="mini" @click="organEdit(scope.row)"></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="删除" placement="right">
|
||||
<el-button icon="el-icon-delete" circle size="mini" @click="setStatus(-1,scope.row.organId)"></el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination class="pagination-wrapper" background hide-on-single-page :current-page="pager.pageNum" :page-count="pager.lastPage"
|
||||
layout="prev, pager, next" @current-change="surrentChange">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加编辑 -->
|
||||
<el-dialog title="配置账号" :visible.sync="dialogFormVisible" width="30%" class="edit-password-dialog">
|
||||
<el-form :model="form" ref="changeOrganForm" label-width="100px" label-position="left">
|
||||
<el-form-item label="名称" prop="name" :rules="[
|
||||
{ required: true, message: '不能为空！'}
|
||||
]">
|
||||
<el-input v-model="form.name" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="编号" prop="code" :rules="[
|
||||
{ required: true, message: '不能为空！'}
|
||||
]">
|
||||
<el-input v-model="form.code" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="changeOrgan('changeOrganForm')">确 定</el-button>
|
||||
<el-button @click="cancel()">取 消</el-button>
|
||||
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
getOrganList,
|
||||
updateStatusOrgan,
|
||||
saveOrgan,
|
||||
updateOrgan
|
||||
} from '@/api/index.js'
|
||||
export default {
|
||||
name:'organizationManagement',
|
||||
data() {
|
||||
return {
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
pager: {},
|
||||
dataList: [],
|
||||
multipleSelection: [],
|
||||
dialogFormVisible: false,
|
||||
form: {
|
||||
name: "",
|
||||
code: ""
|
||||
},
|
||||
currItem: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getlist();
|
||||
},
|
||||
methods: {
|
||||
cancel() {
|
||||
this.currItem = {};
|
||||
this.dialogFormVisible = false;
|
||||
this.form = {
|
||||
name: "",
|
||||
code: ""
|
||||
}
|
||||
this.$refs["changeOrganForm"].resetFields();
|
||||
},
|
||||
changeOrgan(myForm) {
|
||||
let form = this.form;
|
||||
this.$refs[myForm].validate((valid) => {
|
||||
if (valid) {
|
||||
if (JSON.stringify(this.currItem) == '{}') {
|
||||
this.save(form);
|
||||
} else {
|
||||
form.organId = this.currItem.organId;
|
||||
this.update(form);
|
||||
}
|
||||
} else {
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
organEdit(e) {
|
||||
this.currItem = e;
|
||||
this.form = {
|
||||
name: e.name,
|
||||
code: e.code
|
||||
}
|
||||
this.dialogFormVisible = true;
|
||||
},
|
||||
async update(form) {
|
||||
const data = await updateOrgan(form)
|
||||
if (data.status != "0") {
|
||||
this.$message({
|
||||
message: '操作成功！',
|
||||
type: "success"
|
||||
});
|
||||
this.getlist();
|
||||
this.cancel();
|
||||
}
|
||||
},
|
||||
async save(form) {
|
||||
const data = await saveOrgan(form)
|
||||
if (data.status != "0") {
|
||||
this.$message({
|
||||
message: '操作成功！',
|
||||
type: "success"
|
||||
});
|
||||
this.getlist();
|
||||
this.cancel();
|
||||
}
|
||||
},
|
||||
// 添加
|
||||
add() {
|
||||
this.dialogFormVisible = true;
|
||||
},
|
||||
setStatus(status, ids) {
|
||||
let msg = "确认修改用户状态？"
|
||||
if (status == -1) {
|
||||
msg = "此操作将永久删除该文件, 是否继续?"
|
||||
}
|
||||
this.$confirm(msg, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.updateStatus(status, ids + '');
|
||||
});
|
||||
},
|
||||
using(num) {
|
||||
let selArr = [];
|
||||
this.multipleSelection.forEach(value => {
|
||||
selArr.push(value.organId);
|
||||
})
|
||||
if (selArr.length <= 0) {
|
||||
this.$message({
|
||||
message: '请选择！',
|
||||
type: "warning"
|
||||
});
|
||||
return
|
||||
}
|
||||
this.setStatus(num, selArr.join(','));
|
||||
},
|
||||
selectChanged(e) {
|
||||
this.page = 1;
|
||||
this.value = e;
|
||||
this.getlist();
|
||||
},
|
||||
handleSelectionChange(val) {
|
||||
this.multipleSelection = val;
|
||||
},
|
||||
surrentChange(e) {
|
||||
this.page = e;
|
||||
this.getlist();
|
||||
},
|
||||
async getlist() {
|
||||
const data = await getOrganList({
|
||||
pageNo: this.page,
|
||||
pageSize: this.pageSize
|
||||
})
|
||||
if (data.status != "0") {
|
||||
const listData = data.data.listOrgan;
|
||||
const pager = data.data.pager;
|
||||
this.pager = pager;
|
||||
this.dataList = listData
|
||||
}
|
||||
},
|
||||
async updateStatus(status, arrStr) {
|
||||
const data = await updateStatusOrgan({
|
||||
"ids": arrStr,
|
||||
"status": status
|
||||
})
|
||||
if (data.status != "0") {
|
||||
this.$message({
|
||||
message: '操作成功！',
|
||||
type: "success"
|
||||
});
|
||||
this.getlist();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.tab-wrapper {
|
||||
padding: 21px 0;
|
||||
}
|
||||
|
||||
.pagination-wrapper {
|
||||
margin-right: 40px;
|
||||
margin-top: 40px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.edit-password-dialog .el-input {
|
||||
width: 70%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,204 @@
|
||||
<template>
|
||||
<div class="content-wrapper">
|
||||
<div>
|
||||
<el-row :gutter="20">
|
||||
<div>
|
||||
<el-button @click="add()" type="primary">新增</el-button>
|
||||
<el-button @click="using(-1)" type="danger">删除</el-button>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="tab-wrapper">
|
||||
|
||||
<el-tabs v-model="tabs" @tab-click="pager.pageNum=1;getlist()">
|
||||
<el-tab-pane :label="value.label" :name="value.label" v-for="value in systemList" :key="value.value"></el-tab-pane>
|
||||
|
||||
</el-tabs>
|
||||
|
||||
<div v-loading="loading">
|
||||
<el-table border ref="multipleTable" :data="dataList" tooltip-effect="dark" style="width: 100%"
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="code" width="200" label="资源编号">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="name" label="名称" width="" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="url" label="路径" width="" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="icon" label="图标" width="" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="sort" label="排序" width="" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="birth" label="创建时间" width="" show-overflow-tooltip>
|
||||
<template slot-scope="scope">
|
||||
{{scope.row.birth|formatDate}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" align="center" size="s">
|
||||
<template slot-scope="scope">
|
||||
<el-tooltip content="编辑" placement="left">
|
||||
<el-button icon="el-icon-edit" circle size="mini" @click="editDiaglo(scope.row)">
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="删除" placement="right">
|
||||
<el-button icon="el-icon-delete" circle size="mini" @click="setStatus(-1,scope.row.resourceId)">
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination class="pagination-wrapper" background :current-page="pager.pageNum"
|
||||
:total="pager.total" layout="prev, pager, next" @current-change="surrentChange">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<add-resource-dialog v-if="dialogVisible" :dialogVisible="dialogVisible" @closeEvent="handleClose" :dataItem="dataItem">
|
||||
</add-resource-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
formatDate
|
||||
} from '@/assets/utils.js'
|
||||
import {
|
||||
getRsourceMenuList,
|
||||
resourceUpdateStatus
|
||||
} from '@/api/index.js'
|
||||
import AddResourceDialog from '../../models/addResourceDialog.vue'
|
||||
import mixin from '@/utils/mixin.js'
|
||||
export default {
|
||||
name: 'resourceManagement',
|
||||
mixins:[mixin],
|
||||
components: {
|
||||
AddResourceDialog
|
||||
},
|
||||
//过滤
|
||||
filters: {
|
||||
formatDate(time) {
|
||||
let date = new Date(time)
|
||||
return formatDate(date, 'yyyy-MM-dd')
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
pager: {},
|
||||
dataList: [],
|
||||
multipleSelection: [],
|
||||
dialogVisible: false,
|
||||
dataItem: {},
|
||||
dialogFormVisible: false,
|
||||
tabs:'EngineX',
|
||||
loading:false
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getlist();
|
||||
},
|
||||
methods: {
|
||||
handleClose() {
|
||||
this.dataItem = {};
|
||||
this.dialogVisible = false;
|
||||
this.getlist();
|
||||
},
|
||||
// 添加
|
||||
add() {
|
||||
this.dataItem = {};
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
// 权限分配
|
||||
editDiaglo(e) {
|
||||
this.dataItem = e;
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
setStatus(status, ids) {
|
||||
let msg = "确认修改用户状态？"
|
||||
if (status == -1) {
|
||||
msg = "此操作将永久删除该文件, 是否继续?"
|
||||
}
|
||||
this.$confirm(msg, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.updateStatus(status, ids + '');
|
||||
});
|
||||
},
|
||||
using(num) {
|
||||
let selArr = [];
|
||||
this.multipleSelection.forEach(value => {
|
||||
selArr.push(value.resourceId);
|
||||
})
|
||||
if (selArr.length <= 0) {
|
||||
this.$message({
|
||||
message: '请选择！',
|
||||
type: "warning"
|
||||
});
|
||||
return
|
||||
}
|
||||
this.setStatus(num, selArr.join(','));
|
||||
},
|
||||
handleSelectionChange(val) {
|
||||
this.multipleSelection = val;
|
||||
},
|
||||
surrentChange(e) {
|
||||
this.page = e;
|
||||
this.getlist();
|
||||
},
|
||||
async getlist() {
|
||||
this.loading = true
|
||||
const data = await getRsourceMenuList({
|
||||
pageNo: this.page,
|
||||
pageSize: this.pageSize,
|
||||
entity:{
|
||||
resourceSystem:this.tabs
|
||||
}
|
||||
})
|
||||
if (data.status != "0") {
|
||||
const listUser = data.data.listMenu;
|
||||
const pager = data.data.pager;
|
||||
this.pager = pager;
|
||||
this.dataList = listUser
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
async updateStatus(status, arrStr) {
|
||||
const data = await resourceUpdateStatus({
|
||||
"ids": arrStr,
|
||||
"status": status
|
||||
})
|
||||
if (data.status != "0") {
|
||||
this.$message({
|
||||
message: '操作成功！',
|
||||
type: "success"
|
||||
});
|
||||
this.getlist();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.tab-wrapper {
|
||||
padding: 21px 0;
|
||||
}
|
||||
|
||||
.pagination-wrapper {
|
||||
margin-right: 40px;
|
||||
margin-top: 40px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.edit-password-dialog .el-input {
|
||||
width: 70%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,287 @@
|
||||
<template>
|
||||
<div class="content-wrapper">
|
||||
<div>
|
||||
<el-row :gutter="20">
|
||||
<!-- <el-col :span="16"> -->
|
||||
<div>
|
||||
<el-button @click="add()" type="primary">新增</el-button>
|
||||
<el-button @click="using(-1)" type="danger" :disabled="multipleSelection.length>0?false:'disabled'">删除</el-button>
|
||||
<el-button @click="using(1)" type="success" :disabled="multipleSelection.length>0?false:'disabled'">启用</el-button>
|
||||
<el-button @click="using(0)" type="warning" :disabled="multipleSelection.length>0?false:'disabled'">停用</el-button>
|
||||
</div>
|
||||
<!-- </el-col> -->
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="tab-wrapper">
|
||||
<div>
|
||||
<el-table border ref="multipleTable" :data="dataList" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="roleId" width="200" label="ID">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="roleName" label="角色名" width="" show-overflow-tooltip>
|
||||
<!-- <template slot-scope="scope">
|
||||
{{scope.row.name}}
|
||||
</template> -->
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="status" width="" label="状态">
|
||||
<template slot-scope="scope">
|
||||
{{scope.row.status===0?'禁用':'启用'}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
|
||||
<el-table-column label="操作" align="center" size="s">
|
||||
<template slot-scope="scope">
|
||||
<el-tooltip content="编辑" placement="left">
|
||||
<el-button icon="el-icon-edit" circle size="mini" @click="roleEdit(scope.row)"></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="权限分配" placement="left">
|
||||
<el-button icon="el-icon-edit-outline" circle size="mini" @click="editDiaglo(scope.row)"></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="删除" placement="right">
|
||||
<el-button icon="el-icon-delete" circle size="mini" @click="setStatus(-1,scope.row.roleId)"></el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination class="pagination-wrapper" background hide-on-single-page :current-page="pager.pageNum" :page-count="pager.lastPage"
|
||||
layout="prev, pager, next" @current-change="surrentChange">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 权限分配 -->
|
||||
<authority-assignment-dialog :dialogVisible="dialogVisible" @closeEvent="handleClose" :dataItem="dataItem"
|
||||
:listOrganArr="listOrganArr"></authority-assignment-dialog>
|
||||
<!-- 添加编辑角色 -->
|
||||
<el-dialog title="角色配置" :visible.sync="dialogFormVisible" width="30%" class="edit-password-dialog">
|
||||
<el-form :model="form" ref="changeRoleForm" label-width="100px" label-position="left">
|
||||
<el-form-item label="角色名" prop="roleName" :rules="[
|
||||
{ required: true, message: '不能为空！'}
|
||||
]">
|
||||
<el-input v-model="form.roleName" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属组织" prop="organId" :rules="[
|
||||
{ required: true, message: '请选择组织', trigger: 'change'}
|
||||
]">
|
||||
<el-select v-model="form.organId" placeholder="请选择所属组织" :disabled="listOrganArr.length<2?true:false">
|
||||
<el-option v-for="item in listOrganArr" :key="item.organId" :label="item.name" :value="item.organId"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="changeRole('changeRoleForm')">确 定</el-button>
|
||||
<el-button @click="cancel()">取 消</el-button>
|
||||
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
getRoleList,
|
||||
roleUpdateStatus,
|
||||
getAllValidOrgan,
|
||||
saveRole,
|
||||
updateRole
|
||||
} from '@/api/index.js'
|
||||
import AuthorityAssignmentDialog from '../../models/authorityAssignmentDialog.vue'
|
||||
export default {
|
||||
name:'roleManagement',
|
||||
components: {
|
||||
AuthorityAssignmentDialog
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
pager: {},
|
||||
dataList: [],
|
||||
multipleSelection: [],
|
||||
dialogVisible: false,
|
||||
dataItem: {},
|
||||
listOrganArr: [],
|
||||
dialogFormVisible: false,
|
||||
form: {
|
||||
roleName: "",
|
||||
organId: ""
|
||||
},
|
||||
currItem: {},
|
||||
disabled: false
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getlist();
|
||||
this.organList();
|
||||
},
|
||||
methods: {
|
||||
cancel() {
|
||||
this.currItem = {};
|
||||
this.dialogFormVisible = false;
|
||||
this.form = {
|
||||
roleName: "",
|
||||
organId: ""
|
||||
}
|
||||
this.$refs["changeRoleForm"].resetFields();
|
||||
},
|
||||
changeRole(myForm) {
|
||||
let form = this.form;
|
||||
this.$refs[myForm].validate((valid) => {
|
||||
if (valid) {
|
||||
if (JSON.stringify(this.currItem) == '{}') {
|
||||
this.saveRole(form);
|
||||
} else {
|
||||
form.roleId = this.currItem.roleId;
|
||||
this.updateRole(form);
|
||||
}
|
||||
} else {
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
roleEdit(e) {
|
||||
this.disabled = true;
|
||||
this.currItem = e;
|
||||
console.log(e);
|
||||
this.form = {
|
||||
roleName: e.roleName,
|
||||
organId: e.organId
|
||||
}
|
||||
this.dialogFormVisible = true;
|
||||
if (this.listOrganArr.length == 1) {
|
||||
this.form.organId = this.listOrganArr[0].organId
|
||||
}
|
||||
},
|
||||
async updateRole(form) {
|
||||
const data = await updateRole(form)
|
||||
if (data.status != "0") {
|
||||
this.$message({
|
||||
message: '操作成功！',
|
||||
type: "success"
|
||||
});
|
||||
this.getlist();
|
||||
this.cancel();
|
||||
}
|
||||
},
|
||||
async saveRole(form) {
|
||||
const data = await saveRole(form)
|
||||
if (data.status != "0") {
|
||||
this.$message({
|
||||
message: '操作成功！',
|
||||
type: "success"
|
||||
});
|
||||
this.getlist();
|
||||
this.cancel();
|
||||
}
|
||||
},
|
||||
handleClose() {
|
||||
this.dataItem = {};
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
// 添加
|
||||
add() {
|
||||
this.disabled = false;
|
||||
this.dataItem = {};
|
||||
this.dialogFormVisible = true;
|
||||
if (this.listOrganArr.length == 1) {
|
||||
this.form.organId = this.listOrganArr[0].organId
|
||||
}
|
||||
},
|
||||
// 权限分配
|
||||
editDiaglo(e) {
|
||||
this.dataItem = e;
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
setStatus(status, ids) {
|
||||
let msg = "确认修改用户状态？"
|
||||
if (status == -1) {
|
||||
msg = "此操作将永久删除该文件, 是否继续?"
|
||||
}
|
||||
this.$confirm(msg, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.updateStatus(status, ids + '');
|
||||
});
|
||||
},
|
||||
using(num) {
|
||||
let selArr = [];
|
||||
this.multipleSelection.forEach(value => {
|
||||
selArr.push(value.roldId);
|
||||
})
|
||||
if (selArr.length <= 0) {
|
||||
this.$message({
|
||||
message: '请选择！',
|
||||
type: "warning"
|
||||
});
|
||||
return
|
||||
}
|
||||
this.setStatus(num, selArr.join(','));
|
||||
},
|
||||
selectChanged(e) {
|
||||
this.page = 1;
|
||||
this.value = e;
|
||||
this.getlist();
|
||||
},
|
||||
handleSelectionChange(val) {
|
||||
this.multipleSelection = val;
|
||||
},
|
||||
surrentChange(e) {
|
||||
this.page = e;
|
||||
this.getlist();
|
||||
},
|
||||
async getlist() {
|
||||
const data = await getRoleList({
|
||||
pageNo: this.page,
|
||||
pageSize: this.pageSize
|
||||
})
|
||||
if (data.status != "0") {
|
||||
const listUser = data.data.listRole;
|
||||
const pager = data.data.pager;
|
||||
this.pager = pager;
|
||||
this.dataList = listUser
|
||||
}
|
||||
},
|
||||
async updateStatus(status, arrStr) {
|
||||
const data = await roleUpdateStatus({
|
||||
"ids": arrStr,
|
||||
"status": status
|
||||
})
|
||||
if (data.status != "0") {
|
||||
this.$message({
|
||||
message: '操作成功！',
|
||||
type: "success"
|
||||
});
|
||||
this.getlist();
|
||||
}
|
||||
},
|
||||
async organList() {
|
||||
const data = await getAllValidOrgan({})
|
||||
if (data.status != "0") {
|
||||
this.listOrganArr = data.data
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.tab-wrapper {
|
||||
padding: 21px 0;
|
||||
}
|
||||
|
||||
.pagination-wrapper {
|
||||
margin-right: 40px;
|
||||
margin-top: 40px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.edit-password-dialog .el-input {
|
||||
width: 70%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,306 @@
|
||||
<template>
|
||||
<div class="content-wrapper">
|
||||
<div>
|
||||
<el-row :gutter="20">
|
||||
<!-- <el-col :span="16"> -->
|
||||
<div>
|
||||
<el-button @click="add" type="primary">新增</el-button>
|
||||
<el-button @click="using(-1)" type="danger" :disabled="multipleSelection.length>0?false:'disabled'">删除</el-button>
|
||||
<el-button @click="using(1)" type="success" :disabled="multipleSelection.length>0?false:'disabled'">启用</el-button>
|
||||
<el-button @click="using(0)" type="warning" :disabled="multipleSelection.length>0?false:'disabled'">停用</el-button>
|
||||
</div>
|
||||
<!-- </el-col> -->
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="tab-wrapper">
|
||||
<div>
|
||||
<el-table border ref="multipleTable" :data="dataList" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="account" width="" label="账号">
|
||||
</el-table-column>
|
||||
<el-table-column prop="sysOrgan.name" width="" label="组织名称">
|
||||
<!-- <template slot-scope="scope">
|
||||
{{scope.row.status==1?'启用':scope.row.status==0?'停用':'删除'}}
|
||||
</template> -->
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="sysRole.roleName" label="角色" width="" show-overflow-tooltip>
|
||||
<!-- <template slot-scope="scope">
|
||||
{{scope.row.name}}
|
||||
</template> -->
|
||||
</el-table-column>
|
||||
<el-table-column prop="nickName" width="" label="姓名">
|
||||
</el-table-column>
|
||||
<el-table-column prop="remark" width="" label="备注">
|
||||
</el-table-column>
|
||||
|
||||
|
||||
|
||||
|
||||
<el-table-column prop="status" width="" label="状态">
|
||||
<template slot-scope="scope">
|
||||
{{scope.row.status===0?'停用':scope.row.status==1?'启用':'删除'}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="birth" label="创建时间">
|
||||
<template slot-scope="scope">
|
||||
{{scope.row.birth|formatDate}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" align="center" size="s">
|
||||
<template slot-scope="scope">
|
||||
<el-tooltip content="编辑" placement="left">
|
||||
<el-button icon="el-icon-edit" circle size="mini" @click="editDiaglo(scope.row)"></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="删除" placement="left">
|
||||
<el-button icon="el-icon-delete" circle size="mini" @click="setStatus(-1,scope.row.userId)"></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="修改密码" placement="right">
|
||||
<el-button icon="el-icon-edit-outline" circle size="mini" @click="showDialogChangePassword(scope.row.userId)"></el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination class="pagination-wrapper" background hide-on-single-page :current-page="pager.pageNum" :page-count="pager.lastPage"
|
||||
layout="prev, pager, next" @current-change="surrentChange">
|
||||
</el-pagination>
|
||||
<!-- :page-size="pager.size" -->
|
||||
<!-- :total="pager.total" -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加/编辑 -->
|
||||
<!-- <add-block-white :dialogVisible="dialogVisible" @closeEvent="handleClose" :dataItem="dataItem"></add-block-white> -->
|
||||
<add-user-dialog :dialogVisible="dialogVisible" @closeEvent="handleClose" :dataItem="dataItem" :listOrganArr="listOrganArr"></add-user-dialog>
|
||||
|
||||
<!-- 修改密码 -->
|
||||
<el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="30%" class="edit-password-dialog">
|
||||
<el-form :model="form" ref="changePasswordForm">
|
||||
<el-form-item label="新密码" label-width="100px" prop="password" :rules="[
|
||||
{ required: true, message: '不能为空！'}
|
||||
]">
|
||||
<el-input v-model="form.password" autocomplete="off" type="password"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="closeChangePasswordForm()">取 消</el-button>
|
||||
<el-button type="primary" @click="changePassword('changePasswordForm')">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
formatDate
|
||||
} from '@/assets/utils.js'
|
||||
import {
|
||||
getUserList,
|
||||
userUpdateStatus,
|
||||
getAllValidOrgan,
|
||||
updateUserPassword
|
||||
} from '@/api/index.js'
|
||||
import AddUserDialog from '../../models/addUserDialog.vue'
|
||||
export default {
|
||||
name:'userManagement',
|
||||
components: {
|
||||
AddUserDialog
|
||||
},
|
||||
//过滤
|
||||
filters: {
|
||||
formatDate(time) {
|
||||
let date = new Date(time)
|
||||
return formatDate(date, 'yyyy-MM-dd')
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
pager: {},
|
||||
dataList: [],
|
||||
multipleSelection: [],
|
||||
dialogVisible: false,
|
||||
dataItem: {},
|
||||
listOrganArr: [],
|
||||
dialogFormVisible: false,
|
||||
form: {
|
||||
password: ""
|
||||
},
|
||||
currId: ""
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getlist();
|
||||
this.organList();
|
||||
},
|
||||
methods: {
|
||||
closeChangePasswordForm() {
|
||||
this.currId = "";
|
||||
this.dialogFormVisible = false;
|
||||
this.$refs["changePasswordForm"].resetFields();
|
||||
},
|
||||
changePassword(myForm) {
|
||||
this.$refs[myForm].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$confirm("确认修改", '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.updateUserPassword(this.currId, this.form.password);
|
||||
});
|
||||
} else {
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
showDialogChangePassword(id) {
|
||||
this.currId = id;
|
||||
this.dialogFormVisible = true;
|
||||
},
|
||||
async updateUserPassword(id, password) {
|
||||
const data = await updateUserPassword({
|
||||
id: id,
|
||||
password: password
|
||||
})
|
||||
if (data.status === "0") {
|
||||
this.$message.error(data.msg);
|
||||
if (data.error === "01000103") {
|
||||
this.$router.push('/login')
|
||||
}
|
||||
return
|
||||
} else {
|
||||
this.$message({
|
||||
message: '修改成功！',
|
||||
type: "success"
|
||||
});
|
||||
this.closeChangePasswordForm();
|
||||
}
|
||||
},
|
||||
handleClose() {
|
||||
this.dataItem = {};
|
||||
this.dialogVisible = false;
|
||||
this.getlist();
|
||||
},
|
||||
// 添加
|
||||
add() {
|
||||
this.dialogVisible = true;
|
||||
// let e = "";
|
||||
// this.$router.push({path:'/blackWhiteManage/addBlackWihite/$'})
|
||||
},
|
||||
// 编辑
|
||||
editDiaglo(e) {
|
||||
this.dataItem = e;
|
||||
this.dialogVisible = true;
|
||||
// this.$router.push({path:`/blackWhiteManage/addBlackWihite/${e.id}`})
|
||||
},
|
||||
setStatus(status, ids) {
|
||||
let msg = "确认修改用户状态？"
|
||||
if (status == -1) {
|
||||
msg = "此操作将永久删除该文件, 是否继续?"
|
||||
}
|
||||
this.$confirm(msg, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.updateStatus(status, String(ids));
|
||||
});
|
||||
},
|
||||
using(num) {
|
||||
let selArr = [];
|
||||
this.multipleSelection.forEach(value => {
|
||||
selArr.push(value.userId);
|
||||
})
|
||||
if (selArr.length <= 0) {
|
||||
this.$message({
|
||||
message: '请选择！',
|
||||
type: "warning"
|
||||
});
|
||||
return
|
||||
}
|
||||
this.setStatus(num, selArr.join(','));
|
||||
},
|
||||
selectChanged(e) {
|
||||
this.page = 1;
|
||||
this.value = e;
|
||||
this.getlist();
|
||||
},
|
||||
handleSelectionChange(val) {
|
||||
this.multipleSelection = val;
|
||||
},
|
||||
surrentChange(e) {
|
||||
this.page = e;
|
||||
this.getlist();
|
||||
},
|
||||
async getlist(e) {
|
||||
const data = await getUserList({
|
||||
pageNo: this.page,
|
||||
pageSize: this.pageSize
|
||||
})
|
||||
if (data.status === "0") {
|
||||
this.$message.error(data.msg);
|
||||
if (data.error === "01000103") {
|
||||
this.$router.push('/login')
|
||||
}
|
||||
return
|
||||
} else {
|
||||
const listUser = data.data.listUser;
|
||||
const pager = data.data.pager;
|
||||
this.pager = pager;
|
||||
this.dataList = listUser
|
||||
}
|
||||
},
|
||||
async updateStatus(status, arrStr) {
|
||||
const data = await userUpdateStatus({
|
||||
"ids": arrStr,
|
||||
"status": status
|
||||
})
|
||||
if (data.status === "0") {
|
||||
this.$message.error(data.msg);
|
||||
if (data.error === "01000103") {
|
||||
this.$router.push('/login')
|
||||
}
|
||||
return
|
||||
} else {
|
||||
this.$message({
|
||||
message: '操作成功！',
|
||||
type: "success"
|
||||
});
|
||||
this.getlist();
|
||||
}
|
||||
},
|
||||
async organList() {
|
||||
const data = await getAllValidOrgan({})
|
||||
if (data.status === "0") {
|
||||
this.$message.error(data.msg);
|
||||
if (data.error === "01000103") {
|
||||
this.$router.push('/login')
|
||||
}
|
||||
return
|
||||
} else {
|
||||
this.listOrganArr = data.data
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.tab-wrapper {
|
||||
padding: 21px 0;
|
||||
}
|
||||
|
||||
.pagination-wrapper {
|
||||
margin-right: 40px;
|
||||
margin-top: 40px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.edit-password-dialog .el-input {
|
||||
width: 70%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user