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

<template>
    <AppLayout :title="title" :show-bg-image="false" >
        <view class="main-list" :style="getBackgroundStyle('k.png')" v-if="showVue=='main'">
			<view class="list-top">
				<view class="list-title">
					<text>帮扶任务分配</text>
					<view class="title-line"></view>
				</view>
			</view>
            <view class="form-container">
                <uni-forms ref="formRef" v-model="formData" :rules="rules" validate-trigger="submit" >
                  <uni-forms-item label="任务名称：" name="taskName" required >
					  <uni-easyinput v-model="formData.taskName" placeholder="请输入任务名称"></uni-easyinput>
                  </uni-forms-item>
				  <uni-forms-item label="目标人员："  required >
				  	   <button class="choice-btn" @click="choicePerson">从帮扶人员库选择目标人员</button>
				  </uni-forms-item>
				  <uni-forms-item label="目标人数：" name="goalPersonCount" required>
				  		<uni-easyinput v-model="formData.goalPersonCount" disabled></uni-easyinput>
				  </uni-forms-item>
				  <uni-forms-item label="执行区域：" name="executeDeptId" required >
				  	  <uni-data-select v-model="formData.executeDeptId" placeholder="请选择执行区域" :localdata="executeDeptOptions" @change="executeDeptChange"></uni-data-select>
				  </uni-forms-item>
				  <uni-forms-item label="截止时间：" name="deadline" required>
				  		<uni-datetime-picker class="picker-value" type="date" placeholder="请选择截止时间"  v-model="formData.deadline" @change="onDateChange" />
				  </uni-forms-item>
                  <uni-forms-item label="分配说明：" name="allocationNote" >
					  <uni-easyinput type="textarea" v-model="formData.allocationNote" placeholder="请输入分配说明"></uni-easyinput>
                  </uni-forms-item>
                </uni-forms>
                <!-- 按钮组 -->
                <view class="button-group">
				  <button class="btn submit-btn" @click="handleSubmit">确定</button>
                  <button class="btn reset-btn"  @click="handleCancel">取消</button>
                </view>
			</view>
        </view>
		<view class="" v-else>
			<target-personel-choice :allocationId="formData.allocationId" @update:show-vue="handleShowVueChange"></target-personel-choice>
		</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 targetPersonelChoice from './components/targetPersonnelChoice.vue'

const title = ref('');
const taskTypeOptions=ref([])
const priorityOptions=ref([])
const executeDeptOptions=ref([])
const formData = reactive({
	id: '',
	taskId: '',
	taskName: '',
	createBy: '',
	goalPersonCount: null,
	executeDeptId: '',
	executeDeptName: '',
	executeDeptAncestors: '',
	allocationStatus: '1',
	allocationNote: '',
	deadline: null,
	goalPersonList: [],
	allocationId:''
})
// 表单引用
const formRef = ref(null)
// 校验规则
const rules = {
	taskName: {
		rules: [{
			required: true,
			errorMessage: '请填写任务名称'
		}]
	},
	goalPersonCount: {
		rules: [{
			required: true,
			errorMessage: '请选择目标人员'
		}]
	},
	executeDeptId: {
		rules: [{
			required: true,
			errorMessage: '请选择执行区域'
		}]
	},
	deadline:{
		rules: [{
			required: true,
			errorMessage: '请选择截止时间'
		}]
	},
}
const baseUrl = config.imgBaseUrl
const getBackgroundStyle = (imageName) => ({
    backgroundImage: `url(${baseUrl}/dispatch/${imageName})`,
    backgroundSize: 'cover',      // 覆盖整个容器
    backgroundPosition: 'center', // 居中
    backgroundRepeat: 'no-repeat'
});
const showVue=ref('main')
function choicePerson(){
	showVue.value='choice'
}
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 onDateChange(e){
	formData.deadline=e
}
function executeDeptChange(e){
	formData.executeDeptId=e
	formData.executeDeptName=getLabelByValue(e,executeDeptOptions.value)
	formData.executeDeptAncestors=getAncestorsByValue(e,executeDeptOptions.value)
}
function getLabelByValue(value,arr) {
	if (!Array.isArray(arr)) {
	    return ''
	}
	
	const item = arr.find(item => item.value === value)
	return item ? item.text : '暂无'
}
function getAncestorsByValue(value,arr){
	if (!Array.isArray(arr)) {
	    return ''
	}
	
	const item = arr.find(item => item.value === value)
	return item ? item.ancestors : ''
}
function normalizePersonData(dataList) {
  if (!Array.isArray(dataList)) return [];
  return dataList.map(obj => {
    const fullValue = obj;
    return {
      personId: String(fullValue) // 确保转为字符串，防止意外类型
    };
  });
}

function handleShowVueChange(newValue){
	showVue.value=newValue.showVue
	if(newValue.selectedPersonIds&&newValue.selectedPersonIds.length>0){
		formData.goalPersonList=normalizePersonData(newValue.selectedPersonIds)
		formData.goalPersonCount=newValue.selectedPersonIds.length
	}else{
		
	}
}
const handleSubmit = () => {
  formRef.value?.validate()
    .then(() => {
		let header={
			'Authorization':uni.getStorageSync('Padmin-Token')
		}
		$api.myRequest('/dispatch/assist/task/allocation/allocate', formData,'post',9100,header).then((resData) => {
			if(resData && resData.code == 200){
				handleCancel()
				uni.showToast({
				  title: '分配成功',
				  icon: 'success',
				  duration: 2000 
				});
			}else{
				uni.showToast({
				  title: resData.msg,
				  icon: 'none',
				  duration: 2000
				});
			}
			
		});
    })
    .catch((errors) => {
      console.log('校验失败:', errors);
    });
};

const handleCancel = () => {
	formData.taskName=''
	formData.goalPersonCount=null
	formData.executeDeptId=''
	formData.executeDeptName=''
	formData.executeDeptAncestors=''
	formData.allocationStatus='1'
	formData.allocationNote=''
	formData.deadline=null
	formData.goalPersonList=[]
	navTo('/packageB/priority/taskAssignment');
}
function getDetail(id){
	let header={
		'Authorization':uni.getStorageSync('Padmin-Token'),
		'Content-Type': "application/x-www-form-urlencoded"
	}
	let params={
		id:id
	}
	$api.myRequest('/dispatch/assist/task/getTask',params,'get',9100,header).then((resData) => {
		formData.id=resData.data.taskAllocation.id
		formData.taskName=resData.data.taskName
		formData.createBy=resData.data.createBy
		formData.deadline=resData.data.taskAllocation.deadline
		formData.allocationNote=resData.data.taskAllocation.allocationNote
		formData.executeDeptAncestors=resData.data.taskAllocation.executeDeptAncestors
		formData.allocationId=resData.data.taskAllocation.id
		formData.taskId=resData.data.taskAllocation.taskId
	});
}
onLoad((options) => {
	listNotParam()
	getDetail(options.id)
});


</script>

<style lang="stylus" scoped>
image
  height: 100%
  width: 100%
.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

.input,
.picker
  flex: 1

.picker-value
  color: #666
  
.form-container
  margin-top: 30rpx
:deep(.uni-forms-item__label)
  width: 194rpx !important
  font-size: 28rpx;
  color: #404040;

.button-group {
  display: flex;
  justify-content: space-between;
  padding: 40rpx 20rpx 20rpx;
}

.btn {
  width: 45%;
  height: 80rpx;
  font-size: 30rpx;
  border-radius: 8rpx;
}

.reset-btn {
  background-color: #D8E9FF;
  color: #1176FF;
}

.submit-btn {
  background-color: #368BFF;
  color: white;
}
.choice-btn{
	width: 100%;
	height: 70rpx;
	font-size: 28rpx;
	border-radius: 8rpx;
	background-color: #368BFF;
	color: white;
	margin-left: 0;
}
:deep(.uni-easyinput__content)
  background: rgba(0,0,0,0) !important
</style>