|
|
<template> <div class="mod-config"> <!-- 查询条件 --> <el-form :inline="true" label-position="top" :model="searchData" @keyup.enter.native="getDataList()"> <el-form-item :label="'物料编码'"> <el-input v-model="searchData.partNo" clearable style="width: 120px"></el-input> </el-form-item> <el-form-item :label="'物料名称'"> <el-input v-model="searchData.partDesc" clearable style="width: 200px"></el-input> </el-form-item> <el-form-item :label="'制造类型'"> <el-select v-model="searchData.bomType" clearable style="width: 120px"> <el-option label="Manufacturing" value="Manufacturing"></el-option> <el-option label="Repair" value="Repair"></el-option> <el-option label="Purchase" value="Purchase"></el-option> <el-option label="Prototype" value="Prototype"></el-option> </el-select> </el-form-item> <el-form-item :label="'BOM版本号'"> <el-input v-model="searchData.engChgLevel" type="number" style="width: 100px"></el-input> </el-form-item> <el-form-item :label="' '"> <el-button :loading="queryLoading" @click="getDataList()">查询</el-button> <download-excel :fields="fields()" :data="exportData" type="xls" :name="exportName" :header="exportHeader" :footer="exportFooter" :fetch="createExportData" :before-generate="startDownload" :before-finish="finishDownload" worksheet="导出信息" class="el-button el-button--primary el-button--medium"> {{ "导出" }} </download-excel> </el-form-item> </el-form>
<!-- bom列表 --> <el-table :height="height" :data="dataList" border ref="bomHeaderTable" @row-click="headerClickRow" @current-change="changeCurrentRow" style="width: 100%"> <el-table-column v-for="(item,index) in columnList" :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="activeTable" style="width: 100%" :style="{height: secondHeight + 'px'}" type="border-card" @tab-click="tabClick" class="customer-tab"> <!-- Graphical Structure页签 --> <el-tab-pane label="Graphical Structure" name="GraphicalStructure"> <el-row> <el-col :style="{width: leftWidth + 'px',height: secondHeight - 48 + 'px'}" class="down-tree"> <el-tree :data="treeData" node-key="nodeKey" :default-expand-all=false @node-click="handleNodeClick" :props="defaultProps"> </el-tree> </el-col> <el-col :style="{width: rightWidth + 'px',height: secondHeight - 50 + 'px'}" style="margin-left: 10px"> <el-form :inline="true" label-position="top"> <el-form-item :label="'物料编码'"> <el-input v-model="alternativeData.partNo" readonly style="width: 120px"></el-input> </el-form-item> <el-form-item :label="'物料名称'"> <el-input v-model="alternativeData.partDesc" readonly style="width: 200px"></el-input> </el-form-item> <el-form-item :label="'BOM版本号'"> <el-input v-model="alternativeData.engChgLevel" readonly style="width: 80px"></el-input> </el-form-item> <el-form-item :label="'制造类型'"> <el-input v-model="alternativeData.bomType" readonly style="width: 120px"></el-input> </el-form-item> </el-form> <el-form :inline="true" label-position="top"> <el-form-item :label="'替代编码'"> <el-input v-model="alternativeData.alternativeNo" readonly style="width: 120px"></el-input> </el-form-item> <el-form-item :label="'替代名称'"> <el-input v-model="alternativeData.alternativeDescription" readonly style="width: 200px"></el-input> </el-form-item> <el-form-item :label="'最小订单数'"> <el-input v-model="alternativeData.minLotQty" readonly style="width: 80px"></el-input> </el-form-item> <el-form-item :label="'状态'"> <el-input v-model="alternativeData.status" readonly style="width: 120px"></el-input> </el-form-item> </el-form> <el-table :height="secondHeight-130" :data="componentPartList" border style="width: 100%"> <el-table-column v-for="(item,index) in componentPartColumnList" :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-col> </el-row> </el-tab-pane> </el-tabs>
<!-- chooseList模态框 --> <ChooseList ref="baseList" @getBaseData="getBaseData"></ChooseList> </div></template>
<script>import { bomSearchHeader, // bom列表查询
getAlternativeTree, // 查询bom替代树形
getComponentPartList, // 查询子物料
} from '@/api/part/bomSearch3.js'import ChooseList from '@/views/modules/common/Chooselist'import dayjs from "dayjs";
export default { // 组件
components: { ChooseList }, // 监听
watch: { searchData: { deep: true, handler: function (newV, oldV) { this.searchData.partNo = this.searchData.partNo.toUpperCase() } } }, // 对象
data () { return { // 导出
exportData: [], exportName: 'BOM多级查询' + this.dayjs().format('YYYYMMDDHHmmss'), exportHeader: ['BOM多级查询'], exportFooter: [], resultList: [], // ======== 行高 ========
height: 200, secondHeight: 200, leftWidth: 300, rightWidth: '', // ======== 分页 ========
pageIndex: 1, pageSize: 50, totalPage: 0, // 条件查询
searchData: { site: this.$store.state.user.site, partNo: '', partDesc: '', bomType: '', engChgLevel: '', page: 1, limit: 10 }, // loading
queryLoading: false, // 初始页签
activeTable: 'GraphicalStructure', // ======== 数据对象 ========
alternativeData: { site: '', partNo: '', partDesc: '', bomType: '', engChgLevel: '', alternativeNo: '', alternativeDescription: '', minLotQty: '', noteText: '', status: '', }, // ======== 选中的当前行数据 ========
headerCurrentRow: {}, defaultProps: { children: "informationList", label: "nodeKey", }, // ======== 数据列表 ========
dataList: [], treeData: [], componentPartList: [], // ======== 列表表头 ========
columnList: [ { userId: this.$store.state.user.name, functionId: 104009, serialNumber: '104009Table1PartNo', tableId: '104009Table1', tableName: 'BOMHeader表', columnProp: 'partNo', headerAlign: 'center', align: 'center', columnLabel: '物料编码', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 120 }, { userId: this.$store.state.user.name, functionId: 104009, serialNumber: '104009Table1PartDesc', tableId: '104009Table1', tableName: 'BOMHeader表', columnProp: 'partDesc', headerAlign: 'center', align: 'left', columnLabel: '物料名称', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 300 }, { userId: this.$store.state.user.name, functionId: 104009, serialNumber: '104009Table1BomType', tableId: '104009Table1', tableName: 'BOMHeader表', columnProp: 'bomType', headerAlign: 'center', align: 'left', columnLabel: '制造类型', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 120 }, { userId: this.$store.state.user.name, functionId: 104009, serialNumber: '104009Table1EngChgLevel', tableId: '104009Table1', tableName: 'BOMHeader表', columnProp: 'engChgLevel', headerAlign: 'center', align: 'right', columnLabel: 'BOM版本号', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 100 }, { userId: this.$store.state.user.name, functionId: 104009, serialNumber: '104009Table1engRevision', tableId: '104009Table1', tableName: 'BOMHeader表', columnProp: 'engRevision', headerAlign: 'center', align: 'center', columnLabel: '工程版本号', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 100 }, { userId: this.$store.state.user.name, functionId: 104009, serialNumber: '104009Table1NetWeight', tableId: '104009Table1', tableName: 'BOMHeader表', columnProp: 'netWeight', headerAlign: 'center', align: 'right', columnLabel: '净重', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 100 }, { userId: this.$store.state.user.name, functionId: 104009, serialNumber: '104009Table1EffPhaseInDate', tableId: '104009Table1', tableName: 'BOMHeader表', columnProp: 'effPhaseInDate', headerAlign: 'center', align: 'center', columnLabel: '生效日期', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 130 }, { userId: this.$store.state.user.name, functionId: 104009, serialNumber: '104009Table1EffPhaseOutDate', tableId: '104009Table1', tableName: 'BOMHeader表', columnProp: 'effPhaseOutDate', headerAlign: 'center', align: 'center', columnLabel: '失效日期', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 130 }, { userId: this.$store.state.user.name, functionId: 104009, serialNumber: '104009Table1CreateDate', tableId: '104009Table1', tableName: 'BOMHeader表', columnProp: 'createDate', headerAlign: 'center', align: 'center', columnLabel: '创建时间', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 170 }, { userId: this.$store.state.user.name, functionId: 104009, serialNumber: '104009Table1CreateBy', tableId: '104009Table1', tableName: 'BOMHeader表', columnProp: 'createBy', headerAlign: 'center', align: 'center', columnLabel: '创建人', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 100 }, { userId: this.$store.state.user.name, functionId: 104009, serialNumber: '104009Table1UpdateDate', tableId: '104009Table1', tableName: 'BOMHeader表', columnProp: 'updateDate', headerAlign: 'center', align: 'center', columnLabel: '更新时间', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 170 }, { userId: this.$store.state.user.name, functionId: 104009, serialNumber: '104009Table1UpdateBy', tableId: '104009Table1', tableName: 'BOMHeader表', columnProp: 'updateBy', headerAlign: 'center', align: 'center', columnLabel: '更新人', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 100 } ], componentPartColumnList: [ { userId: this.$store.state.user.name, functionId: 104009, serialNumber: '104009Table2LineSequence', tableId: '104009Table2', tableName: 'BOMComponent表', columnProp: 'lineSequence', headerAlign: 'center', align: 'center', columnLabel: '序号', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 60 }, { userId: this.$store.state.user.name, functionId: 104009, serialNumber: '104009Table2ComponentPart', tableId: '104009Table2', tableName: 'BOMComponent表', columnProp: 'componentPart', headerAlign: 'center', align: 'center', columnLabel: '物料编码', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 120 }, { userId: this.$store.state.user.name, functionId: 104009, serialNumber: '104009Table2ComponentPartDesc', tableId: '104009Table2', tableName: 'BOMComponent表', columnProp: 'componentPartDesc', headerAlign: 'center', align: 'left', columnLabel: '物料名称', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 120 }, { userId: this.$store.state.user.name, functionId: 104009, serialNumber: '104009Table2QtyPerAssembly', tableId: '104009Table2', tableName: 'BOMComponent表', columnProp: 'qtyPerAssembly', headerAlign: 'center', align: 'right', columnLabel: '单位用量', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 80 }, { userId: this.$store.state.user.name, functionId: 104009, serialNumber: '104009Table2ComponentScrap', tableId: '104009Table2', tableName: 'BOMComponent表', columnProp: 'componentScrap', headerAlign: 'center', align: 'right', columnLabel: '调机量', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 80 }, { userId: this.$store.state.user.name, functionId: 104009, serialNumber: '104009Table2ShrinkageFactor', tableId: '104009Table2', tableName: 'BOMComponent表', columnProp: 'shrinkageFactor', headerAlign: 'center', align: 'right', columnLabel: '损耗率', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 80 }, { userId: this.$store.state.user.name, functionId: 104009, serialNumber: '104009Table2PrintUnitName', tableId: '104009Table2', tableName: 'BOMComponent表', columnProp: 'printUnit', headerAlign: 'center', align: 'center', columnLabel: '单位', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 60 }, { userId: this.$store.state.user.name, functionId: 104009, serialNumber: '104009Table2IssueType', tableId: '104009Table2', tableName: 'BOMComponent表', columnProp: 'issueTypeName', headerAlign: 'center', align: 'center', columnLabel: '生产属性', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 80 }, { userId: this.$store.state.user.name, functionId: 104009, serialNumber: '104009Table2OperationNo', tableId: '104009Table2', tableName: 'BOMComponent表', columnProp: 'operationNo', headerAlign: 'center', align: 'center', columnLabel: '工序', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 80 }, { userId: this.$store.state.user.name, functionId: 104009, serialNumber: '104009Table2IssueToLoc', tableId: '104009Table2', tableName: 'BOMComponent表', columnProp: 'issueToLocName', headerAlign: 'center', align: 'center', columnLabel: '发料库位', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 80 }, { userId: this.$store.state.user.name, functionId: 104009, serialNumber: '104009Table2NoteText', tableId: '104009Table2', tableName: 'BOMComponent表', columnProp: 'noteText', headerAlign: 'center', align: 'left', columnLabel: '备注', columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: '', columnWidth: 150 }, ], } },
mounted () { this.$nextTick(() => { this.height = window.innerHeight / 2 - 240 /*第二个表格高度的动态调整*/ this.secondHeight = window.innerHeight - this.height - 175 this.rightWidth = window.innerWidth - this.leftWidth - 275 }) },
created () { this.getDataList() }, // js
methods: { // ======== 分页相关方法 ========
// 每页数
sizeChangeHandle (val) { this.pageSize = val this.pageIndex = 1 this.getDataList() },
// 当前页
currentChangeHandle (val) { this.pageIndex = val this.getDataList() },
// ======== 列表数据操作方法 ========
// 获取数据列表
getDataList () { this.searchData.limit = this.pageSize this.searchData.page = this.pageIndex this.queryLoading = true bomSearchHeader(this.searchData).then(({data}) => { if (data.code === 0) { this.dataList = data.page.list this.pageIndex = data.page.currPage this.pageSize = data.page.pageSize this.totalPage = data.page.totalCount // 判断是否全部存在数据
if (this.dataList.length > 0) { // 设置选中行
this.$refs.bomHeaderTable.setCurrentRow(this.dataList[0]) this.headerClickRow(this.dataList[0]) } else { this.headerCurrentRow = {} this.refreshCurrentTabTable() } } this.queryLoading = false }) },
// 单机选中信息
headerClickRow (row) { this.$refs.bomHeaderTable.toggleRowSelection(row) this.headerCurrentRow = JSON.parse(JSON.stringify(row)) },
// 树节点单机事件
handleNodeClick (e, node) { this.alternativeData = { site: e.site, partNo: e.partNo, partDesc: e.partDesc, bomType: e.bo, engChgLevel: e.engChgLevel, alternativeNo: e.alternativeNo, alternativeDescription: e.alternativeDescription, minLotQty: e.minLotQty, noteText: e.noteText, status: e.status, } // 查询替代子物料
getComponentPartList(e).then(({data}) => { if (data && data.code === 0) { this.componentPartList = data.rows } else { this.componentPartList = [] } }) }, // ======== 页签切换相关方法 ========
// 列表表格选择替换
tabClick (tab, event) { // 刷新列表数据
this.refreshCurrentTabTable() },
// 当前值发生变化的时候修改
changeCurrentRow (row, oldRow) { // 判断是否是获取焦点的事件
if (row) { this.headerCurrentRow = JSON.parse(JSON.stringify(row)) //刷新当前页表
this.refreshCurrentTabTable() // 重置
this.alternativeData = { site: '', partNo: '', partDesc: '', bomType: '', engChgLevel: '', alternativeNo: '', alternativeDescription: '', minLotQty: '', noteText: '', status: '', } this.componentPartList = [] } },
// 刷新页签的table数据
refreshCurrentTabTable () { if (this.activeTable === 'GraphicalStructure') { // 获取bom替代树形
this.getAlternativeTree() } },
// 获取bom替代树形
getAlternativeTree () { getAlternativeTree(this.headerCurrentRow).then(({data}) => { if (data && data.code === 0) { this.treeData = data.rows } else { this.treeData = [] } }) },
// ======== chooseList相关方法 ========
// 获取基础数据列表S
getBaseList (val, type) { this.tagNo = val this.$nextTick(() => { let strVal = '' if (val === 117) { strVal = this.componentData.issueToLoc } this.$refs.baseList.init(val, strVal) }) },
// 列表方法的回调
getBaseData (val) { if (this.tagNo === 117) { this.componentData.issueToLoc = val.location_id this.componentData.issueToLocName = val.location_name } },
// ======== 导出相关方法 ========
// 导出excel
async createExportData () { this.searchData.limit = -1 this.searchData.page = 1 await bomSearchHeader(this.searchData).then(({data}) => { this.resultList = data.page.list }) return this.resultList }, startDownload () {}, finishDownload () {}, fields () { let json = '{' this.columnList.forEach((item, index) => { if (index == this.columnList.length - 1) { json += '"' + item.columnLabel + '"' + ':' + '"' + item.columnProp + '"' } else { json += '"' + item.columnLabel + '"' + ':' + '"' + item.columnProp + '"' + ',' } }) json += '}' let s = eval('(' + json + ')') return s }, }}</script>
<style scoped lang="scss">.down-tree{ height: 470px; display: block; overflow-y: scroll;}/deep/ .el-tabs--border-card>.el-tabs__content{ padding: 5px;}</style>
|
