318 lines
8.3 KiB
Vue
318 lines
8.3 KiB
Vue
<template>
|
||
<view class="con-body">
|
||
<view class="con-bg">
|
||
<!-- 头部 -->
|
||
<customHeader ref="customHeaderRef" :title="'审批详情'" :leftFlag="true" :rightFlag="false">
|
||
</customHeader>
|
||
|
||
<!-- 高度来避免头部遮挡 -->
|
||
<view class="top-height"></view>
|
||
|
||
<view class="white-bg">
|
||
<view class="example">
|
||
<view v-if="baseFormData.applyType != '请假'" style="display: flex;font-size: 14px;padding-top: 32rpx;
|
||
background-color: #03aa0315;height: 76rpx;">
|
||
<view class="r-left">
|
||
<label style="color: #03aa03;font-size: 34rpx;
|
||
padding: 32rpx;background-color: #dcd8d933;">
|
||
{{ baseFormData.days.replace('.0', '') }} 天</label>
|
||
</view>
|
||
<view style="margin-top: -20rpx;">
|
||
<view class="r-right" style="margin-left: 30rpx;">
|
||
{{ baseFormData.startDate }}
|
||
至
|
||
{{ baseFormData.endDate }}
|
||
</view>
|
||
<view class="r-right" style="margin-left: 30rpx;color: #00000095;">
|
||
{{ baseFormData.reason }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<uni-forms ref="baseForm" :modelValue="baseFormData" :label-width="80" style="margin-top: 10rpx;">
|
||
<uni-forms-item :label="baseFormData.applyType == '请假' ? '请假模式' : '销假模式'"
|
||
:class="baseFormData.applyType == '请假' ? 'leaveApple' : 'backLeave'">
|
||
<uni-easyinput v-model="baseFormData.typeName" class="inputborder" :disabled="true"
|
||
style="text-align: center;" />
|
||
</uni-forms-item>
|
||
<uni-forms-item label="开始日期" :class="baseFormData.applyType == '请假' ? 'leaveApple' : 'backLeave'">
|
||
<uni-easyinput v-model="baseFormData.startDate" class="inputborder" :disabled="true"
|
||
style="text-align: center;" />
|
||
</uni-forms-item>
|
||
<uni-forms-item v-show="baseFormData.typeval == '1'" label="结束日期"
|
||
:class="baseFormData.applyType == '请假' ? 'leaveApple' : 'backLeave'">
|
||
<uni-easyinput v-model="baseFormData.endDate" class="inputborder" :disabled="true"
|
||
style="text-align: center;" />
|
||
</uni-forms-item>
|
||
<uni-forms-item label="开始时间" v-show="baseFormData.typeval != '1'"
|
||
:class="baseFormData.applyType == '请假' ? 'leaveApple' : 'backLeave'">
|
||
<uni-easyinput v-model="baseFormData.startTime" class="inputborder" :disabled="true"
|
||
style="text-align: center;" />
|
||
</uni-forms-item>
|
||
<uni-forms-item label="结束时间" v-show="baseFormData.typeval != '1'"
|
||
:class="baseFormData.applyType == '请假' ? 'leaveApple' : 'backLeave'">
|
||
<uni-easyinput v-model="baseFormData.endTime" class="inputborder" :disabled="true"
|
||
style="text-align: center;" />
|
||
</uni-forms-item>
|
||
<uni-forms-item :label="baseFormData.applyType == '请假' ? '请假天数' : '销假天数'"
|
||
:class="baseFormData.applyType == '请假' ? 'leaveApple' : 'backLeave'">
|
||
<uni-easyinput v-model="baseFormData.days" class="inputborder" :disabled="true"
|
||
style="text-align: center;" />
|
||
</uni-forms-item>
|
||
<uni-forms-item label="详细说明"
|
||
:class="baseFormData.applyType == '请假' ? 'leaveApple custom-label-height' : 'backLeave custom-label-height'">
|
||
<uni-easyinput type="textarea" v-model="baseFormData.reason" :disabled="true" />
|
||
</uni-forms-item>
|
||
<view class="border-bottom" style="width: 100%;"></view>
|
||
<view style="margin-top: 20rpx;">
|
||
<uni-forms-item label="审核意见" class="custom-label-height">
|
||
<uni-easyinput type="textarea" v-model="rejectReason" />
|
||
</uni-forms-item>
|
||
</view>
|
||
</uni-forms>
|
||
</view>
|
||
<view class="footer-con" style="display: flex;" v-if="baseFormData.reviewerId != 0">
|
||
<button class="btn-warning" type="warning" @click="submit('驳回')" size="mini">驳回</button>
|
||
<button class="btn-success" type="success" @click="submit('同意')" size="mini">同意</button>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
onMounted,
|
||
reactive
|
||
} from 'vue'
|
||
import {
|
||
onLoad
|
||
} from '@dcloudio/uni-app'
|
||
import customHeader from '@/components/customHeader.vue'
|
||
import customTabs from '@/components/customTabs.vue';
|
||
import {
|
||
addReviewLeave
|
||
} from '@/api/crm/activity/activity';
|
||
|
||
// 表单ref
|
||
let baseForm = ref(null);
|
||
|
||
let rejectReason = ref(null);
|
||
|
||
let baseFormData = reactive({
|
||
typeName: "全天",
|
||
typeval: 1,
|
||
startDate: getDate(Date.now()),
|
||
endDate: getDate(Date.now()),
|
||
days: 1,
|
||
reason: '',
|
||
startTime: '08:30',
|
||
endTime: '12:30',
|
||
});
|
||
|
||
onLoad((options) => {
|
||
rejectReason.value = ""
|
||
if (options.data) {
|
||
baseFormData = JSON.parse(decodeURIComponent(options.data))
|
||
change()
|
||
|
||
baseFormData.days = baseFormData.days.toString()
|
||
baseFormData.leaveDays = baseFormData.leaveDays.replace('.0', '')
|
||
|
||
if (baseFormData.reviewerIdR != null) {
|
||
rejectReason.value = baseFormData.rejectReason
|
||
}
|
||
}
|
||
})
|
||
|
||
// 查询详情
|
||
let item = ref({});
|
||
const submit = async (status) => {
|
||
if (status == '驳回' && (rejectReason.value == null || rejectReason.value == "")) {
|
||
uni.showToast({
|
||
title: '请填写驳回原因',
|
||
duration: 2000
|
||
});
|
||
} else {
|
||
let param = {
|
||
reviewStatus: status == '同意' ? '完成' : '驳回',
|
||
reviewResult: status == '同意' ? '通过' : '驳回',
|
||
rejectReason: rejectReason.value,
|
||
applyType: baseFormData.applyType,
|
||
leaveId: baseFormData.leaveId,
|
||
backId: baseFormData.backId,
|
||
days: baseFormData.days,
|
||
}
|
||
addReviewLeave(param).then(
|
||
res => {
|
||
if (res.code == 200) {
|
||
uni.showToast({
|
||
title: '提交成功',
|
||
duration: 2000
|
||
});
|
||
setTimeout(function () {
|
||
uni.navigateBack({
|
||
success: () => {
|
||
uni.$emit('isRefresh');
|
||
}
|
||
})
|
||
}, 500);
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
});
|
||
}
|
||
},
|
||
);
|
||
}
|
||
}
|
||
|
||
function getDate(dateval) {
|
||
const date = new Date(dateval)
|
||
const year = date.getFullYear()
|
||
const month = date.getMonth() + 1
|
||
const day = date.getDate()
|
||
return `${year}-${addZero(month)}-${addZero(day)}`
|
||
}
|
||
|
||
function addZero(num) {
|
||
if (num < 10) {
|
||
num = `0${num}`
|
||
}
|
||
return num
|
||
}
|
||
|
||
let change = () => {
|
||
if (baseFormData.typeval != 1) {
|
||
if (baseFormData.typeval == 2) {
|
||
baseFormData.startTime = '08:30'
|
||
baseFormData.endTime = '12:30'
|
||
|
||
baseFormData.typeName = '前半个班次'
|
||
} else {
|
||
baseFormData.startTime = '13:00'
|
||
baseFormData.endTime = '17:00'
|
||
|
||
baseFormData.typeName = '后半个班次'
|
||
}
|
||
|
||
baseFormData.days = 0.5
|
||
} else {
|
||
let start = baseFormData.startDate
|
||
let end = baseFormData.endDate
|
||
baseFormData.days = getDayDiff(start, end);
|
||
|
||
baseFormData.typeName = '全天'
|
||
}
|
||
|
||
baseFormData.days = baseFormData.days.toString()
|
||
}
|
||
|
||
// 计算两个日期的天数差
|
||
function getDayDiff(startDate, endDate) {
|
||
// 处理日期格式（兼容iOS）
|
||
const start = startDate.replace(/-/g, '/');
|
||
const end = endDate.replace(/-/g, '/');
|
||
|
||
const date1 = new Date(start).getTime();
|
||
const date2 = new Date(end).getTime();
|
||
|
||
if (date2 < date1) {
|
||
return 0
|
||
}
|
||
|
||
// 计算天数差（含边界值+1天）
|
||
return Math.floor(Math.abs(date2 - date1) / (24 * 3600 * 1000)) + 1;
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.white-bg {
|
||
width: 690rpx;
|
||
margin: 0;
|
||
border-radius: 8px 8px 0 0;
|
||
}
|
||
|
||
.white-bg.white-bg-2 {
|
||
border-radius: 0;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
:deep(.tabs-header) {
|
||
/* background: none !important; */
|
||
border-bottom: none !important;
|
||
margin: 0 auto;
|
||
gap: 5px;
|
||
}
|
||
|
||
:deep(.tab-item) {
|
||
color: #919191;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
/* flex:none; */
|
||
/* margin: 0 -50rpx; */
|
||
/* padding: 0 50rpx; */
|
||
}
|
||
|
||
:deep(.tab-item:first-child) {
|
||
text-align: right;
|
||
margin-left: 230rpx;
|
||
}
|
||
|
||
:deep(.tab-item:last-child) {
|
||
text-align: left;
|
||
margin-right: 230rpx;
|
||
}
|
||
|
||
:deep(.tab-item.active) {
|
||
color: #3384DF;
|
||
font-weight: bold;
|
||
}
|
||
|
||
:deep(.tab-item.active::after) {
|
||
width: 100rpx;
|
||
height: 8rpx;
|
||
}
|
||
|
||
:deep(.is-disabled) {
|
||
background-color: rgba(255, 255, 255, 1) !important;
|
||
color: #333;
|
||
}
|
||
|
||
.btn-success {
|
||
background-color: #67d23a;
|
||
border: 1px solid #67d23a;
|
||
color: #fff;
|
||
/* padding: 0rpx 60rpx; */
|
||
}
|
||
|
||
.btn-warning {
|
||
background-color: #f6b23c;
|
||
border: 1px solid #f6b23c;
|
||
color: #fff;
|
||
/* padding: 0rpx 60rpx; */
|
||
}
|
||
|
||
.leaveApple {
|
||
background-color: rgba(103, 194, 58, 0.2);
|
||
}
|
||
|
||
.backLeave {
|
||
background-color: rgba(230, 162, 60, 0.2);
|
||
}
|
||
|
||
:deep(.uni-forms-item__label) {
|
||
padding: 0 12px;
|
||
}
|
||
|
||
:deep(.custom-label-height .uni-forms-item__label) {
|
||
height: 190rpx;
|
||
}
|
||
|
||
::v-deep .uni-easyinput__content-textarea {
|
||
height: 166rpx !important;
|
||
}
|
||
</style> |