通用系统类业务模块

• 菜单管理
• 角色管理
• 员工管理
• 字典管理
• 套餐管理
• 部门管理
• 岗位管理

[@cdwx/system]使用说明文档

一、引言

[@cdwx/system]是一套整合了系统配置常用功能（包含菜单管理、角色管理、员工管理、字典管理、套餐管理、部门管理、岗位管理）组件库，旨在提高开发效率，统一界面风格，提供不同的配置文件以满足各种前端应用场景的需求。 [@cdwx/system]风格基于element-plus，开发者使用时需注意风格是否一致。

二、组件库安装

使用 npm 命令进行安装：

npm install @cdwx/system

三、组件概览

以下是本组件库中使用的介绍：

• 引入方法： 使用 npm 命令进行安装：

npm install @cdwx/system

• 使用方法：

1、在router配置文件中导出需要使用的页面：

此处举例说明员工管理引用：

import {
  WXSysAccountCreate,
  WXSysAccountList,
} from '@cdwx/system';

对应路由配置进行引用component中引用：

{
  path: 'create',
  name: 'systemAccountCreate',
  props: account,
  component: WXSysAccountCreate,
},

2、在main.ts中引入[@cdwx/system]的样式文件

import '@cdwx/system/uno.css';
import '@cdwx/system/index.css';

3、在app里面配置[@cdwx/system]的接口前缀地址

• VITE_API_TARGET: 接口地址，如配置代理，需要与代理名称一致
• VITE_API_MODULE: 系统设置模块的服务前缀

const metaEnv = import.meta.env;
wxSysConfigInstance.setConfig({
  systemPath: metaEnv.VITE_API_MODULE,
  apiPrev: metaEnv.VITE_API_TARGET,
});

到此服务库即可正常使用，但由于兼容了不同系统，故每个系统需增加配置文件来判断自己需要什么：

（四）服务库配置文件

• 员工管理配置文件：

  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进行引用：

  {
    path: 'create',
    name: 'systemAccountCreate',
    props: account,
    component: WXSysAccountCreate,
  },

• 角色管理配置文件：

  // 角色相关配置
  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,
    },
  };

• 菜单管理配置文件：

  // 菜单配置，目前只参考了公共服务和执法相关设置
  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,
    },
  };

• 字典管理配置文件：

  // 字典配置，没有特殊需求可直接复制使用
  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,
    },
  };

• 部门管理配置文件：

  // 部门相关配置
  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,
    },
  };

• 套餐管理配置文件：

  // 套餐相关配置
  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,
    },
  };

• 岗位管理配置文件：

  // 岗位相关配置
  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] 进行前端项目开发。如果您在使用过程中遇到任何问题或有任何建议，请随时查阅文档或联系我们的技术支持团队。

以上示例涵盖了组件库使用说明文档的基本结构和内容，包括安装、主要组件介绍、以及常见问题的解决等方面，你可以根据组件库的具体特性进一步丰富和细化每个部分的内容，比如新增更多组件的详细说明、更多的示例代码、组件库的更新日志等信息。