lg/pengcheng-exam-teacher

Fork 0

Files

陆光LG 816fce233a fix: 独立窗口数据回显

2025-08-13 09:05:32 +08:00

3.8 KiB

Raw Permalink Blame History

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 页面中

选择题型: 首先选择相应的专业和题型
新增操作:
- 编程题：点击"新增"按钮，自动打开编程题独立窗口
- 表格题：点击"新增"按钮，自动打开表格题独立窗口
- 其他题型：使用传统对话框模式
修改操作:
- 在题目列表中点击"修改"按钮
- 编程题和表格题会在独立窗口中打开
- 其他题型继续使用对话框模式

独立窗口功能

窗口大小: 1200x800 像素，可调整大小
数据传递: 通过 Tauri 事件系统自动传递初始化数据
表单提交: 提交成功后自动关闭窗口并刷新主页面列表
取消操作: 取消时自动关闭窗口

技术实现

1. 窗口管理

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. 事件通信

// 发送初始化数据
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. 降级处理

如果独立窗口创建失败，会自动降级到传统对话框模式，确保功能的稳定性。

优势特点

用户体验好: 独立窗口提供更大的操作空间
多任务处理: 可以同时查看列表和编辑表单
兼容性强: 保持其他题型的传统操作方式不变
容错机制: 具备降级处理机制，保证功能稳定性
事件驱动: 使用 Tauri 事件系统实现优雅的窗口间通信

注意事项

确保 Tauri 环境正常运行
独立窗口需要相应的路由配置
表单组件需要支持 isIndependent 属性
事件名称需要保持一致以确保正常通信

扩展说明

如需为其他题型添加独立窗口支持：

在对应的 Form 组件中添加 isIndependent 属性支持
创建对应的独立窗口页面
在路由中添加相应配置
在 openForm 函数中添加相应的处理逻辑
定义相应的事件名称用于通信

3.8 KiB Raw Permalink Blame History