jnpf_app/pages/workFlow/flowTodo/flowList.vue

<template>
	<view class="flowLaunch-v">
		<view class="flow-list" v-if="list.length > 0">
			<view class="flow-list-box">
				<SwipeItem :list="list" :buttons="options" @action="handleClick" ref="swipeItem" :marginB="20"
					:borderR="10">
					<template v-slot="{ item,index }">
						<view class="item" @click="goDetail(item)" :id="'item'+index" ref="mydom">
							<view class="item-left">
								<view class="item-left-top">
									<view class='common-lable-entrust' v-if="item.delegateUser">
										{{!category ? '委托' : '代理' }}
									</view>
									<view class='common-lable'>
										单号
									</view>
									<text class="title u-font-28 u-line-1">{{item.businessInfo.billNo}}</text>
								</view>
								<text class="title u-line-1 u-font-24">单据类型：{{item.name || item.processInstanceName}}<text
										class="titInner">{{item.thisStep ? item.thisStep : ''}}</text></text>
								<text class="time title u-font-24">发起时间：<text
										class="titInner">{{item.createTime?$u.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss'):''}}</text></text>
							</view>
							<view v-if="category == 2" class="item-right">
								<image v-if="item.result == 1" src="./img/jihuo.png" mode="widthFix" class="item-right-img" />
								<image v-else src="./img/wanc.png" mode="widthFix" class="item-right-img" />
							</view>
							<view v-else class="item-right">
								<image v-if="item.result == 1" src="./img/doing.png" mode="widthFix" class="item-right-img" />
								<image v-if="item.result == 2" src="./img/togo.png" mode="widthFix" class="item-right-img" />
								<image v-if="item.result == 3" src="./img/pass.png" mode="widthFix" class="item-right-img" />
								<image v-if="item.result == 4" src="./img/quxiao.png" mode="widthFix" class="item-right-img" />
								<image v-if="item.result == 5" src="./img/REJECTED.png" mode="widthFix" class="item-right-img" />
								<image v-if="item.result == 6" src="./img/weipai.png" mode="widthFix" class="item-right-img" />
							</view>
						</view>
					</template>
				</SwipeItem>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		delFlowLaunch
	} from '@/api/workFlow/template'
	import SwipeItem from "@/components/SwipeItem/index"
	export default {
		name: "FlowList",
		components: {
			SwipeItem
		},
		props: {
			list: {
				type: Array,
				default: () => []
			},
			swipeAction: {
				type: Boolean,
				default: false
			},
			category: {
				type: [String, Number],
				default: '0'
			},
		},
		data() {
			return {
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				title: '',
			};
		},

		methods: {
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.list[index].show = true;
				this.list.map((val, idx) => {
					if (index != idx) this.list[idx].show = false;
				})
			},
			goDetail(item) {
				const config = {
					opType: item.opType,
					operatorId: item.id,
					category: this.category,
					...item
				}
				uni.navigateTo({
					url: '/pages/workFlow/flowBefore/index?config=' +
						this.jnpf.base64.encode(JSON.stringify(config))
				})
			},
			handleClick(data) {
				const {
					index
				} = data
				const item = this.list[index]
				if ([1, 2, 3, 5].includes(item.status)) {
					this.$u.toast("流程正在审核,请勿删除")
					this.list[index].show = false
					return
				}
				delFlowLaunch(item.id).then(res => {
					this.$u.toast(res.msg)
					this.list.splice(index, 1)
				})
			},
		}
	};
</script>
<style scoped lang="scss">
	.flowLaunch-v {
		width: 100%;

		.flow-list-box {
			width: 95%;

			.item-left-top {
				display: flex;
				width: 100%;

				.common-lable {
					font-size: 24rpx;
					padding: 2rpx 8rpx;
					margin-right: 8rpx;
					border-radius: 8rpx;
					color: #409EFF;
					border: 1px solid #409EFF;
					background-color: #e5f3fe;

					&-entrust {
						margin-right: 8rpx;
						font-size: 24rpx;
						padding: 2rpx 8rpx;
						border-radius: 8rpx;
						background-color: #dbf1e1;
						color: #19be6b;
						border: 1px solid #19be6b;
					}
				}

				.urgent-lable {
					color: #E6A23C;
					border: 1px solid #E6A23C;
					background-color: #fef6e5;
				}

				.important-lable {
					color: #F56C6C;
					border: 1px solid #F56C6C;
					background-color: #fee5e5;
				}

				.title {
					width: unset;
					flex: 1;
					min-width: 0;
				}
			}
		}
	}
</style>