realty/virgo.wzfrontend/workark_wx/subPages/indexPage/components/processItem.vue

<template>
	<view class="set-item-box">
		<view class="process-set-item" v-for="(item,index) in list" :key="item.id">
			<!-- 状态 -->
			<view :class="'process-set-state ' + returnItemClass(item)">
				<view class="process-set-state-2">
					<view class="process-set-state-1"></view>
				</view>
			</view>
			<!-- line -->
			<view :class="'line line-top ' + returnItemClass(item)" v-if="index > 0"></view>
			<view :class="'line line-bottom ' + returnItemClass(item)" v-if="index < list.length-1">
			</view>
			<!-- 标题 -->
			<view class="process-item-title">
				<text class="label">{{index+1}}.{{item.name}}</text>
			</view>
			<!-- 内容 -->
			<view class="process-item-content" v-if="item.children">
				<!-- 附件 -->
				<view v-if="item.type === 1">
					<view class="process-set-item" v-for="(node,i) in item.children" :key="node.id">
						<!-- 状态 -->
						<view :class="'process-set-state ' + returnItemClass(item,node)">
							<view class="process-set-state-2">
								<view class="process-set-state-1"></view>
							</view>
						</view>
						<!-- 标题 -->
						<view class="process-item-title">
							<text class="label">{{node.name}}</text>
						</view>
						<!-- 内容 -->
						<view class="process-item-content">
							<!-- 展示 -->
							<view v-if="item.status !== 1 && node.attachmentContent">
								<upload :list="node.attachmentContent ? JSON.parse(node.attachmentContent) : []"
									type="preview">
								</upload>
							</view>
						</view>
					</view>
				</view>
				<!-- 可付款 -->
				<view v-else-if="item.type === 2">
					<view v-if="(item.status === 1 || item.status === 4) && item.roleId === roleType">
						<view>
							<text>待付款</text>
							<text class="color-danger">¥</text>
							<text class="color-danger">{{item.totalFee}}</text>
						</view>
					</view>
					<!-- 展示 -->
					<view v-else-if="item.type === 2 && item.status === 3">
						<view class="hui-state">
							<view class="hui-state-bage hui-state-success"></view>
							<view class="hui-state-label">
								<text>已支付</text>
								<text class="color-success">¥</text>
								<text class="color-success">{{item.totalFee}}</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 不可添加附件 -->
				<view v-else-if="item.children.length === 0"></view>
				<process-item v-else :list="item.children" :parent="item" :roleType="roleType">
				</process-item>
			</view>
		</view>
	</view>
</template>

<script>
	import processItem from '@/subPages/indexPage/components/processItem.vue';
	import upload from '@/components/common/upload.vue'
	export default {
		props: ['list', 'roleType'],
		data() {
			return {

			}
		},
		mounted() {},
		methods: {
			returnItemClass(item, node) {
				let str = '';
				let status = node ? (node.status > 0 ? node.status : item.status) : item.status;
				switch (status) {
					case 1:
					case 2:
						str = 'waiting'
						break;
					case 3:
						str = 'success'
						break;
					case 4:
						str = 'error'
						break;
					default:
						str = 'info'
						break;
				}
				return str;
			}
		},
		components: {
			processItem,
			upload
		}
	}
</script>

<style>
</style>