新增员工信息管理以及考勤信息管理两个功能模块， 进行实战演示

package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "axios": "0.16.2",
+    "echarts": "^3.8.5",
     "element-ui": "^2.0.11",
     "http-proxy-middleware": "^0.17.3",
     "jquery": "^3.2.1",

src/api/KaoQin/Attendance.js

@@ -0,0 +1,42 @@
+import fetch from '@/utils/fetch'
+
+export function GetAttenListToday(){
+    return fetch({
+        url: '/Attendance/PullPersonAttenListWithToday',
+        method: 'post'
+      })
+}
+
+export function DeleteAtten(ID){
+    return fetch({
+        url: '/Attendance/DelAtten',
+        method: 'post',
+        params:{ID}
+      })
+}
+
+export function AttenDetailByPerson(ID){
+    return fetch({
+        url: '/Attendance/PullAttenDetailByPerson',
+        method: 'post',
+        params:{ID}
+      })
+}
+
+export function SaveNewAtten(data){
+    return fetch({
+        url: '/Attendance/SaveNewAtten',
+        method: 'post',
+        data
+      })
+}
+
+export function UpdateAtten(data){
+    return fetch({
+        url: '/Attendance/UpdateAtten',
+        method: 'post',
+        data
+      })
+}
+
+

src/api/KaoQin/person.js

@@ -0,0 +1,48 @@
+import fetch from '@/utils/fetch'
+export function GetUsers(){
+    return fetch({
+        url: '/Person/pulluserlist',
+        method: 'post'
+      })
+}
+
+export function DeleteUser(ID){
+    return fetch({
+        url: '/Person/DelUser',
+        method: 'post',
+        params:{ID}
+      })
+}
+
+export function GetUsersDetail(ID){
+    return fetch({
+        url: '/Person/PullUsersDetail',
+        method: 'post',
+        params:{ID}
+      })
+}
+
+export function SaveNewUsers(data){
+    return fetch({
+        url: '/Person/SaveNewUsers',
+        method: 'post',
+        data
+      })
+}
+
+export function UpdateUsers(data){
+    return fetch({
+        url: '/Person/UpdateUsers',
+        method: 'post',
+        data
+      })
+}
+
+
+export function ChangePassword(data){
+    return fetch({
+        url: '/Person/ChangePassword',
+        method: 'post',
+        data
+      })
+}

src/router/index.js

@@ -59,7 +59,7 @@ export const asyncRouterMap = [
     redirect: '/table/index',
     icon: 'tubiao',
     noDropdown: true,
-    children: [{ path: 'index', name: 'Table', component: _import('table/index'), meta: { role: ['user'] }}]
+    children: [{ path: 'index', name: 'Table', component: _import('table/index'), meta: { role: ['admin'] }}]
   },
 
   {
@@ -68,9 +68,26 @@ export const asyncRouterMap = [
     redirect: 'noredirect',
     name:"豆瓣查询",
     icon: 'tubiao',
-    children: [{ path: 'movie', name: '热门电影', component: _import('DouBan/movie'), meta: { role: ['system'] }},
-    { path: 'music', name: '音乐排行', component: _import('DouBan/music'), meta: { role: ['system'] }},
-    { path: 'book', name: '热门图书', component: _import('DouBan/book'), meta: { role: ['system'] }}]
+    children: [{ path: 'movie', name: '热门电影', component: _import('DouBan/movie'), meta: { role: ['user','system'] }},
+    { path: 'music', name: '音乐排行', component: _import('DouBan/music'), meta: { role: ['user','system'] }},
+    { path: 'book', name: '热门图书', component: _import('DouBan/book'), meta: { role: ['user','system'] }}]
+  },
+  {
+    path: '/KaoQin',
+    component: Layout,
+    redirect: 'noredirect',
+    name:"人员信息",
+    icon: 'zonghe',
+    children: [{ path: 'person', name: '人员信息录入', component: _import('KaoQin/person'), meta: { role: ['user','system'] }}]
+  },
+  {
+    path: '/KaoQin',
+    component: Layout,
+    redirect: 'noredirect',
+    name:"考勤管理",
+    icon: 'zonghe',
+    children: [{ path: 'import', name: '考勤信息录入', component: _import('KaoQin/import'), meta: { role: ['user','system'] }},
+    { path: 'count', name: '考勤信息汇总', component: _import('KaoQin/count'), meta: { role: ['user','system'] }}]
   },
   { path: '*', redirect: '/404', hidden: true }
 ]

src/views/KaoQin/count.vue

@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <el-tabs type="border-card">
+      <el-tab-pane>
+        <span slot="label">
+          <i class="el-icon-date"></i> 月报</span>
+        <el-tabs :tab-position="tabPosition" style="height: 200px;">
+          <el-tab-pane label="个人月报">
+            <div class="charts">
+              <div id="myChart" :style="{width:'300px',height:'300px'}"></div>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="部门月报"></el-tab-pane>
+
+        </el-tabs>
+      </el-tab-pane>
+      <el-tab-pane>
+        <span slot="label">
+          <i class="el-icon-date"></i> 年报</span>
+        <el-tabs :tab-position="tabPosition" style="height: 200px;">
+          <el-tab-pane label="个人年报"></el-tab-pane>
+          <el-tab-pane label="部门年报"></el-tab-pane>
+
+        </el-tabs>
+      </el-tab-pane>
+
+    </el-tabs>
+  </div>
+</template>
+<script>
+  // 引入 ECharts 主模块
+  let echarts = require('echarts/lib/echarts')
+  // 引入柱状图
+  require('echarts/lib/chart/bar')
+  // 引入提示框和标题组件
+  require('echarts/lib/component/tooltip')
+  require('echarts/lib/component/title')
+  export default {
+    data() {
+      return {
+        tabPosition: 'top'
+      };
+    },
+    mounted() {
+      this.initCharts();
+    },
+    methods: {
+      initCharts() {
+        this.chart = echarts.init(this.$el);
+        this.setOptions();
+      },
+      setOptions() {
+        this.chart.setOption({
+          title: {
+            text: 'ECharts 入门示例'
+          },
+          tooltip: {},
+          xAxis: {
+            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
+          },
+          yAxis: {},
+          series: [{
+            name: '销量',
+            type: 'bar',
+            data: [5, 20, 36, 10, 10, 20]
+          }]
+        })
+      }
+    }
+
+  };
+
+</script>
+<style lang="scss" scoped>
+
+
+</style>

src/views/KaoQin/import.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="app-container">
+   123
+  </div>
+</template>
+
+<script>
+
+
+ export default {
+   data() {
+     return {
+     
+     }
+   },
+   computed: {
+     message() {
+       return '特朗普说这个页面你不能进......'
+     }
+   }
+ }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>