朱兆平 / vue_cli · 提交

转到一个项目

作者 朱兆平
提交 f90fd5dafca476890f969e1da0254b32a6ad140b 1 个父辈 42d88262

优化权限界面交互,修复未登陆显示整个main界面问题

内嵌 并排对比
正在显示 3 个修改的文件 包含 216 行增加 和 164 行删除
... ... @@ -90,16 +90,17 @@ var axois_init = {
sessionStorage.removeItem('user');
sessionStorage.removeItem('menu');
sessionStorage.removeItem('token');
}else{
let user = JSON.parse(sessionStorage.getItem('user'));
if(sessionStorage.getItem('token')){
axios.defaults.headers.common['Authorization'] = sessionStorage.getItem('token');
}
if (!jsutil.checkNull(user) && to.path != '/login' && !sessionStorage.getItem('menu') && !sessionStorage.getItem('token')) {
next({ path: '/login' })
}
}
let user = JSON.parse(sessionStorage.getItem('user'));
if(sessionStorage.getItem('token')){
axios.defaults.headers.common['Authorization'] = sessionStorage.getItem('token');
}
if (jsutil.checkNull(user) && to.path != '/login' && !sessionStorage.getItem('menu') && !sessionStorage.getItem('token')) {
next({ path: '/login' })
} else {
next()
}
next()
});
}
}
... ...
不能预览此文件类型
... ... @@ -17,9 +17,9 @@
<!--列表-->
<el-table :data="tableList" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;"
row-key="permissionId"
border
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
row-key="permissionId"
border
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
<el-table-column type="selection" width="55">
</el-table-column>
... ... @@ -50,86 +50,109 @@
</el-pagination>
</el-col>
<!--编辑界面-->
<el-dialog title="编辑" :visible.sync="editFormVisible" :close-on-click-modal="false">
<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
<el-form-item label="ID">
<span>{{editForm.permissionId}}</span>
</el-form-item>
<el-form-item label="权限名称" prop="name">
<el-input v-model="editForm.name" auto-complete="off" placeholder="请输入权限名称：例如:用户新增权限"></el-input>
</el-form-item>
<el-form-item label="权限描述" prop="description">
<el-input v-model="editForm.description" auto-complete="off" placeholder="请输入权限描述：例如:用户管理员"></el-input>
</el-form-item>
<el-form-item label="权限总路径" prop="path">
<el-input v-model="editForm.path" auto-complete="off" placeholder="请输入父目录ID：例如:123"></el-input>
</el-form-item>
<el-form-item label="权限路径" prop="url">
<el-input v-model="editForm.url" auto-complete="off" placeholder="请输入权限描述：例如:/user/update"></el-input>
</el-form-item>
<el-form-item label="权限排序" prop="permissionOrder">
<el-input v-model="editForm.permissionOrder" auto-complete="off" placeholder="请输入权限排序：例如:123"></el-input>
</el-form-item>
<el-form-item label="父目录ID" prop="parentId">
<el-input v-model="editForm.parentId" auto-complete="off" placeholder="请输入父目录ID：例如:123"></el-input>
</el-form-item>
<el-form-item label="ismenu" prop="ismenu">
<el-switch
v-model="editForm.ismenu"
active-color="#13ce66"
inactive-color="#ff4949"
active-text="是"
inactive-text="否"
active-value="1"
inactive-value="0">
</el-switch>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="editFormVisible = false">取消</el-button>
<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
</div>
</el-dialog>
<!--新增界面-->
<el-dialog title="新增" :visible.sync="addFormVisible" :close-on-click-modal="false">
<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
<el-form-item label="权限名称" prop="name">
<el-input v-model="addForm.name" auto-complete="off" placeholder="请输入权限名称：例如:用户新增权限"></el-input>
</el-form-item>
<el-form-item label="权限描述" prop="description">
<el-input v-model="addForm.description" auto-complete="off" placeholder="请输入权限描述：例如:用户管理员"></el-input>
</el-form-item>
<el-form-item label="权限总路径" prop="path">
<el-input v-model="addForm.path" auto-complete="off" placeholder="请输入父目录ID：例如:123"></el-input>
</el-form-item>
<el-form-item label="权限路径" prop="url">
<el-input v-model="addForm.url" auto-complete="off" placeholder="请输入权限描述：例如:/user/update"></el-input>
</el-form-item>
<el-form-item label="权限排序" prop="permissionOrder">
<el-input v-model="addForm.permissionOrder" auto-complete="off" placeholder="请输入权限排序：例如:123"></el-input>
<el-dialog :title="dialogMap[dialogStatus]" :visible.sync="addFormVisible" :close-on-click-modal="false">
<el-form :model="addForm" label-width="110px" :rules="addFormRules" ref="addForm">
<el-form-item label="ID">
<span>{{addForm.permissionId}}</span>
</el-form-item>
<el-form-item label="父目录ID" prop="parentId">
<el-input v-model="addForm.parentId" auto-complete="off" placeholder="请输入父目录ID：例如:123"></el-input>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="权限名称" prop="name">
<el-input v-model="addForm.name" auto-complete="off" placeholder="请输入权限名称：例如:用户新增权限"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="权限描述" prop="description">
<el-input v-model="addForm.description" auto-complete="off" placeholder="请输入权限描述：例如:用户管理员"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col>
<el-form-item label="权限总路径" prop="path">
<el-input v-model="addForm.path" auto-complete="off" placeholder="设置为前端router的path值"></el-input>
<el-cascader-panel
v-model="addForm.path"
:options="cascaderOptions"
:props="pannelProps"
></el-cascader-panel>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="具体访问路径" prop="url">
<el-input v-model="addForm.url" auto-complete="off" placeholder="设置为后端微服务路径：例如:/cloud-user-center/user/update"></el-input>
<el-cascader-panel
v-model="addForm.url"
:options="tableList"
:props="pannelUrlProps"
></el-cascader-panel>
</el-form-item>
<el-form-item label="ismenu" prop="ismenu">
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="权限排序" prop="permissionOrder">
<el-input v-model="addForm.permissionOrder" auto-complete="off" placeholder="请输入权限排序：例如:123"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="设置权限上级" prop="parentId">
<el-input v-model="addForm.parentId" auto-complete="off" placeholder="请输入或者选择适配权限"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-button type="info" size="mini" @click="drawer = true">设置权限上级</el-button>
</el-col>
</el-row>
<el-form-item label="是否是目录" prop="ismenu">
<el-switch
v-model="addForm.ismenu"
active-color="#13ce66"
inactive-color="#ff4949"
active-text="是"
inactive-text="否"
active-value="1"
inactive-value="0">
>
</el-switch>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="addFormVisible = false">取消</el-button>
<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
<el-button type="primary" @click.native="dialogStatus==='create'?addSubmit():editSubmit()" :loading="addLoading">提交</el-button>
</div>
</el-dialog>
<el-drawer
title="设置权限上级"
:visible.sync="drawer"
append-to-body
withHeader>
<el-row>
<el-col :span="7" :offset="1">
<span style="color:#E6A23C">不设置为顶级权限</span>
</el-col>
<el-col :span="8" >
<el-button type="primary" @click.native="treeMerge(false)">合并节点</el-button>
</el-col>
<el-col :span="8">
<el-button type="primary" @click.native="treeMerge(true)">展开节点</el-button>
</el-col>
</el-row>
<el-tree :data="tableList" :props="treeDefaultProps"
@check="clickDeal"
:default-expand-all = "treeExpand"
show-checkbox
highlight-current
check-strictly
node-key="permissionId" ref="tree">
</el-tree>
</el-drawer>
</section>
</template>
... ... @@ -137,71 +160,73 @@
import util from '../../common/js/util'
//import NProgress from 'nprogress'
import { getList, remove, batchRemove, edit, add } from '../../api/perm_api';
import moment from 'moment'
import moment from 'moment'
export default {
data() {
return {
filters: {
name: ''
name: ''
},
cascaderOptions:[],
tableList: [],
total: 0,
pageNum: 1,
pageSize: 100,
pageNum: 1,
pageSize: 500,
listLoading: false,
sels: [],//列表选中列
//编辑界面是否显示
editFormVisible: false,
editLoading: false,
editFormRules: {
roleName: [
{ required: true, message: '请输入权限名称', trigger: 'blur' }
]
treeDefaultProps: {
children: 'children',
label: 'name',
},
//编辑界面数据
editForm: {
permissionId:'',
description: '',
name: '',
url: '',
path: '',
parentId: '',
ismenu: '',
permissionOrder:''
pannelProps: {
children: 'children',
label: 'name',
value: 'path',
checkStrictly: true,
},
pannelUrlProps: {
children: 'children',
label: 'name',
value: 'url',
checkStrictly: true,
emitPath: false
},
treeExpand: true,
addFormVisible: false,//新增界面是否显示
dialogMap: {
update: '编辑',
create: '新增',
},
dialogStatus: 'create',
drawer: false,
addLoading: false,
addFormRules: {
name: [
name: [
{ required: true, message: '请输入权限名称', trigger: 'blur' }
],
description: [
{ required: true, message: '请输入权限描述', trigger: 'blur' }
path: [
{ required: true, message: '请输入总路径', trigger: 'blur' }
],
url: [
{ required: true, message: '请输入权限路径', trigger: 'blur' }
],
paht: [
{ required: true, message: '请输入总路径', trigger: 'blur' }
],
url: [
{ required: true, message: '请输入权限路径', trigger: 'blur' }
],
permissionOrder: [
{ required: true, message: '请输入排序字段', trigger: 'blur' }
],
parentId: [
{ required: true, message: '请输入父类ID', trigger: 'blur' }
]
permissionOrder: [
{ required: true, message: '请输入排序字段', trigger: 'blur' }
]
},
//新增界面数据
addForm: {
description: '',
name: '',
url: '',
permissionId:'',
description: '',
name: '',
url: '',
path: '',
parentId: '',
ismenu: '',
permissionOrder:''
parentId: 0,
ismenu: true,
permissionOrder: '0',
chidren: [],
component: '',
method: ''
}
}
... ... @@ -211,9 +236,9 @@
formatSex: function (row, column) {
return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
},
formatState: function (row, column) {
return row.ismenu == true ? '是' : row.ismenu == false ? '否' : '未知';
},
formatState: function (row, column) {
return row.ismenu == true ? '是' : row.ismenu == false ? '否' : '未知';
},
handleCurrentChange(val) {
this.pageNum = val;
this.getTableList();
... ... @@ -221,30 +246,26 @@
//获取列表
getTableList() {
let para = {
pageNum: this.pageNum,
pageSize: this.pageSize,
name: this.filters.name
pageNum: this.pageNum,
pageSize: this.pageSize,
name: this.filters.name
};
this.listLoading = true;
//NProgress.start();
getList(para).then((res) => {
getList(para).then((res) => {
this.total = res.data.total;
this.tableList = res.data.list;
this.listLoading = false;
//NProgress.done();
}).catch((error) => {
this.listLoading = false;
if(null!= error.response && error.response!==undefined){
let status= error.response.status;
let msg = error.response.statusText;
alert(status+msg);
this.listLoading = false;
if(null!= error.response && error.response!==undefined){
let status= error.response.status;
let msg = error.response.statusText;
alert(status+msg);
}else {
alert(error);
alert(error);
}
});
},
... ... @@ -256,7 +277,7 @@
this.listLoading = true;
//NProgress.start();
let para = { permissionId: row.permissionId };
remove(para).then((res) => {
remove(para).then((res) => {
this.listLoading = false;
//NProgress.done();
this.$message({
... ... @@ -265,53 +286,55 @@
});
this.getTableList();
}).catch((error) => {
this.listLoading = false;
alert(error);
this.listLoading = false;
alert(error);
});
}).catch();
},
/**
/**
* 显示编辑界面
* @param index
* @param row 为这行的数据对象
*/
* @param index
* @param row 为这行的数据对象
*/
handleEdit: function (index, row) {
this.editFormVisible = true;
this.editForm = Object.assign({}, row);
this.addFormVisible = true;
this.dialogStatus= 'update',
this.addForm = Object.assign({}, row);
},
//显示新增界面，每次点开初始化数据
handleAdd: function () {
this.addFormVisible = true;
this.dialogStatus= 'create',
this.addForm = {
username: '',
password: '',
sex: 1,
address: '',
realname: '',
email: '',
mobilephone: '',
age: 1
description: '',
name: '',
url: '',
path: '',
parentId: 0,
ismenu: '',
permissionOrder:'0'
};
},
//编辑
editSubmit: function () {
this.$refs.editForm.validate((valid) => {
this.$refs.addForm.validate((valid) => {
if (valid) {
this.$confirm('确认提交吗？', '提示', {}).then(() => {
this.editLoading = true;
this.addLoading = true;
//NProgress.start();
let para = Object.assign({}, this.editForm);
para.creattime = moment(para.creattime).format('YYYY-MM-DD HH:mm:ss');
this.editLoading = false;
edit(para).then((res) => {
let para = Object.assign({}, this.addForm);
para.creattime = moment(para.creattime).format('YYYY-MM-DD HH:mm:ss');
this.addLoading = false;
edit(para).then((res) => {
//NProgress.done();
this.$message({
message: '提交成功',
type: 'success'
});
this.$refs['editForm'].resetFields();
this.editFormVisible = false;
this.$refs['addForm'].resetFields();
this.addFormVisible = false;
this.getTableList();
}).catch(error => alert(error));
});
... ... @@ -327,7 +350,7 @@
//NProgress.start();
let para = Object.assign({}, this.addForm);
para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
add(para).then((res) => {
add(para).then((res) => {
this.addLoading = false;
//NProgress.done();
this.$message({
... ... @@ -354,7 +377,7 @@
this.listLoading = true;
//NProgress.start();
let para = { ids: ids };
batchRemove(para).then((res) => {
batchRemove(para).then((res) => {
this.listLoading = false;
//NProgress.done();
this.$message({
... ... @@ -366,15 +389,43 @@
}).catch(() => {
});
},
showDrawer: function(){
this.drawer = true;
this.$nextTick(() => {
//反向适配
this.$refs.tree.setCheckedKeys([this.addForm.parentId]);
});
},
clickDeal: function (currentObj, treeStatus) {
this.addForm.parentId = currentObj.permissionId;
this.$refs.tree.setCheckedKeys([currentObj.permissionId]);
// this.drawer = false;
},
treeMerge: function (expand) {
this.treeExpand = expand;
for(var i=0;i<this.$refs.tree.store._getAllNodes().length;i++){
this.$refs.tree.store._getAllNodes()[i].expanded=this.treeExpand;
}
}
},
mounted() {
this.getTableList();
this.cascaderOptions = this.$router.options.routes;
}
}
</script>
<style scoped>
<style rel="stylesheet/scss" lang="scss">
.el-drawer.rtl {
overflow: scroll
}
.el-row{
.el-col {
margin-right: 0px;
}
}
</style>
\ No newline at end of file
... ...