组件设计文档规范 #

本组件设计方案规范旨在制定前端技术开发的规范化流程，提高前端团队的协作效率和代码质量。本规范适用于所有前端项目开发。

组件设计原则 #

1. 组件的引用属性需要 clone 之后再使用，需要保证单一数据流。
2. 组件属性最多 5 个，超过通过配置来控制组件的功能
3. 组件设计时请优先考虑以下设计原则：单一职责原则，开闭原则进行封装，最小知识原则。
4. 组件的封装必须提供使用示例、文档及测试用例 。
5. 业务组件只负责展示数据，不负责数据请求。

规范 #

组件作者 #

• 记录该组件的作者和修改记录，包括每个版本的作者和改动内容

组件名称 #

• 给组件取一个简单明了的名称，使人一眼就能知道该组件的作用。

组件描述 #

• 描述组件适用的场景和用途，例如列表分页、表单提交、数据展示等。如果是业务组件，请简要描述该业务组件的目的和功能，包括该组件的价值和意义

组件特性 #

• 列出组件具备的特性

适用场景 #

• 列出该业务组件适用的场景或业务需求，以示其实用价值。

依赖项 #

• 列出该组件所依赖的技术栈或其他组件。如果没有写无。

界面 #

• 组件的原型图或者设计图，并注明每个部分的交互和功能。

状态设计(可选) #

• 组件状态的数据结构。

功能设计 #

• 描述该业务组件的逻辑功能和算法设计，包括该组件的业务流程和算法流程。

组件使用 #

• 给出组件的安装、引用、使用案例

Attributes #

• 描述组件的参数

Slots(可选) #

• 组件支持的插槽

Events(可选) #

• 组件支持的事件

注意事项(可选) #

• 描述组件的使用限制和注意事项，例如浏览器兼容性、依赖库和性能等。
• 如果组件有已知问题或限制，应提供相应的解决方案或替代品。

QA #

记录评审时的问题

举例 #

组件作者 #

组件名称 #

编号规则配置弹窗(CodeRuleSettingDialog)

组件描述 #

编号规则配置弹窗用于设置 BOM 名称、BOM 编号、物料名称等的自动生产规则。

组件特性 #

• 支持使用多种方式(自动计数、固定字符、日期)设置规则
• 支持多个规则通过组合的方式控制最终的规则
• 支持规则的预览
• 规则之前的顺序可以通过拖动来排序

适用场景 #

• 系统的编码规则设置功能
• 应用引擎中的编号规则的设置
• 创建某一类物料的标准生产工艺时设置条件中的 BOM 名称、BOM 编号、物料名称等生产规则

界面 #

组件使用 #

<template>
  <!--编号规则设置弹窗-->
  <CodeRuleSettingDialog
    ref="codeRuleSettingDialogRef"
    :filed-code="codeRuleSettingFiledCode"
    @on-save="onCodeRuleSettingSave"
  />
</template>

<script>
  import CodeRuleSettingDialog from '@/components/common/CodeRuleSettingDialog/index.vue'
  const {
    ruleSettingState,
    codeRuleSettingDialogRef,
    codeRuleSettingFiledCode,
    initCodeRuleSetting,
    onCodeRuleSettingSave,
    onCodeRuleSettingCurrentOpen,
  } = useCodeRuleSetting()
</script>

Attributes #

Events #