Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
7eda201e 1 parent 31880214

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

新增完整的PersonPickerField人员筛选组件，支持搜索、多选、类型筛选及黑名单展示
封装搜索人员的后端API接口
调整开发环境默认反向代理目标地址至开发服务器
在首页添加临时测试字段方便联调测试
Inline Side-by-side
Showing 6 changed files with 851 additions and 11 deletions
###
# @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 = /
......@@ -23,11 +16,11 @@ VITE_PIN =
# 反向代理服务器地址
# 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 = https://www.wxgzjs.cn/
# VITE_PROXY_TARGET = https://oa.baorongsi.com/
VITE_PROXY_TARGET = https://oa.jcedu.org/
# VITE_PROXY_TARGET = https://oa.jcedu.org/
# PC端地址
VITE_MOBILE_URL = http://localhost:5173/
......
/*
* @Date: 2022-06-17 14:54:29
* @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
* @Description: 组件接口
*/
......@@ -12,6 +12,7 @@ const Api = {
FLOW_DEPT_LIST: '/srv/?a=flow_setting&t=flow_dept_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_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 搜索内容
*/
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 GroupField from '@/components/GroupField/index.vue';
import OrgPickerField from '@/components/OrgPickerField/index.vue';
import PersonPickerField from '@/components/PersonPickerField/index.vue';
import VolunteerGroupField from '@/components/VolunteerGroupField/index.vue';
/**
......@@ -66,6 +67,7 @@ import VolunteerGroupField from '@/components/VolunteerGroupField/index.vue';
* @type appointment 预约控件 AppointmentField
* @type group 组集合输入控件 GroupField
* @type org_picker 树形选择控件 OrgPickerField
* @type person_picker 人员筛选控件 PersonPickerField
* @type volunteer_group 义工组别选择控件 VolunteerGroupField
* @type table 表格控件 TableField
*/
......@@ -183,6 +185,9 @@ export function createComponentType(data) {
if (item.component_props.tag === 'org_picker') {
item.component = OrgPickerField;
}
if (item.component_props.tag === 'person_picker') {
item.component = PersonPickerField;
}
if (item.component_props.tag === 'volunteer_group') {
item.component = VolunteerGroupField;
}
......
<!--
* @Date: 2022-07-18 10:22:22
* @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
* @Description: 首页
-->
......@@ -509,6 +509,25 @@ onMounted(async () => {
// "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);
// TAG: 构建分页组件
if (page_type === 'add' || page_type === undefined || model === 'preview') {
......