feat: 完成审批发起申请和审批中心的UI

src/pages/approval/approval.vue

@@ -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)

src/pages/approval/components/ApplicationList.vue

@@ -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>

src/pages/approval/components/ApprovalRecords.vue

@@ -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>

src/pages/attendance/attendance.vue

@@ -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">
+      <AttendanceClockIn v-show="curIndex === 0"></AttendanceClockIn>
-        <component :is="item"></component>
+      <AttendanceStatistics v-show="curIndex === 1"></AttendanceStatistics>
-      </view>
+      <AttendanceSet v-show="curIndex === 2"></AttendanceSet>
     </scroll-view>
   </view>
   <CustomTabBar :list="list" :default-index="0" @change="change"></CustomTabBar>