ehr-form-engine

专业的人事表单引擎设计器

特性

• JSON Schema
• Form Rules （表单校验）
• Form Dependencies （表单项动态依赖）
• Dynamic Table （动态表格设计器）
• Dynamic Uploads （动态附件设计器）

组件库模板

• [x] 基于 Vite Library 模式搭建
• [x] 支持 SPA 模式下本地调试
• [x] 支持 Storybook 本地调试 + 文档生成
• [x] 支持构建 ESM、CJS 模块
• [x] 借助 vite-plugin-dts 实现自动生成 Typescript 类型声明文件
• [x] 支持 husky + eslint + prettier 控制代码质量

安装项目依赖

pnpm install ehr-form-engine

项目 peerDependencies

"peerDependencies": {
  "@ant-design/icons-vue": "^7.0.1",
  "@iconify/vue": "^5.0.0",
  "ant-design-vue": "^4.2.6",
  "vue": "^3.5.25",
  "vxe-pc-ui": "^4.10.22",
  "vxe-table": "^4.17.14",
  "reka-ui": "^2.6.0",
  "vue-json-pretty": "^2.5.0",
  "vuedraggable": "^4.1.0"
},

引入组件库示例

<script lang="ts" setup>
type Nullable<T> = null | T;

import type { ResumeDesignerActionType } from 'ehr-form-engine';

import { ref } from 'vue';

import { Button } from 'ant-design-vue';
import { ResumeDesigner } from 'ehr-form-engine';

import 'ehr-form-engine/dist/style.css';

const renderRef = ref<Nullable<ResumeDesignerActionType>>(null);

const onSave = () => {
  // eslint-disable-next-line no-console
  console.log(JSON.stringify(renderRef.value?.exportJsonSchema()));
};
</script>

<template>
  <ResumeDesigner ref="renderRef">
    <template #toolbar-custom-actions>
      <Button type="primary" @click.stop="onSave"> 保存草稿 </Button>
    </template>
  </ResumeDesigner>
</template>
<style scoped></style>

运行效果

表单项属性设置

表格属性设置

附件属性设置

表单项依赖条件设置

表格列设计器

表单预览

表格预览