front-end/hd/src/components/role-set.vue

<template>
	<el-drawer title="权限设置" :visible.sync="showStatus" size="70%" :before-close="closeFn">
		<div class="role-set-wrap">
			<div class="role-list" v-for="(item, index) in permTree" :key="index">
				<el-checkbox
					:indeterminate="isIndeterminate[index]"
					v-model="checkAll[index]"
					@change="handleCheckAllChange($event, index)"
					>{{ item.authName }}</el-checkbox
				>
				<div style="margin: 15px 0;"></div>
				<el-checkbox-group
					v-model="checkedPerm"
					@change="handlecheckedPermChange($event, index)"
				>
					<el-checkbox
						v-for="(items, subIndex) in item.children"
						:label="items.id"
						:key="items.id"
						>{{ items.authName }}</el-checkbox
					>
				</el-checkbox-group>
			</div>
		</div>
		<!-- button -->
		<div class="button-wrap flex-center">
			<el-button size="mini" @click="closeFn">关闭</el-button>
			<el-button type="primary" size="mini" @click="saveFn">保存</el-button>
		</div>
	</el-drawer>
</template>

<script>
export default {
	name: 'role-set',
	props: {
		show: {
			type: Boolean,
			default: false
		},
		info: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			showStatus: false,
			data: {},
			permTree: [],

			checkAll: [],
			checkedPerm: [],
			isIndeterminate: []
		};
	},
	watch: {
		show(val) {
			this.showStatus = val;
			if (val) {
				this.init();
			}
		}
	},
	methods: {
		init() {
			this._getTreeB().then(res => {
				console.log('res', res);
				if (this.$projectName == 'business') {
					this._getAuthB();
				}
			});
		},
		async _getTreeB() {
			let data = {};
			await this.$service.common.permTree({ endId: 1 }).then(res => {
				this.permTree = res;
				this.permTree.map(() => {
					this.isIndeterminate.push(false);
					this.checkAll.push(false);
				});
				data = res;
			});
			return data;
		},
		async _getAuthB() {
			let data = {};
			await this.$service.auth.authList({ roleId: this.info.roleId }).then(res => {
				data = res;
			});
			return data;
		},

		saveFn() {
			console.log('this.info', this.info);
			this.$service.auth
				.authUpdate({
					roleId: this.info.roleId,
					authIdList: this.checkedPerm
				})
				.then(res => {
					this.closeFn();
					this.$message.success('保存成功！');
				});
		},

		closeFn(done) {
			this.$emit('update:show', false);
			if (done) {
				done();
			}
		},

		handleCheckAllChange(val, index) {
			let arr = this.permTree[index].children
				? this.permTree[index].children
				: this.permTree[index];

			arr = arr.map(e => e.id);

			this.checkedPerm = val ? arr : [];
			this.$set(this.isIndeterminate, index, false);
		},
		handlecheckedPermChange(value, index) {
			let checkedCount = value.length;
			let arrLen = this.permTree[index].children ? this.permTree[index].children.length : 0;

			let checkAllStatus = checkedCount === arrLen;
			this.$set(this.checkAll, index, checkAllStatus);

			let isIndeterminateStatus = checkedCount > 0 && checkedCount < arrLen;
			this.$set(this.isIndeterminate, index, isIndeterminateStatus);
		}
	}
};
</script>

<style lang="scss" scoped>
.role-set-wrap {
	padding: 0 20px;
	height: calc(100% - 50px);
}
.button-wrap {
	padding-left: 20px;
}
.el-checkbox-group {
	margin-left: 25px;
}
</style>