You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
父组件:
`
<template #expand-icon="{ active }">
<template #header>
<div @click.stop="() => handleHeaderClick(item)" style="display: flex; align-items: center;">
<a-checkbox
v-model:model-value="item.select"
v-model:indeterminate="item.indeterminate"
@change="handleChangeAll(item)"
style="margin-top: 2px; min-width: 140px;"
class="dz-checkbox-permission"
>
{{ item.name }}
<template #prefix>
权重:
<DzPermissionCollapse
:data="item.children"
@handlePageChange="handlePageChange"
@handlePermissionsChange="handlePermissionsChange"
/>
<script setup lang="ts"> import { ref } from "vue"; import type { RouterType, PermissionsType } from "@/types/global"; import DzPermissionCollapse from "./components/dz-permission-collapse.vue"; // 工作区 import transaction from "./info/transaction.ts"; // 细分市场管理 import segmentationManage from "./info/segmentation-manage.ts"; // 产品管理 import productManagement from "./info/product-management.ts"; // 客户管理 import customerManagement from "./info/customer-management.ts"; // 销售管理 import salesManagement from "./info/sales-management.ts"; // 增值服务管理 import valueAddedServiceManagement from "./info/value-added-service-management.ts"; // 公共管理 import publicManagement from "./info/public-management.ts"; // 报表 import reportForms from "./info/report-forms.ts"; // 基础数据 import basicData from "./info/basic-data.ts"; // 个人中心 import personalCenter from "./info/personal-center.ts"; // 设置 import setUp from "./info/set-up.ts"; const treeData = ref([ transaction, segmentationManage, productManagement, customerManagement, salesManagement, valueAddedServiceManagement, publicManagement, reportForms, basicData, personalCenter, setUp ]); const handleHeaderClick = (item: RouterType) => { // 处理点击事件,防止阻止 checkbox 和 input 的默认行为 }; const handleChangeAll = (item: RouterType) => { console.log("顶级的 页面选择 信息") console.log(item); item.indeterminate = false; // 递归处理子项 if (item.children && item.children.length > 0) { for (let i = 0; i < item.children.length; i++) { var element = item.children[i]; element.select = item.select; handleChangeAll(element); // 递归调用 } } } const handlePageChange = (item: RouterType) => { console.log("ddd") // if (!bRecursion) { // console.log("最终父组件接受到的 页面选择 信息") // console.log(item); // } // 递归处理子项 if (item.children && item.children.length > 0) { for (let i = 0; i < item.children.length; i++) { var element = item.children[i]; element.select = item.select; handlePageChange(element); // 递归调用 } } } const handlePermissionsChange = (item: PermissionsType) => { console.log("最终父组件接受到的 权限选择 信息") console.log(item); } </script> <style scoped lang="less"> .dz-checkbox-permission { :deep(.arco-checkbox-label) { color: rgb(var(--arcoblue-6)); } } </style>
`
子组件:
`
<template #header>
<div @click.stop="() => {}" style="display: flex; align-items: center;">
<a-checkbox
@change="handlePageChange(item)"
style="margin-top: 2px; min-width: 140px;"
:value="item.key"
v-model:model-value="item.select"
v-model:indeterminate="item.indeterminate"
>
{{ item.name }}
<template #prefix>
权重:
<a-checkbox
style="margin-right: 20px;"
v-for="(itemp, indexp) in item.permissions"
:key="itemp.key"
:value="itemp.key"
v-model:model-value="itemp.select"
:disabled="!item.select"
@change="handlePermissionsChange(itemp)"
>
{{ itemp.name }}
<DzPermissionCollapse
:data="item.children"
@handleChange="handlePageChange"
@handlePermissionsChange="handlePermissionsChange"
>
<script lang="ts"> import type { RouterType, PermissionsType } from "@/types/global"; export default { name: "DzPermissionCollapse", }; </script> <script setup lang="ts"> import { defineEmits } from "vue"; const props = defineProps({ data: { type: Array as () => RouterType[], default() { return [] }, }, }); const $emit = defineEmits(['handlePageChange', "handlePermissionsChange"]); const handlePageChange = (item: RouterType) => { console.log("Page Change", item); $emit('handlePageChange', item); }; const handlePermissionsChange = (item: PermissionsType) => { console.log("Permissions Change"); $emit('handlePermissionsChange', item); }; </script> <style scoped> </style>
`
Beta Was this translation helpful? Give feedback.
All reactions