<template>
|
<!-- <div class="header_nox">
|
<el-button type="warning" circle @click="exportWord">下载</el-button>
|
<el-button type="primary" circle v-show="!editable" @click="editable = !editable">编辑</el-button>
|
<el-button type="primary" v-show=editable @click="saveData">确定</el-button>
|
</div> -->
|
<div id="printContent" ref="imageWrapper">
|
<h3>502底盖生产情况报告</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="chanliangHeaderData"
|
:tableHeader="chanliangHeader"
|
:labelName="labelName.b8"
|
:editable="editable"
|
>
|
</HJTABLE>
|
<HJTABLE
|
:SClist="sh14_yt_fpHeaderData"
|
:tableHeader="sh14_yt_fpHeader"
|
:labelName="labelName.b1"
|
:editable="editable"
|
>
|
</HJTABLE>
|
<HJTABLE
|
:SClist="sh14_cc_fpHeaderData"
|
:tableHeader="sh14_cc_fpHeader"
|
:labelName="labelName.b2"
|
:editable="editable"
|
>
|
</HJTABLE>
|
<HJTABLE
|
:SClist="sh14_zj_fpHeaderData"
|
:tableHeader="sh14_zj_fpHeader"
|
:labelName="labelName.b3"
|
:editable="editable"
|
>
|
</HJTABLE>
|
<HJTABLE
|
:SClist="sh14_gjj_fpHeaderData"
|
:tableHeader="sh14_gjj_fpHeader"
|
:labelName="labelName.b4"
|
:editable="editable"
|
></HJTABLE>
|
<HJTABLE
|
:SClist="sh14_jg_fpHeaderData"
|
:tableHeader="sh14_jg_fpHeader"
|
:labelName="labelName.b5"
|
:editable="editable"
|
>
|
</HJTABLE>
|
<HJTABLE
|
:SClist="sh14_zjHeaderData"
|
:tableHeader="sh14_zjHeader"
|
:labelName="labelName.b6"
|
:editable="editable"
|
>
|
</HJTABLE>
|
|
<HJTABLE
|
:SClist="feipinfpHeaderData"
|
:tableHeader="feipinfpHeader"
|
:labelName="labelName.b9"
|
: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 { chong14VoLast, chong14VoSave } from "@/api/gaixian";
|
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";
|
import { useRouter } from "vue-router";
|
import { headReport } from "@/api/head";
|
export default {
|
name: "",
|
components: { HJTABLE },
|
props: {},
|
setup(props) {
|
const router = useRouter();
|
const feipinfpHeader = reactive([
|
{ prop: "total", label: "生产废品(总计)", editable: false, type: "text" },
|
{ prop: "chongyingNum", label: "重印", editable: false, type: "input" },
|
{ prop: "louyinNum", label: "漏印", editable: false, type: "input" },
|
{ prop: "zazhidianNum", label: "杂质点", editable: false, type: "input" },
|
{
|
prop: "waituzouweiNum",
|
label: "外涂走位",
|
editable: false,
|
type: "input",
|
},
|
{ prop: "louyinNum", label: "漏印", editable: false, type: "input" },
|
{ prop: "moranNum", label: "墨染", editable: false, type: "input" },
|
{ prop: "fanbianBl", label: "翻边不良", editable: false, type: "input" },
|
{ prop: "sechaNum", label: "色差", editable: false, type: "input" },
|
{ prop: "neiyinseNum", label: "内印色", editable: false, type: "input" },
|
{
|
prop: "neiwaitucashangNum",
|
label: "内外涂擦伤",
|
editable: false,
|
type: "input",
|
},
|
{
|
prop: "guangyouBzNum",
|
label: "光油不准",
|
editable: false,
|
type: "input",
|
},
|
{
|
prop: "sutiehexianNum",
|
label: "素铁黑线",
|
editable: false,
|
type: "input",
|
},
|
{
|
prop: "taoyinBzNum",
|
label: "套印不准",
|
editable: false,
|
type: "input",
|
},
|
{ prop: "hubanNum", label: "糊板", editable: false, type: "input" },
|
]);
|
const chanliangHeader = reactive([
|
{ prop: "hjzs", label: "冲铁总数", editable: false, type: "text" },
|
{ prop: "chengpin", label: "成品", editable: false, type: "input" },
|
{ prop: "zhuancp", label: "转成品", editable: false, type: "input" },
|
{ prop: "daijp", label: "待检品", editable: false, type: "input" },
|
{ prop: "jiebqsy", label: "接班前剩余", editable: false, type: "input" },
|
{ prop: "jiaobhsy", label: "接班后剩余", editable: false, type: "input" },
|
{ prop: "yinfg", label: "印废盖", editable: false, type: "input" },
|
{ prop: "feipjbfp", label: "废品", editable: false, type: "input" },
|
{ prop: "hegcp", label: "合格成品", editable: false, type: "input" },
|
{ prop: "feipl", label: "废品率", editable: false, type: "input" },
|
{ prop: "caiytpc", label: "彩印铁批次", editable: false, type: "input" },
|
]);
|
const sh14_cc_fpHeader = reactive([
|
{ prop: "cq", label: "冲缺", editable: "false", type: "text" },
|
{ prop: "kg", label: "卡盖", editable: "false", type: "text" },
|
{ prop: "yh", label: "压痕", editable: "false", type: "text" },
|
{ prop: "cj", label: "抽检", editable: "false", type: "text" },
|
{ prop: "bx", label: "变形", editable: "false", type: "text" },
|
{ prop: "gmwr", label: "盖面污染", editable: "false", type: "text" },
|
{ prop: "sg", label: "双盖", editable: "false", type: "text" },
|
{ prop: "jyzz", label: "卷缘皱褶", editable: "false", type: "text" },
|
{ prop: "ldpy", label: "蓝点偏移", editable: "false", type: "text" },
|
{ prop: "gmyh", label: "盖面压痕", editable: "false", type: "text" },
|
]);
|
const sh14_gjj_fpHeader = reactive([
|
{ prop: "bx", label: "变形", editable: "false", type: "text" },
|
{ prop: "wj", label: "无胶", editable: "false", type: "text" },
|
{ prop: "dj", label: "盖面污染", editable: "false", type: "text" },
|
{ prop: "jj", label: "断胶", editable: "false", type: "text" },
|
{ prop: "hs", label: "溅胶", editable: "false", type: "text" },
|
{ prop: "cq", label: "划伤", editable: "false", type: "text" },
|
{ prop: "gmwr", label: "冲缺", editable: "false", type: "text" },
|
{ prop: "sg", label: "双盖", editable: "false", type: "text" },
|
{ prop: "jyzz", label: "卷缘皱褶", editable: "false", type: "text" },
|
{ prop: "ldpy", label: "蓝点偏移", editable: "false", type: "text" },
|
{ prop: "gmyh", label: "盖面压痕", editable: "false", type: "text" },
|
{ prop: "gmbd", label: "盖面白点", editable: "false", type: "text" },
|
]);
|
const sh14_jg_fpHeader = reactive([
|
{ prop: "bx", label: "变形", editable: "false", type: "text" },
|
{ prop: "wj", label: "无胶", editable: "false", type: "text" },
|
{ prop: "dj", label: "盖面污染", editable: "false", type: "text" },
|
{ prop: "jj", label: "断胶", editable: "false", type: "text" },
|
{ prop: "hs", label: "溅胶", editable: "false", type: "text" },
|
{ prop: "cq", label: "划伤", editable: "false", type: "text" },
|
{ prop: "gmwr", label: "冲缺", editable: "false", type: "text" },
|
{ prop: "sg", label: "双盖", editable: "false", type: "text" },
|
{ prop: "jyzz", label: "卷缘皱褶", editable: "false", type: "text" },
|
{ prop: "ldpy", label: "蓝点偏移", editable: "false", type: "text" },
|
{ prop: "gmyh", label: "盖面压痕", editable: "false", type: "text" },
|
{ prop: "gmbd", label: "盖面白点", editable: "false", type: "text" },
|
]);
|
const sh14_yt_fpHeader = reactive([
|
{ prop: "cy", label: "重影", editable: "false", type: "text" },
|
{ prop: "sc", label: "色差", editable: "false", type: "text" },
|
{ prop: "mr", label: "墨染", editable: "false", type: "text" },
|
{ prop: "ly", label: "漏印", editable: "false", type: "text" },
|
{ prop: "zzd", label: "杂质点", editable: "false", type: "text" },
|
{ prop: "nys", label: "内印色", editable: "false", type: "text" },
|
{ prop: "ldwy", label: "蓝点外移", editable: "false", type: "text" },
|
{ prop: "nwtcs", label: "内外涂擦伤", editable: "false", type: "text" },
|
{ prop: "lt", label: "漏涂", editable: "false", type: "text" },
|
]);
|
const sh14_zjHeader = reactive([
|
{ prop: "jy", label: "检验", editable: "false", type: "text" },
|
{ prop: "sy", label: "试验", editable: "false", type: "text" },
|
{ prop: "hj", label: "", editable: "false", type: "text" },
|
]);
|
const sh14_zj_fpHeader = reactive([
|
{ prop: "kg", label: "卡盖", editable: "false", type: "text" },
|
{ prop: "bx", label: "变形", editable: "false", type: "text" },
|
{ prop: "wj", label: "无胶", editable: "false", type: "text" },
|
{ prop: "gmwr", label: "盖面污染", editable: "false", type: "text" },
|
{ prop: "dj", label: "断胶", editable: "false", type: "text" },
|
{ prop: "jj", label: "溅胶", editable: "false", type: "text" },
|
{ prop: "hs", label: "划伤", editable: "false", type: "text" },
|
]);
|
|
let tableData = reactive([]);
|
const formInline = reactive({
|
user: "",
|
region: "",
|
});
|
const imageWrapper = ref(null);
|
|
let headData = reactive({
|
head: {},
|
});
|
|
let labelName = {
|
b1: "印铁废品",
|
b2: "冲床废品",
|
b3: "注胶机废品",
|
b4: "光验机废品",
|
b5: "集盖废品",
|
b6: "质检",
|
b7: "印废盖",
|
b8: "产量统计",
|
b9: "印废盖",
|
};
|
let editable = ref(false);
|
|
let SClist = ref([]);
|
let hjData = ref({});
|
|
let sh14_cc_fpHeaderData = ref([]);
|
let sh14_gjj_fpHeaderData = ref([]);
|
let sh14_jg_fpHeaderData = ref([]);
|
let sh14_yt_fpHeaderData = ref([]);
|
let sh14_zjHeaderData = ref([]);
|
let sh14_zj_fpHeaderData = ref([]);
|
let chanliangHeaderData = ref([]);
|
let feipinfpHeaderData = 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);
|
};
|
function checkValue(obj) {
|
if (obj == null) return [{ total: 0 }];
|
return [obj];
|
}
|
function checkTotal(obj) {
|
if (obj == null) return null;
|
return obj.total;
|
}
|
const getListData = async () => {
|
const data = await chong14VoLast();
|
|
console.log(".........g14", data);
|
parse(data);
|
};
|
|
function parse(data) {
|
headData.head = data.data.head;
|
if (headData.head.reportTime != null)
|
headData.head.reportTime = headData.head.reportTime.substr(0, 10);
|
// headData.head.jieban1 = headData.head.jieban.substr(11, 5);
|
// headData.head.jiaoban1 = headData.head.jiaoban.substr(11, 5);
|
|
sh14_cc_fpHeaderData.value = [data.data.sh14CcFp];
|
|
sh14_gjj_fpHeaderData.value = [data.data.sh14GjjFp];
|
sh14_jg_fpHeaderData.value = [data.data.sh14JgFp];
|
sh14_yt_fpHeaderData.value = [
|
data.data.ytFp == null ? [] : data.data.ytFp,
|
];
|
|
sh14_zjHeaderData.value = [data.data.sh14Zj];
|
sh14_zj_fpHeaderData.value = [data.data.sh14ZjFp];
|
|
chanliangHeaderData.value = [data.data.lineChanliangtongji];
|
feipinfpHeaderData.value = [data.data.feipinGuan];
|
|
let zhujiao = {
|
zjkg: data.data.sh14ZjFp.kg,
|
zjbx: data.data.sh14ZjFp.bx,
|
zjwj: data.data.sh14ZjFp.wj,
|
zjjj: data.data.sh14ZjFp.jj,
|
zjdj: data.data.sh14ZjFp.dj,
|
zjhs: data.data.sh14ZjFp.hj,
|
};
|
|
let gjj = {
|
gjjsg: data.data.sh14GjjFp.sg,
|
gjjdj: data.data.sh14GjjFp.dj,
|
gjjcq: data.data.sh14GjjFp.cq,
|
gjjjyzz: data.data.sh14GjjFp.gmzz,
|
gjjgmwr: data.data.sh14GjjFp.gmwr,
|
gjjldpy: data.data.sh14GjjFp.ldpy,
|
gjjbx: data.data.sh14GjjFp.bx,
|
gjjgmyh: data.data.sh14GjjFp.gmyh,
|
gjjgmbd: data.data.sh14GjjFp.gmbd,
|
gjjhs: data.data.sh14GjjFp.hs,
|
gjjwj: data.data.sh14GjjFp.wj,
|
gjjjj: data.data.sh14GjjFp.jj,
|
};
|
|
let jg = {
|
jgsg: data.data.sh14JgFp.sg,
|
jgdj: data.data.sh14JgFp.dj,
|
jgcq: data.data.sh14JgFp.cq,
|
jgjyzz: data.data.sh14JgFp.gmzz,
|
jggmwr: data.data.sh14JgFp.gmwr,
|
jgldpy: data.data.sh14JgFp.ldpy,
|
jgbx: data.data.sh14JgFp.bx,
|
jggmyh: data.data.sh14JgFp.gmyh,
|
jggmbd: data.data.sh14JgFp.gmbd,
|
jghs: data.data.sh14JgFp.hs,
|
jgwj: data.data.sh14JgFp.wj,
|
jgjj: data.data.sh14JgFp.jj,
|
};
|
let zj = {
|
t1: checkTotal(data.data.feipinYintie),
|
t2: checkTotal(data.data.sh14CcFp),
|
t3: checkTotal(data.data.sh14ZjFp),
|
t4: checkTotal(data.data.sh14GjjFp),
|
t5: checkTotal(data.data.sh14JgFp),
|
|
t6: checkTotal(data.data.feipinGuan),
|
};
|
hjData.value = {
|
...headData.head,
|
...data.data.ytFp,
|
...data.data.sh14CcFp,
|
...zhujiao,
|
...gjj,
|
...jg,
|
...data.data.sh14Zj,
|
...data.data.feipinGuan,
|
...zj,
|
};
|
}
|
const saveData = async () => {
|
editable = false;
|
let data = {
|
head: headData.head,
|
sh14CcFp: sh14_cc_fpHeaderData.value[0],
|
sh14GjjFp: sh14_gjj_fpHeaderData.value[0],
|
sh14JgFp: sh14_jg_fpHeaderData.value[0],
|
ytFp: sh14_yt_fpHeaderData.value[0],
|
sh14Zj: sh14_zjHeaderData.value[0],
|
sh14ZjFp: sh14_zj_fpHeaderData.value[0],
|
lineChanliangtongji: chanliangHeaderData.value[0],
|
feipinGuan: feipinfpHeaderData.value[0],
|
};
|
console.log("save data...", data);
|
const dt = await chong14VoSave(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", "502底盖生产情况报告"); // 给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("g14.docx", function (error, content) {
|
// input.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
|
// 抛出异常
|
if (error) {
|
throw error;
|
}
|
|
// 创建一个JSZip实例，内容为模板的内容
|
let zip = new PizZip(content);
|
// 创建并加载docxtemplater实例对象
|
|
let doc = new docxtemplater().loadZip(zip).setOptions({
|
nullGetter: function () {
|
return "";
|
},
|
});
|
// 设置模板变量的值
|
doc.setData({
|
...hjData.value,
|
});
|
|
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, "502底盖生产情况报告.docx");
|
});
|
}
|
const getRouterData = async (req) => {
|
console.log("req....", req);
|
const data = await headReport(req);
|
console.log("jbj router data.....", data);
|
|
parse(data);
|
};
|
onMounted(() => {
|
console.log("rrrrrrrrrrr", router.currentRoute.value.query);
|
let head_id = router.currentRoute.value.query.id;
|
let leixing = router.currentRoute.value.query.leixing;
|
console.log("vue recv....", head_id, leixing);
|
if (head_id == null) {
|
getListData();
|
} else {
|
getRouterData({ head_id: head_id, leixing: leixing });
|
}
|
});
|
return {
|
saveData,
|
submitForm,
|
formInline,
|
tableData,
|
insertBefore,
|
deleteCurrentColumn,
|
append,
|
prepend,
|
handleDelete,
|
handleEdit,
|
editable,
|
getListData,
|
headData,
|
toImage,
|
imageWrapper,
|
labelName,
|
exportWord,
|
sh14_cc_fpHeaderData,
|
sh14_gjj_fpHeaderData,
|
sh14_jg_fpHeaderData,
|
sh14_yt_fpHeaderData,
|
sh14_zjHeaderData,
|
sh14_zj_fpHeaderData,
|
sh14_cc_fpHeader,
|
sh14_gjj_fpHeader,
|
sh14_jg_fpHeader,
|
sh14_yt_fpHeader,
|
sh14_zjHeader,
|
sh14_zj_fpHeader,
|
chanliangHeaderData,
|
chanliangHeader,
|
feipinfpHeaderData,
|
feipinfpHeader,
|
chong14VoLast,
|
chong14VoSave,
|
};
|
},
|
};
|
</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>
|
