You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

764 lines
22 KiB

<!--总成模块信息管理页-->
<template>
<div class="cr-body-content">
<div ref="box">
<flexbox class="content-header">
<el-form
:model="listQuery"
ref="queryForm"
v-show="showSearch"
:inline="true"
>
<el-form-item>
<el-col :span="12">
<el-form-item prop="billNum" label="装箱单号">
<el-input
v-model="listQuery.billNum"
placeholder=""
clearable
size="small"
style="width: 140px"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="partType" label="零件类型">
<el-input
v-model="listQuery.partType"
placeholder=""
clearable
size="small"
style="width: 140px"
/>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="大众顺序号">
<el-col :span="11">
<el-form-item prop="beginHostSN">
<el-input
v-model="listQuery.beginHostSN"
placeholder=""
clearable
size="small"
style="width: 170px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-form-item prop="endHostSN">
<el-input
v-model="listQuery.endHostSN"
placeholder=""
clearable
size="small"
style="width: 170px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="底盘号码">
<el-col :span="11">
<el-form-item prop="beginVin">
<el-input
v-model="listQuery.beginVin"
placeholder=""
clearable
size="small"
style="width: 140px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-form-item prop="endVin">
<el-input
v-model="listQuery.endVin"
placeholder=""
clearable
size="small"
style="width: 140px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="打印日期">
<el-date-picker
v-model="PrintTimeValue"
size="small"
style="width: 380px"
value-format="yyyy-MM-dd HH:mm:ss"
type="datetimerange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="['00:00:00', '23:59:59']"
></el-date-picker>
</el-form-item>
<el-form-item style="margin-top: -20px">
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleFilter"
>搜索</el-button
>
<el-button
icon="el-icon-refresh"
size="mini"
@click="resetQuery('queryForm')"
>重置</el-button
>
<el-button
class="filter-item"
size="mini"
type="success"
icon="el-icon-s-shop"
@click="handleUpdate()"
>重打(只支持单选)</el-button
>
<el-button
class="filter-item"
type="danger"
icon="el-icon-delete"
size="mini"
@click="handleDelete()"
>作废(支持批量)</el-button
>
</el-form-item>
</el-form>
</flexbox>
<el-table
ref="multipleTable"
v-loading="listLoading"
element-loading-text="拼命加载中..."
element-loading-spinner="el-icon-loading"
class="cr-table"
:data="list"
:height="tableHeightMB"
:cell-style="cellStyle"
:header-cell-style="headerRowStyle"
size="small"
stripe
border
highlight-current-row
style="width: 100%; margin-top: -25px"
@selection-change="handleSelectionChange"
@row-click="handleRowClick"
:row-key="getRowKeys"
:expand-row-keys="expands"
@expand-change="exChange"
>
<el-table-column type="selection" width="44px"></el-table-column>
<el-table-column type="expand" prop="details" label="详表">
<template slot-scope="scope">
<el-table :data="scope.row.details">
<el-table-column prop="knr" label="KNR订单号"></el-table-column>
<el-table-column prop="vin" label="底牌号"></el-table-column>
<el-table-column
prop="hostSN"
label="大众顺序号"
></el-table-column>
<el-table-column
prop="vehicleModel_DoorPlankCode"
label="车型门板代码"
></el-table-column>
<el-table-column
prop="topBoxPositionNum"
label="上箱位号"
></el-table-column>
<el-table-column
prop="topSAPMaterialNum"
label="上箱位 SAP物料号"
></el-table-column>
<el-table-column
prop="topMaterialDescription"
label="上箱位 物料描述"
></el-table-column>
<el-table-column
prop="belowBoxPositionNum"
label="下箱位号"
></el-table-column>
<el-table-column
prop="belowSAPMaterialNum"
label="下箱位 SAP物料号"
></el-table-column>
<el-table-column
prop="belowMaterialDescription "
label="下箱位 物料描述"
></el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column
v-for="(item, index) in getDefaultField"
:key="index"
:prop="item.prop"
:label="item.label"
:min-width="item.width"
:formatter="fieldFormatter"
sortable="custom"
show-overflow-tooltip
:gutter="0"
>
<template slot="header" slot-scope="scope">
{{ scope.column.label }}
</template>
</el-table-column>
</el-table>
<div class="table-footer">
<!-- 分页控件 style="margin-top: -25px;margin-bottom:-25px;float:right;"-->
<pagination
v-show="totalCount > 0"
:total="totalCount"
style="margin-bottom: -5px; float: right"
:page.sync="page"
:limit.sync="listQuery.MaxResultCount"
@pagination="getList"
/>
</div>
</div>
</div>
</template>
<script>
import Pagination from "@/components/Pagination";
import permission from "@/directive/permission/index.js";
import CRMTableHead from "../../components/CRMTableHead";
import importExcel from "@/components/ImportExcel-vw";
import Lockr from "lockr";
import { mapGetters } from "vuex";
import moment from "moment";
import Detail from "./detail.vue";
import { downloadFile } from "@/utils/crmindex.js";
import qs from "qs";
export default {
name: "M100Online-MB",
components: { Pagination, CRMTableHead, importExcel, Detail },
directives: { permission },
filters: {
IsCustomerSignFilter(status) {
//翻译是否签字
const statusMap = {
true: "",
false: "",
};
return statusMap[status];
},
},
props: {
customerInfosMB: {
type: Array,
default: () => {
return [];
},
},
},
data() {
const validVersion = (rule, value, callback) => {
let numberReg = /^\d{6}$/;
if (!numberReg.test(value)) {
callback(new Error("只能为6位数字"));
} else {
callback();
}
};
return {
crmType: "M100Online-MB",
getRowKeys: (row) => {
return row.id; //这里看这一行中需要根据哪个属性值是id
},
expands: [], //只展开一行放入当前行id
PrintTimeValue: [],
activeNames: ["1"],
multipleSelection: [],
valueSelect: "",
customerInfos: [],
dialogOptions: [],
versionValue: "",
searchContent: "", // 输入内容
showExcelImport: false,
form: {},
drawer: false,
list: null,
totalCount: 0,
listLoading: true,
customerInfo: {
printType: "",
productLine: "",
},
// 高级搜索
filterObj: {
type: Object,
default: () => {
return {};
},
},
listQuery: {
SkipCount: 0,
MaxResultCount: 15,
billNum: undefined,
partType: undefined,
beginVin: undefined,
endVin: undefined,
beginHostSN: undefined,
endHostSN: undefined,
beginPrintDate: undefined,
endPrintDate: undefined,
},
listPLQuery: {
BillType: 2,
//UserId: this.userinfo.UserId,
},
hostSNQuery: {
productLine: undefined,
},
hostCheckQuery: {
printType: undefined, //0:打印;1:重打;2:补打;
productLine: undefined,
beginHostSN: undefined,
endHostSN: undefined,
beginVin: undefined,
endVin: undefined,
},
hostPrintQuery: {
printType: undefined, //0:打印;1:重打;2:补打;
productLine: undefined,
beginHostSN: undefined,
endHostSN: undefined,
beginVin: undefined,
endVin: undefined,
},
fileQuery: {
dataname: undefined,
},
form: {
details: [],
},
page: 1,
// 显示搜索条件
showSearch: true,
drawer: false,
dialogFormVisible: false,
formTitle: "",
isEdit: false,
formLoading: false,
tableHeight: document.documentElement.clientHeight - 335,
tableHeightMB: document.documentElement.clientHeight - 300,
detailTableHeight: 250,
details: [], //修改子表数据源
PLList: [], //产线下拉
isShowHostSN: false,
isShowVin: false,
isShowState: true,
};
},
mounted() {
this.$nextTick(() => {
var offsetHei = document.documentElement.clientHeight;
//console.log(offsetHei);
let boxH = this.$refs.box.offsetHeight;
this.tableHeight = offsetHei - boxH - 57 - 79; //57为footer高度,79为页面上部标签高度
//this.tableHeight = offsetHei -260
});
},
created() {
this.getList();
},
watch: {
customerInfosMB: {
handler(newVal) {
console.log("门板-接收的父组件的值"+JSON.stringify(newVal))
if (newVal == "" || newVal == "undefined") {
//TODO
} else {
newVal.forEach((element) => {
this.customerInfo.printType = element.PrintType;
this.customerInfo.productLine = element.ProductLine;
});
if (
this.customerInfo.productLine != ""
) {
this.getList();
}
}
},
immediate: true,
},
},
computed: {
getDefaultField() {
var tempsTabs = [];
tempsTabs.push({ label: "装箱单号", prop: "billNum", width: 140 });
tempsTabs.push({ label: "单据顺号", prop: "billSerialNum", width: 120 });
tempsTabs.push({
label: "左或右",
prop: "billLocation",
width: 150,
});
tempsTabs.push({
label: "供应商厂家代码",
prop: "providerCode",
width: 150,
});
tempsTabs.push({
label: "零件类型",
prop: "partType",
width: 180,
});
tempsTabs.push({
label: "器具容量",
prop: "capacity",
width: 150,
});
tempsTabs.push({
label: "打印日期",
prop: "printDate",
width: 180,
});
tempsTabs.push({
label: "打印类型",
prop: "printType",
width: 120,
});
tempsTabs.push({
label: "生产线",
prop: "productLine",
width: 120,
});
tempsTabs.push({
label: "起底盘号",
prop: "beginVin",
width: 160,
});
tempsTabs.push({
label: "止底盘号",
prop: "endVin",
width: 160,
});
return tempsTabs;
},
...mapGetters(["userInfo"]), //获取当前用户信息
},
methods: {
//base64转化成流,dataurl是后台返回的base64
dataURLtoBlob(dataurl) {
var bstr = atob(dataurl.substring(dataurl.indexOf(",") + 1));
var n = bstr.length;
var u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: "application/pdf" });
},
doPrint(val) {
var ordonnance = document.getElementById(val).contentWindow;
setTimeout(() => {
// window.print()
ordonnance.print();
this.pdfLoading = false;
}, 100);
},
printpdf(dataResult) {
//打印功能,dataResult是后台返回的base64
let blob = this.dataURLtoBlob(dataResult);
var date = new Date().getTime();
var ifr = document.createElement("iframe");
ifr.style.frameborder = "no";
ifr.style.display = "none";
ifr.style.pageBreakBefore = "always";
ifr.setAttribute("id", "printPdf" + date);
ifr.setAttribute("name", "printPdf" + date);
ifr.src = window.URL.createObjectURL(blob);
document.body.appendChild(ifr);
this.doPrint("printPdf" + date);
window.URL.revokeObjectURL(ifr.src); // 释放URL 对象
this.dialogFormVisible = false;
},
handleRowClick(row, column, event) {
this.$refs.multipleTable.clearSelection();
this.$refs.multipleTable.toggleRowSelection(row);
},
exChange(row, rowList) {
//this.listLoading = true;
var that = this;
if (rowList.length) {
that.expands = [];
if (row) {
that.expands.push(row.id); // 只展开当前行id
}
} else {
that.expands = [];
}
},
//门板
getList(data) {
this.listLoading = true;
if (data != undefined) {
this.listQuery.SkipCount = (this.page - 1) * data.limit;
} else {
this.listQuery.SkipCount = (this.page - 1) * 15;
}
if (this.listQuery.billNum != "") {
this.listQuery.billNum = this.listQuery.billNum;
}
this.listQuery.partType = this.listQuery.partType;
this.listQuery.beginVin = this.listQuery.beginVin;
this.listQuery.endVin = this.listQuery.endVin;
this.listQuery.beginHostSN = this.listQuery.beginHostSN;
this.listQuery.endHostSN = this.listQuery.endHostSN;
var getdate5 = JSON.stringify(this.PrintTimeValue);
if (getdate5 != "[]") {
this.listQuery.beginPrintDate = this.PrintTimeValue
? this.PrintTimeValue[0] || undefined
: undefined;
this.listQuery.endPrintDate = this.PrintTimeValue
? this.PrintTimeValue[1] || undefined
: undefined;
} else {
this.listQuery.beginPrintDate = undefined;
this.listQuery.endPrintDate = undefined;
}
if (this.customerInfo.productLine != "") {
this.listQuery.ProductLine = this.customerInfo.productLine;
}
console.log(JSON.stringify(this.listQuery));
this.$axios
.posts(
"/api/newjit/MenBanPackingList/MenBanPackingList-List",
this.listQuery
)
.then((response) => {
this.list = response.items;
this.totalCount = response.totalCount;
setTimeout(() => {
//大数据量加载时
this.listLoading = false;
}, 500);
})
.catch(() => {
this.listLoading = false;
});
},
//重新打印-门板
handleUpdate(row) {
this.isEdit = true;
if (this.multipleSelection.length != 1) {
this.$message({
message: "重新打印必须选择单行不能多选",
type: "warning",
});
return;
} else {
//this.fetchData(this.multipleSelection[0].id);
//重新打印方法
let beginVin1 = this.multipleSelection[0].beginVin1;
let endVin1 = this.multipleSelection[0].endVin1;
var params = {
printType: 1,
productLine: this.customerInfo.productLine,
beginVin: beginVin1,
endVin: endVin1,
};
console.log("门板打印-主界面传过来的值" + JSON.stringify(params));
this.$axios
.posts("/api/newjit/bill-m100/print-menban-packing-list", params)
.then((response) => {
//alert(response.status);
const index = this.list.indexOf(row);
if (response.status === false) {
this.$message({
message: response.message,
type: "error",
});
return;
} else {
let dataname = JSON.stringify(response.item);
console.log("门板-调用Handlers/Handler1.ashx?report=menban传的值"+dataname)
this.$axios
.posts(
"/Handlers/Handler1.ashx?report=menban",
qs.stringify(dataname)
)
.then((response) => {
this.printpdf(response); //打印我文件流
});
}
})
.catch(() => {});
}
},
//作废操作,支持批量操作-门板
handleDelete(row) {
//批量删除
var params = [];
let myalert = ""; //声明变量,其变量必须在此声明后使用
if (row) {
//单行
params.push(row.id);
myalert = row.name;
} else {
//多选
this.multipleSelection.forEach((element) => {
let id = element.id;
params.push(id);
});
myalert = "选中项";
}
this.$confirm("是否作废" + myalert + "?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.$axios
.posts("/api/newjit/MenBanPackingList/delete", params)
.then((response) => {
const index = this.list.indexOf(row);
this.$notify({
title: "成功",
message: "作废成功",
type: "success",
duration: 2000,
});
this.getList();
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消操作",
});
});
},
fetchData(id) {
//循环动态
this.$axios
.gets("/api/newjit/assembly-cfg-erp/" + id)
.then((response) => {
this.form = response.item;
//this.details = response.item.details;
//console.log(this.details);
});
},
/** 重置按钮操作 */
resetQuery(refName) {
this.$refs[refName].resetFields();
this.PrintTimeValue = [];
this.handleQuery();
this.getProductLine();
},
/** 搜索按钮操作 */
handleQuery() {
this.listQuery.SkipCount = 1;
//this.getList();
},
selectValue(params) {
//版本下拉选择
this.versionValue = params.value;
this.getList();
},
selectOptionsChange(item) {
this.getList();
},
/** 刷新列表 */
handleHandle(data) {
if (data.type !== "edit") {
this.getList();
}
},
/** 格式化字段 */
fieldFormatter(row, column) {
if (column.property === "billStatus") {
return { 1: "未匹配", 2: "已匹配", 3: "已打印" }[row[column.property]];
}
if (column.property == "printDate" || column.property == "receiveTime") {
var date = row[column.property];
if (date == undefined) {
return "";
}
return moment(date).format("YYYY-MM-DD HH:mm:ss");
}
return row[column.property] || "--";
},
roleFilter(type) {
return projectTypeKeyValue[type];
},
//门板
handleFilter() {
this.page = 1;
this.getList();
},
sortChange(data) {
const { prop, order } = data;
if (!prop || !order) {
this.handleFilter();
return;
}
this.listQuery.Sorting = prop + " " + order;
this.handleFilter();
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
/** 通过回调控制style */
cellStyle({ row, column, rowIndex, columnIndex }) {
if (column.property === "qty") {
return { textAlign: "right" };
} else {
return { textAlign: "left" };
}
},
/** 通过回调控制表头style */
headerRowStyle({ row, column, rowIndex, columnIndex }) {
if (column.property === "qty") {
return { textAlign: "right", background: "#FAFAFA" };
} else {
return { textAlign: "left", background: "#FAFAFA" };
}
},
handleRowClick(row, column, event) {
this.$refs.multipleTable.clearSelection();
this.$refs.multipleTable.toggleRowSelection(row);
},
closeDialog() {},
},
};
</script>
<style lang="scss" scoped>
@import "../../../pg-fis/styles/crmtable.scss";
.divider1 {
margin: 0;
}
.divider2 {
margin: 10px;
margin-bottom: 20px;
width: 95%;
}
.label1 {
margin-left: 5px;
margin-right: 5px;
}
</style>