工艺规程_new

pages/technology/details/index.vue

+<style lang="less">
+@import '../technolog.less';
+</style>
+<template>
+  <div class="details_box">
+      <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>
+      </div>
+  </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: {
+    hideMenu(){
+      this.showMenu = false
+      this.$Message.info("收起左侧树")
+    },
+    showMenuFn(){
+      this.showMenu = true
+      this.$Message.info("展开左侧树")
+    },
+  }
+}
+</script>

pages/technology/index.vue

+<style lang="less">
+@import './technolog.less';
+</style>
+<template>
+  <div class="layout">
+    <Layout>      
+      <Sider hide-trigger v-if="showMenu" style="color: #fff;">
+        <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>
+        </div>
+      </Sider>
+        <div v-if="!showMenu" class="show_menu">
+          <a class="menu_play fr" @click="showMenuFn"><Icon type="md-arrow-forward" /></a>
+        </div>
+        <Layout>
+            <!-- <Header style="color: #fff;">Header</Header> -->
+            <Content :style="{ height: treeHeight + 'px' }">Content</Content>
+            <!-- <Footer>Footer</Footer> -->
+        </Layout>
+    </Layout>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  data() {
+    return {
+      showMenu:true,
+      treeHeight: '',
+    }
+  },
+  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: {
+    hideMenu(){
+      this.showMenu = false
+      this.$Message.info("收起左侧树")
+    },
+    showMenuFn(){
+      this.showMenu = true
+      this.$Message.info("展开左侧树")
+    },
+  }
+}
+</script>

pages/technology/technolog.less

+.side_tree{
+    background: #ffffff;
+    // width: 300px;
+    border: 1px solid #ddd;
+    .tree_tit{
+        background: #afabab;
+        color: #000;
+        .menu_play{
+            width: 30px;
+            text-align: center;
+            color: #646464;
+            border: 1px solid #000;
+        }
+    }
+}
+.show_menu{
+    .menu_play{
+        width: 30px;
+        text-align: center;
+        color: #646464;
+        border: 1px solid #000;    
+    }
+}
+.details_box{
+    .details_top{
+        height: 32px;
+        line-height: 32px;
+        position: relative;
+        .back_href{
+            position: absolute;
+            left: 110px;
+            top: 0;
+            .ivu-icon{
+                font-size: 20px;
+            }
+        }
+    }
+}
\ No newline at end of file