feat(person-picker): 新增人员筛选组件并完善开发配置

新增完整的PersonPickerField人员筛选组件，支持搜索、多选、类型筛选及黑名单展示
封装搜索人员的后端API接口
调整开发环境默认反向代理目标地址至开发服务器
在首页添加临时测试字段方便联调测试

-###
- # @Date: 2023-02-13 14:56:34
- # @LastEditors: hookehuyr hookehuyr@gmail.com
- # @LastEditTime: 2025-11-27 16:16:59
- # @FilePath: /data-table/.env.development
- # @Description: 文件描述
-###
 # 资源公共路径
 # 资源公共路径
 VITE_BASE = /
 VITE_BASE = /
 
 
@@ -23,11 +16,11 @@ VITE_PIN =
 
 
 # 反向代理服务器地址
 # 反向代理服务器地址
 # VITE_PROXY_TARGET = https://oa.anxinchashi.com/
 # VITE_PROXY_TARGET = https://oa.anxinchashi.com/
-# VITE_PROXY_TARGET = http://oa-dev.onwall.cn
+VITE_PROXY_TARGET = http://oa-dev.onwall.cn
 # VITE_PROXY_TARGET = http://oa.onwall.cn
 # VITE_PROXY_TARGET = http://oa.onwall.cn
 # VITE_PROXY_TARGET = https://www.wxgzjs.cn/
 # VITE_PROXY_TARGET = https://www.wxgzjs.cn/
 # VITE_PROXY_TARGET = https://oa.baorongsi.com/
 # VITE_PROXY_TARGET = https://oa.baorongsi.com/
-VITE_PROXY_TARGET = https://oa.jcedu.org/
+# VITE_PROXY_TARGET = https://oa.jcedu.org/
 
 
 # PC端地址
 # PC端地址
 VITE_MOBILE_URL = http://localhost:5173/
 VITE_MOBILE_URL = http://localhost:5173/

 /*
 /*
  * @Date: 2022-06-17 14:54:29
  * @Date: 2022-06-17 14:54:29
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-06-05 10:12:06
+ * @LastEditTime: 2026-05-25 13:48:13
  * @FilePath: /data-table/src/api/component.js
  * @FilePath: /data-table/src/api/component.js
  * @Description: 组件接口
  * @Description: 组件接口
  */
  */
@@ -12,6 +12,7 @@ const Api = {
   FLOW_DEPT_LIST: '/srv/?a=flow_setting&t=flow_dept_list',
   FLOW_DEPT_LIST: '/srv/?a=flow_setting&t=flow_dept_list',
   FLOW_ROLE_LIST: '/srv/?a=flow_setting&t=flow_role_list',
   FLOW_ROLE_LIST: '/srv/?a=flow_setting&t=flow_role_list',
   SEARCH_USER_DEPT_ROLE: '/srv/?a=flow_setting&t=search_user_dept_role',
   SEARCH_USER_DEPT_ROLE: '/srv/?a=flow_setting&t=search_user_dept_role',
+  SEARCH_PERSON_PICKER: '/srv/?a=person_picker_search',
 }
 }
 
 
 /**
 /**
@@ -42,3 +43,14 @@ export const getFlowRoleListAPI = (params) => fn(fetch.get(Api.FLOW_ROLE_LIST, p
  * @param: word 搜索内容
  * @param: word 搜索内容
  */
  */
 export const searchUserDeptRoleAPI = (params) => fn(fetch.get(Api.SEARCH_USER_DEPT_ROLE, params));
 export const searchUserDeptRoleAPI = (params) => fn(fetch.get(Api.SEARCH_USER_DEPT_ROLE, params));
+
+/**
+ * @description: 搜索人员
+ * @param: form_code 表单code
+ * @param: field_name 字段名
+ * @param: keyword 搜索关键字
+ * @param: type volunteer=义工、contact=联系人
+ * @param: page 页码，从0开始
+ * @param: limit 每页数量
+ */
+export const searchPersonPickerAPI = (params) => fn(fetch.get(Api.SEARCH_PERSON_PICKER, params));

+<!--
+ * @Date: 2026-05-25 17:10:00
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2026-05-25 15:27:25
+ * @FilePath: /data-table/src/components/PersonPickerField/MyComponent.vue
+ * @Description: 人员筛选控件内部面板
+-->
+<template>
+  <div class="person-picker-field-inner">
+    <div class="select-person-box" @click="openPopup">
+      <template v-if="confirmedPersons.length">
+        <div
+          v-for="person in confirmedPersons"
+          :key="person.id"
+          :class="['select-person-item', { 'select-person-item--blacklist': isPersonBlacklisted(person) }]"
+        >
+          <van-icon name="contact-o" />&nbsp;
+          <div class="person-display-text">
+            <span>{{ formatPersonTitle(person) }}</span>
+            <span v-if="isPersonBlacklisted(person)" class="blacklist-badge">黑名单</span>
+          </div>
+        </div>
+      </template>
+      <div v-else class="select-person-placeholder">
+        {{ props.component_props.readonly ? '暂无已选人员' : '点击搜索人员' }}
+      </div>
+    </div>
+
+    <van-popup
+      v-model:show="showPopup"
+      position="bottom"
+      :close-on-click-overlay="false"
+      :style="{ height: '90vh' }"
+    >
+      <div class="search-bar">
+        <div class="search-input-row">
+          <van-field
+            ref="searchInputRef"
+            v-model="searchKeyword"
+            class="search-input-field"
+            placeholder="请输入姓名、法名、手机号或证件号"
+            :border="false"
+            @keyup.enter="onSearch"
+          >
+            <template #button>
+              <div class="search-bar-actions">
+                <van-button size="small" type="primary" :loading="searching" @click="onSearch">搜索</van-button>
+                <van-button size="small" plain type="default" @click="onClearSearch">清空</van-button>
+              </div>
+            </template>
+          </van-field>
+        </div>
+        <div v-if="typeFilterOptions.length > 1" class="type-filter-row">
+          <div
+            v-for="option in typeFilterOptions"
+            :key="option.value || 'all'"
+            :class="['type-filter-chip', { 'type-filter-chip--active': selectedTypeFilter === option.value }]"
+            @click="onSelectSearchType(option)"
+          >
+            {{ option.text }}
+          </div>
+        </div>
+      </div>
+
+      <div class="selected-box" style="margin: 1rem;">
+        <div v-for="person in draftPersons" :key="person.id" class="selected-item">
+          <div class="selected-item__text">
+            <span>{{ formatPersonTitle(person) }}</span>
+            <span v-if="isPersonBlacklisted(person)" class="blacklist-badge blacklist-badge--light">黑名单</span>
+          </div>
+          <van-icon name="close" @click="removeDraftPerson(person)" />
+        </div>
+      </div>
+
+      <div v-if="hasSearched" class="search-result-container">
+        <van-list
+          v-model:loading="loading"
+          :finished="finished"
+          :finished-text="finishedTextStatus ? '没有更多了' : ''"
+          @load="onLoad"
+        >
+          <van-checkbox-group v-model="searchResultChecked" @change="onSearchResultChange">
+            <div v-for="person in searchResults" :key="person.id" class="search-result-item">
+              <van-checkbox
+                :name="person.id"
+                shape="square"
+                icon-size="14px"
+                :checked-color="styleColor.baseColor"
+              >
+                <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 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.idcard">{{ person.phone ? ' / ' : '' }}{{ person.idcard }}</span>
+                  </div>
+                  <div class="search-result-item__type">{{ formatPersonType(person.type) }}</div>
+                </div>
+              </van-checkbox>
+            </div>
+          </van-checkbox-group>
+        </van-list>
+
+        <div v-if="emptyStatus" class="search-result-empty">暂无搜索结果</div>
+      </div>
+
+      <div class="popup-footer">
+        <van-row gutter="10" style="padding: 0 10px 1rem;">
+          <van-col span="12">
+            <van-button block round type="default" @click="onCancelClick">取消</van-button>
+          </van-col>
+          <van-col span="12">
+            <van-button block round type="primary" @click="onConfirmClick">确定</van-button>
+          </van-col>
+        </van-row>
+      </div>
+    </van-popup>
+  </div>
+</template>
+
+<script setup>
+import { inject, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useCustomFieldValue } from '@vant/use';
+import Cookies from 'js-cookie';
+import _ from 'lodash';
+import { showToast } from 'vant';
+import { styleColor } from '@/constant.js';
+import { searchPersonPickerAPI } from '@/api/component.js';
+
+const props = inject('props');
+const $route = useRoute();
+
+const showPopup = ref(false);
+const searching = ref(false);
+const hasSearched = ref(false);
+const loading = ref(false);
+const finished = ref(false);
+const finishedTextStatus = ref(true);
+const emptyStatus = ref(false);
+const searchInputRef = ref(null);
+const searchKeyword = ref('');
+const searchResults = ref([]);
+const searchResultChecked = ref([]);
+const confirmedPersons = ref([]);
+const draftPersons = ref([]);
+const fieldValue = ref([]);
+const searchPage = ref(0);
+const searchLimit = ref(Number(props.component_props.limit) || 20);
+const searchTotal = ref(0);
+const selectedTypeFilter = ref('');
+
+/**
+ * 将人员接口记录整理成组件内部统一结构。
+ * 这里直接按后端约定字段读取，只补齐展示时会用到的空字符串。
+ *
+ * @param {Object} person 人员记录
+ * @returns {{ id: number, name: string, nickname: string, phone: string, idcard: string, type: string, is_blacklist: boolean }}
+ */
+const mapPersonRecord = (person) => {
+  return {
+    id: Number(person.id),
+    name: person.name || '',
+    nickname: person.nickname || '',
+    phone: person.phone || '',
+    idcard: person.idcard || '',
+    type: person.type || '',
+    is_blacklist: normalizeBlacklistFlag(person.is_blacklist),
+  };
+};
+
+/**
+ * 兼容接口和历史缓存里可能出现的布尔、数字、字符串黑名单标识。
+ *
+ * @param {boolean|number|string} value 黑名单标识
+ * @returns {boolean}
+ */
+const normalizeBlacklistFlag = (value) => {
+  if (typeof value === 'string') {
+    const normalizedValue = value.trim().toLowerCase();
+    return normalizedValue === 'true' || normalizedValue === '1';
+  }
+
+  return value === true || value === 1;
+};
+
+/**
+ * 组件默认值可能来自历史数据或 cookie，这里保留最小限度的字符串反序列化。
+ *
+ * @param {Array|String} value 已选人员列表
+ * @returns {Array}
+ */
+const normalizeStoredPersonList = (value) => {
+  const source = typeof value === 'string' ? JSON.parse(value || '[]') : (value || []);
+
+  return source.map(mapPersonRecord);
+};
+
+/**
+ * 后端现在明确返回 person_types 数组，这里只做去重和空值过滤。
+ *
+ * @param {string[]} personTypes 人员类型数组
+ * @returns {string[]}
+ */
+const normalizePersonTypes = (personTypes = []) => {
+  return _.uniq(personTypes
+    .map((item) => String(item || '').trim())
+    .filter(Boolean));
+};
+
+/**
+ * 将已确认人员同步到自定义字段值，保证表单提交拿到的是最终确认结果。
+ */
+const syncFieldValue = () => {
+  fieldValue.value = _.cloneDeep(confirmedPersons.value);
+  props.value = fieldValue.value;
+};
+
+const formatPersonType = (type) => {
+  return type || '人员';
+};
+
+const formatPersonTitle = (person) => {
+  if (!person.nickname) {
+    return `${person.name} / ${formatPersonType(person.type)}`;
+  }
+  return `${person.name} / ${person.nickname} / ${formatPersonType(person.type)}`;
+};
+
+const isPersonBlacklisted = (person) => {
+  return Boolean(person?.is_blacklist);
+};
+
+/**
+ * 当前字段允许搜索的人员类型列表，直接取后端配置。
+ */
+const allowedPersonTypes = computed(() => {
+  return normalizePersonTypes(props.component_props.person_types);
+});
+
+/**
+ * 当只允许一种人员类型时，默认锁定这个筛选值。
+ */
+const defaultSearchType = computed(() => {
+  return allowedPersonTypes.value.length === 1 ? allowedPersonTypes.value[0] : '';
+});
+
+/**
+ * 根据后端返回的 person_types 生成顶部筛选项。
+ */
+const typeFilterOptions = computed(() => {
+  if (!allowedPersonTypes.value.length) {
+    return [];
+  }
+
+  const allowedOptions = allowedPersonTypes.value.map((type) => ({
+    text: type,
+    value: type,
+  }));
+
+  if (allowedOptions.length === 1) {
+    return allowedOptions;
+  }
+
+  return [{ text: '全部类型', value: '' }, ...allowedOptions];
+});
+
+const getSearchType = () => {
+  return defaultSearchType.value || selectedTypeFilter.value || '';
+};
+
+/**
+ * 将结果列表限制在字段允许的类型范围内，同时叠加当前顶部筛选值。
+ *
+ * @param {Array} personList 人员结果列表
+ * @returns {Array}
+ */
+const filterPersonListByType = (personList) => {
+  const searchType = getSearchType();
+
+  return personList.filter((person) => {
+    if (allowedPersonTypes.value.length && !allowedPersonTypes.value.includes(person.type)) {
+      return false;
+    }
+
+    if (searchType && person.type !== searchType) {
+      return false;
+    }
+
+    return true;
+  });
+};
+
+/**
+ * 根据当前草稿已选项回填搜索结果勾选状态，保证翻页后勾选表现一致。
+ */
+const syncSearchChecked = () => {
+  const selectedIdSet = new Set(draftPersons.value.map((person) => person.id));
+  searchResultChecked.value = searchResults.value
+    .filter((person) => selectedIdSet.has(person.id))
+    .map((person) => person.id);
+};
+
+/**
+ * 重置搜索面板状态；打开弹层、取消和清空搜索时都会复用这套逻辑。
+ */
+const resetSearchState = () => {
+  hasSearched.value = false;
+  searching.value = false;
+  loading.value = false;
+  finished.value = false;
+  finishedTextStatus.value = true;
+  emptyStatus.value = false;
+  searchKeyword.value = '';
+  searchResults.value = [];
+  searchResultChecked.value = [];
+  searchPage.value = 0;
+  searchTotal.value = 0;
+};
+
+const openPopup = async () => {
+  if (props.component_props.readonly) {
+    return false;
+  }
+
+  draftPersons.value = _.cloneDeep(confirmedPersons.value);
+  resetSearchState();
+  showPopup.value = true;
+};
+
+const onCancelClick = () => {
+  showPopup.value = false;
+  draftPersons.value = _.cloneDeep(confirmedPersons.value);
+  resetSearchState();
+};
+
+const writeDraftCookie = () => {
+  const currentValue = _.cloneDeep(fieldValue.value);
+  const existingCookie = Cookies.get($route.query.code);
+
+  if (existingCookie) {
+    const obj = JSON.parse(existingCookie);
+    obj[props.key] = currentValue;
+    Cookies.set($route.query.code, JSON.stringify(obj), { expires: 1 });
+  } else {
+    Cookies.set($route.query.code, JSON.stringify({ [props.key]: currentValue }), { expires: 1 });
+  }
+};
+
+const onConfirmClick = () => {
+  confirmedPersons.value = _.cloneDeep(draftPersons.value);
+  syncFieldValue();
+  writeDraftCookie();
+  showPopup.value = false;
+  resetSearchState();
+};
+
+const removeDraftPerson = (person) => {
+  draftPersons.value = draftPersons.value.filter((item) => item.id !== person.id);
+  syncSearchChecked();
+};
+
+/**
+ * 勾选变化时只处理当前搜索结果页，避免跨页已选项被误删。
+ *
+ * @param {number[]} checkedIds 当前结果页勾选的人员 id
+ */
+const onSearchResultChange = (checkedIds) => {
+  const checkedIdSet = new Set(checkedIds);
+  const currentSearchIdSet = new Set(searchResults.value.map((person) => person.id));
+
+  // 先移除当前搜索页中被取消勾选的人员，避免跨页已选项被误删。
+  draftPersons.value = draftPersons.value.filter((person) => {
+    if (!currentSearchIdSet.has(person.id)) {
+      return true;
+    }
+    return checkedIdSet.has(person.id);
+  });
+
+  const selectedFromCurrentSearch = searchResults.value.filter((person) => checkedIdSet.has(person.id));
+  draftPersons.value = _.uniqBy([...draftPersons.value, ...selectedFromCurrentSearch], 'id');
+};
+
+const onClearSearch = () => {
+  resetSearchState();
+};
+
+const onSelectSearchType = async (action) => {
+  selectedTypeFilter.value = action.value;
+
+  if (searchKeyword.value.trim() && hasSearched.value) {
+    await onSearch();
+  }
+};
+
+/**
+ * 组装人员搜索接口参数。
+ *
+ * @param {number} page 页码，从 0 开始
+ * @returns {{ form_code: string, field_name: string, keyword: string, page: number, limit: number, type?: string, force_back?: string }}
+ */
+const buildSearchParams = (page) => {
+  const params = {
+    form_code: $route.query.code,
+    field_name: props.key,
+    keyword: searchKeyword.value.trim(),
+    page,
+    limit: searchLimit.value,
+  };
+
+  const searchType = getSearchType();
+  if (searchType) {
+    params.type = searchType;
+  }
+  if ($route.query.force_back) {
+    params.force_back = $route.query.force_back;
+  }
+
+  return params;
+};
+
+/**
+ * 拉取单页搜索结果，并转换成组件内部统一结构。
+ * 组件接口封装在报错时会返回 false，这里需要兜底，避免搜索面板直接抛运行时异常。
+ *
+ * @param {number} page 页码，从 0 开始
+ * @returns {Promise<{ count: number, data: Array }>}
+ */
+const fetchSearchPage = async (page) => {
+  const result = await searchPersonPickerAPI(buildSearchParams(page));
+  if (!result || !Array.isArray(result.data)) {
+    return {
+      count: 0,
+      data: [],
+    };
+  }
+
+  const remoteResults = filterPersonListByType(result.data.map(mapPersonRecord));
+
+  return {
+    count: Number(result.count) || remoteResults.length,
+    data: remoteResults,
+  };
+};
+
+/**
+ * 合并分页结果并去重，避免上拉加载时重复插入同一人员。
+ *
+ * @param {Array} data 当前页结果
+ */
+const mergeSearchResults = (data) => {
+  searchResults.value = _.uniqBy([...searchResults.value, ...data], 'id');
+  emptyStatus.value = Object.is(searchResults.value.length, 0);
+  finishedTextStatus.value = !emptyStatus.value;
+  syncSearchChecked();
+};
+
+/**
+ * 根据接口总数和当前页结果更新无限滚动结束状态。
+ *
+ * @param {Array} pageData 当前页结果
+ * @param {number} total 接口返回总数
+ */
+const updateFinishedStatus = (pageData, total) => {
+  searchTotal.value = total;
+
+  if (!pageData.length) {
+    finished.value = true;
+    return;
+  }
+
+  if (searchResults.value.length >= total) {
+    finished.value = true;
+    return;
+  }
+
+  if (pageData.length < searchLimit.value) {
+    finished.value = true;
+  }
+};
+
+/**
+ * 执行一次新的搜索，并重置分页状态。
+ */
+const onSearch = async () => {
+  const keyword = searchKeyword.value.trim();
+  if (!keyword) {
+    showToast('请输入搜索关键词');
+    return;
+  }
+
+  searching.value = true;
+  hasSearched.value = true;
+  loading.value = true;
+  finished.value = false;
+  finishedTextStatus.value = true;
+  emptyStatus.value = false;
+  searchResults.value = [];
+  searchResultChecked.value = [];
+  searchPage.value = 0;
+  searchTotal.value = 0;
+
+  try {
+    const firstPageResult = await fetchSearchPage(0);
+    mergeSearchResults(firstPageResult.data);
+    updateFinishedStatus(firstPageResult.data, firstPageResult.count);
+  } finally {
+    loading.value = false;
+    searching.value = false;
+  }
+};
+
+/**
+ * 加载下一页搜索结果。
+ */
+const onLoad = async () => {
+  if (!hasSearched.value || finished.value) {
+    loading.value = false;
+    return;
+  }
+
+  const nextPage = searchPage.value + 1;
+
+  try {
+    const nextPageResult = await fetchSearchPage(nextPage);
+    mergeSearchResults(nextPageResult.data);
+    updateFinishedStatus(nextPageResult.data, nextPageResult.count);
+    searchPage.value = nextPage;
+  } finally {
+    loading.value = false;
+  }
+};
+
+useCustomFieldValue(() => fieldValue.value);
+
+onMounted(() => {
+  confirmedPersons.value = normalizeStoredPersonList(props.component_props.default);
+  draftPersons.value = _.cloneDeep(confirmedPersons.value);
+  selectedTypeFilter.value = defaultSearchType.value || '';
+  syncFieldValue();
+});
+</script>
+
+<style lang="less" scoped>
+.person-picker-field-inner {
+  width: 100%;
+}
+
+.select-person-box,
+.selected-box {
+  min-height: 4rem;
+  border: 1px dashed #dfdfdf;
+  margin: 1rem 0;
+  overflow: auto;
+  border-radius: 5px;
+  padding: 0.5rem;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+
+.select-person-item,
+.selected-item {
+  margin-right: 5px;
+  margin-bottom: 5px;
+  font-size: 0.85rem;
+  padding: 5px 8px;
+  background-color: #c2915f;
+  color: #fff;
+  min-height: 1.2rem;
+  display: flex;
+  align-items: center;
+  border-radius: 4px;
+}
+
+.selected-item {
+  max-width: 100%;
+}
+
+.selected-item__text {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  margin-right: 0.25rem;
+}
+
+.select-person-item--blacklist {
+  background-color: #a46943;
+}
+
+.person-display-text {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+}
+
+.select-person-placeholder {
+  color: #999;
+  font-size: 0.9rem;
+  line-height: 1.8rem;
+}
+
+.search-bar {
+  margin: 1rem 0;
+  padding: 0;
+}
+
+.search-input-row {
+  display: flex;
+  align-items: center;
+}
+
+.search-input-field {
+  width: 100%;
+}
+
+.search-bar-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.type-filter-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 0.35rem;
+  padding-left: 0.75rem;
+}
+
+.type-filter-chip {
+  padding: 0.15rem 0.1rem;
+  color: #888;
+  font-size: 0.82rem;
+  line-height: 1.2rem;
+}
+
+.type-filter-chip--active {
+  color: #c2915f;
+  font-weight: 600;
+}
+
+.search-result-container {
+  height: calc(90vh - 17rem);
+  overflow: auto;
+  padding: 0 1rem 6rem;
+}
+
+.search-result-item {
+  padding: 0.75rem 0;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.search-result-item__content {
+  padding-left: 0.5rem;
+  white-space: normal;
+}
+
+.search-result-item__title {
+  font-size: 0.9rem;
+  color: #333;
+  line-height: 1.4;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+}
+
+.search-result-item__meta {
+  margin-top: 0.25rem;
+  font-size: 0.78rem;
+  color: #888;
+  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;
+  color: #999;
+  font-size: 0.9rem;
+}
+
+.blacklist-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 0.35rem;
+  border-radius: 999px;
+  font-size: 0.7rem;
+  line-height: 1.35rem;
+  color: #fff;
+  background-color: #d84d4d;
+}
+
+.blacklist-badge--light {
+  background-color: rgba(216, 77, 77, 0.16);
+  color: #d84d4d;
+}
+
+.popup-footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background: #fff;
+}
+
+:deep(.van-field__body) {
+  border: var(--border-style);
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+}
+</style>

+<!--
+ * @Date: 2026-05-25 17:10:00
+ * @LastEditors: Codex
+ * @LastEditTime: 2026-05-25 17:10:00
+ * @FilePath: /data-table/src/components/PersonPickerField/index.vue
+ * @Description: 人员筛选控件
+-->
+<template>
+  <div v-if="HideShow" class="person-picker-field-page">
+    <div :class="[isGroup ? 'group-label' : 'label']">
+      <span v-if="item.component_props.disabled_show"><van-icon name="https://cdn.ipadbiz.cn/custom_form/icon/closed-eye1.png" /></span>
+      <span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
+      <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
+    </div>
+
+    <van-field :name="item.key" :rules="rules" style="padding: 0 1rem;">
+      <template #input>
+        <my-component />
+      </template>
+    </van-field>
+  </div>
+</template>
+
+<script setup>
+import { useRoute } from 'vue-router';
+import MyComponent from './MyComponent.vue';
+
+const $route = useRoute();
+const props = defineProps({
+  item: Object,
+});
+
+// 注入子组件属性，复用现有字段组件的表单接入方式。
+provide('props', props.item);
+
+// 隐藏显示
+const HideShow = computed(() => {
+  return !props.item.component_props.disabled;
+});
+
+// 只读显示-流程模式
+const ReadonlyShow = computed(() => {
+  return ($route.query.page_type === 'flow' || $route.query.page_type === 'edit') && !props.item.component_props.readonly;
+});
+
+// 集合组标识
+const isGroup = computed(() => {
+  return props.item.component_props.is_field_group;
+});
+
+const required = props.item.component_props.required;
+const validator = (val) => {
+  if (!required) {
+    return true;
+  }
+  return Array.isArray(val) && val.length > 0;
+};
+const validatorMessage = (val, rule) => {
+  if (required && (!Array.isArray(val) || !val.length)) {
+    return '选择不能为空';
+  }
+};
+const rules = [{ validator, message: validatorMessage }];
+</script>
+
+<style lang="less" scoped>
+.person-picker-field-page {
+  .label {
+    padding: 1rem 1rem 0 1rem;
+    font-size: 0.9rem;
+    font-weight: bold;
+  }
+
+  .group-label {
+    padding: 0.75rem 0 0.75rem 1rem;
+    font-size: 0.9rem;
+    font-weight: bold;
+    background-color: #f9f9f9;
+    color: #666;
+    border-top: 1px solid #eee;
+    border-bottom: 1px solid #eee;
+
+    span {
+      color: red;
+    }
+  }
+}
+</style>

@@ -33,6 +33,7 @@ import AppointmentField from '@/components/AppointmentField/index.vue';
 import CustomField from '@/components/CustomField/index.vue';
 import CustomField from '@/components/CustomField/index.vue';
 import GroupField from '@/components/GroupField/index.vue';
 import GroupField from '@/components/GroupField/index.vue';
 import OrgPickerField from '@/components/OrgPickerField/index.vue';
 import OrgPickerField from '@/components/OrgPickerField/index.vue';
+import PersonPickerField from '@/components/PersonPickerField/index.vue';
 import VolunteerGroupField from '@/components/VolunteerGroupField/index.vue';
 import VolunteerGroupField from '@/components/VolunteerGroupField/index.vue';
 
 
 /**
 /**
@@ -66,6 +67,7 @@ import VolunteerGroupField from '@/components/VolunteerGroupField/index.vue';
  * @type appointment 预约控件 AppointmentField
  * @type appointment 预约控件 AppointmentField
  * @type group 组集合输入控件 GroupField
  * @type group 组集合输入控件 GroupField
  * @type org_picker 树形选择控件 OrgPickerField
  * @type org_picker 树形选择控件 OrgPickerField
+ * @type person_picker 人员筛选控件 PersonPickerField
  * @type volunteer_group 义工组别选择控件 VolunteerGroupField
  * @type volunteer_group 义工组别选择控件 VolunteerGroupField
  * @type table 表格控件 TableField
  * @type table 表格控件 TableField
  */
  */
@@ -183,6 +185,9 @@ export function createComponentType(data) {
     if (item.component_props.tag === 'org_picker') {
     if (item.component_props.tag === 'org_picker') {
       item.component = OrgPickerField;
       item.component = OrgPickerField;
     }
     }
+    if (item.component_props.tag === 'person_picker') {
+      item.component = PersonPickerField;
+    }
     if (item.component_props.tag === 'volunteer_group') {
     if (item.component_props.tag === 'volunteer_group') {
       item.component = VolunteerGroupField;
       item.component = VolunteerGroupField;
     }
     }

 <!--
 <!--
  * @Date: 2022-07-18 10:22:22
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-11-27 16:25:10
+ * @LastEditTime: 2026-05-25 13:58:52
  * @FilePath: /data-table/src/views/index.vue
  * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
  * @Description: 首页
 -->
 -->
@@ -509,6 +509,25 @@ onMounted(async () => {
   //   "interaction_type": "h5edit"
   //   "interaction_type": "h5edit"
   // })
   // })
 
 
+  // 临时测试字段：直接挂到页面渲染链里，方便联调人员搜索多选组件。
+  page_form.push({
+    tag: 'person_picker',
+    name: 'person_picker_temp',
+    index: 999999,
+    label: '人员筛选（临时测试）',
+    unique: false,
+    default: [],
+    disabled: false,
+    field_id: 999999,
+    readonly: false,
+    required: false,
+    data_type: 'text',
+    field_name: 'field_person_picker_temp',
+    placeholder: '请输入关键词后搜索人员',
+    interaction_type: 'h5edit',
+    person_type: '',
+  });
+
   formData.value = formatData(page_form);
   formData.value = formatData(page_form);
   // TAG: 构建分页组件
   // TAG: 构建分页组件
   if (page_type === 'add' || page_type === undefined || model === 'preview') {
   if (page_type === 'add' || page_type === undefined || model === 'preview') {