---
group:
  title: 项目开发规范
title: 11.系统管理开发包
order: 11
---

# 系统管理开发包

### 📦 包文件
将包放置到项目的package目录下，并对package.json的包源进行配置

 ```
  // package.json
  "dependencies": {
    "@fan-z/sdk-system": "file:./package/skd-system-1.0.0.tgz",
  }
 ```

### 📦 安装
 ```
$ yarn add @fan-z/sdk-system
 ```


## 用法

### 1.全局配置

在项目的入口组件内，对SdkSystemProvider传入配置项（参数值同LayoutContext）

```js
import { SdkSystemProvider } from '@fan-z/sdk-system'

import { Outlet } from 'umi';

const PageLayout = (props) => {
  return <SdkSystemProvider
    value={{
      layoutProps: { ...props, ...layoutValue },
      btnFuncCodes: funcCode.btnFuncCodes,
      commonUse: commonUse,
      ...common,
      funcPermissionCodes,
      refreshFetching, requestDictCodes,
      // 针对模块内的一些定制化配置
      sdkSystemConfig: {
        // 角色管理
        systemRole: {
          // 功能授权页面链接
          funcAuthRoute: '/system/role/detail/'
        }
      }
    }}>
    <Outlet/>
  </SdkSystemProvider>
}
export default PageLayout

```

### 2.引入扩展的models

```ts
// config.ts
import sdkSystemModels from '@fan-z/sdk-system/lib/modelFiles'

export default defineConfig({
  // 启动后才能使用connect
  dva: {
    // 配置额外的 dva model
    extraModels: sdkSystemModels
  },
})
```

### 3.添加路由组件

统一放到目录 `src/pages/SdkSystem`

#### 例如：部门管理

``` ts
// src/pages/SdkSystem/Department/index.tsx
import { SdkSystemDepartment } from '@fan-z/sdk-system'
export default SdkSystemDepartment
```

#### 例如：角色管理

``` ts
// src/pages/SdkSystem/Role/index.tsx
import React from "react";
import { SdkSystemRole } from '@fan-z/sdk-system'
import { SdkSystemProvider } from '@fan-z/sdk-system'

const SdkRolePage = () => {
  // 配置功能授权页面链接
  // 方式一：
  return <SdkSystemRole funcAuthRoute={'/sdkSystem/role/detail/'}/>
  // 方式二：
  return <SdkSystemProvider
    value={{
      sdkSystemConfig: {
        // 角色管理
        systemRole: {
          funcAuthRoute: '/sdkSystem/role/detail/'
        }
      }
    }}>
    <SdkSystemRole funcAuthRoute={'/sdkSystem/role/detail/'}/>
  </SdkSystemProvider>
}
export default SdkRolePage


  // 方式三：在src/layouts内配置SdkSystemProvider
```

### 4.配置路由

```ts
// config/routes/sdkSystem.ts

// 路由组件替换成SDK内的结构
export default {
  path: '/system',
  name: '系统设置',
  menuCode: 'system',
  // icon: 'setting',
  icon: 'ioti-menu-xitongguanli',
  // access: 'passAuthority',
  // placeIn: 'topRight',
  // hideInMenu: true,
  routes: [

    {
      path: '/system',
      redirect: '/system/organization'
    },
    {
      path: '/system/organization',
      name: '组织管理',
      menuCode: 'systemOrganization',
      icon: 'ioti-menu-organization',
      component: './SdkSystem/Organization',
      access: 'passAuthority',
    },
    {
      menuCode: 'systemDepartment',
      name: '部门管理',
      path: '/system/department',
      icon: 'ioti-menu-department',
      // component: './System/DepartmentManage',
      component: './SdkSystem/Department',
      access: 'passAuthority',
    },
    {
      menuCode: 'systemUser',
      name: '用户管理',
      path: '/system/user',
      icon: 'ioti-menu-user',
      component: './SdkSystem/User',
      access: 'passAuthority',
    },
    {
      menuCode: 'systemRole',
      name: '角色管理',
      path: '/system/role',
      access: 'passAuthority',
      icon: 'ioti-menu-role',
      component: './SdkSystem/Role',
    },
    {
      path: '/system/role/detail/:id',
      name: '角色功能授权',
      menuCode: 'systemRoleDetail',
      component: './SdkSystem/Role/FuncAuth',
      hideInMenu: true,
      access: 'passAuthority',
    },
    {
      path: '/system/menu',
      name: '菜单管理',
      menuCode: 'systemMenu',
      icon: 'ioti-menu-menu',
      component: './SdkSystem/Menu',
      access: 'passAuthority',
    },
    {
      menuCode: 'systemFunc',
      name: '功能管理',
      path: '/system/func',
      icon: 'ioti-menu-func',
      // icon: `// <SpecIcon name={'ioti-menu-gongnengguanli'} type={'colour'}/>`, //
      // component: './System/Func',
      component: './SdkSystem/Func',
      access: 'passAuthority',
    },
    {
      menuCode: 'systemOperateLog',
      name: '操作日志',
      path: '/system/operateLog',
      icon: 'ioti-menu-operateLog',
      component: './SdkSystem/OperateLog',
      access: 'passAuthority',
    },
    {
      menuCode: 'systemLoginLog',
      name: '登录日志',
      path: '/system/logLogin',
      icon: 'ioti-menu-loginLog',
      component: './SdkSystem/LoginLog',
      access: 'passAuthority',
    },
    {
      menuCode: 'systemMonitor',
      name: '系统监控',
      path: '/system/monitor',
      icon: 'ioti-menu-monitor',
      component: './SdkSystem/Monitor',
      access: 'passAuthority',
    },
    {
      menuCode: 'systemCodeBase',
      name: '代码库',
      path: '/system/cdeBase',
      icon: 'ioti-menu-monitor',
      component: './SdkSystem/CodeBase',
      access: 'passAuthority',
    },
    {
      menuCode: 'systemCodeType',
      name: '代码类别',
      path: '/system/codeType',
      icon: 'ioti-menu-monitor',
      component: './SdkSystem/CodeType',
      access: 'passAuthority',
    },
  ]
}

```

### 5.添加监听路由切换获取列表数据(此步骤可忽略)

```ts
// src/pages/SdkSystem/models/sdkCommon.ts
import { matchPathnameDoing } from '@/utils/utils'

export default {
  namespace: 'sdkSystemCommon',
  state: {},
  subscriptions: {
    // @ts-ignore
    setup({ dispatch, history }) {
      const listenPathnameChange = () => {
        // // 菜单管理
        // matchPathnameDoing(history.location, '/sdkSystem/menu').then(payload => {
        //   // @ts-ignore
        //   if (payload?.applicationId) {
        //     console.log("=matchPathnameDoing===>/sdkSystem/menu=>",)
        //     dispatch({ type: 'sdkSystemMenu/fetch_menuData', payload });
        //   }
        // })
        // // 角色管理
        // matchPathnameDoing(history.location, '/sdkSystem/role').then(payload => {
        //   dispatch({ type: 'sdkSystemRole/fetch_roleData', payload });
        // })
        //
        // // 组织管理
        // matchPathnameDoing(history.location, '/sdkSystem/organization').then(payload => {
        //   dispatch({ type: 'sdkSystemOrganization/fetch_organizationData', payload });
        // })
        // // 部门管理
        // matchPathnameDoing(history.location, '/sdkSystem/department').then(payload => {
        //   // @ts-ignore
        //   if (payload?.organizationId) {
        //     dispatch({ type: 'sdkSystemDepartment/fetch_departmentData', payload });
        //   }
        // })
        //
        // // 用户管理
        // matchPathnameDoing(history.location, '/sdkSystem/user').then(payload => {
        //   dispatch({ type: 'sdkSystemUser/fetch_userData', payload })
        // })
        // //  功能管理
        // matchPathnameDoing(history.location, '/sdkSystem/func').then(payload => {
        //   // @ts-ignore
        //   delete payload?.category
        //   dispatch({ type: 'sdkSystemFunc/fetch_funcData', payload })
        // })
        // // 操作日志
        // matchPathnameDoing(history.location, '/sdkSystem/operateLog').then(payload => {
        //   dispatch({ type: 'sdkSystemOperateLog/fetch_operateLogData', payload });
        // })
        // // 系统监控
        // matchPathnameDoing(history.location, '/sdkSystem/monitor').then(payload => {
        //   dispatch({ type: 'sdkSystemMonitor/fetch_monitorData', payload });
        // })
      }
      // 判断是否当前路由 
      listenPathnameChange()
      // 监听路径变化
      // @ts-ignore
      return history.listen(({ location }) => {
        listenPathnameChange()
      });
    },
  },
  effects: {},
  reducers: {},
};
```