上下班根据选择的人员显示上班按钮

src/views/my.vue

@@ -1,10 +1,13 @@
 <template>
   <div class="bgColor">
     <div class="head">
-      <div class="img" @click="getLocation(loginUser.online)">
-        {{ loginUser.online == 1 ? "下班" : "上班" }}
-      </div>
-      <div class="name">{{ loginUser.name }}</div>
+      <template v-if="!isWorkLoading">
+        <div class="img" @click="getLocation(loginUser.online)" v-show="isWorkOnline">
+          {{ loginUser.online == 1 ? "下班" : "上班" }}
+        </div>
+        <div class="name">{{ loginUser.name }}</div>
+      </template>
+      <cube-loading v-if="isWorkLoading"></cube-loading>
     </div>
     <div class="myMessage">
       <div class="label">个人信息</div>
@@ -128,7 +131,9 @@ export default {
       promptingStatus: "",
       groups: "", //工作组
       candidateGroups: "",
-      toast: null
+      toast: null,
+      isWorkOnline:false,//当前用户是否可以上下班
+      isWorkLoading:false,//当前用户是否可以上下班loading
     };
   },
   methods: {
@@ -231,11 +236,25 @@ export default {
         .then(function(res) {
           that.incidentCount = res.data;
         });
+    },
+    //获取展示可以上下班人员列表
+    getWorkOnline(){
+      this.isWorkLoading = true;
+      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);
+          }
+        });
     }
   },
   created() {
     this.getGroups();
     this.getIncidentData();
+    this.getWorkOnline();
   }
 };
 </script>
@@ -265,7 +284,10 @@ export default {
 .head {
   height: 2.4rem;
   background: linear-gradient(#005395, #226ca8);
-  padding-top: 0.3rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 
 .head .img {