zlg-tduck-form-generator 中文文档教程

Question

简介

TDuck 表单生成组件

核心表单组件单独成一个项目， 不使用主项目相关内容，方便快速集成到其他系统

可以复制src/formgen 目录到需要集成的项目 并添加package.json相关依赖

项目结构介绍：

• api 项目接口相关
• assets 资源文件 包括svg图 css样式等
• components 表单核心相关组件
• lib 依赖库 目前仅包含 tinymce富文本
• utils 工具

components 组件介绍

BizProjectForm组件

业务表单组件 包含表单基本的业务 从后台数据并处理 如数据结构拼装 如分页和逻辑显示

FormDesign 表单设计器组件

包含表单设计功能组件 拖拽生成等

FormItem表单问题项组件

表单所有支持拖拽生成的组件

GenerateForm 基础表单组件

• GenerateForm.vue 只包含最基础的功能 根据json生成表单
• index.vue 上层业务封装 包含主题样式 分页功能处理

使用方式参考项目

如果不需要二次开发 只需要集成使用可以使用官方提供的npm包集成

```
// 安装
npm i tduck-form-generator
```
使用

import {BizProjectForm} from 'tduck-form-generator'
import 'tduck-form-generator/dist/TduckForm.css'

import mixin from '../TduckFormMixin'

import {getToken} from '@/utils/auth'
import TduckForm from 'tduck-form-generator'

// 配置表单组件
export default {
  data() {
    return {
      formKey: null
    }
  },
  created() {
    // 所有值写入localStorage给表单组件使用 降低耦合
    if (getToken()) {
      localStorage.setItem(TduckForm.constant.ACCESS_TOKEN, 'Bearer ' + getToken())
    }
    // 传入项目名
    localStorage.setItem('FORM-SUPPORT',process.env['VUE_APP_TITLE'])
    localStorage.setItem(TduckForm.constant.ACCESS_TOKEN_NAME, 'Authorization')
    // 接口名
    localStorage.setItem(TduckForm.constant.BASE_URL, process.env['VUE_APP_API_ROOT'])
  }
}