hywen
/
YNUtdPlatform
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
YNUtdPlatform/pages/realName/workbench/electronicContractSign/index.vue

701 lines
19 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' }"></u-navbar>
<view class="tab-box">
<view class="tab-item" :class="currentTabIndex == 0 ? 'active' : ''" @click="currentTabIndex = 0">
待签署
<view class="activeLine" v-if="currentTabIndex == 0"></view>
</view>
<view class="tab-item" :class="currentTabIndex == 1 ? 'active' : ''" @click="currentTabIndex = 1">
已签署
<view class="activeLine" v-if="currentTabIndex == 1"></view>
</view>
</view>
<scroll-view class="content" scroll-y="true">
<view class="view-box" v-show="currentTabIndex == 0">
<view style="width: 96%;padding:20rpx;margin: 0 auto;background: #FFF;margin-bottom: 20rpx;">{{proName}}</view>
<view class="form-box">
<view class="form-input-box">
<view style="width:65%;height: 100%;">
<u--input v-model="keyWord" type="text" placeholder="请输入关键字" maxlength="20" border="surround" clearable></u--input>
</view>
<view class="submitBtn" @click="searchList">搜索</view>
<view class="submitBtn" style="width: 15%;" @click="handlebatchSign">批量签署</view>
</view>
</view>
<view v-if="listData.length==0" style="width: 96%;height: 60vh;display: flex;flex-direction: column;justify-content: center;align-items: center;" >
<image src="../../../../static/realName/noData.png" style="width: 100rpx;height: 120rpx;" mode=""></image>
<view>暂无数据</view>
</view>
<u-list height="65vh" v-if="listData.length>0">
<u-list-item v-for="(item, index) in listData" :key="index">
<view class="list-item" @click="goDetail(item)">
<view class="content-box">
<view class="item-text" style="display:flex;">
<u-checkbox-group v-model="item.checked" @change="checkSelect(item)" >
<u-checkbox :customStyle="{margin: '0rpx 10rpx'}" :label="''" :name="item.id"></u-checkbox>
</u-checkbox-group>
<view style="width: 80%;">
<text class="label" style="font-weight: bold;">姓名：</text>
<text class="info">{{item.partB}}</text>
<text style="color: #06E7A3;float: right;margin-right: 20rpx;">乙</text>
</view>
</view>
<view class="item-text" >
<text class="label" style="font-weight: bold;">工种：</text>
<text class="info">{{item.workType}}</text>
</view>
<view class="item-text" >
<text class="label" style="font-weight: bold;">身份证：</text>
<text class="info">{{item.partBIdCard}}</text>
</view>
<view class="item-text" >
<text class="label" style="font-weight: bold;">核定工资方式：</text>
<text class="info">{{item.verMethod}}</text>
</view>
<view class="item-text" >
<text class="label" style="font-weight: bold;">核定工资标准：</text>
<text class="info">{{item.verStand}}</text>
</view>
<view class="item-text" >
<text class="label" style="font-weight: bold;">工作地点：</text>
<text class="info">{{item.workAdress}}</text>
</view>
<view style="border-bottom: 2rpx solid #ccc;width: 94%;margin: 10rpx auto;"></view>
<view class="item-text" >
<text class="label" style="font-weight: bold;">甲方：</text>
<text class="info">{{item.partA}}</text>
<text style="color: #F79E05;float: right;margin-right: 20rpx;">甲</text>
</view>
<view style="border-bottom: 2rpx solid #ccc;width: 94%;margin: 10rpx auto;"></view>
<view class="item-text" style="width: 90%;display: flex;justify-content: space-between;">
<view>
<text class="label" style="font-weight: bold;">生效日期：</text>
<text class="info">{{item.effectDate}}</text>
</view>
<view>
<text class="label" style="font-weight: bold;">签订日期：</text>
<text class="info">{{item.signingDate}}</text>
</view>
</view>
</view>
</view>
</u-list-item>
</u-list>
<view style="width:92%;height: 80rpx;display: flex;align-items: center;justify-content: flex-end;">
<view @click="checkedAll" style="width:20%;height:60rpx;line-height: 60rpx;text-align: center;background: #00337A;color: #FFF;border-radius: 10rpx;">全选</view>
</view>
</view>
<view class="view-box" v-show="currentTabIndex == 1">
<view style="width: 96%;padding:20rpx;margin: 0 auto;background: #FFF;margin-bottom: 20rpx;">{{proName}}</view>
<view class="form-box">
<view class="form-input-box">
<view style="width: 70%;height: 100%;">
<u--input v-model="keyWord1" type="text" placeholder="请输入关键字" maxlength="20" border="surround" clearable></u--input>
</view>
<view class="submitBtn" style="width: 15%;" @click="searchList">搜索</view>
</view>
</view>
<view v-if="listData.length==0" style="width: 96%;height: 60vh;display: flex;flex-direction: column;justify-content: center;align-items: center;" >
<image src="../../../../static/realName/noData.png" style="width: 100rpx;height: 120rpx;" mode=""></image>
<view>暂无数据</view>
</view>
<u-list height="72vh" v-if="listData.length>0">
<u-list-item v-for="(item, index) in listData" :key="index">
<view class="list-item" @click="goDetail(item)">
<view class="content-box">
<view class="item-text" >
<text class="label" style="font-weight: bold;">姓名：</text>
<text class="info">{{item.partB}}</text>
<text style="color: #06E7A3;float: right;margin-right: 20rpx;">乙</text>
</view>
<view class="item-text" >
<text class="label" style="font-weight: bold;">工种：</text>
<text class="info">{{item.workType}}</text>
</view>
<view class="item-text" >
<text class="label" style="font-weight: bold;">身份证：</text>
<text class="info">{{item.partBIdCard}}</text>
</view>
<view class="item-text" >
<text class="label" style="font-weight: bold;">核定工资方式：</text>
<text class="info">{{item.verMethod}}</text>
</view>
<view class="item-text" >
<text class="label" style="font-weight: bold;">核定工资标准：</text>
<text class="info">{{item.verStand}}</text>
</view>
<view class="item-text" >
<text class="label" style="font-weight: bold;">工作地点：</text>
<text class="info">{{item.workAdress}}</text>
</view>
<view style="border-bottom: 2rpx solid #ccc;width: 94%;margin: 10rpx auto;"></view>
<view class="item-text" >
<text class="label" style="font-weight: bold;">甲方：</text>
<text class="info">{{item.partA}}</text>
<text style="color: #F79E05;float: right;margin-right: 20rpx;">甲</text>
</view>
<view style="border-bottom: 2rpx solid #ccc;width: 94%;margin: 10rpx auto;"></view>
<view class="item-text" style="width: 90%;display: flex;justify-content: space-between;">
<view>
<text class="label" style="font-weight: bold;">生效日期：</text>
<text class="info">{{item.effectDate}}</text>
</view>
<view>
<text class="label" style="font-weight: bold;">签订日期：</text>
<text class="info">{{item.signingDate}}</text>
</view>
</view>
</view>
</view>
</u-list-item>
</u-list>
</view>
</scroll-view>
</view>
</template>
<script>
import { pathToBase64, base64ToPath } from 'image-tools';
import config from '@/config'
export default {
data() {
return {
currentTabIndex:0,
proId:uni.getStorageSync('realNameUser').proId,
proName:"",
teamId:uni.getStorageSync('realNameUser').teamId,
userId:uni.getStorageSync('realNameUser').userId,
keyWord:"",
keyWord1:"",
signData:{},
isCheckAll:false,
listData:[],
}
},
onLoad(option) {
this.getPro();
this.getSubcontractor();
},
onShow() {
if (this.currentTabIndex == 1) {
this.contractSignQueryList(1)
} else {
this.contractSignQueryList(0)
}
},
watch: {
currentTabIndex: function(newVal, oldVal) {
if (newVal == 1) {
this.contractSignQueryList(1)
} else {
this.contractSignQueryList(0)
}
}
},
methods: {
// 获取工程名称
getPro(){
let param={
id:this.proId,
subId:-1
}
uni.request({
url: config.realAppUrl + '/offLine/getPro',
method: 'post',
data: param,
header: {
'Content-Type': 'application/x-www-form-urlencoded',
Authorization: uni.getStorageSync('realNameToken')
},
success: res => {
res = res.data;
if(res.code==200){
console.log(res)
this.proName = res.data[0].abbreviation||"";
}
},
fail: err => {
console.log(err)
}
})
},
//获取分包信息
getSubcontractor(){
let param={
id:uni.getStorageSync('realNameUser').subId,
proId:-1
}
uni.request({
url: config.realAppUrl + '/offLine/getSubcontractor',
method: 'post',
data: param,
header: {
'Content-Type': 'application/x-www-form-urlencoded',
Authorization: uni.getStorageSync('realNameToken')
},
success: res => {
res = res.data;
if(res.code==200){
console.log(res)
if(res.data.length>0){
this.signData = res.data[0]
console.log(this.signData)
}
}
},
fail: err => {
console.log(err)
}
})
},
searchList(){
if (this.currentTabIndex == 1) {
this.contractSignQueryList(1)
} else {
this.contractSignQueryList(0)
}
},
//获取列表
contractSignQueryList(type){
let param={
isSign:type,
proId:uni.getStorageSync('realNameUser').proId,
keyWord:this.keyWord,
}
if(type==1){
param.keyWord=this.keyWord1;
}
console.log(param)
this.listData=[]
uni.request({
url: config.realAppUrl+'/contract/contractSignQueryList',
method: 'post',
data: param,
header: {
'Content-Type': 'application/x-www-form-urlencoded',
Authorization: uni.getStorageSync('realNameToken')
},
success: res => {
console.log(res)
res = res.data;
if(res.code==200){
res.data.forEach(item=>{
item.checked=[];
})
this.listData=res.data;
}else{
uni.showToast({
title: res.msg,
icon: 'none'
})
}
},
fail: err => {
console.log(err)
}
})
},
goDetail(item){
console.log(item)
let videoUrl=config.realFileUrl+ item.videoUrl;
let url="";
if(item.isSign=='1'){
url=config.realFileUrl+ item.subPdfUrl;
}else{
url=config.realFileUrl+ item.personPdfUrl;
}
实名制复测问题修改
2024-11-06 09:07:29 +08:00
console.log(url)
实名制小程序模块前端提交
2024-09-29 10:19:21 +08:00
uni.navigateTo({
url: `/pages/realName/workbench/electronicContractSign/contractPdf?pdfUrl=${url}&videoUrl=${videoUrl}&contractData=${JSON.stringify(item)}`
})
},
// 单选
checkSelect(chosen){
this.listData.forEach(item=>{
if(item.id==chosen.id){
if(item.checked.length==0){
item.checked=[item.id]
}else{
item.checked=[]
}
}
})
},
// 全选
checkedAll(){
this.isCheckAll=!this.isCheckAll
if(this.isCheckAll){
this.listData.forEach(item=>{
item.checked=[item.id]
})
}else{
this.listData.forEach(item=>{
item.checked=[]
})
}
},
handlebatchSign(){
let paramsList = []
this.listData.forEach(item=>{
if(item.checked.length>0){
paramsList.push(item)
}
})
if(paramsList.length>0){
uni.showModal({
title: `确认是否批量签署电子合同？`,
cancelText: '取消',
confirmText: '确定',
success: res => {
if (res.confirm) {
this.batchSign()
}
}
});
}else{
uni.showToast({
title: '请先勾选签署合同!',
icon: 'none'
})
}
},
async batchSign() {
// 使用for await...of实现处理异步操作
for await (let item of this.listData) {
if(item.checked.length>0){
let param = {
isSign:1,
legalSeal:this.signData.signPath,
companySeal:this.signData.sealPath,
subPdfUrl:item.personPdfUrl,
partBIdCard:item.partBIdCard,
id:item.id,
}
console.log(param)
await uni.request({
url: config.realAppUrl+'/contract/updateSign',
method: 'post',
data: param,
header: {
'Content-Type': 'application/x-www-form-urlencoded',
Authorization: uni.getStorageSync('realNameToken')
},
success: res => {
console.log(res)
res = res.data;
if(res.code==200){
uni.showToast({
title: res.data,
icon: 'none'
})
实名制复测问题修改
2024-11-06 09:07:29 +08:00
setTimeout(()=>{
this.getText(item)
},1000)
实名制小程序模块前端提交
2024-09-29 10:19:21 +08:00
}else{
uni.showToast({
title: res.msg,
icon: 'none'
})
}
},
fail: err => {
console.log(err)
}
})
}
}
this.contractSignQueryList(0)
},
实名制复测问题修改
2024-11-06 09:07:29 +08:00
//短信
getText(item){
let pathUrl = config.realFileUrl+item.personPdfUrl
let arr = pathUrl.split(".pdf")
let path = arr[0]+"_sign.pdf"
let shortText = "【作业管控智慧平台】" + item.partB + "，你的电子合同已签署成功，地址为：" + path;
console.log(shortText)
let param = {
ddtkey:"bonus",
secretkey:"KtyBns@Admin2023!",
mobile:item.partBPhone,
content:shortText
}
console.log(param)
uni.request({
url: "http://api.ktsms.cn/sms_token",
method: 'post',
data: param,
header: {
'Content-Type': 'application/x-www-form-urlencoded',
},
success: res => {
console.log(res)
if(res.data.split(",")[0]=="ok"){
uni.$u.toast('发送成功！');
}
},
fail: err => {
console.log(err)
}
})
},
实名制小程序模块前端提交
2024-09-29 10:19:21 +08:00
leftClick() {
console.log('返回')
uni.navigateBack({
delta: 1 // 返回
});
},
timeFormat(dateTime = null, formatStr = 'yyyy-mm-dd') {
let date
// 若传入时间为假值，则取当前时间
if (!dateTime) {
date = new Date()
}
// 若为unix秒时间戳，则转为毫秒时间戳（逻辑有点奇怪，但不敢改，以保证历史兼容）
else if (/^\d{10}$/.test(dateTime?.toString().trim())) {
date = new Date(dateTime * 1000)
}
// 若用户传入字符串格式时间戳，new Date无法解析，需做兼容
else if (typeof dateTime === 'string' && /^\d+$/.test(dateTime.trim())) {
date = new Date(Number(dateTime))
}
// 处理平台性差异，在Safari/Webkit中，new Date仅支持/作为分割符的字符串时间
// 处理 '2022-07-10 01:02:03'，跳过 '2022-07-10T01:02:03'
else if (typeof dateTime === 'string' && dateTime.includes('-') && !dateTime.includes('T')) {
date = new Date(dateTime.replace(/-/g, '/'))
}
// 其他都认为符合 RFC 2822 规范
else {
date = new Date(dateTime)
}
const timeSource = {
'y': date.getFullYear().toString(), // 年
'm': (date.getMonth() + 1).toString().padStart(2, '0'), // 月
'd': date.getDate().toString().padStart(2, '0'), // 日
'h': date.getHours().toString().padStart(2, '0'), // 时
'M': date.getMinutes().toString().padStart(2, '0'), // 分
's': date.getSeconds().toString().padStart(2, '0') // 秒
// 有其他格式化字符需求可以继续添加，必须转化成字符串
}
for (const key in timeSource) {
const [ret] = new RegExp(`${key}+`).exec(formatStr) || []
if (ret) {
// 年可能只需展示两位
const beginIndex = key === 'y' && ret.length === 2 ? 2 : 0
formatStr = formatStr.replace(ret, timeSource[key].slice(beginIndex))
}
}
return formatStr
},
},
}
</script>
<style lang="scss">
.page {
width: 100vw;
height: 100vh;
background-color: #EFEFEF;
box-sizing: border-box;
.tab-box {
width: 100%;
margin: 0rpx auto;
padding-top: 20rpx;
display: flex;
justify-content: space-between;
background-color: #FFF;
.tab-item {
height: 70upx;
width: 45%;
font-size: 30upx;
text-align: center;
line-height: 70upx;
color: #666;
}
.active {
color: #00337A;
border-radius: 10upx 10upx 0 0;
font-weight: bold;
}
.activeLine{
background: #00337A;
border-radius: 10upx;
width: 100%;
height: 6upx;
}
}
.submitBtn{
width: 10%;
height: 50rpx;
line-height: 50rpx;
border-radius: 10rpx;
background: #00337A;
color: #FFF;
padding: 10rpx 16rpx;
text-align: center;
}
.content{
width: 100%;
height: 84vh;
margin-top: 20rpx;
// padding-bottom: 80rpx;
background-color: #EFEFEF;
}
// padding: 0 20px;
.map-box{
width: 100%;
height: 68vh;
z-index: 9;
position: absolute;
bottom:1vh;
background: #fff;
.map{
display: inline-block;
width: 100%;
height: 100%;
}
}
.view-box{
width: 100%;
height: auto;
margin: 0rpx auto;
border-radius: 10rpx;
padding-top: 20rpx;
// background-color: red;
.title-view{
font-weight: 600;
margin-left: 20rpx;
border-bottom: 1rpx solid #EFEFEF;
}
.form-box{
width: 100%;
height: auto;
font-size: 26rpx;
background-color: #FFF;
.form-input-box{
padding: 0 10rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
}
.view-item{
width: 94%;
margin: 0rpx auto;
padding:10rpx;
display: flex;
border-bottom: 1rpx solid #EFEFEF;
font-size: 26rpx;
.label{
width: 160rpx;
color: #666;
margin-bottom: 10rpx;
}
.img-box{
width: 94%;
height: auto;
margin: 0rpx auto;
padding:10rpx;
display: flex;
border-bottom: 1rpx solid #EFEFEF;
.img-item {
float: left;
width: 200upx;
height: 200upx;
border: 1px solid #ddd;
margin: 0 22rpx 20upx 0upx;
position: relative;
box-sizing: border-box;
background: #eee;
.img {
display: block;
width: 100%;
height: 100%;
}
.remove-btn {
position: absolute;
top: -18upx;
right: -18upx;
width: 44upx;
height: 44upx;
z-index: 2;
}
}
.upload-btn {
display: flex;
justify-content: center;
align-items: center;
.img {
width: 60upx;
height: 60upx;
margin: unset;
}
}
}
}
.sumbit-btn{
width: 94%;
height: 80rpx;
margin: 0 auto;
margin-bottom: 100rpx;
display: flex;align-items: center;justify-content: center;
background: #00337A;
color: #FFF;
border-radius: 10rpx;
}
}
.list-item{
width: 100%;
height: auto;
// background-color: #fff;
border-radius: 20rpx;
margin: 20rpx 0;
.content-box{
width: 96%;
height: auto;
margin: 20rpx;
background-color: #F2F6F9;
padding: 10rpx 0;
.item-text{
width: 96%;
margin-left: 20rpx;
margin-top: 15rpx;
// display: flex;
align-items: center;
position: relative;
.label{
color: #3A3A3A;
// font-weight: 500;
}
.info-right{
position: absolute;
top: 0rpx;
right: 40rpx;
}
.info{
color: #6F6F6F;
}
}
}
}
}
</style>