hs_hzl_uniapp_ml/pages/task/details.vue

<template>
	<view style="padding: 20px;">
		<u--form labelPosition="left" :model="taskInfo" ref="form1" labelWidth="80">
			<u-form-item label="编号" prop="taskInfo.taskNo" borderBottom ref="taskInfo">
				<u-text size="18" :text="taskInfo.taskNo"></u-text>
			</u-form-item>
			<u-form-item label="标题" prop="taskInfo.taskTitle" borderBottom ref="taskInfo">
				<u-text size="18" :text="taskInfo.taskTitle"></u-text>
			</u-form-item>
			<u-form-item label="地点" prop="taskInfo.taskAddress" borderBottom ref="taskInfo">
				<u-text size="18" :text="taskInfo.taskAddress"></u-text>
			</u-form-item>
			<u-form-item label="开始" prop="taskInfo.planStartTime" borderBottom ref="taskInfo">
				<u-text size="18" :text="taskInfo.planStartTime"></u-text>
			</u-form-item>
			<u-form-item label="结束" prop="taskInfo.planEndTime" borderBottom ref="taskInfo">
				<u-text size="18" :text="taskInfo.planEndTime"></u-text>
			</u-form-item>
			<u-form-item label="主负责人" prop="taskInfo.belongMain" borderBottom ref="taskInfo">
				<u-tag type="success" :text="taskInfo.belongMain"></u-tag>
			</u-form-item>
			<u-form-item label="二级负责人" prop="taskInfo.remark" borderBottom ref="taskInfo">
				<view>
					<view class="belongs minor" v-for="(item,index) in taskInfo.belongMinors">
						{{item}}
					</view>
				</view>
			</u-form-item>
			<u-form-item label="执行人" prop="taskInfo.executors" borderBottom ref="taskInfo">
				<view>
					<view class="belongs executor" v-for="(item,index) in taskInfo.executors">
						{{item}}
					</view>
				</view>
			</u-form-item>
			<u-form-item label="说明" prop="taskInfo.remark" borderBottom ref="taskInfo">
				<u-text size="18" :text="taskInfo.remark"></u-text>
			</u-form-item>
		</u--form>

		<view class="btnBody" v-if="taskInfo.isOrder == 0">
			<view class="btn">
				<u-button v-if="taskInfo.isOrder === 0" type="success" text="接单" @click="btnOrder(1)"></u-button>
			</view>
		</view>
		<view class="btnBody" v-if="taskInfo.isOrder == 1">
			<view class="btn">
				<u-button v-if="taskInfo.userTaskStatus === 0" type="success" text="开始" @click="btnStatus(5)">
				</u-button>
				<u-button v-if="taskInfo.userTaskStatus === 5" type="primary" disabled text="进行中"></u-button>
				<u-button v-if="taskInfo.userTaskStatus === 2" type="success" disabled text="已结束"></u-button>
				<u-button v-if="taskInfo.userTaskStatus === 3" type="warning" disabled text="已挂起"></u-button>
			</view>
			<view class="btn">
				<u-button v-if="taskInfo.userTaskStatus == 5||taskInfo.userTaskStatus == 3" type="error" text="结束"
					@click="btnStatus(2)"></u-button>
			</view>
			<view class="btn">
				<u-button v-if="taskInfo.userTaskStatus === 5" type="warning" text="挂起" @click="btnStatus(3)">
				</u-button>
				<u-button v-if="taskInfo.userTaskStatus === 3" type="primary" text="取消挂起" @click="btnStatus(5)">
				</u-button>
			</view>
			<view class="btn">
				<u-button v-if="taskInfo.isOrder === 1" type="primary" text="退单" @click="btnOrder(0)"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				taskInfo: {}
			}
		},
		onLoad() {
			this.doReadGetInfo()
		},
		methods: {
			async doReadGetInfo() {
				const {
					data: res
				} = await this.$httpRequest({
					url: '/api/yq/clickTaskRead/?taskId=' + uni.getStorageSync("taskId") +
						'&userNo=' + uni.getStorageSync("setUserName"),
					method: 'get',
				})
				if (res.code == 200) {
					this.taskInfo = res.data
				} else {

				}
			},
			async clockIn(type) {
				const data = {
					userNo: uni.getStorageSync("setUserName"),
					taskId: uni.getStorageSync("taskId"),
					clockInType: type
				}
				const {
					data: res
				} = await this.$httpRequest({
					url: '/apiapi/ci/clockIn',
					method: 'post',

					data: data
				})
				if (res.code == 200) {
					uni.showToast({
						icon: "success"
					})
				} else {
					uni.showToast({
						icon: "none",
						title: res.msg
					})
				}
			},
			btnStatus(type) {
				const that = this
				if (type === 5) {
					that.updateStatus(type)
				} else if (type === 2) {
					uni.showModal({
						title: '提示',
						content: "确定结束当前任务吗？",
						success: function(res) {
							if (res.confirm) {
								that.updateStatus(type)
							} else if (res.cancel) {}
						}
					})
				} else if (type === 3) {
					uni.showModal({
						title: '提示',
						content: "确定挂起当前任务吗？",
						success: function(res) {
							if (res.confirm) {
								that.updateStatus(type)
							} else if (res.cancel) {}
						}
					})
				}
			},
			btnOrder(type) {
				var text = ''
				if (1 === type) {
					text = '确定接单吗？'
				} else {
					text = '确定退单并重置当前状态吗？'
				}
				const that = this
				uni.showModal({
					title: '提示',
					content: text,
					success: function(res) {
						if (res.confirm) {
							that.updateOrder(type)
						} else if (res.cancel) {}
					}
				})
			},
			async updateStatus(type) {
				const {
					data: res
				} = await this.$httpRequest({
					url: '/api/yq/uuStatus/?taskId=' + uni.getStorageSync("taskId") +
						'&userNo=' + uni.getStorageSync("setUserName") + "&status=" + type,
					method: 'get',
				})
				if (res.code == 200) {
					uni.showToast({
						icon: "success"
					})
					this.taskInfo.userTaskStatus = type
				} else {
					uni.showToast({
						icon: "none",
						title: res.msg
					})
				}
			},
			async updateOrder(type) {
				const {
					data: res
				} = await this.$httpRequest({
					url: '/api/yq/uOrder/?taskId=' + uni.getStorageSync("taskId") +
						'&userNo=' + uni.getStorageSync("setUserName") + "&status=" + type,
					method: 'get',
				})
				if (res.code == 200) {
					uni.showToast({
						icon: "success"
					})
					this.taskInfo.isOrder = type
					this.taskInfo.userTaskStatus = 0
				} else {
					uni.showToast({
						icon: "none",
						title: res.msg
					})
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #f7f7f7;
	}

	.btnBody {
		margin: 20px 0;
	}


	.btnBody {
		margin: 20px 0;
	}

	.btn {
		margin: 15px 0;
	}

	.belongs {
		margin: 5px;
		padding: 2px 5px;
		color: #ffffff;
		display: inline-block;
		border-radius: 5px;
	}

	.minor {
		background-color: #55aaff;
	}

	.executor {
		background-color: #ffaa00;
	}
</style>