279 lines
5.2 KiB
Vue
279 lines
5.2 KiB
Vue
<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> |