fix(CollapsibleCalendar): 修复课程名称过长导致的布局问题
为课程名称添加最大宽度和省略号显示,防止过长文本破坏布局 ``` ```msg feat(CheckinDetailPage): 添加提交按钮的禁用状态逻辑 根据表单验证条件动态禁用提交按钮,防止无效提交
Showing
2 changed files
with
32 additions
and
3 deletions
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2025-01-25 15:34:17 | 2 | * @Date: 2025-01-25 15:34:17 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-12-11 09:31:06 | 4 | + * @LastEditTime: 2025-12-11 13:55:33 |
| 5 | * @FilePath: /mlaj/src/components/ui/CollapsibleCalendar.vue | 5 | * @FilePath: /mlaj/src/components/ui/CollapsibleCalendar.vue |
| 6 | * @Description: 可折叠日历组件 | 6 | * @Description: 可折叠日历组件 |
| 7 | --> | 7 | --> |
| ... | @@ -129,7 +129,7 @@ const showCoursePicker = ref(false) | ... | @@ -129,7 +129,7 @@ const showCoursePicker = ref(false) |
| 129 | const selectedCourseText = ref('全部作业') | 129 | const selectedCourseText = ref('全部作业') |
| 130 | const courseColumns = [ | 130 | const courseColumns = [ |
| 131 | { text: '全部作业', value: '' }, | 131 | { text: '全部作业', value: '' }, |
| 132 | - { text: '语文语文语文语文语文语文', value: 'chinese' }, | 132 | + { text: '语文语文语文语文语文语文数学英语化学化学化学化学英语', value: 'chinese' }, |
| 133 | { text: '数学', value: 'math' }, | 133 | { text: '数学', value: 'math' }, |
| 134 | { text: '英语', value: 'english' }, | 134 | { text: '英语', value: 'english' }, |
| 135 | { text: '物理', value: 'physics' }, | 135 | { text: '物理', value: 'physics' }, |
| ... | @@ -367,6 +367,9 @@ defineExpose({ | ... | @@ -367,6 +367,9 @@ defineExpose({ |
| 367 | color: #4caf50; | 367 | color: #4caf50; |
| 368 | font-weight: 600; | 368 | font-weight: 600; |
| 369 | white-space: nowrap; | 369 | white-space: nowrap; |
| 370 | + max-width: 10rem; | ||
| 371 | + overflow: hidden; | ||
| 372 | + text-overflow: ellipsis; | ||
| 370 | } | 373 | } |
| 371 | 374 | ||
| 372 | .calendar-arrow { | 375 | .calendar-arrow { | ... | ... |
| ... | @@ -131,7 +131,7 @@ | ... | @@ -131,7 +131,7 @@ |
| 131 | 131 | ||
| 132 | <!-- 提交按钮 --> | 132 | <!-- 提交按钮 --> |
| 133 | <div v-if="!taskDetail.is_finish || isEditMode" class="submit-area"> | 133 | <div v-if="!taskDetail.is_finish || isEditMode" class="submit-area"> |
| 134 | - <van-button type="primary" block size="large" :loading="uploading" @click="handleSubmit"> | 134 | + <van-button type="primary" block size="large" :loading="uploading" :disabled="isSubmitDisabled" @click="handleSubmit"> |
| 135 | {{ isEditMode ? '保存修改' : '提交' }} | 135 | {{ isEditMode ? '保存修改' : '提交' }} |
| 136 | </van-button> | 136 | </van-button> |
| 137 | </div> | 137 | </div> |
| ... | @@ -311,6 +311,32 @@ const confirmAddTarget = () => { | ... | @@ -311,6 +311,32 @@ const confirmAddTarget = () => { |
| 311 | dynamicFormFields.value.forEach(field => field.value = '') | 311 | dynamicFormFields.value.forEach(field => field.value = '') |
| 312 | } | 312 | } |
| 313 | 313 | ||
| 314 | +/** | ||
| 315 | + * 是否禁用提交按钮 | ||
| 316 | + */ | ||
| 317 | +const isSubmitDisabled = computed(() => { | ||
| 318 | + // 1. 校验作业选择 | ||
| 319 | + if (!selectedTaskValue.value) return true | ||
| 320 | + | ||
| 321 | + // 2. 计数打卡特定校验 | ||
| 322 | + if (taskType.value === 'count') { | ||
| 323 | + // 必须选择至少一个对象 | ||
| 324 | + if (selectedTargets.value.length === 0) return true | ||
| 325 | + // 次数必须大于0 | ||
| 326 | + if (!countValue.value || countValue.value <= 0) return true | ||
| 327 | + return false | ||
| 328 | + } | ||
| 329 | + | ||
| 330 | + // 3. 普通打卡校验 | ||
| 331 | + if (activeType.value === 'text') { | ||
| 332 | + // 文本打卡:必须填写内容且长度不少于10个字符 | ||
| 333 | + return !message.value.trim() || message.value.trim().length < 10 | ||
| 334 | + } else { | ||
| 335 | + // 其他类型:必须有文件 | ||
| 336 | + return fileList.value.length === 0 | ||
| 337 | + } | ||
| 338 | +}) | ||
| 339 | + | ||
| 314 | const handleSubmit = async () => { | 340 | const handleSubmit = async () => { |
| 315 | // 1. 校验作业选择 | 341 | // 1. 校验作业选择 |
| 316 | if (!selectedTaskValue.value) { | 342 | if (!selectedTaskValue.value) { | ... | ... |
-
Please register or login to post a comment