x-php-Admin/src/views/user/trajectory/index.vue

<template>
  <div style="height:100%;">
    <flexbox class="message-header">
      <img src="@/assets/img/crm/todo.png" class="title-icon">
      <span class="title">待办事项</span>
    </flexbox>
    <div class="message-body">
      <div
        v-loading="loading"
        class="message-content">
        <div class="message-body-side">
          <x-menu-item
            v-for="(item, index) in showLeftSides"
            :key="index"
            :label="item.name"
            :num="item.num"
            :icon-class="item.iconClass"
            :icon-color="item.color"
            :select="leftType==item.infoType"
            @click="sideClick(item)"/>
        </div>
        <div class="message-body-content">
          <xTable name="OfferCollege"></xTable>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import XMenuItem from '@/components/XMenu/XMenuItem'
import xTable from '@/views/system/table'  


export default {
  /** 客户管理 的 消息列表 */
  name: 'trajectory',

  components: {
    xTable,
    XMenuItem,
  },

  data() {
    return {
      loading: false,
      leftType: '',
      info: {},
      leftSides: [
        {
          name: '今日需联系线索',
          color: '#2362FB',
          iconClass: 'wk wk-leads',
          infoType: 'todayLeads',
          num: 10,
          hidden: false
        },
        {
          name: '今日需联系客户',
          color: '#2362FB',
          iconClass: 'wk wk-customer',
          infoType: 'todayCustomer',
          num: 0,
          hidden: false
        },
        {
          name: '今日需联系商机',
          color: '#2362FB',
          iconClass: 'wk wk-business',
          infoType: 'todayBusiness',
          num: 0,
          hidden: false
        },
        {
          name: '分配给我的线索',
          color: '#704AFD',
          iconClass: 'wk wk-leads',
          infoType: 'followLeads',
          num: 0,
          hidden: false
        },
        {
          name: '分配给我的客户',
          color: '#19B5F6',
          iconClass: 'wk wk-s-seas',
          infoType: 'followCustomer',
          num: 0,
          hidden: false
        },
        {
          name: '待进入公海的客户',
          color: '#26D4DA',
          iconClass: 'wk wk-seas',
          infoType: 'putInPoolRemind',
          num: 0,
          hidden: false
        },
        {
          name: '待审核合同',
          color: '#FD5B4A',
          iconClass: 'wk wk-contract',
          infoType: 'checkContract',
          num: 0,
          hidden: false
        },
        {
          name: '待审核回款',
          color: '#FFB940',
          iconClass: 'wk wk-receivables',
          infoType: 'checkReceivables',
          num: 0,
          hidden: false
        },
        {
          name: '待回款提醒',
          color: '#27BA4A',
          iconClass: 'wk wk-bell',
          infoType: 'remindReceivablesPlan',
          num: 0,
          hidden: false
        },
        {
          name: '即将到期的合同',
          color: '#FF7A38',
          iconClass: 'wk wk-contract',
          infoType: 'endContract',
          num: 0,
          hidden: false
        },
        {
          name: '待回访合同',
          color: '#ff9232',
          iconClass: 'wk wk-house',
          infoType: 'returnVisitRemind',
          num: 0,
          hidden: false
        },
        {
          name: '待审核发票',
          color: '#ff9232',
          iconClass: 'wk wk-invoice',
          infoType: 'checkInvoice',
          num: 0,
          hidden: false
        }
      ]
    }
  },

  computed: {
    showLeftSides() {
      return this.leftSides.filter(item => {
        return !item.hidden
      })
    }
  },

  watch: {
    /** 变化就刷新数据 */
    messageNum() {
      this.refreshNum()
    }
  },

  mounted() {
    // this.loading = true
    this.requestNumCount()
    /** 控制table的高度 */
    window.onresize = () => {
      var offsetHei = document.documentElement.clientHeight
      this.$bus.emit('message-scroll', offsetHei - 300)
    }
  },

  methods: {
    /**
     * 获取数据
     */
    requestNumCount() {
      // this.$store
      //   .dispatch('GetMessageNum')
      //   .then(res => {
      //     this.loading = false
      //     this.refreshNum()
      //   })
      //   .catch(() => {
      //     this.loading = false
      //   })

      this.refreshNum()
    },

    /**
     * 刷新消息数据
     */
    refreshNum() {
      for (let index = 0; index < this.leftSides.length; index++) {
        const element = this.leftSides[index]
        // if (this.messageNum.hasOwnProperty(element.infoType)) {
          // element.num = this.messageNum[element.infoType] || 0
          element.hidden = false
        // } else {
        //   element.hidden = true
        // }
      }

      if (!this.leftType && this.showLeftSides.length > 0) {
        this.leftType = this.showLeftSides[0].infoType
      }
    },

    /**
     * 消息页面点击操作
     */
    messageHandle(data) {
      if (data.type == 'follow') {
        const copyNum={}
        const num = parseInt(copyNum[data.infoType]) - data.value
        copyNum[data.infoType] = num > 0 ? num : 0
        this.$store.commit('SET_MESSAGENUM', copyNum)
      }
    },

    /**
     * 侧边点击
     */
    sideClick(item) {
      this.info = item
      this.leftType = item.infoType
    }
  }
}
</script>

<style lang="scss" scoped>
.message-header {
  margin-left: 28px;
  height: 60px;
  .title-icon {
    width: 30px;
    height: 30px;
    margin-right: 10px;
  }

  .title {
    font-size: 16px;
    font-weight: 600;
  }
}
.message-body {
  position: relative;
  height: calc(100% - 70px);
  padding-left: 10px;
}
.message-content {
  position: relative;
  height: 100%;
}

.message-body-side {
  padding: 20px 0;
  width: 180px;
  font-size: 14px;
  background-color: white;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1;
border: 1px solid #e6e6e6;
  border-radius: 4px;
  overflow-y: auto;
  .side-item {
    position: relative;
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    font-size: 13px;
    cursor: pointer;
    i {
      color: #999;
    }
  }
}
.message-body-content {
  margin-left: 190px;
  margin-right: 10px;
  height: 100%;
  overflow: hidden;
  background-color: white;
  border: 1px solid #e6e6e6;
    border-radius: 4px;
}

</style>