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

<template>
    <AppLayout :title="title" :show-bg-image="false" >
		<view class="page-container" v-if="showView=='main'">
			<scroll-view :scroll-y="true" class="nearby-scroll" @scrolltolower="scrollBottom" lower-threshold="50">
				<view class="info-box">
					<view class="info-item info-line">
						<view class="">
							<uni-icons type="contact" color="#175CE9" size="34"></uni-icons>
						</view>
						<view class="info-label">
							帮扶任务总数
						</view>
						<view class="info-value">
							{{ stats.taskCount }}
						</view>
					</view>
					<view class="info-item info-line">
						<view class="">
							<uni-icons type="info" color="#175CE9" size="34"></uni-icons>
						</view>
						<view class="info-label">
							待分配任务
						</view>
						<view class="info-value">
							{{ stats.pendingCount }}
						</view>
					</view>
					<view class="info-item">
						<view class="">
							<uni-icons type="checkbox" color="#175CE9" size="34"></uni-icons>
						</view>
						<view class="info-label">
							已分配任务
						</view>
						<view class="info-value">
							{{ stats.allocatedCount }}
						</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"></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.taskName" placeholder="请输入任务名称"></uni-easyinput>
						</view>
						<!-- 任务类型 -->
						<view class="search-item">
						  <text class="label">任务类型：</text>
						  <uni-data-select :key="1" v-model="formData.taskType" :localdata="taskTypeOptions" placeholder="请选择任务类型" @change="onTaskTypeChange"></uni-data-select>
						</view>
						<!-- 优先级 -->
						<view class="search-item">
						  <text class="label">优先级：</text>
						  <uni-data-select :key="2" v-model="formData.priority" :localdata="priorityOptions" placeholder="请选择优先级" @change="onPriorityChange"></uni-data-select>
						</view>
						<!-- 创建时间 -->
						<view class="search-item">
						  <text class="label">创建时间：</text>
						  <uni-datetime-picker v-model="filterTimeRange" type="datetimerange" rangeSeparator="至" @change="filterTimeRangeChange" />
						</view>	
						<!-- 分配状态 -->
						<view class="search-item">
						  <text class="label">分配状态：</text>
						  <uni-data-select :key="3" v-model="formData.allocationStatus" :localdata="allocationStatusOptions" placeholder="请选择分配状态" @change="onAllocationStatusChange"></uni-data-select>
						</view>
						<!-- 执行区域 -->
						<view class="search-item">
						  <text class="label">执行区域：</text>
						  <uni-data-select :key="4" v-model="formData.executeDeptId" :localdata="executeDeptOptions" placeholder="请选择区域" @change="onExecuteDeptChange"></uni-data-select>
						</view>
					</view>
				</view>
				<view class="main-list" :style="getBackgroundStyle('k.png')">
					<view class="">
						<button class="mini-btn search-box-btn" type="primary" size="mini" @click="creatTask">创建任务</button>
					</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.taskName}}
								</view>
								<view class="form-type">
									优先级：{{item.priority}}
								</view>
							</view>
							<view class="form-item" >
								<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.taskAllocation.goalPersonCount}}
								</view>
							</view>
							<view class="form-item">
								<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.taskType}}
								</view>
							</view>
							<view class="form-item" >
								<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.taskAllocation.allocationStatus}}
								</view>
							</view>
							<view class="form-item" >
								<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.taskAllocation.executeDeptName}}
								</view>
							</view>
							<view class="form-item" >
								<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.createTime}}
								</view>
							</view>
							<view class="form-item" >
								<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.taskAllocation.deadline}}
								</view>
							</view>
							<view class="form-btns">
								<button class="mini-btn form-box-btn detail-btn"  size="mini" @click="goDetail(item)">详情</button>
								<button class="mini-btn form-box-btn follow-btn"  size="mini" @click="goTarget(item)">目标人员</button>
								<button class="mini-btn form-box-btn recommend-btn" v-if="item.taskAllocation.allocationStatus == '待分配'"  size="mini" @click="goRecommend(item)">分配</button>
							</view>
						</view>
					</view>
				    <empty v-else pdTop="200"></empty>
				</view>
			</scroll-view>
		</view>
<!-- 		<view class="" v-else-if="showView=='add'" >
			<task-created :taskTypeOptions="taskTypeOptions" :priorityOptions="priorityOptions" :executeDeptOptions="executeDeptOptions" @update:show-view="handleShowViewChange"></task-created>
		</view> -->
		<view class="" v-else-if="showView=='detail'" >
			<task-detail :currentItem="currentItem" :taskTypeOptions="taskTypeOptions" :priorityOptions="priorityOptions" :executeDeptOptions="executeDeptOptions" :allocationStatusOptions="allocationStatusOptions" @update:show-view="handleShowViewChange"></task-detail>
		</view>
		<view class="" v-else-if="showView=='targetPersonnel'" >
			<target-personnel :currentItem="currentItem" :taskName="taskName" @update:show-view="handleShowViewChange"></target-personnel>
		</view>
    </AppLayout>
</template>

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

const showView=ref('main')
const title = ref('');
const stats=ref({})
const formData = reactive({
    taskName: '',
    taskType: '',
    priority: '',
    createTimeStart: null,
    createTimeEnd: null,
    allocationStatus: '',
    executeDeptId: '',
    pageNum: 1,
    pageSize: 10
})
const currentItem=ref('')
const taskName=ref('')
const filterTimeRange=ref([])
const totalNum=ref(0)
const dataList=ref([])
const taskTypeOptions=ref([])
const priorityOptions=ref([])
const allocationStatusOptions=ref([])
const executeDeptOptions=ref([])
const baseUrl = config.imgBaseUrl
const getBackgroundStyle = (imageName) => ({
    backgroundImage: `url(${baseUrl}/dispatch/${imageName})`,
    backgroundSize: 'cover',      // 覆盖整个容器
    backgroundPosition: 'center', // 居中
    backgroundRepeat: 'no-repeat'
});
function listNotParam(){
	let header={
		'Authorization':uni.getStorageSync('Padmin-Token'),
		'Content-Type': "application/x-www-form-urlencoded"
	}
	let params={}
	$api.myRequest('/dispatch/dept/listNotParam',params,'get',9100,header).then((resData) => {
		if(resData && resData.code == 200){
			resData.data.forEach(item=>{
				const obj = {
				    value: item.deptId,
				    text: item.deptName,
					ancestors:item.ancestors
				}
				executeDeptOptions.value.push(obj)
			})
		}
	});
}
function statisticTask(){
	let header={
		'Authorization':uni.getStorageSync('Padmin-Token'),
		'Content-Type': "application/x-www-form-urlencoded"
	}
	let params={}
	$api.myRequest('/dispatch/assist/task/statisticTask',params,'get',9100,header).then((resData) => {
		stats.value=resData.data
	});
}
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)
			})
		}
	});
	$api.myRequest('/system/public/dict/data/type/assist_task_priority').then((resData) => {
		if(resData && resData.code == 200){
			resData.data.forEach(item=>{
				const obj = {
				    value: item.dictValue,
				    text: item.dictLabel
				}
				priorityOptions.value.push(obj)
			})
		}
	});
	$api.myRequest('/system/public/dict/data/type/assist_task_allocation_status').then((resData) => {
		if(resData && resData.code == 200){
			resData.data.forEach(item=>{
				const obj = {
				    value: item.dictValue,
				    text: item.dictLabel
				}
				allocationStatusOptions.value.push(obj)
			})
		}
	});
}
function getabelByValue(value,arr) {
	if (!Array.isArray(arr.value)) {
	    return ''
	}
	const item = arr.value.find(item => item.value === String(value))
	return item ? item.text : '暂无'
}
function onTaskTypeChange(e){
	formData.taskType=e
}
function onPriorityChange(e){
	formData.priority=e
}
function onAllocationStatusChange(e){
	formData.allocationStatus=e
}
function filterTimeRangeChange(e){
	formData.createTimeStart=e[0]
	formData.createTimeEnd=e[1]
}
function onExecuteDeptChange(e){
	formData.executeDeptId=e
}
function handleSearch(){
	dataList.value=[]
	getDataList()
}
function getDataList(){
	let header={
		'Authorization':uni.getStorageSync('Padmin-Token'),
		'Content-Type': "application/x-www-form-urlencoded"
	}
	$api.myRequest('/dispatch/assist/task/pageList',formData,'get',9100,header).then((resData) => {
		resData.rows.forEach(item=>{
			item.priority=getabelByValue(item.priority,priorityOptions)
			item.taskType=getabelByValue(item.taskType,taskTypeOptions)
			item.taskAllocation.allocationStatus=getabelByValue(item.taskAllocation.allocationStatus,allocationStatusOptions)
		})
		totalNum.value=resData.total
		dataList.value=dataList.value.concat(resData.rows)
		
	});
}
const handleReset = () => {
	dataList.value=[]
	formData.taskName=''
	formData.taskType=''
	formData.priority=''
	formData.createTimeStart=null
	formData.createTimeEnd=null
	formData.allocationStatus=''
	formData.executeDeptId=''
	formData.pageNum=1
	formData.pageSize=10
	filterTimeRange.value=[]
	getDataList()
}
function handleShowViewChange(newValue) {
  showView.value = newValue
  dataList.value=[]
  getDataList()
}
const creatTask = () => {
	navTo('/packageB/priority/taskCreated');
}
function goRecommend(item){
	navTo('/packageB/priority/allocate?id='+item.id);
}
function goDetail(item){
	currentItem.value=item.id
	showView.value='detail'
}
function goTarget(item){
	currentItem.value=item.taskAllocation.id
	taskName.value=item.taskName
	showView.value='targetPersonnel'
}
function scrollBottom(){
	if(formData.pageNum<totalNum.value/formData.pageSize){
		formData.pageNum++
		getDataList()
	}
}
onLoad((options) => {
	listNotParam()
	statisticTask()
	runAsyncTasks(options)
});
const runAsyncTasks = async (options) => {
  await getDictionary()
  await getDataList()
}

</script>

<style lang="stylus" scoped>
image
  height: 100%
  width: 100%
.page-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--window-top)); /* 如果 AppLayout 有 header，需减去 */
  /* 或者简单用：height: 100vh; */
}
.nearby-scroll
    // 使用flex布局让scroll-view自适应高度，占据剩余空间
  flex: 1
  // overflow: hidden;
.info-box
  margin: 30rpx 30rpx
  background: linear-gradient(0deg, #D9ECFF 0%, #F0F7FF 100%)
  border-radius: 20rpx
  padding: 40rpx 0
  display: flex
  align-items: center
.info-line
  border-right: 2rpx solid #B7D6FF
.info-item
  display: flex
  flex-direction: column
  align-items: center
  justify-content: center
  width: 50%
.info-label
  font-size: 26rpx
  color: #6E7E9B
  margin-bottom: 20rpx
.info-value
  font-weight: bold
  font-size: 28rpx
  color: #3D61AC
.main-list
  background-color: #ffffff
  padding: 20rpx 20rpx 28rpx 20rpx
  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: 70rpx
  width: 70rpx
  height: 8rpx
  background: linear-gradient(90deg, #FFAD58 0%, #FF7A5B 100%)
  border-radius: 4rpx
.title-total
  font-size: 24rpx
  color: #999999
.total-num
  color: #3088FF
  margin-left: 4rpx
  margin-right: 4rpx
  font-weight: bold
  font-size: 26rpx

.list-box
  margin-top: 40rpx

:deep(.uni-forms-item__label)
  width: 194rpx !important
  font-size: 28rpx;
  color: #404040;
  
.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
.search-box-btn
  border-radius: 32rpx !important
  background: #3088FF !important
  margin-right: 16rpx
.reset-box-btn
  border-radius: 32rpx !important
  background: #02B44D
  color: #fff
.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>