<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>四线</span>
|
</div> -->
|
</div>
|
<el-divider />
|
|
<el-table
|
:data="SClist"
|
style="width: 100%"
|
:header-cell-style="{ 'text-align': 'center', fontSize: '20px' }"
|
>
|
<el-table-column label="线边库记录">
|
<!-- <el-table-column
|
:prop="item.prop"
|
:label="item.label"
|
:key="index"
|
v-if="item"
|
> -->
|
<template v-for="(item, index) in tableHeader">
|
<el-table-column
|
:prop="item.prop"
|
:label="item.label"
|
:key="index"
|
v-if="item"
|
>
|
</el-table-column>
|
</template>
|
|
<el-table-column label="操作" class-name="CZtd">
|
<template #default="scope">
|
<el-button
|
v-show="!scope.row.editable"
|
size="small"
|
@click="scope.row.editable = true"
|
>编辑</el-button
|
>
|
<el-button
|
v-show="scope.row.editable"
|
size="small"
|
type="success"
|
@click="scope.row.editable = false"
|
>确定</el-button
|
>
|
<!-- <el-button
|
size="small"
|
type="danger"
|
@click="handleDelete(scope.$index)"
|
>删除</el-button
|
> -->
|
</template>
|
</el-table-column>
|
</el-table-column>
|
</el-table>
|
</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 { bainxkVoList, save } from "@/api/BXKapi";
|
import html2canvas from "html2canvas";
|
import docxtemplater from "docxtemplater";
|
import PizZip from "pizzip";
|
import JSZipUtils from "jszip-utils";
|
import { saveAs } from "file-saver";
|
export default {
|
name: "",
|
components: {},
|
props: {},
|
setup(props) {
|
const tableHeader = reactive([
|
{
|
prop: "chanxian",
|
label: "产线",
|
editable: false,
|
type: "text",
|
},
|
|
{
|
prop: "chanxianName",
|
label: "产线名称",
|
editable: false,
|
type: "input",
|
},
|
{
|
prop: "pihao",
|
label: "批号",
|
editable: false,
|
type: "input",
|
},
|
{
|
prop: "材料",
|
label: "材料",
|
editable: false,
|
type: "text",
|
},
|
{
|
prop: "cailiaoNum",
|
label: "材料数量",
|
editable: false,
|
type: "input",
|
},
|
{
|
prop: "cailiaoNum2",
|
label: "材料数量2",
|
editable: false,
|
type: "input",
|
},
|
{
|
prop: "cailiaoNum3",
|
label: "材料数量3",
|
editable: false,
|
type: "input",
|
},
|
]);
|
|
let tableData = reactive([]);
|
|
const formInline = reactive({
|
user: "",
|
region: "",
|
});
|
const imageWrapper = ref(null);
|
|
let headData = reactive({
|
head: {},
|
});
|
let hanjiRdData = reactive({
|
bainxkVoList: {},
|
});
|
let SClist = ref([]);
|
let hjData = ref({});
|
let ssList = 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 bainxkVoList();
|
headData.head = data.data.head;
|
hanjiRdData.bainxkVoList = data.data.bainxkVoList;
|
|
hjData.value = {
|
...headData.head,
|
...hanjiRdData.bainxkVoList,
|
};
|
|
// tableHeader.forEach(e=>{
|
// // SClist.push({e.})
|
// })
|
|
SClist.value = data.data.bainxkVoList;
|
|
// console.log(SClist);
|
};
|
|
const saveData = async () => {
|
editable = false;
|
|
let data = {
|
bainxkVoList: 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 {
|
saveData,
|
submitForm,
|
formInline,
|
tableData,
|
insertBefore,
|
deleteCurrentColumn,
|
append,
|
prepend,
|
handleDelete,
|
handleEdit,
|
tableHeader,
|
getListData,
|
headData,
|
toImage,
|
imageWrapper,
|
SClist,
|
ssList,
|
exportWord,
|
};
|
},
|
};
|
</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>
|
