feat: 完成申请详情页UI

src/pages/approval/approval-detail.vue

@@ -0,0 +1,66 @@
+<route lang="json5">
+{
+  style: {
+    navigationStyle: 'custom',
+    disableScroll: true
+  }
+}
+</route>
+<template>
+  <view class="h-100vh flex flex-col">
+    <TopNavigation title="详情"></TopNavigation>
+    <scroll-view class="flex-1 box-border" :scroll-y="true">
+      <view class="pb-5">
+        <ApprovalContent class="mt-2" />
+        <ApprovalProcess class="mt-2" />
+      </view>
+    </scroll-view>
+    <view class="pb-safe border-#eef0f5 border-t-solid">
+      <view class="flex flex-items-center flex-justify-around py-3">
+        <view class="py-2 px-13 bg-#ef2e2f color-white rounded-2">拒绝</view>
+        <view class="py-2 px-13 custom-bg-blue color-white rounded-2">同意</view>
+        <view class="custom-color-blue text-4" @click="showActions">更多</view>
+      </view>
+    </view>
+    <wd-action-sheet
+      v-model="show"
+      :actions="actions"
+      close-on-click-action
+      @close="close"
+      @select="select"
+    />
+  </view>
+</template>
+
+<script setup lang="ts">
+  import { useToast } from 'wot-design-uni'
+  import ApprovalContent from '@/pages/approval/components/ApprovalContent.vue'
+  import ApprovalProcess from '@/pages/approval/components/ApprovalProcess.vue'
+
+  const toast = useToast()
+
+  const show = ref<boolean>(false)
+  const actions = ref([
+    {
+      name: '专审'
+    },
+    {
+      name: '退回'
+    },
+    {
+      name: '取消'
+    }
+  ])
+
+  const showActions = () => {
+    show.value = true
+  }
+
+  const close = () => {
+    show.value = false
+  }
+
+  const select = ({ item, index }) => {
+    toast.show(`当前选中项: ${item.title}, 下标: ${index}`)
+  }
+</script>

src/pages/approval/approval.vue

@@ -9,8 +9,10 @@
 <template>
   <view class="h-100vh flex flex-col">
     <TopNavigation :title="index === 0 ? '发起申请' : '审批'"></TopNavigation>
-    <ApplicationList v-if="index === 0" :list="applicationListData"></ApplicationList>
+    <ApplicationList v-show="index === 0" :list="applicationListData"></ApplicationList>
-    <ApprovalRecords v-else></ApprovalRecords>
+    <view v-show="index === 1" class="flex-1 box-border">
+      <ApprovalRecords></ApprovalRecords>
+    </view>
     <CustomTabBar :list="list" :default-index="index" @change="change"></CustomTabBar>
   </view>
 </template>

src/pages/approval/components/ApplicationList.vue

@@ -22,6 +22,7 @@
             :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"
+            @click="toDetail(item)"
           >
             <image :src="item.icon" class="w-7 h-7 rounded-2"></image>
             <view class="text-3.5 ml-2">{{ item.processDefName }}</view>
@@ -45,6 +46,12 @@
       required: true
     }
   })
+
+  const toDetail = (item: Record<string, any>) => {
+    uni.navigateTo({
+      url: `/pages/approval/create-application?id=${item.processDefId}&title=${item.processDefName}`
+    })
+  }
 </script>
 
 <style lang="scss" scoped>

src/pages/approval/components/ApprovalContent.vue

@@ -0,0 +1,61 @@
+<template>
+  <view class="bg-white rounded-2 py-2 px-4 mx-4">
+    <view class="flex flex-items-center">
+      <image
+        src="/static/images/icon_default_avatar.png"
+        class="w-10 h-10"
+        mode="aspectFill"
+      ></image>
+      <view class="ml-4">
+        <view class="font-bold text-4.5">请假</view>
+        <view class="text-3.5 mt-1">xxx</view>
+      </view>
+      <view
+        class="ml-a rounded py-0.5 px-1.5 text-3.5 border-solid border-1 border-#ef811c color-#ef811c"
+      >
+        审批中
+      </view>
+    </view>
+    <view class="my-2 h-1px w-full bg-#eef0f5"></view>
+    <view class="custom-color-black">
+      <view>所属组织：</view>
+      <view class="mt-2 break-all">123132123的互联</view>
+    </view>
+    <view class="my-2 h-1px w-full bg-#eef0f5"></view>
+    <view class="custom-color-black">
+      <view>审批编号：</view>
+      <view class="mt-2 break-all">845465465465465465456</view>
+    </view>
+    <view class="my-2 h-1px w-full bg-#eef0f5"></view>
+    <view class="custom-color-black">
+      <view>请假类型：</view>
+      <view class="mt-2 break-all">年假</view>
+    </view>
+    <view class="my-2 h-1px w-full bg-#eef0f5"></view>
+    <view class="custom-color-black">
+      <view>开始时间：</view>
+      <view class="mt-2 break-all">2025-01-10</view>
+    </view>
+    <view class="my-2 h-1px w-full bg-#eef0f5"></view>
+    <view class="custom-color-black">
+      <view>结束时间：</view>
+      <view class="mt-2 break-all">2025-01-10</view>
+    </view>
+    <view class="my-2 h-1px w-full bg-#eef0f5"></view>
+    <view class="custom-color-black">
+      <view>请假时长(天)：</view>
+      <view class="mt-2 break-all">1.0</view>
+    </view>
+    <view class="my-2 h-1px w-full bg-#eef0f5"></view>
+    <view class="custom-color-black">
+      <view>请假原因：</view>
+      <view class="mt-2 break-all">
+        请假请假请假请假请假请假请假请假请假请假请假请假请假请假请假请假请假请假请假请假请假请假请假请假请假请假请假1111111111111111111111
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss"></style>

src/pages/approval/components/ApprovalProcess.vue

@@ -0,0 +1,81 @@
+<template>
+  <view class="bg-white rounded-2 py-2 px-4 mx-4">
+    <view class="py-2 text-4">审批流程</view>
+    <wd-steps :active="1" vertical>
+      <wd-step icon="link">
+        <template v-slot:title>
+          <view class="custom-color-black text-3.5">
+            <view class="flex-items-center flex">
+              <view>发起申请</view>
+              <view class="ml-a color-#7e807f text-3">2504-12-25 20:11</view>
+            </view>
+            <view class="my-2">
+              <view class="py-1 flex flex-items-center w-fit rounded-4 bg-#f3f5fa">
+                <image
+                  src="/static/images/icon_default_avatar.png"
+                  class="h-6 w-6 rounded-50%"
+                  mode="aspectFill"
+                ></image>
+                <view class="mx-2">xxx</view>
+              </view>
+            </view>
+          </view>
+        </template>
+      </wd-step>
+      <wd-step icon="link">
+        <template v-slot:title>
+          <view class="custom-color-black text-3.5">
+            <view class="flex-items-center flex">
+              <view>审批节点</view>
+              <view
+                class="ml-3 rounded-4 py-0.5 text-3 px-2 border-solid border-#ef811c border-1 color-#ef811c"
+              >
+                审批中
+              </view>
+            </view>
+            <view class="pt-2 color-#7e807f text-3">1人通过即可</view>
+            <view class="my-2">
+              <view
+                v-for="item in 4"
+                :key="item"
+                class="mb-2 py-1 flex flex-items-center w-fit rounded-4 bg-#f3f5fa"
+              >
+                <image
+                  src="/static/images/icon_default_avatar.png"
+                  class="h-6 w-6 rounded-50%"
+                  mode="aspectFill"
+                ></image>
+                <view class="mx-2">xxx</view>
+              </view>
+            </view>
+          </view>
+        </template>
+      </wd-step>
+      <wd-step icon="link">
+        <template v-slot:title>
+          <view class="custom-color-black text-3.5">
+            <view class="flex-items-center flex">
+              <view>抄送节点</view>
+            </view>
+            <view class="my-2">
+              <view
+                v-for="item in 4"
+                :key="item"
+                class="mb-2 py-1 flex flex-items-center w-fit rounded-4 bg-#f3f5fa"
+              >
+                <image
+                  src="/static/images/icon_default_avatar.png"
+                  class="h-6 w-6 rounded-50%"
+                  mode="aspectFill"
+                ></image>
+                <view class="mx-2">xxx</view>
+              </view>
+            </view>
+          </view>
+        </template>
+      </wd-step>
+    </wd-steps>
+  </view>
+</template>
+
+<script setup lang="ts"></script>

src/pages/approval/components/ApprovalRecords.vue

@@ -36,10 +36,13 @@
             v-for="item in 10"
             :key="item"
             class="mx-4 my-2 p-4 bg-white shadow-sm rounded-2 text-3.5"
+            @click="toDetail(item)"
           >
             <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
+                class="ml-a px-3 py-1 border-solid border-[#2bbbc3] border-1 color-#2bbbc3 rounded"
+              >
                 通过
               </view>
             </view>
@@ -104,14 +107,20 @@
     { label: '近30日', value: 3 }
   ])
 
-  function typeChange({ value }) {
+  const typeChange = ({ value }) => {
     console.log(value)
   }
 
-  function dateChange({ value }) {
+  const dateChange = ({ value }) => {
     console.log(value)
   }
 
+  const toDetail = item => {
+    uni.navigateTo({
+      url: '/pages/approval/approval-detail'
+    })
+  }
+
   const handleChange = value => {
     currentIndex.value = value.index
   }