YNUtdPlatform/pages/realName/workbench/qualifications/detail.vue

454 lines
18 KiB
Vue
Raw Normal View History

2024-09-29 10:19:21 +08:00
<template>
<view class="page">
<u-navbar class="u-navbar" title="人员信息" placeholder @leftClick="leftClick" leftIconColor="#fff" bgColor="#00337A" :titleStyle="{ color: '#FFF', fontSize: '32rpx' }"/>
<scroll-view class="content" scroll-y="true">
<view class="view-box">
<view class="title-view">
基本信息
</view>
<view style="display: flex;width: 94%;margin: 20rpx auto;height: auto;justify-content: space-between;">
<view class="img-item">
<image class="img" :src="faceImgUrl" mode=""></image>
<view style="margin-top: 20rpx;">{{detailData.workerType}}</view>
</view>
<view class="base-info">
<view style="margin-bottom: 20rpx;display: flex;align-items: center;">
<text style="font-weight: bold;margin-right: 20rpx;">{{detailData.name}}</text>
2024-12-06 15:48:41 +08:00
<text style="color:#06E7A3;margin-right: 20rpx;" v-if="detailData.lightStatus=='绿灯'">{{detailData.lightStatus}}</text>
<text style="color:#e8717f;margin-right: 20rpx;" v-if="detailData.lightStatus=='红灯'">{{detailData.lightStatus}}</text>
<text style="color:#e89c2d;margin-right: 20rpx;" v-if="detailData.lightStatus=='黄灯'">{{detailData.lightStatus}}</text>
2024-09-29 10:19:21 +08:00
<image class="iconImg" src="../../../../static/realName/tips.png" mode="" @click="openInfo"></image>
</view>
<image class="lightImg" v-if="detailData.lightStatus=='绿灯'" src="../../../../static/realName/green_light.png" mode=""></image>
<image class="lightImg" v-if="detailData.lightStatus=='黄灯'" src="../../../../static/realName/yellow_light.png" mode=""></image>
<image class="lightImg" v-if="detailData.lightStatus=='红灯'" src="../../../../static/realName/red_light.png" mode=""></image>
<view style="font-weight: bold;">{{detailData.postName}}</view>
<view style="font-weight: bold;">{{detailData.phone}}</view>
<view style="font-weight: bold;">{{detailData.einStatus}}</view>
<view style="margin-top: 20rpx;color: #999;">{{detailData.subName}}</view>
<view style="margin-top: 20rpx;color: #999;">{{detailData.proName}}</view>
</view>
</view>
</view>
<view class="view-box">
<view class="title-view">
安全培训考试
</view>
<view style="width: 94%;margin: 20rpx auto;height: auto;" @click="openTrain">
<view class="list-item" v-for="(item,index) in detailData.listExam" :key="index">
<view style="display: flex;align-items: center;">
<image v-if="item.status==0" class="iconImg" src="../../../../static/realName/incomplete.png" mode=""></image>
<image v-if="item.status==1" class="iconImg" src="../../../../static/realName/complete.png" mode=""></image>
<view v-if="item.status==0" style="margin-left: 40rpx;color: #FF2F2F;font-weight: bold;">{{item.name}}</view>
<view v-if="item.status==1" style="margin-left: 40rpx;color: #10BF95;font-weight: bold;">{{item.name}}</view>
</view>
<view v-if="item.status==0" class="status-btn" style="background: #FF2F2F;">未完成</view>
<view v-if="item.status==1" class="status-btn" style="background: #10BF95;">完成</view>
</view>
</view>
</view>
<view class="view-box">
<view class="title-view">
今日考勤
</view>
<view style="width: 94%;margin: 20rpx auto;height: auto;display: flex;align-items: center;justify-content: space-between;">
<view>上班{{detailData.isToWork}}</view>
<view>下班{{detailData.isOffWork}}</view>
<view v-if="detailData.isToWork=='未打卡'" class="status-btn" style="background: #FF2F2F;">未打卡</view>
<view v-if="detailData.isToWork!='未打卡'" class="status-btn" style="background: #10BF95;">已打卡</view>
</view>
</view>
<view class="view-box">
<view class="title-view">
今日作业计划
</view>
<view class="title-view">
作业内容
</view>
<view style="width: 94%;margin: 20rpx auto;height: auto;">
{{detailData.zynr}}
</view>
</view>
<view class="view-box">
<view class="title-view">
合同信息
</view>
<view style="width: 94%;margin: 20rpx auto;height: auto;">
<view class="list-item" v-for="(item,index) in detailData.listContract" :key="index" @click="openContract">
<view style="display: flex;align-items: center;">
<image v-if="item.contractStatus==0" class="iconImg" src="../../../../static/realName/incomplete.png" mode=""></image>
<image v-if="item.contractStatus==1" class="iconImg" src="../../../../static/realName/complete.png" mode=""></image>
<view v-if="item.contractStatus==0" style="margin-left: 40rpx;color: #FF2F2F;font-weight: bold;">{{item.contractType}}</view>
<view v-if="item.contractStatus==1" style="margin-left: 40rpx;color: #10BF95;font-weight: bold;">{{item.contractType}}</view>
</view>
<view v-if="item.contractStatus==0" class="status-btn" style="background: #FF2F2F;">未签订</view>
<view v-if="item.contractStatus==1" class="status-btn" style="background: #10BF95;">已签订</view>
</view>
</view>
</view>
<view class="view-box">
<view class="title-view">
持证信息
</view>
<view style="width: 94%;margin: 20rpx auto;height: auto;">
<view class="list-item" v-for="(item,index) in detailData.listCertificate" :key="index" @click="openListCertificate">
<view style="display: flex;align-items: center;">
<image v-if="item.isActive==0" class="iconImg" src="../../../../static/realName/incomplete.png" mode=""></image>
<image v-if="item.isActive==1" class="iconImg" src="../../../../static/realName/complete.png" mode=""></image>
<view v-if="item.isActive==0" style="margin-left: 40rpx;color: #FF2F2F;font-weight: bold;">{{item.certificateName}}</view>
<view v-if="item.isActive==1" style="margin-left: 40rpx;color: #10BF95;font-weight: bold;">{{item.certificateName}}</view>
</view>
<view v-if="item.isActive==0" class="status-btn" style="background: #FF2F2F;">无效</view>
<view v-if="item.isActive==1" class="status-btn" style="background: #10BF95;">有效</view>
</view>
</view>
</view>
</scroll-view>
<!-- 信息弹窗 -->
<u-popup :show="showPopup1" mode="center" @close="closePopup1">
<view style="width:600rpx;height: auto;position: relative;background-color: #fff;">
<view style="width: 100%;height: 80rpx;margin: 0 auto;display: flex;justify-content: center;align-items: center;background-color: #fff;">
<view style="font-size: 32rpx;: bold;">红绿灯</view>
</view>
<view style="width: 100%;height: 22vh;background-color: #fff;">
<view style="width: 90%;height: auto;margin: 20rpx auto;display: flex;align-items: center;">
<view style="width: 120rpx;height: 50rpx;color: #FFF;background: #DE3C23;text-align: center;line-height: 50rpx;">红灯</view>
<view style="margin-left: 40rpx;width: 75%;">
<view style="color: #CD4F3C;font-weight: bold;">安全教育培训考试未完成</view>
</view>
</view>
<view style="width: 90%;height: auto;margin: 20rpx auto;display: flex;align-items: center;">
<view style="width: 120rpx;height: 50rpx;color: #FFF;background: #FF7F26;text-align: center;line-height: 50rpx;">黄灯</view>
<view style="margin-left: 40rpx;width: 75%;">
<view style="color: #2DBB9D;font-weight: bold;">安全教育培训考试已完成</view>
<view style="color: #CD4F3C;font-weight: bold;">合同/工资卡未上传分包班组未绑定</view>
</view>
</view>
<view style="width: 90%;height: auto;margin: 20rpx auto;display: flex;align-items: center;">
<view style="width: 120rpx;height: 50rpx;color: #FFF;background: #10BF96;text-align: center;line-height: 50rpx;">绿灯</view>
<view style="margin-left: 40rpx;width: 75%;">
<view style="color: #2DBB9D;font-weight: bold;">安全教育培训考试已完成</view>
<view style="color: #2DBB9D;font-weight: bold;">合同/工资卡已上传分包班组已绑定</view>
</view>
</view>
</view>
</view>
</u-popup>
<!-- 考试弹窗 -->
<u-popup :show="showPopup2" mode="center" @close="closePopup2">
<view style="width:600rpx;height: auto;position: relative;background-color: #fff;">
<view style="width: 100%;height: 20vh;background-color: #fff;">
<view class="list-item" style="margin: 30rpx 10rpx;" v-for="(item,index) in detailData.listExam" :key="index">
<view style="display: flex;align-items: center;width: 50%;">
<view v-if="item.status==0" style="margin-left: 10rpx;color: #FF2F2F;font-weight: bold;">{{item.name}}</view>
<view v-if="item.status==1" style="margin-left: 10rpx;color: #10BF95;font-weight: bold;">{{item.name}}</view>
</view>
<view v-if="item.status==0" style="font-weight: bold;">未完成</view>
<view v-if="item.status==1" style="font-weight: bold;">完成</view>
<view style="font-weight: bold;">{{item.score}}</view>
</view>
</view>
</view>
</u-popup>
<!-- 合同弹窗 -->
<u-popup :show="showPopup3" mode="center" @close="closePopup3">
<view style="width:600rpx;height: auto;position: relative;background-color: #fff;">
<view style="width: 100%;height: auto;background-color: #fff;">
<u--form class="addForm" :model="contractData" >
<view class="form-input-box">
<view style="width:30%;height: 100%;">合同照片</view>
2024-11-06 09:07:29 +08:00
<view style="width:70%;height: 100%;" v-if="contractWitnessType=='img'">
<image style="width:200rpx;height: 200rpx;margin: 10rpx;" :src="contractImgUrl" mode=""></image>
</view>
<view style="width:70%;height: 100%;" v-if="contractWitnessType=='file'" @click="openPdf2">
<image style="width:200rpx;height: 200rpx;margin: 10rpx;" src="../../../../static/realName/pdf.png" mode=""></image>
2024-09-29 10:19:21 +08:00
</view>
</view>
<view class="form-input-box">
<view style="width:30%;height: 100%;">合同编号</view>
<u-form-item prop='contractCode' style="width:70%;height: 100%;" >
<u--input v-model="contractData.contractCode" type="text" border="surround" readonly></u--input>
</u-form-item>
</view>
<view class="form-input-box">
<view style="width:30%;height: 100%;">合同期限类型</view>
<u-form-item prop='laborContractType' style="width:70%;height: 100%;" >
<u--input v-model="contractData.laborContractType" type="text" border="surround" readonly></u--input>
</u-form-item>
</view>
<view class="form-input-box">
<view style="width:30%;height: 100%;">合同签订日期</view>
<u-form-item prop='contractValidDate' style="width:70%;height: 100%;" >
<u--input v-model="contractData.contractValidDate" type="text" border="surround" readonly></u--input>
</u-form-item>
</view>
<view class="form-input-box">
<view style="width:30%;height: 100%;">合同终止日期</view>
<u-form-item prop='contractInvalidDate' style="width:70%;height: 100%;" >
<u--input v-model="contractData.contractInvalidDate" type="text" border="surround" readonly></u--input>
</u-form-item>
</view>
<view class="form-input-box">
<view style="width:30%;height: 100%;">合同类型</view>
<u-form-item prop='contractType' style="width:70%;height: 100%;" >
<u--input v-model="contractData.contractType" type="text" border="surround" readonly></u--input>
</u-form-item>
</view>
<view class="form-input-box">
<view style="width:30%;height: 100%;">工资核定方式</view>
<u-form-item prop='wageApprovedWay' style="width:70%;height: 100%;" >
<u--input v-model="contractData.wageApprovedWay" type="text" border="surround" readonly></u--input>
</u-form-item>
</view>
<view class="form-input-box">
<view style="width:30%;height: 100%;">工资核定标准</view>
<u-form-item prop='wageCriterion' style="width:70%;height: 100%;" >
<u--input v-model="contractData.wageCriterion" type="text" border="surround" readonly></u--input>
</u-form-item>
</view>
</u--form>
</view>
</view>
</u-popup>
<!-- 持证弹窗 -->
<u-popup :show="showPopup4" mode="center" @close="closePopup4">
<view style="width:600rpx;height: auto;position: relative;background-color: #fff;">
<view style="width: 100%;height: auto;background-color: #fff;">
<u--form class="addForm" :model="listCertificate" >
<view class="form-input-box" style="flex-direction: column;align-items: flex-start;">
<view style="font-size: 24rpx;margin-top: 20rpx;">证件名称</view>
<u-form-item prop='certificateName'>
<u--input v-model="listCertificate.certificateName" type="text" border="surround" readonly></u--input>
</u-form-item>
</view>
<view class="form-input-box" style="flex-direction: column;align-items: flex-start;">
<view style="font-size: 24rpx;margin-top: 20rpx;">证件有效期</view>
<u-form-item prop='certificateName'>
<u--input :value="listCertificate.startDate+'至'+listCertificate.stopDate" type="text" border="surround" readonly></u--input>
</u-form-item>
</view>
<view class="form-input-box" style="flex-direction: column;align-items: flex-start;">
<view style="font-size: 24rpx;margin-top: 20rpx;">是否有效</view>
<u-form-item prop='certificateName'>
<u--input v-if="listCertificate.isActive==0" value="无效" type="text" border="surround" readonly></u--input>
<u--input v-if="listCertificate.isActive==1" value="有效" color="#10BF95" type="text" border="surround" readonly></u--input>
</u-form-item>
</view>
<view class="form-input-box" style="flex-direction: column;align-items: flex-start;">
<view style="font-size: 24rpx;margin-top: 20rpx;">证件附件</view>
<view v-if="listCertificate.certificateTypeFile!=''" @click="openPdf" style="font-size: 28rpx;margin: 20rpx;color: #00337A;">附件查看</view>
<view v-if="!listCertificate.certificateTypeFile" style="font-size: 28rpx;margin: 20rpx;color: #FF2F2F;">无附件</view>
</view>
</u--form>
</view>
</view>
</u-popup>
</view>
</template>
<script>
import config from '@/config'
export default {
data() {
return {
idNumber:'',
detailData:{},
faceImgUrl:'',
showPopup1:false,//信息
showPopup2:false,//培训考试
contractData:{},//合同
contractImgUrl:"",
2024-11-06 09:07:29 +08:00
contractWitnessType:"",
2024-09-29 10:19:21 +08:00
showPopup3:false,//合同
listCertificate:{},//持证
showPopup4:false,//持证
}
},
onLoad(option) {
console.log(option)
this.idNumber=option.idNumber||"";
if(this.idNumber!=""){
this.selectPersonQualificationsContent()
}
},
onShow() {
},
methods: {
// 获取详情
selectPersonQualificationsContent(){
let param={
idNumber:this.idNumber,
}
uni.request({
url: config.realAppUrl+'/BasePerson/selectPersonQualificationsContent',
method: 'post',
data: param,
header: {
'Content-Type': 'application/json;charset=UTF-8;',
Authorization: uni.getStorageSync('realNameToken')
},
success: res => {
console.log(res)
res = res.data;
if(res.code==200){
this.detailData=res.data;
this.faceImgUrl=config.realBaseUrl+res.data.facePhoto;
2024-09-29 10:19:21 +08:00
}else{
uni.showToast({
title: res.msg,
icon: 'none'
})
}
},
fail: err => {
console.log(err)
}
})
},
openInfo(){
this.showPopup1=true;
},
closePopup1(){
this.showPopup1=false;
},
openTrain(){
this.showPopup2=true;
},
closePopup2(){
this.showPopup2=false;
},
openContract(){
this.contractData = this.detailData.listContract[0]
2024-11-06 09:07:29 +08:00
if(this.contractData.witnessPath&&this.contractData.witnessPath.split(".")[1]=="pdf"){
this.contractWitnessType="file"
}else{
this.contractWitnessType="img"
}
this.contractImgUrl=config.realFileUrl+this.contractData.witnessPath;
2024-09-29 10:19:21 +08:00
this.showPopup3=true;
},
closePopup3(){
this.showPopup3=false;
},
openListCertificate(){
this.listCertificate = this.detailData.listCertificate[0]
this.showPopup4=true;
},
closePopup4(){
this.showPopup4=false;
},
openPdf(){
2024-11-06 09:07:29 +08:00
console.log("附件打开",this.listCertificate.certificateTypeFile)
2024-09-29 10:19:21 +08:00
uni.navigateTo({
url: `/pages/realName/workbench/qualifications/listCertificatePdf?pdfUrl=${this.listCertificate.certificateTypeFile}`
})
},
2024-11-06 09:07:29 +08:00
openPdf2(){
console.log("附件打开",this.contractImgUrl)
// let url = config.realFileUrl+this.contractData.witnessPath
uni.navigateTo({
url: `/pages/realName/workbench/qualifications/listCertificatePdf?pdfUrl=${this.contractImgUrl}`
})
},
2024-09-29 10:19:21 +08:00
leftClick() {
console.log('返回')
uni.navigateBack({
delta: 1 // 返回
});
}
},
}
</script>
<style lang="scss">
.page {
width: 100vw;
height: 100vh;
background-color: #EFEFEF;
box-sizing: border-box;
// padding: 0 20px;
.content{
width: 100%;
height: 90vh;
margin-top: 20rpx;
padding-bottom: 80rpx;
background-color: #EFEFEF;
}
.view-box{
width: 90%;
margin: 20rpx auto;
background-color: #FFF;
border-radius: 10rpx;
padding: 30rpx 10rpx;
.title-view{
font-weight: 600;
margin-left: 20rpx;
}
}
.base-info{
width: 68%;
height: auto;
position: relative;
}
.iconImg{
width: 40rpx;
height: 40rpx;
}
.lightImg{
width: 120rpx;
height: 120rpx;
position: absolute;
right:40rpx;
top: 0rpx;
}
.img-item {
width: 180upx;
height: 240upx;
margin: 0 20rpx;
text-align: center;
.img {
display: block;
width: 100%;
height: 100%;
}
}
.list-item{
width: 96%;
display: flex;
align-items: center;
justify-content: space-between;
margin: 30rpx auto;
font-size: 32rpx;
}
.status-btn{
width: 120rpx;
height: 50rpx;
line-height: 50rpx;
color: #FFF;
font-size:24rpx;
text-align: center;
border-radius: 10rpx;
}
.addForm{
width: 100%;
height: auto;
font-size: 24rpx;
.form-input-box{
padding: 0 10rpx;
display: flex;
align-items: center;
border-bottom: 1rpx solid #eee;
}
}
}
</style>