DWD FORM DESIGNERE 飞燕

介绍

对于一些简单的表单需求，单独开发页面是很浪费时间的。并且这些页面随着时间会变的越来越多，使项目变的庞大。飞燕是一款表单生成器，用于帮助开发者快速创建和管理表单。它的优势在于简化了表单的开发过程，用数据去控制表单的渲染。对于需求频繁变更的项目，非常有益！

工程结构

├── README.md  
├── auto-imports.d.ts
├── commitlint.config.js  
├── index.html
├── install-render.ts    // 组件打包入口
├── package.json  
├── prettier.config.cjs   // prettier配置
├── public   // 静态资源文件
│   └── favicon.ico  
├── src  
│   ├── @types  // 类型文件
│   │   ├── Designer.ts  
│   │   └── Render.ts  
│   ├── App.vue  
│   ├── components  // 组件
│   │   ├── design  
│   │   │   ├── formView.vue // 编辑区展示组件
│   │   │   ├── index.vue  
│   │   │   ├── layout  // 布局组件
│   │   │   │   ├── CenterContent.vue   // 主要内容区
│   │   │   │   ├── HeaderContent.vue  // 头部
│   │   │   │   ├── LeftContent.vue  // 左边菜单
│   │   │   │   └── RightContent.vue  // 右边属性编辑器
│   │   │   ├── propsDesign.vue  // 右侧 属性设计组件
│   │   │   └── widgetList.vue  // 左侧 组件列表
│   │   ├── render  
│   │   │   └── index.vue  // 主渲染组件
│   │   └── widget  
│   │       ├── AsyncCom.vue  // 异步核心渲染组件 
│   │       ├── base-alert.vue  // 提示组件
│   │       ├── base-date-picker.vue  // 日期组件
│   │       ├── base-input.vue   // 输入组件
│   │       ├── base-option-config.vue  // 选项配置组件
│   │       ├── base-select.vue  // 选择器组件
│   │       ├── base-slider.vue  // 滑块儿组件
│   │       ├── base-switch.vue  // 单选组件
│   │       ├── base-upload.vue  // 上传组件
│   │       └── index.ts  // 注册所有组件
│   ├── components.d.ts  
│   ├── config  // 属性配置项
│   │   ├── commonProp.ts // 公共属性配置
│   │   ├── index.ts  // 组件数据模板
│   │   ├── propsWidget.ts  // 属性组件数据模板
│   │   └── widget.ts // unocss class声明与组件列表数据
│   ├── main.ts // 开发模式主入口文件
│   ├── store // pinia store 存储整表单的数据
│   │   └── index.ts
│   ├── style.scss // 公共css文件
│   ├── util // 一些工具函数
│   │   ├── clone.ts
│   │   ├── typeUtils.ts
│   │   └── util.ts
│   └── vite-env.d.ts
├── stylelint.config.cjs // stylelint 配置
├── tsconfig.json // tsc 配置
├── tsconfig.node.json
├── unocss.config.ts  // unocss 配置
├── vite.config.render.ts // 组件打包配置文件
├── vite.config.ts // 开发模式打包文件
└── yarn.lock

主要技术栈

• 前端框架： Vue3.x
• 构建工具： Vite
• 编程语言： TypeScript
• 组件库：Element-plus
• 代码规范：
  • ESLint
  • Prettier
  • Stylelint
• 提交规范：
  • husky
  • lint-staged
  • commitlint
• css 预处理器： scss
• 状态管理工具：pinia
• vite 插件：
  • unocss
  • unplugin-auto-import
  • unplugin-vue-components

环境要求

• node >= 16.0.0

依赖安装

 yarn

项目启动

npm run serve

进入组件的开发模式，默认展示的为design组件页面

项目打包

npm run build:render

以install-render.ts为入口文件打包组件

npm run build

打包整个项目

分支管理

• 初始化分支为 master
• dev 为主开发分支

组件发布流程

1. 首先更新版本号，你可以使用npm run patch命令，并确保当前没有更改的文件。

npm version major // 主版本号更改
npm version minor // 次版本号更改
npm version patch // 修订号更改

2. 执行组件打包命令

npm run build:render

3. 推倒远端服
   npm的服务器有一定的延迟,这时候下载的包可能还是旧的

npm publish

关于组件的使用

1.安装依赖

yarn add dwd-form-design

2.使用

<Renders
  ref="autForm"
  :form-option="pageConfig?.widgetList || []" 
  :form-config="config"
  @reset="resetHandle"
  @submit="submitHandle"
></Renders>
<script setup lang="ts">
import 'dwd-form-design/style' // css 文件

import Renders from 'dwd-form-design' // 默认导出

import { Designer, Renders, RenderType } from 'dwd-form-design' // 全部导出
function resetHandle() {
  console.log('reset')
}

const config = ref({
  labelPosition: 'left',
  labelWidth: '70px',
  size: 'default',
  customClass: '',
})

function submitHandle(val: any) {
  console.log('submit'，val)
}
</script>

3.属性与事件 | 属性名 | 说明 | 类型 | 默认值 | 是否必填| | :----: | :----: |:----: | :----: | :----: | | form-option | 模版数据 | FormItem | [] | 是 | | form-config | 表单配置 |FormOption | {} |是 |

| 事件名 | 说明 | 类型 | 是否必填| | :----: | :----: |:----: | :----: | | reset | 表单重置回调 | () => void |否 | | submit | 表单提交回调 |({[key: string]:any }) => void | 否 |

备注

props 字段具体配置请产考 element-plus文档

 {
    type: 'input', // 组件类型
    isContainer: false,
    field: 'input', // 字段名
    // 布局属性
    layout: { // 布局属性
      span: 24,
      offset: 0,
      pull: 0,
      push: 0,
    },
    initValue: '', // 初始值配置
    warp: { // form-item 配置
      label: 'input',
    },
    // 组件属性 可参考element-plus 需和组件类型相对应
    props: {
      placeholder: '请输入',
      clearable: true,
      type: 'text',
    },
    rule: { // 校验规则配置
      required: true,
      message: '我试一试啊',
      type: 'string',
    },
  },