feat: 完成审批发起申请和审批中心的UI
This commit is contained in:
范鹏
parent
95a514aa5c
commit
215eee5f01
@ -7,14 +7,18 @@
|
||||
}
|
||||
</route>
|
||||
<template>
|
||||
<view>
|
||||
<view class="h-100vh flex flex-col">
|
||||
<TopNavigation :title="index === 0 ? '发起申请' : '审批'"></TopNavigation>
|
||||
<ApplicationList v-if="index === 0" :list="applicationListData"></ApplicationList>
|
||||
<ApprovalRecords v-else></ApprovalRecords>
|
||||
<CustomTabBar :list="list" :default-index="index" @change="change"></CustomTabBar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { TabBarItem } from '@/typings'
|
||||
import ApplicationList from '@/pages/approval/components/ApplicationList.vue'
|
||||
import ApprovalRecords from '@/pages/approval/components/ApprovalRecords.vue'
|
||||
|
||||
const index = ref<number>(0)
|
||||
|
||||
@ -29,6 +33,78 @@
|
||||
}
|
||||
]
|
||||
|
||||
const applicationListData = ref<Array<object>>([
|
||||
{
|
||||
groupId: 138603,
|
||||
groupName: '出勤休假',
|
||||
sort: 1,
|
||||
processDefs: [
|
||||
{
|
||||
processDefId: 249155,
|
||||
processDefName: '请假',
|
||||
icon: 'https://file.hikvisionmall.com/test1/image/f39c654cd30a48d28ddf37e4b64de57a.png',
|
||||
version: '1735128632'
|
||||
},
|
||||
{
|
||||
processDefId: 249156,
|
||||
processDefName: '补卡',
|
||||
icon: 'https://file.hikvisionmall.com/test1/image/26209b6732f2439fae3c6dd34a39145e.png',
|
||||
version: '1704439843'
|
||||
},
|
||||
{
|
||||
processDefId: 249158,
|
||||
processDefName: '外出',
|
||||
icon: 'https://file.hikvisionmall.com/test1/image/5c76288745dd47a38c9e1093d9737976.png',
|
||||
version: '1704439843'
|
||||
},
|
||||
{
|
||||
processDefId: 249157,
|
||||
processDefName: '出差',
|
||||
icon: 'https://file.hikvisionmall.com/test1/image/df75579e70c2435e9f78d04fc401b451.png',
|
||||
version: '1704439843'
|
||||
},
|
||||
{
|
||||
processDefId: 347336,
|
||||
processDefName: '加班',
|
||||
icon: 'https://file.hikvisionmall.com/test1/image/e4f21377ea2443b3856b07674ba41c2a.png',
|
||||
version: '1711368134'
|
||||
},
|
||||
{
|
||||
processDefId: 891737,
|
||||
processDefName: '调休',
|
||||
icon: 'https://file.hikvisionmall.com/prod/image/3d134cc9657e4816ad6aa8ef206fbc89.png',
|
||||
version: '1735128832'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
groupId: 341473,
|
||||
groupName: 'test',
|
||||
sort: 2,
|
||||
processDefs: [
|
||||
{
|
||||
processDefId: 924255,
|
||||
processDefName: 'test1',
|
||||
icon: 'https://file.hikvisionmall.com/prod/image/3d134cc9657e4816ad6aa8ef206fbc89.png',
|
||||
version: '1736480449'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
groupId: 138604,
|
||||
groupName: '其他',
|
||||
sort: 999,
|
||||
processDefs: [
|
||||
{
|
||||
processDefId: 466818,
|
||||
processDefName: '访客预约',
|
||||
icon: 'https://file.hikmall.com/prod/image/5300a838119d462b9e1c17489603b6d8.png',
|
||||
version: '1715675086'
|
||||
}
|
||||
]
|
||||
}
|
||||
])
|
||||
|
||||
onLoad(options => {
|
||||
if (options.index) {
|
||||
index.value = Number(options.index)
|
||||
|
||||
58
src/pages/approval/components/ApplicationList.vue
Normal file
58
src/pages/approval/components/ApplicationList.vue
Normal file
@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<scroll-view class="flex-1 box-border" :scroll-y="true">
|
||||
<view class="mx-4 pt-4 flex flex-items-center text-3.5 font-bold">
|
||||
<view class="bg-#dfecff flex-1 px-3 py-6 rounded-2">
|
||||
<view>使用指南</view>
|
||||
</view>
|
||||
<view class="w-4"></view>
|
||||
<view class="bg-#feebda flex-1 px-3 py-6 rounded-2">
|
||||
<view>常见问题</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="py-4">
|
||||
<wd-collapse v-model="collapseRoot" custom-class="!bg-transparent !border-0">
|
||||
<wd-collapse-item
|
||||
v-for="group in list"
|
||||
:key="group.groupId"
|
||||
:name="group.groupName"
|
||||
:title="group.groupName"
|
||||
>
|
||||
<view
|
||||
v-for="(item, index) in group.processDefs"
|
||||
:key="item.processDefId"
|
||||
:class="[index === group.processDefs.length - 1 ? '' : 'mb-2']"
|
||||
class="flex flex-items-center bg-white px-3 py-3 mx-1 rounded-2"
|
||||
>
|
||||
<image :src="item.icon" class="w-7 h-7 rounded-2"></image>
|
||||
<view class="text-3.5 ml-2">{{ item.processDefName }}</view>
|
||||
</view>
|
||||
</wd-collapse-item>
|
||||
</wd-collapse>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const collapseRoot = ref<string[]>([])
|
||||
|
||||
onMounted(() => {
|
||||
collapseRoot.value = props.list.map(item => item.groupName)
|
||||
})
|
||||
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wd-collapse-item::after {
|
||||
height: 0 !important;
|
||||
}
|
||||
|
||||
:deep(.wd-collapse-item__header::after) {
|
||||
height: 0 !important;
|
||||
}
|
||||
</style>
|
||||
149
src/pages/approval/components/ApprovalRecords.vue
Normal file
149
src/pages/approval/components/ApprovalRecords.vue
Normal file
@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<view class="mx-4 mt-2">
|
||||
<wd-input
|
||||
class="px-2 py-0.6 rounded-1"
|
||||
placeholder="申请名称、发起人"
|
||||
v-model="search"
|
||||
clearable
|
||||
custom-class="border-0"
|
||||
:maxlength="50"
|
||||
prefix-icon="search"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</view>
|
||||
<wd-tabs v-model="currentIndex" class="pt-3" auto-line-width @click="handleChange">
|
||||
<wd-tab :title="item" v-for="(item, index) in tabs" :key="item" :name="index" />
|
||||
</wd-tabs>
|
||||
<swiper :current="currentIndex" @change="changeIndex">
|
||||
<swiper-item v-for="(item, index) in tabs" :key="item" class="flex flex-col">
|
||||
<view @click="closeOutside">
|
||||
<wd-drop-menu>
|
||||
<wd-drop-menu-item
|
||||
v-model="typeList[index]"
|
||||
:options="typeOptionList[index]"
|
||||
@change="typeChange"
|
||||
/>
|
||||
<wd-drop-menu-item
|
||||
v-model="dateList[index]"
|
||||
:options="dateOptions"
|
||||
@change="dateChange"
|
||||
/>
|
||||
</wd-drop-menu>
|
||||
</view>
|
||||
<scroll-view :scroll-y="true" class="flex-1 box-border">
|
||||
<view class="pt-2">
|
||||
<view
|
||||
v-for="item in 10"
|
||||
:key="item"
|
||||
class="mx-4 my-2 p-4 bg-white shadow-sm rounded-2 text-3.5"
|
||||
>
|
||||
<view class="flex flex-items-center mb-2">
|
||||
<view class="text-4.5 font-bold">请假</view>
|
||||
<view class="ml-a px-3 py-1 border-solid border-[#2bbbc3] color-#2bbbc3 rounded">
|
||||
通过
|
||||
</view>
|
||||
</view>
|
||||
<view class="mb-2">请假类型：年假</view>
|
||||
<view class="mb-2">开始时间：2025-12-31</view>
|
||||
<view class="mb-2">结束时间：2025-12-31</view>
|
||||
<view class="flex flex-items-center">
|
||||
<image class="w-8 h-8" src="/static/images/icon_default_avatar.png"></image>
|
||||
<view class="ml-4">xxx</view>
|
||||
<view class="ml-a">2025-12-25</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="py-6 mx-30%">
|
||||
<wd-divider color="#515357">已经到底了</wd-divider>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useQueue } from 'wot-design-uni'
|
||||
|
||||
const search = ref<string>('')
|
||||
|
||||
const currentIndex = ref<number>(0)
|
||||
|
||||
const tabs = ref<string[]>(['待办', '已办', '抄送我', '已发起'])
|
||||
|
||||
const { closeOutside } = useQueue()
|
||||
|
||||
const typeList = ref<Array<number>>([0, 0, 0, 0])
|
||||
const dateList = ref<Array<number>>([0, 0, 0, 0])
|
||||
|
||||
const typeOptionList = ref<Array<Array<Record<string, number>>>>([
|
||||
[
|
||||
{ label: '全部', value: 0 },
|
||||
{ label: '补卡', value: 1 },
|
||||
{ label: '请假', value: 2 }
|
||||
],
|
||||
[
|
||||
{ label: '全部', value: 0 },
|
||||
{ label: '调休', value: 1 }
|
||||
],
|
||||
[
|
||||
{ label: '全部', value: 0 },
|
||||
{ label: '补卡', value: 1 },
|
||||
{ label: '请假', value: 2 }
|
||||
],
|
||||
[
|
||||
{ label: '全部', value: 0 },
|
||||
{ label: '补卡', value: 1 },
|
||||
{ label: '请假', value: 2 }
|
||||
]
|
||||
])
|
||||
|
||||
const dateOptions = ref<Array<Record<string, number>>>([
|
||||
{ label: '全部日期', value: 0 },
|
||||
{ label: '近7日', value: 1 },
|
||||
{ label: '近14日', value: 2 },
|
||||
{ label: '近30日', value: 3 }
|
||||
])
|
||||
|
||||
function typeChange({ value }) {
|
||||
console.log(value)
|
||||
}
|
||||
|
||||
function dateChange({ value }) {
|
||||
console.log(value)
|
||||
}
|
||||
|
||||
const handleChange = value => {
|
||||
currentIndex.value = value.index
|
||||
}
|
||||
|
||||
const changeIndex = e => {
|
||||
currentIndex.value = e.detail.current
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wd-input::after {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.wd-drop-item {
|
||||
top: calc(var(--window-top) + 48px) !important;
|
||||
}
|
||||
|
||||
:deep(.wd-drop-menu__item.is-active .wd-drop-menu__item-title::after) {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
:deep(.wd-drop-menu__list) {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
:deep(.wd-tabs__nav-item) {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
:deep(.wd-tabs__nav-item.is-active) {
|
||||
font-weight: bold;
|
||||
color: #255cf7;
|
||||
}
|
||||
</style>
|
||||
@ -11,9 +11,9 @@
|
||||
<view class="h-[calc(100vh-50px)] flex flex-col">
|
||||
<TopNavigation :title="titleTab[curIndex]"></TopNavigation>
|
||||
<scroll-view class="flex-1 box-border" scroll-y>
|
||||
<view v-for="(item, index) in pages" :key="index" v-show="curIndex == index">
|
||||
<component :is="item"></component>
|
||||
</view>
|
||||
<AttendanceClockIn v-show="curIndex === 0"></AttendanceClockIn>
|
||||
<AttendanceStatistics v-show="curIndex === 1"></AttendanceStatistics>
|
||||
<AttendanceSet v-show="curIndex === 2"></AttendanceSet>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<CustomTabBar :list="list" :default-index="0" @change="change"></CustomTabBar>
|
||||
|
||||
BIN
src/static/images/icon_default_avatar.png
Normal file
BIN
src/static/images/icon_default_avatar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Loading…
x
Reference in New Issue
Block a user