乡村相册 考勤配置

src/saas/AppCountryAlbum/AttendanceSetting.vue

@@ -1,14 +1,14 @@
 <template>
-  <div class="AttendanceSetting">
-    <div class="cell-group">
-      <div class="cell-item" hover-class="bg-hover" @click="linkTo('/saas/AppCountryAlbum/AttendanceFiexdTime')">
+  <div class="AttendanceSetting" v-if="pageShow">
+    <div class="cell-group" v-if="!list.length">
+      <div class="cell-item" hover-class="bg-hover" @click="linkTo('./AttendanceFiexdTime')">
         <div class="cell-item__left">
           <h2>固定时间上下班</h2>
           <p>有固定的上下班时间，考核迟到早退</p>
         </div>
         <image src="./images/right.png" />
       </div>
-      <div class="cell-item" hover-class="bg-hover" @click="linkTo('/saas/AppCountryAlbum/AttendanceFlexibleTime')">
+      <div class="cell-item" hover-class="bg-hover" @click="linkTo('./AttendanceFlexibleTime')">
         <div class="cell-item__left">
           <h2>灵活时间上下班</h2>
           <p>上下班时间不固定，考核工时时长</p>
@@ -16,6 +16,43 @@
         <image src="./images/right.png" />
       </div>
     </div>
+    <div v-if="list.length">
+      <div class="config" v-for="(item, index) in list" :key="index">
+        <h2>当前配置：{{ item.title }}</h2>
+        <div class="config-wrapper">
+          <div class="config-item" v-if="item.type === '0'">
+            <label>上班时间：</label>
+            <span>{{ item.type === '0' ? item.workInTime : item.workInFrom }} - {{ item.type === '0' ? item.workOutTime : item.workOutEnd }}</span>
+          </div>
+          <div class="config-item" v-if="item.type === '1'">
+            <label>工作时长：</label>
+            <span>{{ item.workHoursLimit }}小时</span>
+          </div>
+          <div class="config-item">
+            <label>休息时间：</label>
+            <span v-if="item.openRestTime === '0'">未开启</span>
+            <span v-else>{{ item.restTimeBegin }} - {{ item.restTimeEnd }}</span>
+          </div>
+          <div class="config-item">
+            <label>打卡时间范围：</label>
+            <!-- <span>上班前2小时，下班后2小时打卡生效</span> -->
+            <span>{{ item.workInFrom }} - {{ item.workOutEnd }}</span>
+          </div>
+          <div class="config-item config-item__line" v-if="item.openWorkPoint === '1'">
+            <label>固定打卡点：</label>
+            <span>{{ item.workPointDesc.address }}</span>
+          </div>
+          <div class="config-item" v-else>
+            <label>固定打卡点：</label>
+            <span>未固定打卡点</span>
+          </div>
+        </div>
+        <div class="config-footer">
+          <div @click="toEdit(item)">修改规则</div>
+          <div @click="remove(item.id)">删除规则</div>
+        </div>
+      </div>
+    </div>
     <div class="tips">
       当前考勤时间为00:00~24:00，若新增考勤规则则以
       新增规则为准；
@@ -35,12 +72,18 @@
 
     data () {
       return {
-
+        list: [],
+        pageShow: false
       }
     },
 
     onLoad () {
+      this.$loading()
+      this.getConfigList()
 
+      uni.$on('update', () => {
+        this.getConfigList()
+      })
     },
 
     methods: {
@@ -48,6 +91,42 @@
         uni.navigateTo({
           url
         })
+      },
+
+      toEdit (item) {
+        if (item.type === '0') {
+          this.linkTo(`./AttendanceFiexdTime?id=${item.id}`)
+        } else {
+          this.linkTo(`./AttendanceFlexibleTime?id=${item.id}`)
+        }
+      },
+
+      remove (id) {
+        this.$confirm('确定删除该数据？').then(() => {
+          this.$http.post(`/app/appattendanceconfig/delete?ids=${id}`).then(res => {
+            if (res.code == 0) {
+              this.$u.toast('删除成功')
+              this.getConfigList()
+            }
+          })
+        })
+      },
+
+      getConfigList () {
+        this.$http.post(`/api/appattendanceconfig/list?size=1`).then(res => {
+          if (res.code === 0) {
+            this.list = res.data.records.map(v => {
+              return {
+                ...v,
+                title: v.type === '0' ? '固定时间上下班' : '灵活时间上下班',
+                workPointDesc: JSON.parse(v.workPointDesc)
+              }
+            })
+          }
+
+          this.pageShow = true
+          uni.hideLoading()
+        })
       }
     }
   }
@@ -61,6 +140,7 @@
   .bg-hover {
     background: #eee;
   }
+
   .AttendanceSetting {
     .tips {
       line-height: 44px;
@@ -70,6 +150,61 @@
       white-space: pre-line;
     }
 
+    .config {
+      padding: 32rpx 32rpx 0;
+      background: #fff;
+
+      h2 {
+        margin-bottom: 24px;
+        color: #333333;
+        font-size: 32px;
+        font-weight: 600;
+      }
+
+      .config-wrapper {
+        padding-bottom: 32px;
+
+        .config-item {
+          display: flex;
+          align-items: center;
+          line-height: 40px;
+          margin-bottom: 8px;
+          font-size: 28px;
+          color: #333333;
+
+          label {
+            color: #999999;
+          }
+
+          &.config-item__line {
+            display: block;
+
+            span {
+              display: block;
+            }
+          }
+        }
+      }
+
+      .config-footer {
+        display: flex;
+        align-items: center;
+        height: 108px;
+        border-top: 1px solid #DDDDDD;
+
+        div {
+          flex: 1;
+          font-size: 32px;
+          color: #1365DD;
+          text-align: center;
+
+          &:last-child {
+            color: #FF4466;
+          }
+        }
+      }
+    }
+
     .cell-group {
       .cell-item {
         display: flex;
@@ -106,4 +241,4 @@
       }
     }
   }
-</style>
+</style>