feat(form, person-picker): 完善表单翻页缓存逻辑,修复人员选择器样式与标签展示
- 为表单翻页意图添加已校验数据缓存 - 调整人员选择器弹窗高度为100vh - 新增人员类型中文标签映射统一展示格式
Showing
2 changed files
with
14 additions
and
5 deletions
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2026-05-25 17:10:00 | 2 | * @Date: 2026-05-25 17:10:00 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2026-05-25 15:27:25 | 4 | + * @LastEditTime: 2026-05-26 10:54:47 |
| 5 | * @FilePath: /data-table/src/components/PersonPickerField/MyComponent.vue | 5 | * @FilePath: /data-table/src/components/PersonPickerField/MyComponent.vue |
| 6 | * @Description: 人员筛选控件内部面板 | 6 | * @Description: 人员筛选控件内部面板 |
| 7 | --> | 7 | --> |
| ... | @@ -34,7 +34,7 @@ | ... | @@ -34,7 +34,7 @@ |
| 34 | v-model:show="showPopup" | 34 | v-model:show="showPopup" |
| 35 | position="bottom" | 35 | position="bottom" |
| 36 | :close-on-click-overlay="false" | 36 | :close-on-click-overlay="false" |
| 37 | - :style="{ height: '90vh' }" | 37 | + :style="{ height: '100vh' }" |
| 38 | > | 38 | > |
| 39 | <div class="search-bar"> | 39 | <div class="search-bar"> |
| 40 | <div class="search-input-row"> | 40 | <div class="search-input-row"> |
| ... | @@ -223,8 +223,16 @@ const syncFieldValue = () => { | ... | @@ -223,8 +223,16 @@ const syncFieldValue = () => { |
| 223 | props.value = fieldValue.value; | 223 | props.value = fieldValue.value; |
| 224 | }; | 224 | }; |
| 225 | 225 | ||
| 226 | +/** | ||
| 227 | + * 人员类型的中文展示统一收口在这里,接口和筛选值仍保持英文原值。 | ||
| 228 | + */ | ||
| 229 | +const PERSON_TYPE_LABEL_MAP = { | ||
| 230 | + volunteer: '义工', | ||
| 231 | + contact: '联系人', | ||
| 232 | +}; | ||
| 233 | + | ||
| 226 | const formatPersonType = (type) => { | 234 | const formatPersonType = (type) => { |
| 227 | - return type || '人员'; | 235 | + return PERSON_TYPE_LABEL_MAP[type] || type || '人员'; |
| 228 | }; | 236 | }; |
| 229 | 237 | ||
| 230 | const formatPersonTitle = (person) => { | 238 | const formatPersonTitle = (person) => { |
| ... | @@ -261,7 +269,7 @@ const typeFilterOptions = computed(() => { | ... | @@ -261,7 +269,7 @@ const typeFilterOptions = computed(() => { |
| 261 | } | 269 | } |
| 262 | 270 | ||
| 263 | const allowedOptions = allowedPersonTypes.value.map((type) => ({ | 271 | const allowedOptions = allowedPersonTypes.value.map((type) => ({ |
| 264 | - text: type, | 272 | + text: formatPersonType(type), |
| 265 | value: type, | 273 | value: type, |
| 266 | })); | 274 | })); |
| 267 | 275 | ... | ... |
| ... | @@ -1192,8 +1192,9 @@ const successHandle = () => { // 表单成功提交后续操作 | ... | @@ -1192,8 +1192,9 @@ const successHandle = () => { // 表单成功提交后续操作 |
| 1192 | 1192 | ||
| 1193 | const onSubmit = async (values) => { // 表单提交回调 | 1193 | const onSubmit = async (values) => { // 表单提交回调 |
| 1194 | // TAG:下一页校验入口 | 1194 | // TAG:下一页校验入口 |
| 1195 | - // 当为“下一页意图”时,不进行真正提交,仅执行翻页并重置校验状态 | 1195 | + // 当为“下一页意图”时,先缓存当前页已校验通过的数据,再执行翻页 |
| 1196 | if (navigate_next_pending?.value) { | 1196 | if (navigate_next_pending?.value) { |
| 1197 | + postData.value = preValidData(values); | ||
| 1197 | await afterValidatedNavigateNext() | 1198 | await afterValidatedNavigateNext() |
| 1198 | return false | 1199 | return false |
| 1199 | } | 1200 | } | ... | ... |
-
Please register or login to post a comment