JiangNingUmale-h5/subViolation/TuogangList/info.vue

<template>
	<view class="app-container">
		<u-navbar leftText="返回" title="脱岗详情" :autoBack="true" :placeholder="true" />
		<view class="list-item">
			<!--      <view class="item-cell">
        <view class="cell-lable">脱岗记录编号：</view>
        <view class="cell-value u-line-1"></view>
      </view>
      <view class="item-cell">
        <view class="cell-lable">脱岗记录标题：</view>
        <view class="cell-value"></view>
      </view> -->
			<view class="item-cell">
				<view class="cell-lable">脱岗人员姓名：</view>
				<view class="cell-value">{{newList.userName}}</view>
			</view>
			<view class="item-cell">
				<view class="cell-lable">所属网格：</view>
				<view class="cell-value">{{newList.gridName}}</view>
			</view>
			<view class="item-cell">
				<view class="cell-lable">所属部门：</view>
				<view class="cell-value">{{newList.partName}}</view>
			</view>
			<view class="item-cell">
				<view class="cell-lable">脱岗时间：</view>
				<view class="cell-value u-line-1">{{newList.leaveTime}}</view>
			</view>
			<!--      <view class="item-cell">
        <view class="cell-lable">脱岗路段：</view>
        <view class="cell-value"></view>
      </view> -->
			<view class="item-cell">
				<view class="cell-lable">脱岗时长：</view>
				<view class="cell-value">{{newList.leaveDuty}}分钟</view>
			</view>
			<view class="item-cell" v-if="newList.status!=0">
				<view class="cell-lable">复核理由：</view>
				<view class="cell-value">{{newList.reason}}</view>
			</view>
			<view class="item-cell" v-if="[2, 3].includes(newList.status)">
				<view class="cell-lable">复核结果：</view>
				<view class="cell-value" :style="`${
                newList.approval == 0 ? 'color:#52CD80' : 'color:#F76359'
              }`">{{newList.approval == 0 ? '已同意' : '已拒绝'}}</view>
			</view>
			<view class="item-cell">
				<view class="cell-lable">状态：</view>
				<view class="cell-value">
					<span v-if="newList.status == 0" style="color: rgb(82, 205, 128);">已生效</span>
					<span v-if="newList.status == 1" style="color: rgb(255, 127, 53)">复核待确认</span>
					<span v-if="newList.status == 2" style="color: #7A808A">已作废</span>
					<span v-if="newList.status == 3" style="color: rgb(247, 99, 89)">复核后已生效</span>
				</view>
			</view>
			<!--   <view class="item-cell">
        <view class="cell-lable">脱岗详情：</view>
        <view class="cell-value"></view>
      </view> -->
		</view>
		<fixed-buttom :title="newList.status == 0?'申诉':'审批'" @click="toFuHe"
			v-if="newList.status == 0||newList.status == 1"></fixed-buttom>
	</view>
</template>

<script>
	import {
		tgwtGet,
	} from "@/api/jn/offDuty.js"
	export default {
		data() {
			return {
				newList: {},
				id: 0,
			};
		},
		onShow() {
			uni.showToast({
				icon: 'loading',
				title: '加载中'
			});
			tgwtGet(this.id).then(res => {
				this.newList = res.data
				uni.hideToast();
			})
		},
		onLoad(e) {
			this.id = e.id
		},
		methods: {
			toFuHe() {
				uni.navigateTo({
					url: `/subViolation/TuogangList/complaint?id=${this.newList.id}&status=${this.newList.status}`
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.app-container {
		box-sizing: border-box;
		padding: 25rpx 20rpx;

		.list-item {
			box-sizing: border-box;
			padding: 25rpx;
			background: #fff;
			margin-bottom: 30rpx;
			box-shadow: 0rpx 0rpx 20rpx rgba(57, 118, 241, 0.06);
			border-radius: 16rpx;

			.item-cell {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;

				.cell-lable {
					width: 200rpx;
					font-size: 28rpx;
					color: #9da2ab;
				}

				.cell-value {
					flex: 1;
					font-size: 28rpx;
					font-weight: 400;
					color: #2e2f31;
				}
			}

			&>.item-cell:last-child {
				margin-bottom: 0;
			}
		}
	}
</style>