✨ feat:小程序角色权限控制

src/pages/user/index.tsx

@@ -1,5 +1,5 @@
 import { View, Image, Text } from '@tarojs/components'
-import { FC, useState } from 'react'
+import { FC, useEffect, useState } from 'react'
 import styles from './index.module.scss'
 import defaultAvatar from '../../styles/image/defaultAvatar.png'
 import NormalButton from '@/components/normalButton'
@@ -10,97 +10,119 @@ import IconCard from '@/components/iconCard'
 import { IconNames } from '@/components/iconfont/iconfont'
 import useUserInfo from '@/use/useUserInfo'
 import { goLink } from '@/common/common'
-
+import { checkKey } from "@/common/common"
+import { useDidShow } from '@tarojs/taro'
 type IconCardType = {
+  jurisdiction?: string //权限key值
   iconName: IconNames
   name: string
   path: string
 }
 
-const feature: IconCardType[] = [
+
+
+let feature: IconCardType[] = [
   {
     iconName: 'icon-lingquseka',
     name: '领取色卡',
     path: '',
+    jurisdiction: 'receive_color_card_page'
   },
   {
     iconName: 'icon-pandiansaoma',
     name: '盘点扫码',
     path: '',
+    jurisdiction: 'counting_scanning_code_page'
   },
   {
     iconName: 'icon-fahuoliebiao',
     name: '发货列表',
     path: '/pages/delivery/index',
+    jurisdiction: 'shipping_list_page'
   },
   {
     iconName: 'icon-yaoqingma',
     name: '邀请码',
     path: '',
+    jurisdiction: 'invitation_code_page'
   },
   {
     iconName: 'icon-tihuoliebiao',
     name: '提货列表',
     path: '/pages/takeDelivery/index',
+    jurisdiction: 'picking_list_module_page'
   },
   {
     iconName: 'icon-shouhouzhongxin',
     name: '退货退款',
     path: '/pages/refundPage/index',
+    jurisdiction: 'return_and_refund_page'
   },
   {
     iconName: 'icon-shoukuanliebiao',
     name: '收款列表',
     path: '/pages/newCollection/index',
+    jurisdiction: 'collection_list_page'
   },
   {
     iconName: 'icon-kehuxinxi',
     name: '客户列表',
     path: '',
+    jurisdiction: 'customer_list_page'
   },
 ]
 
-const fabric: IconCardType[] = [
+let fabric: IconCardType[] = [
   {
     iconName: 'icon-yansequyang',
     name: '颜色取样',
     path: '/pages/colorRelated/takeColor/index',
+    jurisdiction: 'color_sampling_page'
   },
   {
     iconName: 'icon-qusechazhao',
     name: '取色查找',
     path: '/pages/colorRelated/findColor/index',
+    jurisdiction: 'color_search_page'
   },
   {
     iconName: 'icon-yangpinduibi',
     name: '样品对比',
     path: '/pages/colorRelated/sampleComparison/index',
+    jurisdiction: 'sample_comparison_page'
   },
 ]
 
-const statisticAnalysis: IconCardType[] = [
+let statisticAnalysis: IconCardType[] = [
   {
     iconName: 'icon-xiaoshou',
     name: '销售',
     path: '/pages/saleStatistic/index',
+    jurisdiction: 'sales_page'
   },
   {
     iconName: 'icon-duizhang',
     name: '对账',
     path: '',
+    jurisdiction: 'reconciliation_page'
   },
   {
     iconName: 'icon-yuncangkucun',
     name: '云仓库存',
     path: '',
+    jurisdiction: 'cloud_warehouse_inventory_page'
   },
   {
     iconName: 'icon-qianzhicangkucun',
     name: '前置仓库存',
     path: '',
+    jurisdiction: 'front_warehouse_page'
   },
 ]
 
+
+
+
 // 用户信息
 const UserInfo: FC = () => {
   const { removeToken, removeUserInfo, userInfo } = useUserInfo()
@@ -123,6 +145,23 @@ const UserInfo: FC = () => {
     goLink(item.path, {}, 'navigateTo')
   }
 
+
+  const [Features, setFeatures] = useState<any[]>([])
+  const [Coloring, setColoring] = useState<any[]>([])
+  const [Statistics, setStatistics] = useState<any[]>([])
+  useDidShow(() => {
+    let arr: any[] = []
+    let arrOne: any[] = []
+    let arrTwo: any[] = []
+    arr = feature.filter((item) => checkKey(item.jurisdiction));
+    arrOne = fabric.filter((item) => checkKey(item.jurisdiction));
+    arrTwo = statisticAnalysis.filter((item) => checkKey(item.jurisdiction));
+    setFeatures([...arr])
+    setColoring([...arrOne])
+    setStatistics([...arrTwo])
+  })
+
+
   return (
     <>
       <LayoutBlock circle>
@@ -148,30 +187,37 @@ const UserInfo: FC = () => {
           <Text className={styles.userTitle}>IT-开发总监</Text>
         </View>
       </LayoutBlock>
-      <LayoutBlock circle>
-        <View className={styles.layoutTitle}>功能特色</View>
-        <View className={styles['grid-container']}>
-          {feature.map(item => {
-            return <IconCard iconName={item.iconName} title={item.name} onClick={() => handleClickIconCard(item)}></IconCard>
-          })}
-        </View>
-      </LayoutBlock>
-      <LayoutBlock circle>
-        <View className={styles.layoutTitle}>布料取色</View>
-        <View className={styles['grid-container']}>
-          {fabric.map(item => {
-            return <IconCard iconName={item.iconName} title={item.name} onClick={() => handleClickIconCard(item)}></IconCard>
-          })}
-        </View>
-      </LayoutBlock>
-      <LayoutBlock circle>
-        <View className={styles.layoutTitle}>统计分析</View>
-        <View className={styles['grid-container']}>
-          {statisticAnalysis.map(item => {
-            return <IconCard iconName={item.iconName} title={item.name} onClick={() => handleClickIconCard(item)}></IconCard>
-          })}
-        </View>
-      </LayoutBlock>
+      {
+        !!Features.length && <LayoutBlock circle>
+          <View className={styles.layoutTitle}>功能特色</View>
+          <View className={styles['grid-container']}>
+            {Features.map(item => {
+              return <IconCard iconName={item.iconName} title={item.name} onClick={() => handleClickIconCard(item)}></IconCard>
+            })}
+          </View>
+        </LayoutBlock>
+      }
+      {
+        !!Coloring.length && <LayoutBlock circle>
+          <View className={styles.layoutTitle}>布料取色</View>
+          <View className={styles['grid-container']}>
+            {Coloring.map(item => {
+              return <IconCard iconName={item.iconName} title={item.name} onClick={() => handleClickIconCard(item)}></IconCard>
+            })}
+          </View>
+        </LayoutBlock>
+      }
+      {
+        !!Statistics.length && <LayoutBlock circle>
+          <View className={styles.layoutTitle}>统计分析</View>
+          <View className={styles['grid-container']}>
+            {Statistics.map(item => {
+              return <IconCard iconName={item.iconName} title={item.name} onClick={() => handleClickIconCard(item)}></IconCard>
+            })}
+          </View>
+        </LayoutBlock>
+      }
+
     </>
   )
 }