698 lines
25 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div class="addContent">
<div class="detail_content" ref="pdf">
<div class="left_content">
<el-form ref="form" :model="form" label-width="120px" label-position="left" class="form">
<el-row>
<el-col :span="12" style="height: 50px">
申报类别{{ info.type == 0 ? '/' : info.type == 1 ? '试点区域' : info.type == 2 ? '龙头型' : info.type == 3 ? '创新型' : '' }}
</el-col>
<el-col :span="12" style="height: 50px">
责任单位{{ info.responsibilityUnit == 0 ? '经发委' : info.responsibilityUnit == 1 ? '规建委' : info.responsibilityUnit == 2 ? '行审局' : info.responsibilityUnit == 3 ? '市监局' : '' }}
</el-col>
<el-col :span="12" style="height: 50px">
申报时间
</el-col>
</el-row>
<el-descriptions class="margin-top" title="【申报企业信息】" :column="3" :size="size" border :label-style="LS">
<el-descriptions-item>
<template slot="label">
申报企业名称
</template>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
统一社会信用代码
</template>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
联络人
</template>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
联络电话
</template>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
企业地址
</template>
</el-descriptions-item>
</el-descriptions>
<!-- 项目落户奖补模版 -->
<div class="table-content" v-if="templateId == 1">
<el-descriptions class="margin-top" title="【项目投资计划】" :column="3" :size="size" border :label-style="LS">
<el-descriptions-item>
<template slot="label">
项目名称
</template>
</el-descriptions-item>
<el-descriptions-item >
<template slot="label">
申报单位成立时间
</template>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
截止目前员工人数
</template>
</el-descriptions-item>
</el-descriptions>
</div>
<!-- 做大做强奖补模版 -->
<div class="table-content" v-if="templateId == 2">
<el-descriptions class="margin-top" title="【项目投资计划】" :column="3" :size="size" border :label-style="LS">
<el-descriptions-item>
<template slot="label">
项目名称
</template>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
申报单位成立时间
</template>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
是否获得园区其他经营奖励
</template>
</el-descriptions-item>
</el-descriptions>
</div>
<!-- 载体建设奖补模版 -->
<div class="table-content" v-if="templateId == 3">
<el-descriptions class="margin-top" title="【项目投资计划】" :column="2" :size="size" border :label-style="LS">
<el-descriptions-item>
<template slot="label">
项目名称
</template>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
文体企业数量占比
</template>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
文体企业营收占比
</template>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
文体企业从业人员占比
</template>
</el-descriptions-item>
</el-descriptions>
</div>
<!-- 平台建设模版 -->
<div class="table-content" v-if="templateId == 4">
<el-descriptions class="margin-top" title="【项目投资计划】" :column="2" :size="size" border :label-style="LS">
<el-descriptions-item>
<template slot="label">
项目名称
</template>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
平台(项目)名称
</template>
</el-descriptions-item>
</el-descriptions>
</div>
<!-- 品牌打造奖补模版 -->
<div class="table-content" v-if="templateId == 5">
<el-descriptions class="margin-top" title="【项目投资计划】" :column="3" :size="size" border :label-style="LS">
<el-descriptions-item>
<template slot="label">
项目名称
</template>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
所获荣誉/所举办活动
</template>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
所获等级
</template>
</el-descriptions-item>
</el-descriptions>
</div>
<!-- 场景开放模版 -->
<div class="table-content" v-if="templateId == 6">
<el-descriptions class="margin-top" title="【项目投资计划】" :column="2" :size="size" border :label-style="LS">
<el-descriptions-item>
<template slot="label">
项目名称
</template>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
所属类型
</template>
</el-descriptions-item>
</el-descriptions>
</div>
<!-- 5G+工业互联网奖补模版 -->
<div class="table-content" v-if="templateId == 8">
<el-descriptions class="margin-top" title="【项目投资计划】" :column="2" :size="size" border :label-style="LS">
<el-descriptions-item>
<template slot="label">
项目名称
</template>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
荣誉名称
</template>
</el-descriptions-item>
</el-descriptions>
</div>
<!-- 信用管理奖补模版 -->
<!-- 制造服务业有效投入奖补模版 -->
<!-- 物流发展奖补模版 -->
<div class="table-content" v-if="(templateId == 7) || (templateId == 9) || (templateId == 10)">
<el-descriptions class="margin-top" title="【项目投资计划】" :column="2" :size="size" border :label-style="LS">
<el-descriptions-item>
<template slot="label">
项目名称
</template>
</el-descriptions-item>
</el-descriptions>
</div>
<!-- 两业融合奖补模版 -->
<div class="table-content" v-if="templateId == 11">
<el-descriptions class="margin-top" title="【项目投资计划】" :column="2" :size="size" border :label-style="LS">
<el-descriptions-item>
<template slot="label">
项目名称
</template>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
申报类型
</template>
</el-descriptions-item>
</el-descriptions>
</div>
<!-- 上传文件列表 -->
<div class="table-content last_upload">
<p>【上传材料】</p>
<div>
<div class="upload_col" v-if="(templateId == 2 )|| (templateId == 4 ) || (templateId == 5 ) || (templateId == 6 ) || (templateId == 8 ) ">
<!-- 平台建设模版 -->
<div v-if="templateId == 2" class="upload_title">企业近3年发展情况及未来发展计划</div>
<div v-if="templateId == 4" class="upload_title">合作协议</div>
<div v-if="(templateId == 5) || (templateId == 6) || (templateId == 8) " class="upload_title">证明材料</div>
<!-- 平台建设奖补模版 -->
<div v-if="templateId == 4" class="form_item">如不宜公开则上传封面及盖章页</div>
<!-- 品牌打造奖补模版 -->
<div v-if="templateId == 5" class="form_item">上级发文、新闻报道、现场照片、发票</div>
<!-- 场景开放模版 -->
<div v-if="templateId == 6" class="form_item">公示、发文证明、专家评分表</div>
</div>
<!-- 项目落户奖补模版 -->
<div v-if="templateId == 1 " class="upload_col">
<div class="upload_title">招商协议</div>
<div class="form_item">如不宜公开则上传封面及盖章页</div>
</div>
<div v-if="templateId == 1 " class="upload_col">
<div class="upload_title">验资报告</div>
</div>
<div v-if="templateId == 1 " class="upload_col">
<div class="upload_title">营业执照</div>
</div>
<div v-if="templateId == 1 " class="upload_col">
<div class="upload_title">其他证明材料</div>
</div>
<!-- 载体建设奖补模版 -->
<div v-if="templateId == 3 " class="upload_col">
<div class="upload_title">相关佐证材料</div>
</div>
<div v-if="templateId == 3 " class="upload_col">
<div class="upload_title">项目工商登记许可</div>
</div>
<div v-if="templateId == 3 " class="upload_col">
<div class="upload_title">消防验收报告</div>
</div>
<!-- 信用管理奖补模版 -->
<div v-if="templateId == 7 " class="upload_col">
<div class="upload_title">项目方案</div>
<div class="form_item">包括项目基本情况、项目投资情况以及实施进展、项目目标及取得的主要成效</div>
</div>
<div v-if="templateId == 7 " class="upload_col">
<div class="upload_title">资金使用说明</div>
<div class="form_item">项目未完成的需提供,内容主要包括项目计划投资额,投资明细,目前已完成投资情况和后续投入计划等</div>
</div>
<div v-if="templateId == 7 " class="upload_col">
<div class="upload_title">项目专项审计报告</div>
<div class="form_item">项目已完成的需提供</div>
</div>
<!-- 制造服务业有效投入奖补模版 -->
<div v-if="templateId == 9 " class="upload_col">
<div class="upload_title">企业投资项目备案通知书或核准批复文件</div>
</div>
<div v-if="templateId == 9 " class="upload_col">
<div class="upload_title">购置设备发票清单及发票扫描件</div>
</div>
<div v-if="templateId == 9 " class="upload_col">
<div class="upload_title">会计师事务所出具的企业申报项目购置设备情况的专项审计报告</div>
</div>
<div v-if="templateId == 9 " class="upload_col">
<div class="upload_title">会计师事务所出具的企业财务报表审计报告</div>
</div>
<!-- 物流发展奖补模版 -->
<div v-if="templateId == 10 " class="upload_col">
<div class="upload_title">荣誉证明文件</div>
</div>
<div v-if="templateId == 10 " class="upload_col">
<div class="upload_title">平台名称</div>
</div>
<div v-if="templateId == 10 " class="upload_col">
<div class="upload_title">企业投资项目备案通知书或核准批复文件</div>
</div>
<div v-if="templateId == 10 " class="upload_col">
<div class="upload_title">会计师事务所出具的企业财务报表审计报告</div>
</div>
<!-- 物流发展奖补模版 -->
<div v-if="templateId == 11 " class="upload_col">
<div class="upload_title">证明文件</div>
</div>
<div v-if="templateId == 11 " class="upload_col">
<div class="upload_title">营业执照</div>
</div>
<div v-if="templateId == 11 " class="upload_col">
<div class="upload_title">完税证明</div>
</div>
<div v-if="templateId == 11 " class="upload_col">
<div class="upload_title">审计报告</div>
</div>
<div v-if="templateId == 11 " class="upload_col">
<div class="upload_title">股权架构图</div>
</div>
<div v-if="templateId == 11 " class="upload_col">
<div class="upload_title">项目申报报告</div>
<div class="form_item">含企业基本情况和项目基本情况</div>
</div>
<div v-if="templateId == 11 " class="upload_col">
<div class="upload_title">独立核算相关证明</div>
</div>
<div v-if="templateId == 11 " class="upload_col">
<div class="upload_title">验资报告</div>
</div>
<div v-if="templateId == 11 " class="upload_col">
<div class="upload_title">其他证明材料</div>
</div>
</div>
</div>
<!-- <div class="operate_btn">
<el-button @click="goBack">返回</el-button>
<el-button @click="print" class="btn">导出模版详情</el-button>
</div> -->
</el-form>
</div>
<div class="right_content">
<div class="left_title">
<el-steps :active="active" finish-status="process" align-center>
<el-step title="初审中"></el-step>
<el-step title="复审中"></el-step>
<!-- <el-step title="专家评审中"></el-step>
<el-step title="市级评定中"></el-step> -->
<el-step title="上级评定中"></el-step>
<el-step title="评定通过"></el-step>
</el-steps>
</div>
<div class="left_main">
<el-tabs type="border-card">
<el-tab-pane label="审批流程">
<div class="empty">
<div class="top">
同步获取表单流程
</div>
<div class="bottom">
暂无审批流程
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
</div>
<div class="operate_btn">
<el-button @click="goBack">返回</el-button>
<el-button @click="print" class="btn" type="primary"></el-button>
</div>
</div>
</template>
<script>
import html2canvas from 'html2canvas';
import JsPDF from 'jspdf';
import { getInfo } from "@/api/onlineDeclartion/declarationManagement"
export default {
name: "declareAddContent",
data() {
return {
size: '',
form: {},
active: 4,
templateId: null,
templateName: null,
templateRecordId: null,
LS: {
'width': '135px',
'work-break': 'break-all'
},
info:{},
};
},
async mounted(){
let { templateId, pageType} = this.$route.query;
this.templateId = templateId
console.log('this.templateId: ', this.templateId);
getInfo(this.templateId).then(res=>{
console.log(res);
this.info = res.data
})
switch (this.templateId){
case 1:
this.templateName = '项目落户奖补模版'
break;
case 2:
this.templateName = '做大做强奖补模版'
break;
case 3:
this.templateName = '载体建设奖补模版'
break;
case 4:
this.templateName = '平台建设模版'
break;
case 5:
this.templateName = '品牌打造奖补模版'
break;
case 6:
this.templateName = '场景开放模版'
break;
case 7:
this.templateName = '信用管理奖补模版'
break;
case 8:
this.templateName = '5G+工业互联网奖补模版'
break;
case 9:
this.templateName = '制造服务业有效投入奖补模版'
break;
case 10:
this.templateName = '物流发展奖补模版'
break;
case 11:
this.templateName = '两业融合奖补模版'
break;
}
},
methods: {
goBack() {
this.$router.go(-1)
},
printOutpdf() {
let shareContent = document.body,
width = shareContent.clientWidth, //宽度
height = shareContent.clientHeight, //高度
canvas = document.createElement("canvas"),
scale = 2; //定义任意放大倍数 支持小数
canvas.width = width * scale; //定义canvas 宽度 * 缩放
canvas.height = height * scale; //定义canvas高度 *缩放
canvas.style.width = shareContent.clientWidth * scale + "px";
canvas.style.height = shareContent.clientHeight * scale + "px";
canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
let opts = {
scale: scale, // 添加的scale 参数
canvas: canvas, //自定义 canvas
logging: false, //日志开关便于查看html2canvas的内部执行流程
width: width, //dom 原始宽度
height: height,
useCORS: true, // 【重要】开启跨域配置
};
let name = ''
switch (this.templateId){
case '1':
name = '项目落户奖补模版'
break;
case '2':
name = '做大做强奖补模版'
break;
case '3':
name = '载体建设奖补模版'
break;
case '4':
name = '平台建设模版'
break;
case '5':
name = '品牌打造奖补模版'
break;
case '6':
name = '场景开放模版'
break;
case '7':
name = '信用管理奖补模版'
break;
case '8':
name = '5G+工业互联网奖补模版'
break;
case '9':
name = '制造服务业有效投入奖补模版'
break;
case '10':
name = '物流发展奖补模版'
break;
case '11':
name = '两业融合奖补模版'
break;
}
//开始转换
html2canvas(shareContent).then(canvas => {
var contentWidth = canvas.width;
var contentHeight = canvas.height;
//一页pdf显示html页面生成的canvas高度;
var pageHeight = (contentWidth / 592.28) * 841.89;
//未生成pdf的html页面高度
var leftHeight = contentHeight;
//页面偏移
var position = 0;
//a4纸的尺寸[595.28,841.89]html页面生成的canvas在pdf中图片的宽高
var imgWidth = 595.28;
var imgHeight = (592.28 / contentWidth) * contentHeight;
var pageData = canvas.toDataURL("image/jpeg", 1.0);
var PDF = new JsPDF("", "pt", "a4");
if (leftHeight < pageHeight) {
PDF.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
} else {
while (leftHeight > 0) {
PDF.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
leftHeight -= pageHeight;
position -= 841.89;
if (leftHeight > 0) {
PDF.addPage();
}
}
}
PDF.save(name + ".pdf"); // 这里是导出的文件名
});
},
print() {
let name = this.templateName
console.log('this.templateName: ', this.templateName);
console.log('name: ', name);
html2canvas(this.$refs.pdf).then(function(canvas) {
let contentWidth = canvas.width;
let contentHeight = canvas.height;
//a4纸的尺寸[595.28,841.89]html页面生成的canvas在pdf中图片的宽高
let imgWidth = 595.28;
let imgHeight = 595.28/contentWidth * contentHeight;
// 第一个参数: l横向 p纵向
// 第二个参数:测量单位("pt""mm", "cm", "m", "in" or "px"
let pdf = new JsPDF("p", "pt");
pdf.addImage(
canvas.toDataURL("image/jpeg", 1.0),
"JPEG",
0,
0,
imgWidth,
imgHeight
);
pdf.save(name + ".pdf");
})
}
},
}
</script>
<style lang="scss" scoped>
ul, li {
list-style: none; /* 清除列表项前的标记 */
margin: 0; /* 清除上下外边距 */
padding: 0; /* 清除左右内边距 */
}
.upload_ul {
display: flex;
flex-wrap: wrap;
align-content: space-between;
.upload_li {
// width: 45%;
display: flex;
// justify-content: space-between;
align-items: center;
padding: 0 5px;
color: inherit;
border: 1px solid #e4e7ed;
border-radius: 2px;
margin: 10px 20px 10px 0;
.li_img {
width: 25px;
height: 30px;
margin-right: 10px;
padding: 2px;
}
.icon_name {
text-overflow: ellipsis;
overflow: hidden;
word-wrap: break-word;
white-space: nowrap;
}
}
}
.upload_col {
border-bottom: 1px solid #ebeef5;
position: relative;
padding: 25px;
.upload_title {
height: 62px;
}
.form_item {
width: 300px;
color: red;
font-size: 12px;
line-height: 24px;
}
}
</style>
<style lang="scss" scoped>
.addContent {
height: 100% ;
// height: calc(100vh - 100px);
// padding: 10px 10px 0 10px;
background-color: #f6f7f9;
.detail_content {
display: flex;
justify-content: space-between;
height: calc(100% - 40px);
// height: calc(100vh - 200px);
.left_content {
height: 100%;
// height: calc(100vh - 160px);
box-sizing: border-box;
width: 69.5%;
overflow: auto;
background-color: #fff;
padding: 20px;
}
.right_content {
height: 100%;
width: 30%;
background-color: #fff;
.left_main {
height: 600px;
background-color: #fff;
.empty {
.top {
font-size: 12px;
color: #737373;
}
.bottom {
text-align: center;
color: #737373;
}
}
}
}
}
.operate_btn {
text-align: center;
// background-color: #fff;
padding-top: 10px;
}
.form {
height: calc(100% - 150px);
background-color: #fff;
padding: 15px;
.table-content {
margin-top: 10px;
}
.last_upload {
margin-bottom: 30px;
}
}
.left_title {
height: 77px;
padding-top: 20px;
background-color: #fff;
margin-bottom: 4px;
}
}
::v-deep .el-step__title {
font-size: 12px;
color: #192A92;
border-color: none;
}
::v-deep .el-step__head.is-process {
color: #192A92;
}
::v-deep .el-step__line {
background-color: #192A92;
}
::v-deep .el-step__icon {
border: 2px solid #ffff;
box-shadow: 0 0 10px #ccc;
}
::v-deep .el-form-item {
margin-bottom: 0;
}
.el-tabs--border-card {
border: none;
box-shadow: none;
-webkit-box-shadow: none;
height: 100%;
}
// .btn {
// background-color: #f1d78c;
// border: none;
// color: #000;
// }
/* 悬浮 */
// ::v-deep .el-button:hover {
// /* background: linear-gradient(#0165eb, #018ff2, #00b7f9) !important; */
// background: linear-gradient(100deg, #f1d78c, #f1c19d) !important;
// font-weight: bold;
// color: #606266;
// }
/*按钮点击*/
// ::v-deep .el-button:focus {
// background: linear-gradient(100deg, #f1d78c, #f1c19d) !important;
// /* background: linear-gradient(#0165eb, #018ff2, #00b7f9) !important; */
// font-weight: bold;
// color: #606266;
// }
// ::v-deep .el-button--default {
// background: linear-gradient(100deg, #f1d78c, #f1c19d) !important;
// }
</style>