role_manage.vue

<template>
  <div class="contentBox">
	  <div class="content">
		  <div style="padding:8px 20px;">
			  <span style="float: right;">
				  <el-button type="info" @click="addRole">添加新角色</el-button>
			  </span>
			  <div style="clear: both;"></div>
		  </div>
		  <div  style="padding: 0 15px 20px 23px;">
			  <el-table
				:height="tableHeight"
			      :data="tableData"
				  stripe
			      border
			      style="width: 100%">
			      <el-table-column
				  align="center"
			        prop="num"
					:formatter="numFormatter"
			        label="序号">
			      </el-table-column>
				  <el-table-column
					  align="center"
				    prop="name"
				    label="角色名">
				  </el-table-column>
				  <el-table-column
					  align="center"
				    prop="create_dt"
					width="300"
				    label="创建时间">
				  </el-table-column>
				  <el-table-column
					  align="center"
					  width="300"
				    prop="operation"
				    label="操作">
					<template slot-scope="scope">
						<el-tooltip content="编辑角色" placement="bottom" effect="light" :visible-arrow=false>
							<span class="icon-fanxing-xiugai editIcon"   @click="editUser(scope.$index, scope.row)"></span>
						</el-tooltip>
						<span class="tableSpanBorder"></span>
						<el-tooltip content="删除角色" placement="bottom" effect="light" :visible-arrow=false>
							<span class="el-icon-delete  delIcon"   @click="delFun(scope.$index, scope.row)"></span>
						</el-tooltip>
					</template>
				  </el-table-column>
			    </el-table>
				<div style="margin-top: 28px;">
					<el-pagination
					style="float: right;"
					  background
					  prev-text="上一页"
					  next-text="下一页"
					   :page-sizes="[30, 50, 100, 200]"
					  layout="prev, pager, next,sizes"
					  :current-page="page"
					  @size-change="handleSizeChange"
					  @current-change="handleCurrentChange"
					  :total="total">
					</el-pagination>
					<div style="clear: both;"></div>
				</div>
				
		  </div>
	  </div>
	  <!-- 新增 -->
	  <el-dialog
	    title="新增角色"
	    :visible.sync="addVisible"
		@open="openAddDialog"
	    width="30%">
	    <div class="maxHeight">
			<el-form label-position="left" label-width="80px" :model="addForm" :rules="rules" ref="addForm" inline-message hide-required-asterisk>
				<el-form-item label="角色名" prop="role_name">
				  <el-input v-model="addForm.role_name"></el-input>
				</el-form-item>
				<el-form-item label="权限菜单" prop="menu_unids">
					<el-tree
					  :data="treeData"
					  @current-change="treeChange"
					  show-checkbox
					  ref="addTree"
					  node-key="perm_unid"
					  :props="defaultProps">
					</el-tree>
				</el-form-item>
			</el-form>
		</div>
	    <span slot="footer" class="dialog-footer">
	      <el-button @click="addVisible = false">取 消</el-button>
	      <el-button type="primary" @click="addFun('addForm')">确 定</el-button>
	    </span>
	  </el-dialog>
<!-- 编辑 -->
	  <el-dialog
	    title="编辑角色"
	    :visible.sync="editVisible"
	    width="30%">
	    <div class="maxHeight">
			<el-form label-position="left" label-width="80px" :model="editForm" :rules="rules" ref="editForm" inline-message hide-required-asterisk>
				<el-form-item label="角色名" prop="role_name">
				  <el-input v-model="editForm.role_name"></el-input>
				</el-form-item>
				<el-form-item label="权限菜单" prop="menu_unids">
					<el-tree
					  :data="treeData"
					  @current-change="treeChange"
					  show-checkbox
					  ref="editTree"
					  node-key="perm_unid"
					  :props="defaultProps">
					</el-tree>
				</el-form-item>
			</el-form>
		</div>
	    <span slot="footer" class="dialog-footer">
	      <el-button @click="editVisible = false">取 消</el-button>
	      <el-button type="primary" @click="editFun('editForm')">确 定</el-button>
	    </span>
	  </el-dialog>
  </div>
</template>
<script>
	export default {
		data(){
			var checkRole = (rule, value, callback) => {
			   if (value === '') {
				 callback(new Error('请输入角色名'));
			   } else {
				 callback();
			   }
			 };
			 var checkMenu_unids = (rule, value, callback) => {
			   if (value.length==0) {
				 callback(new Error('请至少选择一个权限'));
			   } else {
				 callback();
			   }
			 };
			return{
				treeData:[],
				defaultProps: {
				  children: 'children',
				  label: 'name'
				},
				total:0,
				page:1,
				pageSize:30,
				addForm:{
					role_name:'',
					menu_unids:[]
				},
				editForm:{
					role_name:'',
					menu_unids:[]
				},
				editUnid:'',
				tableData: [],
				addVisible:false,
				editVisible:false,
				roleList:[],
				userId:sessionStorage.getItem('user_unid'),
				rules: {
					role_name: [
						{ validator: checkRole, trigger: 'change' }
					],
					menu_unids: [
						{ validator: checkMenu_unids, trigger: 'change' }
					],
				},
				tableHeight:window.opsTableHeight
			}
		},
		components:{
		},
		mounted(){
			this.getTableList();
			this.getMenuList();
		},
		methods:{
			treeChange(data,node){
				console.log(data,node)
			},
			numFormatter(row, column, cellValue, index) {
				return (index+1)*this.page;
			},
			handleSizeChange(val) {
				this.pageSize=val;
				this.getTableList();
			},
			handleCurrentChange(val) {
				this.page=val;
				this.getTableList();
			  },
			getMenuList(){
				this.treeData=[];
				//获取菜单
				this.$api.login.getMenus({
					"shape":"tree"
				}).then(res=>{
					this.treeData = res.menu_tree[0].children;
				})
			},
			getTableList(){
				this.tableData=[];
				let offset = (this.page - 1) * this.pageSize;
				this.$api.ops.getRoleList({
					limit: this.pageSize,
					offset: offset,
				}).then((res)=>{
					this.total=res.total_num;
					
					if(res.list_data==null){
						this.tableData=[]
					}else{
						this.tableData=res.list_data;
					}
				}).catch((error)=>{
					
				})
			},
			delFun(index,row){
				this.$confirm('此操作将永久删除该选项, 是否继续?', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
					this.$api.ops.delUser({},row.role_unid).then(res=>{
						if(res.ecode==200){
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
							this.getTableList();
						}else{
							this.$message({
								type: 'error',
								message: '删除失败!'
							});
						}
					})
				 
				}).catch(() => {
				  this.$message({
					type: 'info',
					message: '已取消删除'
				  });          
				});
			},
			editUser(index,row){
				this.editVisible=true;
				this.$refs.editTree.setCheckedKeys([]);
				this.$api.ops.getPerms({
				},row.role_unid).then(res=>{
					this.editForm.role_name=row.name;
					res.list_data.forEach(item=>{
						this.$refs.editTree.setCheckedKeys([item.perm_unid]);
					})
					this.editUnid=row.role_unid;
				})
			},
			openAddDialog(){
				 this.$refs['addForm'].resetFields();
			},
			addRole(){
				this.addVisible=true;
			},
			addFun(formName){
				this.addForm.menu_unids=[];
				this.addForm.menu_unids=this.$refs.addTree.getCheckedKeys().sort((a, b) => { return a - b; });
				this.$refs[formName].validate((valid) => {
				  if (valid) {
					this.$api.ops.addRole({name:this.addForm.role_name}).then(res=>{
						if(!res.ecode){
							this.$api.ops.bindperms({perm_unids:this.addForm.menu_unids},res.role_unid).then(data=>{
								if(!data.code){
									this.$message({
										type: 'success',
										message: '添加成功!'
									});
									this.addVisible=false;
									this.getTableList();
								}else{
									this.$message({
										type: 'error',
										message: data.enote
									});
								}
									
							})
						}else{
							this.$message({
								type: 'error',
								message: res.enote
							});
						}
					})
				  } else {
					return false;
				  }
				});
				
			},
			editFun(formName){
				this.editForm.menu_unids=[];
					this.editForm.menu_unids=this.$refs.editTree.getCheckedKeys().sort((a, b) => { return a - b; });
					this.$refs[formName].validate((valid) => {
						if (valid) {
							this.$api.ops.editRole({name:this.editForm.role_name},this.editUnid).then(res=>{
								if(!res.code){
									this.$api.ops.bindperms({perm_unids:this.editForm.menu_unids},this.editUnid).then(data=>{
										if(!data.code){
											this.$message({
												type: 'success',
												message: '修改成功!'
											});
											this.editVisible=false;
											this.getTableList();
										}else{
											this.$message({
												type: 'error',
												message: data.enote
											});
										}
											
									})
								}else{
									this.$message({
										type: 'error',
										message: res.enote
									});
								}
							})
						
						} else {
							return false;
						}
					});
			}
		},
	}
</script>
<style lang="scss" scoped>
	.topCon{
		background: $white-back-color;
		margin-bottom: 12px;
		height: 100px;
		.left{
			display: inline-block;
			margin: {
				top: 22px;
				left: 30px;
			};
			img{
				width:65px ;
				height: 55px;
				margin-right: 11px;
			}
			.topText{
				font-size:24px;
				font-family:MicrosoftYaHeiUI-Bold,MicrosoftYaHeiUI;
				font-weight:bold;
				margin-bottom: 4px;
			}
			.bottomText{
				font-size:14px;
				font-family:MicrosoftYaHeiUI;
			}
		}
		.right{
			float: right;
			.topText{
				font-size:28px;
				font-family:MicrosoftYaHeiUI-Bold,MicrosoftYaHeiUI;
				font-weight:bold;
			}
			.bottomText{
				position: relative;
				    top: -1px;
				font-size:14px;
				font-family:MicrosoftYaHeiUI;
			}
		}
		.textCon{
			display: inline-block;
			vertical-align: top;
		}
		.border{
			display: inline-block;
			height: 40px;
			border: {
				left: 2px solid $border-color;
			};
		}
		.rightBox{
			margin-top: 14px;
			display: inline-block;
			img{
				margin:{
					top:15px;
					right: 22px;
				}
			}
		}
		.rightBox:nth-of-type(1){
			img{
				width: 34px;
				height: 34px;
			}
			.textCon{
				margin-right:114px ;
			}
		}
		.rightBox:nth-of-type(2){
			    position: relative;
			    top: 4px;
			img{
				width: 40px;
				height: 40px;
				margin-left: 102px;
			}
			.textCon{
				margin-right:101px ;
			}
		}
		.rightBox:nth-of-type(3){
			img{
				width: 34px;
				height: 35px;
				margin-left: 104px;
			}
			.textCon{
				margin-right:184px ;
			}
		}
	}
	.content{
		background: #FFFFFF;
	}
	.inputBox{
		margin-right: 20px;
	}
	.selectBox{
		margin-right: 20px;
	}
	.editIcon{
		cursor: pointer;
		color:#0069ff;
		font-size:16px;
	}
	.editIcon2{
		cursor: pointer;
		color:#87d14b;
		font-size:16px;
	}
	.playIcon{
		cursor: pointer;
		color:#34b3a2;
		font-size:16px;
	}
	.pauseIcon{
		cursor: pointer;
		color:#ffc62e;
		font-size:14px;
	}
	.delIcon{
		cursor: pointer;
		color:#f2365a;
		font-size:16px;
	}
</style>