上下班

src/router/index.js

@@ -60,7 +60,7 @@ export default new Router({
       children: []
     },
     {
-      path: '/main/workList',
+      path: '/main/workList/:type/:status',
       name: 'WorkList',
       component: WorkList,
       meta: {

src/views/indes.vue

@@ -51,24 +51,24 @@
             <div>待处理</div>
           </router-link>
         </div>
-        <router-link
-          class="attendance"
-          :to="{ path: '/main/workList' }"
-          tag="div"
-        >
-          <div class="attendanceItem">
+        <div class="attendance">
+          <router-link class="attendanceItem" :to="{ path: '/main/workList/1/0' }" tag="div">
             <div class="s_num">{{ newStatistics.usersCount }}</div>
-            <div>今日上班应到</div>
-          </div>
-          <div class="attendanceItem">
+            <div>应到</div>
+          </router-link>
+          <router-link class="attendanceItem" :to="{ path: '/main/workList/1/1' }" tag="div">
             <div class="s_num">{{ newStatistics.onlineCount }}</div>
-            <div>今日上班实到</div>
-          </div>
-          <div class="attendanceItem">
-            <div class="s_num">{{ newStatistics.errorCount }}</div>
-            <div>今日迟到</div>
-          </div>
-        </router-link>
+            <div>实到</div>
+          </router-link>
+          <router-link class="attendanceItem" :to="{ path: '/main/workList/1/4' }" tag="div">
+            <div class="s_num">{{ newStatistics.unOnlineCount }}</div>
+            <div>未打卡</div>
+          </router-link>
+          <router-link class="attendanceItem" :to="{ path: '/main/workList/2/3' }" tag="div">
+            <div class="s_num">{{newStatistics.errorOfflineCount}}</div>
+            <div>昨日早退</div>
+          </router-link>
+        </div>
       </div>
       <!-- loading -->
       <div

src/views/my.vue

@@ -121,6 +121,7 @@
 let sdk = new jssdk(3, "https://wx2.zuel.edu.cn"); // 域名更换为对应环境域名， 204 更换为对应环境wid
 sdk.config(0); //1表示调试模式，生产环境传0
 import "./../../static/css/iconfont.js";
+import { formatDate } from "./../components/js/date.js";
 export default {
   data() {
     return {
@@ -139,6 +140,15 @@ export default {
   methods: {
     //获取位置，经纬度
     getLocation(online) {
+      // 判断是否处于微信浏览器环境
+      if(!(/MicroMessenger/i.test(window.navigator.userAgent))){
+        this.$createToast({
+          txt: '请前往微信中上下班',
+          type: 'warn',
+          mask: true
+        }).show()
+        return;
+      }
       let _this = this;
       this.toast = this.$createToast({
         time: 0,
@@ -172,10 +182,10 @@ export default {
     goToWork(online, address) {
       online = online == 1 ? 0 : 1;
       this.$http
-        .post("service/auth/online", { onlion: online, address })
+        .post("service/auth/online", { online: online, address })
         .then(res => {
           this.toast.hide();
-          if (res.status == 200) {
+          if (res.data.status == 200) {
             this.loginUser.online = online;
             localStorage.setItem("loginUser", JSON.stringify(this.loginUser));
             const t = this.$createToast({
@@ -187,14 +197,58 @@ export default {
               t.hide();
             }, 1000);
           } else {
-            const t = this.$createToast({
-              type: "txt",
-              txt: online == 1 ? "上班失败" : "下班失败"
-            });
-            t.show();
-            setTimeout(() => {
-              t.hide();
-            }, 1000);
+             this.$createDialog({
+              type: 'confirm',
+              icon: 'cubeic-alert',
+              title: '提示',
+              content: '您现在为非下班时间，您确认要进行下班操作吗？',
+              confirmBtn: {
+                text: '确定按钮',
+                active: true,
+                disabled: false,
+                href: 'javascript:;'
+              },
+              cancelBtn: {
+                text: '取消按钮',
+                active: false,
+                disabled: false,
+                href: 'javascript:;'
+              },
+              onConfirm: () => {
+                this.toast = this.$createToast({
+                  time: 0,
+                  mask: true,
+                  txt: "正在加载中"
+                });
+                this.toast.show();
+                this.$http
+                .post("service/auth/online", { online: online, address, confirm:'ok' })
+                .then(res => {
+                  this.toast.hide();
+                  if (res.data.status == 200) {
+                    this.loginUser.online = online;
+                    localStorage.setItem("loginUser", JSON.stringify(this.loginUser));
+                    const t = this.$createToast({
+                      type: "txt",
+                      txt: online == 1 ? "上班成功" : "下班成功"
+                    });
+                    t.show();
+                    setTimeout(() => {
+                      t.hide();
+                    }, 1000);
+                  }else{
+                    const t = this.$createToast({
+                      type: "txt",
+                      txt: online == 1 ? "上班失败" : "下班失败"
+                    });
+                    t.show();
+                    setTimeout(() => {
+                      t.hide();
+                    }, 1000);
+                  }
+                })
+              },
+            }).show()
           }
         });
     },
@@ -243,10 +297,35 @@ export default {
       this.$http
         .post("service/bpm/data/fetchDataList/workOnlineConfig", {"idx":0,"sum":1000})
         .then((res) => {
-          this.isWorkLoading = false;
           if(res.status == 200){
             let userList = res.data.list[0].userList.map(v=>v.id);//用户id列表
             this.isWorkOnline = userList.includes(this.loginUser.id);
+            if(this.isWorkOnline){
+              let now = formatDate(new Date(), "yyyy-MM-dd");
+              this.$http
+                .post("service/auth/onlineInfo/"+now, {"idx":0,"sum":1000})
+                .then((res) => {
+                  this.isWorkLoading = false;
+                  if(res.data.status == 200){
+                    console.log(res.data)
+                    const {unOnlineList,unOfflineList} = res.data;//上班记录未打卡，下班记录未打卡
+                    let unOnlineList1 = unOnlineList.map(v=>v.userId);
+                    let unOfflineList1 = unOfflineList.map(v=>v.userId);
+                    let flag1 = unOnlineList1.includes(this.loginUser.id);
+                    let flag2 = unOfflineList1.includes(this.loginUser.id);
+                    if(flag1 && flag2){
+                      //上班未打卡，下班未打卡
+                      this.isWorkOnline = true;
+                    }else if(!flag1 && flag2){
+                      //上班打卡，下班未打卡
+                      this.isWorkOnline = true;
+                    }else if(!flag1 && !flag2){
+                      //上班打卡，下班打卡
+                      this.isWorkOnline = false;
+                    }
+                  }
+                });
+            }
           }
         });
     }

src/views/workList.vue

@@ -2,7 +2,10 @@
   <div class="bgColor">
     <div slot="content" class="scroll-wrapper" style="height:100%;">
       <div class="demo" style="height:100%;">
-        <div class="header">上下班记录查看</div>
+        <div class="header">
+          <div class="nav" :class="{active:searchType1 === '1'}" @click="tapClick('1')">上班记录</div>
+          <div class="nav" :class="{active:searchType1 === '2'}" @click="tapClick('2')">下班记录</div>
+        </div>
         <div class="stateSearch">
           <cube-button
             light
@@ -10,12 +13,12 @@
             @click="showDatePicker"
             >{{ nowDate | timeFormat("MM-dd") }}<i class="cube-select-icon"></i
           ></cube-button>
-          <cube-select
+          <!-- <cube-select
             class="stateSearch_item"
             v-model="searchType1"
             :options="searchsType1"
             @change="stateChange1()"
-          ></cube-select>
+          ></cube-select> -->
           <cube-select
             class="stateSearch_item"
             v-model="searchType2"
@@ -30,17 +33,15 @@
                 <div class="head">
                   <div class="head_d">
                     <span>{{ item.userName }}</span>
-                    <span
-                      :style="{
-                        color: item.extra2 === '正常' ? 'green' : 'red'
-                      }"
-                      >{{ item.extra2 }}</span
-                    >
+                    <span v-if="item.opValue" :style="{
+                        color: (item.extra2 === '正常' && item.opValue) ? 'green' : 'red'
+                      }">{{ item.extra2 }}</span>
+                    <span style="color:red" v-if="!item.opValue">未打卡</span>
                     <span>{{ item.opTime }}</span>
                   </div>
                 </div>
                 <div class="center">
-                  <div>{{ item.opValue == 1 ? "上班" : "下班" }}打卡</div>
+                  <!-- <div>{{ item.opValue == 1 ? "上班" : "下班" }}打卡</div> -->
                   <div style="word-break:break-all;text-align:justify;">
                     打卡地址：{{ item.extra1 || "无" }}
                   </div>
@@ -66,6 +67,8 @@ export default {
     return {
       items: [],
       itemsSave: [],
+      itemsSaveNoOn: [],//未打卡-上班
+      itemsSaveNoOff: [],//未打卡-下班
       wushuju: false,
       searchsType1: [
         {
@@ -81,21 +84,40 @@ export default {
           value: "2"
         }
       ],
-      searchsType2: [
+      searchsType2: [],
+      searchsType2_on:[
         {
           text: "全部",
           value: "0"
         },
         {
-          text: "迟到",
+          text: "实到",
           value: "1"
         },
         {
-          text: "早退",
+          text: "迟到",
           value: "2"
-        }
+        },
+        {
+          text: "未打卡",
+          value: "4"
+        },
+      ],
+      searchsType2_off:[
+        {
+          text: "全部",
+          value: "0"
+        },
+        {
+          text: "早退",
+          value: "3"
+        },
+        {
+          text: "未打卡",
+          value: "4"
+        },
       ],
-      searchType1: "0",
+      searchType1: '1',
       searchType2: "0",
       stateClass: "",
       loadShow: false,
@@ -112,6 +134,13 @@ export default {
     }
   },
   methods: {
+    // 上班记录或者下班记录
+    tapClick(type){
+      this.searchType1 = type;
+      this.searchType2 = '0';
+      this.searchsType2 = this.searchType1 === '1' ? this.searchsType2_on : this.searchsType2_off;
+      this.stateChange();
+    },
     showDatePicker() {
       if (!this.datePicker) {
         this.datePicker = this.$createDatePicker({
@@ -129,29 +158,45 @@ export default {
     },
     stateChange() {
       var arr = [];
-      if (this.searchType2 === "1") {
-        //迟到
-        arr = this.itemsSave.filter(v => v.extra2 == "迟到");
-      } else if (this.searchType2 === "2") {
-        //早退
-        arr = this.itemsSave.filter(v => v.extra2 == "早退");
-      } else if (this.searchType2 === "0") {
-        //全部
-        arr = JSON.parse(JSON.stringify(this.itemsSave));
-      }
       if (this.searchType1 === "1") {
         //上班
-        this.items = arr.filter(v => v.opValue === "1");
-        this.wushuju = this.items.length === 0;
+        arr = this.itemsSave.filter(v => v.opValue === "1");
       } else if (this.searchType1 === "2") {
         //下班
-        this.items = arr.filter(v => v.opValue === "0");
-        this.wushuju = this.items.length === 0;
+        arr = this.itemsSave.filter(v => v.opValue === "0");
       } else if (this.searchType1 === "0") {
         //全部
-        this.items = arr;
-        this.wushuju = this.items.length === 0;
+        arr = JSON.parse(JSON.stringify(this.itemsSave));
       }
+      if (this.searchType2 === "1") {
+        //实到
+        this.items = arr.filter(v => v.extra2 == "正常");
+      } else if (this.searchType2 === "2") {
+        //迟到
+        this.items = arr.filter(v => v.extra2 == "迟到");
+      } else if (this.searchType2 === "3") {
+        //早退
+        this.items = arr.filter(v => v.extra2 == "早退");
+      } else if (this.searchType2 === "4") {
+        //未打卡
+        if(this.searchType1 === '1'){
+          // 上班
+          this.items = JSON.parse(JSON.stringify(this.itemsSaveNoOn));
+        }else if(this.searchType1 === '2'){
+          // 下班
+          this.items = JSON.parse(JSON.stringify(this.itemsSaveNoOff));
+        }
+      } else if (this.searchType2 === "0") {
+        //全部
+        if(this.searchType1 === '1'){
+          // 上班
+          this.items = JSON.parse(JSON.stringify(arr.concat(this.itemsSaveNoOn)));
+        }else if(this.searchType1 === '2'){
+          // 下班
+          this.items = JSON.parse(JSON.stringify(arr.concat(this.itemsSaveNoOff)));
+        }
+      }
+      this.wushuju = this.items.length === 0;
     },
     stateChange1() {
       this.stateChange();
@@ -173,10 +218,14 @@ export default {
           }
           // this.items = res.data.data;
           this.itemsSave = JSON.parse(JSON.stringify(res.data.data));
+          this.itemsSaveNoOn = res.data.unOnlineList?JSON.parse(JSON.stringify(res.data.unOnlineList)):[];
+          this.itemsSaveNoOff = res.data.unOnlineList?JSON.parse(JSON.stringify(res.data.unOfflineList)):[];
           this.stateChange();
         } else if (res.data.data.length === 0) {
           this.items = [];
           this.itemsSave = [];
+          this.itemsSaveNoOn = [];
+          this.itemsSaveNoOff = [];
           this.wushuju = true;
         }
         this.loadShow = false;
@@ -184,17 +233,26 @@ export default {
     }
   },
   created() {
+    console.log(this.$route)
+    const { type, status } = this.$route.params;//type是上班1还是下班2，status是具体的状态
+    this.searchType1 = type;
+    this.searchType2 = status;
+    if(status === '3'){
+      // 昨日早退
+      this.nowDate = new Date(new Date().getTime() - 24*60*60*1000);
+    }
+    this.searchsType2 = this.searchType1 === '1' ? this.searchsType2_on : this.searchsType2_off;
     this.getData();
   }
 };
 </script>
 <style lang="stylus" rel="stylesheet/stylus" scoped>
 .scroll-list-wrap {
-  height: calc(100% - 1.76rem);
+  height: calc(100% - 1.81rem);
   border-radius: 5px;
   transform: rotate(0deg); // fix 子元素超出边框圆角部分不隐藏的问题
   overflow: hidden;
-  padding-top: 1.76rem;
+  padding-top: 1.81rem;
 }
 
 .foods-wrapper {
@@ -298,9 +356,6 @@ export default {
 .cont {
   margin-top: 1.86rem;
 }
-.scroll-list-wrap {
-  padding-top: 1.76rem;
-}
 .header {
   width: 100%;
   height: 0.88rem;
@@ -308,15 +363,28 @@ export default {
   text-align: center;
   color: #fff;
   font-size: 0.37rem;
-  background: linear-gradient(#2e2f32, #414246);
   position: fixed;
   top: 0;
   z-index: 6;
+  display: flex;
+  color: #2e2f32;
+  border-bottom: 0.05rem solid #2e2f32;
+}
+.header .nav{
+  flex: 1;
+  border-right: 0.02rem solid #2e2f32;
+}
+.header :last-child{
+  border-right: none;
+}
+.header .nav.active{
+  background: linear-gradient(#2e2f32, #414246);
+  color:#fff;
 }
 .stateSearch {
   width: 100%;
   position: fixed;
-  top: 0.88rem;
+  top: 0.93rem;
   z-index: 6;
   display: flex;
   justify-content: center;
@@ -367,6 +435,9 @@ export default {
   color: #333333;
   background-color: #fff;
 }
+.cube-btn{
+  border-top: 0.02rem solid #e5e5e5;
+}
 .title {
   display: flex;
   justify-content: space-between;
@@ -483,7 +554,6 @@ export default {
     }
     .center {
       color: #333333;
-      border-bottom: 0.01rem solid #e6e6e6;
       div {
         padding: 0.12rem 0.48rem;
       }