OfficeApp/subpkg/personnelDetails/personnelDetails.vue
2023-08-24 17:14:32 +08:00

849 lines
23 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="page">
<view class="basic">
<u-skeleton :loading="skeleton" :animate="true" title rows="1" rows-width="100%" rowsHeight="56">
</u-skeleton>
<block v-if="!skeleton">
<view class="tit">人员基本信息</view>
<view class="card">
<view class="basic_top">
<image class="avatar" :src="userInfo.avatar"></image>
<view class="text">
<view class="basic_name">
<view class="name">{{ userInfo.name }}</view>
<image class="icon" :src="
userInfo.sex == 1
? '../../static/icons/man.png'
: '../../static/icons/woman.png'
">
</image>
<!-- <view class="role" v-if="userInfo.roles">{{userInfo.roles[0]}}</view> -->
</view>
<view class="id_card">
<view>身份证号{{ userInfo.id_card }}</view>
<!-- <view class="update" @click="updateShow(userInfo.id_card, 'id_card')">
<uni-icons type="compose" color="#F9AA32"></uni-icons>
</view> -->
</view>
<view class="phone"> 联系电话{{ userInfo.phone }} </view>
</view>
</view>
<view class="bottom" style="margin-bottom: 10rpx; display: flex; align-items: center">
是否为小队长
<u-radio-group v-model="userInfo.is_captain" style="margin-left: 16rpx" disabled>
<u-radio :customStyle="{ marginRight: '16px' }" v-for="(item, index) in [
{ value: 1, label: '是' },
{ value: 0, label: '否' },
]" :key="index" :label="item.label" :name="item.value">
</u-radio>
</u-radio-group>
<view class="update" @click="updateShow(userInfo.is_captain, 'is_captain')">
<uni-icons type="compose" color="#F9AA32"></uni-icons>
</view>
</view>
<view class="bottom">
负责区域:<text>{{
(userInfo.street_name || "") +
(userInfo.village_name || "") +
(userInfo.brigade_name || "")
}}</text>
</view>
<u-popup :show="show.is_captain" :round="10" mode="center">
<view class="popup">
<view class="p_title">修改信息</view>
<view class="p_body">
是否为小队长:
<u-radio-group v-model="updateForm.is_captain" style="margin: 16rpx">
<u-radio :customStyle="{ marginRight: '16px' }" v-for="(item, index) in [
{ value: 1, label: '是' },
{ value: 0, label: '否' },
]" :key="index" :label="item.label" :name="item.value">
</u-radio>
</u-radio-group>
</view>
<view class="p_button">
<view @click="show.is_captain = false">取消</view>
<view @click="updateInfo('is_captain')">确认</view>
</view>
</view>
</u-popup>
<u-popup :show="show.id_card" :round="10" mode="center">
<view class="popup">
<view class="p_title">修改信息</view>
<u--form style="padding: 0 28rpx">
<u-form-item label="身份证号:" labelWidth="auto" labelPosition="top">
<u--input style="border: 1px solid #0122c7" v-model="updateForm.id_card"></u--input>
</u-form-item>
</u--form>
<view class="p_button">
<view @click="show.id_card = false">取消</view>
<view @click="updateInfo('id_card')">确认</view>
</view>
</view>
</u-popup>
</view>
</block>
</view>
<view class="certification">
<u-skeleton :loading="skeleton" :animate="true" title rows="3" rows-width="100%" rowsHeight="56">
</u-skeleton>
<block v-if="!skeleton">
<view class="tit">资质信息</view>
<view class="c_item">
<uni-section style="background-color: transparent" title="身份证" titleFontSize="32rpx" type="line">
</uni-section>
<view class="card_box">
<image :src="userInfo.qualification && userInfo.qualification.id_card" @click="
previewImg(
[
userInfo.qualification && userInfo.qualification.id_card,
userInfo.qualification && userInfo.qualification.id_card_b,
],
0
)
">
</image>
<image :src="userInfo.qualification && userInfo.qualification.id_card_b" @click="
previewImg(
[
userInfo.qualification && userInfo.qualification.id_card,
userInfo.qualification && userInfo.qualification.id_card_b,
],
1
)
">
</image>
</view>
</view>
<view class="c_item">
<uni-section style="background-color: transparent" title="银行卡照片" titleFontSize="32rpx" type="line">
</uni-section>
<view class="card_box">
<image :src="
userInfo.qualification && userInfo.qualification.bank_account
" @click="
previewImg(
[
userInfo.qualification &&
userInfo.qualification.bank_account,
userInfo.qualification &&
userInfo.qualification.bank_account_b,
],
0
)
">
</image>
<image :src="
userInfo.qualification && userInfo.qualification.bank_account_b
" @click="
previewImg(
[
userInfo.qualification &&
userInfo.qualification.bank_account,
userInfo.qualification &&
userInfo.qualification.bank_account_b,
],
1
)
">
</image>
</view>
</view>
<view class="c_item" v-if="
(userInfo.qualification && userInfo.qualification.car_card) ||
(userInfo.qualification && userInfo.qualification.car_card_b)
">
<uni-section style="background-color: transparent" title="驾驶证" titleFontSize="32rpx" type="line">
</uni-section>
<view class="card_box">
<image v-if="userInfo.qualification && userInfo.qualification.car_card"
:src="userInfo.qualification && userInfo.qualification.car_card" @click="
previewImg(
[
userInfo.qualification && userInfo.qualification.car_card,
userInfo.qualification && userInfo.qualification.car_card_b,
],
0
)
">
</image>
<image v-if="userInfo.qualification && userInfo.qualification.car_card"
:src="userInfo.qualification && userInfo.qualification.car_card_b" @click="
previewImg(
[
userInfo.qualification && userInfo.qualification.car_card,
userInfo.qualification && userInfo.qualification.car_card_b,
],
1
)
">
</image>
</view>
</view>
</block>
</view>
<view class="contract">
<u-skeleton :loading="skeleton" :animate="true" title rows="2" rows-width="100%" rowsHeight="56">
</u-skeleton>
<block v-if="!skeleton">
<view class="tit" v-if=" userInfo.contract &&
userInfo.is_contract &&
userInfo.contract.status">电子合同</view>
<view v-if="
userInfo.contract &&
userInfo.is_contract &&
userInfo.contract.status
" class="card" style="font-size: 17px;">
<uni-section style="background-color: transparent" :title="userInfo.name" titleFontSize="32rpx"
type="line"></uni-section>
<view class="c_text">性别:{{ userInfo.sex == 1 ? "男" : "女" }}</view>
<view class="c_text">身份证号码:{{ userInfo.id_card }}</view>
<view class="c_text">联系电话:{{ userInfo.phone }}</view>
<view class="c_text">合同类型:{{
userInfo.contract && userInfo.contract.contract_type_name
}}</view>
<view class="c_text">合同编号:{{
userInfo.contract && userInfo.contract.contract_no
}}</view>
<u-line v-if="userInfo.contract && userInfo.contract.file" color="#999999FF"
style="margin: 31rpx 0">
</u-line>
<view v-if="userInfo.contract && userInfo.contract.file" class="contract_box">
<view class="left">
<image class="contract_img" src="../../static/img/contract/pdf.png"></image>
<view class="text">
<view class="name">{{
userInfo.contract.contract_type_name || "合同"
}}</view>
<view>
<text>{{
userInfo.contract && userInfo.contract.create_time
}}</text>
</view>
</view>
</view>
<view class="right" @click="naviToContract(userInfo.contract.contract_no)">
<!-- <image class="icon"></image> -->
<uni-icons type="paperclip" color="#3274F9"></uni-icons>
<view>查看</view>
</view>
</view>
</view>
<picker v-if="
(!userInfo.is_contract && !userInfo.contract) ||
(userInfo.contract && userInfo.contract.check_status == 0)
" :range="contractTypeList" range-key="name" @change="changeType">
<button class="btn">生成合同</button>
</picker>
<view v-if="userInfo.contract && userInfo.contract.check_status == 1">
<button class="btn tips_center">合同已生成,请等待审核</button>
</view>
<view v-if="
!userInfo.is_contract &&
userInfo.contract &&
userInfo.contract.check_status == 2
" class="card">
<view class="contract_box send">
<view class="left">
<image class="contract_img" src="../../static/img/contract/pdf.png"></image>
<view class="text">
<view class="name">{{
userInfo.contract.contract_type_name || "合同"
}}</view>
<view>
<text>{{
userInfo.contract && userInfo.contract.create_time
}}</text>
</view>
</view>
</view>
<view class="right" @click="naviToContract(userInfo.contract.contract_no)">
<!-- <image class="icon"></image> -->
<uni-icons type="paperclip" color="#3274F9"></uni-icons>
<view>查看</view>
</view>
</view>
<u-line color="#999999FF" style="margin: 31rpx 0"></u-line>
<view class="bottom">
<button class="send_btn" @click="clickContract(2)" v-if="timerCount == 0">
发送合同
</button>
<button class="send_btn tips_center" v-else>
{{ cTimerCount + "秒后可继续发送合同" }}
</button>
</view>
</view>
<view v-if="
!userInfo.is_contract &&
userInfo.contract &&
userInfo.contract.check_status == 3
" class="card">
<view class="contract_box send">
<view class="left">
<image class="contract_img" src="../../static/img/contract/pdf.png"></image>
<view class="text">
<view class="name">{{
userInfo.contract.contract_type_name
}}</view>
<view>
<text>{{
userInfo.contract && userInfo.contract.create_time
}}</text>
</view>
</view>
</view>
<view class="right" @click="naviToContract(userInfo.contract.contract_no)">
<!-- <image class="icon"></image> -->
<uni-icons type="paperclip" color="#3274F9"></uni-icons>
<view>查看</view>
</view>
</view>
<u-line color="#999999FF" style="margin: 31rpx 0"></u-line>
<view class="bottom">
<button class="send_btn" @click="getPostsms" v-if="timerCount == 0">
再次发送短信
</button>
<button class="send_btn tips_center" v-else>
{{ cTimerCount + "秒后可继续再次发送短信" }}
</button>
</view>
</view>
</block>
</view>
<u-modal :show="modelShow" title="提醒" :content="modelType==1?'请检查信息无误后再生成合同':'请检查合同无误后再发送'" closeOnClickOverlay showCancelButton cancel-text="我再看看" confirm-text="确认无误" close="modelShow=false" @cancel="modelShow=false" @confirm="modelType==1?createContract():addContract();modelShow=false"></u-modal>
</view>
</template>
<script>
import {
Toast
} from '@/libs/uniApi.js'
import {
companyUserDetail
} from "@/api/company.js"
import {
loginSetInfo,
userDraftingcontracts,
userInitiateContract,
userPostsms
} from "@/api/oaUser.js"
import {
dictDataLists
} from "@/api/oaPbulic.js"
import {
download_file
} from "@/api/junziqian.js"
import {
personnerContractType
} from "@/static/server/contract.js";
export default {
data() {
return {
id: '',
skeleton: true,
show: {
is_captain: false,
id_card: false,
},
typeShow: false,
timer: null, // 计时器
timerCount: 0, //倒计时
updateForm: {
is_captain: 0,
id_card: '',
},
userInfo: {
qualification: {},
contract: {},
roles: {}
},
contractTypeList: [],
modelShow: false,
modelType: 1,
nowContractType: -1
}
},
onLoad(options) {
if (options.id) this.id = options.id;
this.initContractTypeList();
this.loadUserDetail();
let time = uni.getStorageSync('time' + this.id);
if (time > 0 && (time - Date.now()) / 1000 > 0) {
this.startTimer((time - Date.now()) / 1000);
}
},
onUnload() {
if (this.timerCount > 0) uni.setStorageSync('time' + this.id, this.timerCount * 1000 + Date.now());
},
computed: {
cTimerCount() {
return this.timerCount;
}
},
onPullDownRefresh(){
this.loadUserDetail().then(()=>{
uni.stopPullDownRefresh()
});
},
methods: {
// 查看合同
naviToContract(contract_no) {
if (this.userInfo.is_contract) {
download_file({
applyNo: contract_no
}).then(res => {
if (res.code != 1) {
Toast(res.msg)
}
uni.navigateTo({
url: `/subpkg/pdfView/pdfView?url=${res.data.url}`
})
})
} else uni.navigateTo({
url: `/subpkg/pdfView/pdfView?url=${this.userInfo?.contract?.file}`
})
},
navTo(url) {
if(url){
uni.showLoading({
title: '加载中',
mask: true
});
uni.navigateTo({
url: url,
success() {
uni.hideLoading()
}
})
}else Toast('暂未开放')
},
updateShow(value, type) {
this.updateForm[type] = value;
this.show[type] = true;
},
// 更新信息
async updateInfo(type) {
try {
let form = {
user_id: this.userInfo.id,
};
form[type] = this.updateForm[type];
let res = await loginSetInfo(form);
this.userInfo[type] = this.updateForm[type];
Toast('更新成功');
this.show = false;
} catch (e) {
Toast(e.msg || '更新失败')
}
},
changeType(e) {
// console.log(this.contractTypeList[]);
this.nowContractType = e.detail.value;
this.clickContract(1);
// this.createContract({
// party_b: this.userInfo.id,
// contract_type: this.contractTypeList[e.detail.value].id,
// type: 2 //1-公司,2-个人
// })
},
// 初始化合同类型
async initContractTypeList() {
let res = await dictDataLists({
type_id: 7
})
res.data = res.data.filter(item => {
return personnerContractType.find(t => item.id == t);
})
this.contractTypeList = res.data;
},
clickContract(e){
this.modelType = e;
this.modelShow = true;
},
// 生成合同
async createContract() {
uni.showLoading({
title: '合同生成中',
mask: true
})
let res = await userInitiateContract({
party_b: this.userInfo.id,
contract_type: this.contractTypeList[this.nowContractType].id,
type: 2
})
this.loadUserDetail();
uni.hideLoading();
Toast('合同已生成');
this.navTo('/subpkg/submit/submit?type=' + 1);
// uni.showModal({
// content: '请检查信息无误后再生成合同',
// confirmText: '确认无误',
// cancelText: '我再看看',
// confirmColor: '#0122c7',
// success: async (e) => {
// if (e.confirm) {
// }
// }
// })
},
// 发送合同
async addContract() {
try {
uni.showLoading({
title: '合同发送中',
mask: true
})
let res = await userDraftingcontracts({
id: this.userInfo.id
});
this.loadUserDetail();
this.startTimer();
uni.hideLoading();
Toast('合同已发送');
// this.navTo('/subpkg/submit/submit?type='+2);
} catch (e) {
uni.hideLoading();
Toast(e.msg || '合同发送失败');
}
// uni.showModal({
// content: '请检查合同无误后再发送',
// confirmText: '确认无误',
// cancelText: '我再看看',
// confirmColor: '#0122c7',
// success: async (e) => {
// if (e.confirm) {
// }
// }
// })
},
// 发送短信
async getPostsms() {
try {
uni.showLoading({
title: '发送中',
mask: true
})
if (this.timerCount == 0) {
this.startTimer();
let res = await userPostsms({
id: this.userInfo.id
})
uni.hideLoading();
Toast('短信已发送');
// this.navTo('/subpkg/submit/submit?type='+3);
}
} catch (e) {
uni.hideLoading();
Toast(e.msg || '合同发送失败');
}
},
// 定时器
startTimer(time = 60) {
this.timerCount = time.toFixed(0);
this.timer = setInterval(() => {
this.timerCount--;
if (this.timerCount <= 0) {
clearInterval(this.timer);
this.loadUserDetail();
}
}, 1000);
},
async loadUserDetail() {
if (!this.id) return;
let res = await companyUserDetail({
id: this.id
})
this.userInfo = res.data;
this.skeleton = false;
},
previewImg(urls, index = 0) {
uni.previewImage({
urls: urls,
current: index
})
}
}
}
</script>
<style lang="scss">
.page {
display: flex;
flex-direction: column;
align-items: center;
}
.tit {
font-size: 35rpx;
font-weight: 500;
color: white;
// margin-bottom: 21rpx;
padding: 28rpx;
background-color: $theme-oa-color;
border-radius: 14rpx 14rpx 0 0;
.c_text {
// margin: 200rpx 0;
}
}
.card {
width: 694rpx;
background: #ffffff;
border-radius: 14rpx 14rpx 14rpx 14rpx;
padding: 28rpx;
}
.basic {
margin: 28rpx 0;
.card {
font-size: 28rpx;
color: #666666;
.basic_top {
display: flex;
margin-bottom: 28rpx;
.avatar {
width: 154rpx;
height: 154rpx;
background: #cccccc;
border-radius: 7rpx 7rpx 7rpx 7rpx;
margin-right: 28rpx;
}
.text {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
.basic_name {
display: flex;
align-items: center;
.icon {
width: 21rpx;
height: 21rpx;
margin-left: 18rpx;
margin-right: 36rpx;
}
.name {
font-size: 32rpx;
font-weight: 500;
color: #000000cc;
}
.role {
width: 284rpx;
font-size: 28rpx;
font-weight: 500;
color: $theme-oa-color;
// white-space: nowrap; /* 不换行 */
// overflow: hidden; /* 将超出文本隐藏 */
// text-overflow: ellipsis; /* 使用省略号表示被隐藏的文本 */
}
}
.id_card {
display: flex;
justify-content: space-between;
}
}
}
.bottom {
.update {
display: flex;
align-items: center;
color: #f9aa32;
}
}
.popup {
width: 500rpx;
height: 300rpx;
// padding: 28rpx;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
.p_title {
margin-top: 20rpx;
text-align: center;
font-weight: bold;
font-size: 33rpx;
}
.p_body {
margin: 28rpx;
}
.p_button {
display: flex;
border-top: 1rpx solid #ccc;
view {
flex: 1;
height: 80rpx;
line-height: 80rpx;
text-align: center;
border-left: 1rpx solid #ccc;
color: $theme-oa-color;
&:nth-child(1) {
border-left: none;
color: #333;
}
}
}
}
}
}
.certification {
margin-bottom: 28rpx;
overflow: hidden;
.title {
margin-bottom: 0;
}
.c_item {
width: 694rpx;
padding: 0 28rpx;
background-color: #fff;
&:last-child{
padding-bottom: 28rpx;
border-radius: 0 0 14rpx 14rpx;
}
.card_box {
display: flex;
justify-content: space-between;
image {
width: 306rpx;
height: 208rpx;
background: #ffffff;
border-radius: 14rpx 14rpx 14rpx 14rpx;
border: 2rpx solid #cccccc;
}
}
}
}
.contract {
margin-bottom: 28rpx;
.title {
width: 694rpx;
}
.card {
padding-top: 0;
.contract_box {
display: flex;
justify-content: space-between;
.left {
display: flex;
.contract_img {
width: 102rpx;
height: 102rpx;
background: #f5f5f5;
border-radius: 14rpx 14rpx 14rpx 14rpx;
margin-right: 21rpx;
}
.text {
display: flex;
flex-direction: column;
justify-content: space-between;
.name {
font-size: 32rpx;
font-weight: 500;
color: rgba(0, 0, 0, 0.8);
line-height: 35rpx;
}
.nickname {
margin-right: 35rpx;
}
text {
height: 39rpx;
font-size: 28rpx;
font-weight: 400;
color: #666666;
line-height: 35rpx;
}
}
}
.right {
font-size: 28rpx;
font-weight: 500;
color: #3274f9;
line-height: 35rpx;
display: flex;
justify-content: center;
align-items: center;
.icon {
width: 35rpx;
height: 39rpx;
background-color: #3274f9;
opacity: 1;
margin-right: 10rpx;
}
}
}
.send {
padding-top: 28rpx;
}
.send_btn {
width: 100%;
height: 84rpx;
background: $theme-oa-color;
border-radius: 42rpx 42rpx 42rpx 42rpx;
color: #fff;
line-height: 80rpx;
text-align: center;
}
.tips_center {
background-color: #666;
color: #eee;
}
}
.btn {
margin-top: 32rpx;
// margin-bottom: 40rpx;
width: 694rpx;
height: 84rpx;
background: $theme-oa-color;
border-radius: 42rpx 42rpx 42rpx 42rpx;
color: #fff;
line-height: 80rpx;
text-align: center;
}
.tips_center {
background-color: #666;
color: #eee;
}
}
</style>