左侧tab栏逻辑修改-无权限看无权限的页面，不是之前的直接隐藏

src/components/NoPower/index.module.scss

@@ -0,0 +1,7 @@
+.NoPower {
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 24px;
+  :global {
+  }
+}

src/components/NoPower/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import styles from './index.module.scss'
+function NoPower() {
+  return (
+    <div className={styles.NoPower}>
+      <h1>您没有本页面的权限，请联系管理员开通。</h1>
+    </div>
+  )
+}
+
+const MemoNoPower = React.memo(NoPower)
+
+export default MemoNoPower

src/pages/Layout/index.tsx

@@ -42,6 +42,12 @@ function Layout() {
             图片: data.scopeGoodsFileDownload === 1 ? '原图和缩略图' : '缩略图'
           }
         })
+
+        // 藏品详情页面tab和按钮权限
+        const scopeGoods: string = data.scopeGoods
+        if (scopeGoods) {
+          store.dispatch({ type: 'layout/goodsInfoPower', payload: scopeGoods.split(',') })
+        }
       }
     }
   }, [])
@@ -142,6 +148,11 @@ function Layout() {
             if (isOkIdArr.includes(v2.id)) {
               tempArr.push(v2)
               if (v2.id < 9901) obj.son.push({ ...v2, authority: true })
+            } else {
+              tempArr.push({
+                ...v2,
+                Com: React.lazy(() => import('../../components/NoPower'))
+              })
             }
           })
 
@@ -176,12 +187,12 @@ function Layout() {
 
       if (flagPush) history.push(pathArr[0])
 
-      const resList = tabLeftArr.map(v => ({
-        ...v,
-        son: v.son.filter(c => isOkIdArr.includes(c.id))
-      }))
+      // const resList = tabLeftArr.map(v => ({
+      //   ...v,
+      //   son: v.son.filter(c => isOkIdArr.includes(c.id))
+      // }))
 
-      setList(resList)
+      setList(tabLeftArr)
     }
   }, [])
 
@@ -282,7 +293,7 @@ function Layout() {
               {v.son.map(v2 => (
                 <div
                   key={v2.id}
-                  hidden={v2.id >= 9901}
+                  hidden={v2.id >= 9901 || (getTokenInfo().user.isAdmin !== 1 && v2.id === 9900)}
                   className={classNames('layoutLRowBoxRow', pathAcFu(v2.path) ? 'active' : '')}
                   ref={pathAcFu(v2.path) ? sroolRef : null}
                   onClick={() => pathCutFu(v2)}

src/pages/Y_goodsDetails/Y1cathet/Y1main.tsx

@@ -6,6 +6,9 @@ import Y33com from './Y33com'
 import Y44com from './Y44com'
 import { API_goodsInfo } from '@/store/action/C1ledger'
 import { C1GoodType } from '@/pages/A3_ledger/C1ledger/type'
+import { useSelector } from 'react-redux'
+import { RootState } from '@/store'
+import NoPower from '@/components/NoPower'
 
 export type Y1TabArrType = '藏品信息' | '库存信息' | '藏品附件' | '藏品日志'
 
@@ -16,6 +19,9 @@ type Props = {
 }
 
 function Y1main({ sId }: Props) {
+  // 获取权限数据
+  const goodsInfoPower = useSelector((state: RootState) => state.A0Layout.goodsInfoPower)
+
   const [tabAc, setTabAc] = useState<Y1TabArrType>('藏品信息')
 
   const [info, setInfo] = useState({} as C1GoodType)
@@ -47,10 +53,34 @@ function Y1main({ sId }: Props) {
 
       {info.id ? (
         <div className='Y1info'>
-          {tabAc === '藏品信息' ? <Y11com info={info} /> : null}
-          {tabAc === '库存信息' ? <Y22com info={info} /> : null}
-          {tabAc === '藏品附件' ? <Y33com sId={sId} info={info} /> : null}
-          {tabAc === '藏品日志' ? <Y44com sId={sId} /> : null}
+          {tabAc === '藏品信息' ? (
+            goodsInfoPower.includes('goodsPage1') ? (
+              <Y11com info={info} />
+            ) : (
+              <NoPower />
+            )
+          ) : null}
+          {tabAc === '库存信息' ? (
+            goodsInfoPower.includes('goodsPage2') ? (
+              <Y22com info={info} />
+            ) : (
+              <NoPower />
+            )
+          ) : null}
+          {tabAc === '藏品附件' ? (
+            goodsInfoPower.includes('goodsPage3') ? (
+              <Y33com sId={sId} info={info} />
+            ) : (
+              <NoPower />
+            )
+          ) : null}
+          {tabAc === '藏品日志' ? (
+            goodsInfoPower.includes('goodsPage4') ? (
+              <Y44com sId={sId} />
+            ) : (
+              <NoPower />
+            )
+          ) : null}
         </div>
       ) : null}
     </div>

src/pages/Y_goodsDetails/Y2look/index.tsx

@@ -17,8 +17,14 @@ import { MessageFu } from '@/utils/message'
 import C22revamp from '@/pages/C_goodsManage/C22goodEdit/C22revamp'
 import history from '@/utils/history'
 import { statusStorageObj } from '@/utils/tableData'
+import { useSelector } from 'react-redux'
+import { RootState } from '@/store'
+import NoPower from '@/components/NoPower'
 
 function Y2look() {
+  // 获取权限数据
+  const goodsInfoPower = useSelector((state: RootState) => state.A0Layout.goodsInfoPower)
+
   const { id: sId } = useParams<any>()
 
   const [info, setInfo] = useState({} as C1GoodType)
@@ -222,22 +228,41 @@ function Y2look() {
 
           {info.display === 1 ? (
             <>
-              <Button type='primary' onClick={handleExport}>
-                导出藏品档案
-              </Button>
-              &emsp;
-              <Dropdown menu={{ items: items1 }} placement='bottom' arrow>
-                <Button type='primary'>档案管理</Button>
-              </Dropdown>
-              &emsp;
-              <Dropdown menu={{ items: items2 }} placement='bottom' arrow>
-                <Button type='primary'>分库管理</Button>
-              </Dropdown>
-              &emsp;
-              <Dropdown menu={{ items: items3 }} placement='bottom' arrow>
-                <Button type='primary'>保管管理</Button>
-              </Dropdown>
-              &emsp;
+              {goodsInfoPower.includes('goodsBtn1') ? (
+                <>
+                  <Button type='primary' onClick={handleExport}>
+                    导出藏品档案
+                  </Button>
+                  &emsp;
+                </>
+              ) : null}
+
+              {goodsInfoPower.includes('goodsBtn2') ? (
+                <>
+                  <Dropdown menu={{ items: items1 }} placement='bottom' arrow>
+                    <Button type='primary'>档案管理</Button>
+                  </Dropdown>
+                  &emsp;
+                </>
+              ) : null}
+
+              {goodsInfoPower.includes('goodsBtn3') ? (
+                <>
+                  <Dropdown menu={{ items: items2 }} placement='bottom' arrow>
+                    <Button type='primary'>分库管理</Button>
+                  </Dropdown>
+                  &emsp;
+                </>
+              ) : null}
+
+              {goodsInfoPower.includes('goodsBtn4') ? (
+                <>
+                  <Dropdown menu={{ items: items3 }} placement='bottom' arrow>
+                    <Button type='primary'>保管管理</Button>
+                  </Dropdown>
+                  &emsp;
+                </>
+              ) : null}
             </>
           ) : null}
 
@@ -247,12 +272,34 @@ function Y2look() {
 
       {info.id ? (
         <div className='Y2info'>
-          {tabAc === '藏品信息' ? <Y11com info={info} /> : null}
-          {tabAc === '库存信息' ? <Y22com info={info} /> : null}
+          {tabAc === '藏品信息' ? (
+            goodsInfoPower.includes('goodsPage1') ? (
+              <Y11com info={info} />
+            ) : (
+              <NoPower />
+            )
+          ) : null}
+          {tabAc === '库存信息' ? (
+            goodsInfoPower.includes('goodsPage2') ? (
+              <Y22com info={info} />
+            ) : (
+              <NoPower />
+            )
+          ) : null}
           {tabAc === '藏品附件' ? (
-            <Y33com sId={sId} isLook={true} info={info} setImgCover={() => getInfoFu(sId)} />
+            goodsInfoPower.includes('goodsPage3') ? (
+              <Y33com sId={sId} isLook={true} info={info} setImgCover={() => getInfoFu(sId)} />
+            ) : (
+              <NoPower />
+            )
+          ) : null}
+          {tabAc === '藏品日志' ? (
+            goodsInfoPower.includes('goodsPage4') ? (
+              <Y44com sId={sId} isLook={true} />
+            ) : (
+              <NoPower />
+            )
           ) : null}
-          {tabAc === '藏品日志' ? <Y44com sId={sId} isLook={true} /> : null}
         </div>
       ) : null}
 

src/pages/Z_system/Z5role/Z5edit.tsx

@@ -21,6 +21,20 @@ import { useDispatch, useSelector } from 'react-redux'
 import { D2_APIgetList } from '@/store/action/D2storSet'
 import { RootState } from '@/store'
 
+// 藏品权限
+const goodsPower1 = [
+  { name: '藏品信息', key: 'goodsPage1' },
+  { name: '库存信息', key: 'goodsPage2' },
+  { name: '藏品附件', key: 'goodsPage3' },
+  { name: '藏品日志', key: 'goodsPage4' }
+]
+const goodsPower2 = [
+  { name: '导出藏品档案', key: 'goodsBtn1' },
+  { name: '档案管理', key: 'goodsBtn2' },
+  { name: '分库管理', key: 'goodsBtn3' },
+  { name: '保管管理', key: 'goodsBtn4' }
+]
+
 type Props = {
   sId: number
   closeFu: () => void
@@ -29,6 +43,8 @@ type Props = {
 }
 
 function Z5edit({ sId, closeFu, addTableFu, editTableFu }: Props) {
+  const [goodsIdArr, setGoodsIdArr] = useState<string[]>([])
+
   // 设置表单ref
   const FormBoxRef = useRef<FormInstance>(null)
 
@@ -46,6 +62,11 @@ function Z5edit({ sId, closeFu, addTableFu, editTableFu }: Props) {
       setScopeStorage(data.role.scopeStorage)
       if (data.role.scopeStorageIds)
         setScopeStorageIds(data.role.scopeStorageIds.split(',').map((v: string) => Number(v)))
+
+      // 后面加的藏品权限
+      if (data.role.scopeGoods) {
+        setGoodsIdArr(data.role.scopeGoods.split(','))
+      }
     }
   }, [])
 
@@ -147,7 +168,8 @@ function Z5edit({ sId, closeFu, addTableFu, editTableFu }: Props) {
         scopeGoodsFile,
         scopeGoodsFileDownload,
         scopeStorage,
-        scopeStorageIds: scopeStorageIds.join(',')
+        scopeStorageIds: scopeStorageIds.join(','),
+        scopeGoods: goodsIdArr.join(',')
       }
 
       const res = await Z5_APIsave(obj)
@@ -163,6 +185,7 @@ function Z5edit({ sId, closeFu, addTableFu, editTableFu }: Props) {
       checkIds,
       closeFu,
       editTableFu,
+      goodsIdArr,
       sId,
       scopeGoodsFile,
       scopeGoodsFileDownload,
@@ -244,6 +267,45 @@ function Z5edit({ sId, closeFu, addTableFu, editTableFu }: Props) {
               </div>
             </div>
           </div>
+          <div className='Z5ebox'>
+            <div className='Z5eboxll'>藏品权限：</div>
+            <div className='Z5eboxrr Z5eboxrr2'>
+              {goodsPower1.map(v => (
+                <Checkbox
+                  key={v.name}
+                  checked={goodsIdArr.includes(v.key)}
+                  onChange={e => {
+                    if (goodsIdArr.includes(v.key))
+                      setGoodsIdArr(goodsIdArr.filter(c => c !== v.key))
+                    else setGoodsIdArr([...goodsIdArr, v.key])
+                  }}
+                >
+                  {v.name}
+                </Checkbox>
+              ))}
+            </div>
+          </div>
+
+          <div className='Z5ebox'>
+            <div className='Z5eboxll'></div>
+            <div className='Z5eboxrr Z5eboxrr2'>
+              {goodsPower2.map(v => (
+                <Checkbox
+                  key={v.name}
+                  checked={goodsIdArr.includes(v.key)}
+                  onChange={e => {
+                    if (goodsIdArr.includes(v.key))
+                      setGoodsIdArr(goodsIdArr.filter(c => c !== v.key))
+                    else setGoodsIdArr([...goodsIdArr, v.key])
+                  }}
+                >
+                  {v.name}
+                </Checkbox>
+              ))}
+            </div>
+          </div>
+
+          <br />
           <br />
           <Form.Item
             className='Z5ebox0'

src/pages/Z_system/Z5role/index.module.scss

@@ -30,6 +30,7 @@
 
     .ant-modal-body {
       border-top: 1px solid #ccc;
+
       .ant-form-item-label {
         max-width: 100px;
       }
@@ -126,6 +127,9 @@
             margin-top: 5px;
           }
         }
+        .Z5eboxrr2 {
+          margin-bottom: 15px;
+        }
       }
       .Z5ebox0 {
         margin-top: -24px;

src/store/reducer/layout.ts

@@ -51,7 +51,10 @@ const initState = {
   exInfo: {} as ExInfoType,
 
   // 用户的权限数据
-  userRolePermissions: [] as RouterType
+  userRolePermissions: [] as RouterType,
+
+  // 藏品详情页面tab和按钮权限
+  goodsInfoPower: [] as string[]
 }
 
 // 定义 action 类型
@@ -71,6 +74,7 @@ type LayoutActionType =
   | { type: 'layout/downImg'; payload: DownImgType }
   | { type: 'layout/exInfo'; payload: ExInfoType }
   | { type: 'layout/userRolePermissions'; payload: RouterType }
+  | { type: 'layout/goodsInfoPower'; payload: string[] }
 
 // 频道 reducer
 export default function layoutReducer(state = initState, action: LayoutActionType) {
@@ -105,6 +109,9 @@ export default function layoutReducer(state = initState, action: LayoutActionTyp
     // 用户权限
     case 'layout/userRolePermissions':
       return { ...state, userRolePermissions: action.payload }
+    // 藏品详情页面tab和按钮权限
+    case 'layout/goodsInfoPower':
+      return { ...state, goodsInfoPower: action.payload }
     default:
       return state
   }