crm-mobile/pages_message/backlogDetailTab.vue

<template>
  <view class="uni-app">
    <view class="status-bar" />
    <view class="main-container">
      <!-- #ifdef MP-WEIXIN -->
      <wk-nav-bar
        :command-list="commandList"
        :title="title"
        @command="handleCommand" />
      <!-- #endif -->
      <!-- #ifndef MP-WEIXIN -->
      <wk-nav-bar :title="title">
<!--        <text
          v-if="commandList.length > 0"
          class="read-all"
          @click="handleReadAll">
          全部已处理 
        </text> -->
      </wk-nav-bar>
      <!-- #endif -->

      <view class="list-wrapper">
        <view class="wk-tabs">
          <view
            v-for="(tab, index) in tabs"
            :key="index"
            :class="{active: activeTab === tab.value}"
            class="wk-tab-item"
            @click="handleToggleTabs(tab.value)">
            {{ tab.label }}
          </view>
        </view>

        <wk-scroll-view
          :status="listStatus"
          :refresh="false"
          class="list-scroll"
          @loadmore="getList()">
          <template v-for="(data, index) in listData">
            <detail-customer-item
              v-if="activeCom === 'DetailCustomerItem'"
              :key="index"
              :type="typeObj.type"
              :item-data="data"
              :open-slider="openSlider"
              @refresh="handleRefresh(index)" />
            <detail-receivables-item
              v-else-if="activeCom === 'DetailReceivablesItem'"
              :key="index"
              :type="typeObj.type"
              :item-data="data"
              :open-slider="openSlider"
              @refresh="handleRefresh(index)" />
            <detail-contract-item
              v-else-if="activeCom === 'DetailContractItem'"
              :key="index"
              :type="typeObj.type"
              :item-data="data"
              :open-slider="openSlider"
              @refresh="handleRefresh(index)" />
            <detail-leads-item
              v-else-if="activeCom === 'DetailLeadsItem'"
              :key="index"
              :type="typeObj.type"
              :item-data="data"
              :open-slider="openSlider"
              @refresh="handleRefresh(index)" />
            <detail-await-receivables-item
              v-else-if="activeCom === 'DetailAwaitReceivablesItem'"
              :key="index"
              :type="typeObj.type"
              :item-data="data"
              :open-slider="openSlider"
              @refresh="handleRefresh(index)" />
            <detail-examination-item
              v-else-if="activeCom === 'DetailExaminationItem'"
              :key="index"
              :type="typeObj.type"
              :item-data="data"
              :open-slider="openSlider"
              @refresh="handleRefresh(index)" />
            <detail-business-item
              v-else-if="activeCom === 'DetailBusinessItem'"
              :key="index"
              :type="typeObj.type"
              :item-data="data"
              @refresh="handleRefresh(index)" />
          </template>
        </wk-scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
  import * as API from 'API/crm/message'
  import { WaitingQueryOaExamineList } from 'API/oa/examine.js'

  import DetailCustomerItem from './backlog/detailCustomerItem'
  import DetailContractItem from './backlog/detailContractItem'
  import DetailLeadsItem from './backlog/detailLeadsItem'
  import DetailReceivablesItem from './backlog/detailReceivablesItem'
  import DetailAwaitReceivablesItem from './backlog/detailAwaitReceivablesItem'
  import DetailExaminationItem from './backlog/detailExaminationItem'
  import DetailBusinessItem from './backlog/detailBusinessItem.vue'

  import mainListMixins from '@/mixins/mainList.js'

  export default {
    name: 'BacklogDetilTab',
    components: {
      DetailCustomerItem,
      DetailReceivablesItem,
      DetailContractItem,
      DetailLeadsItem,
      DetailAwaitReceivablesItem,
      DetailExaminationItem,
      DetailBusinessItem
    },
    mixins: [mainListMixins],
    data() {
      return {
        routerQuery: {},
        activeTab: -1,
        tabs: [],

        title: '',
        activeCom: '',
        typeObj: {},
        filterData: {},
        loading: false,

        typeMap: [
          {
            label: '分配给我的线索',
            type: 2,
            component: 'DetailLeadsItem',
            fn: API.FollowLeads,
            options: [
              {label: '待跟进', value: 1},
              {label: '已跟进', value: 2},
            ],
            optionField: 'type'
          }, // 2
          {
            label: '分配给我的客户',
            type: 3,
            component: 'DetailCustomerItem',
            fn: API.FollowCustomer,
            options: [
              {label: '待跟进', value: 1},
              {label: '已跟进', value: 2},
            ],
            optionField: 'type'
          }, // 3
          {
            label: '待进入公海的客户',
            type: 4,
            component: 'DetailCustomerItem',
            fn: API.PutInPoolRemind,
            options: [
              {label: '我的', value: 1},
              {label: '我下属的', value: 2}
            ],
            optionField: 'isSub'
          }, // 4
          {
            label: '即将到期的合同',
            type: 8,
            component: 'DetailContractItem',
            fn: API.EndContract,
            options: [
              {label: '即将到期', value: 1},
              {label: '已到期', value: 2}
            ],
            optionField: 'type'
          }, // 8
          {
            label: '待审核合同',
            type: 5,
            component: 'DetailContractItem',
            fn: API.CheckContract,
            options: [
              {label: '待审核', value: 1},
              {label: '已审核', value: 2}
            ],
            optionField: 'type'
          }, // 5
          {
            label: '待审核回款',
            type: 6,
            component: 'DetailReceivablesItem',
            fn: API.CheckReceivables,
            options: [
              {label: '待审核', value: 1},
              {label: '已审核', value: 2}
            ],
            optionField: 'type'
          }, // 6
          {
            label: '待回款提醒',
            type: 7,
            component: 'DetailAwaitReceivablesItem',
            fn: API.RemindReceivablesPlan,
            options: [
              {label: '待回款', value: 1},
              {label: '已回款', value: 2},
              {label: '已逾期', value: 3}
            ],
            optionField: 'type'
          }, // 7
          {
            label: '待审核的办公',
            type: 100,
            component: 'DetailExaminationItem',
            fn: WaitingQueryOaExamineList,
            options: [
              {label: '待审核', value: 1},
              {label: '已审核', value: 2}
            ],
            optionField: 'status'
          }, // 100
          {
            label: '今日需联系线索',
            type: 11,
            component: 'DetailLeadsItem',
            fn: API.TodayLeads,
            options: [
              {label: '今日需联系', value: 1},
              {label: '已逾期', value: 2},
              {label: '已联系', value: 3}
            ],
            optionField: 'type'
          }, // 11
          {
            label: '今日需联系商机',
            type: 12,
            component: 'DetailBusinessItem',
            fn: API.TodayBusiness,
            options: [
              {label: '今日需联系', value: 1},
              {label: '已逾期', value: 2},
              {label: '已联系', value: 3}
            ],
            optionField: 'type'
          }, // 12
        ],
      }
    },
    computed: {
      openSlider() {
        if (!this.typeObj) return false
        return [2, 3].includes(this.typeObj.type) && this.filterData.type === 1
      },
      commandList() {
        if (!this.typeObj) return []
        if (this.typeObj.type === 100) return []
        return [{
         label: '全部已处理',
         imgIcon: 'dealStatus',
         value: 'readAll'
      }]
      }
    },
    onLoad(options) {
      this.routerQuery = options
    },
    onShow() {
      this.$nextTick(() => {
        this.initCom()
      })
    },
    methods: {
      /**
       * 初始化数据
       */
      initCom() {
        this.listData = []
        let type = this.routerQuery.type || null
        let findRes = this.typeMap.find(item => item.type === Number(type))
        if (findRes) {
          this.title = findRes.label
          this.activeCom = findRes.component
          this.typeObj = findRes

          this.tabs = this.typeObj ? this.typeObj.options : []
          this.activeTab = this.tabs.length > 0 ? this.tabs[0].value : -1

          this.filterData = {
            isSub: 1,
            type: 1,
            status: 1
          }

          this.getList(true)
        }
      },

      getList(refresh = false) {
        if (this.loading) return;
        this.loading = true

        if (!this.typeObj.fn || typeof this.typeObj.fn !== 'function') return
        if (refresh) {
          this.listParams.page = 0
        }
        this.listParams.page++

        let params = {}
        if (this.typeObj.type === 100) {
          // 如果是办公审批
          params = {
          ...this.listParams,
          status: this.filterData.status
          }
        } else {
          params = {
          ...this.listParams,
          ...this.filterData
          }
          delete params.status
        }

        this.listStatus = 'loading'
        this.typeObj.fn(params).then(res => {
          this.loading = false
          if (this.listParams.page === 1) {
            this.listData = []
          }
          this.listData = this.listData.concat(res.list)
          if (res.hasOwnProperty('lastPage')) {
            this.listStatus = res.lastPage ? 'noMore' : 'more'
          } else {
            this.listStatus = res.list.length === 0 ? 'noMore' : 'more'
          }
        }).catch(() => {
          this.listStatus = 'more'
          this.loading = false
        })
      },

      handleRefresh() {
        this.getList(true)
      },

      /**
       * 切换tab
       * @param {Number} val
       */
      handleToggleTabs(val) {
        console.log('vvvv', val)
        let field = this.typeObj.optionField || 'type'
        if (this.filterData[field] === val) return
        this.filterData[field] = val
        this.activeTab = val

        // sessionStorage.setItem(`backlog_${this.typeObj.type}`, JSON.stringify(this.filterData))
        this.getList(true)
      },

      handleCommand(command) {
        console.log('command: ', command)
        if (command.value === 'readAll') {
          this.handleReadAll()
        }
      },

      handleReadAll() {
        API.CrmBacklogAllDeal({
          model: this.typeObj.type
        }).then(res => {
          this.$toast('操作成功')

          this.initCom()
        }).catch(() => {})
      }
    }
  }
</script>

<style scoped lang="scss">
	.list-wrapper {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;

		.wk-tabs {
			background-color: white;
			margin-bottom: 20rpx;
			.wk-tab-item {
				width: 30%;
			}
		}

		.list-scroll {
			flex: 1;
			overflow: hidden;
		}
	}

	.read-all {
		font-size: $wk-font-base;
		margin-right: 20rpx;
	}
</style>