yoe-market-web/src/views/customer/customerFile/customerInfo/edit.vue

<template>
  <div class="p-4">
    <!-- 页面标题和按钮 -->
    <div class="flex justify-between items-center mb-4">
      <div class="flex items-center gap-2">
        <el-button icon="ArrowLeft" @click="router.back()">返回</el-button>
        <span class="text-lg font-medium">客户详情</span>
      </div>
    </div>

    <!-- 菜单导航 -->
    <el-card shadow="never" class="mb-4">
      <el-menu :default-active="activeMenu" class="el-menu-demo" mode="horizontal" @select="handleSelect" :ellipsis="false">
        <el-menu-item index="baseInfo">基本信息</el-menu-item>
        <el-menu-item index="orgStructure">组织结构</el-menu-item>
        <el-menu-item index="contactInfo">联系人</el-menu-item>
        <el-menu-item index="shippingAddress">收货地址</el-menu-item>
        <el-menu-item index="contractManagement">合同管理</el-menu-item>
        <el-menu-item index="erpSaleInfo">ERP销售信息</el-menu-item>
        <!-- <el-menu-item index="procurementProfile">采购画像</el-menu-item>
        <el-menu-item index="operationLog">日志管理</el-menu-item> -->
      </el-menu>
      <!-- 动态组件显示区域 -->
      <component
        :is="currentComponent"
        :customer-id="customerId"
        :customer-no="customerNo"
        :customer-name="customerName"
        :is-view-mode="isViewMode"
      />
    </el-card>
  </div>
</template>

<script setup lang="ts" name="CustomerInfoEdit">
const route = useRoute();
const router = useRouter();

const activeMenu = ref('baseInfo');
const customerId = ref<string>('');
const customerNo = ref<string>('');
const customerName = ref<string>('');
const isViewMode = ref(false); // 查看模式标志

// 异步加载子组件
const BaseInfo = defineAsyncComponent(() => import('@/views/customer/customerFile/customerInfo/overview/baseInfo.vue'));
const OrgStructure = defineAsyncComponent(() => import('@/views/customer/customerFile/customerInfo/overview/orgStructure.vue'));
const ContactInfo = defineAsyncComponent(() => import('@/views/customer/customerFile/customerInfo/overview/contactInfo.vue'));
const ShippingAddress = defineAsyncComponent(() => import('@/views/customer/customerFile/customerInfo/overview/shippingAddress.vue'));
const ContractManagement = defineAsyncComponent(() => import('@/views/customer/customerFile/customerInfo/overview/contractManagement.vue'));
const ErpSaleInfo = defineAsyncComponent(() => import('@/views/customer/customerFile/customerInfo/overview/erpSaleInfo.vue'));
// const ProcurementProfile = defineAsyncComponent(() => import('@/views/customer/customerFile/customerInfo/overview/procurementProfile.vue'));
// const OperationLog = defineAsyncComponent(() => import('@/views/customer/customerFile/customerInfo/overview/operationLog.vue'));

// 组件映射
const componentMap: Record<string, any> = {
  baseInfo: BaseInfo,
  orgStructure: OrgStructure,
  contactInfo: ContactInfo,
  shippingAddress: ShippingAddress,
  contractManagement: ContractManagement,
  erpSaleInfo: ErpSaleInfo
  // procurementProfile: ProcurementProfile,
  // operationLog: OperationLog
};

const currentComponent = ref(componentMap['baseInfo']); // 默认显示基本信息

// 菜单选择处理
const handleSelect = (key: string) => {
  activeMenu.value = key;
  currentComponent.value = componentMap[key] || componentMap['baseInfo'];
};

// 初始化
onMounted(async () => {
  const id = route.query.id;
  if (id) {
    customerId.value = id as string;
    // 加载客户基本信息获取客户编号
    await loadCustomerNo(id as string);
  }

  // 如果URL中有tab参数，则显示对应的tab
  const tab = route.query.tab;
  if (tab && componentMap[tab as string]) {
    activeMenu.value = tab as string;
    currentComponent.value = componentMap[tab as string];
  }

  // 判断是否为查看模式
  const status = route.query.status;
  if (status === 'view') {
    isViewMode.value = true;
  }
});

// 加载客户编号
const loadCustomerNo = async (id: string) => {
  try {
    const { getCustomerInfo } = await import('@/api/customer/customerFile/customerInfo');
    const res = await getCustomerInfo(id);
    customerNo.value = res.data.customerNo || '';
    customerName.value = res.data.customerName || '';
  } catch (error) {
    console.error('加载客户编号失败:', error);
  }
};
</script>

<style scoped>
.el-menu-demo {
  border-bottom: none;
}
</style>