sky/starwork-uniapp
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 完成申请详情页UI

Browse Source
This commit is contained in:
范鹏 2025-01-13 17:52:14 +08:00
parent 6a747ef5b9
commit 46f19f1808
6 changed files with 231 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/pages/approval/approval-detail.vue Normal file
View File

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

6
src/pages/approval/approval.vue
View File

@ -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>
<ApprovalRecords v-else></ApprovalRecords>
<ApplicationList v-show="index === 0" :list="applicationListData"></ApplicationList>
<view v-show="index === 1" class="flex-1 box-border">
<ApprovalRecords></ApprovalRecords>
</view>
<CustomTabBar :list="list" :default-index="index" @change="change"></CustomTabBar>
</view>
</template>

7
src/pages/approval/components/ApplicationList.vue
View File

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

61
src/pages/approval/components/ApprovalContent.vue Normal file
View File

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

81
src/pages/approval/components/ApprovalProcess.vue Normal file
View File

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

15
src/pages/approval/components/ApprovalRecords.vue
View File

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