335 lines
6.6 KiB
Vue
335 lines
6.6 KiB
Vue
<template>
|
||
<view class="f-col aic">
|
||
<view class="info_box">
|
||
<view class="title">
|
||
申请信息
|
||
<b style="text-align: right;color: blue;" @click="goToHis">历史查询</b>
|
||
</view>
|
||
<view class="info f-row aic jcb">
|
||
<view>
|
||
请假职工：
|
||
</view>
|
||
<text>{{info.username_dictText}}</text>
|
||
</view>
|
||
<view class="info f-row aic jcb">
|
||
<view>
|
||
所属单位：
|
||
</view>
|
||
<text>{{info.sysOrgCode_dictText}}</text>
|
||
</view>
|
||
<view class="info f-row aic jcb">
|
||
<view>
|
||
联系方式：
|
||
</view>
|
||
<text>{{info.phone}}</text>
|
||
</view>
|
||
<view class="info f-row aic jcb">
|
||
<view>
|
||
请假类型：
|
||
</view>
|
||
<text>{{info.type}}</text>
|
||
</view>
|
||
<view class="info f-row aic jcb">
|
||
<view>
|
||
请假开始时间：
|
||
</view>
|
||
<text>{{info.begintime}}</text>
|
||
</view>
|
||
<view class="info f-row aic jcb">
|
||
<view>
|
||
请假结束时间：
|
||
</view>
|
||
<text>{{info.endtime}}</text>
|
||
</view>
|
||
<view class="info f-row aic jcb">
|
||
<view>
|
||
请假天数：
|
||
</view>
|
||
<text>{{info.days}}天</text>
|
||
</view>
|
||
<view class="info f-row aic jcb">
|
||
<view>
|
||
{{examineleader}}：
|
||
</view>
|
||
<text>{{info.examineleader_dictText}}</text>
|
||
</view>
|
||
<view class="info f-row aic jcb">
|
||
<view>
|
||
出发地：
|
||
</view>
|
||
<text>{{info.departure}}</text>
|
||
</view>
|
||
<view class="info f-row aic jcb">
|
||
<view>
|
||
目的地：
|
||
</view>
|
||
<text>{{info.destination}}</text>
|
||
</view>
|
||
<view class="info f-row aic jcb">
|
||
<view>
|
||
请假原因：
|
||
</view>
|
||
<text>{{info.reason}}</text>
|
||
</view>
|
||
<view class="info f-row aic jcb" v-if="ifShowFj">
|
||
<view>
|
||
附件：
|
||
</view>
|
||
<uni-file-picker v-model="imageValue" :image-styles="imageStyles" />
|
||
</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>
|
||
{{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>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
extActFlowDataApi,
|
||
processHistoryListApi
|
||
} from '@/api/api.js';
|
||
import {
|
||
qjQueryByIdApi
|
||
} from '@/api/leaveApi.js';
|
||
import {
|
||
ref,
|
||
onMounted
|
||
} from 'vue'
|
||
import {
|
||
imgUrl
|
||
} from '@/utils/index.js';
|
||
const props = defineProps({
|
||
dataId: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
})
|
||
const examineleader = ref('')
|
||
const imageValue = ref([])
|
||
const ifShowFj = ref(false)
|
||
const imageStyles = {
|
||
width: 64,
|
||
height: 64,
|
||
border: {
|
||
color: "#dce7e1",
|
||
width: 2,
|
||
style: 'dashed',
|
||
radius: '2px'
|
||
}
|
||
}
|
||
const info = ref({})
|
||
// 申请信息
|
||
const qjQueryById = () => {
|
||
qjQueryByIdApi({
|
||
id: props.dataId
|
||
}).then((res) => {
|
||
if (res.success) {
|
||
if (res.result.records[0].zwmc == '单位专家' || res.result.records[0].zwmc == '基层正职' ||
|
||
res.result.records[0].zwmc == '高级主管') {
|
||
examineleader.value = '分管领导';
|
||
} else {
|
||
examineleader.value = '审批领导';
|
||
}
|
||
info.value = res.result.records[0]
|
||
// 构造 imageValue 数组
|
||
if (info.value.path) {
|
||
ifShowFj.value = true;
|
||
imageValue.value = info.value.path.split(',').map(path => {
|
||
const name = path.split('/').pop(); // 获取文件名
|
||
const extname = name.split('.').pop(); // 获取文件扩展名并转换为大写
|
||
return {
|
||
name,
|
||
extname,
|
||
url: imgUrl(path)
|
||
};
|
||
});
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
/**审批步骤*/
|
||
const extActFlowData = () => {
|
||
extActFlowDataApi({
|
||
flowCode: "dev_cxc_qxj",
|
||
dataId: props.dataId
|
||
}).then((res) => {
|
||
if (res.success) {
|
||
processHistoryList(res.result.processInstanceId)
|
||
}
|
||
})
|
||
}
|
||
const step = ref([])
|
||
const processHistoryList = (processInstanceId) => {
|
||
processHistoryListApi({
|
||
processInstanceId
|
||
}).then((res) => {
|
||
if (res.success) {
|
||
step.value = res.result.records
|
||
step.value = step.value.map(item => {
|
||
if (item.name === 'start') {
|
||
item.name = '开始';
|
||
} else if (item.name === 'end') {
|
||
item.name = '结束';
|
||
}
|
||
return item;
|
||
});
|
||
}
|
||
})
|
||
}
|
||
onMounted(() => {
|
||
qjQueryById()
|
||
extActFlowData()
|
||
})
|
||
|
||
const goToHis = () => {
|
||
uni.navigateTo({
|
||
url: `/pages/views/renliziyuan/qingjiaxinxi/index?username=${info.value.username}`
|
||
});
|
||
}
|
||
</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;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.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> |