界面样式

src/dashoo.cn/frontend_web/src/components/Headbar.vue

@@ -1,39 +1,48 @@
 <template>
   <header class="header">
-    <h1 class="brand" style="text-align:center;margin-left:10px;margin-right:1px;">
+    <!-- <h1 class="brand" style="text-align:center;margin-left:10px;margin-right:1px;">
       <router-link to="/">
         <img src="~/assets/img/logo.png" style="height:32px;">
       </router-link>
-    </h1>
-    <!-- <h1 class="brand" style="text-align:center;margin-left:10px;margin-right:1px;margin-top:10px;">
+    </h1> -->
+    <div v-if="!isMenuHidden" class="brand" style="background-color:#002140;padding-top:7px;padding-left:20px;width:180px;">
       <router-link to="/indexlims">
-        <img src="/img/logo_dagang.png" style="height:26px;">
+        <img src="../assets/img/logo_dagang2.png" style="height:35px;" />
       </router-link>
-    </h1> -->
-    <nav class="toolbar">
+    </div>
+    <div v-if="isMenuHidden" class="brand" style="background-color:#002140;padding-top:7px;padding-left:20px;width:36px;">
+      <router-link to="/indexlims">
+        <img src="../assets/img/title.png" style="height:35px;" />
+      </router-link>
+    </div>
+    <nav class="toolbar" style="margin-top: 3px;">
+      <img src="../assets/img/title_right.png" style="height:35px;padding-top:5px;" />
       <div style="margin: 10px 0px 0px 20px;"></div>
-      <!--<menu-list :items="header.menus"/>
-      <input type="text" class="headerseach" @keydown="show($event)"  v-model="sampcode" placeholder="样本搜索" >
-      <span class="headerseachclose" :class="{ headerclosehavetxt: sampcode != ''}" onclick="headclearsearch()">x</span>-->
-      <input type="text" class="headerseach" @keydown="show($event)" v-model="sampcode" placeholder="样本搜索">
-      <span class="headerseachclose" :class="{ headerclosehavetxt: sampcode != ''}" @click="headclearsearch()"></span>
-      <ul class="list">
-        <li class="item">
-          <a style="font-size: 90%" href="#" v-if="authUser">您好, {{department}}{{ authUser.Profile.Realname }}
-            <img v-if="authUser.Profile.Photo" :src="'http://'+authUser.Profile.Host+authUser.Profile.Photo" class="avatar">
-            <img v-else class="avatar" src="~/assets/img/avatar.svg" :alt="authUser.name">
+      <el-tag type="text" size="mini" style="margin-top:12px">{{department}}</el-tag>
+
+      <ul class="list" style="background: #FFF;color: blue">
+        <li class="item" style="background: #FFF">
+          <a style="font-size: 90%;background: #FFF;color: #1D8CE0; font-weight: bold" href="#" v-if="authUser">
+            <span style="margin-right: 20px;">
+              <el-button type="text" icon="icon icon-shrink" v-if="fullscreen" @click="handleFullScreen"></el-button>
+              <el-button type="text" icon="icon icon-enlarge" v-if="!fullscreen" @click="handleFullScreen"></el-button>
+            </span>
+            您好, {{ authUser.Profile.Realname }}
+            <img v-if="authUser.Profile.Photo" style="background: #FFF; border: hidden" :src="'http://'+authUser.Profile.Host+authUser.Profile.Photo" class="avatar">
+            <img v-else class="avatar" style="background: #FFF; border: hidden" src="~/assets/img/avatar.svg" :alt="authUser.name">
           </a>
-          <ul class="list" style="text-align: center;">
+          <ul class="list" style="text-align: center;background: #FFF;">
             <li class="item">
-              <router-link to="/usersetting">账户设置</router-link>
+              <router-link to="/usersetting" style="color: #1F2D3D; font-weight: bold">账户设置</router-link>
             </li>
-            <li class="divider"></li>
+            <li class="divider" style="color: ActiveBorder;"></li>
             <li class="item">
-              <a href="#" @click.prevent="logout">注销登录</a>
+              <a href="#" style="color: #1F2D3D; font-weight: bold" @click.prevent="logout">注销登录</a>
             </li>
           </ul>
         </li>
       </ul>
+
     </nav>
   </header>
 </template>
@@ -53,6 +62,8 @@
     },
     data() {
       return {
+
+        fullscreen: false,
         sampcode: '',
         department: ''
       }
@@ -61,11 +72,41 @@
       this.getdepartment()
     },
     methods: {
-      getdepartment(){
-        this.$axios.get('/limsentrust/getshow')
+       handleFullScreen(){
+                let element = document.documentElement;
+                if (this.fullscreen) {
+                    if (document.exitFullscreen) {
+                        document.exitFullscreen();
+                    } else if (document.webkitCancelFullScreen) {
+                        document.webkitCancelFullScreen();
+                    } else if (document.mozCancelFullScreen) {
+                        document.mozCancelFullScreen();
+                    } else if (document.msExitFullscreen) {
+                        document.msExitFullscreen();
+                    }
+                } else {
+                    if (element.requestFullscreen) {
+                        element.requestFullscreen();
+                    } else if (element.webkitRequestFullScreen) {
+                        element.webkitRequestFullScreen();
+                    } else if (element.mozRequestFullScreen) {
+                        element.mozRequestFullScreen();
+                    } else if (element.msRequestFullscreen) {
+                        // IE11
+                        element.msRequestFullscreen();
+                    }
+                }
+                this.fullscreen = !this.fullscreen;
+            },
+     getdepartment(){
+         if (this.authUser.Profile.DepartmentId == "100000054") {
+          this.department = '欢迎使用'
+        } else{
+           this.$axios.get('/limsentrust/getshow')
           .then(res => {
-            console.log(res.data.items, '=========')
-            if (res.data.items === 'yx') {
+            if(res.data.items === ''){
+              this.department = '欢迎使用'
+            } else if (res.data.items === 'yx') {
               this.department = '宇信公司'
             } else if  (res.data.items === 'tjz') {
               this.department = '特检站'
@@ -82,67 +123,8 @@
           .catch(err => {
             console.error(err)
           })
-      },
-      show: function (ev) {
-        let _this = this
-        if (process.env.appclient == 'lims') {
-          if (ev.keyCode === 13) {
-            if (_this.sampcode !== '') {
-              _this.$axios.get('testsample/judgesampleexist/' + _this.sampcode, {})
-                .then(res => {
-                  if (res.data.items === true) {
-                    _this.$router.push({
-                      path: `/positivereport/detectionresult?SampleCode=${_this.sampcode}`,
-                    })
-                  } else {
-                    _this.$message({
-                      type: 'warning',
-                      message: '该样本编码不存在！'
-                    })
-                  }
-                })
-                .catch(_ => {
-                  // handle error
-                  _this.$message({
-                    type: 'warning',
-                    message: '查询故障！请检查网络是否正常！'
-                  })
-                })
-            }
-          }
-        } else {
-          if (ev.keyCode === 13) {
-            if (_this.sampcode !== '') {
-              _this.$axios.get('sampleoperation/getstationbycode?code=' + _this.sampcode, {})
-                .then(res => {
-                  if (res.data.code === 0) {
-                    let val = res.data.item
-                    let stationstr =
-                      `${val.ShelfX};${val.ShelfY};${val.BoxX};${val.BoxY};${val.Position};${val.Id}`
-                    _this.$router.push({
-                      path: `/equipment/${val.EquipmentId}/manage`,
-                      query: {
-                        station: stationstr
-                      }
-                    })
-                  } else {
-                    _this.$message({
-                      type: 'warning',
-                      message: res.data.message
-                    })
-                  }
-                })
-                .catch(_ => {
-                  // handle error
-                  _this.$message({
-                    type: 'warning',
-                    message: '查询故障！请检查网络是否正常！'
-                  })
-                })
-            }
-          }
         }
-      },
+       },
       headclearsearch() {
         this.sampcode = ''
       }

src/dashoo.cn/frontend_web/src/components/Headbar1.vue

@@ -0,0 +1,199 @@
+<template>
+  <header class="header">
+    <h1 class="brand" style="text-align:center;margin-left:10px;margin-right:1px;">
+      <router-link to="/">
+        <img src="~/assets/img/logo.png" style="height:32px;">
+      </router-link>
+    </h1>
+    <!-- <h1 class="brand" style="text-align:center;margin-left:10px;margin-right:1px;margin-top:10px;">
+      <router-link to="/indexlims">
+        <img src="/img/logo_dagang.png" style="height:26px;">
+      </router-link>
+    </h1> -->
+    <nav class="toolbar">
+      <div style="margin: 10px 0px 0px 20px;"></div>
+      <!--<menu-list :items="header.menus"/>
+      <input type="text" class="headerseach" @keydown="show($event)"  v-model="sampcode" placeholder="样本搜索" >
+      <span class="headerseachclose" :class="{ headerclosehavetxt: sampcode != ''}" onclick="headclearsearch()">x</span>-->
+      <input type="text" class="headerseach" @keydown="show($event)" v-model="sampcode" placeholder="样本搜索">
+      <span class="headerseachclose" :class="{ headerclosehavetxt: sampcode != ''}" @click="headclearsearch()"></span>
+      <ul class="list">
+        <li class="item">
+          <a style="font-size: 90%" href="#" v-if="authUser">您好, {{department}}{{ authUser.Profile.Realname }}
+            <img v-if="authUser.Profile.Photo" :src="'http://'+authUser.Profile.Host+authUser.Profile.Photo" class="avatar">
+            <img v-else class="avatar" src="~/assets/img/avatar.svg" :alt="authUser.name">
+          </a>
+          <ul class="list" style="text-align: center;">
+            <li class="item">
+              <router-link to="/usersetting">账户设置</router-link>
+            </li>
+            <li class="divider"></li>
+            <li class="item">
+              <a href="#" @click.prevent="logout">注销登录</a>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </nav>
+  </header>
+</template>
+
+<script>
+  import Vue from 'vue'
+  import {
+    mapActions
+  } from 'vuex'
+  import Component, {
+    Getter
+  } from 'class-component'
+
+  @Component({
+    methods: {
+      ...mapActions(['toggleMenu'])
+    },
+    data() {
+      return {
+        sampcode: '',
+        department: ''
+      }
+    },
+    created () {
+      this.getdepartment()
+    },
+    methods: {
+      getdepartment(){
+        this.$axios.get('/limsentrust/getshow')
+          .then(res => {
+            console.log(res.data.items, '=========')
+            if (res.data.items === 'yx') {
+              this.department = '宇信公司'
+            } else if  (res.data.items === 'tjz') {
+              this.department = '特检站'
+            } else if  (res.data.items === 'jlny') {
+              this.department = '计量能源站'
+            }else if  (res.data.items === 'gcjd') {
+              this.department = '工程监督中心'
+            }else if  (res.data.items === 'zj') {
+              this.department = '质检中心'
+            }else if  (res.data.items === 'zj') {
+              this.department = '物资商品检验所'
+            }
+          })
+          .catch(err => {
+            console.error(err)
+          })
+      },
+      show: function (ev) {
+        let _this = this
+        if (process.env.appclient == 'lims') {
+          if (ev.keyCode === 13) {
+            if (_this.sampcode !== '') {
+              _this.$axios.get('testsample/judgesampleexist/' + _this.sampcode, {})
+                .then(res => {
+                  if (res.data.items === true) {
+                    _this.$router.push({
+                      path: `/positivereport/detectionresult?SampleCode=${_this.sampcode}`,
+                    })
+                  } else {
+                    _this.$message({
+                      type: 'warning',
+                      message: '该样本编码不存在！'
+                    })
+                  }
+                })
+                .catch(_ => {
+                  // handle error
+                  _this.$message({
+                    type: 'warning',
+                    message: '查询故障！请检查网络是否正常！'
+                  })
+                })
+            }
+          }
+        } else {
+          if (ev.keyCode === 13) {
+            if (_this.sampcode !== '') {
+              _this.$axios.get('sampleoperation/getstationbycode?code=' + _this.sampcode, {})
+                .then(res => {
+                  if (res.data.code === 0) {
+                    let val = res.data.item
+                    let stationstr =
+                      `${val.ShelfX};${val.ShelfY};${val.BoxX};${val.BoxY};${val.Position};${val.Id}`
+                    _this.$router.push({
+                      path: `/equipment/${val.EquipmentId}/manage`,
+                      query: {
+                        station: stationstr
+                      }
+                    })
+                  } else {
+                    _this.$message({
+                      type: 'warning',
+                      message: res.data.message
+                    })
+                  }
+                })
+                .catch(_ => {
+                  // handle error
+                  _this.$message({
+                    type: 'warning',
+                    message: '查询故障！请检查网络是否正常！'
+                  })
+                })
+            }
+          }
+        }
+      },
+      headclearsearch() {
+        this.sampcode = ''
+      }
+    }
+  })
+  export default class Headbar extends Vue {
+    @Getter isMenuHidden
+    @Getter authUser
+
+    logout() {
+      this.$store.dispatch('auth/logout', () => {
+        this.$router.push('/login')
+      })
+      this.$router.push('/login')
+      // // console.info(this.$store)
+      // console.info(this.$store.getters['auth/loggedIn'])
+    }
+  }
+
+</script>
+<style type="text/css">
+  .headerseach {
+    margin: 6px 22px 0px 20px;
+    height: 18px;
+    width: 30%;
+    padding: .25rem .3rem;
+    background: transparent;
+    border: 0;
+    color: #C9C9C9;
+    font-size: .875rem;
+    transition: border-bottom .2s ease, width .3s ease;
+  }
+
+  .headerseach:focus {
+    border: 0;
+    outline: none;
+    background: transparent;
+    transition: border-bottom .2s ease, width .3s ease;
+    border-bottom: .0625rem solid #C9C9C9;
+  }
+
+  .headerseachclose {
+    color: black;
+    cursor: pointer;
+    margin-top: 10px;
+    margin-left: -34px;
+  }
+
+  .headerclosehavetxt {
+    color: #C9C9C9;
+    cursor: pointer;
+  }
+
+</style>

src/dashoo.cn/frontend_web/src/components/Headbar2.vue

@@ -1,181 +0,0 @@
-<template>
-  <header class="header">
-    <!-- <h1 class="brand" style="text-align:center;margin-left:10px;margin-right:1px;">
-      <router-link to="/">
-        <img src="~/assets/img/logo.png" style="height:32px;">
-      </router-link>
-    </h1> -->
-    <div v-if="!isMenuHidden" class="brand" style="background-color:#002140;padding-top:7px;padding-left:20px;width:180px;">
-      <router-link to="/indexlims">
-        <img src="../assets/img/logo_dagang2.png" style="height:35px;" />
-      </router-link>
-    </div>
-    <div v-if="isMenuHidden" class="brand" style="background-color:#002140;padding-top:7px;padding-left:20px;width:36px;">
-      <router-link to="/indexlims">
-        <img src="../assets/img/title.png" style="height:35px;" />
-      </router-link>
-    </div>
-    <nav class="toolbar" style="margin-top: 3px;">
-      <img src="../assets/img/title_right.png" style="height:35px;padding-top:5px;" />
-      <div style="margin: 10px 0px 0px 20px;"></div>
-      <el-tag type="text" size="mini" style="margin-top:12px">{{department}}</el-tag>
-
-      <ul class="list" style="background: #FFF;color: blue">
-        <li class="item" style="background: #FFF">
-          <a style="font-size: 90%;background: #FFF;color: #1D8CE0; font-weight: bold" href="#" v-if="authUser">
-            <span style="margin-right: 20px;">
-              <el-button type="text" icon="icon icon-shrink" v-if="fullscreen" @click="handleFullScreen"></el-button>
-              <el-button type="text" icon="icon icon-enlarge" v-if="!fullscreen" @click="handleFullScreen"></el-button>
-            </span>
-            您好, {{ authUser.Profile.Realname }}
-            <img v-if="authUser.Profile.Photo" style="background: #FFF; border: hidden" :src="'http://'+authUser.Profile.Host+authUser.Profile.Photo" class="avatar">
-            <img v-else class="avatar" style="background: #FFF; border: hidden" src="~/assets/img/avatar.svg" :alt="authUser.name">
-          </a>
-          <ul class="list" style="text-align: center;background: #FFF;">
-            <li class="item">
-              <router-link to="/usersetting" style="color: #1F2D3D; font-weight: bold">账户设置</router-link>
-            </li>
-            <li class="divider" style="color: ActiveBorder;"></li>
-            <li class="item">
-              <a href="#" style="color: #1F2D3D; font-weight: bold" @click.prevent="logout">注销登录</a>
-            </li>
-          </ul>
-        </li>
-      </ul>
-
-    </nav>
-  </header>
-</template>
-
-<script>
-  import Vue from 'vue'
-  import {
-    mapActions
-  } from 'vuex'
-  import Component, {
-    Getter
-  } from 'class-component'
-
-  @Component({
-    methods: {
-      ...mapActions(['toggleMenu'])
-    },
-    data() {
-      return {
-
-        fullscreen: false,
-        sampcode: '',
-        department: ''
-      }
-    },
-    created () {
-      this.getdepartment()
-    },
-    methods: {
-       handleFullScreen(){
-                let element = document.documentElement;
-                if (this.fullscreen) {
-                    if (document.exitFullscreen) {
-                        document.exitFullscreen();
-                    } else if (document.webkitCancelFullScreen) {
-                        document.webkitCancelFullScreen();
-                    } else if (document.mozCancelFullScreen) {
-                        document.mozCancelFullScreen();
-                    } else if (document.msExitFullscreen) {
-                        document.msExitFullscreen();
-                    }
-                } else {
-                    if (element.requestFullscreen) {
-                        element.requestFullscreen();
-                    } else if (element.webkitRequestFullScreen) {
-                        element.webkitRequestFullScreen();
-                    } else if (element.mozRequestFullScreen) {
-                        element.mozRequestFullScreen();
-                    } else if (element.msRequestFullscreen) {
-                        // IE11
-                        element.msRequestFullscreen();
-                    }
-                }
-                this.fullscreen = !this.fullscreen;
-            },
-     getdepartment(){
-         if (this.authUser.Profile.DepartmentId == "100000054") {
-          this.department = '欢迎使用'
-        } else{
-           this.$axios.get('/limsentrust/getshow')
-          .then(res => {
-            if(res.data.items === ''){
-              this.department = '欢迎使用'
-            } else if (res.data.items === 'yx') {
-              this.department = '宇信公司'
-            } else if  (res.data.items === 'tjz') {
-              this.department = '特检站'
-            } else if  (res.data.items === 'jlny') {
-              this.department = '计量能源站'
-            }else if  (res.data.items === 'gcjd') {
-              this.department = '工程监督中心'
-            }else if  (res.data.items === 'zj') {
-              this.department = '质检中心'
-            }else if  (res.data.items === 'zj') {
-              this.department = '物资商品检验所'
-            }
-          })
-          .catch(err => {
-            console.error(err)
-          })
-        }
-       },
-      headclearsearch() {
-        this.sampcode = ''
-      }
-    }
-  })
-  export default class Headbar extends Vue {
-    @Getter isMenuHidden
-    @Getter authUser
-
-    logout() {
-      this.$store.dispatch('auth/logout', () => {
-        this.$router.push('/login')
-      })
-      this.$router.push('/login')
-      // // console.info(this.$store)
-      // console.info(this.$store.getters['auth/loggedIn'])
-    }
-  }
-
-</script>
-<style type="text/css">
-  .headerseach {
-    margin: 6px 22px 0px 20px;
-    height: 18px;
-    width: 30%;
-    padding: .25rem .3rem;
-    background: transparent;
-    border: 0;
-    color: #C9C9C9;
-    font-size: .875rem;
-    transition: border-bottom .2s ease, width .3s ease;
-  }
-
-  .headerseach:focus {
-    border: 0;
-    outline: none;
-    background: transparent;
-    transition: border-bottom .2s ease, width .3s ease;
-    border-bottom: .0625rem solid #C9C9C9;
-  }
-
-  .headerseachclose {
-    color: black;
-    cursor: pointer;
-    margin-top: 10px;
-    margin-left: -34px;
-  }
-
-  .headerclosehavetxt {
-    color: #C9C9C9;
-    cursor: pointer;
-  }
-
-</style>

src/dashoo.cn/frontend_web/src/components/sidebar.vue

@@ -1,15 +1,69 @@
-<template>
+<!--<template>
   <aside class="sidebar" id="aside" :class="{ collapse: isMenuHidden }">
     <nav class="menu" style="overflow:hidden;position: relative;">
       <menu-list :items="menus" active-class/>
     </nav>
     <footer class="footer">
       <a class="toggle icon-before icon-circle-left" title="Toggle navigation menu" @click="toggleMenu"></a>
-      <router-link class="copyright" :to="{ name: 'about' }"> </router-link>
+      &lt;!&ndash;<router-link class="copyright" :to="{ name: 'about' }"> </router-link>&ndash;&gt;
+      <div class="copyright">©信息中心</div>
+    </footer>
+  </aside>
+</template>-->
+
+<template>
+  <aside class="sidebar" id="aside" :class="{ collapse: isMenuHidden }">
+    <div style="height: calc(100vh - 75px); overflow-y: auto; overflow-x: hidden" class="test">
+    <el-menu
+      :collapse="isCollapse"
+      class="el-menu-vertical-demo"
+      :router="true"
+      default-active="/indexlims"
+      background-color="#001529"
+      text-color="#fff"
+      active-text-color="#1890FF"
+      :collapse-transition="false"
+    >
+      <template v-for="(item, index) in menus">
+        <el-menu-item v-if="!item.children" :index="item.url" :key="item.id" >
+          <i :class="'icon-before icon-'+item.icon" style="padding-top: 5px; margin-right: 10px;"></i>
+          <span slot="title">{{ item.name }}</span>
+        </el-menu-item>
+
+        <el-submenu v-if="item.children" :index="item.name" :key="item.id">
+          <template slot="title">
+            <i :class="'icon-before icon-'+item.icon" style="padding-top: 5px; margin-right: 10px;"></i>
+            <span slot="title">{{ item.name }}</span>
+          </template>
+          <template v-if="item.children" v-for="sub in item.children" >
+            <el-menu-item v-if="!sub.children"  :index="sub.url"  :key="sub.id">
+                <!--<i :class="'icon-before icon-'+sub.icon" style="padding-top: 5px; margin-right: 10px;"></i>-->
+                <span slot="title">{{ sub.name }}</span>
+            </el-menu-item>
+            <el-submenu v-if="sub.children" :index="sub.name" :key="sub.id">
+              <template slot="title">
+                <i :class="'icon-before icon-'+sub.icon" style="padding-top: 5px; margin-right: 10px;"></i>
+                <span slot="title">{{ sub.name }}</span>
+              </template>
+              <el-menu-item v-for="sub2 in sub.children" :index="sub2.url" :key="sub2.id">
+                <span slot="title">{{ sub2.name }}</span>
+              </el-menu-item>
+            </el-submenu>
+          </template>
+
+        </el-submenu>
+      </template>
+    </el-menu>
+    </div>
+    <footer class="footer">
+      <el-button size="mini" type="text" icon="icon-before icon-circle-right" circle v-if="isCollapse == true" @click="floderMenu"></el-button>
+      <el-button size="mini" type="text" icon="icon-before icon-circle-left" circle v-if="isCollapse == false" @click="floderMenu"></el-button>
+      <div v-if="!isCollapse" class="copyright">©大港油田信息中心</div>
     </footer>
   </aside>
 </template>
 
+
 <script>
 import Vue from 'vue'
 import { mapActions } from 'vuex'
@@ -22,9 +76,14 @@ const MenuGetter = namespace('menu', Getter)
   components: {
     MenuList
   },
+  data() {
+    return {
+      isCollapse: false
+    }
+  },
   methods: {
     ...mapActions(['toggleMenu']),
-    toolfun_gettreejson(rows, idFieldName, pidFieldName, fileds) { 
+    toolfun_gettreejson(rows, idFieldName, pidFieldName, fileds) {
       // 工具方法，将扁平数据转化成tree格式数据
       function nodejsonexists(rows, ParentId) {
         for (var i = 0; i < rows.length; i++) {
@@ -80,7 +139,16 @@ const MenuGetter = namespace('menu', Getter)
         }
       }
       return nodes
+    },
+    floderMenu() {
+      this.isCollapse = !this.isCollapse
+      this.toggleMenu()
     }
+  },
+  watch: {
+    isMenuHidden: function (val) {
+      this.isCollapse = this.isMenuHidden
+    },
   }
 })
 export default class Sidebar extends Vue {
@@ -102,7 +170,7 @@ export default class Sidebar extends Vue {
     }
   }
 
-  //菜单多语言支持 
+  //菜单多语言支持
   translateMenus (menus) {
     return menus.map((menu) => {
       const subMenus = menu.children
@@ -115,3 +183,12 @@ export default class Sidebar extends Vue {
   }
 }
 </script>
+
+<style>
+.test::-webkit-scrollbar {
+   opacity:0.5;
+}
+  .el-menu-vertical-demo:not(.el-menu--collapse) {
+    width: 200px;
+  }
+</style>

src/dashoo.cn/frontend_web/src/components/sidebar2.vue → src/dashoo.cn/frontend_web/src/components/sidebar1.vue

@@ -1,69 +1,15 @@
-<!--<template>
+<template>
   <aside class="sidebar" id="aside" :class="{ collapse: isMenuHidden }">
     <nav class="menu" style="overflow:hidden;position: relative;">
       <menu-list :items="menus" active-class/>
     </nav>
     <footer class="footer">
       <a class="toggle icon-before icon-circle-left" title="Toggle navigation menu" @click="toggleMenu"></a>
-      &lt;!&ndash;<router-link class="copyright" :to="{ name: 'about' }"> </router-link>&ndash;&gt;
-      <div class="copyright">©信息中心</div>
-    </footer>
-  </aside>
-</template>-->
-
-<template>
-  <aside class="sidebar" id="aside" :class="{ collapse: isMenuHidden }">
-    <div style="height: calc(100vh - 75px); overflow-y: auto; overflow-x: hidden" class="test">
-    <el-menu
-      :collapse="isCollapse"
-      class="el-menu-vertical-demo"
-      :router="true"
-      default-active="/indexlims"
-      background-color="#001529"
-      text-color="#fff"
-      active-text-color="#1890FF"
-      :collapse-transition="false"
-    >
-      <template v-for="(item, index) in menus">
-        <el-menu-item v-if="!item.children" :index="item.url" :key="item.id" >
-          <i :class="'icon-before icon-'+item.icon" style="padding-top: 5px; margin-right: 10px;"></i>
-          <span slot="title">{{ item.name }}</span>
-        </el-menu-item>
-
-        <el-submenu v-if="item.children" :index="item.name" :key="item.id">
-          <template slot="title">
-            <i :class="'icon-before icon-'+item.icon" style="padding-top: 5px; margin-right: 10px;"></i>
-            <span slot="title">{{ item.name }}</span>
-          </template>
-          <template v-if="item.children" v-for="sub in item.children" >
-            <el-menu-item v-if="!sub.children"  :index="sub.url"  :key="sub.id">
-                <!--<i :class="'icon-before icon-'+sub.icon" style="padding-top: 5px; margin-right: 10px;"></i>-->
-                <span slot="title">{{ sub.name }}</span>
-            </el-menu-item>
-            <el-submenu v-if="sub.children" :index="sub.name" :key="sub.id">
-              <template slot="title">
-                <i :class="'icon-before icon-'+sub.icon" style="padding-top: 5px; margin-right: 10px;"></i>
-                <span slot="title">{{ sub.name }}</span>
-              </template>
-              <el-menu-item v-for="sub2 in sub.children" :index="sub2.url" :key="sub2.id">
-                <span slot="title">{{ sub2.name }}</span>
-              </el-menu-item>
-            </el-submenu>
-          </template>
-
-        </el-submenu>
-      </template>
-    </el-menu>
-    </div>
-    <footer class="footer">
-      <el-button size="mini" type="text" icon="icon-before icon-circle-right" circle v-if="isCollapse == true" @click="floderMenu"></el-button>
-      <el-button size="mini" type="text" icon="icon-before icon-circle-left" circle v-if="isCollapse == false" @click="floderMenu"></el-button>
-      <div v-if="!isCollapse" class="copyright">©大港油田信息中心</div>
+      <router-link class="copyright" :to="{ name: 'about' }"> </router-link>
     </footer>
   </aside>
 </template>
 
-
 <script>
 import Vue from 'vue'
 import { mapActions } from 'vuex'
@@ -76,14 +22,9 @@ const MenuGetter = namespace('menu', Getter)
   components: {
     MenuList
   },
-  data() {
-    return {
-      isCollapse: false
-    }
-  },
   methods: {
     ...mapActions(['toggleMenu']),
-    toolfun_gettreejson(rows, idFieldName, pidFieldName, fileds) {
+    toolfun_gettreejson(rows, idFieldName, pidFieldName, fileds) { 
       // 工具方法，将扁平数据转化成tree格式数据
       function nodejsonexists(rows, ParentId) {
         for (var i = 0; i < rows.length; i++) {
@@ -139,16 +80,7 @@ const MenuGetter = namespace('menu', Getter)
         }
       }
       return nodes
-    },
-    floderMenu() {
-      this.isCollapse = !this.isCollapse
-      this.toggleMenu()
     }
-  },
-  watch: {
-    isMenuHidden: function (val) {
-      this.isCollapse = this.isMenuHidden
-    },
   }
 })
 export default class Sidebar extends Vue {
@@ -170,7 +102,7 @@ export default class Sidebar extends Vue {
     }
   }
 
-  //菜单多语言支持
+  //菜单多语言支持 
   translateMenus (menus) {
     return menus.map((menu) => {
       const subMenus = menu.children
@@ -183,12 +115,3 @@ export default class Sidebar extends Vue {
   }
 }
 </script>
-
-<style>
-.test::-webkit-scrollbar {
-   opacity:0.5;
-}
-  .el-menu-vertical-demo:not(.el-menu--collapse) {
-    width: 200px;
-  }
-</style>