循环树和checkbox 相关选中处理

已于 2023-08-30 17:55:08 修改
阅读量757 收藏 2
点赞数
分类专栏： element-ui vue3 文章标签： elementui
于 2023-08-30 17:31:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yf18040578780/article/details/132587063
版权 

<template>
	<div class="container-wrap layout-padding">
		<el-card shadow="hover" class="top-card">
			<div class="system-user-search">
				<el-form :inline="true" :model="state.filters" ref="searchConditions">
					<el-form-item label="机构名称" class="row-padding-bottom">
						<el-input v-model="state.filters.org_name" size="default" placeholder="请输入机构名称" clearable style="width: 220px"> </el-input>
					</el-form-item>
					<el-form-item label="" class="row-padding-bottom">
						<el-button size="default" type="primary" class="ml10" @click="getTableData"> 查询 </el-button>
						<el-button size="default" class="ml10" @click="resetTableData"> 重置 </el-button>
					</el-form-item>
				</el-form>
			</div>
		</el-card>
		<el-card shadow="hover">
			<div class="header">
				<div class="title">权限组管理</div>
				<div>
					<el-button v-hasBtn="'Button:roleManage:add'" size="default" type="primary" @click="openDialog('add')"> 新增 </el-button>
				</div>
			</div>
			<el-table
				:data="state.tableData.data"
				v-loading="state.tableData.loading"
				style="width: 100%"
				:row-style="{ height: '44px' }"
				:header-cell-style="{ background: '#FAFAFA', height: '44px', color: '#333333' }"
			>
				<el-table-column prop="name" label="权限组名称"></el-table-column>
				<el-table-column prop="org_name" label="机构名称"></el-table-column>
				<el-table-column label="操作" fixed="right">
					<template #default="scope">
						<el-link type="primary" @click="openDialog('detail', scope.row)" style="margin-right: 10px">浏览</el-link>
						<el-link type="primary" v-hasBtn="'Button:roleManage:update'" @click="openDialog('edit', scope.row)" style="margin-right: 10px"
							>编辑</el-link
						>
						<el-link type="primary" v-hasBtn="'Button:roleManage:del'" @click="toDel(scope.row)">删除</el-link>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				class="mt15"
				:pager-count="5"
				:page-sizes="[10, 20, 30]"
				:current-page="state.filters.page_index"
				background
				:page-size="state.filters.page_size"
				layout="total, sizes, prev, pager, next, jumper"
				:total="state.tableData.total"
			>
			</el-pagination>
			<div v-if="state.dialog.isShowDialog" class="system-user-dialog-container">
				<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="900px" @close="onCancel">
					<el-form
						ref="ruleFormRef"
						:model="state.ruleForm"
						:rules="state.rules"
						:disabled="state.dialog.title == '浏览'"
						size="default"
						label-width="100px"
					>
						<el-row :gutter="35">
							<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mb20">
								<el-form-item label="权限组名称" prop="name">
									<el-input v-model="state.ruleForm.name" placeholder="请输入" maxlength="20" clearable></el-input>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mb20">
								<el-form-item label="机构名称" prop="org_id" class="row-padding-bottom">
									<el-select v-model="state.ruleForm.org_id" placeholder="请选择" clearable>
										<el-option v-for="(item, index) in state.orgsOption" :key="index" :label="item.name" :value="item.id"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
								<div class="small-title">功能权限</div>
								<div class="small-title" style="padding-left: 52px">数据权限</div>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
								<el-form-item v-for="(item, i) in state.listPers" :key="i" :label="item.name" class="row-padding-bottom">
									<div class="half-transfer">
										<div class="el-transfer-panel">
											<div class="all">
												<el-checkbox v-model="state.selectTreeAll[i]" @change="handleSelectTreeAll($event, i)">全部</el-checkbox>
											</div>
											<div class="input-wrap">
												<el-input v-model="state.searchTreeInput[i]" placeholder="请输入搜索内容" clearable @clear="clearTreeSearch(i)"></el-input>
											</div>
											<div class="el-transfer__list">
												<el-tree
													:ref="getTreeRef(i)"
													:data="item.perm_tree"
													:props="state.defaultProps"
													node-key="id"
													:default-expand-all="true"
													show-checkbox
													:default-checked-keys="item.perm_ids"
													:filter-node-method="filterNode"
													@check="handleCheckChange(i)"
												></el-tree>
											</div>
										</div>
									</div>
									<!-- 是否显示右边 -->
									<div class="half-transfer" v-if="item.org_flag === 1" style="margin-right: 0">
										<div class="el-transfer-panel">
											<div class="all">
												<el-checkbox v-model="state.selectOrgAll[i]" @change="handleSelectOrgAll($event, i)">全部</el-checkbox>
											</div>
											<div class="input-wrap">
												<el-input v-model="state.searchOrgInput[i]" placeholder="请输入搜索内容" clearable @clear="clearOrgSearch(i)"></el-input>
											</div>
											<div class="el-transfer__list">
												<el-checkbox-group v-model="item.org_ids" @change="handleCheckbox($event, i)" class="el-transfer__list">
													<el-checkbox v-for="(item, index) in filteredOptions[i]" :key="index" :label="item.id">{{ item.name }}</el-checkbox>
												</el-checkbox-group>
											</div>
										</div>
									</div>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
					<template #footer>
						<span v-if="state.dialog.title != '浏览'" class="dialog-footer">
							<el-button @click="onCancel" size="default">取消</el-button>
							<el-button v-throttle type="primary" @click="onSubmit" size="default">确定</el-button>
						</span>
					</template>
				</el-dialog>
			</div>
		</el-card>
	</div>
</template>

<script setup name="perGroupManage">
import { ElMessageBox, ElMessage } from 'element-plus';
import { getRolelList, getListperm, getOrgslList, addRole, updateRole, delRole } from '/@/api/system.js';
const ruleFormRef = ref(null);

// 定义变量内容
const state = reactive({
	// 列表查询条件
	filters: {
		page_index: 1,
		page_size: 10,
	},
	tableData: {
		data: [],
		total: 0,
		loading: false,
	},
	listPers: [], // 功能权限
	ruleForm: {},
	currentStatus: true,
	orgsOption: [], // 所属机构
	rules: {
		name: [
			{
				required: true,
				message: '请输入权限组名称',
				trigger: 'blur',
			},
		],
		org_id: [
			{
				required: true,
				message: '请选择机构名称',
				trigger: 'change',
			},
		],
	},
	dialog: {
		isShowDialog: false,
		type: '',
		title: '新增',
	},
	defaultProps: {
		children: 'children',
		label: 'name',
		value: 'id',
	},
	selectTreeAll: [false],
	selectOrgAll: [false],
	searchTreeInput: [''], // 功能权限树搜索
	searchOrgInput: [''], // 数据权限多选搜索
	role_id: '',
});

const resetTableData = () => {
	state.filters = {
		page_index: 1,
		page_size: 10,
	};
	getTableData();
};

// 数据权限查询
const filteredOptions = computed(() => {
	return state.listPers.map((item, index) => {
		const searchText = state.searchOrgInput[index];
		if (!searchText) {
			return item.orgsOption;
		}
		const filtered = item.orgsOption.filter((option) => option.name.toLowerCase().includes(searchText.toLowerCase()));
		return filtered;
	});
});
const treeRefs = ref([]);
const getTreeRef = (index) => {
	return (el) => {
		treeRefs.value[index] = el;
	};
};

// tree 搜索查询
watch(
	state.searchTreeInput,
	(newVal) => {
		try {
			for (let i in newVal) {
				treeRefs.value[i].filter(newVal[i]);
			}
		} catch (error) {
			console.log('error', error);
		}
	},
	{ deep: true }
);

const filterNode = (value, data) => {
	if (!value) return true;
	return data.name.includes(value);
};

// 用户中心树全选
const handleSelectTreeAll = (checked, i) => {
	console.log(11111, checked, i, getAllNodeKeys(state.listPers[i].perm_tree));
	if (checked) {
		state.listPers[i].perm_ids = getAllNodeKeys(state.listPers[i].perm_tree);
	} else {
		state.listPers[i].perm_ids = [];
		treeRefs.value[i].setCheckedKeys([]);
	}
};

// 数据权限全选/取消全选
const handleSelectOrgAll = (checked, i) => {
	console.log(2222, checked, i);
	if (checked) {
		state.listPers[i].org_ids = state.orgsOption.map((option) => option.id);
	} else {
		state.listPers[i].org_ids = [];
	}
};

const getAllNodeKeys = (treeData) => {
	const keys = [];
	const traverse = (nodes) => {
		for (const node of nodes) {
			keys.push(node.id);
			if (node.children && node.children.length > 0) {
				traverse(node.children);
			}
		}
	};
	traverse(treeData);
	return keys;
};

const handleCheckChange = (i) => {
	const checkedKeys = treeRefs.value[i].getCheckedKeys();
	console.log(checkedKeys);
	state.listPers[i].perm_ids = checkedKeys;
	nextTick(() => {
		if (treeRefs.value[i]) {
			const nodes = treeRefs.value[i].root.childNodes;
			console.log(12345, nodes);
			const allChecked = nodes.every((node) => node.checked);
			state.selectTreeAll[i] = allChecked;
		}
	});
};

// 数据权限选择问题
const handleCheckbox = (data, i) => {
	console.log(1111111, data, i, state.listPers);
	if (state.listPers[i].org_ids.length === state.orgsOption.length) {
		state.selectOrgAll[i] = true;
	} else {
		state.selectOrgAll[i] = false;
	}
};

const clearTreeSearch = (i) => {
	state.searchTreeInput[i] = '';
};

// 数据权限搜索清空
const clearOrgSearch = (i) => {
	state.searchOrgInput[i] = '';
};

// 初始化表格数据
const getTableData = () => {
	getRolelList(state.filters)
		.then((res) => {
			if (res.data.code === 1) {
				let data = res.data.data;
				state.tableData.data = data.rows;
				state.tableData.total = data.total;
			}
		})
		.catch((error) => {});
};

// 机构
const getOption = () => {
	let params = {
		page_index: 1,
		page_size: 0,
	};
	getOrgslList(params)
		.then((res) => {
			if (res.data.code === 1) {
				let data = res.data.data;
				state.orgsOption = data.rows;
			}
		})
		.catch((error) => {
			console.log(error);
		});
};

// 分页改变
const onHandleCurrentChange = (val) => {
	state.filters.page_index = val;
	getTableData();
};

// 每页数量
const onHandleSizeChange = (val) => {
	state.filters.page_size = val;
	getTableData();
};

// 编辑
const openDialog = async (type, row) => {
	state.dialog.isShowDialog = true;
	if (type === 'add') {
		state.dialog.title = '新增';
		state.ruleForm = {};
		state.role_id = '';
	} else {
		state.role_id = row.id;
		const { name, org_id } = row;
		state.ruleForm.name = name;
		state.ruleForm.org_id = org_id;
	}
	if (type == 'edit') state.dialog.title = '编辑';
	if (type == 'detail') state.dialog.title = '浏览';
	state.listPers = [];
	await getOption();
	await getDiaListperm(type);
};

// 查询权限组
const getDiaListperm = (type) => {
	getListperm({ role_id: state.role_id })
		.then((res) => {
			if (res.data.code === 1) {
				state.listPers = res.data.data;
				for (let i = 0; i < state.listPers.length; i++) {
					if (!state.listPers[i].hasOwnProperty('orgsOption')) {
						state.listPers[i].orgsOption = []; // 添加一个空数组作为初始值
					}
					if (type === 'edit') {
						if (state.listPers[i].perm_tree.length > 0) {
							let arr1 = getAllLeaf(state.listPers[i].perm_tree);
							let arr2 = state.listPers[i].perm_ids;
							let arr3 = arr1.filter((item) => {
								return arr2.includes(item);
							});
							state.listPers[i].perm_ids = arr3;
						}
					}
					state.listPers[i].orgsOption.push(...state.orgsOption);
				}
				console.log(12345678, state.listPers)
			}
		})
		.catch((error) => {
			console.log(error);
		});
};

// 提交 添加/修改
const onSubmit = () => {
	if (!ruleFormRef) return;
	ruleFormRef.value.validate((valid) => {
		if (valid) {
			// 必须选择数据和功能权限
			const hasAnyValues = state.listPers.some((item) => item.perm_ids?.length || item.org_ids?.length);
			if (!hasAnyValues) {
				ElMessage.error('请选择至少一个数据和功能权限');
				return;
			}
			if (state.dialog.title === '新增') {
				saveAdd();
			} else {
				saveUpdate();
			}
		} else {
			return false;
		}
	});
};

// 添加
const saveAdd = () => {
	state.ruleForm.modules = state.listPers;
	addRole(state.ruleForm)
		.then((res) => {
			if (res.data.code === 1) {
				ElMessage.success('新增成功');
				// 刷新列表
				getTableData();
				state.dialog.isShowDialog = false;
			}
		})
		.catch((error) => {});
};

// 修改
const saveUpdate = () => {
	state.ruleForm.id = state.role_id;
	state.ruleForm.modules = state.listPers;
	updateRole(state.ruleForm)
		.then((res) => {
			if (res.data.code === 1) {
				ElMessage.success('编辑成功');
				// 刷新列表
				getTableData();
				state.dialog.isShowDialog = false;
			}
		})
		.catch((error) => {});
};

// 删除
const toDel = (row) => {
	ElMessageBox.confirm(`是否确认删除权限组？`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(() => {
			delRole(`role_id=${row.id}`)
				.then((res) => {
					if (res.data.code === 1) {
						ElMessage.success('删除成功');
						// 刷新列表
						getTableData();
					}
				})
				.catch((error) => {
					return;
				});
		})
		.catch(() => {});
};
// 取消
const onCancel = () => {
	// 清除验证
	ruleFormRef.value.clearValidate();
	state.dialog.isShowDialog = false;
};

// 最后一级叶子节点

const getAllLeaf = function (data) {
	let result = [];

	function getParentIds(data) {
		data.forEach((item) => {
			if (item.children.length < 1) {
				result.push(item.id); // 添加父节点ID
			} else {
				getParentIds(item.children);
			}
		});
	}

	getParentIds(data);
	return result;
};

// 页面加载时
onMounted(() => {
	getTableData();
});
</script>
<style scoped lang="scss">
.container-wrap {
	position: relative;
	:deep(.el-card__body) {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow-y: auto;
	}
}
.el-select {
	width: 100%;
}

.small-title {
	padding: 8px 30px;
	width: 50%;
	float: left;
	height: 36px;
	background: #f4f4f4;
	font-weight: 600;
	color: #333333;
}
.half-transfer {
	margin-right: 46px;
	margin-bottom: 10px;
	width: 333px;
	height: 260px;
	border-radius: 4px;
	border: 1px solid #dddddd;
}

.el-transfer-panel {
	display: flex;
	flex-direction: column;
	// height: 100%;
	.all {
		padding: 4px 20px;
		border-bottom: 1px solid #f4f4f4;
	}
	.input-wrap {
		padding: 10px 20px;
	}
}

.el-transfer__list {
	overflow-y: auto;
	border-radius: 4px;
	margin-top: 4px;
}

.el-transfer__list .el-checkbox-group {
	padding: 0 10px 20px 20px;
}

.el-transfer__list .el-checkbox {
	display: flex;
	line-height: 24px;
}

.el-transfer__list .el-checkbox:last-child {
	margin-bottom: 0;
}

.el-transfer__list .el-scrollbar {
	background-color: #f5f7fa;
}
</style>


[
	{
		module: 'user',
		perm_ids: [9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 2, 3, 4],
		org_ids: [1, 2],
		name: '用户中心',
		perm_tree: [
			{
				res_id: 'EnterMenu:user',
				name: '用户中心',
				res_type: 'EnterMenu',
				res_url: '',
				res_order: 1,
				icon: 'user',
				p_id: null,
				id: 1,
				module: 'user',
				belong: null,
				org_flag: null,
				hide: null,
				selected: true,
				children: [
					{
						res_id: 'ConsoleMenu:org',
						name: '机构管理',
						res_type: 'ConsoleMenu',
						res_url: '/system/hospitalConfig',
						res_order: 1,
						icon: 'icon-jigouguanli',
						p_id: 'EnterMenu:user',
						id: 6,
						module: 'user',
						belong: null,
						org_flag: null,
						hide: null,
						selected: true,
						children: [
							{
								res_id: 'Button:orgManage:view',
								name: '查看',
								res_type: 'Button',
								res_url: null,
								res_order: 1,
								icon: null,
								p_id: 'ConsoleMenu:org',
								id: 9,
								module: 'user',
								belong: null,
								org_flag: null,
								hide: null,
								selected: true,
								children: [],
							},
							{
								res_id: 'Button:orgManage:update',
								name: '编辑',
								res_type: 'Button',
								res_url: null,
								res_order: 2,
								icon: null,
								p_id: 'ConsoleMenu:org',
								id: 10,
								module: 'user',
								belong: null,
								org_flag: null,
								hide: null,
								selected: true,
								children: [],
							},
							{
								res_id: 'Button:orgManage:add',
								name: '新增',
								res_type: 'Button',
								res_url: null,
								res_order: 3,
								icon: null,
								p_id: 'ConsoleMenu:org',
								id: 11,
								module: 'user',
								belong: null,
								org_flag: null,
								hide: null,
								selected: true,
								children: [],
							},
							{
								res_id: 'Button:orgManage:del',
								name: '删除',
								res_type: 'Button',
								res_url: null,
								res_order: 4,
								icon: null,
								p_id: 'ConsoleMenu:org',
								id: 12,
								module: 'user',
								belong: null,
								org_flag: null,
								hide: null,
								selected: true,
								children: [],
							},
						],
					},
					{
						res_id: 'ConsoleMenu:role',
						name: '权限组管理',
						res_type: 'ConsoleMenu',
						res_url: '/system/perGroupManage',
						res_order: 2,
						icon: 'icon-quanxianzuguanli ',
						p_id: 'EnterMenu:user',
						id: 7,
						module: 'user',
						belong: null,
						org_flag: null,
						hide: null,
						selected: true,
						children: [
							{
								res_id: 'Button:roleManage:view',
								name: '查看',
								res_type: 'Button',
								res_url: null,
								res_order: 1,
								icon: null,
								p_id: 'ConsoleMenu:role',
								id: 13,
								module: 'user',
								belong: null,
								org_flag: null,
								hide: null,
								selected: true,
								children: [],
							},
							{
								res_id: 'Button:roleManage:update',
								name: '编辑',
								res_type: 'Button',
								res_url: null,
								res_order: 2,
								icon: null,
								p_id: 'ConsoleMenu:role',
								id: 14,
								module: 'user',
								belong: null,
								org_flag: null,
								hide: null,
								selected: true,
								children: [],
							},
							{
								res_id: 'Button:roleManage:add',
								name: '新增',
								res_type: 'Button',
								res_url: null,
								res_order: 3,
								icon: null,
								p_id: 'ConsoleMenu:role',
								id: 15,
								module: 'user',
								belong: null,
								org_flag: null,
								hide: null,
								selected: true,
								children: [],
							},
							{
								res_id: 'Button:roleManage:del',
								name: '删除',
								res_type: 'Button',
								res_url: null,
								res_order: 4,
								icon: null,
								p_id: 'ConsoleMenu:role',
								id: 16,
								module: 'user',
								belong: null,
								org_flag: null,
								hide: null,
								selected: true,
								children: [],
							},
						],
					},
					{
						res_id: 'ConsoleMenu:user',
						name: '用户管理',
						res_type: 'ConsoleMenu',
						res_url: '/system/userManage',
						res_order: 3,
						icon: 'icon-yonghuguanli',
						p_id: 'EnterMenu:user',
						id: 8,
						module: 'user',
						belong: null,
						org_flag: null,
						hide: null,
						selected: true,
						children: [
							{
								res_id: 'Button:userManage:view',
								name: '查看',
								res_type: 'Button',
								res_url: null,
								res_order: 1,
								icon: null,
								p_id: 'ConsoleMenu:user',
								id: 17,
								module: 'user',
								belong: null,
								org_flag: null,
								hide: null,
								selected: true,
								children: [],
							},
							{
								res_id: 'Button:userManage:update',
								name: '编辑',
								res_type: 'Button',
								res_url: null,
								res_order: 2,
								icon: null,
								p_id: 'ConsoleMenu:user',
								id: 18,
								module: 'user',
								belong: null,
								org_flag: null,
								hide: null,
								selected: true,
								children: [],
							},
							{
								res_id: 'Button:userManage:add',
								name: '新增',
								res_type: 'Button',
								res_url: null,
								res_order: 3,
								icon: null,
								p_id: 'ConsoleMenu:user',
								id: 19,
								module: 'user',
								belong: null,
								org_flag: null,
								hide: null,
								selected: true,
								children: [],
							},
							{
								res_id: 'Button:userManage:del',
								name: '删除',
								res_type: 'Button',
								res_url: null,
								res_order: 4,
								icon: null,
								p_id: 'ConsoleMenu:user',
								id: 20,
								module: 'user',
								belong: null,
								org_flag: null,
								hide: null,
								selected: true,
								children: [],
							},
							{
								res_id: 'Button:userManage:pwd',
								name: '重置密码',
								res_type: 'Button',
								res_url: null,
								res_order: 5,
								icon: null,
								p_id: 'ConsoleMenu:user',
								id: 21,
								module: 'user',
								belong: null,
								org_flag: null,
								hide: null,
								selected: true,
								children: [],
							},
						],
					},
				],
			},
			{
				res_id: 'EnterMenu:image',
				name: '影像中心',
				res_type: 'EnterMenu',
				res_url: '',
				res_order: 2,
				icon: 'image',
				p_id: null,
				id: 2,
				module: 'user',
				belong: null,
				org_flag: null,
				hide: null,
				selected: true,
				children: [],
			},
			{
				res_id: 'EnterMenu:sci',
				name: '科研平台',
				res_type: 'EnterMenu',
				res_url: '/html/demo-3d/',
				res_order: 3,
				icon: 'scientific',
				p_id: null,
				id: 3,
				module: 'user',
				belong: null,
				org_flag: null,
				hide: null,
				selected: true,
				children: [],
			},
			{
				res_id: 'EnterMenu:teach',
				name: '教学平台',
				res_type: 'EnterMenu',
				res_url: '/html/teach',
				res_order: 4,
				icon: 'teach',
				p_id: null,
				id: 4,
				module: 'user',
				belong: null,
				org_flag: null,
				hide: null,
				selected: true,
				children: [],
			},
		],
		org_flag: 1,
		orgsOption: [
			{
				id: 1,
				name: '默认机构',
				module: null,
				role_id: null,
				create_time: '2023-08-21 16:35:49',
			},
			{
				id: 2,
				name: '协和医院',
				module: null,
				role_id: null,
				create_time: '2023-08-21 16:39:54',
			},
		],
	},
	{
		module: 'teach',
		perm_ids: [43, 44, 45, 49, 50, 51, 52, 53, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 57, 58, 59, 60],
		org_ids: [],
		name: '教学平台',
		perm_tree: [
			{
				res_id: 'MainMenu:1',
				name: '基础课程',
				res_type: 'MainMenu',
				res_url: '/base',
				res_order: 1,
				icon: null,
				p_id: null,
				id: 43,
				module: 'teach',
				belong: null,
				org_flag: null,
				hide: null,
				selected: true,
				children: [],
			},
			{
				res_id: 'MainMenu:2',
				name: '案例教学',
				res_type: 'MainMenu',
				res_url: '/case',
				res_order: 2,
				icon: null,
				p_id: null,
				id: 44,
				module: 'teach',
				belong: null,
				org_flag: null,
				hide: null,
				selected: true,
				children: [],
			},
			{
				res_id: 'MainMenu:3',
				name: '拟实操作',
				res_type: 'MainMenu',
				res_url: '/operate',
				res_order: 3,
				icon: null,
				p_id: null,
				id: 45,
				module: 'teach',
				belong: null,
				org_flag: null,
				hide: null,
				selected: true,
				children: [],
			},
			{
				res_id: 'MainMenu:4',
				name: '考试中心',
				res_type: 'MainMenu',
				res_url: '/testCenter',
				res_order: 4,
				icon: null,
				p_id: null,
				id: 46,
				module: 'teach',
				belong: null,
				org_flag: null,
				hide: null,
				selected: true,
				children: [
					{
						res_id: 'ExamMenu:1',
						name: '我的考试',
						res_type: 'ExamMenu',
						res_url: '/testCenter/myTest',
						res_order: 1,
						icon: 'icon-wodekaoshi',
						p_id: 'MainMenu:4',
						id: 49,
						module: 'teach',
						belong: null,
						org_flag: null,
						hide: null,
						selected: true,
						children: [],
					},
					{
						res_id: 'ExamMenu:2',
						name: '我的成绩',
						res_type: 'ExamMenu',
						res_url: '/testCenter/myScore',
						res_order: 2,
						icon: 'icon-chengjichaxun',
						p_id: 'MainMenu:4',
						id: 50,
						module: 'teach',
						belong: null,
						org_flag: null,
						hide: null,
						selected: true,
						children: [],
					},
				],
			},
			{
				res_id: 'MainMenu:5',
				name: '个人中心',
				res_type: 'MainMenu',
				res_url: '/me',
				res_order: 5,
				icon: null,
				p_id: null,
				id: 47,
				module: 'teach',
				belong: null,
				org_flag: null,
				hide: null,
				selected: true,
				children: [
					{
						res_id: 'UserCenterMenu:1',
						name: '消息通知',
						res_type: 'UserCenterMenu',
						res_url: '/me/message',
						res_order: 1,
						icon: 'icon-xiaoxizhongxin',
						p_id: 'MainMenu:5',
						id: 51,
						module: 'teach',
						belong: null,
						org_flag: null,
						hide: null,
						selected: true,
						children: [],
					},
					{
						res_id: 'UserCenterMenu:2',
						name: '我的收藏',
						res_type: 'UserCenterMenu',
						res_url: '/me/favorites',
						res_order: 2,
						icon: 'icon-wodeshoucang',
						p_id: 'MainMenu:5',
						id: 52,
						module: 'teach',
						belong: null,
						org_flag: null,
						hide: null,
						selected: true,
						children: [],
					},
					{
						res_id: 'UserCenterMenu:3',
						name: '能力评价',
						res_type: 'UserCenterMenu',
						res_url: '/me/analysis',
						res_order: 3,
						icon: 'icon-nenglipingjia',
						p_id: 'MainMenu:5',
						id: 53,
						module: 'teach',
						belong: null,
						org_flag: null,
						hide: null,
						selected: true,
						children: [],
					},
				],
			},
			{
				res_id: 'MainMenu:6',
				name: '后台管理',
				res_type: 'MainMenu',
				res_url: '/systemSet',
				res_order: 6,
				icon: null,
				p_id: null,
				id: 48,
				module: 'teach',
				belong: null,
				org_flag: null,
				hide: null,
				selected: true,
				children: [
					{
						res_id: 'ConsoleMenu:3',
						name: '课程管理',
						res_type: 'ConsoleMenu',
						res_url: '/systemSet/courseManage',
						res_order: 3,
						icon: 'icon-a-kechengguanlixin',
						p_id: 'MainMenu:6',
						id: 54,
						module: 'teach',
						belong: null,
						org_flag: null,
						hide: null,
						selected: true,
						children: [
							{
								res_id: 'Button:courseManage:view',
								name: '查看',
								res_type: 'Button',
								res_url: null,
								res_order: 1,
								icon: null,
								p_id: 'ConsoleMenu:3',
								id: 61,
								module: 'teach',
								belong: null,
								org_flag: null,
								hide: null,
								selected: true,
								children: [],
							},
							{
								res_id: 'Button:courseManage:update',
								name: '编辑',
								res_type: 'Button',
								res_url: null,
								res_order: 2,
								icon: null,
								p_id: 'ConsoleMenu:3',
								id: 62,
								module: 'teach',
								belong: null,
								org_flag: null,
								hide: null,
								selected: true,
								children: [],
							},
							{
								res_id: 'Button:courseManage:add',
								name: '新增',
								res_type: 'Button',
								res_url: null,
								res_order: 3,
								icon: null,
								p_id: 'ConsoleMenu:3',
								id: 63,
								module: 'teach',
								belong: null,
								org_flag: null,
								hide: null,
								selected: true,
								children: [],
							},
							{
								res_id: 'Button:courseManage:del',
								name: '删除',
								res_type: 'Button',
								res_url: null,
								res_order: 4,
								icon: null,
								p_id: 'ConsoleMenu:3',
								id: 64,
								module: 'teach',
								belong: null,
								org_flag: null,
								hide: null,
								selected: true,
								children: [],
							},
							{
								res_id: 'Button:courseManage:audit',
								name: '审核',
								res_type: 'Button',
								res_url: null,
								res_order: 5,
								icon: null,
								p_id: 'ConsoleMenu:3',
								id: 65,
								module: 'teach',
								belong: null,
								org_flag: null,
								hide: null,
								selected: true,
								children: [],
							},
							{
								res_id: 'Button:courseManage:offline',
								name: '上下线',
								res_type: 'Button',
								res_url: null,
								res_order: 6,
								icon: null,
								p_id: 'ConsoleMenu:3',
								id: 66,
								module: 'teach',
								belong: null,
								org_flag: null,
								hide: null,
								selected: true,
								children: [],
							},
						],
					},
					{
						res_id: 'ConsoleMenu:4',
						name: '案例管理',
						res_type: 'ConsoleMenu',
						res_url: '/systemSet/caseManage',
						res_order: 4,
						icon: 'icon-anliguanli',
						p_id: 'MainMenu:6',
						id: 55,
						module: 'teach',
						belong: null,
						org_flag: null,
						hide: null,
						selected: true,
						children: [
							{
								res_id: 'Button:caseManage:view',
								name: '查看',
								res_type: 'Button',
								res_url: null,
								res_order: 1,
								icon: null,
								p_id: 'ConsoleMenu:4',
								id: 67,
								module: 'teach',
								belong: null,
								org_flag: null,
								hide: null,
								selected: true,
								children: [],
							},
							{
								res_id: 'Button:caseManage:update',
								name: '编辑',
								res_type: 'Button',
								res_url: null,
								res_order: 2,
								icon: null,
								p_id: 'ConsoleMenu:4',
								id: 68,
								module: 'teach',
								belong: null,
								org_flag: null,
								hide: null,
								selected: true,
								children: [],
							},
							{
								res_id: 'Button:caseManage:add',
								name: '新增',
								res_type: 'Button',
								res_url: null,
								res_order: 3,
								icon: null,
								p_id: 'ConsoleMenu:4',
								id: 69,
								module: 'teach',
								belong: null,
								org_flag: null,
								hide: null,
								selected: true,
								children: [],
							},
							{
								res_id: 'Button:caseManage:del',
								name: '删除',
								res_type: 'Button',
								res_url: null,
								res_order: 4,
								icon: null,
								p_id: 'ConsoleMenu:4',
								id: 70,
								module: 'teach',
								belong: null,
								org_flag: null,
								hide: null,
								selected: true,
								children: [],
							},
						],
					},
					{
						res_id: 'ConsoleMenu:5',
						name: '考试管理',
						res_type: 'ConsoleMenu',
						res_url: '/examManage',
						res_order: 5,
						icon: 'icon-kaoshiguanli',
						p_id: 'MainMenu:6',
						id: 56,
						module: 'teach',
						belong: null,
						org_flag: null,
						hide: null,
						selected: true,
						children: [
							{
								res_id: 'ExamCtrMenu:1',
								name: '题库管理',
								res_type: 'ExamCtrMenu',
								res_url: '/systemSet/examManage/examQuestionManage',
								res_order: 1,
								icon: null,
								p_id: 'ConsoleMenu:5',
								id: 57,
								module: 'teach',
								belong: null,
								org_flag: null,
								hide: null,
								selected: true,
								children: [],
							},
							{
								res_id: 'ExamCtrMenu:2',
								name: '试卷管理',
								res_type: 'ExamCtrMenu',
								res_url: '/systemSet/examManage/testPaperManage',
								res_order: 2,
								icon: null,
								p_id: 'ConsoleMenu:5',
								id: 58,
								module: 'teach',
								belong: null,
								org_flag: null,
								hide: null,
								selected: true,
								children: [],
							},
							{
								res_id: 'ExamCtrMenu:3',
								name: '考试安排',
								res_type: 'ExamCtrMenu',
								res_url: '/systemSet/examManage/examSchedule',
								res_order: 3,
								icon: null,
								p_id: 'ConsoleMenu:5',
								id: 59,
								module: 'teach',
								belong: null,
								org_flag: null,
								hide: null,
								selected: true,
								children: [],
							},
							{
								res_id: 'ExamCtrMenu:4',
								name: '成绩统计',
								res_type: 'ExamCtrMenu',
								res_url: '/systemSet/examManage/examStatistics',
								res_order: 4,
								icon: null,
								p_id: 'ConsoleMenu:5',
								id: 60,
								module: 'teach',
								belong: null,
								org_flag: null,
								hide: null,
								selected: true,
								children: [],
							},
						],
					},
				],
			},
		],
		org_flag: 0,
		orgsOption: [
			{
				id: 1,
				name: '默认机构',
				module: null,
				role_id: null,
				create_time: '2023-08-21 16:35:49',
			},
			{
				id: 2,
				name: '协和医院',
				module: null,
				role_id: null,
				create_time: '2023-08-21 16:39:54',
			},
		],
	},
	{
		module: 'image',
		perm_ids: [],
		org_ids: [],
		name: '影像中心',
		perm_tree: [],
		org_flag: 1,
		orgsOption: [
			{
				id: 1,
				name: '默认机构',
				module: null,
				role_id: null,
				create_time: '2023-08-21 16:35:49',
			},
			{
				id: 2,
				name: '协和医院',
				module: null,
				role_id: null,
				create_time: '2023-08-21 16:39:54',
			},
		],
	},
	{
		module: 'sci',
		perm_ids: [],
		org_ids: [],
		name: '科研平台',
		perm_tree: [],
		org_flag: 0,
		orgsOption: [
			{
				id: 1,
				name: '默认机构',
				module: null,
				role_id: null,
				create_time: '2023-08-21 16:35:49',
			},
			{
				id: 2,
				name: '协和医院',
				module: null,
				role_id: null,
				create_time: '2023-08-21 16:39:54',
			},
		],
	},
];

前端小芬芬
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【element】el-form中使用el-tree绑定之问题 可以使用$set
jieweiwujie的博客
02-10 1197
el-form中使用el-tree绑定之问题 可以使用$set <template> <div> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" > <el-form-item label="活动性质" prop="ty
jquery循环复选框选中的值_jQuery操作复选框(CheckBox)的取值赋值实现代码
weixin_35385462的博客
02-01 862
1. 获取单个checkbox选中项(三种写法)：$("input:checkbox:checked").val()或者$("input:[type='checkbox']:checked").val();或者$("input:[name='ck']:checked").val();2. 获取多个checkbox选中项：$('input:checkbox').each(function() {if...
vue中循环多组checkbox-group
m0_57442975的博客
10-12 5589
1.因为官网给出的checkbox group绑定的数据格式是数组，而在项目中接收的数据通常是对象数组，我这里label绑定的是数组中对象的id属性，点击获取的是id的数组，在最后提交数据时需要做处理。2.一开始也尝试了label绑定整个对象，这样获取到的直接便是最终需要的对象数组，展示和添加是可以实现的，但是回显遇到了问题，在网上看是回显的数据格式要与选中的数组中对象的格式一致，尝试了没有效果，后面再研究一下。
VUE+TS使用elementUI的el-checkbox双重v-for循环做勾选
最新发布
chabaimgg的博客
04-24 839
【代码】VUE+TS使用elementUI的el-checkbox双重v-for循环做勾选。
el-form-item 设置 prop 报错：please transfer a valid prop path to form item!
qq_26642611的博客
10-30 1670
<template v-for="(person,index) in Form.List"> <el-form-item :prop="'List.'+index + '.code'" :key="person.key" :rules="rules"> <el-input v-model="person.code"></el-input> </el-form-item> <el-form-item pr
C#遍历得到checkboxlist选中值和设置选中项的代码
09-01
这个函数通过循环遍历CheckBoxList中的所有Items，检查每个Item是否被选中。如果Item被选中，它的Value属性会被添加到结果字符串`str`中，并用分隔符隔开。最后，使用`TrimEnd`方法去除字符串末尾多余的分隔符。 接...
循环动态判断checkbox是否被选中
04-05
### 循环动态判断Checkbox是否被选中 在ASP.NET Web应用程序开发中，尤其是在使用C#作为后端语言时，动态地判断一个或多个`Checkbox`控件的状态是非常常见的需求。这种需求通常出现在表单验证、用户选项设置等功能...
js 判断checkbox是否选中的实现代码
10-28
Checkbox允许用户在多个选项中选择一个或多个选项，通过检查checkbox是否被选中，可以执行相应的逻辑处理。本文将详细介绍如何使用JavaScript来判断checkbox是否被选中，并提供相应的实现代码。 首先，为了判断一个...
vue .js绑定checkbox并获取、改变选中状态的实例
10-18
对于复选框选中值的处理，我们可以利用`v-bind:true-value`和`v-bind:false-value`指令自定义选中和未选中的值，使数据更符合业务需求。通过这种方式，我们可以简化代码，提高开发效率，同时保持数据的准确性和一致...
checkBox分别处理选中与不选中
10-13
### checkBox分别处理选中与不选中 在Web开发中，`checkbox`是一种常见的表单元素，用于收集用户的选择信息。通常情况下，一个`checkbox`只能代表一项选择，但可以通过设置多个`checkbox`来实现多选功能。本文将...
element-ui的form表单里面写树形组件
qq_45489665的博客
03-16 1970
功能就是form表单，点击el-input输入框，弹出属性组件，点击选择一个树形组件 首先树形组件需要写在弹出框里 代码如下： <el-form-item> <el-popover :disabled='false' v-model="deptListVisible" placement="bottom-start" ref="deptListPopover" trig.
循环渲染多个复选框checkbox
weixin_60353902的博客
10-30 371
4. 注意：isChecked的值为[ ]空数组。因为多个复选框的选中状态也不一样，需要接收多个状态，多个要用数组的形式接收。有些人使用true/false，结果一点击复选框，就会全选，全部都是一个状态。1. 定义一个div容器，里面包含多个复选框，复选框的数据来源是后台数据，为数组。主要展示通过后台数据，循环渲染多个复选框，并解决同时选中和同时取消的问题。3. 通过Input标签，获取复选框的选中状态，使用v-model。2. 在div容器标签中，接收该数组, v-for循环渲染。
element 实现多个循环出来的复选框，以及回显
wqnmlgbsz的博客
09-11 5577
1.效果图如上 下面是demo1，点击aaaa 所有rule里面的链接 放到一个数组里面 <style scoped> </style> <template> <el-form label-width="200px"> <el-button @click="aa">点击我打印结果</el-button> <el-form-item v-for="item in ci...
vue+element查询功能（含树形列表查询）
weixin_49393290的博客
11-03 2191
效果图如下： html部分 <el-form :inline="true" :model="searchForm"> <el-form-item label="填报单位" prop="org"> <el-dialog width="30%" append-to-body title="选择区域" :visible.sync="visibleP...
vue 循环勾选框_Vue学习笔记-遍历el-checkbox
weixin_34551660的博客
01-13 3911
Vue学习笔记-遍历el-checkoutv-model="checkAll":label="list.eventtypeid">全选:label="operate.actionid":key="operate.actionid"@change="handleCheckedCitiesChange">{{operate.actionname}}看上面的例子，都是把el-checkbox...
VUE element-ui之el-tree树形控件循环遍历渲染dom节点；子节点横向排列；控件添加指示线
HanXiaoXi_yeal的博客
08-11 6117
VUE element-ui之el-tree树形控件循环遍历渲染dom节点；子节点横向排列；控件添加指示线
vue中使用Checkbox 多选框循环遍历
热门推荐
weixin_43549979的博客
08-20 1万+
首先效果展示 步骤如下： 1、html <el-form> <el-form-item v-for="(item, index) in dataList" :key="index"> <el-checkbox @change="(val) => handleCheckAllListChange(val, item)" :indeterminate="itemIndet
ant design vue 循环渲染复选框以及获取复选框获的值
潮汐未见潮落的博客
07-05 4545
ant design vue 循环渲染复选框以及获取复选框获的值
Vue3.0发布了，来带你看看变化
一再问究竟的博客
09-22 428
vue2.0 vs vue3.0 1.重构响应式系统，使用Proxy替换Object.defineProperty，使用Proxy优势： （1）可直接监听数组类型的数据变化 （2）监听的目标为对象本身，不需要像Object.defineProperty一样遍历每个属性，有一定的性能提升 （3）可拦截apply、ownKeys、has等13种方法，而Object.defineProperty不行 （4）直接实现对象属性的新增/删除 2.新增Composition API，更好的逻辑复用和代码组织 3.重构 V
获取uni-app 循环生成checkbox 默认选中的值
06-09
你可以通过以下步骤获取uni-app循环生成的checkbox默认选中的值： 1. 在你的data里定义一个数组并初始化它的值，例如： ``` data() { return { checkboxList: [ { label: '选项1', value: '1', checked: true }...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值