vform-hd

基于 Element UI 的可视化表单设计器（血液透析 HD 版），在 vform-plus 基础上扩展了患者业务字段。

功能特性

核心功能

• 表单设计器（FormDesigner）：可视化拖拽设计表单，支持 PC/Pad/H5 布局预览
• 表单渲染器（FormRender）：运行时渲染表单，支持数据回填和校验
• JSON 导入导出：表单设计结果以 JSON 格式存储，支持导入导出
• SFC 代码生成：可生成 Vue2/Vue3 单文件组件代码

患者业务字段

内置 15 个血液透析患者专用字段，拖拽即可使用：

| 字段 | 类型 | 控件模式 | 说明 | |------|------|---------|------| | 科室 | patient-dept | 输入框 | 只读回填 | | 床号 | patient-bedNo | 输入框 | 可编辑 | | 姓名 | patient-name | 输入框 | 只读回填 | | 性别 | patient-sex | 单选框 | 只读回填 | | 年龄 | patient-age | 数字输入 | 只读回填 | | 透析号 | patient-patNumber | 输入框 | 只读回填 | | 联系人电话 | patient-telephone | 输入框 | 可编辑 | | 籍贯 | patient-nativePlace | 输入框 | 可编辑 | | 费别 | patient-chargeClass | 多选框 | 只读回填，支持选项自定义 | | 教育程度 | patient-education | 多选框 | 只读回填，支持选项自定义 | | 透析频次 | patient-dialysisFrequency | 下拉选择 | 可编辑，支持选项自定义 | | 透析方式 | patient-hdMode | 下拉选择 | 可编辑，支持选项自定义 | | 血管通路 | patient-hdVa | 下拉选择 | 可编辑，支持选项自定义 | | 民族 | patient-nation | 下拉选择 | 只读回填，支持选项自定义 | | 透析时间 | patient-dialysisTime | 日期选择 | 可编辑 |

患者字段控件模式

每个患者字段支持通过属性面板切换控件类型：

• 输入框（input）：文本输入
• 下拉选择（select）：单选下拉
• 单选框（radio）：单选按钮组
• 多选框（checkbox）：多选按钮组
• 数字输入（number）：数字计数器
• 日期选择（date）：日期选择器

对于下拉选择、单选框、多选框类型，属性面板会显示「选项设置」区域，支持：

• 增加/删除选项
• 拖拽排序选项
• 批量导入选项
• 从系统已有配置导入

数据回填

通过 patientDataProvider 注入患者数据，字段会自动根据 bindField 回填对应值。

安装

# npm
npm install vform-hd

# pnpm（本地链接）
pnpm install vform-hd

使用方式

全局注册

// main.js
import Vue from 'vue'
import VFormHD from 'vform-hd'
import 'vform-hd/dist/style.css'

Vue.use(VFormHD)

表单设计器

<template>
  <v-form-designer ref="vFormDesigner" />
</template>

表单渲染器

<template>
  <v-form-render
    ref="vFormRender"
    :form-json="formJson"
    :form-data="formData"
    :option-data="optionData"
  />
</template>

<script>
import { createPatientDataProvider } from 'vform-hd'

export default {
  data() {
    return {
      formJson: { widgetList: [], formConfig: {} },
      formData: {},
      optionData: {},
    }
  },
  provide() {
    return {
      patientDataProvider: createPatientDataProvider(this.patientInfo),
    }
  },
}
</script>

构建与发布

# 开发调试
npm run dev

# 构建
npm run build

# 发布（自动 bump 版本号）
npm run pub:patch   # 1.0.0 → 1.0.1
npm run pub:minor   # 1.0.0 → 1.1.0
npm run pub:major   # 1.0.0 → 2.0.0

项目结构

vform-hd/
├── src/
│   ├── index.js                          # 入口文件
│   ├── components/
│   │   ├── form-designer/                # 表单设计器
│   │   ├── form-render/                  # 表单渲染器
│   │   └── ...
│   ├── extension/                        # 患者字段扩展
│   │   ├── extension-loader.js
│   │   ├── patient-fields-loader.js      # 患者字段注册
│   │   ├── patient-field-sfc-generator.js
│   │   └── patient-fields/
│   │       ├── patient-field-widget.vue  # 共享渲染组件
│   │       └── schemas/                  # 15 个字段 Schema
│   ├── provider/
│   │   └── patientDataProvider.js        # 患者数据提供者
│   ├── lang/                             # 国际化
│   ├── utils/                            # 工具函数
│   ├── styles/                           # 样式
│   └── icons/                            # SVG 图标
├── dist/                                 # 构建产物
│   ├── vform-hd.es.js
│   ├── vform-hd.umd.js
│   └── style.css
├── package.json
└── vite.config.js

依赖说明

| 依赖 | 版本要求 | 说明 | |------|---------|------| | vue | ^2.6.0 || ^2.7.0 | 框架 | | element-ui | ^2.15.0 | UI 组件库 | | axios | ^1.0.0 | HTTP 请求 | | msun-lib-ui | ^10.0.0 | 众阳 UI 库 |

更新日志

v1.0.0

• 从 HD 项目中提取表单设计器为独立 npm 包
• 内置 15 个患者业务字段
• 支持控件类型切换（输入框/下拉选择/单选框/多选框/数字输入/日期选择）
• 支持选项自定义编辑（增加/删除/导入/排序）
• 支持 patientDataProvider 数据回填
• 支持 SFC 代码生成