ks-app-employment-service/packageB/priority/components/taskDetail.vue

<template>
    <AppLayout :title="title" :show-bg-image="false" >
        <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>
            <view class="form-container">
				<view class="form-item">
					<view class="item-label">
						任务名称：
					</view>
					<view class="item-value">
						{{formData.taskName}}
					</view>
				</view>
				<view class="form-item">
					<view class="item-label">
						任务类型：
					</view>
					<view class="item-value">
						<!-- {{getabelByValue(formData.value.taskType,props.taskTypeOptions)}} -->
						{{formData.taskType}}
					</view>
				</view>
				<view class="form-item">
					<view class="item-label">
						优先级：
					</view>
					<view class="item-value">
						{{formData.priority}}
					</view>
				</view>
				<view class="form-item">
					<view class="item-label">
						目标人数：
					</view>
					<view class="item-value">
						{{formData.taskAllocation.goalPersonCount}}人
					</view>
				</view>
				<view class="form-item">
					<view class="item-label">
						分配区域：
					</view>
					<view class="item-value">
						{{formData.taskAllocation.executeDeptName}}
					</view>
				</view>
				<view class="form-item">
					<view class="item-label">
						创建时间：
					</view>
					<view class="item-value">
						{{formData.createTime}}
					</view>
				</view>
				<view class="form-item">
					<view class="item-label">
						截止时间：
					</view>
					<view class="item-value">
						{{formData.taskAllocation.deadline}}
					</view>
				</view>
				<view class="form-item">
					<view class="item-label">
						分配状态：
					</view>
					<view class="item-value">
						{{formData.allocationStatus}}
					</view>
				</view>
				<view class="form-item">
					<view class="item-label">
						分配说明：
					</view>
					<view class="item-value">
						{{formData.taskAllocation.allocationNote?formData.taskAllocation.allocationNote:'暂无'}}
					</view>
				</view>
                <!-- 按钮组 -->
                <view class="button-group">
				  <button class="btn submit-btn" @click="handleCancel">关闭</button>
                </view>
			</view>
        </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"

const props = defineProps({
  taskTypeOptions: {
    type: Array,
    required: true,
    default: () => []
  },
  priorityOptions:{
    type: Array,
    required: true,
	default: () => []
  },
  executeDeptOptions:{
    type: Array,
    required: true,
	default: () => []
  },
  allocationStatusOptions:{
    type: Array,
    required: true,
	default: () => []
  },
  currentItem:{
    type: String,
    required: true,
	default: ''
  },
})
const title = ref('');
const formData = reactive({
	taskName: '',
	taskType: '',
	priority: '',
	createTime:'',
	allocationStatus:'',
	taskAllocation: {
	  goalPersonCount: null,
	  executeDeptId: '',
	  executeDeptName: '',
	  executeDeptAncestors: '',
	  allocationStatus: '1',
	  allocationNote: '',
	  deadline: null,
	  goalPersonList: []
	}
})
// 表单引用
const formRef = ref(null)

const baseUrl = config.imgBaseUrl
const getBackgroundStyle = (imageName) => ({
    backgroundImage: `url(${baseUrl}/dispatch/${imageName})`,
    backgroundSize: 'cover',      // 覆盖整个容器
    backgroundPosition: 'center', // 居中
    backgroundRepeat: 'no-repeat'
});
const emit = defineEmits(['update:showView'])

// 事件处理
function onDateChange(){}
function taskTypeChange(){}
function priorityChange(){}
function executeDeptChange(){}

const handleCancel = () => {
	emit('update:showView', 'main')
}
function getDetail(){
	let header={
		'Authorization':uni.getStorageSync('Padmin-Token'),
		'Content-Type': "application/x-www-form-urlencoded"
	}
	let params={
		id:props.currentItem
	}
	$api.myRequest('/dispatch/assist/task/getTask',params,'get',9100,header).then((resData) => {
		resData.data.taskType=getabelByValue(resData.data.taskType,props.taskTypeOptions)
		resData.data.priority=getabelByValue(resData.data.priority,props.priorityOptions)
		let allocationStatus=resData.data.taskAllocation.allocationStatus
		resData.data.allocationStatus=getabelByValue(allocationStatus,props.allocationStatusOptions)
		Object.assign(formData, resData.data)
	});
}
function getabelByValue(value,arr) {
	if (!Array.isArray(arr)) {
	    return ''
	}
	const item = arr.find(item => item.value === String(value))
	return item ? item.text : '暂无'
}
onMounted(() => {
    getDetail()
});


</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
.form-item
  display: flex
  align-items: center
  margin-bottom: 20rpx
.item-label
  width:200rpx
  text-align: left
  font-size: 30rpx
  color: #606266
  height: 72rpx
  padding: 0 24rpx 0 0
  vertical-align: middle
  flex-shrink: 0
  box-sizing: border-box
.item-value
  color: #333
  font-size: 30rpx
  height: 72rpx
  padding: 0 24rpx 0 0
  vertical-align: middle
  flex-shrink: 0
  box-sizing: border-box
: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>