npm package: @klaus_v_reinherz/v-formdesigner
Description: v-formdesigner 是基于 ElementUI + vue3-smooth-dnd 实现的表单设计器组件，可以通过拖拽方式快速创建表单
Latest version: 0.0.13

# 动态表单设计器

v-formdesigner 是基于 ElementUI + vue3-smooth-dnd 实现的表单设计器组件，可以通过拖拽方式快速创建表单

### 开始

#### 安装

```shell
# 安装表单设计器
pnpm add @klaus_v_reinherz/v-formdesigner
```

#### 修改 mian.ts

```tsx
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import ElementPlus from 'element-plus' //请自行导入ElementPlus并挂载
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import 'element-plus/dist/index.css'
import '@klaus_v_reinherz/v-formdesigner/dist/style.css' //引入所需样式

const app = createApp(App)
app.use(ElementPlus, {
  locale: zhCn,
})
app.mount('#app')
```

#### vite-env.d.ts 文件中添加声明模块

```tsx
/// <reference types="vite/client" />
declare module '@klaus_v_reinherz/v-formdesigner'
```

#### App.vue 中引入

```vue
<script setup lang="ts">
import { FormDesigner } from '@klaus_v_reinherz/v-formdesigner'
</script>

<template>
  <form-designer />
</template>

<style scoped></style>
```

---

### FormDesigner 表单设计器

表单设计器包含保存方法，并且会走接口保存，保存成功后有 success 回调

```vue
<script setup lang="ts">
import { ref } from 'vue'
import { FormDesigner } from '@klaus_v_reinherz/v-formdesigner'

let designeRef = ref<any>(null) //表单设计器组件

// 获取模板详情
function getDetail() {
  designeRef.value.getTemplateDetail({ id: 3 })
}

function handleSuccess() {
  console.log('保存成功')
}
</script>

<template>
  <el-button @click="getDetail">获取详情</el-button>
  <form-designer ref="designeRef" @success="handleSuccess" />
</template>

<style scoped></style>
```

#### Attributes

| 名称    | 类型     | 说明             |
| ------- | -------- | ---------------- |
| success | Function | 保存成功后的回调 |

#### Exposes

| 名称              | 类型     | 入参   | 说明                                 |
| ----------------- | -------- | ------ | ------------------------------------ |
| getTemplateDetail | Function | {id:1} | 传递 object 对象，之后保存将处于编辑 |

---

### FromCreate 表单

表单组件渲染需要传递模版 id，渲染表单内容需要传递表单 id

```vue
<script setup lang="ts">
import { ref } from 'vue'
import { FormCreate } from '@klaus_v_reinherz/v-formdesigner'

interface RuleFormData {
  [key: string]: any
}
let formRef = ref<any>(null) //表单组件

// 获取表单模板
function setFormTemplate() {
  formRef.value.getTemplateDetail({ id: 1 }) //id：模板id
}
  
// 设置表单数据
function setFormData() {
  formRef.value.getFormDetail({ id: 1 }) //id：表单id
}
  
// 校验
function handleSubmit() {
  formRef.value.validate()
}
  
// 后续业务处理，目前是组件内部走接口解决这个事情
function handleSuccess(form: RuleFormData) {
  console.log('保存成功，表单数据为：', form)
}
</script>

<template>
  <el-button @click="setFormTemplate">渲染表单</el-button>
  <el-button @click="setFormData">编辑表单内容</el-button>
  <form-create ref="formRef" @success="handleSuccess" />
  <el-button type="primary" @click="handleSubmit">提交</el-button>
</template>

<style scoped></style>
```

#### Attributes

| 名称    | 类型     | 说明             |
| ------- | -------- | ---------------- |
| success | Function | 保存成功后的回调 |

#### Exposes

| 名称              | 类型     | 入参   | 说明                                                   |
| ----------------- | -------- | ------ | ------------------------------------------------------ |
| getTemplateDetail | Function | {id:1} | 传递 object 对象，作为入参                             |
| getFormDetail     | Function | {id:1} | 传递 object 对象，作为入参，之后保存将处于编辑表单内容 |