<template>
|
<div id="printContent" ref="imageWrapper">
|
<h3>综合信息</h3>
|
|
|
<div class="title_form">
|
<div class="title_form_input">
|
<span>生产线：</span>
|
<span>{{ headData.head.shengcx }}</span>
|
</div>
|
<div class="title_form_input">
|
<span>产品：</span>
|
<span>{{ headData.head.chanpin }}</span>
|
</div>
|
<div class="title_form_input">
|
<span>日期：</span>
|
<span>{{ headData.head.reportTime }}</span>
|
</div>
|
<div class="title_form_input">
|
<span>班次：</span>
|
<span>{{ headData.head.banci }}</span>
|
</div>
|
<div class="title_form_input">
|
<span>记录员：</span>
|
<span>{{ headData.head.jiluyuan }}</span>
|
</div>
|
<div class="title_form_input">
|
<span>接班时间：</span>
|
<span>{{ headData.head.jieban1 }}</span>
|
</div>
|
<div class="title_form_input">
|
<span>交班时间：</span>
|
<span>{{ headData.head.jiaoban1 }}</span>
|
</div>
|
</div>
|
<el-divider />
|
|
<HJTABLE
|
:SClist="zhxxBase"
|
:tableHeader="tableHeader"
|
|
:editable="editable"
|
> </HJTABLE>
|
<HJTABLE
|
:SClist="zhxxDj1"
|
:tableHeader="zhxxDj1Header"
|
|
:editable="editable"
|
> </HJTABLE>
|
<HJTABLE
|
:SClist="zhxxDj2"
|
:tableHeader="zhxxDj2Header"
|
|
:editable="editable"
|
>
|
</HJTABLE>
|
<HJTABLE
|
:SClist="zhxxFl"
|
:tableHeader="zhxxFlHeader"
|
|
:editable="editable"
|
>
|
</HJTABLE>
|
</div>
|
</template>
|
|
<script>
|
const item = {
|
name: "",
|
birth: "",
|
province: "",
|
city: "",
|
address: "",
|
phone: "",
|
};
|
const header = {
|
prop: "key",
|
label: "自定义",
|
editable: false,
|
type: "input",
|
};
|
import { ref, reactive, onMounted } from "vue";
|
import { ElMessage } from "element-plus";
|
import { b4VoLast, b4Sava } from "@/api/b";
|
import html2canvas from "html2canvas";
|
import docxtemplater from "docxtemplater";
|
import PizZip from "pizzip";
|
import JSZipUtils from "jszip-utils";
|
import { saveAs } from "file-saver";
|
import HJTABLE from "@/components/arj/arj-table";
|
export default {
|
name: "",
|
|
components: { HJTABLE },
|
props: {},
|
|
setup(props) {
|
const zhxxDj1Header = reactive([
|
{ prop: "bcp", label: "半成品", editable: false, type: "text" },
|
{ prop: "clrq", label: "处理日期", editable: false, type: "text" },
|
{ prop: "clrqz", label: "处理签字", editable: false, type: "text" },
|
{ prop: "djbh", label: "待检编号", editable: false, type: "text" },
|
{ prop: "djsl", label: "待检数量", editable: false, type: "text" },
|
{ prop: "fjjl", label: "复检记录", editable: false, type: "text" },
|
{ prop: "fpsl", label: "复检数量", editable: false, type: "text" },
|
{ prop: "gxx", label: "盖信息", editable: false, type: "text" },
|
{ prop: "jgpd", label: "结果判定", editable: false, type: "text" },
|
|
|
]);
|
const zhxxDj2Header = reactive([
|
|
{ prop: "mcgg", label: "名称规格", editable: false, type: "text" },
|
{ prop: "qxyy", label: "缺陷原因", editable: false, type: "text" },
|
{ prop: "scpc", label: "生产批次", editable: false, type: "text" },
|
{ prop: "txx", label: "铁信息", editable: false, type: "text" },
|
{ prop: "zhijian", label: "质检", editable: false, type: "text" },
|
{ prop: "zjy", label: "质检员", editable: false, type: "text" },
|
{ prop: "shengcx", label: "生产线", editable: false, type: "text" },
|
{ prop: "ycl", label: "原材料", editable: false, type: "text" },
|
|
]);
|
const zhxxFlHeader = reactive([
|
|
{ prop: "name", label: "辅料名称", editable: false, type: "text" },
|
{ prop: "num", label: "辅料数量", editable: false, type: "text" },
|
{ prop: "shengcx", label: "生产线", editable: false, type: "text" },
|
{ prop: "txx", label: "铁信息", editable: false, type: "text" },
|
{ prop: "zhijian", label: "质检", editable: false, type: "text" },
|
{ prop: "zjy", label: "质检员", editable: false, type: "text" },
|
{ prop: "shegncx", label: "生产线", editable: false, type: "text" },
|
{ prop: "ycl", label: "原材料", editable: false, type: "text" },
|
|
]);
|
const tableHeader = reactive([
|
{
|
prop: "cxzt",
|
label: "产线状态",
|
editable: false,
|
type: "text",
|
},
|
|
{
|
prop: "dbfp",
|
label: "当班废品率",
|
editable: false,
|
type: "input",
|
},
|
{
|
prop: "kdvHg",
|
label: "合格品率",
|
editable: false,
|
type: "input",
|
},
|
{
|
prop: "kdvSj",
|
label: "时间开动率",
|
editable: false,
|
type: "text",
|
},
|
{
|
prop: "kdvSj",
|
label: "性能开动率",
|
editable: false,
|
type: "input",
|
},
|
{
|
prop: "yueTotal",
|
label: "月统计",
|
editable: false,
|
type: "input",
|
},
|
|
]);
|
|
let tableData = reactive([]);
|
|
const formInline = reactive({
|
user: "",
|
region: "",
|
});
|
const imageWrapper = ref(null);
|
|
let headData = reactive({
|
head: {},
|
});
|
|
let SClist = ref([]);
|
let hjData = ref({});
|
let zhxxBase = ref([]);
|
let zhxxDj1 = ref([])
|
let zhxxDj2 = ref([])
|
let zhxxFl = ref([])
|
const submitForm = () => {};
|
|
const handleEdit = (row) => {
|
row.editable = true;
|
};
|
const handleDelete = (index) => {
|
this.tableData.splice(index, 1);
|
};
|
const prepend = (index) => {
|
item.editable = true;
|
this.tableData.splice(index, 0, item);
|
};
|
const append = (index) => {
|
item.editable = true;
|
this.tableData.splice(index + 1, 0, item);
|
};
|
const deleteCurrentColumn = (index) => {
|
this.tableHeader.splice(index, 1);
|
};
|
const insertBefore = (index) => {
|
header.editable = true;
|
this.tableHeader.splice(index, 0, header);
|
};
|
const getListData = async () => {
|
const data = await b4VoLast();
|
console.log("生产计划。。。", data);
|
headData.head = data.data.head;
|
zhxxBase.value = [data.data.zhxxBase];
|
zhxxDj1.value = [data.data.zhxxDj];
|
zhxxDj2.value = [data.data.zhxxDj];
|
zhxxFl.value = data.data.zhxxFlList;
|
hjData.value = {
|
...headData.head,
|
|
};
|
|
// tableHeader.forEach(e=>{
|
// // SClist.push({e.})
|
// })
|
|
SClist.value = data.data.scjhList;
|
|
// console.log(SClist);
|
};
|
|
const saveData = async () => {
|
editable = false;
|
|
let data = {
|
scjhList: SClist.value,
|
|
head: headData.head,
|
};
|
// console.log("save data...", data);
|
const dt = await save(data);
|
if (dt.code == 0) {
|
ElMessage({
|
message: "修改成功",
|
type: "success",
|
});
|
}
|
// console.log(dt);
|
};
|
//截图
|
const toImage = () => {
|
html2canvas(imageWrapper.value, {
|
logging: false,
|
allowTaint: true,
|
scale: window.devicePixelRatio,
|
// width: shareContent.clientWidth, //dom 原始宽度
|
// height: shareContent.clientHeight,
|
scrollY: 0,
|
scrollX: 0,
|
useCORS: true,
|
backgroundColor: "#ffffff",
|
}).then(function (canvas) {
|
// console.log(canvas);
|
let imgUrl = canvas.toDataURL("image/png");
|
var tempLink = document.createElement("a"); // 创建一个a标签
|
tempLink.style.display = "none";
|
tempLink.href = imgUrl;
|
tempLink.setAttribute("download", "焊机/后道工序生产质量记录"); // 给a标签添加下载属性
|
if (typeof tempLink.download === "undefined") {
|
tempLink.setAttribute("target", "_blank");
|
}
|
document.body.appendChild(tempLink); // 将a标签添加到body当中
|
tempLink.click(); // 启动下载
|
document.body.removeChild(tempLink); // 下载完毕删除a标签
|
window.URL.revokeObjectURL(imgUrl);
|
});
|
};
|
// 点击导出word
|
function exportWord() {
|
// 读取并获得模板文件的二进制内容
|
JSZipUtils.getBinaryContent("hj.docx", function (error, content) {
|
// input.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
|
// 抛出异常
|
if (error) {
|
throw error;
|
}
|
|
// 创建一个JSZip实例，内容为模板的内容
|
let zip = new PizZip(content);
|
// 创建并加载docxtemplater实例对象
|
let doc = new docxtemplater().loadZip(zip);
|
// 设置模板变量的值
|
doc.setData({
|
...hjData.value,
|
|
// table: hanjiRdData.hanjiRd,
|
});
|
|
try {
|
// 用模板变量的值替换所有模板变量
|
doc.render();
|
} catch (error) {
|
// 抛出异常
|
let e = {
|
message: error.message,
|
name: error.name,
|
stack: error.stack,
|
properties: error.properties,
|
};
|
// console.log(JSON.stringify({ error: e }));
|
throw error;
|
}
|
|
// 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
|
let out = doc.getZip().generate({
|
type: "blob",
|
mimeType:
|
"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
|
});
|
// 将目标文件对象保存为目标类型的文件，并命名
|
saveAs(out, "焊机/后道工序生产质量记录.docx");
|
});
|
}
|
getListData();
|
onMounted(() => {});
|
return {
|
b4VoLast,
|
saveData,
|
submitForm,
|
formInline,
|
tableData,
|
insertBefore,
|
deleteCurrentColumn,
|
append,
|
prepend,
|
handleDelete,
|
handleEdit,
|
tableHeader,
|
zhxxFlHeader,
|
getListData,
|
headData,
|
toImage,
|
imageWrapper,
|
SClist,
|
zhxxBase,
|
zhxxDj1,
|
zhxxDj2,
|
zhxxFl,
|
exportWord,
|
zhxxDj1Header,
|
zhxxDj2Header,
|
};
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.header_nox {
|
text-align: right;
|
}
|
#printContent h3 {
|
text-align: center;
|
margin-bottom: 40px;
|
font-size: 26px;
|
font-weight: bold;
|
}
|
.title_form {
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
// margin-bottom: 20px;
|
}
|
.title_form_input {
|
font-size: 16px;
|
}
|
</style>
|
