eta_front/src/views/system_manage/roleManage.vue

<template>
	<div class="roleManage_container">
		<div class="role_cont_top">
			<div>
				<el-button v-permission="permissionBtn.sysDepartPermission.sysRole_addRole"
					type="primary" @click="addRole" style="marginRight:14px;">{{$t('SystemManage.RoleManage.role_add_btn')}}</el-button>
				<!-- <el-button v-permission="permissionBtn.sysDepartPermission.sysRole_settingAuth"
					type="primary" @click="setAuth">设置权限</el-button> -->
			</div>
			<el-input
				:placeholder="$t('SystemManage.RoleManage.search_placeholder')"
				v-model="search_txt"
				@input="getTableList"
				style="maxWidth:359px">
				<i slot="prefix" class="el-input__icon el-icon-search"></i>
			</el-input>
		</div>
		<div class="role_bot">
			<!-- 表格 -->
			<el-table
			ref="roleTable"
			:data="tableData"
			v-loading="isShowloadding"
			:element-loading-text="$t('Table.data_loading')" 
			border>
				<el-table-column
				prop="no"
				:label="$t('SystemManage.RoleManage.serial_num')"
				align="center">
					<template slot-scope="scope"> <span>{{scope.row.no}}</span> </template>
				</el-table-column>
				<el-table-column
				prop="RoleName"
				:label="$t('SystemManage.RoleManage.role_name')"
				align="center">
					<template slot-scope="scope"> <span>{{scope.row.RoleName}}</span> </template>
				</el-table-column>
				<el-table-column
				prop="RoleType"
				:label="$t('SystemManage.RoleManage.role_type')"
				align="center">
					<template slot-scope="scope"> <span>{{scope.row.RoleType}}</span> </template>
				</el-table-column>
				<el-table-column :label="$t('Table.column_operations')" align="center">
					<template slot-scope="scope">
						<div style="color:#4099ef; font-size:24px;">
							<!-- <span v-permission="permissionBtn.sysDepartPermission.sysRole_settingAuth"
								class="editsty" @click.stop="getAuthDetail(scope.row)" style="marginRight:20px;">查看权限</span> -->
								<span v-permission="permissionBtn.sysDepartPermission.sysRole_settingAuth"
									class="editsty" @click.stop="getAuthDetail(scope.row)" style="marginRight:20px;">{{$t('SystemManage.RoleManage.set_permission')}}</span>
							<span v-permission="permissionBtn.sysDepartPermission.sysRole_addRole"
								class="editsty" @click.stop="editRole(scope.row)" style="marginRight:20px;">{{$t('Table.edit_btn')}}</span>
							<span v-permission="permissionBtn.sysDepartPermission.sysRole_del"
								class="deletesty" @click.stop="delRole(scope.row)">{{$t('Table.delete_btn')}}</span>
						</div>
					</template>
				</el-table-column>
				<div slot="empty" style="lineHeight:25px;margin:20px 0;color:#95A9C5;">
					<tableNoData :text="$t('SystemManage.RoleManage.no_role_data')" size="mini"/>
				</div>
			</el-table>
			<el-col :span="24" class="toolbar">
				<el-pagination 
				layout="total,prev,pager,next,jumper"
				background 
				:current-page="page_no"
				@current-change="handleCurrentChange"
				:page-size="pageSize"
				:total="total" 
				style="float:right;">
				</el-pagination>
			</el-col>
		</div>
		<!-- 添加角色 -->
		<el-dialog
		:title="roleForm.title" 
		:visible.sync="isAddRole"
		:close-on-click-modal="false"
		:modal-append-to-body='false'
		@close="cancelHandle()"
		center
		width="30%"
		v-dialogDrag>
			<div slot="title" style="display:flex;alignItems:center;">
				<img :src="!roleForm.role_id?$icons.add:$icons.edit" style="color:#fff;width:16px;height:16px;marginRight:5px;">
				<span style="fontSize:16px;">{{roleForm.title}}</span>
			</div>
			<el-form :model="roleForm" :rules="roleRule" ref="roleForm" label-width="100px" class="demo-ruleForm" style="marginTop:15px;">
				<el-form-item :label="$t('SystemManage.RoleManage.role_name')" prop="name">
					<el-input v-model="roleForm.name" :placeholder="$t('SystemManage.RoleManage.input_role_placeholder')" style="width: 90%"></el-input>
				</el-form-item>
				<el-form-item :label="$t('SystemManage.RoleManage.role_type')" prop="roleType">
					<el-select v-model="roleForm.roleType" :placeholder="$t('SystemManage.RoleManage.select_role_placeholder')" style="width:90%">
						<el-option
							v-for="item in roleTypeArr"
							:key="item"
							:label="item"
							:value="item">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>	
			<div style="display:flex;justify-content:center;margin:75px 0 26px;">
				<el-button type="primary" style="width:80px;marginRight:24px;" @click="saveRole">{{$t('Dialog.confirm_save_btn')}}</el-button>
				<el-button  style="width:80px;" @click="cancelHandle()">{{$t('Dialog.cancel_btn')}}</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import {departInterence} from '@/api/api.js';
export default {
	name:'',
	components: {},
	computed:{
		roleTypeArr(){
			if(this.$i18n.locale==='en') return ['None','Administrator','FICC Administrator',
			'FICC Sales','Equity Administrator','Equity Sales','FICC Sales Supervisor','FICC Sales Team Leader',
			'Equity Sales Team Leader','FICC Department Manager','Equity Department Manager','FICC Researcher','Equity Researcher']
			return ['无','管理员','ficc管理员','ficc销售','权益管理员','权益销售','ficc销售主管','ficc销售组长','权益销售组长','ficc部门经理','权益部门经理','ficc研究员','权益研究员']
		}
	},
	data () {
		return {
			search_txt:'',//关键字搜索
			isShowloadding:false,
			tableData:[],//表格数据
			page_no:1,
			total:1,
			pageSize:10,

			isAddRole: false,
			roleForm:{
				title:'添加角色',
				name:'',
				roleType:'无'
			},
			roleRule:{
				name:[
					{ required: true, message: this.$t('SystemManage.RoleManage.input_role_placeholder'), trigger: 'blur' },
				],
				roleType:[
					{ required: true, message: this.$t('SystemManage.RoleManage.select_role_placeholder'), trigger: 'blur' },
				]
			},
			// roleTypeArr:['无','管理员','ficc管理员','ficc销售','权益管理员','权益销售','ficc销售主管','ficc销售组长','权益销售组长','ficc部门经理','权益部门经理','ficc研究员','权益研究员'],
		};
	},
	methods: {
		/* 角色表格数据 */
		getTableList() {
			this.isShowloadding = true
			departInterence.getRoleList({
				PageSize:this.pageSize,
				CurrentIndex:this.page_no,
				KeyWord:this.search_txt
			}).then(res => {
				if(res.Ret === 200) {
					this.isShowloadding = false;
					// this.tableData = res.Data.List;
					let arr = [];
					res.Data.List&&res.Data.List.forEach((item,index) => {
						let obj ={
							no:index+1,
							...item
						}
						arr.push(obj)
					});
					this.tableData = arr;
					this.total = res.Data.Paging.Totals || 1;
				}
			})
		},
		/* 页码改变 */
		handleCurrentChange(page) {
			this.page_no = page;
			this.getTableList();
		},
		/* 查看权限 */
		getAuthDetail(item) {
			this.$router.push({
				path:'/Sysauth',
				query:{
					id:item.RoleId
				}
			})
		},
		/* 设置权限 */
		setAuth() {
			this.$router.push({path:'/Sysauth'})
		},
		/* 添加角色 */
		addRole() {
			this.isAddRole = true;
			this.roleForm = {
				title:this.$t('SystemManage.RoleManage.role_add_btn'),
				name:'',
				roleType:this.roleTypeArr[0]
			}
		},
		// 取消
		cancelHandle() {
			this.isAddRole = false;
			this.roleForm = {
				title:this.$t('SystemManage.RoleManage.role_add_btn'),
				name:'',
				roleType:this.roleTypeArr[0]
			}
			this.$refs.roleForm.resetFields();
		},
		/* 保存角色 */
		saveRole() {
			this.$refs.roleForm.validate((valid) => {
				if (valid) {
					if(!this.roleForm.role_id) {
						departInterence.addRole({
							RoleName:this.roleForm.name,
							roleType:this.roleForm.roleType
						}).then(res => {
							if(res.Ret === 200) {
								this.$message.success(res.Msg)
								this.getTableList();
								this.isAddRole = false;
							}
						})
					}else {
						departInterence.editRole({
							RoleId:Number(this.roleForm.role_id),
							RoleName:this.roleForm.name,
							RoleType:this.roleForm.roleType
						}).then(res =>{
							if(res.Ret === 200) {
								this.$message.success(res.Msg);
								this.getTableList();
								this.isAddRole = false;
							}
						})
					}
				}
			})			
		},
		/* 编辑角色 */
		editRole(item) {
			this.isAddRole = true;
			this.roleForm = {
				title:this.$t('SystemManage.RoleManage.role_edit_btn'),
				name:item.RoleName,
				role_id:item.RoleId,
				roleType:item.RoleType
			}
		},
		/*  删除角色*/
		delRole(item) {
			this.$confirm(this.$t('SystemManage.RoleManage.delete_role_msg'),this.$t('Confirm.prompt'),{
				type:'warning'
			}).then(() => {
				departInterence.delRole({
					RoleId:item.RoleId
				}).then(res => {
					if(res.Ret === 200) {
						this.$message.success(this.$t('MsgPrompt.delete_msg'));
						this.isAddRole = false;
						this.getTableList();
					}
				})
			}).catch(() => {});
		}
	},
	mounted() {
		this.getTableList()
	},
}
</script>
<style lang='scss' >
.roleManage_container {
	min-height: calc(100vh - 120px);
	display: flex;
	flex-direction: column;
	/* reset */
	.el-form-item__label {
		font-size: 16px;
		padding-right: 20px !important;
	}
	.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
		content: '';
	}
	.role_cont_top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border: 1px solid #ECECEC;
		padding: 20px 30px;
		background: #fff;
		border-radius: 4px;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
	}
	.role_bot {
		flex: 1;
		//min-height: calc(100vh - 260px);
		padding: 20px 30px;
		background: #fff;
		margin-top: 20px;
		position: relative;
		border: 1px solid #ECECEC;
		border-radius: 4px;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
	}
}
</style>