gdy_qywx_m/src/components/integral/event_list.vue

<template>
  <div class="event-list__container">
    <van-nav-bar title="积分事件" left-text="返回" @click-left="$route_back" left-arrow></van-nav-bar>
    <van-search placeholder="请输入姓名或事件内容搜索" v-model="searchParams.keyword" @input="keyVal()"/>
    <van-dropdown-menu>
      <van-dropdown-item :title="dateItemTitle" ref="dateDropdownItem">
        <DateSelectorDropdown :title.sync="dateItemTitle" @onConfirm="onConfirmDate"/>
      </van-dropdown-item>
      <van-dropdown-item :title="deptDropdownItemTitle" ref="deptDropdownItem">
        <template slot="title">
          <Wxopendata type="departmentName" :openid="deptDropdownItemTitle"></Wxopendata>
        </template>
        <DeptSelectorDropdown @onConfirm="onConfirmDept"/>
      </van-dropdown-item>
      <van-dropdown-item title="规则分类" ref="ruleDropdownItem">
        <RuleCategorySelDropdown @onConfirm="onConfirmRule" @onCancel="searchParams.rule_id = null"/>
      </van-dropdown-item>
      <van-dropdown-item :title="pointTypeDropdownItemTitle" :options="pointTypeOption" v-model="pointType"
                         @change="onChangePointType"/>
    </van-dropdown-menu>
    <div class="event-list__content">
      <scroller ref="scroller" :on-refresh="refresh" :on-infinite="infinite" noDataText="我也是有底线的" :list="eventData">
        <van-cell-group>
          <div class="event-list__item" v-for="(item, index) in eventData" :key="index"
               @click="viewDetail(item)">
            <div class="event-item__name-wrap">
              <span class="event-item__name-icon">
                <userImage class="about-me__avatar" :img_url="item.employee_img_url" :user_name="item.employee_name" fontSize="0.24rem" width="0.72rem" height="0.72rem"></userImage>
              </span>
              <span class="event-item__name"><Wxopendata type="userName" :openid="item.employee_name"></Wxopendata></span>
              <span class="event-item__value green" v-if="item.point >= 0">+{{ item.point }}{{ types_list[item.pt_id]}}</span>
              <span class="event-item__value" v-else>{{ item.point }}{{ types_list[item.pt_id] }}</span>

            </div>
            <div class="event-content__text">
              <span>{{ item.remark }}</span>
            </div>
            <div class="event-time__text">
              <span>{{ moment(item.event_time).format('YYYY-MM-DD') }}</span>
            </div>
          </div>
        </van-cell-group>
        <van-empty v-if="!hasData" description="暂无数据..."/>
      </scroller>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import moment from 'moment'
import request from '@/utils/request'
import {_debounce, _throttle} from '@/utils/auth'
import {DropdownMenu, DropdownItem, Empty, Search} from 'vant'
import DateSelectorDropdown from '@/components/common/DateSelectorDropdown'
import DeptSelectorDropdown from '@/components/common/DeptSelectorDropdown'
import RuleCategorySelDropdown from '@/components/common/RuleCategorySelDropdown'
import userImage from '@/components/common/user_image'

Vue.use(Empty).use(DropdownMenu).use(DropdownItem).use(Search)

export default {
  name: 'event_list',
  data () {
    const pointTypeId = this.getPointType(this.$route.query.point_type)
    return {
      loading: true,
      isAPerson: this.$route.query.isAPerson || false,
      pointType: pointTypeId || -1,
      dateItemTitle: '本月',
      deptDropdownItemTitle: '全公司',
      eventData: [],
      moment:moment,
      searchParams: {
        dept_ids: null,
        end_day: null,
        employee_ids: null,
        month: moment().format('YYYY-MM'),
        start_day: null,
        page: 1,
        page_size: 10,
        rule_id: null,
        pt_id: pointTypeId,
        keyword: ''
      },
      types_list: {}
    }
  },
  components: {
    DateSelectorDropdown,
    DeptSelectorDropdown,
    RuleCategorySelDropdown,
    userImage
  },
  // watch: {
  //   'searchParams.keyword': function (val) {
  //     let self = this
  //     self.refresh(function () {
  //       self.$toast.clear()
  //     })
  //   }
  // },
  computed: {
    pointTypeOption () {
      const option = [{text: '全部', value: -1}]
      this.$store.getters.point_types.forEach(type => {
        option.push({text: `${type.name}事件`, value: type.id})
      })
      return option
    },
    pointTypeDropdownItemTitle () {
      if (this.pointType === -1) {
        return '积分分类'
      }
      return this.pointTypeOption.find(a => a.value === this.pointType).text
    },
    hasData () {
      return this.loading || (Array.isArray(this.eventData) && this.eventData.length > 0)
    }
  },
  created () {
    if (this.$route.query.employee_id) {
      this.searchParams.employee_ids = this.$route.query.employee_id
    }
    this.get_point_types()
  },
  methods: {
    keyVal:_debounce(function () {
      this.refresh(function () {})
    }),
    get_point_types () {
      let self = this
      for (let i in this.$store.getters.point_types) {
        self.types_list[this.$store.getters.point_types[i].id] = this.$store.getters.point_types[i].name
      }
    },
    getPointType (code) {
      const pointTypes = this.$store.getters.point_types
      const index = pointTypes.findIndex(a => a.code === code)
      if (index > -1) {
        return pointTypes[index].id
      }
      return null
    },
    getIconText (employeeName) {
      if (employeeName && employeeName.length > 2) {
        const len = employeeName.length
        return employeeName[len - 2] + employeeName[len - 1]
      }
      return employeeName
    },
    viewDetail (item) {
      this.$router.push({name: 'event_detail', query: {id: item.id}})
    },
    refresh (done) {
      this.searchParams.page = 1
      this.getEventData(done)
    },
    infinite (done) {
      this.searchParams.page++
      this.getEventData(done)
    },
    onConfirmDate (item) {
      this.searchParams.page = 1
      if (item.dateMode === 1) {
        this.searchParams.month = item.startDate
        this.searchParams.end_day = null
        this.searchParams.start_day = null
      } else {
        this.searchParams.month = null
        this.searchParams.end_day = item.startDate
        this.searchParams.start_day = item.endDate
      }
      this.$refs.dateDropdownItem.toggle()
      this.$refs.scroller.triggerPullToRefresh()
    },
    // 选择员工
    // onConfirmDept (deptItem) {
    //   this.searchParams.page = 1
    //   if (deptItem.employee.length > 0) {
    //     let employee_ids = []
    //     let employee_name = []
    //     for(let i in deptItem.employee){
    //       employee_ids.push(deptItem.employee[i].id)
    //       employee_name.push(deptItem.employee[i].name)
    //     }
    //     this.searchParams.employee_ids = employee_ids
    //     this.deptDropdownItemTitle = employee_name.toString()
    //   } else {
    //     this.searchParams.employee_ids = null
    //     this.deptDropdownItemTitle = '员工'
    //   }
    //   this.$refs.deptDropdownItem.toggle()
    //   this.$refs.scroller.triggerPullToRefresh()
    // },
    // 选择部门
    onConfirmDept (deptItem) {
      if (deptItem) {
        this.searchParams.dept_ids = deptItem.id
        this.deptDropdownItemTitle = deptItem.name
      } else {
        this.searchParams.dept_ids = null
        this.deptDropdownItemTitle = '全公司'
      }
      this.$refs.deptDropdownItem.toggle()
      this.$refs.scroller.triggerPullToRefresh()
    },
    onConfirmRule (ruleIds) {
      this.searchParams.page = 1
      this.searchParams.rule_id = ruleIds || null
      this.$refs.ruleDropdownItem.toggle()
      this.$refs.scroller.triggerPullToRefresh()
    },
    onChangePointType () {
      this.searchParams.page = 1
      this.searchParams.pt_id = this.pointType === -1 ? null : this.pointType
      this.$refs.scroller.triggerPullToRefresh()
    },
    getEventData (callback) {
      if (this.isAPerson) {
        // const isArray =  this.eventData;
        // let newarray = isArray.filter(item => {
        //   return item.employee_id == this.$store.getters.user_info.id && item.pt_id == this.pointType
        // })
        // this.eventData = newarray
        this.searchParams.employee_ids = this.$store.getters.user_info.id
      }

      this.loading = true
      request('get', '/api/integral/statistics/integral', this.searchParams).then((res) => {
        const {scroller} = this.$refs
        if (res.data.code === 1) {
          const {list} = res.data.data
          if (this.searchParams.page === 1) {
            this.eventData = list
          } else {
            this.eventData = this.eventData.concat(list)
          }
          scroller.finishInfinite(list.length !== this.searchParams.page_size)
        } else {
          scroller.finishInfinite(true)
        }
      }).finally(() => {
        this.loading = false
        callback && callback()
      })
    }
  }
}
</script>

<style scoped lang="less">
  .event-list__container {
    position: relative;

    & /deep/ .van-nav-bar {
      background-color: #26a2ff;
    }

    /deep/ .van-dropdown-menu__title--active {
      color: #26a2ff;
    }

    & /deep/ .van-dropdown-menu__item {
      &:nth-child(1), &:nth-child(2) {
        flex-grow: 0.9;
      }

      &:nth-child(4) {
        flex-grow: 1.25;

        & /deep/ .van-dropdown-menu__title {
          right: 0.06rem;
        }
      }
    }

    & .event-list__content {
      position: relative;
      height: calc(100% - 3rem);

      & .van-hairline--top-bottom:after,
      .body_com .van-hairline-unset--top-bottom:after {
        border: none;
      }
    }

    & .event-list__item {
      position: relative;
      display: flex;
      padding: 0.24rem 0.32rem;
      font-size: 0.32rem;
      color: #333;
      background: #fff;
      box-sizing: border-box;
      flex-direction: column;
      touch-action: none;

      &:not(:last-child)::after {
        position: absolute;
        box-sizing: border-box;
        content: ' ';
        pointer-events: none;
        right: 0;
        bottom: 0;
        left:0rem;
        border-bottom: 1px solid #ebedf0;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
      }

      & .event-item__name-wrap {
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;

        & .event-item__name-icon {
          position: relative;
          display: flex;
          width: 0.72rem;
          height: 0.72rem;
          font-size: 0.28rem;
          color: #fff;
          background: #26a2ff;
          align-items: center;
          justify-content: center;
          border-radius: 100%;
        }

        & .event-item__name {
          flex: 1;
          padding-left: 0.16rem;
          font-size: 0.36rem;
        }

        & .event-item__value {
          font-size: 0.36rem;
          color: #ff0000;
          text-align: right;

          &.green {
            color: #4bd964;
          }
        }
      }

      & .event-content__text {
        position: relative;
        padding-left: 0.91rem;
        color: #333;
      }

      & .event-time__text {
        position: relative;
        padding-top: 0.08rem;
        padding-left: 0.91rem;
        font-size: 0.28rem;
        color: #909399;
      }
    }
  }
</style>