# 通用系统类业务模块 - 菜单管理 - 角色管理 - 员工管理 - 字典管理 - 套餐管理 - 部门管理 - 岗位管理 # [@cdwx/system]使用说明文档 ## 一、引言 [@cdwx/system]是一套整合了系统配置常用功能（包含菜单管理、角色管理、员工管理、字典管理、套餐管理、部门管理、岗位管理）组件库，旨在提高开发效率，统一界面风格，提供不同的配置文件以满足各种前端应用场景的需求。 [@cdwx/system]风格基于element-plus，开发者使用时需注意风格是否一致。 ## 二、组件库安装 使用 npm 命令进行安装： ``` npm install @cdwx/system ``` ## 三、组件概览 以下是本组件库中使用的介绍： - **引入方法**： 使用 npm 命令进行安装： ``` npm install @cdwx/system ``` - **使用方法**： ### 1、在router配置文件中导出需要使用的页面： 此处举例说明员工管理引用： ```typescript import { WXSysAccountCreate, WXSysAccountList, } from '@cdwx/system'; ``` 对应路由配置进行引用component中引用： ```typescript { path: 'create', name: 'systemAccountCreate', props: account, component: WXSysAccountCreate, }, ``` ### 2、在main.ts中引入[@cdwx/system]的样式文件 ```typescript import '@cdwx/system/uno.css'; import '@cdwx/system/index.css'; ``` ### 3、在app里面配置[@cdwx/system]的接口前缀地址 - `VITE_API_TARGET`: 接口地址，如配置代理，需要与代理名称一致 - `VITE_API_MODULE`: 系统设置模块的服务前缀 ```typescript const metaEnv = import.meta.env; wxSysConfigInstance.setConfig({ systemPath: metaEnv.VITE_API_MODULE, apiPrev: metaEnv.VITE_API_TARGET, }); ``` 到此服务库即可正常使用，但由于兼容了不同系统，故每个系统需增加配置文件来判断自己需要什么： ### （四）服务库配置文件 - **员工管理配置文件**： ```typescript export const account = { // 自定义显示名称 customName: '员工', // 筛选栏 search: { // 关键字筛选 showKey: true, // 状态筛选 showStatus: false, // 角色筛选 showRole: false, // 岗位筛选 showJob: false, }, // 按钮权限相关配置 btn: { // 操作记录 showLog: true, // 新增 showAdd: true, // 批量删除 showBatchDel: false, // 批量禁用 showBatchDis: false, // 批量启用 showBatchEnable: false, // 批量删除部门 showBatchUpdateDept: false, // 批量删除岗位 showBatchUpdateJob: false, // 导出数据 showExport: false, }, // 是否显示左边部门树 showTree: false, // 表格相关配置 table: { // 是否支持批量操作 showCheckBox: false, // 是否显示序号 showOrder: true, // 是否显示姓名（包含云控员工名称、执法用户名称） showName: true, // 是否显示手机号 showPhone: true, // 是否显示所属部门 showDept: true, // 是否显示性别 showSex: false, // 是否显示所属岗位 showJob: false, // 是否显示账号类型 showAccountType: true, // 是否显示角色 showRole: false, // 是否显示登录账号 showAccount: false, // 是否显示操作时间 showUpdateTime: true, // 是否显示操作人 showUpdatePerson: true, // 是否显示创建时间 showCreateTime: false, // 是否显示邮箱 showEmail: false, // 是否显示状态栏 showStatus: true, // 是否显示重置密码按钮 showResetBtn: false, // 是否显示编辑 showEdit: true, // 是否显示删除 showDel: true, // 是否显示详情 showDetail: true, // 列表操作是按钮形态还是文字形态展示 text:文本 button:按钮 showBtnType: 'text', }, // 新增、编辑界面相关配置 addItem: { // 是否显示姓名 showName: true, // 是否显示手机号 showPhone: true, // 是否显示确认手机号 showConfirmPhone: true, // 是否显示邮箱 showEmail: true, // 是否显示所属部门 showDept: true, // 是否显示账号类型 showAccountType: true, // 是否显示角色 showRole: true, // 是否显示备注 showDes: true, // 是否显示工号 showWorkNumber: false, // 是否显示性别 showSex: false, // 是否显示隐藏手机号 showApp: false, // 是否显示上传头像 showFile: false, // 是否显示多选部门岗位 showListDept: false, // 是否显示用户密码 showPassword: false, }, }; ``` 2. 在router中对导入的account进行引用： ```typescript { path: 'create', name: 'systemAccountCreate', props: account, component: WXSysAccountCreate, }, ``` - **角色管理配置文件**： ```typescript // 角色相关配置 export const role = { // 筛选栏 search: { // 关键字筛选 showKey: true, // 状态筛选 showStatus: false, // 日期筛选 showDate: true, }, // 按钮权限相关配置 btn: { // 操作记录 showLog: true, // 新增 showAdd: true, // 批量删除 showBatchDel: false, }, // 表格相关配置 table: { // 是否支持批量操作 showCheckBox: false, // 是否显示序号 showOrder: true, // 是否显示角色名称 showName: true, // 是否显示角色编码 showCode: false, // 是否显示员工数量 showNum: true, // 是否显示备注 showDes: false, // 是否显示创建时间 showCreateTime: false, // 是否显示操作时间 showUpdateTime: true, // 是否显示操作人 showUpdatePerson: true, // 是否显示状态栏 showStatus: false, // 是否显示编辑 showEdit: true, // 是否显示删除 showDel: true, // 是否显示详情 showDetail: true, // 列表操作是按钮形态还是文字形态展示 text:文本 button:按钮 showBtnType: 'text', }, // 新增、编辑界面相关配置 addItem: { // 是否显示角色名称 showName: true, // 是否显示角色编码 showCode: false, // 是否显示备注 showDes: true, // 是否显示权限 showPermission: true, }, }; ``` - **菜单管理配置文件**： ```typescript // 菜单配置，目前只参考了公共服务和执法相关设置 export const menu = { // 按钮权限相关配置 btn: { // 新增按钮相关设置 showAdd: true, // 批量操作排序相关设置 showSort: false, // 批量删除按钮相关设置 showBatchDel: false, }, // 表格相关配置 table: { // 是否支持批量操作 showCheckBox: false, // 是否显示名称 showName: true, // 是否显示编码 showCode: true, // 是否显示路由地址 showUrl: true, // 是否显示排序 showSort: true, // 是否显示图标 showIcon: true, // 是否显示选中图标 showActiveIcon: true, // 是否显示备注 showDes: true, // 是否显示状态栏 showStatus: true, // 是否显示编辑 showEdit: true, // 是否显示删除 showDel: true, // 是否显示菜单分类 showClassify: true, // 是否显示菜单类型 showType: false, // 列表操作是按钮形态还是文字形态展示 text:文本 button:按钮 showBtnType: 'text', }, // 新增、编辑界面相关配置 addItem: { // 是否显示名称 showName: true, // 是否显示编码 showCode: true, // 是否显示菜单类型如菜单、按钮等 showType: true, // 是否显示备注 showDes: true, // 是否显示上级菜单 showLevel: true, // 是否显示图标编码 showIcon: true, // 是否显示选中图标编码 showActiveIcon: true, // 是否显示排序 showSort: true, // 是否显示路由地址 showUrl: true, // 是否显示状态栏 showStatus: true, }, }; ``` - **字典管理配置文件**： ```typescript // 字典配置，没有特殊需求可直接复制使用 export const dictionary = { // 类型管理界面 searchType: { // 关键字筛选 showKey: true, }, // 按钮权限相关配置 btnType: { // 新增 showAdd: true, // 批量删除 showBatchDel: false, // 是否支持批量操作排序 showSort: false, }, // 表格相关配置 tableType: { // 是否支持批量操作 showCheckBox: false, // 是否显示序号 showOrder: true, // 是否显示名称 showName: true, // 是否显示编码 showCode: true, // 是否显示备注 showDes: true, // 是否显示创建时间 showCreateTime: true, // 是否显示排序 showSort: true, // 是否显示字典数据 showListBtn: true, // 是否显示编辑按钮 showEditBtn: true, // 是否显示删除按钮 showDelBtn: true, // 列表操作是按钮形态还是文字形态展示 text:文本 button:按钮 showBtnType: 'text', }, // 新增类型相关配置 addType: { // 是否显示名称 showName: true, // 是否显示编码 showCode: true, // 是否显示备注 showDes: true, // 是否显示排序 showSort: true, }, // 类型管理界面 searchItem: { // 关键字筛选 showKey: true, }, // 按钮权限相关配置 btnItem: { // 新增 showAdd: true, // 批量删除 showBatchDel: false, // 是否支持批量操作排序 showSort: false, }, // 表格相关配置 tableItem: { // 是否支持批量操作 showCheckBox: false, // 是否显示序号 showOrder: true, // 是否显示名称 showName: true, // 是否显示字典值 showValue: true, // 是否显示备注 showDes: true, // 是否显示创建时间 showCreateTime: true, // 是否显示排序 showSort: true, // 是否显示状态 showStatus: true, // 是否显示编辑按钮 showEditBtn: true, // 是否显示删除按钮 showDelBtn: true, // 列表操作是按钮形态还是文字形态展示 text:文本 button:按钮 showBtnType: 'text', }, // 新增、编辑界面相关配置 addItem: { // 是否显示名称 showName: true, // 是否显示编码 showValue: true, // 是否显示备注 showDes: true, // 是否显示排序 showSort: true, // 是否显示状态 showStatus: true, }, }; ``` - **部门管理配置文件**： ```typescript // 部门相关配置 export const department = { // 按钮权限相关配置 btn: { // 新增 showAdd: true, }, // 是否显示左边部门树 showTree: false, // 表格相关配置 table: { // 是否显示名称 showName: true, // 是否显示数量 showNum: true, // 是否显示负责人 showCharge: true, // 是否显示办公电话 showPhone: false, // 是否显示负责人手机号 showChargePhone: true, // 是否显示状态栏 showStatus: true, // 是否显示编辑 showEdit: true, // 是否显示删除 showDel: true, // 是否显示详情 showDetail: true, // 列表操作是按钮形态还是文字形态展示 text:文本 button:按钮 showBtnType: 'text', }, // 新增、编辑界面相关配置 addItem: { // 自定义显示名称 customName: '部门', // 是否显示名称 showName: true, // 是否显示负责人 showCharge: true, // 是否需要取负责人电话 showChargePhone: true, // 是否显示上级组织 showParentId: true, // 是否显示办公电话 showPhone: false, // 是否显示备注 showDes: true, }, }; ``` - **套餐管理配置文件**： ```typescript // 套餐相关配置 export const pkg = { // 搜索相关配置 search: { // 关键字筛选 showName: true, // 状态筛选 showStatus: true, // 编码筛选 showCode: true, }, // 按钮权限相关配置 btn: { // 新增按钮 showAdd: true, // 批量删除按钮 showBatchDel: true, }, // 表格相关配置，用于控制套餐在表格中各项属性的展示与否 table: { // 是否支持批量操作 showCheckBox: true, // 是否显示套餐名称 showName: true, // 是否显示套餐编码 showCode: true, // 是否显示备注 showDes: true, // 是否显示状态栏 showStatus: true, // 是否显示套餐语言 showLanguage: true, // 是否显示编辑按钮 showEdit: true, // 是否显示删除按钮 showDel: true, // 是否显示详情 showDetail: false, }, // 新增、编辑界面相关配置 addItem: { // 是否显示角色名称 showName: true, // 是否显示角色编码 showCode: true, // 是否显示备注 showDes: true, // 是否显示权限 showPermission: true, // 是否显示状态栏 showStatus: false, // 是否显示套餐语言 showLanguage: true, }, }; ``` - **岗位管理配置文件**： ```typescript // 岗位相关配置 export const job = { // 岗位搜索相关配置 search: { // 是否显示岗位名称 showName: true, }, // 岗位按钮权限相关配置 btn: { // 是否显示新增按钮 showAdd: true, }, // 岗位表格相关配置 table: { // 是否显示岗位名称 showName: true, // 是否显示岗位数量 showNum: true, // 是否显示岗位更新时间 showUpdateTime: true, // 是否显示岗位创建时间 showCreateTime: true, // 是否显示GPS showGPS: true, // 是否显示指挥调度 showCommand: true, // 是否显示编辑按钮 showEdit: true, // 是否显示删除按钮 showDel: true, // 列表操作是按钮形态还是文字形态展示 text:文本 button:按钮 showBtnType: 'text', }, // 岗位新增项相关配置 addItem: { // 是否显示岗位名称 showName: true, // 是否显示GPS showGPS: false, // 是否显示指挥调度 showCommand: true, // 是否显示备注信息 showDes: true, }; } ``` ## 四、结语 通过本使用说明文档，希望您能够快速上手使用 [@cdwx/system] 进行前端项目开发。如果您在使用过程中遇到任何问题或有任何建议，请随时查阅文档或联系我们的技术支持团队。 以上示例涵盖了组件库使用说明文档的基本结构和内容，包括安装、主要组件介绍、以及常见问题的解决等方面，你可以根据组件库的具体特性进一步丰富和细化每个部分的内容，比如新增更多组件的详细说明、更多的示例代码、组件库的更新日志等信息。