소스 검색

添加loading,人员上下班的科室绑分组和绑定分组需设计后更改

seimin 3 년 전
부모
커밋
78e375fec2
4개의 변경된 파일84개의 추가작업 그리고 6개의 파일을 삭제
  1. 3 0
      src/main.js
  2. 25 0
      src/plugins/loading/loading.js
  3. 47 0
      src/plugins/loading/loading.vue
  4. 9 6
      src/views/AppIndex.vue

+ 3 - 0
src/main.js

@@ -4,6 +4,9 @@ import router from './router'
4
 import './filters'
4
 import './filters'
5
 Vue.config.productionTip = false
5
 Vue.config.productionTip = false
6
 
6
 
7
+import loading from './plugins/loading/loading.js';
8
+Vue.use(loading)
9
+
7
 
10
 
8
 new Vue({
11
 new Vue({
9
   router,
12
   router,

+ 25 - 0
src/plugins/loading/loading.js

@@ -0,0 +1,25 @@
1
+// loading.js中
2
+import LoadingVue from './loading.vue';
3
+const $loading = {
4
+	install: (Vue) => {
5
+		// 通过Vue.extend方法 获取LoadingComponent 组件类
6
+		const LoadingComponent = Vue.extend(LoadingVue);
7
+		// new LoadingComponent得到组件的实例
8
+		const vm = new LoadingComponent();
9
+		// 获取组件实例的html 并插入到body中
10
+		const tpl = vm.$mount().$el;
11
+		// 插入到body中
12
+		document.body.appendChild(tpl);
13
+		// 添加 显示loading方法
14
+		Vue.prototype.$showLoading = () => {
15
+			// 通过改变实例 .mask v-show绑定变量控制显示
16
+			vm.isShow = true
17
+		}
18
+		// 添加关闭loading方法
19
+		Vue.prototype.$hideLoading = () => {
20
+			// 通过改变实例 .mask v-show绑定变量控制隐藏
21
+			vm.isShow = false
22
+		}
23
+	}
24
+}
25
+export default $loading;

+ 47 - 0
src/plugins/loading/loading.vue

@@ -0,0 +1,47 @@
1
+<template>
2
+  <div class="mask" v-show="isShow">
3
+    <div class="loading"></div>
4
+  </div>
5
+</template>
6
+
7
+<script>
8
+export default {
9
+  data() {
10
+    return {
11
+      isShow: false, // 默认不显示
12
+    };
13
+  },
14
+};
15
+</script>
16
+
17
+<style lang="less" scoped>
18
+// 定义动画 控制loading旋转
19
+@keyframes rotate {
20
+  0% {
21
+    transform: rotate(0deg);
22
+  }
23
+  100% {
24
+    transform: rotate(360deg);
25
+  }
26
+}
27
+.mask {
28
+  position: fixed;
29
+  left: 0;
30
+  right: 0;
31
+  top: 0;
32
+  bottom: 0;
33
+  background-color: rgba(0, 0, 0, 0.7);
34
+  z-index: 10000;
35
+  display: flex;
36
+  align-items: center;
37
+  justify-content: center;
38
+  .loading {
39
+    width: 30px;
40
+    height: 30px;
41
+    border: 6px solid rgb(219, 140, 13);
42
+    border-radius: 21px;
43
+    border-left-color: transparent;
44
+    animation: rotate 500ms infinite;
45
+  }
46
+}
47
+</style>

+ 9 - 6
src/views/AppIndex.vue

@@ -260,15 +260,15 @@
260
                 </div>
260
                 </div>
261
                 <div
261
                 <div
262
                   class="headerItem_on"
262
                   class="headerItem_on"
263
-                  :title="data.dataList.length ? data.dataList[0][1] : '-'"
263
+                  :title="data.dataList.length ? data.dataList[0][1] : ''"
264
                 >
264
                 >
265
                   {{
265
                   {{
266
-                    (data.dataList.length ? data.dataList[0][1] : "-") | length6
266
+                    (data.dataList.length ? data.dataList[0][1] : "") | length6
267
                   }}
267
                   }}
268
                   <span v-if="data.online">{{ data.time }}</span>
268
                   <span v-if="data.online">{{ data.time }}</span>
269
                 </div>
269
                 </div>
270
-                <div class="headerItem_on_two" :title="data.depts || '-'">
271
-                  {{ data.depts || "-" }}
270
+                <div class="headerItem_on_two" :title="data.depts || ''">
271
+                  {{ data.depts || "" }}
272
                 </div>
272
                 </div>
273
               </div>
273
               </div>
274
             </div>
274
             </div>
@@ -948,6 +948,7 @@ export default {
948
         if (result2.status == 200) {
948
         if (result2.status == 200) {
949
           post("/auth/sendOffline", { userid: this.coopData.id }).then(
949
           post("/auth/sendOffline", { userid: this.coopData.id }).then(
950
             (res) => {
950
             (res) => {
951
+              this.$hideLoading();
951
               if (res.status == 200) {
952
               if (res.status == 200) {
952
                 this.model = true;
953
                 this.model = true;
953
                 this.icon = "success";
954
                 this.icon = "success";
@@ -959,6 +960,7 @@ export default {
959
             }
960
             }
960
           );
961
           );
961
         } else {
962
         } else {
963
+          this.$hideLoading();
962
           this.model = true;
964
           this.model = true;
963
           this.icon = "error";
965
           this.icon = "error";
964
           this.modelContent = result2.msg;
966
           this.modelContent = result2.msg;
@@ -971,9 +973,10 @@ export default {
971
     // 确认
973
     // 确认
972
     ok() {
974
     ok() {
973
       this.model = false;
975
       this.model = false;
976
+      this.$showLoading();
974
       if (this.coopData.dataList.length) {
977
       if (this.coopData.dataList.length) {
975
-        if (this.workType == 2 && this.coopData.dataList[0][2] == 3) {
976
-          //综合排班,并且是科室绑定人员
978
+        if (this.workType == 2 && (this.coopData.dataList[0][2] == 2||this.coopData.dataList[0][2] == 3||this.coopData.dataList[0][2] == 4)) {
979
+          //自选排班,并且是科室绑定人员,科室绑定分组,绑定分组
977
           post("/auth/customOfflinePc", { userId: this.coopData.id }).then(
980
           post("/auth/customOfflinePc", { userId: this.coopData.id }).then(
978
             (result1) => {
981
             (result1) => {
979
               if (result1.status == 200) {
982
               if (result1.status == 200) {