538 lines
17 KiB
Plaintext
538 lines
17 KiB
Plaintext
<template>
|
||
<div>
|
||
<div class="main">
|
||
<div>
|
||
<el-row :gutter="10" class="mb8">
|
||
<el-col :span="1.5">
|
||
<el-button
|
||
type="success"
|
||
icon="el-icon-printer"
|
||
size="mini"
|
||
@click="printBar"
|
||
>打印条码
|
||
</el-button>
|
||
</el-col>
|
||
<el-col
|
||
v-loading="handleExportLoading"
|
||
element-loading-spinner="el-icon-loading"
|
||
:span="1.5"
|
||
>
|
||
<el-button
|
||
type="info"
|
||
icon="el-icon-download"
|
||
size="mini"
|
||
@click="handleExport"
|
||
>
|
||
导出
|
||
</el-button>
|
||
</el-col>
|
||
<el-popover
|
||
style="float: right"
|
||
placement="bottom-end"
|
||
title="自定义显示列"
|
||
width="250"
|
||
@show="initPopover"
|
||
trigger="hover"
|
||
>
|
||
<headConfig
|
||
ref="test"
|
||
@fathers="fathers"
|
||
:propThis="propThis"
|
||
></headConfig>
|
||
<el-button
|
||
size="mini"
|
||
type="primary"
|
||
class="el-icon-caret-bottom"
|
||
slot="reference"
|
||
>自定义列</el-button
|
||
>
|
||
</el-popover>
|
||
</el-row>
|
||
</div>
|
||
<el-table
|
||
@header-dragend="headerDragend"
|
||
:row-class-name="tableRowClassName"
|
||
v-if="indexShow"
|
||
v-loading="loading"
|
||
@current-change="handleCurrentChange"
|
||
@selection-change="handleSelectionChange"
|
||
:data="tableData"
|
||
border
|
||
:height="propsThis.tableHeight"
|
||
class="tableStyle"
|
||
style="width: 100%"
|
||
>
|
||
<el-table-column type="index" align="center" label="序号" width="50">
|
||
</el-table-column>
|
||
<el-table-column type="selection" width="55"> </el-table-column>
|
||
<el-table-column
|
||
v-for="(item, index) in realList"
|
||
:prop="item.tableProp"
|
||
:key="index"
|
||
:align="item.align"
|
||
header-align="center"
|
||
:min-width="item.width"
|
||
:label="item.tableTitle"
|
||
:show-overflow-tooltip="item.show_overflow_tooltip"
|
||
>
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-pagination
|
||
style="margin-top: 10px"
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange2"
|
||
:current-page="currentPage"
|
||
:page-sizes="[10, 20, 50, 100, 200, 500, 1000]"
|
||
:page-size="pageSize"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
:total="total"
|
||
>
|
||
</el-pagination>
|
||
<div id="printFlow" v-if="printInfo"></div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import QRCode from "qrcodejs2";
|
||
export default {
|
||
props: {
|
||
propsThis: {
|
||
type: Object,
|
||
},
|
||
},
|
||
mounted() {
|
||
// this.$nextTick(() => {
|
||
// this.tableHeight = window.innerHeight - 500;
|
||
// });
|
||
this.getList();
|
||
const params = {
|
||
tableName: "list",
|
||
};
|
||
this.$headerConfig.getRealList(params).then((data) => {
|
||
console.log("开始输出真正表格");
|
||
if (data.data && data.data.data && data.data.data !== null) {
|
||
let temp = JSON.parse(data.data.data);
|
||
this.realList = temp.headerList;
|
||
this.List = temp.List;
|
||
} else {
|
||
this.List = this.$headerConfig.getList("list");
|
||
this.realList = this.List;
|
||
let temp = {
|
||
headerList: this.realList,
|
||
List: this.List,
|
||
};
|
||
const params = {
|
||
tableName: "list",
|
||
configure: JSON.stringify(temp),
|
||
};
|
||
this.$headerConfig.updateRealList(params).then((value) => {
|
||
console.log(value);
|
||
});
|
||
}
|
||
this.indexShow = true;
|
||
});
|
||
},
|
||
name: "index",
|
||
data() {
|
||
return {
|
||
multipleSelection: [],
|
||
indexShow: false,
|
||
showMore: false,
|
||
currentRow: null,
|
||
List: [],
|
||
realList: [],
|
||
isAdd: null,
|
||
total: null,
|
||
propThis: this,
|
||
pageSize: 50,
|
||
warehouseOptions: [],
|
||
locationOptions: [],
|
||
buttonEnable: true,
|
||
tableHeight: 0,
|
||
currentPage: 1,
|
||
tableData: [],
|
||
printInfo: false,
|
||
queryParams: {},
|
||
loading: false,
|
||
handleExportLoading: false,
|
||
};
|
||
},
|
||
methods: {
|
||
headerDragend(newWidth, oldWidth, column, event) {
|
||
// realList
|
||
this.realList.forEach((value) => {
|
||
if (column.property == value.tableProp) {
|
||
value.width = newWidth;
|
||
}
|
||
});
|
||
this.$refs.test.init();
|
||
setTimeout(() => {
|
||
this.$refs.test.show();
|
||
}, 1000);
|
||
},
|
||
handleSelectionChange(val) {
|
||
this.multipleSelection = val;
|
||
},
|
||
|
||
printBar() {
|
||
this.printFlow(this.multipleSelection);
|
||
},
|
||
|
||
printFlow(respData) {
|
||
this.printData = [];
|
||
this.printInfo = true;
|
||
let router = "";
|
||
|
||
// alert(respData)
|
||
|
||
respData.forEach((data) => {
|
||
if (data.supplierName === null) {
|
||
data.supplierName = "";
|
||
}
|
||
});
|
||
|
||
this.printData = respData;
|
||
this.$nextTick(() => {
|
||
// this.printData.forEach((value, index) => {
|
||
// router = router + '<div style="height: 72mm;width: 100mm;padding: 0;page-break-after:always;margin-top: 300px" >' +
|
||
// '<table border="1" cellspacing="0" cellpadding="0" width="100%" height="100%">' +
|
||
// '<tr>' +
|
||
// '<td align="center" style="height: 12mm;">单据编号</td>' +
|
||
// '<td align="center" colspan="2">' + value.billNumber + '</td>' +
|
||
// '<td align="center" rowspan="2">' +
|
||
//
|
||
// '<div id="qrcode' + index + '"></div>' +
|
||
//
|
||
// '</td>' +
|
||
// '</tr>' +
|
||
// '<tr>' +
|
||
// '<td align="center" style="height: 12mm;">条码</td>' +
|
||
// '<td align="center" colspan="2">' + value.materialBar + '</td>' +
|
||
// '</tr>' +
|
||
// '<tr>' +
|
||
// '<td align="center" style="height: 12mm;">物料编码</td>' +
|
||
// '<td align="center" colspan="3">' + value.materialCode + '</td>' +
|
||
//
|
||
// '</tr>' +
|
||
// '<tr>' +
|
||
// '<td align="center" style="height: 12mm;">物料名称</td>' +
|
||
// '<td align="center" colspan="3"> ' + value.materialName + '</td>' +
|
||
//
|
||
// '</tr>' +
|
||
// '<tr>' +
|
||
// '<td align="center" style="width: 25%; height: 12mm;">批次</td>' +
|
||
// '<td align="center" style="width: 25%;">' + value.batchNumber + '</td>' +
|
||
// '<td align="center" style="width: 30%;">数量</td>' +
|
||
// '<td align="center">' + value.qty + '</td>' +
|
||
// '</tr>' +
|
||
// '<tr>' +
|
||
// '<td align="center" style="height: 12mm;">供应商</td>' +
|
||
// '<td align="center" colspan="3"> ' + value.supplierName + '</td>' +
|
||
//
|
||
// '</tr>' +
|
||
// '</table>' +
|
||
// ' </div>'
|
||
// })
|
||
this.printData.forEach((value, index) => {
|
||
router =
|
||
router +
|
||
'<div class="a4" style="padding-top: 10px;" >' +
|
||
'<table border="1" cellspacing="0" cellpadding="0" style="width:180px;table-layout:fixed;">' +
|
||
"<tr>" +
|
||
'<td align="center" style="font-size: 6px;height: 25px" width="70px">编码</td>' +
|
||
'<td align="center" style="font-size: 6px;width: 120px;word-wrap:break-word;" >' +
|
||
value.materialCode +
|
||
"</td>" +
|
||
'<td align="center" style="font-size: 18px;height:90px;width: 90px" colspan="2" rowspan="3"><div style="padding-left: 5px" id="qrcode' +
|
||
index +
|
||
'"></div></td>' +
|
||
"</tr>" +
|
||
"<tr>" +
|
||
'<td align="center" style="font-size: 6px;" >名称</td>' +
|
||
'<td align="center" style="font-size: 6px;word-wrap:break-word;" colspan="1" width="120px"> ' +
|
||
value.materialName +
|
||
"</td>" +
|
||
"</tr>" +
|
||
"</tr>" +
|
||
"<tr>" +
|
||
'<td align="center" style="font-size: 6px;" width="120px">条码</td>' +
|
||
'<td align="center" style="font-size: 8px;word-wrap:break-word;" colspan="1" width="120px"> ' +
|
||
value.materialBar +
|
||
"</td>" +
|
||
"</tr>" +
|
||
"<tr>" +
|
||
'<td align="center" style="font-size: 6px;height: 25px" >批次</td>' +
|
||
'<td align="center" style="font-size: 6px" >' +
|
||
value.batchNo +
|
||
"</td>" +
|
||
'<td align="center" style="font-size: 6px;">数量</td>' +
|
||
'<td align="center" style="font-size: 6px;" >' +
|
||
value.qty +
|
||
"</td>" +
|
||
"</tr>" +
|
||
"</table>" +
|
||
" </div>";
|
||
});
|
||
|
||
let printerTable = document.getElementById("printFlow");
|
||
printerTable.innerHTML = router;
|
||
|
||
this.$nextTick(() => {
|
||
this.printData.forEach((value, idx) => {
|
||
let qrcode = new QRCode("qrcode" + idx, {
|
||
width: 80, //图像宽度
|
||
height: 80, //图像高度
|
||
colorDark: "#000000", //前景色
|
||
colorLight: "#ffffff", //背景色
|
||
typeNumber: 4,
|
||
correctLevel: QRCode.CorrectLevel.H, //容错级别 容错级别有：（1）QRCode.CorrectLevel.L （2）QRCode.CorrectLevel.M （3）QRCode.CorrectLevel.Q （4）QRCode.CorrectLevel.H
|
||
});
|
||
console.log(value.materialBar);
|
||
qrcode.makeCode(value.materialBar);
|
||
});
|
||
|
||
this.$nextTick(() => {
|
||
window.setTimeout(() => {
|
||
this.loading = false;
|
||
this.printInfo = false;
|
||
let tableToPrint = document.getElementById("printFlow"); //将要被打印的表格
|
||
let newWin = window.open(""); //新打开一个空窗口
|
||
newWin.document.write(
|
||
"<html><head><title>物料条码打印</title></head><style>@page{margin:0px 10px;size: auto} td{text-align: center; border: solid 1px #000000; height: 20px;}.a4{page-break-before: auto;" +
|
||
' page-break-after: always;}</style><body style="padding: 0px;margin: 0px">'
|
||
);
|
||
newWin.document.write(tableToPrint.outerHTML); //将表格添加进新的窗口
|
||
newWin.document.write("</body></html>");
|
||
newWin.focus(); //在IE浏览器中使用必须添加这一句
|
||
newWin.print(); //打印
|
||
newWin.close(); //关闭窗口
|
||
}, 1000);
|
||
});
|
||
});
|
||
});
|
||
},
|
||
|
||
showMoreChange() {
|
||
if (!this.showMore) this.tableHeight = this.tableHeight - 70;
|
||
else {
|
||
this.tableHeight = this.tableHeight + 70;
|
||
}
|
||
this.$nextTick(() => {
|
||
this.showMore = !this.showMore;
|
||
});
|
||
},
|
||
getList() {
|
||
this.loading = true;
|
||
const params = {
|
||
pageSize: this.pageSize,
|
||
pageNo: this.currentPage,
|
||
boxBar: this.propsThis.queryParams.boxBar,
|
||
dictBilltype: this.propsThis.queryParams.dictBilltype,
|
||
dictStatus: this.propsThis.queryParams.dictStatus,
|
||
locationCodes: this.propsThis.queryParams.locationCode,
|
||
materialBar: this.propsThis.queryParams.materialBar,
|
||
materialCode: this.propsThis.queryParams.materialCode,
|
||
materialName: this.propsThis.queryParams.materialName,
|
||
srcBillNumber: this.propsThis.queryParams.srcBillNumber,
|
||
supplierName: this.propsThis.queryParams.supplierName,
|
||
batchNumber: this.propsThis.queryParams.batchNumber,
|
||
warehouseCodes: this.propsThis.queryParams.warehouseCode,
|
||
createdDt: this.propsThis.queryParams.createdDt,
|
||
createdDt2: this.propsThis.queryParams.createdDt2,
|
||
dictFreeze: this.propsThis.queryParams.dictFreeze,
|
||
isFil: this.propsThis.queryParams.isFil,
|
||
};
|
||
this.$stock.getList(params).then((data) => {
|
||
this.tableData = data.data.data.data;
|
||
|
||
this.tableData.forEach((value) => {
|
||
value.dictBillTypeShow = this.$dictType.getInputBillType(
|
||
value.dictBilltype
|
||
);
|
||
value.dictFreezeShow = this.$dictType.getFreezeType(value.dictFreeze);
|
||
|
||
if (value.isFil === "Y") {
|
||
value.filShow = "是";
|
||
} else {
|
||
value.filShow = "否";
|
||
}
|
||
if (value.dictStatus == 1) {
|
||
value.dictStatusShow = "合格";
|
||
} else {
|
||
value.dictStatusShow = "不合格";
|
||
}
|
||
});
|
||
console.log(this.tableData, "拿到数据");
|
||
this.total = data.data.data.recordsTotal;
|
||
this.loading = false;
|
||
});
|
||
},
|
||
tableRowClassName({ row, rowIndex }) {
|
||
console.log(row.dictStatus, "shifou1");
|
||
if (row.dictStatus === 2) {
|
||
return "pink1";
|
||
}
|
||
return "";
|
||
},
|
||
getListJump(queryParams) {
|
||
this.loading = true;
|
||
const params = {
|
||
pageSize: 1000,
|
||
materialCode: queryParams.materialCode,
|
||
warehouseCodes: queryParams.warehouseCode,
|
||
batchNo: queryParams.batchNo,
|
||
};
|
||
this.$stock.getList(params).then((data) => {
|
||
this.tableData = data.data.data.data;
|
||
this.tableData.forEach((value) => {
|
||
value.dictBillTypeShow = this.$dictType.getInputBillType(
|
||
value.dictBilltype
|
||
);
|
||
value.dictFreezeShow = this.$dictType.getFreezeType(value.dictFreeze);
|
||
if (value.isFil === "Y") {
|
||
value.filShow = "是";
|
||
} else {
|
||
value.filShow = "否";
|
||
}
|
||
});
|
||
this.total = data.data.data.recordsTotal;
|
||
this.loading = false;
|
||
});
|
||
},
|
||
|
||
initPopover() {
|
||
const params = {
|
||
tableName: "list",
|
||
};
|
||
this.$headerConfig.getRealList(params).then((data) => {
|
||
console.log("开始输出真正表格");
|
||
let temp = JSON.parse(data.data.data);
|
||
console.log(temp);
|
||
this.realList = temp.headerList;
|
||
console.log(this.realList);
|
||
this.$refs.test.init();
|
||
});
|
||
},
|
||
fathers(data) {
|
||
this.List = data.configure.List;
|
||
data.configure.List.forEach((value) => {
|
||
this.realList.forEach((real) => {
|
||
if (value.tableProp == real.tableProp) {
|
||
value.width = real.width;
|
||
}
|
||
});
|
||
});
|
||
|
||
data.configure.headerList.forEach((value) => {
|
||
this.realList.forEach((real) => {
|
||
if (value.tableProp == real.tableProp) {
|
||
value.width = real.width;
|
||
}
|
||
});
|
||
});
|
||
if (data.configure.headerList.length <= 0) {
|
||
return;
|
||
}
|
||
const params = {
|
||
tableName: "list",
|
||
configure: JSON.stringify(data.configure),
|
||
};
|
||
|
||
this.realList = data.configure.headerList;
|
||
|
||
this.$headerConfig.updateRealList(params).then((value) => {
|
||
console.log(value);
|
||
});
|
||
},
|
||
|
||
handleCurrentChange2(val) {
|
||
// this.currentRow = val;
|
||
console.log(val);
|
||
this.currentPage = val;
|
||
this.getList();
|
||
},
|
||
handleSizeChange(val) {
|
||
this.pageSize = val;
|
||
this.getList();
|
||
},
|
||
handleCurrentChange(val) {
|
||
this.buttonEnable = false;
|
||
this.currentRow = val;
|
||
},
|
||
Query() {
|
||
this.currentPage = 1;
|
||
this.getList();
|
||
},
|
||
resetQuery() {
|
||
this.queryParams = {};
|
||
},
|
||
|
||
// 导出
|
||
handleExport() {
|
||
this.handleExportLoading = true;
|
||
const params = {
|
||
pageSize: this.pageSize,
|
||
pageNo: this.currentPage,
|
||
boxBar: this.propsThis.queryParams.boxBar,
|
||
dictBilltype: this.propsThis.queryParams.dictBilltype,
|
||
dictStatus: this.propsThis.queryParams.dictStatus,
|
||
locationCodes: this.propsThis.queryParams.locationCode,
|
||
materialBar: this.propsThis.queryParams.materialBar,
|
||
materialCode: this.propsThis.queryParams.materialCode,
|
||
materialName: this.propsThis.queryParams.materialName,
|
||
srcBillNumber: this.propsThis.queryParams.srcBillNumber,
|
||
supplierName: this.propsThis.queryParams.supplierName,
|
||
batchNumber: this.propsThis.queryParams.batchNumber,
|
||
warehouseCodes: this.propsThis.queryParams.warehouseCode,
|
||
createdDt: this.propsThis.queryParams.createdDt,
|
||
createdDt2: this.propsThis.queryParams.createdDt2,
|
||
dictFreeze: this.propsThis.queryParams.dictFreeze,
|
||
isFil: this.propsThis.queryParams.isFil,
|
||
};
|
||
console.log(params);
|
||
this.$stock.exportExcel(params).then((data) => {
|
||
this.handleExportLoading = false;
|
||
this.download(data.data);
|
||
});
|
||
},
|
||
// 下载导出文件
|
||
download(data) {
|
||
// 文件导出
|
||
let url = window.URL.createObjectURL(new Blob([data]));
|
||
let link = document.createElement("a");
|
||
link.style.display = "none";
|
||
link.href = url;
|
||
let fileName = "库存";
|
||
let time = new Date();
|
||
fileName +=
|
||
"_" +
|
||
time.getFullYear() +
|
||
(time.getMonth() < 11
|
||
? "0" + (time.getMonth() + 1)
|
||
: time.getMonth() + 1) +
|
||
(time.getDate() < 10 ? "0" + time.getDate() : time.getDate());
|
||
fileName += "_" + time.getHours() + time.getMinutes() + time.getSeconds();
|
||
fileName += ".xlsx";
|
||
link.setAttribute("download", fileName);
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
link.remove();
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
>>> .el-form-item {
|
||
margin-bottom: 10px;
|
||
}
|
||
.el-divider {
|
||
margin-top: 0px;
|
||
margin-bottom: 5px;
|
||
}
|
||
>>> .el-table__row.pink1 {
|
||
background: pink;
|
||
}
|
||
</style>
|