fix: 独立窗口数据回显
This commit is contained in:
121
docs/paper-question-independent-windows.md
Normal file
121
docs/paper-question-independent-windows.md
Normal file
@@ -0,0 +1,121 @@
|
||||
# Paper/Question 页面独立窗口功能使用说明
|
||||
|
||||
## 功能概述
|
||||
|
||||
完善了 paper/question 页面的独立窗口功能,支持编程题和表格题通过独立窗口进行新增、编辑和修改操作。
|
||||
|
||||
## 主要改进
|
||||
|
||||
### 1. 独立窗口支持
|
||||
- **编程题**: 点击新增/修改时会打开独立窗口
|
||||
- **表格题**: 点击新增/修改时会打开独立窗口
|
||||
- **其他题型**: 继续使用传统对话框模式
|
||||
|
||||
### 2. 路由配置
|
||||
添加了两个新的独立窗口路由:
|
||||
- `/cdesign-independent` - 编程题独立窗口
|
||||
- `/excel-independent` - 表格题独立窗口
|
||||
|
||||
### 3. 事件通信
|
||||
使用 Tauri 事件系统进行窗口间通信:
|
||||
- `init-cdesign-form` - 初始化编程题表单数据
|
||||
- `init-excel-form` - 初始化表格题表单数据
|
||||
- `cdesign-form-success` / `excel-form-success` - 表单提交成功
|
||||
- `cdesign-form-cancel` / `excel-form-cancel` - 表单取消
|
||||
|
||||
## 文件修改说明
|
||||
|
||||
### 1. 主要页面修改
|
||||
- `src/views/paper/question/index.vue`: 修改 openForm 函数,为编程题和表格题添加独立窗口支持
|
||||
- `src/views/paper/question/CdesignForm.vue`: 已支持独立窗口模式
|
||||
- `src/views/paper/question/WpsXlsxForm.vue`: 添加独立窗口模式支持
|
||||
|
||||
### 2. 新增独立窗口页面
|
||||
- `src/views/cdesign/independent.vue`: 编程题独立窗口页面
|
||||
- `src/views/excel/independent.vue`: 表格题独立窗口页面
|
||||
|
||||
### 3. 路由配置
|
||||
- `src/router/modules/remaining.ts`: 添加独立窗口路由配置
|
||||
|
||||
## 使用方法
|
||||
|
||||
### 在 paper/question 页面中
|
||||
|
||||
1. **选择题型**: 首先选择相应的专业和题型
|
||||
2. **新增操作**:
|
||||
- 编程题:点击"新增"按钮,自动打开编程题独立窗口
|
||||
- 表格题:点击"新增"按钮,自动打开表格题独立窗口
|
||||
- 其他题型:使用传统对话框模式
|
||||
|
||||
3. **修改操作**:
|
||||
- 在题目列表中点击"修改"按钮
|
||||
- 编程题和表格题会在独立窗口中打开
|
||||
- 其他题型继续使用对话框模式
|
||||
|
||||
### 独立窗口功能
|
||||
|
||||
1. **窗口大小**: 1200x800 像素,可调整大小
|
||||
2. **数据传递**: 通过 Tauri 事件系统自动传递初始化数据
|
||||
3. **表单提交**: 提交成功后自动关闭窗口并刷新主页面列表
|
||||
4. **取消操作**: 取消时自动关闭窗口
|
||||
|
||||
## 技术实现
|
||||
|
||||
### 1. 窗口管理
|
||||
```javascript
|
||||
const { WebviewWindow } = await import('@tauri-apps/api/webviewWindow')
|
||||
const webview = new WebviewWindow(windowLabel, {
|
||||
url: '#/cdesign-independent',
|
||||
title: '新增编程题',
|
||||
width: 1200,
|
||||
height: 800,
|
||||
resizable: true,
|
||||
center: true
|
||||
})
|
||||
```
|
||||
|
||||
### 2. 事件通信
|
||||
```javascript
|
||||
// 发送初始化数据
|
||||
import('@tauri-apps/api/event').then(({ emit }) => {
|
||||
emit('init-cdesign-form', {
|
||||
queryParams,
|
||||
type,
|
||||
id
|
||||
})
|
||||
})
|
||||
|
||||
// 监听成功事件
|
||||
const { listen } = await import('@tauri-apps/api/event')
|
||||
listen('cdesign-form-success', () => {
|
||||
getList() // 刷新列表
|
||||
})
|
||||
```
|
||||
|
||||
### 3. 降级处理
|
||||
如果独立窗口创建失败,会自动降级到传统对话框模式,确保功能的稳定性。
|
||||
|
||||
## 优势特点
|
||||
|
||||
1. **用户体验好**: 独立窗口提供更大的操作空间
|
||||
2. **多任务处理**: 可以同时查看列表和编辑表单
|
||||
3. **兼容性强**: 保持其他题型的传统操作方式不变
|
||||
4. **容错机制**: 具备降级处理机制,保证功能稳定性
|
||||
5. **事件驱动**: 使用 Tauri 事件系统实现优雅的窗口间通信
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 确保 Tauri 环境正常运行
|
||||
2. 独立窗口需要相应的路由配置
|
||||
3. 表单组件需要支持 `isIndependent` 属性
|
||||
4. 事件名称需要保持一致以确保正常通信
|
||||
|
||||
## 扩展说明
|
||||
|
||||
如需为其他题型添加独立窗口支持:
|
||||
|
||||
1. 在对应的 Form 组件中添加 `isIndependent` 属性支持
|
||||
2. 创建对应的独立窗口页面
|
||||
3. 在路由中添加相应配置
|
||||
4. 在 `openForm` 函数中添加相应的处理逻辑
|
||||
5. 定义相应的事件名称用于通信
|
Reference in New Issue
Block a user