<template>
<div class="app-box" id="main-charts">
<el-card class="app-container">
<el-form ref="phoneRef" :model="user" :rules="rules" label-width="150px">
<el-row justify="end">
<el-col :span="12" class="but-style">
<el-button type="primary" v-if="user.authStatus == '0' " @click="submit(0)">暂存</el-button>
<span type="primary" v-if="user.authStatus == '1' ">审核中</span>
<span type="primary" v-if="user.authStatus == '2' ">认证成功</span>
<el-button type="primary" v-if="user.authStatus == '3' || user.authStatus == '0' " @click="submit(1)">提交审核</el-button>
</el-col>
</el-row>
<el-row justify="center">
<el-col :span="12">
<el-form-item label="企业LOGO" prop="companyLogoUr">
<el-upload :disabled="user.authStatus == '2' || user.authStatus == '1' "
class="avatar-uploader logo-img"
:action=action
:show-file-list="false"
:on-success="uploadImgCompanyLogoUr"
>
<el-image v-if="imageUrlCompanyLogoUr" :src="imageUrlCompanyLogoUr" class="avatar logo-img"/>
<el-icon v-else class="avatar-uploader-icon logo-img">
<Plus/>
</el-icon>
</el-upload>
</el-form-item>
</el-col>
</el-row>
<el-row justify="center">
<el-col :span="12">
<el-form-item label="企业名称" prop="companyName">
<el-input :disabled="user.authStatus == '2' || user.authStatus == '1'" v-model="user.companyName" placeholder="请输入企业名称"/>
</el-form-item>
</el-col>
</el-row>
<el-row justify="center">
<el-col :span="12">
<!-- 统一社会信用代码-->
<el-form-item label="统一社会信用代码" prop="companyCode">
<el-input :disabled="user.authStatus == '2' || user.authStatus == '1'" v-model="user.companyCode" placeholder="请输入统一社会信用代码"/>
</el-form-item>
</el-col>
</el-row>
<!-- <el-row justify="center">
<el-col :span="12">
<el-form-item label="应用标识" prop="appFlag" required>
<el-select style="width: 100%" v-model="user.appFlag" placeholder="请选择应用标识" :disabled="user.authStatus == '2' || user.authStatus == '1'">
<el-option v-for="dict in app_flag" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>-->
<el-row justify="center">
<el-col :span="12">
<el-form-item label="法定代表人" prop="legalDeputy">
<el-input :disabled="user.authStatus == '2' || user.authStatus == '1'" v-model="user.legalDeputy" placeholder="请输入法定代表人"/>
</el-form-item>
</el-col>
</el-row>
<el-row justify="center">
<el-col :span="12">
<el-form-item label="营业执照" prop="businessLicenseUrl">
<el-upload :disabled="user.authStatus == '2' || user.authStatus == '1'"
class="avatar-uploader"
:action=action
:show-file-list="false"
:on-success="uploadImg">
<el-image v-if="imageUrl" :src="imageUrl" class="avatar business-license"/>
<el-icon v-else class="avatar-uploader-icon business-license">
<Plus/>
</el-icon>
</el-upload>
</el-form-item>
</el-col>
</el-row>
<el-row justify="center">
<el-col :span="12">
<el-form-item label="认证提示" prop="authHandleMsg">
<el-input v-model="user.authHandleMsg" disabled/>
</el-form-item>
</el-col>
</el-row>
<el-row justify="center" v-if="user.authStatus == '2'">
<el-col :span="12">
<el-form-item label="认证授权函" prop="legalDeputy">
<el-button class="info" @click="exportPDF">下载认证授权函</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-card>
</div>
</template>
<script lang="ts" setup name="Profile">
import {addOrEditEnterprise, getEnterpriseInfo} from "@/api/system/enterprise";
import {getToken} from "@/utils/auth";
// 限制图片大小
import {Plus} from '@element-plus/icons-vue'
import {ref} from "vue";
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
// 图片上传的地址
const action = import.meta.env.VITE_APP_BASE_API + "/business/file/upload";
const imageUrl = ref('');
const imageUrlCompanyLogoUr = ref('');
const fielId = ref('');
const {proxy} = getCurrentInstance();
const { app_flag } = proxy.useDict(
"app_flag"
);
function exportPDF() {
const ele: HTMLElement | null = document.getElementById('main-charts');
html2canvas(ele as HTMLElement, {}).then((canvas) => {
const contentWidth = canvas.width;
const contentHeight = canvas.height;
// 一页pdf显示html页面生成的canvas高度;
const pageHeight = (contentWidth / 592.28) * 841.89;
// 未生成pdf的html页面高度
let leftHeight = contentHeight;
// 页面偏移
let position = 0;
// a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
const imgWidth = 595.28;
const imgHeight = (595.28 / contentWidth) * contentHeight;
const ctx: any = canvas.getContext('2d');
// 添加水印
/*ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.rotate((25 * Math.PI) / 180);
ctx.font = '20px Microsoft Yahei';
ctx.fillStyle = 'rgba(184, 184, 184, 0.8)';
for (let i = contentWidth * -1; i < contentWidth; i += 240) {
for (let j = contentHeight * -1; j < contentHeight; j += 100) {
// 填充文字,x 间距, y 间距
ctx.fillText('水印名', i, j);
}
}*/
const pageData = canvas.toDataURL('image/jpeg', 1.0);
const pdf = new jsPDF('', 'pt', 'a4');
if (leftHeight < pageHeight) {
// 在pdf.addImage(pageData, 'JPEG', 左,上,宽度,高度)设置在pdf中显示;
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(`认证授权函.pdf`);
});
}
const user = reactive({
businessLicenseUrl: undefined,
legalDeputy: undefined,
companyCode: undefined,
companyName: undefined,
companyLogoUr: undefined,
authHandleMsg: undefined,
authStatus: undefined, // 认证状态
appFlag: undefined,
});
// 获取企业信息
function getEnterprise() {
getEnterpriseInfo().then(response => {
user.businessLicenseUrl = response.data.businessLicenseUrl;
user.legalDeputy = response.data.legalDeputy;
user.authHandleMsg = response.data.authHandleMsg;
user.companyCode = response.data.companyCode;
user.appFlag = response.data.appFlag;
user.companyName = response.data.companyName;
user.companyLogoUr = response.data.companyLogoUr;
user.authStatus = response.data.authStatus;
imageUrl.value = downloadFile(response.data.businessLicenseUrl); // 进入页面回显 图片
imageUrlCompanyLogoUr.value = downloadFile(response.data.companyLogoUr); // 进入页面回显 图片
});
};
getEnterprise();
// 营业执照 上传返回id
function uploadImg(e) {
fielId.value = e.data.id;
user.businessLicenseUrl = e.data.id;
imageUrl.value = downloadFile(e.data.id); // 上传后展示图片
}
// 企业 logo 上传返回id
function uploadImgCompanyLogoUr(e) {
fielId.value = e.data.id;
user.companyLogoUr = e.data.id;
imageUrlCompanyLogoUr.value = downloadFile(e.data.id); // 上传后展示图片
}
// 图片下载预览
function downloadFile(fielId = "") {
if (fielId) {
return import.meta.env.VITE_APP_BASE_API + "/business/file/downloadFile/" + fielId + "?firmToken=" + getToken();
}
return "";
}
const state = reactive({
user: {},
roleGroup: {},
postGroup: {}
});
const rules = ref({
businessLicenseUrl: [{required: true, message: "营业执照不能为空", trigger: "blur"}],
legalDeputy: [{required: true, message: "法定代表人不能为空", trigger: "blur"}],
companyCode: [{required: true, message: "统一社会信用代码不能为空", trigger: "blur"}],
appFlag: [{required: true, message: "应用标识不能为空", trigger: "blur"}],
companyName: [{required: true, message: "企业名称不能为空", trigger: "blur"}],
companyLogoUr: [{required: true, message: "企业LOGO不能为空", trigger: "blur"}],
});
function submit(type) {
// 若没添加就新增,已经添加就修改
proxy.$refs.phoneRef.validate(valid => {
if (valid) {
let parm = {
businessLicenseUrl: user.businessLicenseUrl,
companyCode: user.companyCode,
appFlag: user.appFlag,
companyName: user.companyName,
companyLogoUr: user.companyLogoUr,
legalDeputy: user.legalDeputy,
authHandleMsg: user.authHandleMsg,
authStatus: type,
};
addOrEditEnterprise(parm).then(response => {
proxy.$modal.msgSuccess("修改成功");
getEnterprise();
});
}
});
};
</script>
<style scoped>
.app-box {
width: 100%;
padding: 20px;
margin-top: 20px;
display: flex;
justify-content: center;
}
.app-container {
width: 50%;
height: 85vh;
}
.information-img img {
width: 3rem;
height: 3rem;
}
.logo-img {
width: 170px;
height: 170px;
border-radius: 50%;
}
.business-license {
width: 170px;
height: 170px;
}
.but-style {
text-align: right;
margin-bottom: 30px;
}
.el-form-item {
display: flex;
justify-content: center;
align-items: center;
}
.avatar-uploader-icon{
border: 1px solid rgba(3, 3, 3, 0.07);
}
</style>
vue 前端下载pdf
最新推荐文章于 2024-07-17 04:09:20 发布