145 lines
4.6 KiB
Vue
145 lines
4.6 KiB
Vue
<template>
|
|
<view>
|
|
<CuNavbar title="请假申请">
|
|
<template #right>
|
|
<view
|
|
@click="goPath('/pages/ask-leave/create')"
|
|
class="text-24rpx text-white"
|
|
>申请</view
|
|
>
|
|
</template>
|
|
</CuNavbar>
|
|
<uv-sticky bgColor="#fff">
|
|
<uv-tabs
|
|
:activeStyle="{ color: '#ee2c37' }"
|
|
:scrollable="false"
|
|
lineColor="#ee2c37"
|
|
:list="tabList"
|
|
@change="tabChange"
|
|
></uv-tabs>
|
|
</uv-sticky>
|
|
<MescrollItem
|
|
ref="mescrollItem0"
|
|
:top="88"
|
|
:i="0"
|
|
:index="tabIndex"
|
|
:apiUrl="tabList[0].apiUrl"
|
|
>
|
|
<template v-slot="{ list }">
|
|
<view class="space-y-15rpx p-base">
|
|
<view
|
|
v-for="item in list" :key="item.id"
|
|
class="card-shadow bg-white rounded-19rpx p-base space-y-10rpx"
|
|
@click="applyDetail(item)"
|
|
>
|
|
<view class="text-30rpx">请假申请</view>
|
|
<view class="text-24rpx text-hex-999999 flex">
|
|
<view class="text-24rpx w-140rpx">请假类型</view>
|
|
<view class="">{{ item.type?.name }}</view>
|
|
</view>
|
|
<view class="text-24rpx text-hex-999999 flex">
|
|
<view class="text-24rpx w-140rpx">请假事由</view>
|
|
<view class="">{{ item.reason }}</view>
|
|
</view>
|
|
<view class="flex items-center text-hex-999999 flex">
|
|
<view class="text-24rpx w-140rpx">申请时间</view>
|
|
<view class="text-24rpx">{{ item.created_format }}</view>
|
|
</view>
|
|
<view :style="{ color: statusFun( item.workflow_check.check_status,'statusExpense','color')}" class="text-24rpx">{{ item.workflow_check.check_status_text }}</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</MescrollItem>
|
|
<MescrollItem
|
|
ref="mescrollItem1"
|
|
:top="88"
|
|
:i="1"
|
|
:index="tabIndex"
|
|
:apiUrl="tabList[1].apiUrl"
|
|
:params="tabList[1].params"
|
|
>
|
|
<template v-slot="{ list }">
|
|
<view class="space-y-15rpx p-base">
|
|
<view
|
|
v-for="item in list" :key="item.id"
|
|
class="card-shadow bg-white rounded-19rpx p-base space-y-10rpx"
|
|
@click="checkDetail(item)"
|
|
>
|
|
<view class="text-30rpx">请假申请</view>
|
|
<view class="text-24rpx text-hex-999999 flex">
|
|
<view class="text-24rpx w-140rpx">申请人</view>
|
|
<view class="">{{ item.check.subject.employee.name }}</view>
|
|
</view>
|
|
<view class="text-24rpx text-hex-999999 flex">
|
|
<view class="text-24rpx w-140rpx">请假类型</view>
|
|
<view class="">{{ item.check.subject.type.name }}</view>
|
|
</view>
|
|
<view class="text-24rpx text-hex-999999 flex">
|
|
<view class="text-24rpx w-140rpx">请假事由</view>
|
|
<view class="">{{ item.check.subject.reason }}</view>
|
|
</view>
|
|
<view class="flex items-center text-hex-999999 flex">
|
|
<view class="text-24rpx w-140rpx">申请时间</view>
|
|
<view class="text-24rpx">{{ item.check.subject.created_format }}</view>
|
|
</view>
|
|
<view :style="{ color: statusFun( item.check_status,'statusExpense','color')}" class="text-24rpx">{{ item.check_status_text }}</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</MescrollItem>
|
|
</view>
|
|
</template>
|
|
<script setup>
|
|
import CuNavbar from '@/components/cu-navbar/index'
|
|
import { ref } from 'vue'
|
|
import { onPageScroll, onReachBottom, onShow } from '@dcloudio/uni-app'
|
|
import useMescrollMore from '@/uni_modules/mescroll-uni/hooks/useMescrollMore.js'
|
|
import MescrollItem from '@/components/mescroll-api/more.vue'
|
|
import statusFun from '@/utils/status'
|
|
const tabList = ref([
|
|
{
|
|
name: '我的请假',
|
|
apiUrl: '/hr/holidays',
|
|
},
|
|
{
|
|
name: '请假审核',
|
|
apiUrl: '/workflow',
|
|
params: {
|
|
subject_type: 'holiday_applies',
|
|
include: 'check.subject.employee,check.subject.type',
|
|
},
|
|
},
|
|
])
|
|
const mescrollItem0 = ref(null)
|
|
const mescrollItem1 = ref(null)
|
|
|
|
const mescrollItems = [mescrollItem0, mescrollItem1]
|
|
const { tabIndex, getMescroll, scrollToLastY } = useMescrollMore(
|
|
mescrollItems,
|
|
onPageScroll,
|
|
onReachBottom
|
|
)
|
|
const goPath = (url) => {
|
|
uni.navigateTo({
|
|
url,
|
|
})
|
|
}
|
|
const tabChange = ({ index }) => {
|
|
tabIndex.value = index
|
|
scrollToLastY()
|
|
}
|
|
|
|
const applyDetail = (item) => {
|
|
uni.navigateTo({
|
|
url: `/pages/ask-leave/detail?id=${item.id}`,
|
|
})
|
|
}
|
|
|
|
const checkDetail = (item) => {
|
|
uni.navigateTo({
|
|
url: `/pages/audits/detail?id=${item.id}&type=${item.check.subject_type}`
|
|
})
|
|
}
|
|
|
|
</script>
|