ebiz-h5/src/views/ebiz/manpower/ActiveManagement.vue

<!-- 活动量管理 -->
<template>
  <div class="pb40">
    <van-collapse v-model="weeklyNames">
      <van-collapse-item title="活动量统计周报" title-class="fs16 fwb" name="1">
        <van-grid :column-num="2">
          <van-grid-item>
            <p class="fs14">周白板面谈数量</p>
            <p class="fs14 mt20 fwb">{{ weeklyInfo.whiteboard }}</p>
          </van-grid-item>
          <van-grid-item>
            <p class="fs14">周同业面谈数量</p>
            <p class="fs14 mt20 fwb">{{ weeklyInfo.sameTrade }}</p>
          </van-grid-item>
        </van-grid>
      </van-collapse-item>
    </van-collapse>

    <!-- 人才库 -->
    <div class="bg-white">
      <van-collapse v-model="talentPoolCollapse" v-if="talentPoolList.length > 0">
        <van-collapse-item name="1" title-class="fs16 fwb">
          <div slot="title" class="flex justify-content-s align-items-c">
            人才库
            <van-icon class="mr10" name="plus" @click.stop="addTalentPool" />
          </div>
          <van-cell-group>
            <TalentPoolItem v-for="talentPoolInfo in talentPoolList" :key="talentPoolInfo.personnelCode" :talentPoolInfo="talentPoolInfo"></TalentPoolItem>
          </van-cell-group>
          <p v-if="showMoreTalentPool" class="p15 text-right blue" @click="toListTalentPool">查看全部>>></p>
        </van-collapse-item>
      </van-collapse>
      <template v-else>
        <van-cell class="fs16 fwb">
          <div slot="title" class="flex justify-content-s align-items-c">
            人才库
          </div>
        </van-cell>
        <van-cell>
          <template slot="title">
            <div class="text-center"><van-icon name="add-square" size="50" color="#1989fa" @click="addTalentPool" /></div>
          </template>
        </van-cell>
      </template>
    </div>

    <!-- 当日增员活动日志 -->
    <div class="bg-white">
      <div class="p15" v-if="recordList.length == 0">
        <p class="fs16 fwb">当日增员活动日志</p>
        <div class="text-center van-hairline--top"><van-icon name="add-square" size="50" color="#1989fa" @click="toEdit" /></div>
      </div>
      <van-collapse v-model="recordNames" v-else>
        <van-collapse-item name="1" title-class="fs16 fwb">
          <div slot="title" class="flex justify-content-s align-items-c">当日增员活动日志 <van-icon class="mr10" name="plus" @click.stop="toEdit" /></div>
          <ActivityLogItem :ActivityLogInfo="info" v-for="(info, index) in recordList" :key="index"></ActivityLogItem>
          <p v-if="showMore" class="p15 text-right blue" @click="toList">查看全部>>></p>
        </van-collapse-item>
      </van-collapse>
    </div>
  </div>
</template>
<script>
import formatDate from '@/assets/js/utils/date-utils'
import { Collapse, CollapseItem, Grid, GridItem, Cell, CellGroup } from 'vant'
import TalentPoolItem from '@/components/ebiz/manpower/TalentPoolItem'
import ActivityLogItem from '@/components/ebiz/manpower/ActivityLogItem'
import { getAgentPersonnelListFirst, queryWeekly, queryRecordList } from '@/api/ebiz/manpower/manpower'

export default {
  components: {
    [Collapse.name]: Collapse,
    [CollapseItem.name]: CollapseItem,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    TalentPoolItem,
    ActivityLogItem
  },
  data() {
    return {
      weeklyNames: ['1'],
      personnelNames: ['1'],
      recordNames: ['1'],
      talentPoolInfo: {
        name: '王辉',
        sameCompany: '中国人寿'
      },
      ActivityLogInfo: {
        recordCode: '',
        name: '王辉',
        // avatarUrl: 'https://img.yzcdn.cn/vant/cat.jpeg',
        age: '35岁',
        type: '同业',
        recordDate: formatDate.formatDate().split(' ')[0]
      },
      // 日志统计周报信息
      weeklyInfo: {
        whiteboard: '', // 白板
        sameTrade: '' // 同业
      },
      // 人才列表
      showMoreTalentPool: false,
      talentPoolCollapse: ['1'],
      talentPoolList: [],
      // 日志列表
      showMore: false,
      // 增员日志列表
      recordList: []
    }
  },
  mounted() {
    this.queryWeekly()
    this.getAgentPersonnelListFirst()
    this.queryRecordList()
  },
  methods: {
    // 获取日志统计周报
    queryWeekly() {
      queryWeekly({})
        .then(res => {
          console.log(res)
          if (res.result == 0) {
            this.weeklyInfo = res.content.weekly
          } else {
            this.$toast(res.resultMessage)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 查询增员日志列表
    queryRecordList() {
      let data = {
        recordDate: ''
      }
      queryRecordList(data)
        .then(res => {
          if (res.result == 0) {
            let data = res.content.records
            if (data.length > 5) {
              this.showMore = true
              data = data.slice(0, 5)
            } else {
              this.showMore = false
            }
            this.recordList = data
          } else {
            this.$toast(res.resultMessage)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    toList() {
      this.$jump({
        flag: 'h5',
        extra: {
          url: location.origin + `/#/manpower/ActivityLog/List`,
          forbidSwipeBack: '1'
        },
        routerInfo: { path: '/manpower/ActivityLog/List' }
      })
    },
    toEdit() {
      this.$jump({
        flag: 'h5',
        extra: {
          url: location.origin + `/#/manpower/ActivityLog/Edit?isEdit=1`,
          forbidSwipeBack: '1'
        },
        routerInfo: { path: '/manpower/ActivityLog/Edit?isEdit=1' }
      })
    },
    addTalentPool() {
      this.$jump({
        flag: 'h5',
        extra: {
          url: location.origin + '/#/manpower/talentPool/Add'
        },
        routerInfo: {
          path: '/manpower/talentPool/Add'
        }
      })
    },
    toListTalentPool() {
      this.$jump({
        flag: 'h5',
        extra: {
          url: location.origin + '/#/manpower/talentPool/'
        },
        routerInfo: {
          path: '/manpower/talentPool/'
        }
      })
    },
    getAgentPersonnelListFirst() {
      getAgentPersonnelListFirst()
        .then(res => {
          if (res.result == 0) {
            let data = res.content.personnels
            if (data.length > 5) {
              this.showMoreTalentPool = true
              data = data.slice(0, 5)
            } else {
              this.showMoreTalentPool = false
            }
            this.talentPoolList = data
          } else {
            this.$toast(res.resultMessage)
          }
        })
        .catch(() => {})
    }
  }
}
</script>
<style lang="scss" scoped></style>