yudao-ui-admin-vue3/src/views/crm/components/Customer/Detail.vue

<template>
  <ContentWrap>
    <!-- 顶部标题和操作按钮区域 -->
    <div class="flex justify-between mb-2">
      <div class="flex items-center">
        <h2 class="text-xl font-bold mr-10px min-w-[100px]" >{{ customerForm.customerName }}({{ customerForm.mobile }})</h2>
        <span class="ml-2px text-sm">撞库次数: {{ customerForm.repeatCount }}次</span>
        <span class="text-sm ml-2">跟进次数: {{ customerForm.followCount }}次</span>
      </div>
      <div class="flex">
        <el-button size="small" class="mr-1" :disabled="!props.prevId" @click="emit('prev')">上一条</el-button>
        <el-button size="small" :disabled="!props.nextId" @click="emit('next')">下一条</el-button>
      </div>
    </div> 
    <!-- 操作按钮栏 -->
    <div class="mb-4">  
      <el-button size="small" class="mr-1" type="primary" plain @click="openAllocateForm"><Icon icon="ep:plus" class="mr-5px" />分配</el-button>
      <el-button size="small" class="mr-1" type="primary"  plain  @click="handleReceive"><Icon icon="ep:plus" class="mr-5px"  />领取</el-button>
      <el-button size="small" class="mr-1" type="warning"  plain @click="openTransferForm"><Icon icon="ep:share" class="mr-5px" />转公海</el-button>
    </div>
 
    <!-- 进度导航 --> 
    <div class="mb-4"> 
      <el-steps :space="200" :active="3" simple>
      <el-step title="线索" />
      <el-step title="跟进中"  />
      <el-step title="已邀约"  />
      <el-step title="已上门"  />
      <el-step title="已签约"  />
      <el-step title="办理中"  />
      <el-step title="已完成"  />
  </el-steps> 
    </div>

    <!-- 标签页和时间轴布局 --> 
    <div class="flex gap-4">
      <!-- 左侧标签页 -->
      <div class="w-[300px]">   
        <el-tabs>
          <el-tab-pane label="跟进记录">
            <FollowRecord :customer-id="props.customerId" />
          </el-tab-pane>
          <el-tab-pane label="流转记录">
            <TransferRecord :customer-id="props.customerId" />
          </el-tab-pane>
        </el-tabs>
      </div>

      <!-- 右侧跟进记录 -->
      <div class="rightContent w-[calc(100%-300px)]">
        <el-tabs>
          <el-tab-pane label="客户资料">
            <div class="mt-4">
              <QuickFollow />
              <Infor /> 
            </div>
          </el-tab-pane> 
        </el-tabs>
      </div>  
      
    </div>
  </ContentWrap>
   <!-- 分配弹窗 -->
   <AllocateForm ref="formRef" />
  <!-- 转公海弹窗 -->
  <TransferForm ref="transferFormRef"  />
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import Infor from './Infor.vue'
import QuickFollow from './QuickFollow.vue'
import FollowRecord from './FollowRecord.vue'
import TransferRecord from './TransferRecord.vue'
import { CustomerInforApi } from '@/api/crm/customer/customer'
import AllocateForm from '@/views/crm/components/Allocate/AllocateForm.vue'
import TransferForm from '@/views/crm/components/Transfer/TransferForm.vue'
import { useMessage } from '@/hooks/web/useMessage'

const message = useMessage() // 消息弹窗
const props = defineProps<{
  customerId?: number
  prevId?: number
  nextId?: number
}>()

const emit = defineEmits(['prev', 'next'])

const formRef = ref() // 分配表单的 Ref
const transferFormRef = ref() // 转公海表单的 Ref

// 客户表单数据
const customerForm = ref({
  id: undefined as number | undefined,
  sex: 1,
  age: undefined as string | undefined,
  customerName: '', 
  expectAmount: undefined as string | undefined,
  city: '',
  customerLevel: 0,
  customerType: '潜在',
  followContent: '',
  mobile: '',
  remark: '',
  customerSourceId: undefined, 
  customerTypeId: undefined,
  importLevelId: undefined,
  followStatusId: undefined,
  ownerUserId: undefined,
  depId: undefined,
  contactLastTime: undefined,
  contactLastContent: undefined,
  createTime: undefined,
  repeatCount: 0,
  followCount: 0
})

// 加载客户详情数据
const loadCustomerData = async (id?: number) => {
  if (id) {
    try {
      // 获取客户详情
      const data = await CustomerInforApi.getCustomer(id)
      // 更新表单数据
      Object.assign(customerForm.value, data)
    } catch (error) {
      message.error('获取失败')
    }
  }
}

// 监听customerId变化，重新加载数据
watch(() => props.customerId, (newId) => {
  loadCustomerData(newId)
}, { immediate: true })

// 提供给子组件的方法
const provide = {
  customerForm
}

/** 打开分配弹窗 */
const openAllocateForm = () => {
 
  const customerIds = [props.customerId]
  const depId =0 // 获取第一个选中客户的depId
  formRef.value.open(customerIds, depId)
} 

/** 打开转公海弹窗 */
const openTransferForm = () => {
  const customerIds = [props.customerId]
  transferFormRef.value.open(customerIds)
} 
/** 领取客户 */
const handleReceive = async () => {
 
    try {
      const customerIds = [props.customerId]
    await CustomerInforApi.receive({ customerIds: customerIds.map(String) })
    message.success('领取成功')
  } catch (error) {
    message.error('领取失败')
  }
}

</script>
  
<style scoped>
.el-timeline {
  padding-right: 10px;
  max-height: calc(100vh - 240px);
  overflow-y: auto;
}

:deep(.el-step__icon) {
  display: none !important;
}

:deep(.el-step.is-simple .el-step__title) {
  font-size: 14px;
  line-height: 20px;
}

:deep(.el-steps--simple) {
  padding: 5px 25px;
}
:deep(.el-step.is-simple .el-step__arrow) {
  transform: scale(0.6);
}
.rightContent {
  overflow: auto;
}
</style>