You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

404 lines
14 KiB

2 months ago
<template>
<view>
<u-navbar bgColor="#ffffff" :placeholder="true" titleStyle="font-weight:600" title="调班审批" :autoBack="true">
</u-navbar>
<u-tabs :list="list1" @change="clicktabs" :current="tabIndex" :scrollable="false" lineWidth="27" gutter="25"
:activeStyle="{
color: '#1890FF',
fontWeight: 'bold',
transform: 'scale(1.25)'
}" :inactiveStyle="{
color: '#999999',
transform: 'scale(1)'
}" itemStyle=" height: 78rpx;width:80rpx" style="background-color: #fff;white-space: nowrap !important;"></u-tabs>
<swiper :current="tabIndex" @change="tabChange" :style="fullHeight" class="home-data">
<swiper-item v-if="isCaptain==='Y'">
<view v-if="dspList.length === 0"
style="display: flex;flex-direction: column;align-items: center;justify-content: center;margin-top: 200rpx;">
<image src="../../../../static/images/none.png" style="width: 316rpx;height: 181rpx;"></image>
<span style="color: #9f9f9f;margin-top: 30rpx;">暂无记录~</span>
</view>
<scroll-view scroll-y="true" enableBackToTop="true" style="height: 100%;">
<view v-for="(item,index) in dspList" :key="index" style="margin-bottom: 25rpx;"
@click="gotoShenpi(item.id)">
<!-- 日期 -->
<view class="cardTime">{{item.createTime}}</view>
<!-- 卡片 -->
<view class="cardInfo">
<!-- 人员信息 -->
<view class="cardHead">
<view class="firstName">{{item.applyTransfer.substring(0,1)}}</view>
<view>
<view style="font-weight: bold;font-size: 32rpx;color: #333333;">
{{item.applyTransfer}}
</view>
<view style="font-weight: 400;font-size: 24rpx;color: #999999;">调班申请</view>
</view>
</view>
<!-- 调班信息 -->
<view class="cardBottom">
<u-row style="margin-bottom: 20rpx;">
<u-col span="3" style="color: #7D858E;">调班原因</u-col>
<u-col span="9" style="color: #333333;">{{item.applyReason}}</u-col>
</u-row>
<u-row style="margin-bottom: 20rpx;">
<u-col span="3" style="color: #7D858E;">代班人</u-col>
<u-col span="9" style="color: #333333;">{{item.replaceDutyName}}</u-col>
</u-row>
<u-row style="margin-bottom: 20rpx;">
<u-col span="3" style="color: #7D858E;">开始时间</u-col>
<u-col span="9" style="color: #333333;">{{item.transferBeginDate}}</u-col>
</u-row>
<u-row>
<u-col span="3" style="color: #7D858E;">结束时间</u-col>
<u-col span="9" style="color: #333333;">{{item.transferEndDate}}</u-col>
</u-row>
</view>
<view style="position: absolute;top: 25rpx;right: 44rpx;" v-if="item.status === '0'">
<image src="../../../../static/images/fireman/shenhe.png"
style="width: 206rpx;height: 182rpx">
</image>
</view>
<view style="position: absolute;top: 25rpx;right: 44rpx;" v-if="item.status === '1'">
<image src="../../../../static/images/fireman/tongguo.png"
style="width: 206rpx;height: 182rpx">
</image>
</view>
<view style="position: absolute;top: 25rpx;right: 44rpx;" v-if="item.status === '2'">
<image src="../../../../static/images/fireman/bohui.png"
style="width: 206rpx;height: 182rpx">
</image>
</view>
</view>
</view>
</scroll-view>
</swiper-item>
<swiper-item>
<view v-if="allList.length === 0"
style="display: flex;flex-direction: column;align-items: center;justify-content: center;margin-top: 200rpx;">
<image src="../../../../static/images/none.png" style="width: 316rpx;height: 181rpx;"></image>
<span style="color: #9f9f9f;margin-top: 30rpx;">暂无记录~</span>
</view>
<scroll-view scroll-y="true" enableBackToTop="true" style="height: 100%;">
<view v-for="(item,index) in allList" :key="index" style="margin-top: 25rpx;">
<!-- 日期 -->
<view class="cardTime">{{item.createTime}}</view>
<!-- 卡片 -->
<view class="cardInfo">
<!-- 人员信息 -->
<view class="cardHead">
<view class="firstName">{{item.applyTransfer.substring(0,1)}}</view>
<view>
<view style="font-weight: bold;font-size: 32rpx;color: #333333;">
{{item.applyTransfer}}
</view>
<view style="font-weight: 400;font-size: 24rpx;color: #999999;">调班申请</view>
</view>
</view>
<!-- 调班信息 -->
<view class="cardBottom">
<u-row style="margin-bottom: 20rpx;">
<u-col span="3" style="color: #7D858E;">调班原因</u-col>
<u-col span="9" style="color: #333333;">{{item.applyReason}}</u-col>
</u-row>
<u-row style="margin-bottom: 20rpx;">
<u-col span="3" style="color: #7D858E;">代班人</u-col>
<u-col span="9" style="color: #333333;">{{item.replaceDutyName}}</u-col>
</u-row>
<u-row style="margin-bottom: 20rpx;">
<u-col span="3" style="color: #7D858E;">开始时间</u-col>
<u-col span="9" style="color: #333333;">{{item.transferBeginDate}}</u-col>
</u-row>
<u-row>
<u-col span="3" style="color: #7D858E;">结束时间</u-col>
<u-col span="9" style="color: #333333;">{{item.transferEndDate}}</u-col>
</u-row>
</view>
<view style="position: absolute;top: 25rpx;right: 44rpx;" v-if="item.status === '0'">
<image src="../../../../static/images/fireman/shenhe.png"
style="width: 206rpx;height: 182rpx">
</image>
</view>
<view style="position: absolute;top: 25rpx;right: 44rpx;" v-if="item.status === '1'">
<image src="../../../../static/images/fireman/tongguo.png"
style="width: 206rpx;height: 182rpx">
</image>
</view>
<view style="position: absolute;top: 25rpx;right: 44rpx;" v-if="item.status === '2'">
<image src="../../../../static/images/fireman/bohui.png"
style="width: 206rpx;height: 182rpx">
</image>
</view>
</view>
</view>
</scroll-view>
</swiper-item>
<swiper-item>
<view v-if="tgList.length === 0"
style="display: flex;flex-direction: column;align-items: center;justify-content: center;margin-top: 200rpx;">
<image src="../../../../static/images/none.png" style="width: 316rpx;height: 181rpx;"></image>
<span style="color: #9f9f9f;margin-top: 30rpx;">暂无记录~</span>
</view>
<scroll-view scroll-y="true" enableBackToTop="true" style="height: 100%;">
<view v-for="(item,index) in tgList" :key="index" style="margin-bottom: 25rpx;">
<!-- 日期 -->
<view class="cardTime">{{item.createTime}}</view>
<!-- 卡片 -->
<view class="cardInfo">
<!-- 人员信息 -->
<view class="cardHead">
<view class="firstName">{{item.applyTransfer.substring(0,1)}}</view>
<view>
<view style="font-weight: bold;font-size: 32rpx;color: #333333;">
{{item.applyTransfer}}
</view>
<view style="font-weight: 400;font-size: 24rpx;color: #999999;">调班申请</view>
</view>
</view>
<!-- 调班信息 -->
<view class="cardBottom">
<u-row style="margin-bottom: 20rpx;">
<u-col span="3" style="color: #7D858E;">调班原因</u-col>
<u-col span="9" style="color: #333333;">{{item.applyReason}}</u-col>
</u-row>
<u-row style="margin-bottom: 20rpx;">
<u-col span="3" style="color: #7D858E;">代班人</u-col>
<u-col span="9" style="color: #333333;">{{item.replaceDutyName}}</u-col>
</u-row>
<u-row style="margin-bottom: 20rpx;">
<u-col span="3" style="color: #7D858E;">开始时间</u-col>
<u-col span="9" style="color: #333333;">{{item.transferBeginDate}}</u-col>
</u-row>
<u-row>
<u-col span="3" style="color: #7D858E;">结束时间</u-col>
<u-col span="9" style="color: #333333;">{{item.transferEndDate}}</u-col>
</u-row>
</view>
<view style="position: absolute;top: 25rpx;right: 44rpx;" v-if="item.status === '0'">
<image src="../../../../static/images/fireman/shenhe.png"
style="width: 206rpx;height: 182rpx">
</image>
</view>
<view style="position: absolute;top: 25rpx;right: 44rpx;" v-if="item.status === '1'">
<image src="../../../../static/images/fireman/tongguo.png"
style="width: 206rpx;height: 182rpx">
</image>
</view>
<view style="position: absolute;top: 25rpx;right: 44rpx;" v-if="item.status === '2'">
<image src="../../../../static/images/fireman/bohui.png"
style="width: 206rpx;height: 182rpx">
</image>
</view>
</view>
</view>
</scroll-view>
</swiper-item>
<swiper-item>
<view v-if="bhList.length === 0"
style="display: flex;flex-direction: column;align-items: center;justify-content: center;margin-top: 200rpx;">
<image src="../../../../static/images/none.png" style="width: 316rpx;height: 181rpx;"></image>
<span style="color: #9f9f9f;margin-top: 30rpx;">暂无记录~</span>
</view>
<scroll-view scroll-y="true" enableBackToTop="true" style="height: 100%;">
<view v-for="(item,index) in bhList" :key="index" style="margin-bottom: 25rpx;">
<!-- 日期 -->
<view class="cardTime">{{item.createTime}}</view>
<!-- 卡片 -->
<view class="cardInfo">
<!-- 人员信息 -->
<view class="cardHead">
<view class="firstName">{{item.applyTransfer.substring(0,1)}}</view>
<view>
<view style="font-weight: bold;font-size: 32rpx;color: #333333;">
{{item.applyTransfer}}
</view>
<view style="font-weight: 400;font-size: 24rpx;color: #999999;">调班申请</view>
</view>
</view>
<!-- 调班信息 -->
<view class="cardBottom">
<u-row style="margin-bottom: 20rpx;">
<u-col span="3" style="color: #7D858E;">调班原因</u-col>
<u-col span="9" style="color: #333333;">{{item.applyReason}}</u-col>
</u-row>
<u-row style="margin-bottom: 20rpx;">
<u-col span="3" style="color: #7D858E;">代班人</u-col>
<u-col span="9" style="color: #333333;">{{item.replaceDutyName}}</u-col>
</u-row>
<u-row style="margin-bottom: 20rpx;">
<u-col span="3" style="color: #7D858E;">开始时间</u-col>
<u-col span="9" style="color: #333333;">{{item.transferBeginDate}}</u-col>
</u-row>
<u-row>
<u-col span="3" style="color: #7D858E;">结束时间</u-col>
<u-col span="9" style="color: #333333;">{{item.transferEndDate}}</u-col>
</u-row>
</view>
<view style="position: absolute;top: 25rpx;right: 44rpx;" v-if="item.status === '0'">
<image src="../../../../static/images/fireman/shenhe.png"
style="width: 206rpx;height: 182rpx">
</image>
</view>
<view style="position: absolute;top: 25rpx;right: 44rpx;" v-if="item.status === '1'">
<image src="../../../../static/images/fireman/tongguo.png"
style="width: 206rpx;height: 182rpx">
</image>
</view>
<view style="position: absolute;top: 25rpx;right: 44rpx;" v-if="item.status === '2'">
<image src="../../../../static/images/fireman/bohui.png"
style="width: 206rpx;height: 182rpx">
</image>
</view>
</view>
</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
</template>
<script>
import {
listInfoForApp
} from "@/api/fireman/tiaoban.js"
export default {
data() {
return {
isCaptain: 'N', //是否队长
allList: [], //我的申请
tgList: [], //审批通过
dspList: [], //待审批
bhList: [], //驳回
fullHeight: '',
tabIndex: 0,
list1: [{
name: "我的审批"
}, {
name: "我的申请"
},
{
name: "审批通过"
},
{
name: '审批驳回'
}
],
};
},
mounted() {
this.getList()
},
onReady() {
let view = uni.createSelectorQuery().select(".home-data");
view.boundingClientRect(data => {
this.fullHeight = 'height:' + "calc(100vh - " + (data.top + 120) +
"rpx)";
}).exec();
},
methods: {
getList() {
listInfoForApp().then(res => {
this.allList = res.allList
this.tgList = res.tgList
this.dspList = res.dspList
this.bhList = res.bhList
this.isCaptain = res.isCaptain; //是否队长
if (this.isCaptain == 'N') {
this.list1 = [{
name: "我的申请"
},
{
name: "审批通过"
},
{
name: '审批驳回'
}
]
}
console.log(res, "调班审核");
})
},
// 管理员跳转审批页面
gotoShenpi(id) {
this.$tab.navigateTo(`/pages/indexpage/fireMan/shenpi/detail/detail?id=${id}`)
},
// tabs点击切换
clicktabs(e) {
this.switchTab(e.index);
},
// 轮播图切换
tabChange(e) {
let index = e.target.current || e.detail.current; // 获取到当前移动到第几个
this.switchTab(index);
},
//优化---当index相同时不执行代码
switchTab(index) {
if (this.tabIndex == index) {
return;
} else {
this.tabIndex = index;
}
},
}
}
</script>
<style lang="scss" scoped>
page {
// padding: 40rpx 30rpx;
box-sizing: border-box !important;
.home-data {
padding: 0 30rpx;
}
.cardTime {
font-family: Noto Sans S Chinese;
font-weight: 400;
font-size: 26rpx;
color: #666666;
margin-bottom: 28rpx;
}
.cardInfo {
position: relative;
width: 690rpx;
height: 385rpx;
background: #FFFFFF;
box-shadow: 0rpx 6rpx 8rpx 0rpx rgba(190, 207, 228, 0.4);
border-radius: 10rpx;
.cardHead {
padding: 23rpx 33rpx;
display: flex;
border-bottom: 1rpx solid #EEEEEE;
.firstName {
width: 70rpx;
height: 74rpx;
background: #1890FF;
border-radius: 10rpx;
font-family: Noto Sans S Chinese;
font-weight: bold;
font-size: 30rpx;
color: #FFFFFF;
line-height: 68rpx;
text-align: center;
margin-right: 24rpx;
}
}
.cardBottom {
padding: 29rpx 36rpx;
}
}
}
</style>