feat(PersonPickerField): 新增搜索栏标题并优化人员项显示逻辑
新增搜索栏动态标题,根据配置的人员类型自动生成 重构人员名称显示格式,将昵称用括号包裹替代原斜杠分隔方式 移除冗余的人员类型展示元素与对应的CSS样式 整理相关工具函数以简化代码逻辑
Showing
1 changed file
with
23 additions
and
14 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-06-02 15:59:06 | 4 | + * @LastEditTime: 2026-06-05 21:52:12 |
| 5 | * @FilePath: /data-table/src/components/PersonPickerField/MyComponent.vue | 5 | * @FilePath: /data-table/src/components/PersonPickerField/MyComponent.vue |
| 6 | * @Description: 人员筛选控件内部面板 | 6 | * @Description: 人员筛选控件内部面板 |
| 7 | --> | 7 | --> |
| ... | @@ -37,6 +37,7 @@ | ... | @@ -37,6 +37,7 @@ |
| 37 | :style="{ height: '100vh' }" | 37 | :style="{ height: '100vh' }" |
| 38 | > | 38 | > |
| 39 | <div class="search-bar"> | 39 | <div class="search-bar"> |
| 40 | + <div class="search-bar-title">{{ getPickerTitle() }}</div> | ||
| 40 | <div class="search-input-row"> | 41 | <div class="search-input-row"> |
| 41 | <van-field | 42 | <van-field |
| 42 | ref="searchInputRef" | 43 | ref="searchInputRef" |
| ... | @@ -83,15 +84,12 @@ | ... | @@ -83,15 +84,12 @@ |
| 83 | > | 84 | > |
| 84 | <div class="search-result-item__content"> | 85 | <div class="search-result-item__content"> |
| 85 | <div class="search-result-item__title"> | 86 | <div class="search-result-item__title"> |
| 86 | - <span>{{ person.name }}</span> | 87 | + <span>{{ formatPersonDisplayName(person) }}</span> |
| 87 | - <span v-if="person.nickname"> / {{ person.nickname }}</span> | ||
| 88 | <span v-if="isPersonBlacklisted(person)" class="blacklist-badge">黑名单</span> | 88 | <span v-if="isPersonBlacklisted(person)" class="blacklist-badge">黑名单</span> |
| 89 | </div> | 89 | </div> |
| 90 | <div class="search-result-item__meta"> | 90 | <div class="search-result-item__meta"> |
| 91 | <span v-if="person.phone">{{ person.phone }}</span> | 91 | <span v-if="person.phone">{{ person.phone }}</span> |
| 92 | - <span v-if="person.type">{{ person.phone ? ' / ' : '' }}{{ formatPersonType(person.type) }}</span> | ||
| 93 | </div> | 92 | </div> |
| 94 | - <!-- <div class="search-result-item__type">{{ formatPersonType(person.type) }}</div> --> | ||
| 95 | </div> | 93 | </div> |
| 96 | </van-checkbox> | 94 | </van-checkbox> |
| 97 | </div> | 95 | </div> |
| ... | @@ -229,11 +227,20 @@ const formatPersonType = (type) => { | ... | @@ -229,11 +227,20 @@ const formatPersonType = (type) => { |
| 229 | return type || configuredTypeTitle || '人员'; | 227 | return type || configuredTypeTitle || '人员'; |
| 230 | }; | 228 | }; |
| 231 | 229 | ||
| 232 | -const formatPersonTitle = (person) => { | 230 | +const getPickerTitle = () => { |
| 231 | + return `选择${formatPersonType(getConfiguredPersonType())}`; | ||
| 232 | +}; | ||
| 233 | + | ||
| 234 | +const formatPersonDisplayName = (person) => { | ||
| 233 | if (!person.nickname) { | 235 | if (!person.nickname) { |
| 234 | - return `${person.name} / ${formatPersonType(person.type)}`; | 236 | + return person.name; |
| 235 | } | 237 | } |
| 236 | - return `${person.name} / ${person.nickname} / ${formatPersonType(person.type)}`; | 238 | + |
| 239 | + return `${person.name}(${person.nickname})`; | ||
| 240 | +}; | ||
| 241 | + | ||
| 242 | +const formatPersonTitle = (person) => { | ||
| 243 | + return formatPersonDisplayName(person); | ||
| 237 | }; | 244 | }; |
| 238 | 245 | ||
| 239 | const isPersonBlacklisted = (person) => { | 246 | const isPersonBlacklisted = (person) => { |
| ... | @@ -560,6 +567,14 @@ onMounted(() => { | ... | @@ -560,6 +567,14 @@ onMounted(() => { |
| 560 | padding: 0; | 567 | padding: 0; |
| 561 | } | 568 | } |
| 562 | 569 | ||
| 570 | +.search-bar-title { | ||
| 571 | + padding: 0 0.75rem 0.5rem; | ||
| 572 | + font-size: 1.1rem; | ||
| 573 | + font-weight: 600; | ||
| 574 | + color: #c2915f; | ||
| 575 | + line-height: 1.5; | ||
| 576 | +} | ||
| 577 | + | ||
| 563 | .search-input-row { | 578 | .search-input-row { |
| 564 | display: flex; | 579 | display: flex; |
| 565 | align-items: center; | 580 | align-items: center; |
| ... | @@ -627,12 +642,6 @@ onMounted(() => { | ... | @@ -627,12 +642,6 @@ onMounted(() => { |
| 627 | word-break: break-all; | 642 | word-break: break-all; |
| 628 | } | 643 | } |
| 629 | 644 | ||
| 630 | -.search-result-item__type { | ||
| 631 | - margin-top: 0.25rem; | ||
| 632 | - font-size: 0.78rem; | ||
| 633 | - color: #c2915f; | ||
| 634 | -} | ||
| 635 | - | ||
| 636 | .search-result-empty { | 645 | .search-result-empty { |
| 637 | padding: 1rem 0; | 646 | padding: 1rem 0; |
| 638 | text-align: center; | 647 | text-align: center; | ... | ... |
-
Please register or login to post a comment