ludu-admin-vue3/src/views/crm/customer/detail/index.vue

<template>
  <div v-loading="loading">
    <div class="flex items-start justify-between">
      <div>
        <!-- 左上：客户基本信息 -->
        <CustomerBasicInfo :customer="customer" />
      </div>
      <div>
        <!-- 右上：按钮 -->
        <el-button @click="openForm('update', customer.id)" v-hasPermi="['crm:customer:update']">
          编辑
        </el-button>
        <el-button>更改成交状态</el-button>
      </div>
    </div>
    <el-row class="mt-10px">
      <el-button>
        <Icon icon="ph:calendar-fill" class="mr-5px" />
        创建任务
      </el-button>
      <el-button>
        <Icon icon="carbon:email" class="mr-5px" />
        发送邮件
      </el-button>
      <el-button>
        <Icon icon="system-uicons:contacts" class="mr-5px" />
        创建联系人
      </el-button>
      <el-button>
        <Icon icon="ep:opportunity" class="mr-5px" />
        创建商机
      </el-button>
      <el-button>
        <Icon icon="clarity:contract-line" class="mr-5px" />
        创建合同
      </el-button>
      <el-button>
        <Icon icon="icon-park:income-one" class="mr-5px" />
        创建回款
      </el-button>
      <el-button>
        <Icon icon="fluent:people-team-add-20-filled" class="mr-5px" />
        添加团队成员
      </el-button>
    </el-row>
  </div>
  <ContentWrap class="mt-10px">
    <el-descriptions :column="5" direction="vertical">
      <el-descriptions-item label="客户级别">
        <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_LEVEL" :value="customer.level" />
      </el-descriptions-item>
      <el-descriptions-item label="成交状态">
        {{ customer.dealStatus ? '已成交' : '未成交' }}
      </el-descriptions-item>
      <el-descriptions-item label="负责人">
        {{ customer.ownerUserName }}
      </el-descriptions-item>
      <!-- TODO wanwan 首要联系人? -->
      <el-descriptions-item label="首要联系人" />
      <!-- TODO wanwan 首要联系人电话? -->
      <el-descriptions-item label="首要联系人电话">
        {{ customer.mobile }}
      </el-descriptions-item>
    </el-descriptions>
  </ContentWrap>
  <el-col>
    <el-tabs>
      <el-tab-pane label="详细资料">
        <!-- TODO wanwan：这个 ml-2 是不是可以优化下，不要整个左移，而是里面的内容有个几 px 的偏移，不顶在框里 -->
        <CustomerDetails class="ml-2" :customer="customer" />
      </el-tab-pane>
      <el-tab-pane label="活动" lazy> 活动</el-tab-pane>
      <el-tab-pane label="邮件" lazy> 邮件</el-tab-pane>
      <el-tab-pane label="工商信息" lazy> 工商信息</el-tab-pane>
      <el-tab-pane label="客户关系" lazy> 客户关系</el-tab-pane>
      <!-- TODO wanwan 以下标签上的数量需要接口统计返回 -->
      <el-tab-pane label="联系人" lazy>
        <template #label> 联系人<el-badge :value="12" class="item" type="primary" /> </template>
        联系人
      </el-tab-pane>
      <el-tab-pane label="团队成员" lazy>
        <template #label> 团队成员<el-badge :value="2" class="item" type="primary" /> </template>
        团队成员
      </el-tab-pane>
      <el-tab-pane label="商机" lazy> 商机</el-tab-pane>
      <el-tab-pane label="合同" lazy>
        <template #label> 合同<el-badge :value="3" class="item" type="primary" /> </template>
        合同
      </el-tab-pane>
      <el-tab-pane label="回款" lazy>
        <template #label> 回款<el-badge :value="4" class="item" type="primary" /> </template>
        回款
      </el-tab-pane>
      <el-tab-pane label="回访" lazy> 回访</el-tab-pane>
      <el-tab-pane label="发票" lazy> 发票</el-tab-pane>
    </el-tabs>
  </el-col>

  <!-- 表单弹窗：添加/修改 -->
  <CustomerForm ref="formRef" @success="getCustomerData(id)" />
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { useTagsViewStore } from '@/store/modules/tagsView'
import * as CustomerApi from '@/api/crm/customer'
import CustomerBasicInfo from '@/views/crm/customer/detail/CustomerBasicInfo.vue'
import { DICT_TYPE } from '@/utils/dict'
import CustomerDetails from '@/views/crm/customer/detail/CustomerDetails.vue'
import CustomerForm from '@/views/crm/customer/CustomerForm.vue'

defineOptions({ name: 'CustomerDetail' })

const { delView } = useTagsViewStore() // 视图操作
const route = useRoute()
const { currentRoute } = useRouter() // 路由
const id = Number(route.params.id)
const loading = ref(true) // 加载中

// 客户详情
const customer = ref<CustomerApi.CustomerVO>({} as CustomerApi.CustomerVO)

/**
 * 获取详情
 *
 * @param id
 */
const getCustomerData = async (id: number) => {
  loading.value = true
  try {
    customer.value = await CustomerApi.getCustomer(id)
  } finally {
    loading.value = false
  }
}

const formRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id)
}

/**
 * 初始化
 */
onMounted(() => {
  if (!id) {
    ElMessage.warning('参数错误，客户不能为空！')
    delView(unref(currentRoute))
    return
  }
  getCustomerData(id)
})
</script>