antissoft / lvqianmeiye_ERP

<template>
	<view class="page">
		<custom-navbar
			title="流程中心"
			:show-background="false"
			titleColor="#1f2937"
			backgroundColor="#fff"
			@height-change="handleNavbarHeightChange"
		>
			<view v-if="showBack" slot="left" class="wc-nav-back" @click="goBack">
				<u-icon name="arrow-left" size="20" color="#1f2937"></u-icon>
			</view>
		</custom-navbar>

		<view class="warpbox" :style="{ top: contentTopMargin }">
			<!-- 加载中 -->
			<view v-if="flowsLoading" class="warpboxss wc-state-card">
				<view class="wc-loading">
					<view class="wc-loading-ring" />
					<text class="wc-loading-text">正在加载流程...</text>
				</view>
			</view>

			<!-- 空态 -->
			<view v-else-if="safeCategories.length === 0" class="warpboxss wc-state-card wc-empty">
				<view class="wc-empty-visual">
					<u-icon name="file-text" size="56" color="#94a3b8"></u-icon>
				</view>
				<text class="wc-empty-title">暂无可发起的流程</text>
				<text class="wc-empty-sub">{{ apiErrorMsg || '请联系管理员配置流程权限' }}</text>
			</view>

			<!-- 分类 + 金刚区（与首页常用功能同一套视觉） -->
			<view
				v-else
				v-for="(cat, catIdx) in safeCategories"
				:key="cat.id"
				class="warpboxss"
			>
				<view class="warpboxs-small-title">
					<view>
						<text class="warpboxs-small-title-line"></text>
						{{ cat.fullName || '其他' }}
					</view>
					<view class="wc-cat-count">{{ (cat.children || []).length }} 项</view>
				</view>
				<view class="common-func-row">
					<view
						v-for="(flow, flowIdx) in cat.children"
						:key="flow.id"
						class="common-func-btn"
						@tap="handleFlowClick(flow)"
					>
						<view
							class="common-func-icon"
							:class="'icon-circle-bg-' + ((catIdx * 4 + flowIdx) % 16 + 1)"
							:style="flow.iconBackground ? 'background:' + flow.iconBackground : ''"
						>
							<i v-if="flow.icon" class="wc-flow-iconfont" :class="flow.icon"></i>
							<text v-else class="wc-flow-fallback">{{ getFlowFallback(flow) }}</text>
						</view>
						<view class="common-func-text wc-flow-name">{{ flow.fullName || '无' }}</view>
					</view>
				</view>
			</view>

			<view class="wc-bottom-space"></view>
		</view>
	</view>
</template>

<script>
import CustomNavbar from '@/components/custom-navbar/custom-navbar.vue'

export default {
	components: {
		CustomNavbar
	},
	data() {
		return {
			navbarHeightRpx: 0,
			flowsLoading: false,
			flowsTree: [],
			apiErrorMsg: ''
		}
	},
	computed: {
		contentTopMargin() {
			if (this.navbarHeightRpx > 0) {
				return (this.navbarHeightRpx + 20) + 'rpx'
			}
			return '90rpx'
		},
		showBack() {
			try {
				const pages = getCurrentPages()
				return pages && pages.length > 1
			} catch (e) {
				return false
			}
		},
		safeCategories() {
			const list = Array.isArray(this.flowsTree) ? this.flowsTree : []
			return list
				.filter(n => n && Array.isArray(n.children) && n.children.length > 0)
				.map(n => {
					const isFlowLeaf = (c) => {
						if (!c) return false
						const hasEnCode = !!(c.enCode && String(c.enCode).trim())
						const hasFormType = c.formType === 1
						const hasFlowType = c.type !== undefined && c.type !== null
						return hasEnCode || hasFormType || hasFlowType
					}
					const children = (n.children || []).filter(c => isFlowLeaf(c))
					return { ...n, children }
				})
				.filter(n => n.children && n.children.length > 0)
		}
	},
	onLoad() {
		this.fetchInitiableFlows()
	},
	onShow() {
		this.fetchInitiableFlows()
	},
	methods: {
		handleNavbarHeightChange(heightInfo) {
			this.navbarHeightRpx = heightInfo.rpx || 0
		},
		goBack() {
			uni.navigateBack({ delta: 1 })
		},
		getFlowFallback(flow) {
			const name = (flow && flow.fullName) ? String(flow.fullName).trim() : ''
			if (!name) return '流'
			return name.charAt(0)
		},
		async fetchInitiableFlows() {
			try {
				this.flowsLoading = true
				this.flowsTree = []
				this.apiErrorMsg = ''
				const res = await this.API.getInitiableFlowList({ n: Date.now() })
				if (res && Number(res.code) === 200 && res.data) {
					this.flowsTree = res.data.list || []
				} else if (res && res.data && res.data.list) {
					this.flowsTree = res.data.list || []
				} else {
					this.flowsTree = []
					const msg = res && (res.msg || res.message)
					const code = res && res.code
					this.apiErrorMsg = msg ? `接口返回：${msg}` : `接口返回为空（code: ${code || '-'}）`
				}
			} catch (e) {
				this.flowsTree = []
				this.apiErrorMsg = (e && e.message) ? `接口调用失败：${e.message}` : '接口调用失败，请先登录或检查网络'
			} finally {
				this.flowsLoading = false
			}
		},
		async handleFlowClick(flow) {
			const hasEnCode = !!(flow && flow.enCode && String(flow.enCode).trim())
			const hasFormType = flow && flow.formType === 1
			const hasFlowType = flow && flow.type !== undefined && flow.type !== null
			if (!(hasEnCode || hasFormType || hasFlowType)) {
				uni.showToast({ icon: 'none', title: '请选择可发起的流程' })
				return
			}
			if (!flow || !flow.id) return
			try {
				uni.showLoading({ title: '发起中...' })
				const res = await this.API.getFlowEngineInfo(flow.id)
				const data = (res && res.data) ? res.data : (res || {})
				const targetUrl = data.appFormUrl || data.formUrl
				if (!targetUrl) {
					uni.showToast({ icon: 'none', title: '未配置该流程的表单地址' })
					return
				}
				const joinChar = targetUrl.includes('?') ? '&' : '?'
				const flowId = encodeURIComponent(flow.id)
				const finalUrl = `${targetUrl}${joinChar}id=${flowId}`
				if (finalUrl.startsWith('http')) {
					uni.navigateTo({ url: `/pages/web/web?url=${encodeURIComponent(finalUrl)}` })
				} else {
					uni.navigateTo({ url: finalUrl })
				}
			} catch (e) {
				uni.showToast({ icon: 'none', title: (e && e.message) ? e.message : '发起失败' })
			} finally {
				uni.hideLoading()
			}
		}
	}
}
</script>

<style lang="scss" scoped>
/* 与首页 home.vue 保持同一套页面与卡片基底 */
.page {
	position: relative;
	left: 0;
	top: 0;
	width: 100%;
	min-height: 100vh;
	background: linear-gradient(135deg, #e8f5e9 0%, #b2dfdb 100%);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', Arial,
		'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-y: contain;
}

.wc-nav-back {
	padding: 12rpx 24rpx 12rpx 8rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.warpbox {
	position: relative;
	padding: 12rpx 40rpx 0;
}

.wc-bottom-space {
	height: 64rpx;
}

/* 状态卡片略收紧内边距 */
.wc-state-card {
	padding: 48rpx 30rpx !important;
}

/* —— 以下 .warpboxss / 标题 / 金刚区 / 圆形图标渐变：对齐 pages/home/home.vue —— */
.warpboxss {
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	padding: 32rpx 30rpx 28rpx;
	border-radius: 24rpx;
	box-shadow:
		0 8rpx 32rpx rgba(0, 0, 0, 0.08),
		0 2rpx 8rpx rgba(0, 0, 0, 0.04);
	margin-bottom: 32rpx;

	.warpboxs-small-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 30rpx;
		font-weight: 600;
		color: #1f2937;
		padding-bottom: 22rpx;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);

		.warpboxs-small-title-line {
			display: inline-block;
			background: linear-gradient(180deg, #43a047 0%, #66bb6a 100%);
			height: 26rpx;
			width: 10rpx;
			margin-right: 12rpx;
			border-radius: 18rpx;
			box-shadow:
				0 2rpx 8rpx rgba(67, 160, 71, 0.4),
				0 0 12rpx rgba(67, 160, 71, 0.3),
				inset 0 1rpx 2rpx rgba(255, 255, 255, 0.3);
			position: relative;
			vertical-align: middle;

			&::after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				border-radius: 3rpx;
				background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, transparent 100%);
				pointer-events: none;
			}
		}
	}

	.common-func-row {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		column-gap: 0;
		row-gap: 28rpx;
		align-items: start;
		margin-top: 24rpx;
	}

	.common-func-btn {
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		padding: 0 4rpx;
		touch-action: manipulation;

		&:active {
			opacity: 0.65;
		}
	}

	.common-func-icon {
		width: 96rpx;
		height: 96rpx;
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 12rpx;
		position: relative;
		transition: all 0.3s ease;
		overflow: visible;

		&.icon-circle-bg-1 {
			background: linear-gradient(135deg, #1e88e5 0%, #42a5f5 50%, #1565c0 100%);
			box-shadow:
				0 6rpx 20rpx rgba(30, 136, 229, 0.35),
				0 2rpx 8rpx rgba(30, 136, 229, 0.25),
				inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
				inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
		}
		&.icon-circle-bg-2 {
			background: linear-gradient(135deg, #43a047 0%, #66bb6a 50%, #388e3c 100%);
			box-shadow:
				0 6rpx 20rpx rgba(67, 160, 71, 0.35),
				0 2rpx 8rpx rgba(67, 160, 71, 0.25),
				inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
				inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
		}
		&.icon-circle-bg-3 {
			background: linear-gradient(135deg, #d32f2f 0%, #ef5350 50%, #c62828 100%);
			box-shadow:
				0 6rpx 20rpx rgba(211, 47, 47, 0.35),
				0 2rpx 8rpx rgba(211, 47, 47, 0.25),
				inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
				inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
		}
		&.icon-circle-bg-4 {
			background: linear-gradient(135deg, #00838f 0%, #26a69a 50%, #00695c 100%);
			box-shadow:
				0 6rpx 20rpx rgba(0, 131, 143, 0.35),
				0 2rpx 8rpx rgba(0, 131, 143, 0.25),
				inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
				inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
		}
		&.icon-circle-bg-5 {
			background: linear-gradient(135deg, #5e35b1 0%, #7e57c2 50%, #4527a0 100%);
			box-shadow:
				0 6rpx 20rpx rgba(94, 53, 177, 0.35),
				0 2rpx 8rpx rgba(94, 53, 177, 0.25),
				inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
				inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
		}
		&.icon-circle-bg-6 {
			background: linear-gradient(135deg, #7b1fa2 0%, #9c27b0 50%, #6a1b9a 100%);
			box-shadow:
				0 6rpx 20rpx rgba(123, 31, 162, 0.35),
				0 2rpx 8rpx rgba(123, 31, 162, 0.25),
				inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
				inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
		}
		&.icon-circle-bg-7 {
			background: linear-gradient(135deg, #f9a825 0%, #ffca28 50%, #f57f17 100%);
			box-shadow:
				0 6rpx 20rpx rgba(249, 168, 37, 0.35),
				0 2rpx 8rpx rgba(249, 168, 37, 0.25),
				inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
				inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
		}
		&.icon-circle-bg-8 {
			background: linear-gradient(135deg, #5d4037 0%, #8d6e63 50%, #3e2723 100%);
			box-shadow:
				0 6rpx 20rpx rgba(93, 64, 55, 0.35),
				0 2rpx 8rpx rgba(93, 64, 55, 0.25),
				inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
				inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
		}
		&.icon-circle-bg-9 {
			background: linear-gradient(135deg, #1976d2 0%, #42a5f5 50%, #1565c0 100%);
			box-shadow:
				0 6rpx 20rpx rgba(25, 118, 210, 0.35),
				0 2rpx 8rpx rgba(25, 118, 210, 0.25),
				inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
				inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
		}
		&.icon-circle-bg-10 {
			background: linear-gradient(135deg, #388e3c 0%, #66bb6a 50%, #2e7d32 100%);
			box-shadow:
				0 6rpx 20rpx rgba(56, 142, 60, 0.35),
				0 2rpx 8rpx rgba(56, 142, 60, 0.25),
				inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
				inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
		}
		&.icon-circle-bg-11 {
			background: linear-gradient(135deg, #b71c1c 0%, #ef5350 50%, #c62828 100%);
			box-shadow:
				0 6rpx 20rpx rgba(183, 28, 28, 0.35),
				0 2rpx 8rpx rgba(183, 28, 28, 0.25),
				inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
				inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
		}
		&.icon-circle-bg-12 {
			background: linear-gradient(135deg, #0097a7 0%, #26a69a 50%, #00838f 100%);
			box-shadow:
				0 6rpx 20rpx rgba(0, 151, 167, 0.35),
				0 2rpx 8rpx rgba(0, 151, 167, 0.25),
				inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
				inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
		}
		&.icon-circle-bg-13 {
			background: linear-gradient(135deg, #e65100 0%, #ff9800 50%, #e64a19 100%);
			box-shadow:
				0 6rpx 20rpx rgba(230, 81, 0, 0.35),
				0 2rpx 8rpx rgba(230, 81, 0, 0.25),
				inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
				inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
		}
		&.icon-circle-bg-14 {
			background: linear-gradient(135deg, #6a1b9a 0%, #9c27b0 50%, #4a148c 100%);
			box-shadow:
				0 6rpx 20rpx rgba(106, 27, 154, 0.35),
				0 2rpx 8rpx rgba(106, 27, 154, 0.25),
				inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
				inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
		}
		&.icon-circle-bg-15 {
			background: linear-gradient(135deg, #ad1457 0%, #e91e63 50%, #880e4f 100%);
			box-shadow:
				0 6rpx 20rpx rgba(173, 20, 87, 0.35),
				0 2rpx 8rpx rgba(173, 20, 87, 0.25),
				inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
				inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
		}
		&.icon-circle-bg-16 {
			background: linear-gradient(135deg, #fbc02d 0%, #ffeb3b 50%, #f9a825 100%);
			box-shadow:
				0 6rpx 20rpx rgba(251, 192, 45, 0.35),
				0 2rpx 8rpx rgba(251, 192, 45, 0.25),
				inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3),
				inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
		}
	}

	.common-func-text {
		font-size: 24rpx;
		color: #374151;
		font-weight: 500;
	}
}

.wc-cat-count {
	font-size: 22rpx;
	font-weight: 600;
	color: #43a047;
	background: rgba(67, 160, 71, 0.08);
	padding: 6rpx 16rpx;
	border-radius: 999rpx;
	border: 1rpx solid rgba(67, 160, 71, 0.15);
}

.wc-flow-name {
	line-clamp: 2;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-all;
	line-height: 1.4;
	padding-top: 8rpx;
}

.wc-flow-iconfont {
	display: block;
	font-size: 44rpx !important;
	line-height: 1;
	color: #ffffff;
	font-style: normal;
}

.wc-flow-fallback {
	color: #ffffff;
	font-size: 30rpx;
	font-weight: 800;
	letter-spacing: 0;
}

.wc-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 24rpx 0;
}

.wc-loading-ring {
	width: 56rpx;
	height: 56rpx;
	border: 6rpx solid rgba(67, 160, 71, 0.2);
	border-top-color: #43a047;
	border-radius: 50%;
	animation: wcSpin 0.75s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	.wc-loading-ring {
		animation: none;
		border-top-color: rgba(67, 160, 71, 0.35);
	}
}

@keyframes wcSpin {
	to {
		transform: rotate(360deg);
	}
}

.wc-loading-text {
	margin-top: 20rpx;
	font-size: 26rpx;
	color: #64748b;
}

.wc-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.wc-empty-visual {
	margin-bottom: 20rpx;
	opacity: 0.85;
}

.wc-empty-title {
	font-size: 30rpx;
	font-weight: 600;
	color: #1f2937;
	margin-bottom: 12rpx;
}

.wc-empty-sub {
	font-size: 24rpx;
	color: #64748b;
	line-height: 1.6;
	padding: 0 16rpx;
}
</style>