---
group:
    title: 项目开发规范
title: 4.通用组件使用规范
---
# 通用组件使用规范

## 筛选组件
统一使用组件： `import { StandardFilter } from 'fan-standard-comp' ` ,具体用法[参考](/components/standard-filter)

### 按钮组权限配置 

配置筛选组件参数  `codes`与`permissionCodes`，来判断并显示对应有权限的按钮组合及其对应的文本

权限判断规则：
- 1、未配置`permissionCodes`或其值为 undefined 时，不进行权限判断过滤，仅针对筛选掉是否有isHide=true数值。
- 2、`buttonGroup`数据有配置`code`字段：判断包含于`permissionCodes`内的且isHide=false的返回，反之则不返回，并且返回时还会针对其code值匹配 `codes` 内对应的 `name`和`icon`值;
- 3、`buttonGroup`数据未配置`code`字段，但是设置isHide=true的也不返回。

```
  const { dictionaryParams, funcPermissionCodes, btnFuncCodes, commonUse } = useContext(LayoutContent);
  const SystemMenu = props => {
  
 // 筛选栏按钮组
  const controlBtn = [
    {
      code: 'codeBtnCreate', // 新增 直接配置code可不用配置 name 与 icon
      fn: () => handleControlType('add'),
    },
    {
      code: 'codeBtnDownload', // 导出 直接配置code可不用配置 name 与 icon
      isHide: true, // 隐藏
      fn: () => handleControlType('download'),
    },
  ];
  // 如果funcPermissionCodes=undefinde, buttonGroup 全部返回
  // 如果funcPermissionCodes=[], buttonGroup 最终不返回值
  // 如果funcPermissionCodes=['codeBtnCreate', 'codeBtnDownload']，
  // 最终返回 'codeBtnCreate新增'数据，（codeBtnDownload有配置isHide，则不返回）
  return <StandardFilter buttonGroup={controlBtn}
                codes={btnFuncCodes}
                permissionCodes={funcPermissionCodes}
                onFilterSearch={(fields) => refreshFetching({...commonUse.basePagination,...fields})}
                onFilterReset={() => refreshFetching({ ...commonUse.basePagination, parentId }, true)}
                ></StandardFilter>
  
  };
```

### 表单项栅格显示

* 如需要表单项支持展开收缩，配置`collapseable=true`
* 默认表单项按4列排版展示
* 如因表单标签文本字数或者表单控件展示位置不足够的情况下，可适当的调整成3列排版展示 `itemGroupConfig={{columnCount: 3}}`
* 单个表单项，因控件宽度限制，可自行配置`colSpan`用于占用更多的空间，但是其配置值需要是栅格列的倍数[参考](/components/standard-filter#可折叠与展开)


## 表格规范

统一使用组件： ` import { StandardTable } from 'fan-standard-comp' `,具体用法[参考](/components/standard-table)

### **表格列宽度及对齐规范**
**1、对齐规范**
- 文本信息左对齐，因为现代人的阅读方式习惯从左到右，符合正常的心智；
- 数据信息(如金额等）右对齐，更加方便数字大小的直观对比；
- 固定内容居中对齐，更好的信息呈现及表格空间的节省；
- 表头与信息内容对齐方式一致，一致性以达到简化，降低视觉噪音。


**2、表格操作列规范**
>  需统一定义宽度并居中, 默认使用配置项 `type: 'action`

`buttonGroup`配置权限配置:配置方式

配置筛选组件参数  `codes`与`permissionCodes`，来判断并显示对应有权限的按钮组合及其对应的文本

权限判断规则：
- 1、未配置`permissionCodes`或其值为 undefined 时，不进行权限判断过滤，仅针对筛选掉是否有isHide=true数值。
- 2、`buttonGroup`数据有配置`code`字段：判断包含于`permissionCodes`内的且isHide=false的返回，反之则不返回，并且返回时还会针对其code值匹配 `codes` 内对应的 `name`和`icon`值;
- 3、`buttonGroup`数据未配置`code`字段，但是设置isHide=true的也不返回。

```
  const { dictionaryParams, funcPermissionCodes, btnFuncCodes, commonUse } = useContext(LayoutContent);
  const SystemMenu = props => {
  const {funcPermissionCodes} = props;
  
 // 操作按钮组
  const controlBtn = [
    {
      code: 'codeBtnCreate', // 新增 直接配置code可不用配置 name 与 icon
      fn: () => handleControlType('add'),
    },
    {
      code: 'codeBtnDownload', // 导出 直接配置code可不用配置 name 与 icon
      isHide: true, // 隐藏
      fn: () => handleControlType('download'),
    },
  ];
  // 如果funcPermissionCodes=undefinde, buttonGroup 全部返回
  // 如果funcPermissionCodes=[], buttonGroup 最终不返回值
  // 如果funcPermissionCodes=['codeBtnCreate', 'codeBtnDownload']，
  // 最终返回 'codeBtnCreate新增'数据，（codeBtnDownload有配置isHide，则不返回）
  return <StandardTable columns={controlBtn}
                codes={btnFuncCodes}
                permissionCodes={funcPermissionCodes}
                ></StandardTable>
  
  };
```


如自定义操作列，则需要按下面规范
- ①一个操作项：width:70
- ②两个操作项: width:110;有"更多"情况，则是width:125
- ③三个操作项: width:150;有"更多"情况，则是width:165
- ④以上针对于两个文本的操作项，如果涉及多个文本，在原基础上相应的增加对应的宽度
- ⑤操作列有涉及到删除的，统一添加一个二次浮层提示，参考antd组件:popconfirm(placement配置"rightTop")

**3、状态列规范**
- 涉及到多个状态值：如进度状态、审核状态等列，使用“小圆点+状态名”

```
<Badge status="processing" text="审批中" />
```

| 状态值      | 说明 |   显示颜色/色值   |
|----------|------|-------------|
| success | 表示有效，可用，正常，已启用状态 |  绿色/#4DC9A5 |
| processing | 表示审批中，进行中 | 蓝色/#548DFF |
| error | 表示已到期，警告，已超限状态 | 红色/#F15B5B |
| warning | 表示即将到期，提醒，警示 | 橙色/#FF9A6A |
| default | 表示已中止，不可用，失效，未启用 | 灰色/#999999 |
| newer | 表示新建 | 浅绿色/#87cd6f |

**4、其他列规范**
* 排序列：(width:68,align: center)
* 涉及到列值是为固定的字段时，该列适当定义`固定宽度及居中显示`，如启用、联系电话、状态、时间、日期
* 序号列统一定义宽度并居中（width: 68,align: center） -注：通用表格组件（StandardTable)可配置是否显示序号（`hideOrderNumber`)

## 表单规范
控件统一使用组件： ` import { Field } from 'fan-standard-comp' ` ,具体用法[参考](/components/field)

表单组统一使用组件： ` import {ItemGroup } from 'fan-standard-comp' ` ,具体用法[参考](/components/item-group)

### **表单控件**
* 涉及到输入框显示 `placeholder="请输入"`,下拉框显示： `placeholder="请选择"` （使用通用弹窗的表单内基本已按这个规则，自定义的结构请按此规则来）
* 涉及到身份证、邮箱、手机号码等固定格式的输入框需要加上校验格式验证 （校验规划查看 ` import { isPhone, isEmail, isCardNo } from 'fan-standard-comp'` ）
* 排序:必填，输入框使用 `type = inputNumber` 组件


**表单控件规则说明**

| 控件名称   | 控件类型 | placeholder | 限制规则|
|----------|------|------|----|
| 输入框 | input | 请输入| maxLength={50}| 
| 富文本输入框 | textarea | 请输入| maxLength={500}| 
| 数字输入框 | inputNumber | 请输入数字| 1、排序字段：{min=0,max=999999999}| 
| 下拉框 | select | 请选择 | | 
| 下拉框可搜索 | select | 请输入选择 | | 

**指定字段规则说明**

| 字段名称      | 控件类型 |   限制规则   |说明 |
|----------|------|-------------|------|
| 排序 | inputNumber | min=0,max=999999999 |  控制列表显示优先顺序 |
| 是否显示、是否系统内置、状态 | select| - |  下拉选项的配置以“正确值”优先，如：是否->是优先开否配置 |


## 页面交互规范

### **操作按钮触发页面状态**
1、操作类按钮涉及到请求接口后显示弹窗，需要对页面结构配置一个loading状态，如“编辑”需要请求当前数据的详细信息,需先给它设置页面loading状态后再请求接口，接口调用后再关闭loading状态
```
import {WrapperContent , StandardModal} from 'fan-standard-comp'
import { Button } from 'antd'
const demoContent = props => {
  const {dispatch} = props;
  const [contentLoading, setContentLoading] = useState(false)
  const [visible, setVisible] = useState(false)
  const handleClick = ()=> {
   // Step1.先设置loading状态为true
   setContentLoading(true) 
   // Step2.再请求对应的详情接口
   dispatch({
     type: 'systemMenu/queryMenuInfo,
     payload: {id:'xxx'},
     callback: (res) => {
        // Step3.再请求对应的详情接口
        if (res.code !==200) return
        setVisble(true) //  Step4.显示弹窗或处理其他业务功能
     }
   })
 }
 return <WrapperContent loading={contentLoading}>
     <Button type="primay"  onClick={handleClick}>编辑（点击获取详情数据）</Button>
     <StandardModal title="弹窗" visible={visible}>弹窗内容</Button>
  </WrapperContent>
} 

```
###  带左侧树
用法[参考](/components/subfield-content)

#### 业务交互说明

Step1、进入页面，列表获取默认给定 {page:1,size: 15}

Step2、如有点击选中左侧树节点

* ①列表获取请求参数为：{选中节点ID(以接口定义为准)} +  {page:1,size: 15}
* ②表单搜索条件有输入值并点击“查询”，则列表获取的参数为：{选中节点ID} + {page:1,size: 15} + {搜索字段}
* ③表单搜索点击”重置“，则参数为当前第2、①点

Step3、如取消选择左侧树或对没有选中的节点时：
* ①列表获取请求参数为 {page:1,size: 15}
* ②表单搜索条件有输入值并点击“查询”，则列表获取的参数为：{page:1,size: 15} + {搜索字段}
* ③表单搜索点击”重置“，则参数为当前第3、①点