klp-oa/klp-ui/src/views/crm/components/CustomerInfo.vue

<template>
  <el-descriptions :column="2" border>
    <el-descriptions-item label="客户编号">
      {{ customer.customerCode || '-' }}
    </el-descriptions-item>
    <el-descriptions-item label="公司">
      {{ customer.companyName || '-' }}
    </el-descriptions-item>
    <el-descriptions-item label="联系人">
      {{ customer.contactPerson || '-' }}
    </el-descriptions-item>
    <el-descriptions-item label="客户联系方式">{{ customer.contactWay || '-' }}</el-descriptions-item>
    <el-descriptions-item label="客户行业">
      <dict-tag :value="customer.industry" :options="dict.type.customer_industry"></dict-tag>
    </el-descriptions-item>
    <el-descriptions-item label="客户等级">
      <dict-tag :value="customer.customerLevel" :options="dict.type.customer_level"></dict-tag>
    </el-descriptions-item>
    <el-descriptions-item label="客户地址" v-hasPermi="['crm:customer:address']">
      {{ formattedAddress || '-' }}
    </el-descriptions-item>
  </el-descriptions>
</template>

<script>
import { formatAreaTextEnhanced } from '@/components/ChinaAreaSelect/index.js'

export default {
  name: 'CustomerDetail',
  props: {
    // 客户信息对象
    customer: {
      type: Object,
      required: true,
      default: () => ({})
    },
    // 字典数据
    dict: {
      type: Object,
      required: true,
      default: () => ({ type: {} })
    }
  },
  computed: {
    formattedAddress() {
      const address = formatAreaTextEnhanced(this.customer.address || '-')
      return address.standard + ' (' + address.custom + ')'
    }
  }
}
</script>