gdy_app_8/src/point/view/integral/deptRank.vue

<template>
  <div class="mrd-container">
    <van-nav-bar title="部门对比" left-text="返回" @click-left="$route_back" left-arrow />
    <van-dropdown-menu v-if="showSearchBar">
<!--  A/B分    -->
      <van-dropdown-item :title="timeScopeText" @open="calendarOpen"></van-dropdown-item>
      <van-dropdown-item :title="searchForm.deptName" ref="deptDropdownItem"><DeptSelectorDropdown @onConfirm="onConfirmDept" /></van-dropdown-item>
      <van-dropdown-item title="规则" ref="ruleDropdownItem"><RuleCategorySelDropdown @onConfirm="onConfirmRule" @onCancel="searchForm.ruleId = 0"/></van-dropdown-item>
      <van-dropdown-item>
        <van-icon name="list-switch" slot="title" size="1.5em" />
        <template slot="default">
          <van-cell center title="积分类型">
            <template #right-icon>
              <van-radio-group v-model="searchForm.ptId" direction="horizontal">
                <van-radio v-for="pt in pts" :key="pt.value" :name="pt.value">{{pt.text}}</van-radio>
              </van-radio-group>
            </template>
          </van-cell>
          <van-cell center title="包含子部门">
            <van-switch v-model="searchForm.deptIncludeSub" active-color="#26A2FF" slot="right-icon" size="24"/>
          </van-cell>
          <van-cell center title="包含子规则分类">
            <van-switch v-model="searchForm.ruleIncludeSub" active-color="#26A2FF" slot="right-icon" size="24"/>
          </van-cell>
        </template>
      </van-dropdown-item>
    </van-dropdown-menu>
    <div class="mrd-content">
      <scroller
        ref="scroller"
        :on-refresh="onRefresh"
      >
        <van-cell v-for="item in dataList" :key="item.id" :title="item.name" :value="item.point"/>
        <noData :list="dataList" />

      </scroller>
    </div>



    <van-calendar
      v-model="showCalendar"
      type="range"
      :allow-same-day="true"
      :min-date="minDate"
      :max-date="maxDate"
      :default-date="timeScope"
      :show-confirm="false"
      color="#26A2FF"
      @close="calendarClose"
      @confirm="calendarConfirm"
    />


  </div>
</template>


<script>
import Vue from 'vue';
import moment from "moment/moment";
import { DropdownMenu, DropdownItem ,Calendar,Switch} from 'vant';
import DeptSelectorDropdown from '@/components/DeptSelectorDropdown';
import RuleCategorySelDropdown from '@/components/RuleCategorySelDropdown';

Vue.use(DropdownMenu).use(DropdownItem).use(Calendar).use(Switch);

export default {
  name: "dept_rank",
  components:{
    DeptSelectorDropdown,
    RuleCategorySelDropdown
  },
  data(){
    let startDate = new Date();
    startDate.setTime(startDate.getTime() - 3600 * 1000 * 24 * 7);
    startDate = moment(startDate).format('YYYY-MM-DD');
    let endDate = moment().format('YYYY-MM-DD');
    let pts = this.$getTypes.map(type => {
      return {value:type.id,text:type.name,code:type.code}
    });
    let ptB = pts.filter(pt => pt.code === 'BF');
    ptB = ptB.length > 0 ? ptB[0] : null;

    let today = new Date();
    let minDate = new Date();
    minDate.setTime(today.getTime() - 3600 * 1000 * 24 * 30 * 6);
    let maxDate = new Date(today.getFullYear(),today.getMonth(),1);
    maxDate.setMonth(maxDate.getMonth() + 1);
    maxDate.setDate(0);

    return{
      pts:pts,
      searchForm:{
        startDate:startDate,
        endDate:endDate,
        deptId:0,
        deptName:'全公司',
        deptIncludeSub:false,
        ptId:ptB ? ptB.value : 0,
        ptName: ptB ? ptB.text : '',
        ruleId:0,
        ruleIncludeSub:false,
        itemId:0
      },
      dataList:[],
      showCalendar:false,
      minDate:minDate,
      maxDate:maxDate,
      timeScope:[new Date(startDate),new Date(endDate)],
      showSearchBar:!this.$supremeAuthority('employee')
    }
  },
  computed:{
    timeScopeText(){
      return moment(this.searchForm.startDate).format('MM/DD') + '-' + moment(this.searchForm.endDate).format('MM/DD')
    },
    currentPtName(){
      if (this.searchForm.ptId <= 0) return '积分分类';
      let pt = this.pts.filter(pt => pt.id === this.searchForm.ptId);
      return pt ? pt.name : '积分分类';
    }
  },
  watch:{
    timeScope(val){
      this.$nextTick(()=>{
        this.searchForm.startDate = moment(val[0]).format('YYYY-MM-DD');
        this.searchForm.endDate = moment(val[1]).format('YYYY-MM-DD');
      })
    },
    'searchForm.startDate'(val){
      this.onRefresh()
    },
    'searchForm.endDate'(val){
      this.onRefresh()
    },
    'searchForm.deptId'(val){
      this.onRefresh()
    },
    'searchForm.deptIncludeSub'(val){
      this.onRefresh()
    },
    'searchForm.ptId'(val){
      this.onRefresh()
    },
    'searchForm.ruleId'(val){
      this.onRefresh()
    },
    'searchForm.ruleIncludeSub'(val){
      this.onRefresh()
    },

  },
  created() {},
  methods:{
    calendarOpen(){
      this.showCalendar = true;
    },
    calendarClose(){
      this.showCalendar = false;
    },
    calendarConfirm(event){
      const [start,end] = event;
      this.timeScope = [start,end];
      this.showCalendar = false;
    },
    truncateString(str,length){
      if (str.length > length){
      }
      return str.length > length ? str.substring(0,length) : str;
    },
    onConfirmDept(deptItem){
      if (deptItem){
        this.searchForm.deptId = deptItem.id;
        this.searchForm.deptName = this.truncateString(deptItem.name,3);
      }else {
        this.searchForm.deptId = 0;
        this.searchForm.deptName = '全公司';
      }
      this.$refs.deptDropdownItem.toggle();
    },
    onConfirmRule(ruleId){
      this.searchForm.ruleId = ruleId || 0;
      this.$refs.ruleDropdownItem.toggle();
    },
    onRefresh(done){
      if (!this.searchForm.startDate || !this.searchForm.endDate || !this.searchForm.ptId){
        if (typeof done === 'function') done();
        return;
      }

      let msg = {
        type:'dr',
        start_date:this.searchForm.startDate,
        end_date:this.searchForm.endDate,
        pt_id:this.searchForm.ptId,
        dept_id:this.searchForm.deptId,
        dept_include_sub:this.searchForm.deptIncludeSub ? 1 : 0,
        item_id:0,
        rule_id:this.searchForm.ruleId,
        rule_include_sub:this.searchForm.ruleIncludeSub ? 1 : 0
      }

      this.$socketApiTow.sendData(msg,(res) => {
        if (res.code !== 1 || res.type !== msg.type){
          if (typeof done === 'function') done();
          return;
        }
        this.dataList = res.result.list;
        if (typeof done === 'function') done();
      })


    }
  }
}

</script>



<style scoped lang="less">
.mrd-container {
  background-color: white;

  & .mrd-content {
    margin-top: 0.2rem;
    position: relative;
    height: calc(100% - 2.1rem);
  }

}
</style>