You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
dianshang-qianduan/按钮位置统一调整执行文档.md

124 lines
3.9 KiB
Markdown

# 按钮位置统一调整执行文档
## 一、目的
将 \产品影响因素分析\ 和 \产品开发流程\ 实训页面的工具栏按钮(素材按钮 + 导出按钮)从 \workbench-head\ 内移到 \ ask-header\ 同级别的 \ ask-action-strip\ 区域,参考页面 \新产品需求调研\ 的标准布局。
## 二、参考页面结构
\
ew-product-survey.vue\ 的标准布局:
\\\html
<main class=\"xxx-core\">
<section class=\"task-header\"> <!-- 任务头部信息 + 标题 -->
...
</section>
<section class=\"task-action-strip\"> <!-- 工具栏操作按钮区 -->
<TrainingTaskToolbar :task-key=\"TASK_KEY\" :on-export=\"exportOutcome\" />
</section>
<section class=\"xxx-workbench\"> <!-- 工作台内容 + 步骤 -->
...
</section>
</main>
\\\
---
## 七、删除下方步骤中重复的\"提交任务\"按钮
### 问题描述
顶部 \TrainingTaskToolbar\ 组件已包含\"提交任务\"按钮,但 Step 4 步骤下方也出现了相同的按钮,导致按钮重复。
### 调整方案
| 按钮 | 位置 | 操作 |
|------|------|------|
| \"提交任务\" | 顶部 \TrainingTaskToolbar\ | 保留 |
| \"提交任务\" | 步骤下方 | **删除**(重复) |
| \"清空填写\"/\"清空本步\" | 步骤下方 | 保留 |
### 删除前必须检查的事项
> **重要**:删除按钮前,必须确认该按钮绑定的 \submitTraining\ 方法名是否与顶部组件一致,避免误删导致提交功能失效。
#### 检查清单
1. **确认方法名一致性**:
- 检查步骤内按钮绑定的提交方法名(如 \@click=\"submitTraining\"\)
- 对比 \TrainingTaskToolbar\ 组件内部的提交方法名
- **两者方法名必须一致才能安全删除重复按钮**
2. **检查功能绑定**:
- 确认删除后提交功能的调用链路是否完整
- 确保顶部组件的提交方法与当前页面的数据状态关联正确
3. **保留清空功能**:
- \"清空填写\"/\"清空本步\"按钮不调用提交方法,可以保留
### 具体修改
#### \product-development-factors.vue\(第133行附近)
**当前代码:**
\\\html
<div class=\"task-actions\">
<button type=\"button\" class=\"btn-nav btn-submit\" :disabled=\"saving\" @click=\"submitTraining\">
提交任务<el-icon><CircleCheck /></el-icon>
</button>
<button type=\"button\" class=\"btn-nav\" :disabled=\"saving\" @click=\"resetTraining\">
清空填写
</button>
</div>
\\\
**修改为:**
\\\html
<div class=\"task-actions\">
<button type=\"button\" class=\"btn-nav\" :disabled=\"saving\" @click=\"resetTraining\">
清空填写
</button>
</div>
\\\
#### \product-development-process.vue\(第170行附近)
**当前代码:**
\\\html
<div class=\"task-actions\">
<button type=\"button\" class=\"btn-nav btn-submit\" :disabled=\"checking || !stepThreePassed\" @click=\"submitTraining\">
提交任务<el-icon><CircleCheck /></el-icon>
</button>
<button type=\"button\" class=\"btn-nav\" :disabled=\"checking\" @click=\"resetStepFour\">
清空本步
</button>
</div>
\\\
**修改为:**
\\\html
<div class=\"task-actions\">
<button type=\"button\" class=\"btn-nav\" :disabled=\"checking\" @click=\"resetStepFour\">
清空本步
</button>
</div>
\\\
### 调整对照表
| 文件 | 位置 | 操作 | 保留功能 |
|------|------|------|----------|
| \product-development-factors.vue\ | Step 4 下方 task-actions | 删除\"提交任务\"按钮 | \"清空填写\"按钮 |
| \product-development-process.vue\ | Step 4 下方 task-actions | 删除\"提交任务\"按钮 | \"清空本步\"按钮 |
### 执行检查清单
- [ ] 确认步骤内按钮绑定的 \@click=\"submitTraining\"\ 与 \TrainingTaskToolbar\ 组件内的提交方法名一致
- [ ] 确认顶部 \TrainingTaskToolbar\ 的提交功能正常可用
- [ ] 确认删除后\"清空填写\"/\"清空本步\"按钮仍然保留
- [ ] 删除重复的\"提交任务\"按钮代码
- [ ] 测试提交功能是否正常工作