KindergartenUI/src/views/system/kindergartenCheckReport/index.vue
2023-07-20 16:25:45 +08:00

687 lines
22 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="app-container">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="90px"
>
<el-form-item label="所属幼儿园" prop="categoryName">
<el-button
@click="kindergartenshow = true"
v-if="kindergartenName == '请选择幼儿园'"
style="
width: 230px;
text-align: left;
height: 32px;
color: #c0c4cc;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
"
>{{ kindergartenName }}</el-button>
<el-button
@click="kindergartenshow = true"
style="width: 230px; text-align: left; height: 32px"
v-else
>{{ kindergartenName }}</el-button>
</el-form-item>
<el-form-item label="所属批次" prop="categoryName">
<el-button
@click="batchCodeshowclick"
style="width: 230px; text-align: left; height: 32px; color: #c0c4cc"
v-if="batchName == '请选择批次'"
>{{ batchName }}</el-button>
<el-button
@click="batchCodeshowclick"
style="width: 230px; text-align: left; height: 32px"
v-else
>{{ batchName }}</el-button>
</el-form-item>
<el-form-item label="报告名称" prop="reportName">
<el-input
v-model="queryParams.reportName"
placeholder="请输入报告名称"
style="width: 230px"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="报告编号" prop="reportCode">
<el-input
v-model="queryParams.reportCode"
placeholder="请输入报告编号"
clearable
style="width: 230px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="审核状态" prop="checkStatus">
<el-select v-model="queryParams.checkStatus" placeholder="请选择审核状态" style="width: 230px">
<el-option
v-for="item in checkStatuslist"
:key="item.value"
:label="item.name"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-table v-loading="loading" :data="kindergartenCheckReportList">
<el-table-column label="幼儿园名称" align="center" prop="kindergartenName" />
<el-table-column label="批次名称" align="center" prop="batchName" />
<el-table-column label="报告名称" align="center" prop="reportName" />
<el-table-column label="报告编号" align="center" prop="reportCode" />
<el-table-column label="审核人" align="center" prop="checkUserName" />
<el-table-column label="审核状态" align="center" prop="checkStatus">
<template slot-scope="scope">
{{ scope.row.checkStatus == 0 ? "未审核" : "" }}
{{ scope.row.checkStatus == 1 ? "已审核" : "" }}
</template>
</el-table-column>
<el-table-column label="审核时间" align="center" prop="checkTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.checkTime, "{y}-{m}-{d}") }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-search"
v-hasPermi="['system:kindergartenCheckReport:preview']"
@click="lookhand(scope.row)"
>预览</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['system:kindergartenCheckReport:edit']"
>审核</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-download"
v-show="scope.row.checkStatus == 1"
@click="handleExport(scope.row)"
v-hasPermi="['system:kindergartenCheckReport:download']"
>下载</el-button>
<el-button
disabled
size="mini"
type="text"
icon="el-icon-download"
v-show="scope.row.checkStatus == 0"
@click="handleExport(scope.row)"
v-hasPermi="['system:kindergartenCheckReport:download']"
>下载</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="info"
/>
<!-- 修改幼儿园检测报告对话框 -->
<el-dialog :title="title" :visible.sync="open" width="1350px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="审核状态" prop="checkStatus">
<el-radio-group v-model="form.checkStatus">
<el-radio :label="0">未审核</el-radio>
<el-radio :label="1">已审核</el-radio>
</el-radio-group>
</el-form-item>
<div style="height: 550px; overflow: auto">
<kindergartenEcharts v-if="open" :itemlists="itemlist" class="personal"></kindergartenEcharts>
</div>
<!-- <el-form-item label="幼儿园名称" prop="kindergartenName">
<el-input v-model="form.kindergartenName" />
</el-form-item>
<el-form-item label="批次名称" prop="batchCode">
<el-input v-model="form.batchCode" />
</el-form-item>
<el-form-item label="报告编号" prop="reportCode">
<el-input v-model="form.reportCode" placeholder="请输入报告编号" />
</el-form-item>
<el-form-item label="报告名称" prop="reportName">
<el-input v-model="form.reportName" placeholder="请输入报告名称" />
</el-form-item>-->
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<el-dialog :visible.sync="openiframe" width="1350px" append-to-body>
<div style="height: 680px; overflow: auto">
<kindergartenEcharts :itemlists="itemlist" class="personal" v-if="openiframe"></kindergartenEcharts>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="openiframe = false">关闭</el-button>
</div>
</el-dialog>
<!-- //批次 -->
<el-dialog
width="700px"
title="选择批次"
:visible.sync="batchCodeshow"
append-to-body
style="margin-top: 20px"
:before-close="batchCodecancel"
>
<el-form
:model="testqueryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="90px"
>
<el-form-item label="批次编号" prop="batchCode">
<el-input v-model="testqueryParams.batchCode" placeholder="请输入批次编号" clearable />
</el-form-item>
<el-form-item label="批次名称" prop="batchCode">
<el-input v-model="testqueryParams.batchName" placeholder="请输入批次名称" clearable />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="testScore">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="testresetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-table
:data="testScorelist"
align="center"
style="margin-top: 0px"
@cell-dblclick="batchCodeclick"
>
<el-table-column label="请选择" width="200" align="center">
<template slot-scope="scope">
<el-button
type="primary"
style="width: 20px; height: 20px"
v-if="batchCode == scope.row.batchCode"
circle
@click="batchCodeclick(scope.row)"
></el-button>
<el-button
v-else
style="width: 15px; height: 15px"
circle
@click="batchCodeclick(scope.row)"
></el-button>
</template>
</el-table-column>
<el-table-column property="batchCode" label="批次编号" width="230" align="center" />
<el-table-column property="batchName" label="批次名称" width="230" align="center" />
</el-table>
<pagination
v-show="total4 > 0"
:total="total4"
:page.sync="testqueryParams.pageNum"
:limit.sync="testqueryParams.pageSize"
@pagination="testScore"
/>
</el-dialog>
<!-- //幼儿园 -->
<el-dialog
width="850px"
title="选择所属幼儿园"
:visible.sync="kindergartenshow"
append-to-body
:before-close="kindergartencancel"
>
<el-form ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="110px">
<el-form-item label="幼儿园名称" prop="kindergartenName">
<el-input
style="width: 200px"
v-model="kqueryParams.kindergartenName"
placeholder="请输入幼儿园名称"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="kinhandleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="kinresetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-table :data="kindergartenList" @cell-dblclick="kindergartenNameclick">
<el-table-column label="请选择" width="70" align="center">
<template slot-scope="scope">
<el-button
type="primary"
style="width: 15px; height: 15px"
circle
@click="kindergartenNameclick(scope.row)"
v-if="kindergartenId == scope.row.id"
></el-button>
<el-button
v-else
style="width: 15px; height: 15px"
circle
@click="kindergartenNameclick(scope.row)"
></el-button>
</template>
</el-table-column>
<el-table-column property="kindergartenName" label="幼儿园名字" width="150" align="center"></el-table-column>
<el-table-column property="kindergartenAddress" label="幼儿园地址" width="150" align="center"></el-table-column>
<el-table-column label="幼儿园所在组织" align="center" prop="organizeName" width="150"></el-table-column>
<el-table-column property="contacts" label="联系人" width="150" align="center"></el-table-column>
<el-table-column property="phone" label="联系电话" width="150" align="center"></el-table-column>
</el-table>
<pagination
v-show="total1 > 0"
:total="total1"
:page.sync="kqueryParams.pageNum"
:limit.sync="kqueryParams.pageSize"
@pagination="getList"
/>
</el-dialog>
</div>
</template>
<script>
import {
listKindergartenCheckReport,
uploadKindergartenCheckReport
} from "@/api/system/kindergartenCheckReport";
import kindergarten from "../../assembly/kindergarten.vue";
import { listKindergartenInfo } from "@/api/system/kindergartenInfo";
import { testScoreBatch } from "@/api/system/quality";
import kindergartenEcharts from "../kindergartenEcharts/index.vue";
import html2canvas from "html2canvas";
import JsPDF from "jspdf";
export default {
components: { kindergarten, kindergartenEcharts },
name: "KindergartenCheckReport",
data() {
return {
//itemlist
itemlist: {
kindergartenId: "",
batchCode: "",
number: 1
},
checkStatuslist: [
{
value: 0,
name: "未审核"
},
{
value: 1,
name: "已审核"
}
],
total1: 0,
total4: 0,
//遮罩层
kindergartenshow: false,
batchCodeshow: false,
// 显示搜索条件
showSearch: true,
//幼儿园查询参数
kqueryParams: {
pageNum: 1,
pageSize: 10,
organizeId: null,
kindergartenName: null,
kindergartenAddress: null,
kindergartenType: null,
phone: null,
contacts: null
},
//幼儿园list
kindergartenList: [],
//幼儿园名字
kindergartenName: "请选择幼儿园",
//幼儿园ID
kindergartenId: "",
//批次名称
batchCode: "",
batchName: "请选择批次",
//批次list
testScorelist: [],
//批次编号
testqueryParams: {
pageNum: 1,
pageSize: 10
},
// 遮罩层
loading: true,
openiframe: false,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 幼儿园检测报告表格数据
kindergartenCheckReportList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
kindergartenId: null,
batchCode: null,
reportCode: null,
reportName: null,
physicalSynthAnalysis: null,
downloadAddress: null,
motionLibraryId: null,
checkUserId: null,
checkTime: null,
checkStatus: null
},
// 表单参数
form: {},
// 表单校验
rules: {},
pdfurl: null
};
},
created() {
this.getList();
this.info();
},
methods: {
/** 查询幼儿园检测报告列表 */
info() {
this.loading = true;
listKindergartenCheckReport(this.queryParams).then(response => {
this.kindergartenCheckReportList = response.rows;
this.total = response.total;
this.loading = false;
});
},
getList() {
//获取幼儿园list
listKindergartenInfo(this.kqueryParams).then(response => {
this.kindergartenList = response.rows;
this.total1 = response.total;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
kindergartenId: null,
batchCode: null,
reportCode: null,
reportName: null,
physicalSynthAnalysis: null,
downloadAddress: null,
motionLibraryId: null,
checkUserId: null,
checkTime: null,
checkStatus: 0,
delFlag: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.$delete(this.queryParams, "kindergartenName");
this.queryParams.pageNum = 1;
this.info();
},
/** 重置按钮操作 */
resetQuery() {
this.queryParams = {
pageNum: 1,
pageSize: 10,
kindergartenId: null,
kindergartenName: null,
batchCode: null,
reportCode: null,
reportName: null,
physicalSynthAnalysis: null,
downloadAddress: null,
motionLibraryId: null,
checkUserId: null,
checkTime: null,
checkStatus: null
};
this.kindergartenName = "请选择幼儿园";
this.kindergartenId = "";
//批次名称
this.batchCode = "";
this.batchName = "请选择批次";
this.resetForm("queryForm");
this.handleQuery();
},
/** 审核按钮操作 */
handleUpdate(item) {
this.itemlist.kindergartenId = item.kindergartenId;
this.itemlist.batchCode = item.batchCode;
this.itemlist.number++;
this.loading = true;
setTimeout(() => {
this.form = JSON.parse(JSON.stringify(item));
if (this.form.checkStatus == "" || !this.form.checkStatus) {
this.form.checkStatus = 0;
}
this.title = "修改幼儿园检测报告审批状态";
this.open = true;
this.loading = false;
}, 300);
},
/** 提交按钮 */
submitForm() {
//转pdf
this.open = false;
let shareContent = document.querySelector(".personal"), //需要截图的包裹的原生的DOM 对象
width = shareContent.clientWidth * 1.1, //获取dom 宽度
height = shareContent.clientHeight * 1.1, //获取dom 高度
canvas = document.createElement("canvas"), //创建一个canvas节点
scale = 1.1; //定义任意放大倍数 支持小数
// width = 2000;
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.style.backgroundColor = "#ffffff";
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 // 【重要】开启跨域配置
};
html2canvas(shareContent, opts).then(() => {
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("体质检测报告.pdf"); // 这里是导出的文件名
var basepdf = PDF.output("datauristring"); // 转base64
// basepdf = basepdf.split("filename=generated.pdf;");
// base64 转 二进制流(blob)
let blob = this.dataURLtoBlob(basepdf);
let formData = new FormData();
formData.append("kindergartenFile", blob);
formData.append("kindergartenId", this.form.kindergartenId);
formData.append("kindergartenName", this.form.kindergartenName);
formData.append("batchCode", this.form.batchCode);
formData.append("checkStatus", this.form.checkStatus);
uploadKindergartenCheckReport(formData).then(res => {
if (res.code == 200) {
this.$message({
message: "审核完成",
type: "success"
});
this.info();
}
});
});
},
//预览
lookhand(item) {
this.itemlist.kindergartenId = item.kindergartenId;
this.itemlist.batchCode = item.batchCode;
this.itemlist.number++;
this.loading = true;
setTimeout(() => {
this.openiframe = true;
this.loading = false;
}, 300);
},
/** 导出按钮操作 */
handleExport(row) {
if (row.checkStatus == 0) {
this.$message.error("未审核,不可下载");
} else if (row.checkStatus == 1) {
this.download(
`/system/kindergartenCheckReport/download?id=${row.id}`,
{},
row.reportName
);
}
},
//幼儿园左侧点击
kindergartenNameclick(row) {
this.kindergartenName = row.kindergartenName;
this.queryParams.kindergartenId = row.id;
this.queryParams.kindergartenName = row.kindergartenName;
this.kindergartenId = row.id;
this.kindergartenshow = false;
},
//点击批次左边
batchCodeclick(row) {
this.batchCode = row.batchCode;
this.batchName = row.batchName;
this.queryParams.batchCode = row.batchCode;
this.batchCodeshow = false;
},
//点击批次
batchCodeshowclick() {
this.testScore();
this.batchCodeshow = true;
},
//批次
testScore() {
testScoreBatch(this.testqueryParams).then(res => {
this.testScorelist = res.rows;
this.total4 = res.total;
});
},
testresetQuery() {
this.testqueryParams = {
pageNum: 1,
pageSize: 10,
batchCode: "",
batchName: ""
};
this.testScore();
},
//批次关闭
batchCodecancel() {
this.batchCodeshow = false;
this.testresetQuery();
},
//幼儿园关闭
kindergartencancel() {
this.kindergartenshow = false;
this.kinresetQuery();
},
kinhandleQuery() {
//获取幼儿园list
listKindergartenInfo(this.kqueryParams).then(response => {
this.kindergartenList = response.rows;
this.total1 = response.total;
});
},
kinresetQuery() {
this.kqueryParams = {
pageNum: 1,
pageSize: 10,
organizeId: null,
kindergartenName: null,
kindergartenAddress: null,
kindergartenType: null,
phone: null,
contacts: null
};
this.kinhandleQuery();
},
// /base64转二进制
dataURLtoBlob(dataurl) {
var arr = dataurl.split(","),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {
type: mime
});
}
}
};
</script>
<style scoped='scss'>
::v-deep .el-form {
display: inline;
}
</style>