workApp/pages/notice/publish/personList.vue

<template>
	<view class="page_person_list">
		<CommonHeader :title="headerTitle" @back="goBack"></CommonHeader>

		<SearchBar v-model="searchWord" @search="handleSearch" :isFixed="true" :top="searchBarTop + 'rpx'" :border="false"></SearchBar>

		<scroll-view scroll-y class="person_list" :style="{ paddingTop: contentPaddingTop + 'rpx' }">
			<view v-for="(person, index) in filteredList" :key="person.userId || person.id" class="person_item">
				<view class="person_info">
					<text class="person_name">{{ person.thirdName || person.name }}</text>
					<text class="person_code">({{ person.thirdCode || person.userAccount || '' }})</text>
				</view>
				<view class="person_action" @click="openDeleteModal(index)">
					<text class="delete_text">删除</text>
				</view>
			</view>

			<view v-if="filteredList.length === 0" class="empty_state">
				<text class="empty_text">暂无人员</text>
			</view>
		</scroll-view>

		<ConfirmModal
			:visible="showDeleteModal"
			title="提示"
			:content="`确定要删除【${deletePersonName}】吗？`"
			cancelText="取消"
			confirmText="确定"
			@cancel="closeDeleteModal"
			@confirm="confirmDelete"
		></ConfirmModal>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import CommonHeader from '@/components/common-header.vue';
import SearchBar from '@/components/search-bar.vue';
import ConfirmModal from '@/components/confirm-modal.vue';
import { useSafeArea } from '@/common/safeArea';

const { statusBarHeight, initSafeArea } = useSafeArea();

const HEADER_CONTENT_HEIGHT = 174;
const SEARCHBAR_HEIGHT = 60;
const SPACING = 24;

const searchBarTop = computed(() => statusBarHeight.value + HEADER_CONTENT_HEIGHT);
const contentPaddingTop = computed(() => statusBarHeight.value + HEADER_CONTENT_HEIGHT + SEARCHBAR_HEIGHT + SPACING);

const searchWord = ref('');

const personList = ref([]);
const objectTypeLabel = ref('');

const showDeleteModal = ref(false);
const deleteIndex = ref(-1);
const deletePersonName = ref('');

const filteredList = computed(() => {
	console.log(personList.value)
	if (!searchWord.value) return personList.value;
	const keyword = searchWord.value.toLowerCase();
	return personList.value.filter(person => {
		const name = (person.thirdName || person.name || '').toLowerCase();
		const code = (person.thirdCode || person.userAccount || '').toLowerCase();
		return name.includes(keyword) || code.includes(keyword);
	});
	
});

const headerTitle = computed(() => {
	return `${objectTypeLabel.value || ''} 已选${personList.value.length}人`;
});

const handleSearch = (keyword) => {
	searchWord.value = keyword;
};

const openDeleteModal = (index) => {
	const person = personList.value[index];
	deletePersonName.value = person.thirdName || person.name || '';
	deleteIndex.value = index;
	showDeleteModal.value = true;
};

const closeDeleteModal = () => {
	showDeleteModal.value = false;
	deleteIndex.value = -1;
	deletePersonName.value = '';
};

const confirmDelete = () => {
	if (deleteIndex.value >= 0) {
		personList.value.splice(deleteIndex.value, 1);
	}
	closeDeleteModal();
};

const goBack = () => {
	uni.setStorageSync('personListResult', JSON.stringify({
		users: personList.value
	}));
	uni.navigateBack();
};

onMounted(() => {
	initSafeArea();

	const data = uni.getStorageSync('personListData');
	if (data) {
		try {
			const parsed = JSON.parse(data);
			const users = parsed.users || [];
			const seen = new Set();
			personList.value = users.filter(user => {
				const userId = user.userId || user.id;
				if (!userId || seen.has(userId)) return false;
				seen.add(userId);
				return true;
			});
			objectTypeLabel.value = parsed.tab || '';
		} catch (e) {
			console.error('解析人员列表数据失败:', e);
		}
	}
});
</script>

<style lang="scss">
.page_person_list {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.person_list {
	flex: 1;
	padding-left: 24rpx;
	padding-right: 24rpx;
	padding-bottom: 24rpx;
	box-sizing: border-box;
}

.person_item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 86rpx;
	border-bottom: 2rpx solid #F3F3F3;
	.person_info {
		display: flex;
		align-items: center;

		.person_name {
			font-size: 28rpx;
			color: #666;
		}

		.person_code {
			font-size: 28rpx;
			color: #666;
			margin-left: 16rpx;
		}
	}

	.person_action {
		.delete_text {
			font-size: 28rpx;
			color: #F56C6C;
		}
	}
}

.empty_state {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 100rpx 0;

	.empty_text {
		font-size: 28rpx;
		color: #999999;
	}
}
</style>