dvcp_v2_wxcp_app/src/project/caw/AppCountryAlbum/AttendanceSetting.vue

<template>
  <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('./AttendanceFlexibleTime')">
        <div class="cell-item__left">
          <h2>灵活时间上下班</h2>
          <p>上下班时间不固定，考核工时时长</p>
        </div>
        <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">
      <span v-if="!list.length">当前考勤时间为00:00~24:00，若新增考勤规则则以
      新增规则为准；</span>
      工作时长=（最晚拍照时间）-（最早拍照时间）；
      若员工“最早”或者“最晚”拍照时间缺失，对应工作时长为空；
      上班时间=最早拍照时间；
      下班时间=最晚拍照时间。
    </div>
  </div>
</template>

<script>
  export default {
    name: 'AttendanceSetting',

    appName: '考勤设置',

    data () {
      return {
        list: [],
        pageShow: false
      }
    },

    onLoad () {
      this.$loading()
      this.getConfigList()

      uni.$on('update', () => {
        this.getConfigList()
      })
    },

    methods: {
      linkTo (url) {
        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()
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .text-hover {
    opacity: 0.7;
  }

  .bg-hover {
    background: #eee;
  }

  .AttendanceSetting {
    .tips {
      line-height: 44px;
      margin: 32px;
      font-size: 28px;
      color: #999999;
      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;
        align-items: center;
        justify-content: space-between;
        height: 156px;
        margin-bottom: 16px;
        padding: 0 32px;
        background: #FFFFFF;

        &:active {
          background: #eee;
        }

        image {
          width: 32px;
          height: 32px;
        }

        &:last-child {
          margin-bottom: 0;
        }

        h2 {
          margin-bottom: 12px;
          color: #333333;
          font-size: 32px;
        }

        p {
          color: #999999;
          font-size: 28px;
        }
      }
    }
  }
</style>