|
|
<template> <div class="mod-config yzz"> <!-- 查询条件 - rqrq --> <el-form label-position="top" style="margin-top: 1px; margin-left: 0px;"> <el-form :inline="true" label-position="top" style="margin-top: 0px"> <el-form-item label="工厂"> <el-input v-model="searchData.site" style="width: 100px" disabled></el-input> </el-form-item> <el-form-item label="领料单号"> <el-input v-model="searchData.notifyNo" style="width: 140px" clearable></el-input> </el-form-item> <el-form-item label="订单号"> <el-input v-model="searchData.soorderNo" style="width: 140px" clearable></el-input> </el-form-item> <el-form-item label="订单类型"> <el-select v-model="searchData.orderType" placeholder="请选择" style="width: 120px"> <el-option label="全部" value=""></el-option> <el-option label="shoporder" value="shoporder"></el-option> <el-option label="shipment" value="shipment"></el-option> <el-option label="slittingorder" value="slittingorder"></el-option> </el-select> </el-form-item> <el-form-item label="推送WCS"> <el-select v-model="searchData.pushWmsFlag" placeholder="请选择" style="width: 100px"> <el-option label="全部" value=""></el-option> <el-option label="是" value="Y"></el-option> <el-option label="否" value="N"></el-option> </el-select> </el-form-item> <el-form-item label="立库取出"> <el-select v-model="searchData.transportFlag" placeholder="请选择" style="width: 100px"> <el-option label="全部" value=""></el-option> <el-option label="是" value="Y"></el-option> <el-option label="否" value="N"></el-option> </el-select> </el-form-item> <el-form-item :label="' '"> <el-button type="primary" @click="searchTable()">查询</el-button> </el-form-item> </el-form> </el-form>
<!-- 主表 - 申请单订单列表 - rqrq --> <el-table :data="dataList" @row-click="changeData" :height="height" border highlight-current-row ref="mainTable" v-loading="dataListLoading" style="width: 100%;"> <el-table-column v-for="(item,index) in columnList1" :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"> <!-- 推送WCS特殊显示 - rqrq --> <span v-if="item.columnProp === 'pushWmsFlag'" :style="{color: scope.row.pushWmsFlag === 'Y' ? '#67C23A' : '#909399'}"> {{ scope.row.pushWmsFlag === 'Y' ? '是' : '否' }} </span> <!-- 立库取出特殊显示 - rqrq --> <span v-else-if="item.columnProp === 'transportFlag'" :style="{color: scope.row.transportFlag === 'Y' ? '#67C23A' : '#909399'}"> {{ scope.row.transportFlag === 'Y' ? '是' : '否' }} </span> <!-- 订单类型特殊显示（中文）- rqrq --> <span v-else-if="item.columnProp === 'orderType'" :style="{color: getOrderTypeColor(scope.row.orderType), fontWeight: 'bold'}"> {{ getOrderTypeText(scope.row.orderType) }} </span> <!-- 普通列显示 --> <span v-else-if="!item.columnHidden">{{ scope.row[item.columnProp] }}</span> </template> </el-table-column> </el-table>
<!-- 分页 - rqrq --> <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[20, 50, 100, 1000]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper"> </el-pagination>
<!-- 明细表 - 预留标签清单 - rqrq --> <el-tabs style="font-size: 12px;min-height: 200px;margin-top:10px" class="customer-tab" v-model="activeName" type="border-card"> <el-tab-pane label="预留标签清单" name="labelDetail"> <el-table :data="detailList" :height="detailHeight" border v-loading="detailLoading" style="width: 100%;"> <el-table-column v-for="(item,index) in columnList2" :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"> <!-- 立库取出特殊显示 - rqrq --> <span v-if="item.columnProp === 'outWcsFlag'" :style="{color: scope.row.outWcsFlag === 'Y' ? '#67C23A' : '#909399'}"> {{ scope.row.outWcsFlag === 'Y' ? '是' : '否' }} </span> <!-- 发料标志特殊显示 - rqrq --> <span v-else-if="item.columnProp === 'issureFlag'" :style="{color: scope.row.issureFlag === 'Y' ? '#67C23A' : '#909399'}"> {{ scope.row.issureFlag === 'Y' ? '是' : '否' }} </span> <!-- 订单类型特殊显示（中文）- rqrq --> <span v-else-if="item.columnProp === 'orderType'" :style="{color: getOrderTypeColor(scope.row.orderType), fontWeight: 'bold'}"> {{ getOrderTypeText(scope.row.orderType) }} </span> <!-- 普通列显示 --> <span v-else-if="!item.columnHidden">{{ scope.row[item.columnProp] }}</span> </template> </el-table-column> </el-table> </el-tab-pane> </el-tabs> </div></template>
<script>import { searchNotifyOrderList, searchMaterialListDetail} from '@/api/automatedWarehouse/notifyDetailQuery.js'
export default { name: 'notifyDetailQuery', data() { return { height: 200, detailHeight: 200, activeName: 'labelDetail', dataListLoading: false, detailLoading: false, dataList: [], detailList: [], currentRow: null, pageIndex: 1, pageSize: 50, totalPage: 0, searchData: { page: 1, limit: 50, site: this.$store.state.user.site, notifyNo: '', soorderNo: '', orderType: '', pushWmsFlag: '', transportFlag: '' }, // 主表列配置 - rqrq
columnList1: [ { userId: this.$store.state.user.name, functionId: 801001, serialNumber: '801001Table1NotifyNo', tableId: '801001Table1', tableName: '申请单订单列表', columnProp: 'notifyNo', headerAlign: 'center', align: 'left', columnLabel: '领料单号', columnHidden: false, columnImage: false, columnSortable: true, sortLv: 0, status: true, fixed: '', columnWidth: 140, showOverflowTooltip: true }, { userId: this.$store.state.user.name, functionId: 801001, serialNumber: '801001Table1ItemNo', tableId: '801001Table1', tableName: '申请单订单列表', columnProp: 'itemNo', headerAlign: 'center', align: 'right', columnLabel: '序号', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 60, showOverflowTooltip: true }, { userId: this.$store.state.user.name, functionId: 801001, serialNumber: '801001Table1SoorderNo', tableId: '801001Table1', tableName: '申请单订单列表', columnProp: 'soorderNo', headerAlign: 'center', align: 'left', columnLabel: '订单号', columnHidden: false, columnImage: false, columnSortable: true, sortLv: 0, status: true, fixed: '', columnWidth: 140, showOverflowTooltip: true }, { userId: this.$store.state.user.name, functionId: 801001, serialNumber: '801001Table1OrderType', tableId: '801001Table1', tableName: '申请单订单列表', columnProp: 'orderType', headerAlign: 'center', align: 'center', columnLabel: '订单类型', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 100, showOverflowTooltip: true }, { userId: this.$store.state.user.name, functionId: 801001, serialNumber: '801001Table1FgPartNo', tableId: '801001Table1', tableName: '申请单订单列表', columnProp: 'fgPartNo', headerAlign: 'center', align: 'left', columnLabel: '工单物料', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 100, showOverflowTooltip: true }, { userId: this.$store.state.user.name, functionId: 801001, serialNumber: '801001Table1ReleaseNo', tableId: '801001Table1', tableName: '申请单订单列表', columnProp: 'releaseNo', headerAlign: 'center', align: 'left', columnLabel: '发布号', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 80, showOverflowTooltip: true }, { userId: this.$store.state.user.name, functionId: 801001, serialNumber: '801001Table1SequenceNo', tableId: '801001Table1', tableName: '申请单订单列表', columnProp: 'sequenceNo', headerAlign: 'center', align: 'left', columnLabel: '序号', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 80, showOverflowTooltip: true }, { userId: this.$store.state.user.name, functionId: 801001, serialNumber: '801001Table1NeedDate', tableId: '801001Table1', tableName: '申请单订单列表', columnProp: 'needDate', headerAlign: 'center', align: 'center', columnLabel: '要求发料时间', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 130, showOverflowTooltip: true }, { userId: this.$store.state.user.name, functionId: 801001, serialNumber: '801001Table1LocationNo', tableId: '801001Table1', tableName: '申请单订单列表', columnProp: 'locationNo', headerAlign: 'center', align: 'left', columnLabel: '配送站点', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 100, showOverflowTooltip: true }, { userId: this.$store.state.user.name, functionId: 801001, serialNumber: '801001Table1AreaDesc', tableId: '801001Table1', tableName: '申请单订单列表', columnProp: 'areaDesc', headerAlign: 'center', align: 'left', columnLabel: '配送区域', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 100, showOverflowTooltip: true }, { userId: this.$store.state.user.name, functionId: 801001, serialNumber: '801001Table1PushWmsFlag', tableId: '801001Table1', tableName: '申请单订单列表', columnProp: 'pushWmsFlag', headerAlign: 'center', align: 'center', columnLabel: '推送WCS', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 80, showOverflowTooltip: true }, { userId: this.$store.state.user.name, functionId: 801001, serialNumber: '801001Table1TransportFlag', tableId: '801001Table1', tableName: '申请单订单列表', columnProp: 'transportFlag', headerAlign: 'center', align: 'center', columnLabel: '立库取出', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 80, showOverflowTooltip: true } ], // 明细表列配置 - rqrq
columnList2: [ { userId: this.$store.state.user.name, functionId: 801001, serialNumber: '801001Table2ItemNo', tableId: '801001Table2', tableName: '预留标签清单表', columnProp: 'itemNo', headerAlign: 'center', align: 'right', columnLabel: '订单序号', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 80, showOverflowTooltip: true }, { userId: this.$store.state.user.name, functionId: 801001, serialNumber: '801001Table2BomItemNo', tableId: '801001Table2', tableName: '预留标签清单表', columnProp: 'bomItemNo', headerAlign: 'center', align: 'right', columnLabel: '订单物料行号', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 100, showOverflowTooltip: true }, { userId: this.$store.state.user.name, functionId: 801001, serialNumber: '801001Table2ComponentPartNo', tableId: '801001Table2', tableName: '预留标签清单表', columnProp: 'componentPartNo', headerAlign: 'center', align: 'left', columnLabel: '物料号', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 120, showOverflowTooltip: true }, { userId: this.$store.state.user.name, functionId: 801001, serialNumber: '801001Table2SerialNo', tableId: '801001Table2', tableName: '预留标签清单表', columnProp: 'serialNo', headerAlign: 'center', align: 'left', columnLabel: '标签号', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 150, showOverflowTooltip: true }, { userId: this.$store.state.user.name, functionId: 801001, serialNumber: '801001Table2TaskRef', tableId: '801001Table2', tableName: '预留标签清单表', columnProp: 'taskRef', headerAlign: 'center', align: 'left', columnLabel: '立库任务号', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 120, showOverflowTooltip: true }, { userId: this.$store.state.user.name, functionId: 801001, serialNumber: '801001Table2TaskItem', tableId: '801001Table2', tableName: '预留标签清单表', columnProp: 'taskItem', headerAlign: 'center', align: 'right', columnLabel: '立库任务行号', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 100, showOverflowTooltip: true }, { userId: this.$store.state.user.name, functionId: 801001, serialNumber: '801001Table2TaskSeq', tableId: '801001Table2', tableName: '预留标签清单表', columnProp: 'taskSeq', headerAlign: 'center', align: 'right', columnLabel: '任务序号', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 80, showOverflowTooltip: true }, { userId: this.$store.state.user.name, functionId: 801001, serialNumber: '801001Table2OrderType', tableId: '801001Table2', tableName: '预留标签清单表', columnProp: 'orderType', headerAlign: 'center', align: 'center', columnLabel: '订单类型', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 100, showOverflowTooltip: true }, { userId: this.$store.state.user.name, functionId: 801001, serialNumber: '801001Table2OutWcsFlag', tableId: '801001Table2', tableName: '预留标签清单表', columnProp: 'outWcsFlag', headerAlign: 'center', align: 'center', columnLabel: '立库取出', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 80, showOverflowTooltip: true }, ] } }, mounted() { // 计算表格高度 - rqrq
this.height = (window.innerHeight - 280) / 2 this.detailHeight = (window.innerHeight - 280) / 2 }, methods: { // 获取订单类型颜色 - rqrq
getOrderTypeColor(orderType) { switch (orderType) { case 'shoporder': return '#409EFF' // 蓝色
case 'shipment': return '#67C23A' // 绿色
case 'slittingorder': return '#E6A23C' // 橙色
default: return '#909399' // 灰色
} }, // 获取订单类型中文文本 - rqrq
getOrderTypeText(orderType) { switch (orderType) { case 'shoporder': return '生产订单' case 'shipment': return '销售发货' case 'slittingorder': return '分切订单' default: return orderType || '-' } }, // 查询主表数据 - rqrq
searchTable() { this.dataListLoading = true this.searchData.page = this.pageIndex this.searchData.limit = this.pageSize searchNotifyOrderList(this.searchData).then(({ data }) => { if (data && data.code === 0) { this.dataList = data.page.list this.totalPage = data.page.totalCount } else { this.dataList = [] this.totalPage = 0 } }).catch(() => { this.$message.error('查询失败') }).finally(() => { this.dataListLoading = false }) }, // 主表行点击事件 - rqrq
changeData(row) { this.currentRow = JSON.parse(JSON.stringify(row)) this.getDetailList() }, // 查询明细数据 - rqrq
getDetailList() { if (!this.currentRow) { this.detailList = [] return } this.detailLoading = true const queryData = { site: this.currentRow.site, notifyNo: this.currentRow.notifyNo, itemNo: this.currentRow.itemNo } searchMaterialListDetail(queryData).then(({ data }) => { if (data && data.code === 0) { this.detailList = data.rows || [] } else { this.detailList = [] } }).catch(() => { this.$message.error('查询明细失败') }).finally(() => { this.detailLoading = false }) }, // 分页大小改变 - rqrq
sizeChangeHandle(val) { this.pageSize = val this.pageIndex = 1 this.searchTable() }, // 当前页改变 - rqrq
currentChangeHandle(val) { this.pageIndex = val this.searchTable() } }}</script>
<style scoped>/deep/ .customer-tab .el-tabs__content { padding: 5px !important;}</style>
|
