ludu-admin-vue3/src/views/crm/backlog/index.vue

<template>
  <el-row :gutter="20">
    <el-col :span="4" class="min-w-[200px]">
      <div class="side-item-list">
        <div
          v-for="(item, index) in leftSides"
          :key="index"
          :class="leftMenu == item.menu ? 'side-item-select' : 'side-item-default'"
          class="side-item"
          @click="sideClick(item)"
        >
          {{ item.name }}
          <el-badge v-if="item.count > 0" :max="99" :value="item.count" />
        </div>
      </div>
    </el-col>
    <el-col :span="20" :xs="24">
      <CustomerTodayContactList v-if="leftMenu === 'customerTodayContact'" />
      <ClueFollowList v-if="leftMenu === 'clueFollow'" />
      <ContractAuditList v-if="leftMenu === 'contractAudit'" />
      <CheckReceivables v-if="leftMenu === 'checkReceivables'" />
      <ContractRemindList v-if="leftMenu === 'contractRemind'" />
      <CustomerFollowList v-if="leftMenu === 'customerFollow'" />
      <CustomerPutPoolRemindList v-if="leftMenu === 'customerPutPoolRemind'" />
      <RemindReceivables v-if="leftMenu === 'remindReceivables'" />
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import * as BacklogApi from '@/api/crm/backlog'
import CustomerFollowList from './components/CustomerFollowList.vue'
import CustomerTodayContactList from './components/CustomerTodayContactList.vue'
import CustomerPutPoolRemindList from './components/CustomerPutPoolRemindList.vue'
import ClueFollowList from './components/ClueFollowList.vue'
import ContractAuditList from './components/ContractAuditList.vue'
import ContractRemindList from './components/ContractRemindList.vue'
import RemindReceivables from './tables/RemindReceivables.vue'
import CheckReceivables from './tables/CheckReceivables.vue'
import * as CustomerApi from '@/api/crm/customer'
import * as ClueApi from '@/api/crm/clue'
import * as ContractApi from '@/api/crm/contract'

defineOptions({ name: 'CrmBacklog' })

const leftMenu = ref('customerTodayContact')

const clueFollowCount = ref(0)
const customerFollowCount = ref(0)
const customerPutPoolRemindCount = ref(0)
const customerTodayContactCount = ref(0)
const contractAuditCount = ref(0)
const contractRemindCount = ref(0)
const checkReceivablesCount = ref(0)
const remindReceivablesCount = ref(0)

const leftSides = ref([
  {
    name: '今日需联系客户',
    menu: 'customerTodayContact',
    count: customerTodayContactCount
  },
  {
    name: '分配给我的线索',
    menu: 'clueFollow',
    count: clueFollowCount
  },
  {
    name: '分配给我的客户',
    menu: 'customerFollow',
    count: customerFollowCount
  },
  {
    name: '待进入公海的客户',
    menu: 'customerPutPoolRemind',
    count: customerPutPoolRemindCount
  },
  {
    name: '待审核合同',
    menu: 'contractAudit',
    count: contractAuditCount
  },
  {
    name: '待审核回款',
    menu: 'checkReceivables',
    count: checkReceivablesCount
  },
  {
    name: '待回款提醒',
    menu: 'remindReceivables',
    count: remindReceivablesCount
  },
  {
    name: '即将到期的合同',
    menu: 'contractRemind',
    count: contractRemindCount
  }
])

/** 侧边点击 */
const sideClick = (item: any) => {
  leftMenu.value = item.menu
}

const getCount = () => {
  CustomerApi.getTodayContactCustomerCount().then(
    (count) => (customerTodayContactCount.value = count)
  )
  CustomerApi.getPutPoolRemindCustomerCount().then(
    (count) => (customerPutPoolRemindCount.value = count)
  )
  CustomerApi.getFollowCustomerCount().then((count) => (customerFollowCount.value = count))
  ClueApi.getFollowClueCount().then((count) => (clueFollowCount.value = count))
  ContractApi.getAuditContractCount().then((count) => (contractAuditCount.value = count))
  ContractApi.getRemindContractCount().then((count) => (contractRemindCount.value = count))
  BacklogApi.getCheckReceivablesCount().then((count) => (checkReceivablesCount.value = count))
  BacklogApi.getRemindReceivablePlanCount().then((count) => (remindReceivablesCount.value = count))
}

/** 激活时 */
onActivated(async () => {
  getCount()
})

/** 初始化 */
onMounted(async () => {
  getCount()
})
</script>

<style lang="scss" scoped>
.side-item-list {
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  font-size: 14px;
  background-color: var(--el-bg-color);
  border: 1px solid var(--el-border-color);
  border-radius: 5px;

  .side-item {
    position: relative;
    height: 50px;
    padding: 0 20px;
    line-height: 50px;
    cursor: pointer;
  }
}

.side-item-default {
  color: var(--el-text-color-primary);
  border-right: 2px solid transparent;
}

.side-item-select {
  color: var(--el-color-primary);
  background-color: var(--el-color-primary-light-9);
  border-right: 2px solid var(--el-color-primary);
}

.el-badge :deep(.el-badge__content) {
  top: 0;
  border: none;
}

.el-badge {
  position: absolute;
  top: 0;
  right: 15px;
}
</style>