<template>
|
<div class="bomPage">
|
<div class="roleContainer">
|
<div class="bomContainer-title">产品列表</div>
|
<el-input v-model="keyword" size="small" prefix-icon="el-icon-search" placeholder="输入搜索内容" clearable @keyup.enter="searchBtn"></el-input>
|
<ul class="left-ul">
|
<li v-for="(item,index) in leftData" :class="{active: item.active}" @click="changeTabaleLi(index)">
|
<span>【{{item.code}}】{{item.name}}</span>
|
</li>
|
</ul>
|
</div>
|
<div class="bom-main-tabs">
|
<div class="bom-main-header">
|
<div class="bomContainer-title">BOM清单</div>
|
<div style="padding: 20px;border-bottom: 1px solid #dee;">
|
<div class="main-info">
|
<div class="main-info-title">BOM 版本</div>
|
<div class="main-info-tooltip">
|
<div class="main-info-item"><span style="background-color: yellow"></span><span>未定版</span></div>
|
<div class="main-info-item"><span style="background-color: #b7c9f3"></span><span>已定版</span></div>
|
</div>
|
</div>
|
<div class="main-info-conent">
|
<span>产品名称<span>{{info.name}}</span></span>
|
<span>产品编号<span>{{info.code}}</span></span>
|
</div>
|
<div>
|
<el-button type="primary" @click="addVis">添加新版本</el-button>
|
</div>
|
</div>
|
</div>
|
<div class="bom-main-content">
|
<div class="main-content-left">
|
<div class="bomContainer-title">BOM清单列表</div>
|
<div></div>
|
</div>
|
<div class="main-content-right">
|
<ul>
|
<li>物料编号<span>-</span></li>
|
<li>物料名称<span>-</span></li>
|
<li>规格<span>-</span></li>
|
<li>计量单位<span>-</span></li>
|
<li>物料类型<span>-</span></li>
|
<li>物料属性<span>-</span></li>
|
<li>是否必检<span>-</span></li>
|
<li>额定库存<span>-</span></li>
|
<li>安全库存<span>-</span></li>
|
</ul>
|
<el-table ref="multipleTableRef0" :data="tableData" border style="width: 100%" class="multipleTableRef">
|
<el-table-column prop="name" label="工序编号"></el-table-column>
|
<el-table-column prop="code" label="工序名称"></el-table-column>
|
<el-table-column prop="typeName" label="用量分子"></el-table-column>
|
<el-table-column prop="unit" label="用量分母"></el-table-column>
|
<el-table-column prop="standardModel" label="固定耗损"></el-table-column>
|
<el-table-column fixed="right" label="操作" width="200px">
|
<template #default="scope">
|
<!-- <el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
|
<el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">刷新</el-button>
|
<el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">删除</el-button> -->
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
<el-dialog title="" v-model="visible" :width="360" class="visible-model">
|
<el-form :model="routeForm" :rules="routeRules" ref="dialogForm" label-width="120px"
|
label-position="center">
|
<el-row>
|
<el-col :span="24">
|
<el-form-item label="工艺路线版本" prop="test">
|
<el-select v-model="routeForm.test" style="width: 100%" placeholder="请选择">
|
<el-option v-for="item in testList" :key="item.id" :label="item.title" :value="item.id"/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<template #footer>
|
<el-button @click="visible = false">取消</el-button>
|
<el-button type="primary" :loading="isSaveing" @click="routeSubmit">确定</el-button>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'BOM',
|
components: {},
|
data() {
|
return {
|
testList: [],
|
routeForm: {
|
test: ""
|
},
|
routeRules: {
|
test: [
|
{ required: true, message: "请选择工艺路线版本" }
|
]
|
},
|
visible: false,
|
leftData: [],
|
dialog: {
|
save: false,
|
permission: false
|
},
|
info: {},
|
tableData: []
|
}
|
},
|
mounted(){
|
this.getLeftTree();
|
},
|
methods: {
|
routeSubmit() {
|
this.$refs.dialogForm.validate(async (valid) => {
|
if (valid) {
|
// this.$HTTP.post("/api/blade-system/data-scope/submit",obj).then(res=> {
|
// this.isSaveing = false;
|
// if(res.code == 200) {
|
// this.$emit('success', this.addDictForm, this.mode);
|
// this.visible = false;
|
// this.$message.success("操作成功");
|
// }else {
|
// this.$alert(res.message, "提示", {type: 'error'});
|
// }
|
// })
|
}else{
|
return false;
|
}
|
})
|
},
|
searchBtn() {},
|
addVis() {
|
this.visible = true;
|
},
|
changeTabaleLi(index) {
|
this.leftData.forEach(item=> {
|
item.active = false;
|
})
|
this.leftData[index].active = true;
|
this.info = this.leftData[index];
|
},
|
getLeftTree() {
|
this.$HTTP.get("/api/smis/product/tree").then(res=> {
|
if(res.code == 200) {
|
this.leftData = res.data;
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.bomPage {
|
display: flex;
|
min-height: 100%;
|
margin: 8px;
|
}
|
.bomContainer-title {
|
font-size: 16px;
|
text-align: center;
|
height: 38px;
|
line-height: 38px;
|
border-bottom: 1px solid #e2e2e2;
|
background-color: #409eff;
|
color: #fff;
|
border-radius: 2px 2px 0 0;
|
margin-bottom: 12px;
|
}
|
.roleContainer {
|
width: 240px;
|
margin-right: 8px;
|
padding: 4px;
|
background-color: #fff;
|
}
|
.bom-main-tabs {
|
flex: 1;
|
padding: 8px;
|
background-color: #fff;
|
}
|
.left-ul {
|
margin-top: 12px;
|
padding-left:30px;
|
padding-right:30px;
|
}
|
.left-ul li {
|
padding: 6px 6px;
|
list-style: none;
|
cursor: pointer;
|
margin-bottom: 6px;
|
}
|
.left-ul .active {
|
background-color: #7ab3ee;
|
display: inline-block;
|
width: 100%;
|
}
|
.left-ul li:hover {
|
background-color: #eff4f9;
|
}
|
.main-info {
|
display: flex;
|
justify-content: space-between;
|
}
|
.main-info-title {
|
font-size: 14px;
|
padding-left: 8px;
|
border-left: 2px solid #7ab3ee;
|
}
|
.main-info-tooltip {
|
display: flex;
|
font-size: 12px;
|
}
|
.main-info-item {
|
margin-right: 8px;
|
}
|
.main-info-item span:nth-child(1) {
|
width: 10px;
|
height: 10px;
|
border-radius: 50%;
|
margin-right: 4px;
|
display: inline-block;
|
}
|
.main-info-conent {
|
display: flex;
|
margin: 8px 0px 12px;
|
}
|
.main-info-conent > span {
|
margin-right: 12px;
|
font-size: 14px;
|
}
|
.main-info-conent > span span {
|
margin-left:12px;
|
}
|
.bom-main-content {
|
display: flex;
|
}
|
.main-content-left {
|
width: 320px;
|
}
|
.main-content-right {
|
flex: 1;
|
}
|
.main-content-right ul {
|
padding: 12px 30px;
|
}
|
.main-content-right ul li {
|
width: 50%;
|
float: left;
|
list-style: none;
|
margin-bottom:12px;
|
}
|
.main-content-right ul li span {
|
margin-left:12px;
|
}
|
</style>
|
