Переглянути джерело

标段合同网签

rongxin_prod
QI_YUJIE 2 роки тому
джерело
коміт
f0599dfd07
5 змінених файлів з 773 додано та 0 видалено
  1. +27
    -0
      src/api/sunVillage_info/fixedAssets.js
  2. BIN
      src/assets/images/sunVillage_info/index_icon_10.png
  3. +18
    -0
      src/router/index.js
  4. +526
    -0
      src/views/sunVillage_info/list_multipleLots.vue
  5. +202
    -0
      src/views/sunVillage_info/list_multipleLots_add.vue

+ 27
- 0
src/api/sunVillage_info/fixedAssets.js Переглянути файл

@@ -682,3 +682,30 @@ export function contractGet(query,id) {
params:query params:query
}) })
} }

// 查询多标段合同列表
export function listMultiplelots(query) {
return request({
url: '/transaction/multiplelots/list',
method: 'get',
params: query
})
}

// 查询多标段合同详情
export function getMultiplelots(query, id) {
return request({
url: '/transaction/multiplelots/get/' + id,
method: 'get',
params: query
})
}

// 标段合同甲方签字
export function multipleLotsFirstSign(data, id) {
return request({
url: '/transaction/multiplelots/firstSign/' + id,
method: 'post',
data: data
})
}

BIN
src/assets/images/sunVillage_info/index_icon_10.png Переглянути файл

Перед Після
Ширина: 65  |  Висота: 58  |  Розмір: 3.6 KiB

+ 18
- 0
src/router/index.js Переглянути файл

@@ -3821,6 +3821,24 @@ export const constantRoutes = [
}, },
component: (resolve) => require(['@/views/sunVillage_info/list_official'], resolve) component: (resolve) => require(['@/views/sunVillage_info/list_official'], resolve)
}, },
{ ////阳光村务(新)-- 标段合同网签
path: '/sunVillage_info/list_multipleLots',
name: 'sunVillageInfoListMultipleLots',
meta: {
title: '标段合同网签',
hidden: true,
},
component: (resolve) => require(['@/views/sunVillage_info/list_multipleLots'], resolve)
},
{ ////阳光村务(新)-- 标段合同网签
path: '/sunVillage_info/list_multipleLots_add',
name: 'sunVillageInfoListMultipleLotsAdd',
meta: {
title: '标段合同网签',
hidden: true,
},
component: (resolve) => require(['@/views/sunVillage_info/list_multipleLots_add'], resolve)
},
{ ////阳光村务(新)-- 宅基地申请 { ////阳光村务(新)-- 宅基地申请
path: '/sunVillage_info/homeApplication/applicationList', path: '/sunVillage_info/homeApplication/applicationList',
name: 'sunVillageInfoApplicationList', name: 'sunVillageInfoApplicationList',


+ 526
- 0
src/views/sunVillage_info/list_multipleLots.vue Переглянути файл

@@ -0,0 +1,526 @@
<template>
<div class="home_wrapper">
<div
class="header_main"
:style="`background-image:url(${require(showBtn?'@/assets/images/sunVillage_info/list_head.png':'@/assets/images/sunVillage_info/list_head_red.png')})`"
>
标段合同网签
<div class="return_btn" @click="onClickLeft"></div>
<!-- <div class="add_btn" @click="goAdd" v-show="showBtn"></div>-->
</div>

<div class="list_main">
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="getList"
>
<van-swipe-cell v-for="item in applicationList" :key="item.id" :disabled="item.firstIsSign === '是'">
<div class="item" @click="goDetail(item.id)">
<div class="info">
<div class="title">
<i class="icon_box" v-if="item.firstSigning == null"></i>
<i class="icon_box1" v-if="item.firstSigning != null"></i>
<p class="news_title" :style="{'color': item.firstSigning != null ? '#2bc30c' : '#eb1616'}">{{item.contractCode}}</p>
<p class="tips_mark"
:style="{'color': item.firstSigning != null ? '#79bc29' : '#f8a83d','background': item.firstSigning != null ? '#e8ffcd' : '#ffedcd'}">
{{item.signingMode}}</p>
<p class="tips_mark2" :style="{'background': item.firstSigning != null ? '#2bc30c' : '#eb1616'}">{{item.signingStatus}}</p>
</div>
<div class="time">
<p>{{item.contractName}}</p>
<p style="color:#eb1616;font-weight: bold;"><span style="font-size: 12px;">¥</span>{{item.contractMoney.toFixed(2)}}</p>
</div>
</div>
</div>
<template #right>
<div class="operation">
<div class="opera_btn" v-if="item.signingMode == '线上' && item.firstIsSign =='否'"
@click="openPopup(item.id)">
<img src="../../assets/images/sunVillage_info/signature_icon_02.png" alt="" width="35">
<p>签名</p>
</div>
<!-- <div class="opera_btn" v-if="item.signingMode == '线下' " @click="openPopupFile(item.attachement)">
<img src="../../assets/images/sunVillage_info/signature_icon_04.png" alt="" width="35">
<p>线下合同</p>
</div> -->
</div>
</template>
</van-swipe-cell>
</van-list>
</div>

<!-- 签字弹出层 -->
<van-popup v-model="show" closeable position="right" :style="{ height: '100%' }">
<van-cell-group style="width: 100%;height:100%;overflow: hidden;padding-top: 10px;padding-bottom: 10px;">
<div class="signature-box" @mousedown="canvasTTdown" @touchstart="canvasTTdown">
<vue-esign
ref="esign"
class="mySign"
:width="500"
:height="height"
:isCrop="signature.isCrop"
:lineWidth="signature.lineWidth"
:lineColor="signature.lineColor"
:bgColor.sync="signature.bgColor"
/>
</div>
<img src="../../assets/images/sunVillage_info/signature_icon_10.png" id="canvasTT"
style="position:absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)" alt="">
<div class="signature-footer">
<van-button @click="handleGenerate" type="info" size="small">保存签字</van-button>
<van-button @click="handleReset" class="clearBtn" type="info" plain size="small">清空画板</van-button>
</div>
</van-cell-group>
</van-popup>

<!-- 附件弹出层 -->
<van-popup v-model="showFile" round closeable position="bottom" :style="{ height: '30%' }">
<van-uploader v-model="fileList" multiple disabled :deletable="false" :show-upload="false"/>
</van-popup>
</div>
</template>

<script>
import { listMultiplelots, multipleLotsFirstSign } from "@/api/sunVillage_info/fixedAssets";
import vueEsign from "vue-esign";
import signatureUploadSignature from "@/views/yinnong/signatureUploadSignature";
import $ from "jquery";

export default {
name: "sunVillageInfoListMultipleLots",
components: {vueEsign, signatureUploadSignature},
data() {
return {
applicationList: [],
loading: false,
finished: false,
show: false,
showFile: false,
fileList: [],
listLength: '0',
queryParams: {
pageNum: 1,
pageSize: 10,
translate_dict: 1,
},
showBtn: true,

signatureImg: '',
//电子签名
signature: {
lineWidth: 6, // 画笔的线条粗细
lineColor: "#000000", // 画笔的颜色
bgColor: "", // 画布的背景颜色
resultImg: "", // 最终画布生成的base64图片
isCrop: false, // 是否裁剪,在画布设定尺寸基础上裁掉四周空白部分
},
signaId: '',
height: null
};
},
created() {
if (this.$route.query.type == 'code') {
this.showBtn = false;
}
this.height = window.screen.height * 1.28 - 20;
},
methods: {
canvasTTdown() {
$('#canvasTT').css('display', 'none');
},
getList() {
listMultiplelots(this.queryParams).then(response => {
this.applicationList = response.rows;

if (this.applicationList.length >= response.total) {
this.finished = true;
return;
} else {
this.loading = false;
this.queryParams.pageNum += 1;
}
});
},
goDetail(id) {
this.$router.push({
path: '/sunVillage_info/list_multipleLots_add',
query: { id: id }
})
},
openPopup(id, url) {
this.show = true;
this.signaId = id;
},
openPopupFile(file) {
this.showFile = true;
if (!file) return;
let fileArray = file.split(',');
fileArray.map(res => {
this.fileList.push({
url: '/api' + res,
isImage: true
})
})
},
signaImgFun(url) {
this.signatureImg = url;
},
// 清空画板
handleReset() {
this.$refs.esign.reset();
$('#canvasTT').css('display', 'block')
},
// 生成签字图
handleGenerate() {
this.$refs.esign
.generate() // 使用生成器调用把签字的图片转换成为base64图片格式
.then((res) => {
this.signature.resultImg = res;
let wj = this.dataURLtoBlob(res);
let param = new FormData() // 创建form对象
param.append('file', wj) // 通过append向form对象添加数据
param.append('date', this.format(new Date(), 'yyyy-MM-dd')) // 通过append向form对象添加数据

multipleLotsFirstSign(param, this.signaId).then(response => {
this.$notify({type: 'success', message: '签字成功'});
this.show = false;
location.reload();
});

})
.catch((err) => {
// 画布没有签字时会执行这里提示一下
this.$toast.fail('请签名后再保存签字');
});
},
dataURLtoBlob(dataurl, filename = 'file') {
let arr = dataurl.split(',')
let mime = arr[0].match(/:(.*?);/)[1]
let suffix = mime.split('/')[1]
let bstr = atob(arr[1])
let n = bstr.length
let u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new File([u8arr], `${filename}.${suffix}`, {
type: mime
})
},
},
}
</script>

<style scoped lang="scss">
.home_wrapper {
background: #e9e9e9;
min-height: 100vh;
width: 100vw;

.header_main {
height: 116px;
background: url('../../assets/images/sunVillage_info/list_head.png') no-repeat;
background-size: 100% 100%;
position: fixed;
top: 0;
left: 0;
width: 100%;
font-size: 36px;
line-height: 116px;
text-align: center;
color: #fff;
position: relative;

.return_btn {
width: 24px;
height: 43.2px;
background: url('../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
background-size: 20px 36px;
position: absolute;
left: 38px;
top: 36px;
}

.add_btn {
width: 56.4px;
height: 40.8px;
background: url('../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat;
background-size: 47px 34px;
position: absolute;
right: 38px;
top: 36px;
}
}

.record_main {
padding: 30px 22px;

.record_det {
height: 38px;
line-height: 38px;
display: flex;
justify-content: space-between;

.year_l {
font-size: 30px;
display: flex;
align-items: center;
color: #858585;

.unit {
padding-left: 5px;
}

.icon {
width: 23px;
height: 12px;
display: block;
background: url('../../assets/images/sunVillage_info/list_icon_1.png') no-repeat;
background-size: 100% 100%;
margin-bottom: 4px;
margin-right: 8px;

&.zk {
transform: rotate(0deg)
}

&.ss {
transform: rotate(180deg)
}

}
}

.total_r {
font-size: 26px;
letter-spacing: 2px;
}
}

.record_list {
display: flex;
flex-flow: wrap;
margin-top: 12PX;

.flex_block {
font-size: 30px;
color: #878787;
padding-right: 30px;

&.current {
color: #4199fe;
font-weight: bold;
}
}
}
}

.list_main {
padding: 0 22px;
margin-top: 15PX;

.item {
border-radius: 30px;
background: #fff;
box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
padding: 25px 32px;
margin-bottom: 20px;

.info {
.title {
display: flex;
font-size: 32px;
align-items: center;
height: 58px;

.icon_box {
width: 34px;
display: block;
height: 30px;
background: url('../../assets/images/sunVillage_info/signature_icon_01.png') no-repeat;
background-size: 100% 100%;
margin-right: 10px;
flex-shrink: 0;
}

.icon_box1 {
width: 34px;
display: block;
height: 30px;
background: url('../../assets/images/sunVillage_info/signature_icon_01g.png') no-repeat;
background-size: 100% 100%;
margin-right: 10px;
flex-shrink: 0;
}

.news_title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
word-break: break-all;
overflow: hidden;
}

.tips_mark {
background: #ffedcd;
border-radius: 8px;
font-size: 24px;
color: #f8a83d;
text-align: center;
line-height: 34px;
flex-shrink: 0;
padding: 0 5Px;
margin-left: auto;
}

.tips_mark2 {
background: #eb1616;
border-radius: 8px;
font-size: 24px;
color: #ffffff;
text-align: center;
line-height: 34px;
flex-shrink: 0;
padding: 0 5Px;
margin-left: 10PX;
}
}

.time {
font-size: 16PX;
color: #333333;
display: flex;
align-items: center;
margin-top: 5PX;
justify-content: space-between;

.icon_time {
width: 25px;
height: 25px;
background: url('../../assets/images/sunVillage_info/list_icon_4.png') no-repeat;
background-size: 100% 100%;
margin-right: 10px;
}
}
}
}

.operation {
display: flex;
align-items: center;
justify-content: right;
text-align: center;
border-radius: 30px;
background: #fff;
box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
height: 100%;
padding: 0 15Px;
margin-left: 10PX;

.opera_btn {
border-radius: 50%;

&.delete {
background: #df0707;
margin-left: 10PX;

.icon {
width: 22PX;
height: 29PX;
background: url('../../assets/images/sunVillage_info/signature_icon_03.png') no-repeat;
background-size: 100% 100%;
display: block;
}
}

&.edit {
background: #79cf13;
margin-left: 10PX;

.icon {
width: 26PX;
height: 25PX;
background: url('../../assets/images/sunVillage_info/signature_icon_02.png') no-repeat;
background-size: 100% 100%;
display: block;
}
}

&.view {
background: #3494ff;
margin-left: 10PX;

.icon {
width: 29PX;
height: 21PX;
background: url('../../assets/images/sunVillage_info/signature_icon_04.png') no-repeat;
background-size: 100% 100%;
display: block;
}
}

&.list {
background: #79cf13;
margin-left: 10PX;

.icon {
width: 29px;
height: 21px;
background: url('../../assets/images/sunVillage_info/list_icon_10.png') no-repeat;
background-size: 100% 100%;
display: block;
}
}
}
}
}

.bottom_tips {
font-size: 24px;
color: #a7a6a6;
text-align: center;
margin-top: 32px;
background: url('../../assets/images/sunVillage_info/list_icon_8.png') center center no-repeat;
background-size: 260px 2px;

.xs {
padding: 0 8px;
background: #e9e9e9;
}
}

.signature-box {
border: 1px dashed #666;
margin: 2px 20px;
height: 100%;
/*canvas{*/
/* height: 100%!important;*/
/*}*/
}

.signature-footer {
transform: rotate(90deg);
width: auto;
position: absolute;
top: 50%;
left: 0PX;

.clearBtn {
margin-left: 15px;
}
}

.esigh-result {
margin: 15px 20px;
// height: 110px;
border: 1px solid #666;
font-size: 0;

.imgs {
width: 100%;
}
}
}
</style>

+ 202
- 0
src/views/sunVillage_info/list_multipleLots_add.vue Переглянути файл

@@ -0,0 +1,202 @@
<template>
<div class="home_wrapper">
<div class="header_main">
标段合同详情
<div class="return_btn" @click="onClickLeft"></div>
</div>
<div class="list_main">
<van-divider>标段合同信息</van-divider>
<van-field v-model="form.contractCode" label="合同编号" placeholder="合同编号" input-align="right" :border="false"/>
<van-field v-model="form.contractName" label="合同名称" placeholder="合同名称" input-align="right" :border="false"/>
<van-field v-model="form.firstParty" label="甲方" placeholder="甲方" input-align="right" :border="false"/>
<van-field v-model="form.contractMoney" label="合同金额(元)" placeholder="合同金额(元)" input-align="right" :border="false"/>
<van-field v-model="form.startTime" label="开始日期" placeholder="开始日期" input-align="right" :border="false"/>
<van-field v-model="form.endTime" label="结束日期" placeholder="结束日期" input-align="right" :border="false"/>
<van-field v-model="form.contractDate" label="登记日期" placeholder="登记日期" input-align="right" :border="false"/>
<van-field v-model="form.contractionStatus" label="合同状态" placeholder="合同状态" input-align="right" :border="false"/>
<van-field v-model="form.signingMode" label="签订方式" placeholder="签订方式" input-align="right" :border="false"/>
<van-field v-model="form.signingStatus" label="签订状态" placeholder="签订状态" input-align="right" :border="false"/>
<van-field v-model="form.contractRemark" label="合同备注" placeholder="合同备注" input-align="right" :border="false"/>

<van-divider>甲方信息</van-divider>
<van-field v-model="form.firstIsSign" label="甲方已签" placeholder="甲方已签" input-align="right" :border="false"/>
<van-field v-model="form.firstPartyAt" label="甲方签字日期" placeholder="甲方签字日期" input-align="right" :border="false"/>
<van-field label="甲方签字" input-align="right" :border="false" />
<img :src="'/api'+form.firstSigning" width="100%" alt="" v-if="form.firstSigning">
<van-field label="村级公章" input-align="right" :border="false" />
<img :src="'/api'+form.firstSeal" width="100%" alt="" v-if="form.firstSeal">

</div>
</div>
</template>

<script>
import {getMultiplelots} from "@/api/sunVillage_info/fixedAssets";
import Cookies from "js-cookie";

export default {
name: "certificateList",
data() {
return {
form: {},
queryParams: {
bookId: '',
deptId: ''
},
};
},
created() {
this.queryParams.bookId = Cookies.get('bookId');
this.queryParams.deptId = Cookies.get('deptId');
this.getDetail();
},
methods: {
getDetail() {
let query = {
translate_dict: 1
};
getMultiplelots(query, this.$route.query.id).then((res) => {
if (res.code === 200) {
this.form = res.data;
}
})
},

},
}
</script>

<style scoped lang="scss">
/deep/ .van-button--primary {
background: url("../../assets/images/sunVillage_info/btn_bg.png") no-repeat;
background-size: 100% 100%;
border: none;
}

.home_wrapper {
background: #e9e9e9;
min-height: 100vh;
width: 100vw;

.header_main {
height: 116px;
background: url('../../assets/images/sunVillage_info/list_head.png') no-repeat;
background-size: 100% 100%;
position: fixed;
top: 0;
left: 0;
width: 100%;
font-size: 36px;
line-height: 116px;
text-align: center;
color: #fff;
position: relative;

.return_btn {
width: 24px;
height: 43.2px;
background: url('../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
background-size: 20px 36px;
position: absolute;
left: 38px;
top: 36px;
}
}

.release_head {
height: 90px;
padding: 0 23px;
display: flex;
align-items: center;
font-size: 26px;
color: #929292;

.people {
flex: 1;
display: flex;
align-items: center;

.icon {
width: 24px;
height: 21px;
background: url('../../assets/images/sunVillage_info/details_icon_1.png') no-repeat;
background-size: 100% 100%;
display: block;
margin-right: 8px;
}
}

.time {
flex: 1;
display: flex;
align-items: center;
justify-content: flex-end;

.icon {
width: 25px;
height: 25px;
background: url('../../assets/images/sunVillage_info/details_icon_2.png') no-repeat;
background-size: 100% 100%;
display: block;
margin-right: 8px;
}
}
}

.release_conetnt {
padding: 0 22px;
font-size: 32px;
color: #252525;
line-height: 44px;

img {
max-width: 100%;
margin-bottom: 16px;
}

p {
margin-bottom: 16px;
}
}

.list_main {
padding: 25px;
background: #ffffff;
width: 94%;
margin: 25px auto 0;
border-radius: 15PX;
box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
}

.titBox {
display: flex;
align-items: center;
}

.tit {
font-size: 36px;
font-weight: bold;
}

/deep/ .van-cell {
padding-left: 0 !important;
padding-right: 0 !important;
padding-bottom: 0 !important;
}

/deep/ .van-field__label {
/*padding-left: 10PX;*/
width: auto;
display: flex;
align-items: center;
}

/deep/ .van-cell--required::before {
left: 85PX;
}

/deep/ .van-field__error-message {
display: none;
}
}
</style>

Завантаження…
Відмінити
Зберегти