编码生成器组件

概述

CodeGenerator 是一个自动编码生成器组件，支持多种编码生成模式，包括日期序列、随机码、自定义模板等，通过后端 API 生成唯一编码。

组件路径：web/apps/web-ele/src/components/zq-form/code-generator/

组件名称：CodeGenerator

功能特性

• 多种生成模式（日期序列、随机码、自定义模板）
• 自定义前缀和分隔符
• 序列号长度和重置规则配置
• 挂载时自动生成
• 编辑模式支持

Props

属性	类型	默认值	说明
modelValue	string	-	编码值
prefix	string	''	编码前缀
separator	string	''	分隔符
generateMode	string	'date_seq'	生成模式
dateFormat	string	'YYYYMMDD'	日期格式
seqLength	number	4	序列号长度
seqResetRule	string	'daily'	序列重置规则
randomLength	number	6	随机码长度
customTemplate	string	''	自定义模板
businessType	string	'default'	业务类型
disabled	boolean	true	是否禁用输入
readonly	boolean	true	是否只读
placeholder	string	'自动生成编码'	占位符
generateOnMount	boolean	true	挂载时自动生成
isEdit	boolean	false	是否编辑模式

生成模式

模式	说明	示例
date_seq	日期 + 序列号	ORD20240115-0001
random	随机码	A3B7C9
seq_only	仅序列号	0001
custom	自定义模板	根据模板生成

序列重置规则

规则	说明
daily	每天重置
monthly	每月重置
yearly	每年重置
never	永不重置

Events

事件	参数	说明
update:modelValue	string	值更新
change	string	编码变化

Expose 方法

方法	参数	说明
generateCode	-	手动生成编码

使用示例

基本用法

<template>
  <CodeGenerator v-model="orderNo" prefix="ORD" />
</template>

<script setup>
import { ref } from 'vue';

const orderNo = ref('');
</script>

自定义格式

<template>
  <CodeGenerator
    v-model="code"
    prefix="INV"
    separator="-"
    date-format="YYYYMM"
    :seq-length="6"
    seq-reset-rule="monthly"
  />
</template>

随机码模式

<template>
  <CodeGenerator
    v-model="code"
    generate-mode="random"
    :random-length="8"
  />
</template>

编辑模式（不自动生成）

<template>
  <CodeGenerator
    v-model="code"
    :is-edit="true"
    :generate-on-mount="false"
  />
</template>

与表单设计器集成

在表单设计器中，该组件作为 code-generator 类型的表单项使用：

{
  "type": "code-generator",
  "field": "order_no",
  "label": "订单编号",
  "props": {
    "prefix": "ORD",
    "separator": "-",
    "generateMode": "date_seq",
    "dateFormat": "YYYYMMDD",
    "seqLength": 4,
    "seqResetRule": "daily",
    "businessType": "order"
  }
}

后端 API

组件调用 /api/core/code-generator/generate 接口生成编码，请求参数：

{
  "prefix": "ORD",
  "separator": "-",
  "generate_mode": "date_seq",
  "date_format": "YYYYMMDD",
  "seq_length": 4,
  "seq_reset_rule": "daily",
  "random_length": 6,
  "custom_template": "",
  "business_type": "order"
}

典型应用场景

• 订单编号：生成唯一订单号
• 合同编号：生成合同编号
• 工单编号：生成工单编号
• 流水号：生成业务流水号