diff --git a/src/api/quote/quoteDetailBom.js b/src/api/quote/quoteDetailBom.js
new file mode 100644
index 0000000..d89e7b3
--- /dev/null
+++ b/src/api/quote/quoteDetailBom.js
@@ -0,0 +1,3 @@
+import {createAPI} from "../../utils/httpRequest";
+
+export const queryQuoteDetailBom = (data) => createAPI("/quote/detail/bom", "post", data);
diff --git a/src/api/quote/quoteDetailBomTree.js b/src/api/quote/quoteDetailBomTree.js
new file mode 100644
index 0000000..ebed5bf
--- /dev/null
+++ b/src/api/quote/quoteDetailBomTree.js
@@ -0,0 +1,11 @@
+import {createAPI} from "../../utils/httpRequest";
+
+
+export const queryQuoteDetailBomTree = (data) => createAPI("/quote/detail/bom/tree", "post", data);
+
+export const queryQuoteDetailBomTreeLevel = (data) => createAPI(`/quote/detail/bom/tree/level`,'post',data)
+
+
+export const queryQuoteDetailBomTreeAlternative = (data) => createAPI("/quote/detail/bom/tree/alternative", "post", data);
+
+export const changeQuoteDetailBomTree = (data) => createAPI(`quote/detail/bom/tree/change`, "post", data)
diff --git a/src/views/modules/quote/detail/primary/quoteDetailBom.vue b/src/views/modules/quote/detail/primary/quoteDetailBom.vue
index eb3bdeb..20dd9c2 100644
--- a/src/views/modules/quote/detail/primary/quoteDetailBom.vue
+++ b/src/views/modules/quote/detail/primary/quoteDetailBom.vue
@@ -1,4 +1,7 @@
 <script>
+import {queryQuoteDetailBomTree, queryQuoteDetailBomTreeLevel,queryQuoteDetailBomTreeAlternative} from "@/api/quote/quoteDetailBomTree";
+import {queryQuoteDetailBom} from "@/api/quote/quoteDetailBom";
+import {changeQuoteDetailBomTree} from "../../../../../api/quote/quoteDetailBomTree";
 export default {
   name: "quoteDetailBom",
   props:{
@@ -71,10 +74,10 @@ export default {
         },{
           userId: this.$store.state.user.name,
           functionId: 5011,
-          serialNumber: '5011Table4ComponentPartDesc',
+          serialNumber: '5011Table4PartDesc',
           tableId: "5011Table4",
           tableName: "报价材料信息",
-          columnProp: 'componentPartDesc',
+          columnProp: 'partDesc',
           headerAlign: "center",
           align: "left",
           columnLabel: '物料名称',
@@ -173,10 +176,10 @@ export default {
         },{
           userId: this.$store.state.user.name,
           functionId: 5011,
-          serialNumber: '5011Table4UnitCost',
+          serialNumber: '5011Table4UnitPrice',
           tableId: "5011Table4",
           tableName: "报价材料信息",
-          columnProp: 'unitCost',
+          columnProp: 'unitPrice',
           headerAlign: "center",
           align: "right",
           columnLabel: '单位成本',
@@ -190,10 +193,10 @@ export default {
         },{
           userId: this.$store.state.user.name,
           functionId: 5011,
-          serialNumber: '5011Table4QuoteUnitCost',
+          serialNumber: '5011Table4QuotePrice',
           tableId: "5011Table4",
           tableName: "报价材料信息",
-          columnProp: 'quoteUnitCost',
+          columnProp: 'quotePrice',
           headerAlign: "center",
           align: "right",
           columnLabel: '单位报价成本',
@@ -206,22 +209,179 @@ export default {
           columnWidth: 90,
         },
       ],
+      props:{
+        children: 'list',
+        label: (data,node)=>{
+          return `${data.partNo}-${data.engChgLevel}-${data.alternativeNo}-${data.bomType}`;
+        },
+      },
+      queryLoading:false,
+      queryTreeLoading:false,
+      versionVisible:false,
+      versionList:[],
+      alternativeList:[],
+      bomEngChgLevel:{
+        partNo: '',
+        bomType: '',
+        buNo: '',
+        site: '',
+        engChgLevel: null,
+      }
     }
   },
   methods:{
+    handleQueryQuoteDetailBomTree(){
+      let params = {
+        id: this.quoteDetail.id,
+      }
+      this.queryTreeLoading = true;
+      queryQuoteDetailBomTree(params).then(({data})=>{
+        if (data && data.code === 0){
+          this.treeData = data.rows;
+          if (this.treeData.length > 0){
+            this.$nextTick(()=>{
+              this.$refs.tree.setCurrentKey(this.treeData[0].id);
+              this.handleQueryQuoteDetailBom();
+            })
+          }
+          this.queryTreeLoading = false;
+        }else {
+          this.$message.warning(data.msg);
+          this.queryTreeLoading = false;
+        }
+      }).catch((error)=>{
+        this.$message.error(error);
+      })
+    },
+    nodeClick(data){
+      this.handleQueryQuoteDetailBom();
+    },
     handleQueryQuoteDetailBom(){
-      console.log(this.quoteDetail.id)
+      let params = {
+        quoteDetailId:this.quoteDetail.id,
+        treeId:this.$refs.tree.getCurrentKey(),
+        allTree:this.isAllBom,
+      }
+      this.queryLoading = true;
+      queryQuoteDetailBom(params).then(({data})=>{
+        if (data && data.code === 0){
+          this.dataList = data.rows;
+        }else {
+          this.$message.warning(data.msg);
+        }
+        this.queryLoading = false;
+      }).catch((error)=>{
+        this.$message.error(error);
+        this.queryLoading = false;
+      })
+    },
+    handleCheckedVersion(){
+      this.handleQueryQuoteDetailBomTreeVersion();
+      let node = this.$refs.tree.getCurrentNode();
+      this.bomEngChgLevel = {
+        partNo: node.partNo,
+        bomType: node.bomType,
+        buNo: node.buNo,
+        site: node.site,
+        engChgLevel: node.engChgLevel,
+        alternativeNo: node.alternativeNo,
+      }
+      this.versionVisible = true
+    },
+    handleQueryQuoteDetailBomTreeVersion(){
+      let node = this.$refs.tree.getCurrentNode();
+      let params = {
+        site:node.site,
+        partNo:node.partNo,
+        bomType:node.bomType,
+        buNo:node.buNo,
+      }
+      queryQuoteDetailBomTreeLevel(params).then(({data})=>{
+        if (data && data.code === 0){
+          this.versionList = data.rows;
+        }else {
+          this.$message.warning(data.msg);
+        }
+      }).catch((error)=>{
+        this.$message.error(error);
+      })
+    },
+    levelRowStyle({row}){
+      if (row.engChgLevel === this.bomEngChgLevel.engChgLevel){
+        return { 'background-color': '#E8F7F6' };
+      }
+    },
+    alternativeRowStyle({row}){
+      let node = this.$refs.tree.getCurrentNode();
+      if (row.engChgLevel === node.engChgLevel && row.alternativeNo === node.alternativeNo){
+        return { 'background-color': '#E8F7F6' };
+      }
     },
+    levelRowClick(row){
+      this.bomEngChgLevel.engChgLevel = row.engChgLevel;
+      let params = {
+        ...this.bomEngChgLevel
+      }
+      queryQuoteDetailBomTreeAlternative(params).then(({data})=>{
+        if (data && data.code === 0){
+          this.alternativeList = data.rows;
+        }else {
+          this.$message.warning(data.msg);
+        }
+      }).catch((error)=>{
+        this.$message.error(error);
+      })
+    },
+    handleChangeVersion(row){
+      let node = this.$refs.tree.getCurrentNode();
+      let params = {
+        id:node.id,
+        partNo:node.partNo,
+        bomType:node.bomType,
+        buNo:node.buNo,
+        site:node.site,
+        engChgLevel:row.engChgLevel,
+        alternativeNo:row.alternativeNo,
+        createBy:this.$store.state.user.name,
+      }
+      changeQuoteDetailBomTree(params).then(({data})=>{
+        if (data && data.code === 0){
+          this.$message.success(data.msg);
+          this.versionVisible = false;
+          this.handleQueryQuoteDetailBomTree();
+        }else {
+          this.$message.warning(data.msg);
+        }
+      }).catch((error)=>{
+        this.$message.error(error);
+      })
+    }
   },
   created() {
     if (this.quoteDetail && this.quoteDetail.id){
-      this.handleQueryQuoteDetailBom();
+      this.handleQueryQuoteDetailBomTree();
     }
   },
   watch:{
     'quoteDetail.id'(newVal,oldVal){
+      this.handleQueryQuoteDetailBomTree();
+    },
+    isAllBom(newVal,oldVal){
       this.handleQueryQuoteDetailBom();
     },
+    'bomEngChgLevel.engChgLevel'(newVal,oldVal){
+      if (newVal){
+        let node = this.$refs.tree.getCurrentNode();
+        let row = {
+          partNo: node.partNo,
+          bomType: node.bomType,
+          buNo: node.buNo,
+          site: node.site,
+          engChgLevel: newVal,
+        }
+        this.levelRowClick(row)
+      }
+    }
   }
 }
 </script>
@@ -229,18 +389,24 @@ export default {
 <template>
 <div>
   <div style="margin-bottom: 10px">
-    <el-link style="margin-right: 20px">切换版本</el-link>
+    <el-link style="margin-right: 20px;cursor: pointer" @click="handleCheckedVersion">切换版本</el-link>
     <el-checkbox v-model="isAllBom">全级BOM结构</el-checkbox>
   </div>
   <el-container>
-    <el-aside width="300px">
+    <el-aside width="300px" v-loading="queryTreeLoading">
       <el-tree
-        :data="treeData">
+        :data="treeData"
+        :props="props"
+        :default-expand-all="true"
+        :expand-on-click-node="false"
+        node-key="id"
+        highlight-current
+        @node-click="nodeClick" ref="tree">
 
       </el-tree>
     </el-aside>
     <el-main style="padding: 0">
-      <el-table :data="dataList" border style="width: 100%" :height="420">
+      <el-table :data="dataList" v-loading="queryLoading" border style="width: 100%" :height="420">
         <el-table-column
           v-for="(item,index) in columns" :key="index"
           :sortable="item.columnSortable"
@@ -259,6 +425,28 @@ export default {
       </el-table>
     </el-main>
   </el-container>
+
+  <el-dialog title="BOM版本切换" :visible.sync="versionVisible" append-to-body :close-on-click-modal="false" v-drag width="900px">
+    <el-table :data="versionList" :row-style="levelRowStyle" @row-click="levelRowClick" ref="versionTable" style="width: 100%" border :height="240">
+      <el-table-column label="物料编码" prop="partNo" header-align="center" align="center" show-overflow-tooltip min-width="140"/>
+      <el-table-column label="物料描述" prop="partDesc" header-align="center" align="left" show-overflow-tooltip min-width="200"/>
+      <el-table-column label="版本" prop="engChgLevel" header-align="center" align="center" show-overflow-tooltip min-width="60"/>
+      <el-table-column label="类型" prop="bomType" header-align="center" align="center" show-overflow-tooltip min-width="100"/>
+    </el-table>
+
+    <el-table :data="alternativeList" :row-style="alternativeRowStyle" ref="versionTable" style="width: 100%;margin-top: 20px" border :height="240">
+      <el-table-column label="物料编码" prop="partNo" header-align="center" align="center" show-overflow-tooltip min-width="140"/>
+      <el-table-column label="物料描述" prop="partDesc" header-align="center" align="left" show-overflow-tooltip min-width="200"/>
+      <el-table-column label="版本" prop="engChgLevel" header-align="center" align="center" show-overflow-tooltip min-width="60"/>
+      <el-table-column label="替代编码" prop="alternativeNo" header-align="center" align="left" show-overflow-tooltip min-width="60"/>
+      <el-table-column label="类型" prop="bomType" header-align="center" align="center" show-overflow-tooltip min-width="100"/>
+      <el-table-column label="操作" header-align="center" align="center" min-width="100">
+        <template slot-scope="scope">
+          <a @click="handleChangeVersion(scope.row)">选择</a>
+        </template>
+      </el-table-column>
+    </el-table>
+  </el-dialog>
 </div>
 </template>
 
diff --git a/src/views/modules/quote/detail/primary/quoteDetailRouting.vue b/src/views/modules/quote/detail/primary/quoteDetailRouting.vue
index 223ba7b..e1238e9 100644
--- a/src/views/modules/quote/detail/primary/quoteDetailRouting.vue
+++ b/src/views/modules/quote/detail/primary/quoteDetailRouting.vue
@@ -1,4 +1,6 @@
 <script>
+import {queryQuoteDetailBomTree} from "@/api/quote/quoteDetailBomTree";
+
 export default {
   name: "quoteDetailRouting",
   props:{
@@ -461,21 +463,51 @@ export default {
           columnWidth: 120,
         },
       ],
+      props:{
+        children: 'list',
+        label: (data,node)=>{
+          return `${data.partNo}-${data.engChgLevel}-${data.alternativeNo}-${data.bomType}`;
+        },
+      },
+      queryTreeLoading:false,
     }
   },
   methods:{
-    handleQueryQuoteDetailRouting(){
-      console.log(this.quoteDetail.id)
+    handleQueryQuoteDetailBomTree(){
+      let params = {
+        id: this.quoteDetail.id,
+      }
+      this.queryTreeLoading = true;
+      queryQuoteDetailBomTree(params).then(({data})=>{
+        if (data && data.code === 0){
+          this.treeData = data.rows;
+          if (this.treeData.length > 0){
+            this.$nextTick(()=>{
+              this.$refs.tree.setCurrentKey(this.treeData[0].id);
+
+            })
+          }
+          this.queryTreeLoading = false;
+        }else {
+          this.$message.warning(data.msg);
+          this.queryTreeLoading = false;
+        }
+      }).catch((error)=>{
+        this.$message.error(error);
+      })
+    },
+    nodeClick(data){
+
     },
   },
   created() {
     if (this.quoteDetail && this.quoteDetail.id){
-      this.handleQueryQuoteDetailRouting();
+      this.handleQueryQuoteDetailBomTree();
     }
   },
   watch:{
     'quoteDetail.id'(newVal,oldVal){
-      this.handleQueryQuoteDetailRouting();
+      this.handleQueryQuoteDetailBomTree();
     },
   }
 }
@@ -488,9 +520,15 @@ export default {
       <el-checkbox v-model="isAllBom">全级Routing结构</el-checkbox>
     </div>
     <el-container>
-      <el-aside width="300px">
+      <el-aside width="300px" v-loading="queryTreeLoading">
         <el-tree
-          :data="treeData">
+          :data="treeData"
+          :props="props"
+          :default-expand-all="true"
+          :expand-on-click-node="false"
+          node-key="id"
+          highlight-current
+          @node-click="nodeClick" ref="tree">
 
         </el-tree>
       </el-aside>