plm前端
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.
 
 
 
 

854 lines
26 KiB

<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>