hookehuyr

feat(PersonPickerField): 新增搜索栏标题并优化人员项显示逻辑

新增搜索栏动态标题,根据配置的人员类型自动生成
重构人员名称显示格式,将昵称用括号包裹替代原斜杠分隔方式
移除冗余的人员类型展示元素与对应的CSS样式
整理相关工具函数以简化代码逻辑
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;
......