Jcdm041-MesCVT.git

yyt

8 天以前 0cceb649e1dc443c2a91d26d81eacb0867c96db3

提交 \| 用户 \| 时间
0cceb6	1	<template>
Y	2	<div class="app-container">
	3	<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
	4	<el-form-item label="角色名称" prop="roleName">
	5	<el-input
	6	v-model="queryParams.roleName"
	7	placeholder="请输入角色名称"
	8	clearable
	9	style="width: 240px"
	10	@keyup.enter.native="handleQuery"
	11	/>
	12	</el-form-item>
	13	<el-form-item label="权限字符" prop="roleKey">
	14	<el-input
	15	v-model="queryParams.roleKey"
	16	placeholder="请输入权限字符"
	17	clearable
	18	style="width: 240px"
	19	@keyup.enter.native="handleQuery"
	20	/>
	21	</el-form-item>
	22	<el-form-item label="状态" prop="status">
	23	<el-select
	24	v-model="queryParams.status"
	25	placeholder="角色状态"
	26	clearable
	27	style="width: 240px"
	28	>
	29	<el-option
	30	v-for="dict in dict.type.sys_normal_disable"
	31	:key="dict.value"
	32	:label="dict.label"
	33	:value="dict.value"
	34	/>
	35	</el-select>
	36	</el-form-item>
	37	<el-form-item label="创建时间">
	38	<el-date-picker
	39	v-model="dateRange"
	40	style="width: 240px"
	41	value-format="yyyy-MM-dd"
	42	type="daterange"
	43	range-separator="-"
	44	start-placeholder="开始日期"
	45	end-placeholder="结束日期"
	46	></el-date-picker>
	47	</el-form-item>
	48	<el-form-item>
	49	<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
	50	<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
	51	</el-form-item>
	52	</el-form>
	53
	54	<el-row :gutter="10" class="mb8">
	55	<el-col :span="1.5">
	56	<el-button
	57	type="primary"
	58	plain
	59	icon="el-icon-plus"
	60	size="mini"
	61	@click="handleAdd"
	62	v-hasPermi="['system:role:add']"
	63	>新增</el-button>
	64	</el-col>
	65	<el-col :span="1.5">
	66	<el-button
	67	type="success"
	68	plain
	69	icon="el-icon-edit"
	70	size="mini"
	71	:disabled="single"
	72	@click="handleUpdate"
	73	v-hasPermi="['system:role:edit']"
	74	>修改</el-button>
	75	</el-col>
	76	<el-col :span="1.5">
	77	<el-button
	78	type="danger"
	79	plain
	80	icon="el-icon-delete"
	81	size="mini"
	82	:disabled="multiple"
	83	@click="handleDelete"
	84	v-hasPermi="['system:role:remove']"
	85	>删除</el-button>
	86	</el-col>
	87	<el-col :span="1.5">
	88	<el-button
	89	type="warning"
	90	plain
	91	icon="el-icon-download"
	92	size="mini"
	93	@click="handleExport"
	94	v-hasPermi="['system:role:export']"
	95	>导出</el-button>
	96	</el-col>
	97	<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
	98	</el-row>
	99
	100	<el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
	101	<el-table-column type="selection" width="55" align="center" />
	102	<el-table-column label="角色编号" prop="roleId" width="120" />
	103	<el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" />
	104	<el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="150" />
	105	<el-table-column label="显示顺序" prop="roleSort" width="100" />
	106	<el-table-column label="状态" align="center" width="100">
	107	<template slot-scope="scope">
	108	<el-switch
	109	v-model="scope.row.status"
	110	active-value="0"
	111	inactive-value="1"
	112	@change="handleStatusChange(scope.row)"
	113	></el-switch>
	114	</template>
	115	</el-table-column>
	116	<el-table-column label="创建时间" align="center" prop="createTime" width="180">
	117	<template slot-scope="scope">
	118	<span>{{ parseTime(scope.row.createTime) }}</span>
	119	</template>
	120	</el-table-column>
	121	<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
	122	<template slot-scope="scope" v-if="scope.row.roleId !== 1">
	123	<el-button
	124	size="mini"
	125	type="text"
	126	icon="el-icon-edit"
	127	@click="handleUpdate(scope.row)"
	128	v-hasPermi="['system:role:edit']"
	129	>修改</el-button>
	130	<el-button
	131	size="mini"
	132	type="text"
	133	icon="el-icon-delete"
	134	@click="handleDelete(scope.row)"
	135	v-hasPermi="['system:role:remove']"
	136	>删除</el-button>
	137	<el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:role:edit']">
	138	<el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
	139	<el-dropdown-menu slot="dropdown">
	140	<el-dropdown-item command="handleDataScope" icon="el-icon-circle-check"
	141	v-hasPermi="['system:role:edit']">数据权限</el-dropdown-item>
	142	<el-dropdown-item command="handleAuthUser" icon="el-icon-user"
	143	v-hasPermi="['system:role:edit']">分配用户</el-dropdown-item>
	144	</el-dropdown-menu>
	145	</el-dropdown>
	146	</template>
	147	</el-table-column>
	148	</el-table>
	149
	150	<pagination
	151	v-show="total>0"
	152	:total="total"
	153	:page.sync="queryParams.pageNum"
	154	:limit.sync="queryParams.pageSize"
	155	@pagination="getList"
	156	/>
	157
	158	<!-- 添加或修改角色配置对话框 -->
	159	<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
	160	<el-form ref="form" :model="form" :rules="rules" label-width="100px">
	161	<el-form-item label="角色名称" prop="roleName">
	162	<el-input v-model="form.roleName" placeholder="请输入角色名称" />
	163	</el-form-item>
	164	<el-form-item prop="roleKey">
	165	<span slot="label">
	166	<el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasRole('admin')`)" placement="top">
	167	<i class="el-icon-question"></i>
	168	</el-tooltip>
	169	权限字符
	170	</span>
	171	<el-input v-model="form.roleKey" placeholder="请输入权限字符" />
	172	</el-form-item>
	173	<el-form-item label="角色顺序" prop="roleSort">
	174	<el-input-number v-model="form.roleSort" controls-position="right" :min="0" />
	175	</el-form-item>
	176	<el-form-item label="状态">
	177	<el-radio-group v-model="form.status">
	178	<el-radio
	179	v-for="dict in dict.type.sys_normal_disable"
	180	:key="dict.value"
	181	:label="dict.value"
	182	>{{dict.label}}</el-radio>
	183	</el-radio-group>
	184	</el-form-item>
	185	<el-form-item label="菜单权限">
	186	<el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
	187	<el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
	188	<el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>
	189	<el-tree
	190	class="tree-border"
	191	:data="menuOptions"
	192	show-checkbox
	193	ref="menu"
	194	node-key="id"
	195	:check-strictly="!form.menuCheckStrictly"
	196	empty-text="加载中，请稍候"
	197	:props="defaultProps"
	198	></el-tree>
	199	</el-form-item>
	200	<el-form-item label="备注">
	201	<el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
	202	</el-form-item>
	203	</el-form>
	204	<div slot="footer" class="dialog-footer">
	205	<el-button type="primary" @click="submitForm">确定</el-button>
	206	<el-button @click="cancel">取消</el-button>
	207	</div>
	208	</el-dialog>
	209
	210	<!-- 分配角色数据权限对话框 -->
	211	<el-dialog :title="title" :visible.sync="openDataScope" width="500px" append-to-body>
	212	<el-form :model="form" label-width="80px">
	213	<el-form-item label="角色名称">
	214	<el-input v-model="form.roleName" :disabled="true" />
	215	</el-form-item>
	216	<el-form-item label="权限字符">
	217	<el-input v-model="form.roleKey" :disabled="true" />
	218	</el-form-item>
	219	<el-form-item label="权限范围">
	220	<el-select v-model="form.dataScope" @change="dataScopeSelectChange">
	221	<el-option
	222	v-for="item in dataScopeOptions"
	223	:key="item.value"
	224	:label="item.label"
	225	:value="item.value"
	226	></el-option>
	227	</el-select>
	228	</el-form-item>
	229	<el-form-item label="数据权限" v-show="form.dataScope == 2">
	230	<el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox>
	231	<el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选</el-checkbox>
	232	<el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">父子联动</el-checkbox>
	233	<el-tree
	234	class="tree-border"
	235	:data="deptOptions"
	236	show-checkbox
	237	default-expand-all
	238	ref="dept"
	239	node-key="id"
	240	:check-strictly="!form.deptCheckStrictly"
	241	empty-text="加载中，请稍候"
	242	:props="defaultProps"
	243	></el-tree>
	244	</el-form-item>
	245	</el-form>
	246	<div slot="footer" class="dialog-footer">
	247	<el-button type="primary" @click="submitDataScope">确定</el-button>
	248	<el-button @click="cancelDataScope">取消</el-button>
	249	</div>
	250	</el-dialog>
	251	</div>
	252	</template>
	253
	254	<script>
	255	import { listRole, getRole, delRole, addRole, updateRole, dataScope, changeRoleStatus, deptTreeSelect } from "@/api/system/role";
	256	import { treeselect as menuTreeselect, roleMenuTreeselect } from "@/api/system/menu";
	257
	258	export default {
	259	name: "Role",
	260	dicts: ['sys_normal_disable'],
	261	data() {
	262	return {
	263	// 遮罩层
	264	loading: true,
	265	// 选中数组
	266	ids: [],
	267	// 非单个禁用
	268	single: true,
	269	// 非多个禁用
	270	multiple: true,
	271	// 显示搜索条件
	272	showSearch: true,
	273	// 总条数
	274	total: 0,
	275	// 角色表格数据
	276	roleList: [],
	277	// 弹出层标题
	278	title: "",
	279	// 是否显示弹出层
	280	open: false,
	281	// 是否显示弹出层（数据权限）
	282	openDataScope: false,
	283	menuExpand: false,
	284	menuNodeAll: false,
	285	deptExpand: true,
	286	deptNodeAll: false,
	287	// 日期范围
	288	dateRange: [],
	289	// 数据范围选项
	290	dataScopeOptions: [
	291	{
	292	value: "1",
	293	label: "全部数据权限"
	294	},
	295	{
	296	value: "2",
	297	label: "自定数据权限"
	298	},
	299	{
	300	value: "3",
	301	label: "本部门数据权限"
	302	},
	303	{
	304	value: "4",
	305	label: "本部门及以下数据权限"
	306	},
	307	{
	308	value: "5",
	309	label: "仅本人数据权限"
	310	}
	311	],
	312	// 菜单列表
	313	menuOptions: [],
	314	// 部门列表
	315	deptOptions: [],
	316	// 查询参数
	317	queryParams: {
	318	pageNum: 1,
	319	pageSize: 10,
	320	roleName: undefined,
	321	roleKey: undefined,
	322	status: undefined
	323	},
	324	// 表单参数
	325	form: {},
	326	defaultProps: {
	327	children: "children",
	328	label: "label"
	329	},
	330	// 表单校验
	331	rules: {
	332	roleName: [
	333	{ required: true, message: "角色名称不能为空", trigger: "blur" }
	334	],
	335	roleKey: [
	336	{ required: true, message: "权限字符不能为空", trigger: "blur" }
	337	],
	338	roleSort: [
	339	{ required: true, message: "角色顺序不能为空", trigger: "blur" }
	340	]
	341	}
	342	};
	343	},
	344	created() {
	345	this.getList();
	346	},
	347	methods: {
	348	/** 查询角色列表 */
	349	getList() {
	350	this.loading = true;
	351	listRole(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
	352	this.roleList = response.rows;
	353	this.total = response.total;
	354	this.loading = false;
	355	}
	356	);
	357	},
	358	/** 查询菜单树结构 */
	359	getMenuTreeselect() {
	360	menuTreeselect().then(response => {
	361	this.menuOptions = response.data;
	362	});
	363	},
	364	// 所有菜单节点数据
	365	getMenuAllCheckedKeys() {
	366	// 目前被选中的菜单节点
	367	let checkedKeys = this.$refs.menu.getCheckedKeys();
	368	// 半选中的菜单节点
	369	let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys();
	370	checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
	371	return checkedKeys;
	372	},
	373	// 所有部门节点数据
	374	getDeptAllCheckedKeys() {
	375	// 目前被选中的部门节点
	376	let checkedKeys = this.$refs.dept.getCheckedKeys();
	377	// 半选中的部门节点
	378	let halfCheckedKeys = this.$refs.dept.getHalfCheckedKeys();
	379	checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
	380	return checkedKeys;
	381	},
	382	/** 根据角色ID查询菜单树结构 */
	383	getRoleMenuTreeselect(roleId) {
	384	return roleMenuTreeselect(roleId).then(response => {
	385	this.menuOptions = response.menus;
	386	return response;
	387	});
	388	},
	389	/** 根据角色ID查询部门树结构 */
	390	getDeptTree(roleId) {
	391	return deptTreeSelect(roleId).then(response => {
	392	this.deptOptions = response.depts;
	393	return response;
	394	});
	395	},
	396	// 角色状态修改
	397	handleStatusChange(row) {
	398	let text = row.status === "0" ? "启用" : "停用";
	399	this.$modal.confirm('确认要"' + text + '""' + row.roleName + '"角色吗？').then(function() {
	400	return changeRoleStatus(row.roleId, row.status);
	401	}).then(() => {
	402	this.$modal.msgSuccess(text + "成功");
	403	}).catch(function() {
	404	row.status = row.status === "0" ? "1" : "0";
	405	});
	406	},
	407	// 取消按钮
	408	cancel() {
	409	this.open = false;
	410	this.reset();
	411	},
	412	// 取消按钮（数据权限）
	413	cancelDataScope() {
	414	this.openDataScope = false;
	415	this.reset();
	416	},
	417	// 表单重置
	418	reset() {
	419	if (this.$refs.menu != undefined) {
	420	this.$refs.menu.setCheckedKeys([]);
	421	}
	422	this.menuExpand = false,
	423	this.menuNodeAll = false,
	424	this.deptExpand = true,
	425	this.deptNodeAll = false,
	426	this.form = {
	427	roleId: undefined,
	428	roleName: undefined,
	429	roleKey: undefined,
	430	roleSort: 0,
	431	status: "0",
	432	menuIds: [],
	433	deptIds: [],
	434	menuCheckStrictly: true,
	435	deptCheckStrictly: true,
	436	remark: undefined
	437	};
	438	this.resetForm("form");
	439	},
	440	/** 搜索按钮操作 */
	441	handleQuery() {
	442	this.queryParams.pageNum = 1;
	443	this.getList();
	444	},
	445	/** 重置按钮操作 */
	446	resetQuery() {
	447	this.dateRange = [];
	448	this.resetForm("queryForm");
	449	this.handleQuery();
	450	},
	451	// 多选框选中数据
	452	handleSelectionChange(selection) {
	453	this.ids = selection.map(item => item.roleId)
	454	this.single = selection.length!=1
	455	this.multiple = !selection.length
	456	},
	457	// 更多操作触发
	458	handleCommand(command, row) {
	459	switch (command) {
	460	case "handleDataScope":
	461	this.handleDataScope(row);
	462	break;
	463	case "handleAuthUser":
	464	this.handleAuthUser(row);
	465	break;
	466	default:
	467	break;
	468	}
	469	},
	470	// 树权限（展开/折叠）
	471	handleCheckedTreeExpand(value, type) {
	472	if (type == 'menu') {
	473	let treeList = this.menuOptions;
	474	for (let i = 0; i < treeList.length; i++) {
	475	this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value;
	476	}
	477	} else if (type == 'dept') {
	478	let treeList = this.deptOptions;
	479	for (let i = 0; i < treeList.length; i++) {
	480	this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value;
	481	}
	482	}
	483	},
	484	// 树权限（全选/全不选）
	485	handleCheckedTreeNodeAll(value, type) {
	486	if (type == 'menu') {
	487	this.$refs.menu.setCheckedNodes(value ? this.menuOptions: []);
	488	} else if (type == 'dept') {
	489	this.$refs.dept.setCheckedNodes(value ? this.deptOptions: []);
	490	}
	491	},
	492	// 树权限（父子联动）
	493	handleCheckedTreeConnect(value, type) {
	494	if (type == 'menu') {
	495	this.form.menuCheckStrictly = value ? true: false;
	496	} else if (type == 'dept') {
	497	this.form.deptCheckStrictly = value ? true: false;
	498	}
	499	},
	500	/** 新增按钮操作 */
	501	handleAdd() {
	502	this.reset();
	503	this.getMenuTreeselect();
	504	this.open = true;
	505	this.title = "添加角色";
	506	},
	507	/** 修改按钮操作 */
	508	handleUpdate(row) {
	509	this.reset();
	510	const roleId = row.roleId \|\| this.ids
	511	const roleMenu = this.getRoleMenuTreeselect(roleId);
	512	getRole(roleId).then(response => {
	513	this.form = response.data;
	514	this.open = true;
	515	this.$nextTick(() => {
	516	roleMenu.then(res => {
	517	let checkedKeys = res.checkedKeys
	518	checkedKeys.forEach((v) => {
	519	this.$nextTick(()=>{
	520	this.$refs.menu.setChecked(v, true ,false);
	521	})
	522	})
	523	});
	524	});
	525	this.title = "修改角色";
	526	});
	527	},
	528	/** 选择角色权限范围触发 */
	529	dataScopeSelectChange(value) {
	530	if(value !== '2') {
	531	this.$refs.dept.setCheckedKeys([]);
	532	}
	533	},
	534	/** 分配数据权限操作 */
	535	handleDataScope(row) {
	536	this.reset();
	537	const deptTreeSelect = this.getDeptTree(row.roleId);
	538	getRole(row.roleId).then(response => {
	539	this.form = response.data;
	540	this.openDataScope = true;
	541	this.$nextTick(() => {
	542	deptTreeSelect.then(res => {
	543	this.$refs.dept.setCheckedKeys(res.checkedKeys);
	544	});
	545	});
	546	this.title = "分配数据权限";
	547	});
	548	},
	549	/** 分配用户操作 */
	550	handleAuthUser: function(row) {
	551	const roleId = row.roleId;
	552	this.$router.push("/system/role-auth/user/" + roleId);
	553	},
	554	/** 提交按钮 */
	555	submitForm: function() {
	556	this.$refs["form"].validate(valid => {
	557	if (valid) {
	558	if (this.form.roleId != undefined) {
	559	this.form.menuIds = this.getMenuAllCheckedKeys();
	560	updateRole(this.form).then(response => {
	561	this.$modal.msgSuccess("修改成功");
	562	this.open = false;
	563	this.getList();
	564	});
	565	} else {
	566	this.form.menuIds = this.getMenuAllCheckedKeys();
	567	addRole(this.form).then(response => {
	568	this.$modal.msgSuccess("新增成功");
	569	this.open = false;
	570	this.getList();
	571	});
	572	}
	573	}
	574	});
	575	},
	576	/** 提交按钮（数据权限） */
	577	submitDataScope: function() {
	578	if (this.form.roleId != undefined) {
	579	this.form.deptIds = this.getDeptAllCheckedKeys();
	580	dataScope(this.form).then(response => {
	581	this.$modal.msgSuccess("修改成功");
	582	this.openDataScope = false;
	583	this.getList();
	584	});
	585	}
	586	},
	587	/** 删除按钮操作 */
	588	handleDelete(row) {
	589	const roleIds = row.roleId \|\| this.ids;
	590	this.$modal.confirm('是否确认删除角色编号为"' + roleIds + '"的数据项？').then(function() {
	591	return delRole(roleIds);
	592	}).then(() => {
	593	this.getList();
	594	this.$modal.msgSuccess("删除成功");
	595	}).catch(() => {});
	596	},
	597	/** 导出按钮操作 */
	598	handleExport() {
	599	this.download('system/role/export', {
	600	...this.queryParams
	601	}, `role_${new Date().getTime()}.xlsx`)
	602	}
	603	}
	604	};
	605	</script>