mobile-workflow/pages/submit/ProcessNodeRender2.vue

<template>
	<view style="padding: 32rpx 0;">
		<view :class="{'w-process-render-node': true, 'shake-tip': isError}">
			<uni-icons :type="task.icon" :size="25" color="#888887" class="w-node-icon"></uni-icons>
			<view class="w-p-node" :key="task.active">
				<view class="w-p-node-branchs" v-if="(task.options || []).length > 0">
					<view
						:class="{'w-p-node-branch': true, 'no-active': option.skip, 'is-active': option.id === task.active}"
						v-for="option in task.options" :key="option.id" @click="task.active = option.id">
						{{option.title}}
					</view>
				</view>
				<view v-else>
					<text v-if="task.enableEdit" style="color: red;"> * </text>
					{{task.name === 'END' ? '流程结束': task.title}}
				</view>
				<text>{{task.desc}}</text>
			</view>
			<view class="w-p-n-user">
				<avatar :name="user.name" :closeable="task.enableEdit" :type="user.type" v-for="(user, i) in task.users"
					:key="user.id" :src="getRes(user.avatar)" :size="30" showY @close="delOrg(i, task)" />
				<view class="w-p-n-uadd" v-if="task.enableEdit && (task.multiple || task.users.length === 0)"
					@click="addOrg(task)">
					<uni-icons type="plusempty" size="30" color="#888887"></uni-icons>
				</view>
			</view>
		</view>
		<view :key="task.active + '_'" class="w-sub-node">
			<process-node-render :key="subTask.id + '_'" class="w-node-render" @addOrg="addOrg" @delOrg="delOrg"
				v-for="subTask in (task.branchs ? task.branchs[task.active] : [])"
				:task="subTask"></process-node-render>
		</view>
	</view>
</template>

<script setup>
	import Avatar from '@/components/Avatar.vue'
	import ProcessNodeRender from './ProcessNodeRender.vue'
	import { ref } from 'vue';
	import { getRes } from '@/utils/tool.js'

	const props = defineProps({
		task: {
			type: Object,
			required: true,
			default: () => {
				return {}
			}
		},
		error: {
			type: Boolean,
			default: false
		}
	})

	defineExpose({ errorShark })
	const emits = defineEmits(['addOrg', 'delOrg'])
	const isError = ref()

	function errorShark(nodeId) {
		isError.value = true
		setTimeout(() => isError.value = false, 1200)
	}

	function addOrg(task) {
		emits('addOrg', task)
	}

	function delOrg(i, task) {
		console.log('删除用户')
		emits('delOrg', i, task)
	}
</script>

<style lang="less" scoped>
	.w-sub-node {
		.w-node-render:last-child {
			padding-top: 64rpx;
		}
	}

	.w-process-render-node {
		display: flex;

		.w-node-icon {
			padding: 2px;
			z-index: 1;
			background-color: #f3f3f3;
			border-radius: 50%;
			height: 25px;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.w-p-node {
			display: flex;
			flex-direction: column;
			flex: 1;
			margin-left: 5px;
			font-size: 32rpx;

			&>text:last-child {
				color: #acacac;
				font-size: 29rpx
			}

			.w-p-node-branchs {
				display: flex;
			}

			.w-p-node-branch {
				border-color: #9c9c9c;
				padding: 2px 5px;
				font-size: 26rpx;
				color: #9c9c9c;
				background-color: white;
				border: 1px solid;
				border-left: none;
			}

			.w-p-node-branch:first-child {
				border-left: 1px solid !important;
			}

			.no-active {
				text-decoration: line-through;
			}

			.is-active {
				color: white;
				background-color: #4478F7;
				border: 1px solid #4478F7;
			}
		}

		.w-p-n-user {
			max-width: 80%;
			display: flex;

			.w-p-n-uadd {
				width: 64rpx;
				height: 64rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50%;
				border: 1px dashed #9E9E9E;
			}
		}
	}

	.shake-tip {
		animation: shake 1s ease-in-out;
	}

	//水平抖动提示
	@keyframes shake {

		10%,
		90% {
			transform: translate3d(-1px, 0, 0);
		}

		20%,
		80% {
			transform: translate3d(+2px, 0, 0);
		}

		30%,
		70% {
			transform: translate3d(-4px, 0, 0);
		}

		40%,
		60% {
			transform: translate3d(+4px, 0, 0);
		}

		50% {
			transform: translate3d(-4px, 0, 0);
		}
	}
</style>