leave-apply-form.vue
4.22 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<template>
<view class="page">
<view class="hero-card">
<text class="hero-title">请假申请</text>
<text class="hero-subtitle">请选择本次申请入口，系统会按不同类型展示对应规则与可用额度。</text>
<view class="flow-tip" :class="flowId ? 'flow-tip--ok' : 'flow-tip--warn'">
{{ flowId ? '已带入流程ID，进入对应页面后可直接提交。' : '当前未携带流程ID，请从流程中心进入后再发起申请。' }}
</view>
</view>
<view class="entry-list">
<view v-for="item in entryList" :key="item.key" class="entry-card" @tap="goEntry(item)">
<view class="entry-card__head">
<view>
<text class="entry-card__title">{{ item.title }}</text>
<text class="entry-card__tag">{{ item.tag }}</text>
</view>
<text class="entry-card__arrow">→</text>
</view>
<text class="entry-card__desc">{{ item.desc }}</text>
<view class="entry-card__points">
<text v-for="point in item.points" :key="point" class="entry-card__point">• {{ point }}</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
flowId: '',
entryList: [
{
key: 'rest',
title: '休假申请',
tag: '月应休入口',
desc: '用于每月应休天数的休假申请，会显示本月还能休多少天、还能拆分多少半天。',
url: '/pagesA/rest-leave-apply/rest-leave-apply',
points: ['自动读取当前考勤分组额度', '展示本月剩余休假天数', '校验半天拆分剩余额度']
},
{
key: 'personal',
title: '事假申请',
tag: '事假 / 病假',
desc: '用于发起事假、病假申请，按实际开始结束时间填写。',
url: '/pagesA/personal-leave-apply/personal-leave-apply',
points: ['包含事假、病假两类', '保留原有时长计算方式', '适合临时个人请假场景']
},
{
key: 'paid',
title: '带薪休假',
tag: '婚假 / 丧假 / 年假 / 产假',
desc: '用于发起婚假、丧假、年假、产假，会按后台规则展示可用天数。',
url: '/pagesA/paid-leave-apply/paid-leave-apply',
points: ['展示婚假、丧假、年假、产假规则', '年假显示本年剩余额度', '产假按后台规则限制天数']
}
]
}
},
onLoad(options) {
this.flowId = options.id || options.flowId || ''
},
methods: {
goEntry(item) {
const joinChar = item.url.includes('?') ? '&' : '?'
const flowQuery = this.flowId ? `${joinChar}id=${encodeURIComponent(this.flowId)}` : ''
uni.navigateTo({ url: `${item.url}${flowQuery}` })
}
}
}
</script>
<style scoped lang="scss">
.page {
min-height: 100vh;
padding: 28rpx 24rpx 40rpx;
box-sizing: border-box;
background: linear-gradient(180deg, #e8f5e9 0%, #f6fff7 100%);
}
.hero-card,
.entry-card {
background: #ffffff;
border-radius: 24rpx;
box-shadow: 0 8rpx 24rpx rgba(67, 160, 71, 0.08);
}
.hero-card {
padding: 32rpx 28rpx;
margin-bottom: 24rpx;
}
.hero-title {
display: block;
font-size: 40rpx;
font-weight: 700;
color: #2e7d32;
}
.hero-subtitle {
display: block;
margin-top: 16rpx;
font-size: 26rpx;
line-height: 1.7;
color: #4f7d52;
}
.flow-tip {
margin-top: 22rpx;
padding: 18rpx 20rpx;
border-radius: 16rpx;
font-size: 24rpx;
line-height: 1.6;
}
.flow-tip--ok {
background: #edf9ee;
color: #2e7d32;
}
.flow-tip--warn {
background: #fff7e8;
color: #c57b00;
}
.entry-list {
display: flex;
flex-direction: column;
gap: 24rpx;
}
.entry-card {
padding: 28rpx;
}
.entry-card__head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 20rpx;
}
.entry-card__title {
display: block;
font-size: 32rpx;
font-weight: 700;
color: #2f3a2f;
}
.entry-card__tag {
display: inline-block;
margin-top: 12rpx;
padding: 8rpx 18rpx;
border-radius: 999rpx;
font-size: 22rpx;
color: #2e7d32;
background: #eef8ef;
}
.entry-card__arrow {
font-size: 34rpx;
font-weight: 700;
color: #43a047;
}
.entry-card__desc {
display: block;
margin-top: 18rpx;
font-size: 25rpx;
line-height: 1.7;
color: #5f6b5f;
}
.entry-card__points {
margin-top: 20rpx;
display: flex;
flex-direction: column;
gap: 10rpx;
}
.entry-card__point {
font-size: 23rpx;
color: #8c9b8d;
line-height: 1.6;
}
</style>