gdy_app_8/src/point/view/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"><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-item v-model="searchParams.add_subtract"  :options="[{text:'全部',value:0},{text:'奖分',value: 1},{text:'扣分',value: 2}]" ><van-icon name="list-switch" slot="title" size="1.5em" /></van-dropdown-item>
    </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">{{ item.employee_name }}</span>
              <span class="event-item__value red" v-if="item.point >= 0">+{{ item.point }}{{ $getTypesName(item.pt_id)}}</span>
              <span class="event-item__value green" v-else>{{ item.point }}{{ $getTypesName(item.pt_id) }}</span>
            </div>
            <div class="event-content__text">
              <span>{{ item.remark }}</span>
            </div>
            <div class="event-time__text">
              <span>{{ item.event_time }}</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 { _debounce, _throttle } from '@/utils/auth';
import { DropdownMenu, DropdownItem, Empty, Search } from 'vant';
import DateSelectorDropdown from '@/components/DateSelectorDropdown';
import DeptSelectorDropdown from '@/components/DeptSelectorDropdown';
import RuleCategorySelDropdown from '@/components/RuleCategorySelDropdown';

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: [],
      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: '',
        add_subtract:0
      },
      types_list: {},
      month: moment().format('YYYY-MM'),
      add_subtract_items: [
        {
          value: '全部',
          id: 0
        },
        {
          value: '奖分',
          id: 1
        },
        {
          value: '扣分',
          id: 2
        },
      ]
    };
  },
  components: {
    DateSelectorDropdown,
    DeptSelectorDropdown,
    RuleCategorySelDropdown
  },
  computed: {
    pointTypeOption() {
      const option = [{ text: '全部', value: -1 }];
      this.$getTypes.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;
    }
  },
  methods: {
    keyVal: _debounce(function() {
      this.refresh(function() {});
    }),
    getPointType(code) {
      const pointTypes = this.$getTypes;
      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.endDate;
        this.searchParams.start_day = item.startDate;
      }
      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.searchParams.rule_ids = 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) {
        this.searchParams.employee_ids = this.$userInfo().id;
      }
      if(!this.searchParams.keyword){
        delete this.searchParams.keyword
      }
      this.loading = true;
      this.$axiosUser('get', '/api/pro/integral/statistics/integral', this.searchParams,'v3')
        .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();
        });
    }
  },
  watch: {
    'searchParams.add_subtract'(val,oVal){
      this.searchParams.page = 1;
      this.$refs.scroller.triggerPullToRefresh();
    }
  }
};
</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;
        text-align: right;
      }
    }

    & .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>