RoleForm.vue 2.73 KB
<template>
	<el-dialog title="权限设置" :close-on-click-modal="false" :visible.sync="visible" class="NCC-dialog NCC-dialog_center"
		lock-scroll width="400px">
		<el-tree ref="menuTree" :data="AppMenu" show-checkbox node-key="Id"
			:props="{ label: 'FullName', children: 'children' }" :default-checked-keys="checkedMenus"
			:highlight-current="true" :expand-on-click-node="false" :check-on-click-node="true"
			@check="handleCheckChange" />
		<span slot="footer" class="dialog-footer">
			<el-button @click="visible = false">取 消</el-button>
			<el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail">确 定</el-button>
		</span>
	</el-dialog>
</template>
<script>
import request from '@/utils/request'
import { getDictionaryDataSelector } from '@/api/systemData/dictionary'
import { previewDataInterface } from '@/api/systemData/dataInterface'
export default {
	components: {},
	props: [],
	data() {
		return {
			loading: false,
			visible: false,
			isDetail: false,
			AppMenu: [],
			agentId: "",
			checkedMenus: [],     // 选中的菜单 ID
		}
	},
	computed: {},
	watch: {},
	created() {
		this.GetWxAppMenu();
	},
	mounted() {
	},
	methods: {
		handleCheckChange(data, checked, indeterminate) {
			// checkedKeys.checked 为选中的 id 数组
			console.log(data, checked, indeterminate);
			this.checkedMenus = checked.checkedKeys;
		},
		GetWxAppMenu() {
			request({
				url: '/api/Extend/UavPermissionRelation/GetWxAppMenu',
				method: 'get'
			}).then(res => {
				this.AppMenu = res.data
			});
		},
		goBack() {
			this.$emit('refresh')
		},
		init(id, isDetail) {
			this.agentId = id || 0;
			this.visible = true;
			this.isDetail = isDetail || false;
			this.$nextTick(() => {
				this.$refs.menuTree.setCheckedKeys([]);
				if (this.agentId) {
					request({
						url: '/api/Extend/UavPermissionRelation/GetUserPermissions/' + this.agentId,
						method: 'get'
					}).then(res => {
						this.checkedMenus = res.data || [];
					})
				}
			});

		},
		dataFormSubmit() {
			request({
				url: `/api/Extend/UavPermissionRelation/SetPermission/${this.agentId}`,
				method: 'post',
				data: this.checkedMenus,
			}).then((res) => {
				this.$message({
					message: res.msg,
					type: 'success',
					duration: 1000,
					onClose: () => {
						this.visible = false,
							this.$emit('refresh', true)
					}
				})
			})
		},
	}
}
</script>

<style lang="scss" scoped>
.permission-form {
	.permission-tree {
		margin: 15px 0;
		border: 1px solid #e6e6e6;
		border-radius: 4px;
		padding: 10px;
		max-height: 400px;
		overflow-y: auto;

		>>>.el-tree-node__content {
			height: 32px;

			&:hover {
				background-color: #f5f7fa;
			}
		}

		>>>.el-tree-node.is-current>.el-tree-node__content {
			background-color: #f0f7ff;
		}
	}
}
</style>