xunjian_app/task_pages/taskarrment/viewtask/viewtask.vue

<template>
	<!-- 临时任务详情 -->
	<view class="u-p-l-30 u-p-r-30">
		<u-cell-group>
			<u-cell-item :arrow="false" :title-style="{fontSize:'28rpx',fontWeight: '600',color:'#333333',position: 'relative',
			left: '-26rpx'}" title="任务名称">
				<view class="item" slot="right-icon">{{taskdetail.title}}</view>
			</u-cell-item>
			<u-cell-item :arrow="false" :title-style="{fontSize:'28rpx',fontWeight: '600',color:'#333333',position: 'relative',
						left: '-26rpx'}" title="任务类型">
				<view class="item" slot="right-icon">{{typeList[taskdetail.type]}}</view>
			</u-cell-item>
			<u-cell-item :arrow="false" :title-style="{fontSize:'28rpx',fontWeight: '600',color:'#333333',position: 'relative',
			left: '-26rpx'}" title="发起人 ">
				<view class="item" slot="right-icon">{{taskdetail.username}}</view>
			</u-cell-item>
			<u-cell-item :arrow="false" :title-style="{fontSize:'28rpx',fontWeight: '600',color:'#333333',position: 'relative',
			left: '-26rpx'}" title="执行人 ">
				<view class="item" slot="right-icon">
				{{executorsName}}
				</view>
			</u-cell-item>
			<u-cell-item :arrow="false" :title-style="{fontSize:'28rpx',fontWeight: '600',color:'#333333',position: 'relative',
			left: '-26rpx'}" title="发起时间	">
				<view class="item" slot="right-icon">{{publishTime}}</view>
			</u-cell-item>
			<u-cell-item :arrow="false" :title-style="{fontSize:'28rpx',fontWeight: '600',color:'#333333',position: 'relative',
			left: '-26rpx'}" title="完成时间	">
				<view class="item" slot="right-icon">{{finishTime}}</view>
			</u-cell-item>
		</u-cell-group>
		<view class="m-w">
			<view class="task-content"> 任务内容</view>
			<view class="span-textce">
				<textarea disabled="disabled" v-model="taskdetail.content" style="width: 100%; height: 100%;"></textarea>
			</view>
		</view>
		<view class="m-w">
			<view class="task-content"> 任务图片</view>
			<view class="span-textce u-flex">
				<view v-if="taskdetail.executorimgs != null" class="u-m-r-8 " v-for="(item,index) in taskdetail.executorimgs" :key="index">
					<u-image @click="previewImg(item)" :src="item" width="100" height="100"></u-image>
				</view>
				<block v-if="taskdetail.executorimgs == null">
					暂无图片
				</block>
			</view>
		</view>
		<view class="u-flex u-row-between u-m-t-62 u-p-b-32">
			<navigator hover-class="none" :url="`../feebacklist/feebacklist?id=${taskdetail.id}&title=${taskdetail.title}`"
				class="btn">反馈</navigator>
			<block v-if="taskdetail.status==1">
				<view class="btn" @click="sumok(1)" style="background: #4A8BFF;">完成</view>
				<view class="btn" @click="sumok(2)" style="background: #939393;">取消</view>
			</block>
		</view>
		<u-toast ref="viewToast" />
	</view>
</template>

<script>
	import {
		taskupdate,
		taklist
	} from '@/api/index.js'
	import dayjs from "dayjs";
	export default {
		data() {
			return {
				taskdetail: "",
				executorsName:'',
				typeList: ["", "一般任务", "较急任务", "紧急任务"]
			}
		},
		onLoad() {
			// 从仓库获取 taskdatail 数据并处理
			let taskdetail = this.$store.state.user.taskdetail
			// 图片
			if(taskdetail.images != '') {
				taskdetail.executorimgs = taskdetail.images.split(',')
				taskdetail.executornames = (taskdetail.executors.map((index) => {
					return index
				})).toString()
			} else{
				taskdetail.executorimgs = null
			}
			// 执行人
			if(taskdetail.executors.length == 1) {
				this.executorsName = taskdetail.executors[0]
			} else if(taskdetail.executors.length > 1) {
				this.executorsName = taskdetail.executors.join('、')
			} else {
				this.executorsName = '未选择执行人员'
			}
			this.taskdetail = taskdetail
		},
		methods: {
			// 点击图片事件
			previewImg(logourl) {
				let _this = this;
				let imgsArray = [];
				imgsArray[0] = logourl
				uni.previewImage({
					current: 0,
					urls: imgsArray
				});
			},
			sumok(status) {
				taskupdate({
						id: this.taskdetail.id,
						status
					})
					.then(({
						code,
						message
					}) => {
						this.$refs.viewToast.show({
							title: code == 200  ? '操作成功' : message,
							type: code == 200 ? 'success' : 'info',
							callback: () => {
								if (code == 200) {
									uni.navigateBack(1)
								}
							}
						})

					})
			}
		},
		// 计算属性
		computed: {
			// 计算出开始时间和结束时间(格式转换)
			finishTime() {
				return dayjs(this.taskdetail.finishTime).format("YYYY-MM-DD HH:mm:ss")
			},
			publishTime() {
				return dayjs(this.taskdetail.publishTime).format("YYYY-MM-DD HH:mm:ss")
			},
		}
	}
</script>

<style>
	.item {
		position: relative;
		right: -26rpx;
	}

	.task-content {
		font-size: 28rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: 400;
		color: #333333;
		margin-top: 28rpx;
	}

	.span-textce {
		width: 690rpx;
		height: 160rpx;
		border: 1rpx solid #AAAAAA;
		border-radius: 4rpx;
		margin-top: 24rpx;
		padding: 20rpx;
	}

	.btn {
		flex: 1;
		margin: 10rpx;
		height: 90rpx;
		background: #FFA11A;
		border-radius: 4rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei-3970(82674968);
		font-weight: bold;
		color: #FFFFFF;
		text-align: center;
		line-height: 90rpx;
	}
</style>