# jsonSchema

**Repository Path**: osvue/json-schema

## Basic Information

- **Project Name**: jsonSchema
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-18
- **Last Updated**: 2025-06-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue3 动态表单系统

一个基于 Vue3 + Element Plus 的复杂动态表单解决方案，支持多种字段类型、表单验证、编辑和查看模式。

## 功能特性

### 🎯 核心功能
- **动态表单渲染**：根据配置动态生成表单字段
- **多种字段类型**：支持输入框、选择器、多选框、日期选择器等
- **表单验证**：内置验证规则，支持自定义验证
- **编辑/查看模式**：同一组件支持编辑和只读查看
- **响应式设计**：适配移动端和桌面端

### 🔧 支持的字段类型
- `input` - 文本输入框
- `number` - 数字输入框
- `select` - 下拉选择器
- `checkbox` - 多选框
- `radio` - 单选框
- `textarea` - 文本域
- `date` - 日期选择器
- `time` - 时间选择器
- `switch` - 开关
- `slider` - 滑块
- `upload` - 文件上传

### 🛠️ 技术栈
- **Vue 3** - 使用 Composition API 和 Setup 语法
- **Element Plus** - UI 组件库
- **Pinia** - 状态管理
- **Vue Router** - 路由管理
- **Vite** - 构建工具

## 项目结构

```
src/
├── components/
│   ├── DynamicForm.vue          # 动态表单主组件
│   ├── DynamicFormField.vue     # 动态表单字段组件
│   └── FormBuilder.vue          # 表单构建器组件
├── stores/
│   └── formStore.js             # 表单状态管理
├── utils/
│   └── formUtils.js             # 表单工具函数
├── views/
│   ├── DynamicForm.vue          # 动态表单页面
│   └── FormViewer.vue           # 表单查看页面
├── router/
│   └── index.js                 # 路由配置
├── App.vue                      # 主应用组件
└── main.js                      # 应用入口
```

## 快速开始

### 安装依赖
```bash
npm install
```

### 启动开发服务器
```bash
npm run dev
```

### 构建生产版本
```bash
npm run build
```

## 使用指南

### 1. 基本使用

```vue
<template>
  <DynamicForm />
</template>

<script setup>
import DynamicForm from './components/DynamicForm.vue'
</script>
```

### 2. 配置表单字段

```javascript
const formConfig = {
  title: '用户信息表单',
  fields: [
    {
      id: 'name',
      label: '姓名',
      type: 'input',
      required: true,
      placeholder: '请输入姓名',
      rules: [{ required: true, message: '请输入姓名', trigger: 'blur' }]
    },
    {
      id: 'gender',
      label: '性别',
      type: 'select',
      required: true,
      options: [
        { label: '男', value: 'male' },
        { label: '女', value: 'female' }
      ]
    }
  ]
}
```

### 3. 状态管理

```javascript
import { useFormStore } from './stores/formStore'

const formStore = useFormStore()

// 设置表单数据
formStore.setFormData(data)

// 切换模式
formStore.setFormMode('view') // 或 'edit'

// 保存数据
const result = await formStore.saveFormData(formData)
```

### 4. 自定义字段组件

```javascript
// 在 DynamicFormField.vue 中添加自定义组件支持
{
  id: 'custom',
  label: '自定义字段',
  type: 'custom',
  component: 'CustomComponent',
  props: {
    // 自定义属性
  }
}
```

## 高级功能

### 1. 表单构建器

使用 `FormBuilder` 组件可以可视化地构建表单：

```vue
<template>
  <FormBuilder 
    :config="formConfig" 
    @update:config="handleConfigUpdate"
    @preview="handlePreview"
  />
</template>
```

### 2. 表单验证

支持多种验证规则：

```javascript
{
  rules: [
    { required: true, message: '必填项' },
    { type: 'email', message: '邮箱格式错误' },
    { type: 'phone', message: '手机号格式错误' },
    { min: 2, max: 10, message: '长度在2-10个字符' },
    { pattern: /^\d+$/, message: '只能输入数字' }
  ]
}
```

### 3. 数据导入导出

```javascript
import { exportFormData, importFormData } from './utils/formUtils'

// 导出数据
const jsonData = exportFormData(formData, fields, 'json')
const csvData = exportFormData(formData, fields, 'csv')

// 导入数据
const processedData = importFormData(rawData, fields)
```

### 4. 表单模板

使用预定义的模板快速创建表单：

```javascript
import { generateFormTemplate } from './utils/formUtils'

const userForm = generateFormTemplate('userInfo')
const productForm = generateFormTemplate('productInfo')
```

## 最佳实践

### 1. 性能优化
- 使用 `v-memo` 优化大列表渲染
- 合理使用计算属性缓存
- 避免在模板中使用复杂表达式

### 2. 代码组织
- 将复杂的表单逻辑拆分为独立的组件
- 使用工具函数处理通用逻辑
- 保持组件的单一职责

### 3. 用户体验
- 提供清晰的错误提示
- 支持键盘导航
- 添加加载状态和反馈

### 4. 可维护性
- 使用 TypeScript 定义类型（推荐）
- 编写单元测试
- 添加详细的注释和文档

## 扩展功能

### 1. 添加新的字段类型

在 `DynamicFormField.vue` 中添加新的字段类型支持：

```vue
<!-- 新增字段类型 -->
<el-cascader
  v-else-if="field.type === 'cascader'"
  v-model="fieldValue"
  :options="field.options"
  :disabled="isViewMode"
  style="width: 100%"
/>
```

### 2. 自定义验证规则

在 `formUtils.js` 中添加自定义验证逻辑：

```javascript
// 自定义验证规则
const customRules = {
  customRule: (value, rule) => {
    // 自定义验证逻辑
    return isValid ? true : rule.message
  }
}
```

### 3. 集成第三方组件

```javascript
// 注册自定义组件
import CustomComponent from './CustomComponent.vue'

// 在字段配置中使用
{
  id: 'custom',
  label: '自定义组件',
  type: 'custom',
  component: CustomComponent,
  props: {
    // 组件属性
  }
}
```

## 常见问题

### Q: 如何处理复杂的表单验证？
A: 可以使用自定义验证函数，或者在 `formUtils.js` 中添加复杂的验证逻辑。

### Q: 如何支持动态字段显示/隐藏？
A: 在字段配置中添加 `show` 属性，使用计算属性控制字段的显示状态。

### Q: 如何实现字段间的联动？
A: 使用 `watch` 监听字段值变化，动态更新其他字段的配置或值。

### Q: 如何优化大数据量表单的性能？
A: 使用虚拟滚动、分页加载、懒加载等技术优化性能。

## 贡献指南

1. Fork 项目
2. 创建功能分支
3. 提交更改
4. 推送到分支
5. 创建 Pull Request

## 许可证

MIT License

## 联系方式

如有问题或建议，请提交 Issue 或联系开发者。