修改菜单，添加履职登记页面

src/components/Calendar/index.vue

@@ -124,12 +124,10 @@ export default {
         });
         this.attrs = list;
         this.date = new Date();
-        console.log(list,'lisst')
       })
     },
     //点击日期
     onDayClick(day){
-      console.log(day,'day')
       let dayInfo = {};
       day.attributes.forEach(v=>{
         if(v.key != 'select-drag'){

src/components/DatePicker/index.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="date-picker">
+    <div class="date-picker-box">
+      <vc-date-picker
+        ref="Calendar"
+        class="calendar"
+        v-model="date"
+        :min-date='new Date()'
+        @transition-start="queryMoth"
+        @dayclick="onDayClick">
+      </vc-date-picker>
+    </div>
+    <span class="hide-line" @click="foldBox">^</span>
+  </div>
+</template>
+
+<script>
+export default {
+  data(){
+    return{
+      date:new Date(),
+      showPicker:true,
+      num:4,
+      height:null,
+    }
+  },
+  mounted() {
+
+  },
+  watch:{
+    //
+    showPicker (){
+      let weeksBox = document.getElementsByClassName('vc-day');
+      let pickerBox = document.getElementsByClassName('date-picker-box')[0];
+      if( this.showPicker){
+        for(let i = 0; i < weeksBox.length;i++){
+          weeksBox[i].style.transform = `translate(0, 0px)`;
+        }
+        pickerBox.style.height = `${this.height}px`;
+        console.log('show')
+      }else {
+        this.height = pickerBox.offsetHeight;
+        for(let i = 0; i < weeksBox.length;i++){
+          weeksBox[i].style.transform = `translate(0, -${this.num * 32}px)`;
+        }
+        pickerBox.style.height =  `100px`;
+        console.log('hide')
+      }
+    }
+  },
+  methods:{
+    foldBox(){
+      this.showPicker = !this.showPicker;
+    },
+    // 获取年、月份
+    queryMoth(){
+      let Calendar = this.$refs.Calendar;
+      let year = Calendar.$refs.calendar.pages[0].year;
+      let month = Calendar.$refs.calendar.pages[0].month;
+      this.$emit('Mouth',{year,month});
+      if(!this.showPicker) this.showPicker = true;
+    },
+    //点击日期
+    onDayClick(day){
+      let dayLine = day.classes[7].substring(5);
+      this.num = dayLine -1;
+      this.$emit('day',day.id)
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+.date-picker {
+  width: 100%;
+  background-color: #fff;
+  box-sizing: border-box;
+  .calendar {
+    border: none;
+    width: 100%;
+  }
+  .vc-header{
+    width: 100%;
+    background-color: #fff;
+    position: relative;
+    z-index:10;
+  }
+  .vc-arrow{
+    position: relative;
+    z-index:10;
+  }
+  .vc-weeks{
+    overflow: hidden;
+  }
+  .vc-weekday{
+    position: relative;
+    background-color: #fff;
+    z-index:10;
+  }
+  .date-picker-box{
+    overflow: hidden;
+  }
+  .hide-line{
+    box-sizing: border-box;
+    display: inline-block;
+    height: 1px;
+    width: 100%;
+    margin-top: 30px;
+    background-color: red;
+    text-align: center;
+    align-items: center;
+  }
+}
+</style>

src/plugins/vant.js

@@ -1,6 +1,6 @@
 // 按需全局引入 vant组件
 import Vue from 'vue'
-import { Button,Form,Field, List, Cell, Tabbar, TabbarItem ,Checkbox , CheckboxGroup , Radio, RadioGroup} from 'vant'
+import { Button,Form,Field, List, Cell, Tabbar, TabbarItem ,Checkbox , CheckboxGroup , Radio, RadioGroup ,Grid ,GridItem} from 'vant'
 Vue.use(Button)
 Vue.use(Form)
 Vue.use(Field)
@@ -11,3 +11,5 @@ Vue.use(Checkbox);
 Vue.use(CheckboxGroup);
 Vue.use(Radio);
 Vue.use(RadioGroup);
+Vue.use(Grid);
+Vue.use(GridItem);

src/router/router.config.js

@@ -47,6 +47,18 @@ export let routers = [
         name: 'workTime',
         component: () => import('@/views/menu/workTime/index'),
         meta: { title: '作息管理', keepAlive: false }
+      },
+      {
+        path: '/nfc',
+        name: 'nfc',
+        component: () => import('@/views/menu/NFCmanage/index'),
+        meta: { title: '履职登记', keepAlive: false }
+      },
+      {
+        path: '/lvzhi',
+        name: 'lvzhi',
+        component: () => import('@/views/menu/LZRegister/index'),
+        meta: { title: '履职登记', keepAlive: false }
       }
     ],
   },

src/views/home/menu.vue

@@ -4,12 +4,13 @@
     <div class="menu-list">
       <div class="menu-list-item" v-for="(v,i) in menuList" :key="i">
         <p @click="onclick">{{v.name}}</p>
-        <ul>
-          <li v-for="(item,index) in v.list" :key="index">
-            <div></div>
-            <p>{{item.menu}}</p>
-          </li>
-        </ul>
+        <van-grid border :column-num="3">
+          <van-grid-item v-for="(item,index) in v.list" :key="index" icon="smile-o" :text="item.menu" :to="item.path" />
+        </van-grid>
+<!--          <li v-for="(item,index) in v.list" :key="index">-->
+<!--            <div></div>-->
+<!--            <p>{{item.menu}}</p>-->
+<!--          </li>-->
       </div>
     </div>
   </div>
@@ -24,6 +25,23 @@ export default {
     return {
       menuList:[
         {
+          name:'系统管理',
+          list:[
+            {
+              menu:'作息管理',
+              path:'/workTime',
+            },
+            {
+              menu:'NFC管理',
+              path:'/nfc',
+            },
+            {
+              menu:'履职登记',
+              path:'/lvzhi',
+            },
+          ]
+        },
+        {
           name:'履职',
           list:[
             {
@@ -133,12 +151,12 @@ export default {
   }
   .menu-list-item{
     background-color: #fff;
-    border-radius: 5px;
+    border-radius: 10px;
     box-shadow: 0 10px 20px #eee;
-    padding:25px;
     margin:20px;
     >p{
       font-size: 30px;
+      padding: 10px 10px 10px 20px;
     }
     >ul{
       display: flex;

src/views/menu/LZRegister/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="lvzhi">
+    <nav-bar></nav-bar>
+    <DatePicker></DatePicker>
+  </div>
+</template>
+
+<script>
+import NavBar from '@/components/NavBar';
+import DatePicker from '@/components/DatePicker';
+import {mapGetters} from "vuex";
+export default {
+  components:{NavBar,DatePicker},
+  data(){
+    return{
+      date:new Date(),
+
+    }
+  },
+  mounted() {
+
+  },
+  computed:{
+    ...mapGetters(['orgName','orgId']),
+  },
+  methods:{
+    queryMoth(){
+
+    },
+    onDayClick(){
+
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .lvzhi{
+
+  }
+</style>

src/views/menu/NFCmanage/index.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="works-time">
+    <nav-bar></nav-bar>
+
+  </div>
+</template>
+
+<script>
+import NavBar from '@/components/NavBar';
+import {mapGetters} from "vuex";
+import {deptTreeList} from "@/api/public";
+import {editWorkTime} from "@/views/menu/workTime/api";
+export default {
+  components:{NavBar},
+  data(){
+    return{
+
+    }
+  },
+  mounted() {
+
+  },
+  computed:{
+    ...mapGetters(['orgName','orgId']),
+  },
+  methods:{
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .works-time{
+    background-color: #fff;
+  }
+  .form-box{
+    height: calc(100vh - 180px);
+    padding: 0 30px 50px 30px;
+    overflow: auto;
+  }
+  .radio-box{
+    height: 100px;
+    padding: 30px;
+  }
+  .org-name{
+    font-size: 30px;
+    line-height: 80px;
+    height: 80px;
+    text-align: center;
+  }
+</style>