cxc-szcx-uniapp/component/leaveApplication.vue
2024-09-14 10:26:50 +08:00

279 lines
5.2 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="">
<view class="f-col aic">
<view class="info_box">
<view class="title">
申请信息
</view>
<view class="info f-row aic jcb">
<view class="">
请假职工
</view>
<text>{{info.qjname}}</text>
</view>
<view class="info f-row aic jcb">
<view class="">
请假类型
</view>
<text>{{info.qjlx}}</text>
</view>
<view class="info f-row aic jcb">
<view class="">
假期开始日期
</view>
<text>{{info.starttime}}</text>
</view>
<view class="info f-row aic jcb">
<view class="">
假期结束日期
</view>
<text>{{info.endtime}}</text>
</view>
<view class="info f-row aic jcb">
<view class="">
请假天数
</view>
<text>{{info.qjdays}}</text>
</view>
<view class="info f-row aic jcb">
<view class="">
审批人
</view>
<text>{{info.leadername}}</text>
</view>
<view class="info f-row aic jcb">
<view class="">
事由
</view>
<text>{{info.sy}}</text>
</view>
<view class="info f-row aic jcb">
<view class="">
联系方式
</view>
<text>{{info.lxdh}}</text>
</view>
<view class="info f-row aic jcb">
<view class="">
休假地点
</view>
<text>{{info.xjdd}}</text>
</view>
</view>
</view>
<view class="f-col aic">
<view class="progress">
<view class="title">
审批流程
</view>
<view class="progress_box">
<view class="box" v-for="(item,index) in step" :key="index">
<view class="topic f-row aic">
<view class="">
{{item.name}}
</view>
<view
:class="['status',{'complete':item.deleteReason=='已完成'},{'refuse':item.deleteReason=='已拒绝'}]">
{{item.deleteReason}}
</view>
</view>
<view class="name_time">
{{item.assigneeName}} | {{item.endTime}}
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
import {
qjQueryByIdApi,
extActFlowDataApi,
processHistoryListApi
} from '@/network/api.js';
import {
ref,
onBeforeMount,
watch,
onMounted
} from 'vue'
const props = defineProps({
dataId: {
type: String,
default: ''
}
})
const info = ref({})
// 申请信息
const qjQueryById = (id) => {
qjQueryByIdApi({
id: props.dataId
}).then((res) => {
console.log('申请信息', res);
if (res.success) {
info.value = res.result
}
})
}
const extActFlowData = (dataId) => {
extActFlowDataApi({
flowCode: "dev_cxc_qxj_zg_001",
dataId: props.dataId
}).then((res) => {
console.log('流程审核', res);
if (res.success) {
processHistoryList(res.result.processInstanceId)
}
})
}
const step = ref([])
/**审批步骤*/
const processHistoryList = (processInstanceId) => {
console.log('000', processInstanceId);
processHistoryListApi({
processInstanceId
}).then((res) => {
console.log('0088800', res);
if (res.success) {
step.value = res.result.records
}
})
}
// watch(() => props.dataId, (nval, oval) => {
// if (nval) {
// qjQueryById()
// extActFlowData()
// }
// })
onMounted(()=>{
qjQueryById()
extActFlowData()
})
</script>
<style lang="scss" scoped>
.info_box {
padding: 40rpx 30rpx 16rpx 30rpx;
width: 630rpx;
background: #FFFFFF;
box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.5);
border-radius: 16rpx;
margin-top: 30rpx;
.title {
font-size: 28rpx;
color: #333333;
background-image: url(../../static/index/line.png);
background-size: 44rpx 12rpx;
background-repeat: no-repeat;
background-position: left bottom;
margin-bottom: 30rpx;
}
.info {
font-size: 28rpx;
margin-bottom: 24rpx;
view {
color: #666666;
}
text {
color: #333333;
}
}
}
.progress {
background: #FFFFFF;
box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.5);
border-radius: 16rpx;
width: 630rpx;
padding: 40rpx 30rpx 16rpx 30rpx;
margin-top: 30rpx;
margin-bottom: 30rpx;
.status {
padding: 4rpx 8rpx;
display: inline-block;
color: #FFFFFF;
font-size: 20rpx;
margin-left: 8rpx;
border-radius: 8rpx;
}
.complete {
background-color: #7AC756;
}
.refuse {
background-color: #FE4600;
}
.title {
font-size: 28rpx;
color: #333333;
background-image: url(../../static/index/line.png);
background-size: 44rpx 12rpx;
background-repeat: no-repeat;
background-position: left bottom;
margin-bottom: 40rpx;
}
// .box:not(:first-child) {
// padding-top: 60rpx;
// }
.box:not(:last-child) {
position: relative;
padding-bottom: 60rpx;
&::before {
position: absolute;
content: ' ';
width: 1px;
height: 100%;
background: #efefef;
left: -42rpx;
top: 10rpx;
}
}
.box {
margin-left: 50rpx;
.topic {
position: relative;
font-size: 28rpx;
color: #333333;
&::before {
position: absolute;
content: ' ';
width: 18rpx;
height: 18rpx;
background: #01508B;
border-radius: 14rpx;
left: -50rpx;
top: 50%;
transform: translateY(-50%);
}
}
.name_time {
font-size: 24rpx;
color: #888888;
margin-top: 12rpx;
}
}
}
</style>