工艺规程管理框架

pages/technology/details/component/gongxu.vue

+<style lang="less">
+@import '../../technolog.less';
+</style>
+<template>
+    <div>1231323</div>
+</template>
+
+<script>
+export default {
+  components: {},
+  data() {
+    return {
+      showMenu:true,
+      treeHeight: '',
+      actNum:'1',
+    }
+  },
+  created() {
+    this.treeHeight = window.innerHeight - 140
+  },
+  async fetch({ store, params }) {
+    await store.dispatch('loadDictionary') // 加载数据字典
+  },
+  mounted() {
+    window.onresize = () => {
+      ///浏览器窗口大小变化
+      return (() => {
+        this.treeHeight = window.innerHeight - 140
+      })()
+    }
+  },
+  computed: { },
+  methods: {
+    back(){
+
+    },
+  }
+}
+</script>

pages/technology/details/index.vue

@@ -2,32 +2,28 @@
 @import '../technolog.less';
 </style>
 <template>
-  <div class="details_box">
+    <Layout class="pt10 details_box">
+        <Header>
             <h4 class="details_top tc">
                 <a class="back_href" @click="back">  <Icon type="ios-undo-outline" />返回工艺规程</a>
                 <div>工艺信息</div>
             </h4>
             <div class="details_body">
-          <Menu mode="horizontal" theme="light" :active-name="actNum">
-            <MenuItem name="1">
-                <Icon type="ios-paper" />
-                工序
-            </MenuItem>
-            <MenuItem name="2">
-                <Icon type="ios-people" />
-                质控卡
-            </MenuItem>
-            <MenuItem name="4">
-                <Icon type="ios-construct" />
-                工艺BOM
-            </MenuItem>
-            <MenuItem name="5">
-                <Icon type="ios-construct" />
-                生产准备
-            </MenuItem>
+                <Menu mode="horizontal" theme="light" active-name="1">
+                    <MenuItem name="1">工序</MenuItem>
+                    <MenuItem name="2" to="/technology/details/component/gongxu">质控卡</MenuItem>
+                    <MenuItem name="3">工艺BOM</MenuItem>
+                    <MenuItem name="4">生产准备</MenuItem>
+                     <!--  -->
                 </Menu>
             </div>
-  </div>
+        </Header>
+        <!-- <Content> -->
+            <Layout class="bottom_box">
+                <nuxt-child keep-alive></nuxt-child>
+            </Layout>
+        <!-- </Content> -->
+    </Layout>
 </template>
 
 <script>
@@ -54,17 +50,13 @@ export default {
       })()
     }
   },
-  computed: {
-    
-  },
+  computed: { },
   methods: {
-    hideMenu(){
-      this.showMenu = false
-      this.$Message.info("收起左侧树")
-    },
-    showMenuFn(){
-      this.showMenu = true
-      this.$Message.info("展开左侧树")
+    back(){
+      this.$router.push({
+          name: "technology",
+          // params: { transmitData: lemData }
+        });
     },
   }
 }

pages/technology/index.vue

@@ -4,20 +4,24 @@
 <template>
   <div class="layout">
     <Layout>      
-      <Sider hide-trigger v-if="showMenu" style="color: #fff;">
+      <Sider hide-trigger v-if="showMenu" class="menu_side">
         <div class="side_tree" :style="{ height: treeHeight + 'px' }">
-          <h3 class="tree_tit">产品结构
-            <a class="menu_play fr" @click="hideMenu"><Icon type="md-arrow-back" /></a>
-          </h3>
+          <h4 class="tree_tit pl5">产品结构
+            <a class="menu_play fr" @click="hideMenu" title="收起">
+              <Icon type="ios-arrow-back" size="24" />
+              <!-- <Icon type="md-arrow-round-back"/> -->
+            </a>
+          </h4>
         </div>
       </Sider>
         <div v-if="!showMenu" class="show_menu">
-          <a class="menu_play fr" @click="showMenuFn"><Icon type="md-arrow-forward" /></a>
+          <a class="menu_play fr" @click="showMenuFn" title="展开">
+            <Icon type="ios-arrow-forward" size="24"  />
+            <!-- <Icon type="md-arrow-round-forward"/> -->
+          </a>
         </div>
         <Layout>
-            <!-- <Header style="color: #fff;">Header</Header> -->
-            <Content :style="{ height: treeHeight + 'px' }">Content</Content>
-            <!-- <Footer>Footer</Footer> -->
+            <Content :class="showMenu?'tech_body':'tech_body02'" :style="{ height: treeHeight + 'px' }">Content</Content>
         </Layout>
     </Layout>
   </div>
@@ -33,7 +37,7 @@ export default {
     }
   },
   created() {
-    this.treeHeight = window.innerHeight - 140
+    this.treeHeight = window.innerHeight - 120
   },
   async fetch({ store, params }) {
     await store.dispatch('loadDictionary') // 加载数据字典
@@ -42,7 +46,7 @@ export default {
     window.onresize = () => {
       ///浏览器窗口大小变化
       return (() => {
-        this.treeHeight = window.innerHeight - 140
+        this.treeHeight = window.innerHeight - 120
       })()
     }
   },

pages/technology/technolog.less

+.menu_side{
+    width: 300px!important;
+    min-width: 300px!important;
+    max-width: 300px!important;
+    flex: 0 0 300px!important;
+    background: #fff;
+    margin: 5px 0 0 0;
+}
 .side_tree{
     background: #ffffff;
-    // width: 300px;
+    width: 300px;
     border: 1px solid #ddd;
     .tree_tit{
-        background: #afabab;
-        color: #000;
+        background: #F5F6FA;
+        height: 50px;
+        line-height: 50px;
+        font-size: 14px;
+        color: #515A6E;
         .menu_play{
             width: 30px;
+            height: 50px;
+            line-height: 50px;
             text-align: center;
             color: #646464;
-            border: 1px solid #000;
         }
     }
 }
 .show_menu{
+    width: 30px;
+    height: 30px;
+    position: fixed;
+    top: 100px;
+    left: 0;
     .menu_play{
         width: 30px;
+        height: 30px;
+        line-height: 34px;
+        font-size: 14px;
         text-align: center;
-        color: #646464;
-        border: 1px solid #000;    
+        color: #515A6E;
+        border-top-right-radius: 5px;
+        border-bottom-right-radius: 5px;
+        // position: absolute;
+        // top: 100px;
+        // left: 0px;
+        background: #ffffff;
+        box-shadow: #ccc 2px 2px 4px 1px; 
     }
 }
+.tech_body{
+    margin: 5px 5px 5px 20px;
+    padding: 2px 18px;
+    box-shadow: #98929294 2px 1px 5px 1px;
+}
+.tech_body02{
+    margin: 5px;
+    padding: 2px 18px;
+    box-shadow: #98929294 2px 1px 5px 1px;
+}
+
 .details_box{
     .details_top{
         height: 32px;
         line-height: 32px;
         position: relative;
+        background: #fff;
+        border-bottom: 1px solid #ccc;
         .back_href{
             position: absolute;
             left: 110px;