hookehuyr

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

新增搜索栏动态标题,根据配置的人员类型自动生成
重构人员名称显示格式,将昵称用括号包裹替代原斜杠分隔方式
移除冗余的人员类型展示元素与对应的CSS样式
整理相关工具函数以简化代码逻辑
<!--
* @Date: 2026-05-25 17:10:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2026-06-02 15:59:06
* @LastEditTime: 2026-06-05 21:52:12
* @FilePath: /data-table/src/components/PersonPickerField/MyComponent.vue
* @Description: 人员筛选控件内部面板
-->
......@@ -37,6 +37,7 @@
:style="{ height: '100vh' }"
>
<div class="search-bar">
<div class="search-bar-title">{{ getPickerTitle() }}</div>
<div class="search-input-row">
<van-field
ref="searchInputRef"
......@@ -83,15 +84,12 @@
>
<div class="search-result-item__content">
<div class="search-result-item__title">
<span>{{ person.name }}</span>
<span v-if="person.nickname"> / {{ person.nickname }}</span>
<span>{{ formatPersonDisplayName(person) }}</span>
<span v-if="isPersonBlacklisted(person)" class="blacklist-badge">黑名单</span>
</div>
<div class="search-result-item__meta">
<span v-if="person.phone">{{ person.phone }}</span>
<span v-if="person.type">{{ person.phone ? ' / ' : '' }}{{ formatPersonType(person.type) }}</span>
</div>
<!-- <div class="search-result-item__type">{{ formatPersonType(person.type) }}</div> -->
</div>
</van-checkbox>
</div>
......@@ -229,11 +227,20 @@ const formatPersonType = (type) => {
return type || configuredTypeTitle || '人员';
};
const formatPersonTitle = (person) => {
const getPickerTitle = () => {
return `选择${formatPersonType(getConfiguredPersonType())}`;
};
const formatPersonDisplayName = (person) => {
if (!person.nickname) {
return `${person.name} / ${formatPersonType(person.type)}`;
return person.name;
}
return `${person.name} / ${person.nickname} / ${formatPersonType(person.type)}`;
return `${person.name}(${person.nickname})`;
};
const formatPersonTitle = (person) => {
return formatPersonDisplayName(person);
};
const isPersonBlacklisted = (person) => {
......@@ -560,6 +567,14 @@ onMounted(() => {
padding: 0;
}
.search-bar-title {
padding: 0 0.75rem 0.5rem;
font-size: 1.1rem;
font-weight: 600;
color: #c2915f;
line-height: 1.5;
}
.search-input-row {
display: flex;
align-items: center;
......@@ -627,12 +642,6 @@ onMounted(() => {
word-break: break-all;
}
.search-result-item__type {
margin-top: 0.25rem;
font-size: 0.78rem;
color: #c2915f;
}
.search-result-empty {
padding: 1rem 0;
text-align: center;
......