订单管理产品树

assets/css/base.less

@@ -1295,4 +1295,45 @@ html [type=button] {
   //显示富文本框样式
   .detail .ivu-row .filed-col  p .html p{
     margin: 0 10px 0 0;
-  }
\ No newline at end of file
+  }
+  .lay100 {
+    height: calc(100vh - 105px);
+    background-color: #f5f6fa;
+    .con {
+      padding: 5px 5px 0px 10px;
+    }
+    .con_bord {
+      // margin: 15px 32px;
+      box-shadow: #c7c7c7 1px 2px 7px 3px;
+    }
+    background: rgba(245, 246, 250, 1);
+  }
+.menu_side{
+    background: #fff;
+    margin: 5px 0 0 0;
+    border: 1px solid #dcdee2
+}
+.show_menu{
+    width: 30px;
+    height: 30px;
+    position: fixed;
+    top: 100px;
+    left: 0;
+    z-index: 9;
+    .menu_play{
+        width: 30px;
+        height: 30px;
+        line-height: 34px;
+        font-size: 14px;
+        text-align: center;
+        color: #515A6E;
+        border-top-right-radius: 5px;
+        border-bottom-right-radius: 5px;
+        background: #ffffff;
+        box-shadow: #ccc 2px 2px 4px 1px; 
+    }
+    .menu_play:hover{
+        background-color: #2d8cf0;
+        color: white;       
+    }
+}
\ No newline at end of file

pages/mesPlan/index.vue

 <template>
   <Layout class="full">
-    <Sider hide-trigger :style="{background: '#fff'}" width="260">
+    <!-- <Sider hide-trigger :style="{background: '#fff'}" width="260">
       <div class="zh-tree" :style="{height:treeHeight+'px'}">
         <h3 class="zh-title">产品结构</h3>
         <div class="zh-box">
@@ -13,8 +13,16 @@
           ></Tree>
         </div>
       </div>
+    </Sider> -->
+    <Sider hide-trigger v-if="showMenu" class="menu_side" width="300">
+      <ProductTree @on-hide="onHide" @on-select="productSearch" />
     </Sider>
-    <Content class="content">
+    <div v-if="!showMenu" class="show_menu">
+      <a class="menu_play fr" @click="showMenuFn" title="展开">
+        <Icon type="ios-arrow-forward" size="24" />
+      </a>
+    </div>
+    <Content class="content" :class="!showMenu?'con_bord':''">
       <!--:data="dataT"-->
       <DataGrid
         :action="action"
@@ -100,19 +108,21 @@ import Detail from "./detail";
 import Search from "./search";
 import Split from "./split";
 import Send from "./send";
+import ProductTree from "@/components/page/productTree.vue";
 export default {
   name: "list",
   components: {
-    Add,
+    Add, 
     Edit,
     Detail,
     Search,
     Split,
-    Send
+    Send,ProductTree,
   },
   data() {
     return {
       action: Api.index,
+      showMenu: true,
       easySearch: {
         keys: {
           op: "mesCode,productName",
@@ -763,6 +773,18 @@ export default {
         this.$Message.error("数量为1，不能进行分解");
       }
     },
+    onHide() {
+      // this.$Message.info("收起左侧树")
+      this.showMenu = false;
+    },
+    showMenuFn() {
+      //this.$Message.info("展开左侧树")
+      this.showMenu = true;
+    },
+    productSearch(id, item, ids) {
+      let where = { productId: { op: "In", value: ids } };
+      this.$refs.grid.reload(where);
+    },
     //确定分解
     orderSplitOk() {
       let returnDatalist = this.$refs.orderSplit.returnDataList();

pages/technology/index.vue

 <style lang="less">
 @import "./technolog.less";
-.lay100 {
-  height: calc(100vh - 105px);
-  background-color: #f5f6fa;
-  .con {
-    padding: 5px 5px 0px 10px;
-  }
-  .con_bord {
-    // margin: 15px 32px;
-    box-shadow: #c7c7c7 1px 2px 7px 3px;
-  }
-  background: rgba(245, 246, 250, 1);
-}
+// .lay100 {
+//   height: calc(100vh - 105px);
+//   background-color: #f5f6fa;
+//   .con {
+//     padding: 5px 5px 0px 10px;
+//   }
+//   .con_bord {
+//     // margin: 15px 32px;
+//     box-shadow: #c7c7c7 1px 2px 7px 3px;
+//   }
+//   background: rgba(245, 246, 250, 1);
+// }
 .fullWindow {
   position: fixed;
   width: 100%;
@@ -20,7 +20,7 @@
   bottom: 0;
   right: 0;
   //   bottom:100%;
-  //   right: 100%;
+  //   right: 100%; 
   z-index: 898;
   background-color: white;
   // background: red;