crm-mobile/pages_message/backlogDetailFilter.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
          class="read-all"
          @click="handleReadAll">
          全部已处理
        </text>  -->
      </wk-nav-bar>
      <!-- #endif -->

      <view class="list-wrapper">
        <view class="filter-group">
          <wk-base-filter :tabs="filterOptions" @filter="handleFilter" />
        </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)" />
          </template>
        </wk-scroll-view>
      </view>
    </view>
  </view>
</template>

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

  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 mainListMixins from '@/mixins/mainList.js'

  export default {
    name: 'BacklogDetilFilter',
    components: {
      DetailCustomerItem,
      DetailReceivablesItem,
      DetailContractItem,
      DetailLeadsItem,
      DetailAwaitReceivablesItem,
      DetailExaminationItem
    },
    mixins: [mainListMixins],
    data() {
      return {
        routerQuery: {},

        title: '',
        activeCom: '',
        typeObj: {},
        filterData: {
          isSub: 1,
          type: 1
        },
        loading: false,

        commandList: [
          {
            label: '全部已处理',
            imgIcon: 'dealStatus',
            value: 'readAll'
          }
        ],

        typeMap: [
          {
            label: '今日需联系客户',
            type: 1,
            component: 'DetailCustomerItem',
            fn: API.TodayCustomer,
            icon: 'wk-customer',
            color: '#2362fb',
            show: false,
            options: [
              {label: '今日需联系', value: 1},
              {label: '已逾期', value: 2},
              {label: '已联系', value: 3}
            ],
            field: 'todayCustomer'
          }, // 1
          {
            label: '分配给我的线索',
            type: 2,
            component: 'DetailLeadsItem',
            fn: API.FollowLeads,
            icon: 'wk-leads',
            color: '#704afd',
            show: false,
            options: [
              {label: '待跟进', value: 1},
              {label: '已跟进', value: 2},
            ],
            field: 'followLeads'
          }, // 2
          {
            label: '分配给我的客户',
            type: 3,
            component: 'DetailCustomerItem',
            fn: API.FollowCustomer,
            icon: 'wk-s-seas',
            color: '#19b5f6',
            show: false,
            options: [
              {label: '待跟进', value: 1},
              {label: '已跟进', value: 2},
            ],
            field: 'followCustomer'
          }, // 3
          {
            label: '待进入公海的客户',
            type: 4,
            component: 'DetailCustomerItem',
            fn: API.PutInPoolRemind,
            icon: 'wk-seas',
            color: '#26d4da',
            show: false,
            options: [],
            field: 'putInPoolRemind'
          }, // 4
          {
            label: '即将到期的合同',
            type: 8,
            component: 'DetailContractItem',
            fn: API.EndContract,
            icon: 'wk-contract',
            color: '#ff7a38',
            show: false,
            options: [
              {label: '即将到期', value: 1},
              {label: '已到期', value: 2}
            ],
            field: 'endContract'
          }, // 8
          {
            label: '待审核合同',
            type: 5,
            component: 'DetailContractItem',
            fn: API.CheckContract,
            icon: 'wk-contract',
            color: '#fd5b4a',
            show: false,
            options: [
              {label: '待审核', value: 1},
              {label: '已审核', value: 2}
            ],
            field: 'checkContract'
          }, // 5
          {
            label: '待审核回款',
            type: 6,
            component: 'DetailReceivablesItem',
            fn: API.CheckReceivables,
            icon: 'wk-receivables',
            color: '#ffb940',
            show: false,
            options: [
              {label: '待审核', value: 1},
              {label: '已审核', value: 2}
            ],
            field: 'checkReceivables'
          }, // 6
          {
            label: '待回款提醒',
            type: 7,
            component: 'DetailAwaitReceivablesItem',
            fn: API.RemindReceivablesPlan,
            icon: 'wk-bell',
            color: '#27ba4a',
            show: false,
            options: [
              {label: '待回款', value: 1},
              {label: '已回款', value: 2},
              {label: '已逾期', value: 3}
            ],
            field: 'remindReceivablesPlan'
          }, // 7
          {
            label: '待审核的办公',
            type: 100,
            component: 'DetailExaminationItem',
            fn: MyExamine,
            icon: 'wk-approve',
            color: '#9376ff',
            show: false,
            options: [],
            field: 'examineNum'
          }, // 100
        ],
      }
    },
    computed: {
      openSlider() {
        if (!this.typeObj) return false
        return [2, 3].includes(this.typeObj.type) && this.params.type === 1;
      },
      filterOptions() {
        if (!this.typeObj || this.typeObj.type === 9) return []
        const type = this.typeObj.type
        let arr = []
        if ([1, 4].includes(type)) {
          arr.push({
            label: '筛选场景',
            field: 'isSub',
            value: 1,
            valueData: 0,
            options: [
              {label: '我的', value: 1},
              {label: '我下属的', value: 2}
            ]
          })
        }
        if (this.typeObj.options && this.typeObj.options.length > 0) {
          arr.push({
            label: '状态',
            field: 'type',
            value: this.typeObj.options[0].value,
            valueData: 0,
            options: this.typeObj.options
          })
        }
        return arr
      },
    },
    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.getList(true)
        }
      },

      handleFilter(item) {
        this.filterData[item.field] = item.value
        this.getList(true)
      },

      /**
       * 获取请求筛选条件
       */
      getFilterData() {
        let filterData = Object.assign({}, this.filterData)
        let findRes = this.filterOptions.find(item => item.field === 'type')
        if (!findRes && filterData.hasOwnProperty('type')) delete filterData.type

        if (this.typeObj.type === 9) {
          filterData = {
            status: 1
          }
        }
        return filterData || {}
      },

      /**
       * 获取数据列表
       * @param refresh 是否为刷新重置数据
       */
      getList(refresh = false) {
        if (this.loading) return
        this.loading = true

        if (refresh) {
          this.listParams.page = 0
        }
        this.listParams.page++

        let filterVal = this.getFilterData()
        this.listStatus = 'loading'

        this.typeObj.fn({
        ...this.params,
        ...this.listParams,
        ...filterVal
        }).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)
      },

      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;

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

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