389 lines
12 KiB
Vue
389 lines
12 KiB
Vue
|
<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="face-btn">点击人脸识别</view>
|
||
|
|
<view class="form-box">
|
||
|
|
<u--form class="addForm" :model="contractForm" ref="cForm">
|
||
|
|
<view class="form-input-box">
|
||
|
|
<view style="width:25%;height: 100%;">
|
||
|
|
<text>甲方</text>
|
||
|
|
</view>
|
||
|
|
<u-form-item prop='partA' style="width:70%;height: 100%;" >
|
||
|
|
<u--input v-model="contractForm.partA" type="text" placeholder="请输入" maxlength="40" border="surround" clearable></u--input>
|
||
|
|
</u-form-item>
|
||
|
|
</view>
|
||
|
|
<view class="form-input-box">
|
||
|
|
<view style="width:25%;height: 100%;">
|
||
|
|
<text>法人代表</text>
|
||
|
|
</view>
|
||
|
|
<u-form-item prop='legalPerson' style="width:70%;height: 100%;" >
|
||
|
|
<u--input v-model="contractForm.legalPerson" type="text" placeholder="请输入" maxlength="20" border="surround" clearable></u--input>
|
||
|
|
</u-form-item>
|
||
|
|
</view>
|
||
|
|
<view class="form-input-box">
|
||
|
|
<view style="width:25%;height: 100%;">
|
||
|
|
<text>联系电话</text>
|
||
|
|
</view>
|
||
|
|
<u-form-item prop='partAPhone' style="width:70%;height: 100%;" >
|
||
|
|
<u--input v-model="contractForm.partAPhone" type="number" placeholder="请输入" maxlength="11" border="surround" clearable></u--input>
|
||
|
|
</u-form-item>
|
||
|
|
</view>
|
||
|
|
<view class="form-input-box">
|
||
|
|
<view style="width:25%;height: 100%;">
|
||
|
|
<text>地址</text>
|
||
|
|
</view>
|
||
|
|
<u-form-item prop='partAAdress' style="width:70%;height: 100%;" >
|
||
|
|
<u--input v-model="contractForm.partAAdress" type="text" placeholder="请输入" maxlength="40" border="surround" clearable></u--input>
|
||
|
|
</u-form-item>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="form-input-box">
|
||
|
|
<view style="width:25%;height: 100%;">
|
||
|
|
<text>乙方</text>
|
||
|
|
</view>
|
||
|
|
<u-form-item prop='partB' style="width:70%;height: 100%;" >
|
||
|
|
<u--input v-model="contractForm.partB" type="text" placeholder="请输入" maxlength="40" border="surround" clearable></u--input>
|
||
|
|
</u-form-item>
|
||
|
|
</view>
|
||
|
|
<view class="form-input-box">
|
||
|
|
<view style="width:25%;height: 100%;">
|
||
|
|
<text>性别</text>
|
||
|
|
</view>
|
||
|
|
<u-form-item prop='sex' style="width:70%;height: 100%;" >
|
||
|
|
<u-radio-group v-model="contractForm.sex" placement="row" style="border: 1rpx solid #ccc;padding:20rpx;border-radius: 10rpx;">
|
||
|
|
<u-radio label="男" name="男" style="margin-right: 40rpx;"></u-radio>
|
||
|
|
<u-radio label="女" name="女" ></u-radio>
|
||
|
|
</u-radio-group>
|
||
|
|
</u-form-item>
|
||
|
|
</view>
|
||
|
|
<view class="form-input-box">
|
||
|
|
<view style="width:25%;height: 100%;">
|
||
|
|
<text>联系方式</text>
|
||
|
|
</view>
|
||
|
|
<u-form-item prop='partBPhone' style="width:70%;height: 100%;" >
|
||
|
|
<u--input v-model="contractForm.partBPhone" type="number" placeholder="请输入" maxlength="11" border="surround" clearable></u--input>
|
||
|
|
</u-form-item>
|
||
|
|
</view>
|
||
|
|
<view class="form-input-box">
|
||
|
|
<view style="width:25%;height: 100%;">
|
||
|
|
<text>家庭地址</text>
|
||
|
|
</view>
|
||
|
|
<u-form-item prop='partBAdress' style="width:70%;height: 100%;" >
|
||
|
|
<u--input v-model="contractForm.partBAdress" type="text" placeholder="请输入" maxlength="40" border="surround" clearable></u--input>
|
||
|
|
</u-form-item>
|
||
|
|
</view>
|
||
|
|
<view class="form-input-box">
|
||
|
|
<view style="width:25%;height: 100%;">
|
||
|
|
<text>工种</text>
|
||
|
|
</view>
|
||
|
|
<u-form-item prop='workTypeId' style="width:70%;height: 100%;" >
|
||
|
|
<uni-data-select v-model="contractForm.workTypeId" :localdata="postList" @change="changePost"></uni-data-select>
|
||
|
|
</u-form-item>
|
||
|
|
</view>
|
||
|
|
<view class="form-input-box">
|
||
|
|
<view style="width:25%;height: 100%;">
|
||
|
|
<text>工作任务</text>
|
||
|
|
</view>
|
||
|
|
<u-form-item prop='workTask' style="width:70%;height: 100%;" >
|
||
|
|
<u--input v-model="contractForm.workTask" type="text" placeholder="请输入" maxlength="40" border="surround" clearable></u--input>
|
||
|
|
</u-form-item>
|
||
|
|
</view>
|
||
|
|
<view class="form-input-box">
|
||
|
|
<view style="width:25%;height: 100%;">
|
||
|
|
<text>工作地点</text>
|
||
|
|
</view>
|
||
|
|
<u-form-item prop='workAdress' style="width:70%;height: 100%;" >
|
||
|
|
<u--input v-model="contractForm.workAdress" type="text" placeholder="请输入" maxlength="40" border="surround" clearable></u--input>
|
||
|
|
</u-form-item>
|
||
|
|
</view>
|
||
|
|
<view class="form-input-box">
|
||
|
|
<view style="width:25%;height: 100%;">
|
||
|
|
<text>工资核定方式</text>
|
||
|
|
</view>
|
||
|
|
<u-form-item prop='verMethod' style="width:70%;height: 100%;" >
|
||
|
|
<u--input v-model="contractForm.verMethod" type="text" readonly border="surround"></u--input>
|
||
|
|
</u-form-item>
|
||
|
|
</view>
|
||
|
|
<view class="form-input-box">
|
||
|
|
<view style="width:25%;height: 100%;">
|
||
|
|
<text>工资核定标准</text>
|
||
|
|
</view>
|
||
|
|
<u-form-item prop='verStand' style="width:70%;height: 100%;" >
|
||
|
|
<u--input v-model="contractForm.verStand" type="number" placeholder="请输入" maxlength="3" border="surround" clearable></u--input>
|
||
|
|
</u-form-item>
|
||
|
|
</view>
|
||
|
|
<view class="form-input-box">
|
||
|
|
<view style="width:25%;height: 100%;">
|
||
|
|
<text>生效日期</text>
|
||
|
|
</view>
|
||
|
|
<u-form-item prop='effectDate' style="width:70%;height: 100%;" >
|
||
|
|
<uni-datetime-picker type="date" :clear-icon="false" format="yyyy-MM-dd" v-model="contractForm.effectDate"/>
|
||
|
|
</u-form-item>
|
||
|
|
</view>
|
||
|
|
<view class="form-input-box">
|
||
|
|
<view style="width:25%;height: 100%;">
|
||
|
|
<text>其他补充事项</text>
|
||
|
|
</view>
|
||
|
|
<u-form-item prop='otherSupply' style="width:70%;height: 100%;" >
|
||
|
|
<u--input v-model="contractForm.otherSupply" type="text" placeholder="请输入" maxlength="40" border="surround" clearable></u--input>
|
||
|
|
</u-form-item>
|
||
|
|
</view>
|
||
|
|
<view class="form-input-box">
|
||
|
|
<view style="width:25%;height: 100%;">
|
||
|
|
<text>人员角色</text>
|
||
|
|
</view>
|
||
|
|
<u-form-item prop='role' style="width:70%;height: 100%;" >
|
||
|
|
<uni-data-select v-model="contractForm.role" :localdata="roleList"></uni-data-select>
|
||
|
|
</u-form-item>
|
||
|
|
</view>
|
||
|
|
<view class="form-input-box">
|
||
|
|
<view style="width:25%;height: 100%;">
|
||
|
|
<text>乙方签名</text>
|
||
|
|
</view>
|
||
|
|
<u-form-item prop='' style="width:70%;height: 100%;" >
|
||
|
|
|
||
|
|
</u-form-item>
|
||
|
|
</view>
|
||
|
|
<view class="form-input-box">
|
||
|
|
<view style="width:25%;height: 100%;">
|
||
|
|
<text>班组长签名</text>
|
||
|
|
</view>
|
||
|
|
<u-form-item prop='' style="width:70%;height: 100%;" >
|
||
|
|
|
||
|
|
</u-form-item>
|
||
|
|
</view>
|
||
|
|
<view class="form-input-box">
|
||
|
|
<view style="width:25%;height: 100%;">
|
||
|
|
<text>验证码</text>
|
||
|
|
</view>
|
||
|
|
<u-form-item prop='' style="width:70%;height: 100%;" >
|
||
|
|
|
||
|
|
</u-form-item>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<!-- <view style="width: 100%;height: auto;">
|
||
|
|
<view style="width:25%;height: 100%;margin: 20rpx;">
|
||
|
|
<text>合同期限类型</text>
|
||
|
|
</view>
|
||
|
|
<u-form-item prop='laborContractType' style="width:96%;height: 100%;margin: 0 auto;" >
|
||
|
|
<u-radio-group v-model="contractForm.laborContractType" placement="row" style="border: 1rpx solid #ccc;padding:20rpx 10rpx;border-radius: 10rpx;">
|
||
|
|
<u-radio label="以完成一定工作为期限的合同" name="以完成一定工作为期限的合同" style="margin-right: 20rpx;transform:scale(0.8);"></u-radio>
|
||
|
|
<u-radio label="固定期限合同" name="固定期限合同" style="transform:scale(0.8);"></u-radio>
|
||
|
|
</u-radio-group>
|
||
|
|
</u-form-item>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
|
||
|
|
<view class="form-input-box">
|
||
|
|
<view style="width:25%;height: 100%;">
|
||
|
|
<text>合同终止日期</text>
|
||
|
|
</view>
|
||
|
|
<u-form-item prop='contractInvalidDate' style="width:70%;height: 100%;" >
|
||
|
|
<uni-datetime-picker type="date" :clear-icon="false" format="yyyy-MM-dd" v-model="contractForm.contractInvalidDate"/>
|
||
|
|
</u-form-item>
|
||
|
|
</view>
|
||
|
|
<view class="form-input-box">
|
||
|
|
<view style="width:25%;height: 100%;">
|
||
|
|
<text>合同类型</text>
|
||
|
|
</view>
|
||
|
|
<u-form-item prop='contractType' style="width:70%;height: 100%;" >
|
||
|
|
<u--input v-model="contractForm.contractType" type="text" readonly border="surround"></u--input>
|
||
|
|
</u-form-item>
|
||
|
|
</view> -->
|
||
|
|
|
||
|
|
|
||
|
|
</u--form>
|
||
|
|
</view>
|
||
|
|
<view class="bottom-box">
|
||
|
|
<view class="btn1">返回</view>
|
||
|
|
<view class="btn2">预览合同</view>
|
||
|
|
</view>
|
||
|
|
</scroll-view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import PdfView from '../../components/PdfView.vue';
|
||
|
|
import config from '@/config';
|
||
|
|
export default {
|
||
|
|
components: { PdfView },
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
postList:[],
|
||
|
|
roleList:[
|
||
|
|
{value:'管理人员',text:'管理人员'},
|
||
|
|
{value:'务工人员',text:'务工人员'},
|
||
|
|
{value:'劳资专管员',text:'劳资专管员'}
|
||
|
|
],
|
||
|
|
contractForm:{
|
||
|
|
"partA": "",//甲方
|
||
|
|
"legalPerson": "",//法人代表
|
||
|
|
"partAPhone": "",//甲方电话
|
||
|
|
"partAAdress": "",//甲方地址
|
||
|
|
"partB": "",//乙方
|
||
|
|
"sex":"男",//性别
|
||
|
|
"partBPhone": "",//乙方电话
|
||
|
|
"partBAdress": "",//乙方地址
|
||
|
|
"workTypeId":"",//工种id
|
||
|
|
"workType":"",//工种
|
||
|
|
"workTask":"",//工作任务
|
||
|
|
"workAdress":"",//工作地点
|
||
|
|
"verMethod": "天",//工资核定方式
|
||
|
|
"verStand": "",//工资核定标准
|
||
|
|
"effectDate": "",//生效日期
|
||
|
|
"otherSupply": "",//其他补充事项
|
||
|
|
"role": "",//人员角色
|
||
|
|
"partBSign": "",//乙方签名
|
||
|
|
"teamSign": "",//班组长签名
|
||
|
|
|
||
|
|
|
||
|
|
"id":'',
|
||
|
|
"idNumber":uni.getStorageSync('realNameUser').idNumber,
|
||
|
|
"proId":uni.getStorageSync('realNameUser').proId,//工程id
|
||
|
|
"uploadDate": "",//日期
|
||
|
|
"uploadTime": "",//时间
|
||
|
|
"uploadId": uni.getStorageSync('realNameUser').userId,//上传人id
|
||
|
|
"witnessType": "1",
|
||
|
|
"isActive": "1",
|
||
|
|
"witnessPath": "",//图片地址
|
||
|
|
// "contractPath": "",//合同见证照片
|
||
|
|
|
||
|
|
"laborContractType": "固定期限合同",//合同期限类型
|
||
|
|
|
||
|
|
"contractInvalidDate": "",//合同终止日期
|
||
|
|
"contractType": "纸质合同",//合同类型
|
||
|
|
"isYiLiao": "是",//是否参加城乡居民医疗保险
|
||
|
|
"isYangLao": "是",//是否参加城乡居民养老保险
|
||
|
|
"whetherOnJob": "是"//是否在职
|
||
|
|
},
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
|
||
|
|
console.log('🚀 ~ mounted ~ mounted-index:')
|
||
|
|
this.getpostList()
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
//获取工种
|
||
|
|
getpostList(){
|
||
|
|
uni.request({
|
||
|
|
url: config.realAppUrl + '/offLine/getWorkType',
|
||
|
|
method: 'post',
|
||
|
|
data: {},
|
||
|
|
header: {
|
||
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
||
|
|
Authorization: uni.getStorageSync('realNameToken')
|
||
|
|
},
|
||
|
|
success: res => {
|
||
|
|
res = res.data;
|
||
|
|
if(res.code==200){
|
||
|
|
res.data.forEach(item=>{
|
||
|
|
if(item.code=='postType'){
|
||
|
|
let obj={value:item.id,text:item.type}
|
||
|
|
this.postList.push(obj)
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
fail: err => {
|
||
|
|
console.log(err)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
changePost(e){
|
||
|
|
this.postList.forEach(item=>{
|
||
|
|
console.log(item)
|
||
|
|
if(item.value==e){
|
||
|
|
this.contractForm.workType=item.text;
|
||
|
|
}
|
||
|
|
})
|
||
|
|
console.log(this.contractForm.workType)
|
||
|
|
},
|
||
|
|
// 返回
|
||
|
|
leftClick() {
|
||
|
|
console.log('返回')
|
||
|
|
uni.navigateBack({
|
||
|
|
delta: 1 // 返回
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.page {
|
||
|
|
width: 100vw;
|
||
|
|
height: 100vh;
|
||
|
|
background-color: #FFF;
|
||
|
|
box-sizing: border-box;
|
||
|
|
position: relative;
|
||
|
|
.content{
|
||
|
|
width: 100%;
|
||
|
|
height: 92vh;
|
||
|
|
// margin-top: 20rpx;
|
||
|
|
padding-bottom: 40rpx;
|
||
|
|
}
|
||
|
|
.face-btn{
|
||
|
|
width: 92%;
|
||
|
|
height: 80rpx;
|
||
|
|
margin: 0 auto;
|
||
|
|
margin-top: 40rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;justify-content: center;
|
||
|
|
color: #FFF;
|
||
|
|
background: #00337A;
|
||
|
|
border-radius: 10rpx;
|
||
|
|
}
|
||
|
|
.form-box{
|
||
|
|
width: 94%;
|
||
|
|
height: auto;
|
||
|
|
margin: 0 auto;
|
||
|
|
margin-top: 20rpx;
|
||
|
|
.addForm{
|
||
|
|
width: 100%;
|
||
|
|
height: auto;
|
||
|
|
font-size: 26rpx;
|
||
|
|
.form-input-box{
|
||
|
|
padding: 0 20rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
// border-bottom: 1rpx solid #eee;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.bottom-box{
|
||
|
|
width: 90%;
|
||
|
|
margin: 0 auto;
|
||
|
|
height: 120rpx;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
.btn1{
|
||
|
|
width: 40%;
|
||
|
|
height: 80rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;justify-content: center;
|
||
|
|
color: #FFF;
|
||
|
|
background: #00337A;
|
||
|
|
border-radius: 10rpx;
|
||
|
|
}
|
||
|
|
.btn2{
|
||
|
|
width: 40%;
|
||
|
|
height: 80rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;justify-content: center;
|
||
|
|
color: #FFF;
|
||
|
|
background: #00337A;
|
||
|
|
border-radius: 10rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|