wkc/ccdi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
60e836163ee7062bb9bbd0664c9c7cdf671f1fba
ccdi/doc/plans/2026-02-08-purchase-transaction-import-implementation.md
wkc d4f2f01d20 docs: 添加采购交易导入功能优化实施计划 
实施计划包含:
- 24个详细任务,每个任务2-5分钟完成
- 分11个阶段:前置准备、data属性、computed属性、生命周期、
  localStorage管理、状态恢复、上传逻辑、轮询机制、
  失败记录查看、UI修改、验证测试、文档更新
- 每个任务包含:文件路径、完整代码、验证步骤、提交命令
- TDD原则、频繁提交、完整文档

预期工作量: 2-3小时

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-02-08 13:44:13 +08:00

34 KiB
Raw Blame History

采购交易导入功能优化实施计划

For Claude: REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.

目标: 优化采购交易管理的导入功能,采用后台异步处理+通知提示,避免弹窗阻塞用户操作,完全复用员工信息维护的导入逻辑。

架构: 前端Vue组件修改,使用localStorage实现状态持久化,通过轮询机制查询导入状态,使用Element UI的$notify组件显示通知。

技术栈: Vue 2.6.12, Element UI 2.15.14, Axios, localStorage

前置准备

Task 0: 验证参考代码存在

目标: 确认员工信息维护的导入功能代码存在,作为参考

Files:

  • 参考: ruoyi-ui/src/views/ccdiEmployee/index.vue
  • 修改: ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue

Step 1: 检查参考文件是否存在

Run:

test -f ruoyi-ui/src/views/ccdiEmployee/index.vue && echo "参考文件存在" || echo "参考文件不存在"

Expected: "参考文件存在"

Step 2: 检查目标文件是否存在

Run:

test -f ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue && echo "目标文件存在" || echo "目标文件不存在"

Expected: "目标文件存在"

第一阶段:添加data属性

Task 1: 添加导入轮询相关属性

Files:

  • Modify: ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue

Step 1: 定位data()函数中的upload对象

在文件中查找 // 导入参数 注释,找到upload对象定义的位置。

Step 2: 在upload对象之后添加轮询相关属性

在 upload: {...} 对象之后,添加以下代码:

// 导入轮询定时器
importPollingTimer: null,
// 是否显示查看失败记录按钮
showFailureButton: false,
// 当前导入任务ID
currentTaskId: null,
// 失败记录对话框
failureDialogVisible: false,
failureList: [],
failureLoading: false,
failureTotal: 0,
failureQueryParams: {
  pageNum: 1,
  pageSize: 10
}

Step 3: 保存文件并验证语法

Run:

cd ruoyi-ui && npm run build:prod -- --no-clean 2>&1 | head -20

Expected: 没有语法错误

Step 4: 提交

git add ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue
git commit -m "feat: 添加导入轮询相关data属性

- 添加importPollingTimer定时器
- 添加showFailureButton失败记录按钮显示状态
- 添加currentTaskId当前任务ID
- 添加失败记录对话框相关属性(failureDialogVisible等)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>"

第二阶段:添加computed属性

Task 2: 添加lastImportInfo计算属性

Files:

  • Modify: ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue

Step 1: 定位computed部分

在文件中查找 computed: 或找到data()函数结束的位置。

Step 2: 添加computed属性

如果已有computed对象,在其中添加;如果没有,在data()之后创建computed对象:

computed: {
  /**
   * 上次导入信息摘要
   */
  lastImportInfo() {
    const savedTask = this.getImportTaskFromStorage();
    if (savedTask && savedTask.totalCount) {
      return `导入时间: ${this.parseTime(savedTask.saveTime)} | 总数: ${savedTask.totalCount}条 | 成功: ${savedTask.successCount}条 | 失败: ${savedTask.failureCount}条`;
    }
    return '';
  }
}

Step 3: 保存文件并验证语法

Run:

cd ruoyi-ui && npm run build:prod -- --no-clean 2>&1 | head -20

Expected: 没有语法错误

Step 4: 提交

git add ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue
git commit -m "feat: 添加lastImportInfo计算属性

- 显示上次导入的信息摘要
- 包含导入时间、总数、成功数、失败数

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>"

第三阶段:修改生命周期钩子

Task 3: 修改created钩子

Files:

  • Modify: ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue

Step 1: 定位created()钩子

查找 created() { 或 created() { 在文件中的位置。

Step 2: 在created()中添加restoreImportState调用

在 this.getList(); 之后添加:

this.restoreImportState(); // 恢复导入状态

Step 3: 保存文件

Step 4: 提交

git add ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue
git commit -m "feat: 在created钩子中恢复导入状态

- 页面加载时从localStorage恢复导入状态
- 如果有失败记录则显示查看按钮

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>"

Task 4: 修改beforeDestroy钩子

Files:

  • Modify: ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue

Step 1: 定位beforeDestroy()钩子

查找 beforeDestroy() { 在文件中的位置。

Step 2: 添加定时器清理代码

在beforeDestroy()中添加:

// 清理定时器
if (this.importPollingTimer) {
  clearInterval(this.importPollingTimer);
  this.importPollingTimer = null;
}

如果beforeDestroy()不存在,在created()之后创建它。

Step 3: 保存文件

Step 4: 提交

git add ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue
git commit -m "feat: 在beforeDestroy钩子中清理定时器

- 防止内存泄漏
- 组件销毁时清除轮询定时器

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>"

第四阶段:添加localStorage管理方法

Task 5: 添加saveImportTaskToStorage方法

Files:

  • Modify: ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue

Step 1: 定位methods部分

查找 methods: { 在文件中的位置。

Step 2: 在methods中添加saveImportTaskToStorage方法

在methods对象的适当位置添加:

/**
 * 保存导入任务到localStorage
 * @param {Object} taskData - 任务数据
 */
saveImportTaskToStorage(taskData) {
  try {
    const data = {
      ...taskData,
      saveTime: Date.now()
    };
    localStorage.setItem('purchase_transaction_import_last_task', JSON.stringify(data));
  } catch (error) {
    console.error('保存导入任务状态失败:', error);
  }
}

Step 3: 保存文件

Step 4: 提交

git add ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue
git commit -m "feat: 添加saveImportTaskToStorage方法

- 保存导入任务状态到localStorage
- 存储key: purchase_transaction_import_last_task
- 自动添加时间戳

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>"

Task 6: 添加getImportTaskFromStorage方法

Files:

  • Modify: ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue

Step 1: 在saveImportTaskToStorage之后添加方法

/**
 * 从localStorage读取导入任务
 * @returns {Object|null} 任务数据或null
 */
getImportTaskFromStorage() {
  try {
    const data = localStorage.getItem('purchase_transaction_import_last_task');
    if (!data) return null;

    const task = JSON.parse(data);

    // 数据格式校验
    if (!task || !task.taskId) {
      this.clearImportTaskFromStorage();
      return null;
    }

    // 时间戳校验
    if (task.saveTime && typeof task.saveTime !== 'number') {
      this.clearImportTaskFromStorage();
      return null;
    }

    // 过期检查(7天)
    const sevenDays = 7 * 24 * 60 * 60 * 1000;
    if (Date.now() - task.saveTime > sevenDays) {
      this.clearImportTaskFromStorage();
      return null;
    }

    return task;
  } catch (error) {
    console.error('读取导入任务状态失败:', error);
    this.clearImportTaskFromStorage();
    return null;
  }
}

Step 2: 保存文件

Step 3: 提交

git add ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue
git commit -m "feat: 添加getImportTaskFromStorage方法

- 从localStorage读取导入任务状态
- 包含数据格式校验
- 包含7天过期检查
- 异常时自动清除无效数据

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>"

Task 7: 添加clearImportTaskFromStorage方法

Files:

  • Modify: ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue

Step 1: 在getImportTaskFromStorage之后添加方法

/**
 * 清除localStorage中的导入任务
 */
clearImportTaskFromStorage() {
  try {
    localStorage.removeItem('purchase_transaction_import_last_task');
  } catch (error) {
    console.error('清除导入任务状态失败:', error);
  }
}

Step 2: 保存文件

Step 3: 提交

git add ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue
git commit -m "feat: 添加clearImportTaskFromStorage方法

- 清除localStorage中的导入任务状态
- 异常处理防止报错

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>"

第五阶段:添加状态恢复和提示方法

Task 8: 添加restoreImportState方法

Files:

  • Modify: ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue

Step 1: 在clearImportTaskFromStorage之后添加方法

/**
 * 恢复导入状态
 * 在created()钩子中调用
 */
restoreImportState() {
  const savedTask = this.getImportTaskFromStorage();

  if (!savedTask) {
    this.showFailureButton = false;
    this.currentTaskId = null;
    return;
  }

  // 如果有失败记录,恢复按钮显示
  if (savedTask.hasFailures && savedTask.taskId) {
    this.currentTaskId = savedTask.taskId;
    this.showFailureButton = true;
  }
}

Step 2: 保存文件

Step 3: 提交

git add ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue
git commit -m "feat: 添加restoreImportState方法

- 页面加载时恢复导入状态
- 如果有失败记录则显示查看按钮

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>"

Task 9: 添加getLastImportTooltip方法

Files:

  • Modify: ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue

Step 1: 在restoreImportState之后添加方法

/**
 * 获取上次导入的提示信息
 * @returns {String} 提示文本
 */
getLastImportTooltip() {
  const savedTask = this.getImportTaskFromStorage();
  if (savedTask && savedTask.saveTime) {
    const date = new Date(savedTask.saveTime);
    const timeStr = this.parseTime(date, '{y}-{m}-{d} {h}:{i}');
    return `上次导入: ${timeStr}`;
  }
  return '';
}

Step 2: 保存文件

Step 3: 提交

git add ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue
git commit -m "feat: 添加getLastImportTooltip方法

- 获取上次导入的提示信息
- 用于tooltip显示

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>"

第六阶段:修改导入上传逻辑

Task 10: 修改handleFileSuccess方法

Files:

  • Modify: ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue

Step 1: 定位handleFileSuccess方法

查找 handleFileSuccess(response, file, fileList) 方法。

Step 2: 完全替换方法实现

// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
  this.upload.isUploading = false;
  this.upload.open = false;

  if (response.code === 200) {
    // 验证响应数据完整性
    if (!response.data || !response.data.taskId) {
      this.$modal.msgError('导入任务创建失败:缺少任务ID');
      this.upload.isUploading = false;
      this.upload.open = true;
      return;
    }

    const taskId = response.data.taskId;

    // 清除旧的轮询定时器
    if (this.importPollingTimer) {
      clearInterval(this.importPollingTimer);
      this.importPollingTimer = null;
    }

    this.clearImportTaskFromStorage();

    // 保存新任务的初始状态
    this.saveImportTaskToStorage({
      taskId: taskId,
      status: 'PROCESSING',
      timestamp: Date.now(),
      hasFailures: false
    });

    // 重置状态
    this.showFailureButton = false;
    this.currentTaskId = taskId;

    // 显示后台处理提示(不是弹窗,是通知)
    this.$notify({
      title: '导入任务已提交',
      message: '正在后台处理中,处理完成后将通知您',
      type: 'info',
      duration: 3000
    });

    // 开始轮询检查状态
    this.startImportStatusPolling(taskId);
  } else {
    this.$modal.msgError(response.msg);
  }
}

Step 3: 保存文件

Step 4: 提交

git add ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue
git commit -m "feat: 修改handleFileSuccess为异步处理

- 上传成功后立即关闭对话框
- 使用通知替代弹窗提示
- 开始轮询导入状态

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>"

第七阶段:添加轮询和完成处理方法

Task 11: 添加startImportStatusPolling方法

Files:

  • Modify: ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue

Step 1: 在handleFileSuccess之后添加方法

/** 开始轮询导入状态 */
startImportStatusPolling(taskId) {
  let pollCount = 0;
  const maxPolls = 150; // 最多轮询150次(5分钟)

  this.importPollingTimer = setInterval(async () => {
    try {
      pollCount++;

      // 超时检查
      if (pollCount > maxPolls) {
        clearInterval(this.importPollingTimer);
        this.$modal.msgWarning('导入任务处理超时,请联系管理员');
        return;
      }

      const response = await getImportStatus(taskId);

      if (response.data && response.data.status !== 'PROCESSING') {
        clearInterval(this.importPollingTimer);
        this.handleImportComplete(response.data);
      }
    } catch (error) {
      clearInterval(this.importPollingTimer);
      this.$modal.msgError('查询导入状态失败: ' + error.message);
    }
  }, 2000); // 每2秒轮询一次
}

Step 2: 保存文件

Step 3: 提交

git add ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue
git commit -m "feat: 添加startImportStatusPolling方法

- 每2秒轮询一次导入状态
- 最多轮询150次(5分钟)
- 超时后显示警告

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>"

Task 12: 添加handleImportComplete方法

Files:

  • Modify: ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue

Step 1: 在startImportStatusPolling之后添加方法

/** 处理导入完成 */
handleImportComplete(statusResult) {
  // 更新localStorage中的任务状态
  this.saveImportTaskToStorage({
    taskId: statusResult.taskId,
    status: statusResult.status,
    hasFailures: statusResult.failureCount > 0,
    totalCount: statusResult.totalCount,
    successCount: statusResult.successCount,
    failureCount: statusResult.failureCount
  });

  if (statusResult.status === 'SUCCESS') {
    // 全部成功
    this.$notify({
      title: '导入完成',
      message: `全部成功!共导入${statusResult.totalCount}条数据`,
      type: 'success',
      duration: 5000
    });
    this.showFailureButton = false; // 成功时清除失败按钮显示
    this.getList();
  } else if (statusResult.failureCount > 0) {
    // 部分失败
    this.$notify({
      title: '导入完成',
      message: `成功${statusResult.successCount}条,失败${statusResult.failureCount}条`,
      type: 'warning',
      duration: 5000
    });

    // 显示查看失败记录按钮
    this.showFailureButton = true;
    this.currentTaskId = statusResult.taskId;

    // 刷新列表
    this.getList();
  }
}

Step 2: 保存文件

Step 3: 提交

git add ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue
git commit -m "feat: 添加handleImportComplete方法

- 处理导入完成逻辑
- 全部成功时显示成功通知
- 部分失败时显示警告通知和失败记录按钮
- 自动刷新列表

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>"

第八阶段:添加失败记录查看方法

Task 13: 添加viewImportFailures方法

Files:

  • Modify: ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue

Step 1: 在handleImportComplete之后添加方法

/** 查看导入失败记录 */
viewImportFailures() {
  this.failureDialogVisible = true;
  this.getFailureList();
}

Step 2: 保存文件

Step 3: 提交

git add ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue
git commit -m "feat: 添加viewImportFailures方法

- 打开失败记录对话框
- 加载失败记录列表

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>"

Task 14: 添加getFailureList方法

Files:

  • Modify: ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue

Step 1: 在viewImportFailures之后添加方法

/** 查询失败记录列表 */
getFailureList() {
  this.failureLoading = true;
  getImportFailures(
    this.currentTaskId,
    this.failureQueryParams.pageNum,
    this.failureQueryParams.pageSize
  ).then(response => {
    this.failureList = response.rows;
    this.failureTotal = response.total;
    this.failureLoading = false;
  }).catch(error => {
    this.failureLoading = false;

    // 处理不同类型的错误
    if (error.response) {
      const status = error.response.status;

      if (status === 404) {
        // 记录不存在或已过期
        this.$modal.msgWarning('导入记录已过期,无法查看失败记录');
        this.clearImportTaskFromStorage();
        this.showFailureButton = false;
        this.currentTaskId = null;
        this.failureDialogVisible = false;
      } else if (status === 500) {
        this.$modal.msgError('服务器错误,请稍后重试');
      } else {
        this.$modal.msgError(`查询失败: ${error.response.data.msg || '未知错误'}`);
      }
    } else if (error.request) {
      // 请求发送了但没有收到响应
      this.$modal.msgError('网络连接失败,请检查网络');
    } else {
      this.$modal.msgError('查询失败记录失败: ' + error.message);
    }
  });
}

Step 2: 保存文件

Step 3: 提交

git add ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue
git commit -m "feat: 添加getFailureList方法

- 查询分页的失败记录列表
- 完善的错误处理(404/500/网络错误等)
- 记录过期时自动清除状态

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>"

Task 15: 添加clearImportHistory方法

Files:

  • Modify: ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue

Step 1: 在getFailureList之后添加方法

/**
 * 清除导入历史记录
 * 用户手动触发
 */
clearImportHistory() {
  this.$confirm('确认清除上次导入记录?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    this.clearImportTaskFromStorage();
    this.showFailureButton = false;
    this.currentTaskId = null;
    this.failureDialogVisible = false;
    this.$message.success('已清除');
  }).catch(() => {});
}

Step 2: 保存文件

Step 3: 提交

git add ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue
git commit -m "feat: 添加clearImportHistory方法

- 清除localStorage中的导入历史
- 隐藏查看失败记录按钮
- 需要用户确认

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>"

第九阶段:修改UI组件

Task 16: 修改导入对话框(移除loading)

Files:

  • Modify: ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue

Step 1: 定位导入对话框

查找 <el-dialog 包含 upload.title 的位置。

Step 2: 移除loading相关属性

从el-dialog标签中移除以下属性:

  • v-loading="upload.isUploading"
  • element-loading-text="正在导入数据,请稍候..."
  • element-loading-spinner="el-icon-loading"
  • element-loading-background="rgba(0, 0, 0, 0.7)"

修改后的el-dialog应该类似:

<el-dialog
  :title="upload.title"
  :visible.sync="upload.open"
  width="400px"
  append-to-body
  @close="handleImportDialogClose"
>

Step 3: 保存文件

Step 4: 提交

git add ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue
git commit -m "refactor: 移除导入对话框的loading属性

- 导入改为后台异步处理,不需要显示loading
- 提升用户体验

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>"

Task 17: 添加"查看导入失败记录"按钮

Files:

  • Modify: ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue

Step 1: 定位操作栏的导入按钮和导出按钮

查找包含 @click="handleImport" 和 @click="handleExport" 的el-col。

Step 2: 在导出按钮之后添加查看失败记录按钮

在导出按钮的 </el-col> 之后添加:

<el-col :span="1.5" v-if="showFailureButton">
  <el-tooltip
    :content="getLastImportTooltip()"
    placement="top"
  >
    <el-button
      type="warning"
      plain
      icon="el-icon-warning"
      size="mini"
      @click="viewImportFailures"
    >查看导入失败记录</el-button>
  </el-tooltip>
</el-col>

Step 3: 保存文件

Step 4: 提交

git add ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue
git commit -m "feat: 添加查看导入失败记录按钮

- 仅在有失败记录时显示
- 带tooltip显示上次导入信息
- 点击打开失败记录对话框

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>"

Task 18: 添加导入失败记录对话框

Files:

  • Modify: ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue

Step 1: 定位导入结果对话框

查找 <import-result-dialog 组件。

Step 2: 在导入结果对话框之后添加失败记录对话框

在 </import-result-dialog> 之后添加:

<!-- 导入失败记录对话框 -->
<el-dialog
  title="导入失败记录"
  :visible.sync="failureDialogVisible"
  width="1200px"
  append-to-body
>
  <el-alert
    v-if="lastImportInfo"
    :title="lastImportInfo"
    type="info"
    :closable="false"
    style="margin-bottom: 15px"
  />

  <el-table :data="failureList" v-loading="failureLoading">
    <el-table-column label="采购事项ID" prop="purchaseId" align="center" />
    <el-table-column label="项目名称" prop="projectName" align="center" :show-overflow-tooltip="true"/>
    <el-table-column label="标的物名称" prop="subjectName" align="center" :show-overflow-tooltip="true"/>
    <el-table-column label="失败原因" prop="errorMessage" align="center" min-width="200" :show-overflow-tooltip="true" />
  </el-table>

  <pagination
    v-show="failureTotal > 0"
    :total="failureTotal"
    :page.sync="failureQueryParams.pageNum"
    :limit.sync="failureQueryParams.pageSize"
    @pagination="getFailureList"
  />

  <div slot="footer" class="dialog-footer">
    <el-button @click="failureDialogVisible = false">关闭</el-button>
    <el-button type="danger" plain @click="clearImportHistory">清除历史记录</el-button>
  </div>
</el-dialog>

Step 3: 保存文件

Step 4: 提交

git add ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue
git commit -m "feat: 添加导入失败记录对话框

- 显示导入信息摘要
- 分页显示失败记录(采购事项ID、项目名称、标的物名称、失败原因)
- 支持清除历史记录

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>"

第十阶段:验证和测试

Task 19: 语法验证

Files:

  • Verify: ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue

Step 1: 检查Vue文件语法

Run:

cd ruoyi-ui && npm run build:prod -- --no-clean 2>&1 | grep -A 5 "ccdiPurchaseTransaction/index.vue" | head -20

Expected: 没有语法错误

Step 2: 检查是否有未定义的变量

Run:

cd ruoyi-ui && npm run build:prod -- --no-clean 2>&1 | grep -i "undefined" | head -10

Expected: 没有相关错误

Step 3: 提交验证通过说明

git commit --allow-empty -m "test: 语法验证通过

- Vue文件语法检查通过
- 无未定义变量
- 所有方法已正确添加

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>"

Task 20: 功能测试准备

目标: 准备测试数据和测试场景

Step 1: 确认测试数据文件存在

Run:

ls -lh doc/test-data/purchase_transaction/*.xlsx

Expected: 显示至少一个xlsx文件

Step 2: 确认API接口可用

检查后端服务是否运行:

Run:

curl -s http://localhost:8080/swagger-ui/index.html | grep -o "purchaseTransaction" | head -1

Expected: 输出"purchaseTransaction"

Step 3: 记录测试环境信息

cat > doc/test-data/purchase_transaction/TEST_ENV.md << 'EOF'
# 测试环境信息

## 测试日期
$(date +%Y-%m-%d)

## 后端服务
- URL: http://localhost:8080
- Swagger: http://localhost:8080/swagger-ui/index.html

## 测试账号
- username: admin
- password: admin123

## 测试接口
1. 导入: POST /ccdi/purchaseTransaction/importData
2. 查询状态: GET /ccdi/purchaseTransaction/importStatus/{taskId}
3. 查询失败记录: GET /ccdi/purchaseTransaction/importFailures/{taskId}

## 测试数据文件
- purchase_test_data_2000.xlsx (2000条测试数据)
EOF

Step 4: 提交测试准备文档

git add doc/test-data/purchase_transaction/TEST_ENV.md
git commit -m "test: 添加测试环境信息文档

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>"

Task 21: 创建测试脚本

目标: 创建自动化测试脚本

Files:

  • Create: doc/test-data/purchase_transaction/test-import-flow.js

Step 1: 创建测试脚本

const fs = require('fs');
const path = require('path');

// 测试配置
const CONFIG = {
  baseUrl: 'http://localhost:8080',
  username: 'admin',
  password: 'admin123',
  testFile: path.join(__dirname, 'purchase_test_data_2000.xlsx')
};

// 日志函数
function log(message, level = 'INFO') {
  const timestamp = new Date().toISOString();
  console.log(`[${timestamp}] [${level}] ${message}`);
}

// 测试步骤清单
const TEST_STEPS = [
  {
    name: '1. 登录获取token',
    action: async () => {
      // TODO: 实现登录逻辑
      log('登录功能需要手动实现或使用curl命令');
      return 'mock-token-xxx';
    }
  },
  {
    name: '2. 上传测试文件',
    action: async (token) => {
      log('上传文件:', CONFIG.testFile);
      // TODO: 实现文件上传
      return { taskId: 'mock-task-id' };
    }
  },
  {
    name: '3. 等待导入完成',
    action: async (taskId) => {
      log('等待任务完成:', taskId);
      log('请手动查看右上角通知');
    }
  },
  {
    name: '4. 验证结果',
    action: async () => {
      log('验证:');
      log('  - 对话框已关闭 ✓');
      log('  - 显示导入通知 ✓');
      log('  - 如有失败,显示查看失败记录按钮 ✓');
    }
  }
];

// 主测试流程
async function runTests() {
  log('=== 采购交易导入功能测试 ===');
  log('开始时间:', new Date().toLocaleString('zh-CN'));

  for (const step of TEST_STEPS) {
    log(`\n执行: ${step.name}`);
    try {
      await step.action();
    } catch (error) {
      log(`失败: ${error.message}`, 'ERROR');
    }
  }

  log('\n=== 测试完成 ===');
}

// 导出测试函数
module.exports = { runTests, TEST_STEPS };

// 如果直接运行此脚本
if (require.main === module) {
  runTests();
}

Step 2: 保存文件

Step 3: 提交

git add doc/test-data/purchase_transaction/test-import-flow.js
git commit -m "test: 添加导入功能测试脚本

- 测试流程框架
- 包含主要测试步骤

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>"

第十一阶段:文档更新

Task 22: 更新API文档

Files:

  • Modify: doc/api/ccdi_purchase_transaction_api.md

Step 1: 在文档末尾添加导入交互说明

---

## 导入功能交互说明

### 前端交互流程

1. **上传文件**
   - 用户点击"导入"按钮
   - 选择Excel文件
   - 点击"确定"上传
   - **导入对话框立即关闭**

2. **后台处理**
   - 右上角显示通知:"导入任务已提交,正在后台处理中,处理完成后将通知您"
   - 系统每2秒轮询一次导入状态

3. **导入完成**
   - 全部成功:显示绿色通知"导入完成!全部成功!共导入N条数据"
   - 部分失败:显示橙色通知"导入完成!成功N条,失败M条"
   - 如果有失败记录,操作栏显示"查看导入失败记录"按钮

4. **查看失败记录**
   - 点击"查看导入失败记录"按钮
   - 打开对话框显示分页的失败记录
   - 包含字段:采购事项ID、项目名称、标的物名称、失败原因
   - 支持清除历史记录

### 状态持久化

- 导入状态保存在localStorage中
- 刷新页面后仍可查看上次导入结果
- 状态保留7天,过期自动清除

### 与员工信息导入的对比

采购交易导入完全复用了员工信息导入的逻辑,两者的交互方式完全一致。

Step 2: 保存文件

Step 3: 提交

git add doc/api/ccdi_purchase_transaction_api.md
git commit -m "docs: 更新API文档,添加导入交互说明

- 详细的前端交互流程
- 状态持久化说明
- 与员工信息导入的对比

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>"

Task 23: 创建变更日志

Files:

  • Create: doc/plans/2026-02-08-purchase-transaction-import-changelog.md

Step 1: 创建变更日志文档

# 采购交易导入功能优化 - 变更日志

## 变更概述
- **日期**: 2026-02-08
- **类型**: 功能优化
- **影响范围**: 前端UI组件
- **向后兼容**: 是

## 变更内容

### 用户体验改进
- ✅ 导入对话框不再阻塞,上传后立即关闭
- ✅ 使用右上角通知替代弹窗提示
- ✅ 支持后台异步导入,用户可继续操作
- ✅ 导入完成后自动刷新列表

### 新增功能
- ✅ 查看导入失败记录功能
- ✅ 导入状态持久化(7天)
- ✅ 分页查看失败记录
- ✅ 清除导入历史功能

### 技术改进
- ✅ 使用localStorage保存导入状态
- ✅ 轮询机制查询导入状态(2秒间隔,5分钟超时)
- ✅ 完善的错误处理(404/500/网络错误)

## 文件变更

### 修改文件
- `ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue`
  - 新增10个data属性
  - 新增1个computed属性
  - 新增11个方法
  - 修改1个方法(handleFileSuccess)
  - 修改2个生命周期钩子
  - 新增1个UI对话框

### 新增文件
- `doc/test-data/purchase_transaction/test-import-flow.js` - 测试脚本

## 测试清单

- [ ] 正常导入流程测试
- [ ] 全部成功场景测试
- [ ] 部分失败场景测试
- [ ] 失败记录查看测试
- [ ] 状态持久化测试
- [ ] 清除历史记录测试
- [ ] 边界情况测试(超时、过期、网络错误)

## 部署说明

### 前端部署
```bash
cd ruoyi-ui
npm run build:prod
# 将dist目录部署到Web服务器

环境要求

  • Node.js 14+
  • 现代浏览器(Chrome/Firefox/Edge)

回滚方案

如需回滚,恢复以下commit之前的状态:

git revert <commit-hash>

相关文档

  • 设计文档: doc/plans/2026-02-08-purchase-transaction-import-design.md
  • API文档: doc/api/ccdi_purchase_transaction_api.md
  • 实施计划: doc/plans/2026-02-08-purchase-transaction-import-implementation.md

**Step 2: 保存文件**

**Step 3: 提交**

```bash
git add doc/plans/2026-02-08-purchase-transaction-import-changelog.md
git commit -m "docs: 添加变更日志

- 变更概述和影响范围
- 文件变更清单
- 测试清单和部署说明

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>"

完成检查清单

Task 24: 最终验证和提交

目标: 确保所有任务完成,准备合并

Step 1: 检查所有方法是否已添加

Run:

grep -E "(saveImportTaskToStorage|getImportTaskFromStorage|clearImportTaskFromStorage|restoreImportState|getLastImportTooltip|startImportStatusPolling|handleImportComplete|viewImportFailures|getFailureList|clearImportHistory)" ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue | wc -l

Expected: 输出应该大于等于10(每个方法至少出现一次)

Step 2: 检查UI组件是否已添加

Run:

grep -E "查看导入失败记录|导入失败记录" ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue | wc -l

Expected: 输出应该大于等于2

Step 3: 查看所有commit

Run:

git log --oneline --grep="purchase.*import\|导入" -10

Expected: 显示本次实施的所有提交记录

Step 4: 创建完成标记

git tag -a "purchase-import-optimization" -m "采购交易导入功能优化完成

- 后台异步处理
- 通知提示
- 失败记录查看
- 状态持久化

实施日期: 2026-02-08"

Step 5: 最终提交

git commit --allow-empty -m "feat: 采购交易导入功能优化完成 ✓

✅ 所有功能已实现
✅ 代码已提交
✅ 文档已更新
✅ 测试脚本已准备

实施计划: doc/plans/2026-02-08-purchase-transaction-import-implementation.md
设计文档: doc/plans/2026-02-08-purchase-transaction-import-design.md
变更日志: doc/plans/2026-02-08-purchase-transaction-import-changelog.md

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>"

附录

A. 快速参考

localStorage Key: purchase_transaction_import_last_task

API接口:

  • 导入: POST /ccdi/purchaseTransaction/importData
  • 状态: GET /ccdi/purchaseTransaction/importStatus/{taskId}
  • 失败记录: GET /ccdi/purchaseTransaction/importFailures/{taskId}

轮询配置:

  • 间隔: 2秒
  • 超时: 150次(5分钟)

状态保留: 7天

B. 故障排查

问题: 导入后没有显示通知

  • 检查: 浏览器控制台是否有错误
  • 检查: $notify组件是否可用
  • 检查: 响应数据是否包含taskId

问题: 无法查看失败记录

  • 检查: localStorage中是否有任务数据
  • 检查: showFailureButton是否为true
  • 检查: API返回的错误码

问题: 刷新页面后状态丢失

  • 检查: localStorage是否被清除
  • 检查: restoreImportState是否被调用

C. 后续优化建议

  1. 添加导入进度条显示
  2. 支持取消正在进行的导入任务
  3. 批量导入多个文件
  4. 导入历史记录列表
  5. 导入数据预览功能

实施计划版本: 1.0.0 创建日期: 2026-02-08 预计工作量: 2-3小时 实际工作量: 待填写 实施人员: 待填写

Reference in New Issue View Git Blame Copy Permalink