<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>整张冲铁使用登记表录</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="c13_ctsyHeaderData"
|
:tableHeader="c13_ctsyHeader"
|
: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 { chong13VoLast, chong13VoSave } 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 c13_ctsyHeader = reactive([
|
{ prop: "shijian", label: "时间", editable: "false", type: "text" },
|
{ prop: "banci", label: "班次", editable: "false", type: "text" },
|
{ prop: "name", label: "名称", editable: "false", type: "text" },
|
{ prop: "pc", label: "印刷批次", editable: "false", type: "text" },
|
{ prop: "bh", label: "包号", editable: "false", type: "text" },
|
{ prop: "ytzs", label: "原铁张数", editable: "false", type: "text" },
|
{ prop: "yczs", label: "已冲张数", editable: "false", type: "text" },
|
{ prop: "jieb", label: "接班张数", editable: "false", type: "text" },
|
{ prop: "jbsy", label: "交班剩余", editable: "false", type: "text" },
|
{ prop: "ktzs", label: "亏铁张数", editable: "false", type: "text" },
|
{ prop: "yfzs", label: "印废张数", editable: "false", type: "text" },
|
{ prop: "ytcj", label: "印铁厂家", editable: "false", type: "text" },
|
{ prop: "bz", 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: "外观检测项目",
|
};
|
let editable = ref(false);
|
|
let SClist = ref([]);
|
let hjData = ref({});
|
|
let c13_ctsyHeaderData = 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 chong13VoLast();
|
|
console.log(".........g13", 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);
|
c13_ctsyHeaderData.value = data.data.c13CtsyList;
|
c13_ctsyHeaderData.value.filter((item) => {
|
if (item.shijian != null) item.shijian11 = item.shijian.substr(0, 10);
|
|
return item;
|
});
|
hjData.value = {
|
...headData.head,
|
t1: c13_ctsyHeaderData.value,
|
};
|
}
|
const saveData = async () => {
|
editable = false;
|
let data = {
|
head: headData.head,
|
c13CtsyList: c13_ctsyHeaderData.value,
|
};
|
console.log("save data...", data);
|
const dt = await chong13VoSave(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("g13.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, "整张冲铁使用登记表录.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,
|
c13_ctsyHeader,
|
c13_ctsyHeaderData,
|
chong13VoLast,
|
chong13VoSave,
|
};
|
},
|
};
|
</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>
|
