签名板组件

概述

SignaturePad 是一个电子签名组件，支持 PC 端立即签名和手机扫码签名两种方式，签名结果自动上传并存储为文件 ID。

组件路径：web/apps/web-ele/src/components/zq-form/signature-pad/

组件名称：SignaturePad

功能特性

• PC 端立即签名（Canvas 绘制）
• 手机扫码签名（二维码 + WebSocket）
• 自定义画笔颜色和粗细
• 自定义背景颜色
• 签名图片自动上传
• 签名预览和清除
• 响应式尺寸

Props

属性	类型	默认值	说明
modelValue	string | null	-	签名文件 ID
penColor	string	'#000000'	画笔颜色
penWidth	number	2	画笔粗细
backgroundColor	string	'#ffffff'	背景颜色
width	number | string	'100%'	组件宽度
height	number	200	组件高度（px）
disabled	boolean	false	是否禁用
readonly	boolean	false	是否只读
placeholder	string	-	占位提示文本
source	string	'form'	文件上传来源标识

Events

事件	参数	说明
update:modelValue	string | null	值更新
change	string | null	值变化
signed	-	签名完成
cleared	-	签名清除

使用示例

基本用法

<template>
  <SignaturePad v-model="signature" />
</template>

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

const signature = ref(null);
</script>

自定义样式

<template>
  <SignaturePad
    v-model="signature"
    pen-color="#1890ff"
    :pen-width="3"
    background-color="#f5f5f5"
    :height="250"
  />
</template>

只读模式

<template>
  <SignaturePad
    v-model="signature"
    :readonly="true"
  />
</template>

与表单设计器集成

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

{
  "type": "signature-pad",
  "field": "signature",
  "label": "签名",
  "props": {
    "penColor": "#000000",
    "penWidth": 2,
    "backgroundColor": "#ffffff",
    "height": 200,
    "placeholder": "请在此处签名"
  }
}

组件结构

• SignaturePad.vue - 主组件，管理签名状态和显示
• SignatureDialog.vue - PC 端签名弹窗，使用 Canvas 绘制
• MobileSignatureDialog.vue - 手机签名弹窗，显示二维码供扫码

工作流程

1. 未签名状态：显示占位区域，hover 时显示"立即签名"和"手机签名"按钮
2. 立即签名：打开 Canvas 弹窗，用户绘制签名后保存
3. 手机签名：显示二维码，用户扫码后在手机端签名
4. 签名完成：签名图片上传到文件服务，返回文件 ID
5. 已签名状态：显示签名图片，hover 时显示"重新签名"和"清除"按钮

典型应用场景

• 合同签署：电子合同签名
• 审批流程：审批意见签名
• 表单确认：重要表单签字确认
• 交付签收：物品交付签收确认