CRM请假
This commit is contained in:
jiangyanshan
237
src/pages/business/CRM/leave/myApply.vue
Normal file
237
src/pages/business/CRM/leave/myApply.vue
Normal file
@@ -0,0 +1,237 @@
|
||||
<template>
|
||||
<view class="con-body">
|
||||
<view class="con-bg">
|
||||
<customHeader ref="customHeaderRef" :title="'我的表单'" :leftFlag="true">
|
||||
</customHeader>
|
||||
<!-- #ifdef H5 -->
|
||||
<view style="height:50rpx"></view>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- 高度来避免头部遮挡 -->
|
||||
<view class="top-height"></view>
|
||||
|
||||
<view class="white-bg">
|
||||
<view class="tabs-container">
|
||||
<view class="tabs-scorll">
|
||||
<view class="tabs-header">
|
||||
<view v-for="(tab, index) in tabList" :key="index"
|
||||
:class="['tab-item', { 'active': activeTab === index }]"
|
||||
@click="switchTab(index)">
|
||||
{{ tab }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="white-bg-2" v-for="item in detailList">
|
||||
<view class="report-list" @click="showDetail(item)">
|
||||
<view class="title" style="margin-top: 20rpx;font-size: 30rpx">
|
||||
{{ item.typeval=="1"?'全天':item.typeval=="2"?'前半个班次':'后半个班次' }}
|
||||
<label v-if="item.applyType=='请假'"
|
||||
style="float: right;color: #03ca03;">
|
||||
{{ item.applyType}}</label>
|
||||
<label v-if="item.applyType=='销假'"
|
||||
style="float: right;color: #eaa303;">
|
||||
{{ item.applyType}}</label>
|
||||
</view>
|
||||
<view class="r-list">
|
||||
<view class="r-left" style="font-size: 30rpx;font-weight: 500;">
|
||||
申请日期：{{ item.applyDate }}
|
||||
（ <label v-if="item.status=='待审批'"
|
||||
style="color: #03ca03;">{{ item.reviewStatus }}</label>
|
||||
<label v-if="item.status=='审批中'"
|
||||
style="color: #03ca03;">{{ item.reviewStatus }}</label>
|
||||
<label v-if="item.status=='驳回'"
|
||||
style="color: #fa3303;">{{ item.reviewStatus }}</label>
|
||||
<label v-if="item.status=='完成'"
|
||||
style="color: #03aaf3;">{{ item.reviewStatus }}</label>）
|
||||
</view>
|
||||
</view>
|
||||
<view class="r-list">
|
||||
<view class="r-left">休假日期</view>
|
||||
<view class="r-right">{{ item.startDate }} 至 {{ item.endDate }}
|
||||
（ <label v-if="item.applyType=='请假'" style="color: #03ca03;">
|
||||
{{ item.days.replace('.0','')}}天</label>
|
||||
<label v-if="item.applyType=='销假'" style="color: #eaa303;">
|
||||
{{ item.days.replace('.0','')}}天</label> ）
|
||||
</view>
|
||||
</view>
|
||||
<view class="r-list">
|
||||
<view class="r-left">详细说明</view>
|
||||
<view v-if="item.reason && item.reason.length <= 18"
|
||||
class="r-right">{{ item.reason }}</view>
|
||||
</view>
|
||||
<view class="border-bottom" style="margin: 20rpx 0;"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize"
|
||||
:current="pageCurrent" :total="total" @change="change" /></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
reactive
|
||||
} from 'vue'
|
||||
import {
|
||||
onShow
|
||||
} from '@dcloudio/uni-app'
|
||||
import customHeader from '@/components/customHeader.vue'
|
||||
import {
|
||||
getNavBarPaddingTop
|
||||
} from '@/utils/system.js'
|
||||
|
||||
import {
|
||||
getLeaveApplyList
|
||||
} from '@/api/crm/activity/activity';
|
||||
|
||||
// 获取导航栏高度用于内容区域padding
|
||||
const navBarPaddingTop = ref(0);
|
||||
onMounted(() => {
|
||||
navBarPaddingTop.value = getNavBarPaddingTop() * 2;
|
||||
getlist();
|
||||
})
|
||||
|
||||
onShow(() => {
|
||||
uni.$on('isRefresh', function() {
|
||||
getlist();
|
||||
})
|
||||
})
|
||||
|
||||
const pageSize = ref(4);
|
||||
const pageCurrent = ref(1);
|
||||
const loading = ref(false);
|
||||
let tabList = ref([])
|
||||
|
||||
let total = ref(0);
|
||||
const totalAll = ref(0);
|
||||
const totalReview = ref(0);
|
||||
const totalReject = ref(0);
|
||||
const totalPass = ref(0);
|
||||
|
||||
|
||||
let activeTab = ref(0);
|
||||
|
||||
let detailList = ref([])
|
||||
let detailLists = ref([])
|
||||
|
||||
let reviewList = ref([])
|
||||
let rejectList = ref([])
|
||||
let passList = ref([])
|
||||
|
||||
const getlist = async () => {
|
||||
loading.value = true
|
||||
|
||||
let res = await getLeaveApplyList();
|
||||
detailLists.value = res.rows;
|
||||
reviewList.value = res.rows.filter(t => t.status == '待审批' || t.status == '审批中')
|
||||
rejectList.value = res.rows.filter(t => t.status == '驳回')
|
||||
passList.value = res.rows.filter(t => t.status == '完成')
|
||||
|
||||
total.value = res.total
|
||||
totalAll.value = res.total
|
||||
totalReview.value = reviewList.value.length
|
||||
totalReject.value = rejectList.value.length
|
||||
totalPass.value = passList.value.length
|
||||
|
||||
change({
|
||||
current: 1
|
||||
})
|
||||
loading.value = false
|
||||
|
||||
let all = '全部(' + totalAll.value + ')'
|
||||
let review = '审核中(' + totalReview.value + ')'
|
||||
let reject = '已驳回(' + totalReject.value + ')'
|
||||
let pass = '已通过(' + totalPass.value + ')'
|
||||
|
||||
tabList.value = [all, review, reject, pass]
|
||||
}
|
||||
|
||||
const switchTab = (index) => {
|
||||
activeTab.value = index
|
||||
|
||||
change({
|
||||
current: 1
|
||||
})
|
||||
}
|
||||
|
||||
// 分页触发
|
||||
let change = (e) => {
|
||||
pageCurrent.value = e.current
|
||||
|
||||
let end = pageSize.value * e.current
|
||||
let start = end - pageSize.value
|
||||
|
||||
if (activeTab.value == 0) {
|
||||
detailList.value = detailLists.value.slice(start, end)
|
||||
total.value = totalAll.value
|
||||
} else if (activeTab.value == 1) {
|
||||
detailList.value = reviewList.value.slice(start, end)
|
||||
total.value = totalReview.value
|
||||
} else if (activeTab.value == 2) {
|
||||
detailList.value = rejectList.value.slice(start, end)
|
||||
total.value = totalReject.value
|
||||
} else if (activeTab.value == 3) {
|
||||
detailList.value = passList.value.slice(start, end)
|
||||
total.value = totalPass.value
|
||||
}
|
||||
}
|
||||
|
||||
// 跳转
|
||||
let showDetail = (item) => {
|
||||
uni.navigateTo({
|
||||
url: "/pages/business/CRM/leave/myApplyDetail?data=" + encodeURIComponent(JSON
|
||||
.stringify(item))
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.apply-row {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.border-bottom {
|
||||
margin: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tabs-header {
|
||||
display: flex;
|
||||
height: 80rpx;
|
||||
background: #fff;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.tab-item.active {
|
||||
color: #007AFF;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tab-item.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 150rpx;
|
||||
height: 4rpx;
|
||||
background-color: #007AFF;
|
||||
}
|
||||
|
||||
:deep(.report-list .r-list) {
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user