# dynamic-form

**Repository Path**: houzongdu/dynamic-form

## Basic Information

- **Project Name**: dynamic-form
- **Description**: 盛凯装饰动态表单系统
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-09
- **Last Updated**: 2026-03-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<<<<<<< HEAD
# dynamic-form

#### 介绍
{**以下是 Gitee 平台说明，您可以替换此简介**
Gitee 是 OSCHINA 推出的基于 Git 的代码托管平台（同时支持 SVN）。专为开发者提供稳定、高效、安全的云端软件开发协作平台
无论是个人、团队、或是企业，都能够用 Gitee 实现代码托管、项目管理、协作开发。企业项目请看 [https://gitee.com/enterprises](https://gitee.com/enterprises)}

#### 软件架构
软件架构说明


#### 安装教程

1.  xxxx
2.  xxxx
3.  xxxx

#### 使用说明

1.  xxxx
2.  xxxx
3.  xxxx

#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request


#### 特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
=======
# 动态表单管理系统

基于模板与模板单位配置的表单填写、保存与报表查看应用。数据与模板保存在浏览器 localStorage 中。

## 功能模块

### 首页（index.html）

- **表单填写**：选择模板后进入填写，保存时输入名称，数据进入报表查看。
- **模板管理**：新增、编辑、删除模板；模板由多个「基本单位」组成，可设置单位标题与默认填写内容。
- **模板单位配置**：维护可复用的模板单位配置（标签 + 输入框），供模板引用。
- **报表查看**：以表格形式查看已保存表单，支持查看内容、修改、删除、单条导出 Excel。

### 表单填写（input.html）

- 从模板列表选择模板后进入填写。
- 支持多条「条目」、拖拽排序、删除条目。
- 保存时输入保存名称，数据写入报表列表；每次进入从选择模板开始，不恢复未保存草稿。

### 模板管理（template.html / template-edit.html）

- 新增模板：先选择一份模板单位配置，进入编辑页后可添加「模板单位配置 / 文本输入 / 文本展示」等基本单位。
- 每个单位可设置标题，输入框内容可保存为模板默认填写内容，在表单填写选用该模板时会自动带出。
- 编辑模板时可查看与修改已保存的默认填写内容。

### 模板单位配置（field-config.html）

- 新增、修改、删除模板单位配置。
- 每个配置为多行，每行可添加：**文字**、**输入框**（占位符、格式：文本/正数）、**计算**（对正数字段做加减乘除，结果在表单中展示）。详见下方「计算功能使用说明」。

### 报表查看（view.html）

- 表格列：**序号**、**名称**、**填写时间**、**操作**。
- 操作：**删除**、**修改**（跳转表单填写页编辑并更新原记录）、**查看**（弹窗展示该条表单填写内容，含模板块标题）、**导出 Excel**（导出该条数据）。

## 计算功能使用说明

计算功能用于在模板单位配置中，对**一个或多个「正数」输入框**做加减乘除运算，结果作为只读字段展示在表单中（如合计、金额等）。

### 使用步骤

1. **先有正数字段**  
   在模板单位配置里至少有一行是「输入框」，且格式选为 **正数**（如：数量、单价等）。计算只能引用这些正数字段。

2. **添加计算行**  
   在任意一行点击 **「+ 计算」**，该行会多出一个「计算」元素。

3. **配置计算**  
   - **展示标签**：在表单中显示的列名，如「合计」「金额」。
   - **运算**：选择 **加 +**、**减 -**、**乘 ×** 或 **除 ÷**。
   - **参与运算的字段**：点击「+ 添加字段」从下拉中选一个正数字段，可多次添加；已选字段会以标签形式列出，点 × 可移出。

4. **运算规则（多个字段时）**  
   - **加**：所有选中字段的值相加。  
   - **乘**：所有选中字段的值相乘。  
   - **减**：按顺序「第一个 − 第二个 − 第三个 − …」。  
   - **除**：按顺序「第一个 ÷ 第二个 ÷ …」；除数为 0 时结果为空。

5. **表单中的效果**  
   填写时，计算行不显示输入框，只显示**实时计算结果**；修改任意参与运算的正数，结果会立即更新。导出 Excel 时，计算列会导出算出的数值。

### 示例

- 数量（正数）、单价（正数）→ 加一行「计算」：展示标签「金额」，运算选「乘 ×」，参与字段选「数量」「单价」，即得到「数量 × 单价」的金额。
- 多个正数 A、B、C → 计算选「加 +」，参与字段选 A、B、C，即得到 A + B + C。

## 使用方式

用浏览器直接打开 `index.html` 即可使用。`libs/` 目录已包含所需前端库（xlsx-js-style、html2canvas、jspdf），离线时亦可正常使用。

## 文件结构

```
form-project/
├── index.html          # 首页
├── input.html          # 表单填写
├── template.html       # 模板管理
├── template-edit.html  # 模板编辑
├── field-config.html   # 模板单位配置
├── view.html           # 报表查看
├── login.html          # 登录（可选）
├── styles.css          # 样式
├── js/
│   ├── shared.js       # 共享逻辑（存储、模板、表单渲染等）
│   ├── home.js         # 首页
│   ├── input.js        # 表单填写
│   ├── template.js     # 模板管理
│   ├── template-edit.js# 模板编辑
│   ├── field-config.js # 模板单位配置
│   ├── view.js         # 报表查看
│   └── login.js        # 登录
├── app.js              # 备用/旧版逻辑
├── libs/               # 前端依赖库（xlsx-js-style、html2canvas、jspdf），离线可用
├── docs/
│   └── database-schema.md  # 关系型数据库表结构说明
└── README.md
```

## 数据存储

- **localStorage**：模板单位配置（`field_configs`）、模板（`templates`）、已保存表单记录（`page_configs`）。
- 关系型表结构设计见 `docs/database-schema.md`。
>>>>>>> 61c03e7 (首次推送)