fix(plan): 修复计划书弹窗按钮显示逻辑
- 添加 hasTemplate prop 控制底部按钮显示状态 - 未找到模板时只显示"关闭"按钮 - 找到模板时显示"取消"和"生成计划书"按钮 - 改进用户体验,避免在无模板时显示无用的按钮 影响文件: - src/components/plan/PlanPopupNew.vue - src/components/plan/PlanFormContainer.vue Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Showing
3 changed files
with
63 additions
and
12 deletions
| ... | @@ -5,6 +5,24 @@ | ... | @@ -5,6 +5,24 @@ |
| 5 | 5 | ||
| 6 | --- | 6 | --- |
| 7 | 7 | ||
| 8 | +## [2026-02-10] - 修复计划书弹窗按钮显示逻辑 | ||
| 9 | + | ||
| 10 | +### 修复 | ||
| 11 | +- **未找到模板时的按钮逻辑**: | ||
| 12 | + - 未找到计划书模板时,底部只显示"关闭"按钮 | ||
| 13 | + - 找到模板时,显示"取消"和"生成计划书"按钮 | ||
| 14 | + - 通过 `hasTemplate` prop 控制按钮显示状态 | ||
| 15 | + | ||
| 16 | +--- | ||
| 17 | + | ||
| 18 | +**详细信息**: | ||
| 19 | +- **影响文件**: src/components/plan/PlanPopupNew.vue, src/components/plan/PlanFormContainer.vue | ||
| 20 | +- **技术栈**: Vue 3, Composition API | ||
| 21 | +- **测试状态**: 待验证 | ||
| 22 | +- **备注**: 改进用户体验,避免在无模板时显示无用的"生成计划书"按钮 | ||
| 23 | + | ||
| 24 | +--- | ||
| 25 | + | ||
| 8 | ## [2026-02-10] - 升级依赖包到最新稳定版本 | 26 | ## [2026-02-10] - 升级依赖包到最新稳定版本 |
| 9 | 27 | ||
| 10 | ### 优化 | 28 | ### 优化 | ... | ... |
| ... | @@ -3,6 +3,7 @@ | ... | @@ -3,6 +3,7 @@ |
| 3 | <PlanPopupNew | 3 | <PlanPopupNew |
| 4 | :visible="props.visible" | 4 | :visible="props.visible" |
| 5 | :title="templateConfig?.name || '计划书'" | 5 | :title="templateConfig?.name || '计划书'" |
| 6 | + :has-template="hasTemplate" | ||
| 6 | @close="close" | 7 | @close="close" |
| 7 | @submit="submit" | 8 | @submit="submit" |
| 8 | > | 9 | > |
| ... | @@ -159,6 +160,14 @@ const currentTemplateComponent = computed(() => { | ... | @@ -159,6 +160,14 @@ const currentTemplateComponent = computed(() => { |
| 159 | }) | 160 | }) |
| 160 | 161 | ||
| 161 | /** | 162 | /** |
| 163 | + * 是否找到模板 | ||
| 164 | + * @description 用于控制底部按钮显示(找到模板:取消/生成计划书;未找到:关闭) | ||
| 165 | + */ | ||
| 166 | +const hasTemplate = computed(() => { | ||
| 167 | + return currentTemplateComponent.value !== null && templateConfig.value?.config !== undefined | ||
| 168 | +}) | ||
| 169 | + | ||
| 170 | +/** | ||
| 162 | * 表单数据 | 171 | * 表单数据 |
| 163 | */ | 172 | */ |
| 164 | const formData = ref({}) | 173 | const formData = ref({}) | ... | ... |
| ... | @@ -31,24 +31,39 @@ | ... | @@ -31,24 +31,39 @@ |
| 31 | <!-- Footer Buttons --> | 31 | <!-- Footer Buttons --> |
| 32 | <div | 32 | <div |
| 33 | v-show="showFooter" | 33 | v-show="showFooter" |
| 34 | - class="p-4 bg-white border-t border-gray-100 flex gap-3 flex-shrink-0 pb-safe" | 34 | + class="p-4 bg-white border-t border-gray-100 flex-shrink-0 pb-safe" |
| 35 | > | 35 | > |
| 36 | + <!-- 未找到模板:只显示关闭按钮 --> | ||
| 36 | <nut-button | 37 | <nut-button |
| 37 | - plain | 38 | + v-if="!hasTemplate" |
| 38 | - type="primary" | ||
| 39 | - class="flex-1 !h-[88rpx] !rounded-[16rpx] !text-[30rpx] !border-blue-600" | ||
| 40 | - @click="handleClose" | ||
| 41 | - > | ||
| 42 | - 取消 | ||
| 43 | - </nut-button> | ||
| 44 | - <nut-button | ||
| 45 | type="primary" | 39 | type="primary" |
| 46 | color="#2563EB" | 40 | color="#2563EB" |
| 47 | - class="flex-1 !h-[88rpx] !rounded-[16rpx] !text-[30rpx]" | 41 | + block |
| 48 | - @click="handleSubmit" | 42 | + class="w-full !h-[88rpx] !rounded-[16rpx] !text-[30rpx]" |
| 43 | + @click="handleClose" | ||
| 49 | > | 44 | > |
| 50 | - 生成计划书 | 45 | + 关闭 |
| 51 | </nut-button> | 46 | </nut-button> |
| 47 | + | ||
| 48 | + <!-- 找到模板:显示取消/生成计划书按钮 --> | ||
| 49 | + <div v-else class="flex gap-3 w-full"> | ||
| 50 | + <nut-button | ||
| 51 | + plain | ||
| 52 | + type="primary" | ||
| 53 | + class="flex-1 !h-[88rpx] !rounded-[16rpx] !text-[30rpx] !border-blue-600" | ||
| 54 | + @click="handleClose" | ||
| 55 | + > | ||
| 56 | + 取消 | ||
| 57 | + </nut-button> | ||
| 58 | + <nut-button | ||
| 59 | + type="primary" | ||
| 60 | + color="#2563EB" | ||
| 61 | + class="flex-1 !h-[88rpx] !rounded-[16rpx] !text-[30rpx]" | ||
| 62 | + @click="handleSubmit" | ||
| 63 | + > | ||
| 64 | + 生成计划书 | ||
| 65 | + </nut-button> | ||
| 66 | + </div> | ||
| 52 | </div> | 67 | </div> |
| 53 | 68 | ||
| 54 | </div> | 69 | </div> |
| ... | @@ -80,6 +95,15 @@ const props = defineProps({ | ... | @@ -80,6 +95,15 @@ const props = defineProps({ |
| 80 | type: String, | 95 | type: String, |
| 81 | default: '计划书', | 96 | default: '计划书', |
| 82 | }, | 97 | }, |
| 98 | + /** | ||
| 99 | + * 是否找到模板 | ||
| 100 | + * @description 如果未找到模板,只显示"关闭"按钮;否则显示"取消/生成计划书"按钮 | ||
| 101 | + * @type {boolean} | ||
| 102 | + */ | ||
| 103 | + hasTemplate: { | ||
| 104 | + type: Boolean, | ||
| 105 | + default: true, | ||
| 106 | + }, | ||
| 83 | }) | 107 | }) |
| 84 | 108 | ||
| 85 | const emit = defineEmits(['update:visible', 'close', 'submit']) | 109 | const emit = defineEmits(['update:visible', 'close', 'submit']) | ... | ... |
-
Please register or login to post a comment