cxc-szcx-uniapp/bpm/leaveApplication/index.vue

335 lines
6.6 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="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>