工单作业、报工查询、工单查询

src/pages/modules/workorder/index.vue

@@ -0,0 +1,181 @@
+<template>
+<div class="content">
+    <div class="header">
+        <div class="header-user-content">
+            <div class="header-user-txt">
+                <span class="span1">登录人员：</span>
+                <span class="span2">{{userName}}</span>
+            </div>
+            <div class="drop-button-wraper" @click="toSelect"><span class="icon_dropdown"></span></div>
+            <div v-show="show" class="dropdown-wrap">
+                <ul class="dropdown-list drift">
+                    <li class="dropdown-item" @click="exit">退出</li>
+                </ul>
+            </div>
+        </div>
+        <div class="header-time-wrap">
+            <div class="header-time">
+                <div class="xj_time">{{time}}</div>
+                <div class="date_week">
+                    <div class="xj_date">{{date}}</div>
+                    <div class="xj_week">{{week}}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="body-container">
+        <div class="tabs_wrap">
+            <ul class="tabs">
+                <li v-for="i in menus" :key="i.index">
+                    <router-link :to="i.router" :class="{'router-link-active': i.router === $route.path}">{{i.label}}</router-link>
+                </li>
+            </ul>
+        </div>
+        <div class="main-container">
+            <router-view></router-view>
+        </div>
+    </div>
+</div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      userName: this.$store.getters.userInfo !== '' ? JSON.parse(this.$store.getters.userInfo).username : '',
+      timer: null,
+      time: '',
+      date: '',
+      week: '',
+      show: false,
+      menus: [
+        {
+          label: '工单作业',
+          router: '/workorderassignment'
+        },
+        {
+          label: '报工查询',
+          router: '/workreportquery'
+        },
+        {
+          label: '工单查询',
+          router: '/workorderquery'
+        }
+      ]
+    }
+  },
+  mounted () {
+    this.timer = window.setInterval(this.updateTime, 1000)
+  },
+  methods: {
+    updateTime () {
+      let cd = new Date()
+      let year = cd.getFullYear()
+      let month = cd.getMonth() + 1 < 10 ? '0' + (cd.getMonth() + 1) : cd.getMonth() + 1
+      let date = cd.getDate() < 10 ? '0' + cd.getDate() : cd.getDate()
+      let hh = cd.getHours() < 10 ? '0' + cd.getHours() : cd.getHours()
+      let mm = cd.getMinutes() < 10 ? '0' + cd.getMinutes() : cd.getMinutes()
+      let ss = cd.getSeconds() < 10 ? '0' + cd.getSeconds() : cd.getSeconds()
+      var weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+      let myddy = new Date().getDay()
+      let week = weekday[myddy]
+      this.time = `${hh}:${mm}:${ss}`
+      this.date = `${year}年${month}月${date}日`
+      this.week = `${week}`
+    },
+    toSelect () {
+      this.show = !this.show
+    },
+    exit () {
+      this.$store.dispatch('delUserInfo')
+      this.$router.push('/login')
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import '~@style/mixin.styl'
+.content
+    _wh(100%, 100vh)
+    background linear-gradient(#031f6d 0%,#011a60 20%,#060346 100%)
+.header
+    height 45px
+    _fj()
+    padding 0 15px
+.header-user-content
+    position relative
+    height 45px
+    _fj(flex-start)
+.header-user-txt
+    height 100%
+    line-height 45px
+    .span1
+        _font(14px, 1, #fff,,)
+    .span2
+        _font(16px, 1, #fff,,)
+.drop-button-wraper
+    height 100%
+    line-height 45px
+    font-size 14px
+    color #fff
+    margin-left 15px
+    vertical-align middle
+.dropdown-wrap
+    position absolute
+    top 45px
+    right 0
+    transform-origin center top
+    transition transform .3s ease-in-out
+    border 1px solid #e4e7ed
+    border-radius 4px
+    background-color #fff
+    box-shadow 0 2px 12px 0 rgba(0,0,0,.1)
+    margin 5px 0
+.dropdown-list
+    padding 0
+.dropdown-item
+    _font(14px, 34px, #606266,,)
+    padding 0 20px
+.header-time-wrap
+    height 45px
+.header-time
+    height 45px
+    _fj(center,flex-end,column)
+.xj_time
+    _font(14px, 18px, #fff,,right)
+.date_week
+    _fj()
+.xj_date
+    _font(12px, 18px, #fff,,)
+.xj_week
+    _font(12px, 18px, #fff,,)
+.body-container
+    _wh(calc(100% - 30px), calc(100% - 65px))
+    margin 0 auto 20px
+    padding 5px
+    border 1px solid #484cce
+.tabs_wrap
+    height 34px
+    margin-bottom 10px
+.tabs
+  height 34px
+  li
+    float left
+    line-height 32px
+    text-align center
+    padding-right 10px
+    a
+      display inline-block
+      color #fff
+      width 100%
+      padding 0 10px
+      font-size 14px
+      border-bottom 1px solid #2aa6f9
+    .router-link-active
+        background linear-gradient(#0de0ff 0%,#2aa6f9 100%)
+        border-top-left-radius 12px
+        border-top-right-radius 12px
+.main-container
+    _wh(100%, calc(100% - 44px))
+</style>