|
|
<template> <div class="customer-css" > <!-- 查询时间和产品 --> <el-form :inline="true" label-position="top" label-width="100px" style="margin-top: 0px;" > <el-row> <el-col :span="24" style=""> <el-form-item :label="'BU:'"> <el-input v-model="searchData.buNo" style="width: 130px"></el-input> </el-form-item> <el-form-item :label="'销售出库单号:'"> <el-input v-model="searchData.orderNo" style="width: 130px"></el-input> </el-form-item> <el-form-item :label="'客户编号:'"> <el-input v-model="searchData.customerId" style="width: 130px"></el-input> </el-form-item> <el-form-item :label="'客户名称:'"> <el-input v-model="searchData.customerName" style="width: 130px"></el-input> </el-form-item> <el-form-item :label="'单据状态'"> <el-select multiple collapse-tags v-model="searchData.orderStatusList" clearable style="width: 160px"> <el-option label="待出库" value="待出库"></el-option> <el-option label="已出库" value="已出库"></el-option> </el-select> </el-form-item> <el-form-item :label="' '" > <el-button class="customer-bun-min" type="primary" @click="getMainData" style="">查询</el-button> <el-button @click="exportExcel()" type="primary" style="margin-left: 2px">{{'导出'}}</el-button>
</el-form-item> </el-col> </el-row> </el-form>
<el-table :height="height" :data="mainDataList" border ref="mainTable" highlight-current-row @row-click="changeData" v-loading="dataListLoading" style="margin-top: 0px; width: 100%;"> <!-- <el-table-column--> <!-- fixed="left"--> <!-- header-align="center"--> <!-- align="center"--> <!-- width="220"--> <!-- :label="'操作'">--> <!-- <template slot-scope="scope">--> <!-- </template>--> <!-- </el-table-column>--> <el-table-column v-for="(item,index) in columnArray1" :key="index" :sortable="item.columnSortable" :prop="item.columnProp" :header-align="item.headerAlign" :show-overflow-tooltip="item.showOverflowTooltip" :align="item.align" :fixed="item.fixed==''?false:item.fixed" :min-width="item.columnWidth" :label="item.columnLabel"> <template slot-scope="scope"> <span v-if="!item.columnHidden"> {{scope.row[item.columnProp]}}</span> <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]" style="width: 100px; height: 80px"/></span> </template> </el-table-column> </el-table> <!-- 分页插件 --> <el-pagination style="margin-top: 0px" @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[20, 50, 100, 200, 500]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper"> </el-pagination>
<el-tabs v-model="activeName" style="margin-top: 0px; width: 99%;" @tab-click="tabClick" class="customer-tab" type="border-card"> <el-tab-pane label="出库单明细" name="outboundDetail"> <el-table :data="detailList" :height="height - 20" border style="width: 100%;"> <el-table-column v-for="(item,index) in columnDetailList" :key="index" :sortable="item.columnSortable" :prop="item.columnProp" :header-align="item.headerAlign" :show-overflow-tooltip="item.showOverflowTooltip" :align="item.align" :fixed="item.fixed===''?false:item.fixed" :min-width="item.columnWidth" :label="item.columnLabel"> <template slot-scope="scope"> <span v-if="!item.columnHidden">{{scope.row[item.columnProp]}}</span> <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]" style="width: 100px; height: 80px"/></span> </template> </el-table-column> </el-table> </el-tab-pane> <el-tab-pane label="装箱清单" name="boxing" style=""> <boxing ref="boxing"></boxing> </el-tab-pane> <el-tab-pane label="已扫描卷" name="rollDetail"> <el-table :data="rollList" :height="height - 20" border style="width: 100%;"> <el-table-column prop="orderId" header-align="center" align="center" min-width="60" label="序号"> </el-table-column> <el-table-column prop="boxNo" header-align="center" align="center" min-width="100" label="箱号"> </el-table-column> <el-table-column prop="finalRollNo" header-align="center" align="center" min-width="100" label="卷号"> </el-table-column> <el-table-column prop="partNo" header-align="center" align="left" min-width="100" label="物料编码"> </el-table-column> <el-table-column prop="rollQty" header-align="center" align="right" min-width="100" label="数量"> </el-table-column> <el-table-column prop="receivedDate" header-align="center" align="center" min-width="100" label="装箱日期"> </el-table-column> <el-table-column prop="receivedBy" header-align="center" align="left" min-width="100" label="装箱人"> </el-table-column> <el-table-column prop="batchNo" header-align="center" align="left" min-width="100" label="合约号"> </el-table-column> <el-table-column prop="wareHouseID" header-align="center" align="left" min-width="100" label="仓库"> </el-table-column> <el-table-column prop="locationId" header-align="center" align="left" min-width="100" label="库位"> </el-table-column> </el-table> </el-tab-pane> </el-tabs>
</div></template>
<script>/*组件*/
import excel from "@/utils/excel-util.js";import boxing from "./com_saleBoxManage_boxing.vue"import { getOutboundDetailWithRoll, searchOutboundNotification} from '../../../api/qc/outbound_notification'import {searchRollForOrderNo} from '../../../api/boxManage/boxManage'
export default { data() { return { functionId: this.$route.meta.menuId, height: 200, currentRow: {}, searchData:{ orderNo:'', customerId:'', orderType:'销售出库', orderStatus: '', orderStatusList: ['待出库'], buNo:'', customerName:'', site:this.$store.state.user.site, userName:this.$store.state.user.name, page: 1, limit: 10, }, pageIndex: 1, pageSize: 50, totalPage: 0, tagNo:'', rollList:[], mainDataList:[], detailList:[], dataListLoading: false, activeName: 'outboundDetail', columnArray1: [ { userId: this.$store.state.user.name, functionId: this.functionId, serialNumber: '750001Table1BU', tableId: "750001Table1", tableName: "销售发货清单", columnProp: "buNo", headerAlign: "center", align: "left", columnLabel: "BU", columnWidth: '60', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: false }, { userId: this.$store.state.user.name, functionId: this.functionId, serialNumber: '750001Table1OrderNo', tableId: "750001Table1", tableName: "销售发货清单", columnProp: "orderNo", headerAlign: "center", align: "left", columnLabel: "销售出库单号", columnWidth: '100', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: false }, { userId: this.$store.state.user.name, functionId: this.functionId, serialNumber: '750001Table1OrderStatus', tableId: "750001Table1", tableName: "销售发货清单", columnProp: "orderStatus", headerAlign: "center", align: "left", columnLabel: "通知单状态", columnWidth: '80', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: false }, { userId: this.$store.state.user.name, functionId: this.functionId, serialNumber: '750001Table1CustomerId', tableId: "750001Table1", tableName: "销售发货清单", columnProp: "customerId", headerAlign: "center", align: "left", columnLabel: "客户编号", columnWidth: '100', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: false }, { userId: this.$store.state.user.name, functionId: this.functionId, serialNumber: '750001Table1CustomerName', tableId: "750001Table1", tableName: "销售发货清单", columnProp: "customerName", headerAlign: "center", align: "left", columnLabel: "客户编号", columnWidth: '240', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: false }, { userId: this.$store.state.user.name, functionId: this.functionId, serialNumber: '750001Table1RequiredOutboundDate', tableId: "750001Table1", tableName: "销售发货清单", columnProp: "requiredOutboundDate", headerAlign: "center", align: "left", columnLabel: "要求发货日期", columnWidth: '120', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: false }, ], columnDetailList: [ { columnProp: 'relatedOrderNo', headerAlign: "center", align: "left", columnLabel: '销售订单号', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 100, }, { columnProp: 'relatedOrderLineNo', headerAlign: "center", align: "right", columnLabel: '销售订单行号', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 100, }, { columnProp: 'partNo', headerAlign: "center", align: "left", columnLabel: '物料编码', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 120, }, { columnProp: 'partDesc', headerAlign: "center", align: "left", columnLabel: '物料名称', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 200, }, { columnProp: 'outBatchNo', headerAlign: "center", align: "left", columnLabel: '合约号', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 100, }, { columnProp: 'orderQty', headerAlign: "center", align: "right", columnLabel: '销售订单数量', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 100, }, { columnProp: 'requiredQty', headerAlign: "center", align: "right", columnLabel: '要求发货数量', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 100, }, { columnProp: 'rollQty', headerAlign: "center", align: "right", columnLabel: '已扫描数量', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 100, }, { columnProp: 'unScanQty', headerAlign: "center", align: "right", columnLabel: '未扫描数量', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 100, }, { columnProp: 'unit', headerAlign: "center", align: "left", columnLabel: '单位', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 100, }, ], exportName: '销售出库单'+this.dayjs().format('YYYYMMDDHHmmss'), } }, /*组件*/ components: { boxing, },
mounted() { this.$nextTick(() => { this.height = ( window.innerHeight - 220)/2; }) }, methods: {
getMainData(){ this.searchData.limit = this.pageSize this.searchData.page = this.pageIndex searchOutboundNotification(this.searchData).then(({data}) => { if (data.code === 0) { this.mainDataList = data.page.list this.pageIndex = data.page.currPage this.pageSize = data.page.pageSize this.totalPage = data.page.totalCount //判断是否全部存在数据
if (this.totalPage > 0) { //设置选中行
this.$refs.mainTable.setCurrentRow(this.mainDataList[0]) this.changeData(this.mainDataList[0])
}else { this.changeData(null) } } this.dataListLoading = false }) }, tabClick(tab, event){ this.refreshCurrentTabTable() }, // 每页数
sizeChangeHandle (val) { this.pageSize = val this.pageIndex = 1 this.getMainData() },
// 当前页
currentChangeHandle (val) { this.pageIndex = val this.getMainData() }, changeData(row){ this.currentRow=JSON.parse(JSON.stringify(row)) this.refreshCurrentTabTable (); }, refreshCurrentTabTable(){ if(this.currentRow===''||this.currentRow===null){ this.currentRow={site:'',supplierNo:''} } if(this.activeName==='boxing'){ this.refreshBoxingTable(); } if(this.activeName==='outboundDetail'){ this.refreshDetailTable(); } if(this.activeName==='rollDetail'){ this.refreshRollsTable(); } }, async exportExcel() { this.searchData.limit = -1 this.searchData.page = 1 excel.exportTable({ url: "/outbound/searchOutboundNotification", columnMapping: this.columnArray1,//可以直接用table，不需要的列就剔除
mergeSetting: [],//需要合并的列
params: this.searchData, fileName: this.exportName+".xlsx", rowFetcher: res => res.data, columnFormatter: [], dropColumns: [],//需要剔除的列，例如dropColumns: ["netWeight"]，即剔除净重列
}); }, refreshBoxingTable(){ let inData={ site: this.currentRow.site, buNo: this.currentRow.buNo, orderNo: this.currentRow.orderNo, boxType: this.currentRow.orderType, height:Number(this.height)-25 } this.$refs.boxing.init(inData) }, refreshDetailTable(){ let templateData = { site: this.currentRow.site, buNo: this.currentRow.buNo, orderNo: this.currentRow.orderNo, } getOutboundDetailWithRoll(templateData).then(({data}) => { this.detailList = data.rows }) }, refreshRollsTable(){ let templateData = { site: this.currentRow.site, buNo: this.currentRow.buNo, orderNo: this.currentRow.orderNo, } searchRollForOrderNo(templateData).then(({data}) => { this.rollList = data.rows }) }, }, created() { //查询报表的类型
this.getMainData(); },
}</script>
<!--当前页面的标签样式--><style scoped lang="scss">
/deep/ .customer-tab .el-tabs__content { padding: 5px !important;}
</style>
|
