ks-app-employment-service/packageB/priority/recordsManagement.vue

<template>
    <AppLayout :title="title" :show-bg-image="false" @onScrollBottom="getDataList('add')">
        <view class="main-list" :style="getBackgroundStyle('k.png')">
			<view class="list-top">
				<view class="list-title">
					<text>筛选条件</text>
					<view class="title-line"></view>
				</view>
				<view class="title-right button-sp-area">
					<button class="mini-btn search-box-btn" type="primary" size="mini" @click="handleSearch">查询</button>
					<button class="mini-btn reset-box-btn" type="default" size="mini" @click="handleReset">重置</button>
				</view>
			</view>
			
            <view class="search-container">
                <!-- 人员姓名 -->
                <view class="search-item">
                  <text class="label">人员姓名：</text>
				  <uni-easyinput v-model="formData.name" placeholder="请输入人员姓名"></uni-easyinput>
                </view>
            
                <!-- 身份证号 -->
                <view class="search-item">
                  <text class="label">身份证号：</text>
				  <uni-easyinput v-model="formData.idCard" placeholder="请输入身份证号"></uni-easyinput>
                </view>
            
                <!-- 帮扶类型（下拉选择） -->
                <view class="search-item">
                  <text class="label">帮扶类型：</text>
				  <uni-data-select v-model="formData.taskType" :localdata="taskTypeOptions" placeholder="请选择帮扶类型" @change="onTaskTypeChange"></uni-data-select>
                </view>
            
                <!-- 帮扶人员 -->
                <view class="search-item">
                  <text class="label">帮扶人员：</text>
				  <uni-easyinput v-model="formData.createByName" placeholder="请输入帮扶人员姓名"></uni-easyinput>
                </view>
            
                <!-- 所属区域（下拉选择） -->
                <view class="search-item">
                  <text class="label">所属区域：</text>
				  <uni-data-picker ref="picker" class="picker" placeholder="请选择所属区域" popup-title="请选择所属区域" :localdata="regions" v-model="formData.deptTags"
					  @change="onchange" >
				  </uni-data-picker>
                </view>
            
                <!-- 开始时间 -->
                <view class="search-item" v-if="false">
                  <text class="label">开始时间：</text>
				  <uni-datetime-picker type="date" placeholder="请选择开始时间"  v-model="formData.startTime" @maskClick="onStartTimeChange" />
                </view>
            
                <!-- 结束时间 -->
                <view class="search-item" v-if="false">
                  <text class="label">结束时间：</text>
				  <uni-datetime-picker type="date" placeholder="请选择结束时间"  v-model="formData.endTime" @maskClick="onEndTimeChange" />
                </view>
              </view>
        </view>
		<view class="main-list" :style="getBackgroundStyle('k.png')">
			<view class="list-top">
				<view class="list-title">
					<text>帮扶记录列表</text>
					<view class="title-line" style="left: 70rpx;"></view>
				</view>
				<view class="title-total">
					共<text class="total-num">{{totalNum}}</text>条记录
				</view>
			</view>
			<view class="list-box" v-if="dataList.length>0">
				<view class="con-box" v-for="(item,index) in dataList" :key="index">
					<view class="form-title">
						<view class="form-name">
							{{item.name}}
						</view>
						<view class="form-type">
							{{getTaskTypeLabelByValue(item.task_type)}}
						</view>
					</view>
					<view class="form-item" v-if="item.phone">
						<view class="item-left">
							<image class="item-img" :src="baseUrl+'/dispatch/tele.png'" mode=""></image>
							<view class="item-label">
								联系电话：
							</view>
						</view>
						<view class="item-right">
							{{item.phone}}
						</view>
					</view>
					<view class="form-item" v-if="item.id_card">
						<view class="item-left">
							<image class="item-img" :src="baseUrl+'/dispatch/num.png'" mode=""></image>
							<view class="item-label">
								身份证号：
							</view>
						</view>
						<view class="item-right">
							{{item.id_card}}
						</view>
					</view>
					<view class="form-item" v-if="item.dept_name">
						<view class="item-left">
							<image class="item-img" :src="baseUrl+'/dispatch/base.png'" mode=""></image>
							<view class="item-label">
								所属区域：
							</view>
						</view>
						<view class="item-right">
							{{item.dept_name}}
						</view>
					</view>
					<view class="form-item" v-if="item.create_by_name">
						<view class="item-left">
							<image class="item-img" :src="baseUrl+'/dispatch/person.png'" mode=""></image>
							<view class="item-label">
								帮扶人员：
							</view>
						</view>
						<view class="item-right">
							{{item.create_by_name}}
						</view>
					</view>
					<view class="form-item" v-if="item.create_by_dept_name">
						<view class="item-left">
							<image class="item-img" :src="baseUrl+'/dispatch/help.png'" mode=""></image>
							<view class="item-label">
								帮扶单位：
							</view>
						</view>
						<view class="item-right">
							{{item.create_by_dept_name}}
						</view>
					</view>
					<view class="form-item" v-if="item.follow_date">
						<view class="item-left">
							<image class="item-img" :src="baseUrl+'/dispatch/date.png'" mode=""></image>
							<view class="item-label">
								帮扶日期：
							</view>
						</view>
						<view class="item-right">
							{{item.follow_date}}
						</view>
					</view>
					<view class="form-item" v-if="item.next_contact_date">
						<view class="item-left">
							<image class="item-img" :src="baseUrl+'/dispatch/next.png'" mode=""></image>
							<view class="item-label">
								下次联系：
							</view>
						</view>
						<view class="item-right">
							{{item.next_contact_date}}
						</view>
					</view>
					<view class="form-btns">
						<button class="mini-btn form-box-btn detail-btn"  size="mini" v-if="false">详情</button>
						<button class="mini-btn form-box-btn follow-btn"  size="mini" @click="goFollow(item)">跟进</button>
						<button class="mini-btn form-box-btn recommend-btn"  size="mini" @click="goRecommend(item)">智能推荐</button>
					</view>
				</view>
			</view>
		    <empty v-else pdTop="200"></empty>
		</view>
    </AppLayout>
</template>

<script setup>
import { inject, ref, reactive,onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
const { $api, navTo, navBack } = inject('globalFunction');
import config from "@/config.js"

// state
const title = ref('');
const initialForm = {
  name: '',
  idCard: '',
  taskType: '',
  createByName: '',
//   helpArea: [],
//   startTime: '',
//   endTime: '',
//   deptId:'',
  deptTags:''
}
const formData = reactive({ ...initialForm });
const taskTypeOptions=ref([])
const dataList=ref([])
const pageSize=ref(10)
const pageNum=ref(1)
const totalNum=ref(0)
const baseUrl = config.imgBaseUrl
const getBackgroundStyle = (imageName) => ({
    backgroundImage: `url(${baseUrl}/dispatch/${imageName})`,
    backgroundSize: 'cover',      // 覆盖整个容器
    backgroundPosition: 'center', // 居中
    backgroundRepeat: 'no-repeat'
});
const trainVideoImgUrl=config.trainVideoImgUrl
const picker = ref(null)


// 所属区域选项（可根据实际替换为动态数据）
const regions = ref([])

// 事件处理
const onTaskTypeChange = (e) => {
	formData.taskType=e
}
const onStartTimeChange = (e) => {
  formData.startTime = e.detail.value
}

const onEndTimeChange = (e) => {
  formData.endTime = e.detail.value
}

const handleSearch = () => {
  // 在这里调用接口进行搜索
  getDataList('refresh')
}
const handleReset = () =>{
	 Object.assign(formData, initialForm);
	 getDataList('refresh')
}
onMounted(async () => {
  // await loadLevelData('201');
});
onLoad(() => {
	// let token=uni.getStorageSync('fourLevelLinkage-token')
	// if(token){
	// 	$api.myRequest("/system/user/login/user/info", {}, "GET", 9100, {
	// 		Authorization: `Bearer ${uni.getStorageSync("fourLevelLinkage-token")}`
	// 	}).then(async (resData) => {

	// 		await loadLevelData(resData.sysUser.dept.deptId);
	// 		getDictionary()
	// 		getDataList('refresh');
	// 	});
	// }else{
	// 	navTo('/packageB/login2');
	// }
});
function getDictionary(){
	$api.myRequest('/system/public/dict/data/type/assist_task_type').then((resData) => {
		if(resData && resData.code == 200){
			resData.data.forEach(item=>{
				const obj = {
				    value: item.dictValue,
				    text: item.dictLabel
				}
				taskTypeOptions.value.push(obj)
			})
		}
	});
}
function getTaskTypeLabelByValue(value) {
	if (!Array.isArray(taskTypeOptions.value)) {
	    return ''
	  }
	  const item = taskTypeOptions.value.find(item => item.value === String(value))
	  return item ? item.text : '暂无帮扶类型'
}
 // 加载某一级的数据（parentId 为空表示根）
async function loadLevelData(parentId,node) {
    let header = {
		'Authorization': uni.getStorageSync('fourLevelLinkage-token'),
		'Content-Type': "application/x-www-form-urlencoded"
	};
	let params = { parentId };

	try {
		const resData = await $api.myRequest('/dispatch/dept/list', params, 'get', 9100, header);
		if(resData.data.length==0){
			picker.value.hide()
			return
		}
		const formatted = (resData.data || []).map(item => ({
			text: item.deptName, 
			value: item.tags,
			deptId: item.deptId,
			children: [] 
		}));
		if(node){
			injectChildren(parentId, formatted);
		}else{
			regions.value=formatted
		}
	} catch (error) {
		console.error("加载部门数据失败:", error);
		uni.showToast({ title: '加载失败', icon: 'none' });
	}
}
// 将子级数据注入到对应的父节点
function injectChildren(parentValue, childrenData) {
    const findAndInject = (nodes) => {
		for (let node of nodes) {
			if (node.deptId === parentValue) {
				// 如果 children 已存在且非空，避免重复加载
				if (!node.children || node.children.length === 0) {
					node.children = childrenData;
				}
				return true;
			}
			if (node.children && node.children.length > 0) {
				if (findAndInject(node.children)) return true;
			}
		}
		return false;
	}

	findAndInject(regions.value);
  // 强制更新
}
// 当用户选择时触发（注意：change 在每级选择后都会触发）
function onchange(e) {
	const selectedValues = e.detail.value;
	// formData.deptId=selectedValues.map(item => item.value).join(',');
	if (selectedValues.length === 0) return;
	// 获取最后一级选中的 value
	const lastSelectedValue = selectedValues[selectedValues.length - 1];
	// 查找该节点是否有 children，如果没有则尝试加载
	const node = findNodeByValue(regions.value, lastSelectedValue);
	if (node && (!node.children || node.children.length === 0)) {
		// 检查接口是否还有下一级（可通过接口返回判断，或先尝试加载）
		// 这里我们直接尝试加载下一级
		loadLevelData(node.deptId , node);
		picker.value.show()
	}
}
// 工具函数：根据 value 查找节点
function findNodeByValue(nodes, value) {
	for (let node of nodes) {
		if (node.value === value.value) {
			return node;
		}
		if (node.children && node.children.length > 0) {
			const found = findNodeByValue(node.children, value);
			if (found) return found;
		}
	}
	return null;
}
function getDeptOptions(){
	let header={
		'Authorization':uni.getStorageSync('fourLevelLinkage-token'),
		'Content-Type': "application/x-www-form-urlencoded"
	}
	let params={
		parentId:''
	}
	$api.myRequest('/dispatch/dept/list', params,'get',9100,header).then((resData) => {
	});
}
function getDataList(type = 'add') {
	let maxPage=Math.ceil(totalNum.value/pageSize.value)
	let params=({...formData})
	let header={
		'Authorization':uni.getStorageSync('fourLevelLinkage-token'),
		'Content-Type': "application/x-www-form-urlencoded"
	}
    if (type === 'refresh') {
        pageNum.value = 1;
		params.pageSize=pageSize.value
		params.pageNum=pageNum.value
		$api.myRequest('/dispatch/assist/records/pageRecords', params,'get',9100,header).then((resData) => {
			if(resData&&resData.code == 200){
				dataList.value=resData.rows
				totalNum.value=resData.total
			}
		});
    }
    if (type === 'add' && pageNum.value < maxPage) {
        pageNum.value += 1;
		params.pageSize=pageSize.value
		params.pageNum=pageNum.value
		$api.myRequest('/dispatch/assist/records/pageRecords', params,'get',9100,header).then((resData) => {
			dataList.value=dataList.value.concat(resData.rows)
		});
		
	}
}
function goFollow(item) {
    navTo(`/packageB/priority/helpFollow?task_id=${item.task_id}&person_id=${item.person_id}&&name=${item.name}&&taskType=${getTaskTypeLabelByValue(item.task_type)}`);
}
//智能推荐
const goRecommend = (item) => {
  navTo('/packageB/priority/recommend');
}
</script>

<style lang="stylus" scoped>

image
  height: 100%
  width: 100%

.main-list
  background-color: #ffffff
  padding: 20rpx 30rpx 28rpx 30rpx
  margin: 30rpx 30rpx
  box-shadow: 0px 3px 20px 0px rgba(0,105,234,0.1)
  border-radius: 12px
.list-top
  display: flex
  align-items: center
  justify-content: space-between
.list-title
  font-weight: bold
  font-size: 36rpx
  color: #404040
  position: relative

.title-line
  position: absolute
  bottom: -10rpx
  left: 36rpx
  width: 70rpx
  height: 8rpx
  background: linear-gradient(90deg, #FFAD58 0%, #FF7A5B 100%)
  border-radius: 4rpx
.search-box-btn
  border-radius: 32rpx !important
  background: #3088FF !important
  margin-right: 16rpx
.reset-box-btn
  border-radius: 32rpx !important
  background: #02B44D
  color: #fff
.search-container
  padding: 20rpx 0rpx 0rpx 0rpx
.title-total
  font-size: 24rpx
  color: #999999
.total-num
  color: #3088FF
  margin-left: 4rpx
  margin-right: 4rpx
  font-weight: bold
  font-size: 26rpx
.search-item
  display: flex
  align-items: center
  margin-bottom: 30rpx

.label
  width: 160rpx
  font-size: 28rpx
  color: #404040
  flex-shrink: 0

.input,
.picker
  background: #FFFFFF
  flex: 1
  min-width: 0
.list-box
  margin-top: 40rpx
.con-box
  background: #fff
  padding: 20rpx
  box-shadow: 0px 0px 6rpx 0px rgba(0,71,200,0.16)
  border-radius: 24rpx
  border: 1rpx solid #EDF5FF
  margin-top: 30rpx
.form-title
  display: flex
  align-items: center

.form-name
  font-weight: bold
  font-size: 32rpx
  color: #595959
  margin-right:16rpx
.form-type
  border-radius: 8rpx;
  border: 2rpx solid #FF7D26;
  font-size: 24rpx
  color: #F1690E
  padding: 4rpx 10rpx
.form-item
  display: flex
  align-items: center
  justify-content: space-between
  margin-top: 30rpx
.item-left
  display: flex
  align-items: center
.item-img
  width: 26rpx
  height: 26rpx
  margin-right: 10rpx
.item-label
  font-size: 26rpx
  color: #B3B3B3
  width: 130rpx
.item-right
  font-size: 26rpx
  color: #737373
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap
.form-btns
  margin-top:30rpx
.form-box-btn
  border-radius: 50rpx !important
  margin-right: 24rpx
  padding: 0rpx 40rpx
.detail-btn
  background: #EDF5FF
  border: 1px solid #3088FF
  font-size: 28rpx
  color: #3088FF
.follow-btn
  background: #EEF9F3
  border: 1px solid #00933E
  font-size: 28rpx
  color: #00933E
.recommend-btn
  background: linear-gradient(92deg, #0DCCFF 0%, #4760FF 100%)
  font-size: 28rpx
  color: #FFFFFF
</style>