124 lines
4.2 KiB
Vue
124 lines
4.2 KiB
Vue
<template>
|
|
<view class="permission-example">
|
|
<wd-navbar title="权限控制示例" left-text="返回" @clickLeft="onBack" />
|
|
|
|
<view class="section li-p-30">
|
|
<view class="section-title li-mb-20 li-text-32 li-font-bold">1. 按钮权限控制</view>
|
|
|
|
<!-- 使用权限按钮组件 -->
|
|
<permission-button type="verification" class="li-mb-20">
|
|
<wd-button>核销按钮(F1权限)</wd-button>
|
|
</permission-button>
|
|
|
|
<permission-button type="delivery" class="li-mb-20">
|
|
<wd-button>配送按钮(F2权限)</wd-button>
|
|
</permission-button>
|
|
|
|
<permission-button type="promotion" class="li-mb-20">
|
|
<wd-button>推广按钮(F3权限)</wd-button>
|
|
</permission-button>
|
|
</view>
|
|
|
|
<view class="section li-p-30">
|
|
<view class="section-title li-mb-20 li-text-32 li-font-bold">2. 菜单列表权限控制</view>
|
|
|
|
<!-- 菜单列表筛选示例 -->
|
|
<wd-cell-group>
|
|
<wd-cell v-for="item in filteredMenuList" :key="item.type" :title="item.title" is-link @click="handleClick(item)" />
|
|
</wd-cell-group>
|
|
</view>
|
|
|
|
<view class="section li-p-30">
|
|
<view class="section-title li-mb-20 li-text-32 li-font-bold">3. 内联权限控制</view>
|
|
|
|
<!-- 直接使用hasPermission函数 -->
|
|
<view v-if="hasPermission('measure', userPermissions)" class="li-mb-20">
|
|
<view class="li-bg-#f2f2f2 li-p-20 li-rd-10">
|
|
<text class="li-text-28">这段内容只有拥有量房权限(F4)的用户才能看到</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="hasPermission('repair', userPermissions)" class="li-mb-20">
|
|
<view class="li-bg-#f2f2f2 li-p-20 li-rd-10">
|
|
<text class="li-text-28">这段内容只有拥有维修权限(F6)的用户才能看到</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="section li-p-30">
|
|
<view class="section-title li-mb-20 li-text-32 li-font-bold">4. 当前权限状态</view>
|
|
<view class="li-bg-#f2f2f2 li-p-20 li-rd-10">
|
|
<text class="li-text-26">权限列表: {{userPermissions.join(', ') || '无权限'}}</text>
|
|
</view>
|
|
|
|
<!-- 模拟切换权限 -->
|
|
<view class="li-mt-20">
|
|
<wd-button @click="togglePermission('F1')">切换F1权限</wd-button>
|
|
<wd-button @click="togglePermission('F2')" class="li-mt-10">切换F2权限</wd-button>
|
|
<wd-button @click="togglePermission('F3')" class="li-mt-10">切换F3权限</wd-button>
|
|
<wd-button @click="togglePermission('F4')" class="li-mt-10">切换F4权限</wd-button>
|
|
<wd-button @click="togglePermission('F6')" class="li-mt-10">切换F6权限</wd-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, provide } from 'vue'
|
|
import { hasPermission, filterByPermission } from '@/utils/permission'
|
|
import PermissionButton from '@/components/permission-button.vue'
|
|
|
|
// 模拟用户权限数据
|
|
const userPermissions = ref(['F1', 'F3'])
|
|
|
|
// 提供权限数据给子组件
|
|
provide('userPermissions', userPermissions)
|
|
|
|
// 菜单列表
|
|
const menuList = [
|
|
{ title: '商品核销', type: 'verification' },
|
|
{ title: '商品配送', type: 'delivery' },
|
|
{ title: '推广管理', type: 'promotion' },
|
|
{ title: '量房管理', type: 'measure' },
|
|
{ title: '维修管理', type: 'repair' },
|
|
{ title: '系统设置', type: 'settings' } // 这个没有权限控制，始终显示
|
|
]
|
|
|
|
// 过滤菜单列表
|
|
const filteredMenuList = computed(() => {
|
|
return filterByPermission(menuList, userPermissions.value)
|
|
})
|
|
|
|
// 切换权限
|
|
const togglePermission = (permissionCode) => {
|
|
const index = userPermissions.value.indexOf(permissionCode)
|
|
if (index >= 0) {
|
|
userPermissions.value.splice(index, 1)
|
|
} else {
|
|
userPermissions.value.push(permissionCode)
|
|
}
|
|
// 强制更新数组引用以触发响应式更新
|
|
userPermissions.value = [...userPermissions.value]
|
|
}
|
|
|
|
// 处理菜单点击
|
|
const handleClick = (item) => {
|
|
uni.showToast({
|
|
title: `点击了${item.title}`,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
|
|
// 返回上一页
|
|
const onBack = () => {
|
|
uni.navigateBack()
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.section {
|
|
margin-bottom: 30rpx;
|
|
background-color: #fff;
|
|
border-radius: 16rpx;
|
|
}
|
|
</style> |