1

lzhe

2024-06-05 dcf9c9e0410fe1186239e3f8d6f7bdc789c08010

 src/views/console/bom-list/index.vue

@@ -1,47 +1,50 @@
<template>
   <div class="rolePage">
   <div class="bomPage">
      <div class="roleContainer">
         <div class="roleContainer-title">产品列表</div>
         <el-input v-model="keyword" prefix-icon="el-icon-search" placeholder="输入搜索内容" clearable @keyup.enter="searchBtn"></el-input>
         <ul>
            <li v-for="(item,index) in leftData" @click="changeTabaleLi(item,index)">
               <span :class="{active: item.active}">{{item.roleName}}</span>
         <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="role-main-tabs">
         <div class="role-main-header">
            <div class="roleContainer-title">BOM清单</div>
            <div>
               <div>BOM版本</div>
               <div>
                  <span>产品名称</span>
                  <span>产品编号</span>
      <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>
                  <span>未定版</span>
                  <span>已定版</span>
               </div>
               <div>
                  添加新版本
                  <el-button type="primary" @click="addVis">添加新版本</el-button>
               </div>
            </div>
         </div>
         <el-tabs tab-position="top">
            <div>
               <div>BOM清单列表</div>
         <div class="bom-main-content">
            <div class="main-content-left">
               <div class="bomContainer-title">BOM清单列表</div>
               <div></div>
            </div>
            <div>
            <div class="main-content-right">
               <ul>
                  <li>物料编号</li>
                  <li>物料名称</li>
                  <li>规格</li>
                  <li>计量单位</li>
                  <li>物料类型</li>
                  <li>物料属性</li>
                  <li>是否必检</li>
                  <li>额定库存</li>
                  <li>安全库存</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>
                  <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>
@@ -51,44 +54,205 @@
                  <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>
                        <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>
         </el-tabs>
         </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: {
			
      },
      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/blade-cps/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>