workApp/pages/materialCollection/taskOverview/personList.vue

<template>
	<view class="page_body">
		<!-- 头部 -->
		<nav-bar height="220" :title="pageTitle" :onlyTitle="false" :showHeadSearchInput="false" :showFilterPicker="false" :showTabs="false" :showTabBtns="false" rightWidth="0rpx" @GoBack="GoBack">
			<template #tabs_bottom_content>
				<!-- 搜索框单独一行 -->
				<view class="nav_head row_search_box">
					<uni-easyinput class="search_box" v-model="state.searchWord" trim="all" :styles="state.searchInputStyles"
						:placeholderStyle="state.searchInputPlaceholderStyle" placeholder="请输入关键字搜索" @input="HandleSearchInput">
						<template #left>
							<image src="@/static/image/overview/search.png" class="search_icon"></image>
						</template>
					</uni-easyinput>
				</view>
			</template>
		</nav-bar>
		<view class="person_list">
			<view class="list_item" v-for="(item,index) in state.listData" :key="item.id">
				<view class="item_name">{{item.label}}</view>
				<view :class="['btn_del',{'disabled':item.disabled}]" @click="handleDel(item.disabled,index,item.id,item.targetName)">删除</view>
			</view>
		</view>
		<!-- 删除确认框 -->
		<popupDialog ref="popupDelDialogRef" :showFootBorder="true" :content="state.popupDelDialog.content" @DialogConfirm="DialogDelConfirm" />
	</view>
</template>

<script setup>
	import navBar from '@/components/navBar.vue';
	import uniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue';
	import {onLoad} from '@dcloudio/uni-app';
	import {reactive,ref,onUnmounted, computed} from 'vue';
	import popupDialog from '@/components/popupDialog.vue';
	const state = reactive({
		listData:[],
		allListData:[],
		popupDelDialog:{//删除确认框
			content:'',
			index:'',
			id:'',
			targetName:''
		}
	});
	const targetType = ref('');//采集对象 1-按部门，2-按学科，3-按年级，4-按权限，5-按学生
	const popupDelDialogRef = ref('');
	onLoad((option) => {
		const taskTargetsTreeData = uni.getStorageSync('taskTargetsTreeData');
		targetType.value = taskTargetsTreeData.targetType;
		const listData = taskTargetsTreeData?.taskTargets || [];
		state.listData = listData;
		state.allListData = listData;
	})
	const pageTitle = computed(() => {
		const num = state.allListData?.length || 0;
		if(targetType.value == 1){
			return `按部门 已选${num}人`
		}else if(targetType.value == 2){
			return `按学科 已选${num}人`
		}else if(targetType.value == 3){
			return `按年级 已选${num}人`
		}else if(targetType.value == 4){
			return `按权限 已选${num}人`
		}else{
			return ''
		}
	});
	// onUnmounted(()=>{
	// 	uni.removeStorageSync('taskTargetsTreeData');//移除缓存
	// })
	//搜索
	const HandleSearchInput = (e) => {
		const searchWord = (e || '').trim();
		if (!searchWord) {
			state.listData = [...state.allListData]; // 清空恢复全量
			return;
		}
		state.listData = state.allListData.filter(item=>item.label.indexOf(searchWord) > -1)
	}
	//删除
	const handleDel = (disabled,index,id,targetName) => {
		if(disabled){
			return false
		}
		state.popupDelDialog.index = index;
		state.popupDelDialog.id = id;
		state.popupDelDialog.targetName = targetName;
		state.popupDelDialog.content = `确定要删除【${targetName}】吗？`;
		popupDelDialogRef.value.OpenDialog();
	}
	const DialogDelConfirm = () => {
		state.listData.splice(state.popupDelDialog.index,1);
		const key = state.allListData.findIndex(item=>item.id==state.popupDelDialog.id);
		if (key !== -1) {
			state.allListData.splice(key, 1);
		} 
		uni.setStorageSync('taskTargetsTreeData',{
			targetType:Number(targetType.value),
			taskTargets:state.allListData,//已选中
		});
	}
	//返回
	const GoBack = () => {
		uni.navigateBack({
			delta: 1
		});
	}
</script>

<style scoped lang="scss">
	.page_body{
		display: flex;
		flex-direction: column;
		height: 100%;
		min-width: auto;
		.row_search_box{
			height: 96rpx;
			align-items: flex-start;
		}
		.person_list{
			display: flex;
			flex-direction: column;
			width: 100%;
			padding: 0 24rpx;
			box-sizing: border-box;
			flex:1;
			overflow: auto;
			align-items: flex-start;
			.list_item{
				display: flex;
				width: 100%;
				justify-content: space-between;
				padding: 24rpx 0;
				border-bottom: 2rpx solid #F3F3F3;
				.item_name{
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					flex:1;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.btn_del{
					font-weight: 400;
					font-size: 28rpx;
					color: #F56C6C;
					&.disabled{
						color: #C0C4CC;
					}
				}
			}
		}
	}
</style>