workorder-front/components/work/WorkOrderTotalItem.vue

<template>
	<view class="Urgent-Work-List" @click="$emit('click')">
		<!-- <view class="Work-List">
			<view class="label">
				任务号：
			</view>
			<view class="text">
				{{ obj.taskNo }}
			</view>
		</view>
		
		<view class="Work-List">
			<view class="label">
				担当信息：
			</view>
			<view class="text">
				{{ obj.responsibler }}
			</view>
		</view> -->
		
		<view class="title">
			<view class="">
				{{ obj.taskNo }}
			</view>
			<view class="">
				{{ obj.responsibler }}
			</view>
		</view>
		
		<view class="steps">
			<uv-steps activeColor="#5ac725"
			:current="stepsCurrent" dot>
				<uv-steps-item 
				:title="item.name" 
				:key="index" 
				v-if="item.id"
				v-for="(item, index) in statusList">
				</uv-steps-item>
			</uv-steps>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		name: "WorkOrderitem",
		props : {
			obj : {}
		},
		computed: {
			...mapState(['statusList']),
			stepsCurrent(){
				let index = 0
				
				this.statusList.forEach((n, i) => {
					if(n.id == this.obj.statusId){
						index = i - 1
					}
				})
				
				return index
			},
		},
		data() {
			return {

			};
		}
	}
</script>

<style scoped lang="scss">
	.Urgent-Work-List{
		padding: 15rpx;
		background-color: #fff;
		font-size: 28rpx;
		margin-top: 20rpx;
		box-shadow: 0 0 6rpx 6rpx #00000009;
		.Work-List{
			display: flex;
			padding: 20rpx 0rpx;
			.label{
				width: 150rpx;
				flex-shrink: 0;
			}
		}
		.title{
			font-size: 26rpx;
			padding: 20rpx 0rpx;
			display: flex;
			justify-content: space-between;
		}
		.steps {
		}
	}
</style>