warst/warst-h5/pages/waitHandle/itemCell.vue

<template>
	<view class="item-cell">
		<view @click="openDetail">
			<view class="header">
				<view class="left-title">
					<text>{{ (item.username || '') + proType + '审批' }}</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="right-status" :style="`color:${statusColor}`">
					{{ processStatus[item.status] }}
				</view>
			</view>
			<view class="info-tips">
				<view> {{ proType }}时间：接口暂无字段 </view>
				<view>提交时间：{{ item.createTime }}</view>
			</view>
		</view>
		<!--  tabs我审批&&当前登录人的审批状态为true  -->
		<view class="footer" v-if="type === 1 && item.audit">
			<u-line></u-line>
			<view class="sp-btn">
				<c-button
					style="width: 60px; border-radius: 10px; margin: 0"
					size="small"
					color="#FF9935"
					@click="approval"
				>
					审批
				</c-button>
			</view>
		</view>
	</view>
</template>

<script>
import processTypes from '@/utils/types/processTypes'; // 流程类型
import processStatus from '@/utils/types/processStatus.js'; // 流程状态
export default {
	name: 'itemCell',
	props: {
		type: Number,
		item: {
			default: () => ({}),
			type: Object,
		},
	},
	data() {
		return {
			processStatus, // 流程状态
		};
	},
	computed: {
		statusColor() {
			const colors = {
				0: '#FF9935', // '待审批'
				1: '#11C59D', // '已归档'
				2: '#436FF6', // '已撤销'
				3: '#FF5E59', // '已驳回'
				4: '#FF9935', // '审批中'
			};
			return colors[this.item.processType || 0];
		},
		proType() {
			// item.processType 流程类型 不是流程状态
			return processTypes[this.item.processType] || '';
		},
	},
	methods: {
		openDetail() {
			this.$emit('click', this.item.id);
		},
		approval() {
			this.$emit('approval', {
				...this.item,
			});
		},
	},
};
</script>

<style scoped lang="scss">
.item-cell {
	background-color: #fff;
	padding: 20rpx;
	border-radius: $bd-radius;
	margin-bottom: 20rpx;
	&:last-child {
		margin-bottom: 0;
	}
	.header {
		display: flex;
		justify-content: space-between;
		font-size: 14px;

		.left-title {
			display: flex;
			color: #333333;
		}
		.right-status {
		}
	}
	.info-tips {
		color: #7b7e8c;
		font-size: 12px;
		margin-top: 20rpx;
		line-height: 22px;
	}
	.footer {
		margin-top: 20rpx;
		.sp-btn {
			display: flex;
			justify-content: flex-end;
			margin-top: 20rpx;
		}
	}
}
</style>