zuel-itsm-3.0.2/src/views/workList.vue

<template>
  <div class="bgColor">
    <div slot="content" class="scroll-wrapper" style="height:100%;">
      <div class="demo" style="height:100%;">
        <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
            class="stateSearch_item btn"
            @click="showDatePicker"
            >{{ nowDate | timeFormat("MM-dd") }}<i class="cube-select-icon"></i
          ></cube-button>
          <!-- <cube-select
            class="stateSearch_item"
            v-model="searchType1"
            :options="searchsType1"
            @change="stateChange1()"
          ></cube-select> -->
          <cube-select
            class="stateSearch_item"
            v-model="searchType2"
            :options="searchsType2"
            @change="stateChange2()"
          ></cube-select>
        </div>
        <div class="scroll-list-wrap" v-show="!loadShow && !wushuju">
          <cube-scroll ref="scroll" :data="items" :options="options">
            <div class="conentBox">
              <div class="conent" v-for="item in items" :key="item.id">
                <div class="head">
                  <div class="head_d">
                    <span>{{ item.userName }}</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 style="word-break:break-all;text-align:justify;">
                    三方公司：{{ item.company || "无" }}
                  </div>
                  <div style="word-break:break-all;text-align:justify;">
                    打卡地址：{{ item.extra1 || "无" }}
                  </div>
                </div>
              </div>
            </div>
          </cube-scroll>
        </div>
        <div class="wushuju scroll-list-wrap" v-show="wushuju">
          <img src="./../../static/images/wushuju.svg" alt />
          <p>暂无数据</p>
        </div>
      </div>
    </div>
    <load-ing v-show="loadShow"></load-ing>
  </div>
</template>
<script>
import { formatDate } from "./../components/js/date.js";
import LoadIng from "./../views/loading.vue";
export default {
  data() {
    return {
      items: [],
      itemsSave: [],
      itemsSaveNoOn: [],//未打卡-上班
      itemsSaveNoOff: [],//未打卡-下班
      wushuju: false,
      searchsType1: [
        {
          text: "全部",
          value: "0"
        },
        {
          text: "上班",
          value: "1"
        },
        {
          text: "下班",
          value: "2"
        }
      ],
      searchsType2: [],
      searchsType2_on:[
        {
          text: "全部",
          value: "0"
        },
        {
          text: "实到",
          value: "1"
        },
        {
          text: "迟到",
          value: "2"
        },
        {
          text: "未打卡",
          value: "4"
        },
      ],
      searchsType2_off:[
        {
          text: "全部",
          value: "0"
        },
        {
          text: "早退",
          value: "3"
        },
        {
          text: "未打卡",
          value: "4"
        },
      ],
      searchType1: '1',
      searchType2: "0",
      stateClass: "",
      loadShow: false,
      datePicker: null,
      nowDate: new Date()
    };
  },
  components: {
    LoadIng
  },
  computed: {
    options() {
      return {};
    }
  },
  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({
          title: "日期选择",
          max: new Date(),
          value: this.nowDate,
          onSelect: this.selectHandle
        });
      }
      this.datePicker.show();
    },
    selectHandle(date, selectedVal, selectedText) {
      this.nowDate = date;
      this.getData();
    },
    stateChange() {
      var arr = [];
      if (this.searchType1 === "1") {
        //上班
        arr = this.itemsSave.filter(v => v.opValue === "1");
      } else if (this.searchType1 === "2") {
        //下班
        arr = this.itemsSave.filter(v => v.opValue === "0");
      } else if (this.searchType1 === "0") {
        //全部
        arr = JSON.parse(JSON.stringify(this.itemsSave));
      }
      if (this.searchType2 === "1") {
        //实到
        let arr1 = arr.filter(v => v.extra2 == "迟到");
        let arr2 = arr.filter(v => v.extra2 == "正常");
        this.items = [...arr1,...arr2];
      } 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();
    },
    stateChange2() {
      this.stateChange();
    },
    getData() {
      this.loadShow = true;
      let postData = formatDate(this.nowDate, "yyyy-MM-dd");
      this.$http.post("service/auth/onlineInfo/" + postData, {}).then(res => {
        if (res.data.data.length > 0) {
          this.wushuju = false;
          for (var i = 0; i < res.data.data.length; i++) {
            res.data.data[i].opTime = formatDate(
              new Date(res.data.data[i].opTime),
              "hh:mm"
            );
          }
          // 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;
      });
    }
  },
  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.81rem);
  border-radius: 5px;
  transform: rotate(0deg); // fix 子元素超出边框圆角部分不隐藏的问题
  overflow: hidden;
  padding-top: 1.81rem;
}

.foods-wrapper {
  .food-item {
    display: flex;

    /* padding: 18px */
    /* border-bottom: 1px solid rgba(7, 17, 27, 0.1) */
    /* border-top: 1px solid rgba(7, 17, 27, 0.1)!important */
    &:last-child {
      border-none();
      margin-bottom: 0;
    }

    .icon {
      flex: 0 0 57px;
      margin-right: 10px;
    }

    .food-content {
      flex: 1;

      .name {
        margin: 2px 0 8px 0;
        height: 14px;
        line-height: 14px;
        font-size: 14px;
        color: rgb(7, 17, 27);
      }

      .description, .extra {
        line-height: 10px;
        font-size: 10px;
        color: rgb(147, 153, 159);
      }

      .description {
        line-height: 12px;
        margin-bottom: 8px;
      }

      .extra {
        .count {
          margin-right: 12px;
        }
      }

      .price {
        font-weight: 700;
        line-height: 24px;

        .now {
          margin-right: 8px;
          font-size: 14px;
          color: rgb(240, 20, 20);
        }

        .old {
          text-decoration: line-through;
          font-size: 10px;
          color: rgb(147, 153, 159);
        }
      }

      .cartcontrol-wrapper {
        position: absolute;
        right: 0;
        bottom: 12px;

        .scroll-wrapper {
          .cube-pulldown-wrapper {
            .before-trigger {
              font-size: 30px;
              line-height: 30px;
              align-self: flex-end;

              span {
                display: inline-block;
                transition: all 0.3s;
                color: #666;

                &.rotate {
                  transform: rotate(180deg);
                }
              }
            }

            .after-trigger {
              .refresh-text {
                color: grey;
              }
            }
          }
        }
      }
    }
  }
}
</style>
<style lang="less" scoped>
.cont {
  margin-top: 1.86rem;
}
.header {
  width: 100%;
  height: 0.88rem;
  line-height: 0.88rem;
  text-align: center;
  color: #fff;
  font-size: 0.37rem;
  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.93rem;
  z-index: 6;
  display: flex;
  justify-content: center;
  align-items: center;
  .stateSearch_item {
    flex: 1;
    &.btn {
      position: relative;
      text-align: left;
    }
    .cube-select-icon {
      position: absolute;
      right: 8px;
      top: 50%;
      -webkit-transform: translate(0, -50%);
      transform: translate(0, -50%);
      border-style: solid;
      border-color: #999 transparent transparent transparent;
      border-width: 4px 4px 0 4px;
      -webkit-transition: -webkit-transform 0.3s ease-in-out;
      transition: -webkit-transform 0.3s ease-in-out;
      transition: transform 0.3s ease-in-out;
      transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
    }
  }
}
.bgColor {
  background-color: white;
}
.food-item {
  border-top: 0.16rem rgb(238, 238, 238) solid;
}
.food-content {
  border-top: 0.01rem rgb(223, 222, 222) solid;
  border-bottom: 0.01rem rgb(223, 222, 222) solid;
}
.cube-btn-light,
.cube-select {
  box-shadow: none;
  border-bottom: 0.02rem solid #e5e5e5;
}
.cube-select,
.cube-btn {
  height: 0.88rem;
  line-height: 0.88rem;
  padding: 0 0.24rem;
  font-size: 0.36rem;
  color: #333333;
  background-color: #fff;
}
.cube-btn{
  border-top: 0.02rem solid #e5e5e5;
}
.title {
  display: flex;
  justify-content: space-between;
  height: 0.7rem;
  line-height: 0.7rem;
  border-top: 0.01rem rgb(223, 222, 222) solid;
  padding: 0 0.24rem;
  border-bottom: 0.01rem rgb(223, 222, 222) solid;
}
.title i {
  font-size: 0.32rem;
  color: #005395;
}
.title div:nth-child(1) {
  font-size: 0.32rem;
}
.title div:nth-child(1) span {
  display: inline-block;
  margin-left: 0.08rem;
}
.title div:nth-child(2) {
  padding: 0.05rem 0.3rem;
  /* border: 0.01rem rgb(0,0,255) solid; */
  border-radius: 16px;
  /* color: rgb(0,0,255); */
  height: 0.25rem;
  line-height: 0.25rem;
  margin-top: 0.15rem;
  font-size: 0.24rem;
}
.weishouli {
  color: #991f00;
  border: 0.01rem #991f00 solid;
  background-color: #f4e8e5;
}
.bushouli {
  color: #666666;
  background-color: #eeeeee;
  border: 0.01rem #666666 solid;
}
.chulizhong {
  color: #003057;
  background-color: #e5eaee;
  border: 0.01rem #003057 solid;
}
.daipingjia {
  color: #825b00;
  background-color: #f2eee5;
  border: 0.01rem #825b00 solid;
}
.yijiejue {
  color: #40a19c;
  background-color: #ebf5f5;
  border: 0.01rem #40a19c solid;
}
.yichehui {
  color: #48a843;
  background-color: #ecf6ec;
  border: 0.01rem #48a843 solid;
}
// .conent {
//   font-size: 0.28rem;
//   line-height: 0.39rem;
//   overflow: hidden;
//   display: -webkit-box;
//   -webkit-line-clamp: 2;
//   -webkit-box-orient: vertical;
//   word-break: break-all;
//   padding: 0 0.64rem;
//   margin: 0.24rem 0;
// }
.timeBox {
  display: flex;
  justify-content: space-between;
  font-size: 0.24rem;
  color: #999999;
  border-top: 0.01rem rgb(223, 222, 222) solid;
  height: 0.7rem;
  line-height: 0.7rem;
  padding: 0 0.24rem 0 0.64rem;
}
.wushuju {
  text-align: center;
  color: #999;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.wushuju img {
  width: 5.12rem;
  height: 2.84rem;
}
.conentBox {
  width: 100%;
  height: 100%;
  .conent {
    font-size: 0.32rem;
    font-weight: 400;
    line-height: 0.45rem;
    border-bottom: 0.16rem solid #e5e5e5;
    .head {
      .head_d {
        padding: 0.12rem 0.48rem;
        display: flex;
        span {
          flex: 1;
          text-align: right;
          &:first-of-type {
            text-align: left;
          }
        }
      }
    }
    .center {
      color: #333333;
      div {
        padding: 0.12rem 0.48rem;
      }
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      overflow: hidden;
      height: 0.86rem;
      border-bottom: 0.01rem solid #e6e6e6;
      font-size: 0.24rem;
      color: #999;
      padding: 0 0.24rem 0 0.48rem;
    }
  }
}
</style>