自动编号 控件 可视化代码生成平台 · 系统工具控件
<div style="background:linear-gradient(135deg,#1e3a8a,#2563eb);color:#fff;border-radius:16px;padding:34px 32px;margin-bottom:24px;">
<div style="margin:0 0 6px;font-size:28px;font-weight:700;">自动编号 控件</div>
<div style="margin:0;opacity:.9;">可视化代码生成平台 · 系统工具控件（20/27）</div>
</div>
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:18px 22px;margin:16px 0;box-shadow:0 1px 3px rgba(0,0,0,.04);">
<b>用途：</b>生成"前缀 + 随机串"的编号——订单号、工单号、会员卡号；新增时自动生成一次，也可手动改。<br>
<b>存储：</b><code style="background:#0f172a;color:#e2e8f0;padding:2px 7px;border-radius:5px;font-size:13px;">varchar(60)（存生成的编号字符串）。</code><br>
<b>列表/搜索：</b>可按编号精确/包含搜索。<br>
<b>适用：</b>需要系统自动产生唯一可读编号的单据类字段。
</div>
<div style="margin:32px 0 12px;font-size:21px;font-weight:700;border-left:5px solid #2563eb;padding-left:12px;">控件解析（外观 · 行为交互 · 样式 · 数据）</div>
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:18px 22px;margin:14px 0;">
<table style="width:100%;border-collapse:collapse;font-size:14px;">
<tr><th style="border:1px solid #e5e7eb;padding:8px 12px;background:#f1f5f9;width:96px;">维度</th><th style="border:1px solid #e5e7eb;padding:8px 12px;background:#f1f5f9;">说明</th></tr>
<tr><td style="border:1px solid #e5e7eb;padding:8px 12px;"><b>外观</b></td><td style="border:1px solid #e5e7eb;padding:8px 12px;">文本框（只读态显示当前编号）+ "生成编号"按钮 + 组合/位数选项。</td></tr><tr><td style="border:1px solid #e5e7eb;padding:8px 12px;"><b>行为交互</b></td><td style="border:1px solid #e5e7eb;padding:8px 12px;">值为空（新增）自动生成一次；可改模式（纯数字/字母/混合）与位数后重新生成。</td></tr><tr><td style="border:1px solid #e5e7eb;padding:8px 12px;"><b>样式</b></td><td style="border:1px solid #e5e7eb;padding:8px 12px;">前缀展示、输入框宽度随属性；组合模式与位数在 dict 配。</td></tr><tr><td style="border:1px solid #e5e7eb;padding:8px 12px;"><b>数据</b></td><td style="border:1px solid #e5e7eb;padding:8px 12px;">存字符串；组合模式（mix/num/letter…）+ 位数由 dict 的 mode/len/nlen/alen 决定，默认纯数字 4 位。</td></tr>
</table>
</div>
<div style="margin:32px 0 12px;font-size:21px;font-weight:700;border-left:5px solid #2563eb;padding-left:12px;">属性面板（右侧）功能详解</div>
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:18px 22px;margin:14px 0;">
<div style="font-weight:700;color:#0f172a;margin:14px 0 8px;">① 基础设置</div>
<table style="width:100%;border-collapse:collapse;font-size:14px;">
<tr><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">字段</th><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">说明</th></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">字段名</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">业务表列名。</td></tr><tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">标签</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">如"订单编号"。</td></tr>
</table><div style="font-weight:700;color:#0f172a;margin:14px 0 8px;">② 数据来源（dict）</div>
<table style="width:100%;border-collapse:collapse;font-size:14px;">
<tr><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">字段</th><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">说明</th></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">prefix</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">编号前缀（如 VIP）。</td></tr><tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">mode</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">num 纯数字 / mix 混合 / letter 字母 / numfirst / letterfirst。</td></tr><tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">len</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">mix 模式总位数。</td></tr><tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">nlen/alen</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">数字/字母位数。</td></tr>
</table><div style="font-weight:700;color:#0f172a;margin:14px 0 8px;">③ 生成</div>
<table style="width:100%;border-collapse:collapse;font-size:14px;">
<tr><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">字段</th><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">说明</th></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">新增自动生成</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">值为空时生成一次。</td></tr><tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">手动重生成</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">改模式/位数后点按钮。</td></tr>
</table><div style="font-weight:700;color:#0f172a;margin:14px 0 8px;">④ 高级</div>
<table style="width:100%;border-collapse:collapse;font-size:14px;">
<tr><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">字段</th><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">说明</th></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">启用 / 停用</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">停用仅隐藏。</td></tr>
</table>
</div>
<div style="margin:32px 0 12px;font-size:21px;font-weight:700;border-left:5px solid #2563eb;padding-left:12px;">演示</div>
<div style="background:#f8fafc;border:1px dashed #cbd5e1;border-radius:10px;padding:14px 16px;margin:12px 0;">
<span style="font-size:13px;color:#6b7280;display:block;margin-bottom:6px;">订单编号（纯数字 4 位）</span>
<input type="text" value="4827" style="padding:8px 10px;border:1px solid #cbd5e1;border-radius:8px;font-size:13px;width:160px;">
<button style="background:#2563eb;color:#fff;border:none;border-radius:8px;padding:8px 14px;font-size:13px;margin-left:8px;">生成编号</button>
</div>
<div style="background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;border-radius:10px;padding:12px 16px;font-size:14px;margin:12px 0;">技巧：默认纯数字 4 位（mode=num,len=4）；要更长或带字母在 dict 改 mode/len。编号非严格唯一（随机），关键单据建议业务层再加唯一约束。</div>
<div style="margin-top:36px;color:#6b7280;font-size:13px;text-align:center;">自动编号 控件文档 · 随工具迭代更新</div>
页:
[1]