From 81a390f1840be2bea76b3c39f90b3405f81a2a00 Mon Sep 17 00:00:00 2001
From: yinq <yinq>
Date: Wed, 5 Nov 2025 13:48:02 +0800
Subject: [PATCH] =?UTF-8?q?1.0.28=20=E5=AE=A2=E6=88=B7=E4=BF=A1=E6=81=AF?=
 =?UTF-8?q?=E5=85=B3=E8=81=94=E4=B8=8A=E4=B8=8B=E6=B8=B8=E3=80=81=E6=88=91?=
 =?UTF-8?q?=E6=96=B9=E5=85=AC=E5=8F=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/oa/crm/customerContact/index.vue |  47 +-
 src/views/oa/crm/customerInfo/index.vue    | 294 +++++++-
 src/views/oa/crm/customerInfo/ourIndex.vue | 824 +++++++++++++++++++++
 3 files changed, 1108 insertions(+), 57 deletions(-)
 create mode 100644 src/views/oa/crm/customerInfo/ourIndex.vue

diff --git a/src/views/oa/crm/customerContact/index.vue b/src/views/oa/crm/customerContact/index.vue
index 28537f5..6f2cfc1 100644
--- a/src/views/oa/crm/customerContact/index.vue
+++ b/src/views/oa/crm/customerContact/index.vue
@@ -3,38 +3,33 @@
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
       <div v-show="showSearch" class="mb-[10px]">
         <el-card shadow="hover">
-          <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width='80px'>
+          <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="80px">
             <el-form-item label="所属客户" prop="customerId">
-              <el-select v-model="queryParams.customerId" placeholder="请选择所属客户" filterable clearable @keyup.enter="handleQuery" >
-                <el-option
-                  v-for="item in customerInfoList"
-                  :key="item.customerId"
-                  :label="item.customerName"
-                  :value="item.customerId"
-                />
+              <el-select v-model="queryParams.customerId" placeholder="请选择所属客户" filterable clearable @keyup.enter="handleQuery">
+                <el-option v-for="item in customerInfoList" :key="item.customerId" :label="item.customerName" :value="item.customerId" />
               </el-select>
             </el-form-item>
-            <el-form-item label="联系人姓名" prop="contactName" label-width='100px'>
+            <el-form-item label="联系人姓名" prop="contactName" label-width="100px">
               <el-input v-model="queryParams.contactName" placeholder="请输入联系人姓名" clearable @keyup.enter="handleQuery" />
             </el-form-item>
-<!--            <el-form-item label="尊称" prop="sexType">-->
-<!--              <el-select v-model="queryParams.sexType" placeholder="请选择尊称" clearable>-->
-<!--                <el-option v-for="dict in sex_type" :key="dict.value" :label="dict.label" :value="dict.value" />-->
-<!--              </el-select>-->
-<!--            </el-form-item>-->
+            <!--            <el-form-item label="尊称" prop="sexType">-->
+            <!--              <el-select v-model="queryParams.sexType" placeholder="请选择尊称" clearable>-->
+            <!--                <el-option v-for="dict in sex_type" :key="dict.value" :label="dict.label" :value="dict.value" />-->
+            <!--              </el-select>-->
+            <!--            </el-form-item>-->
             <el-form-item label="角色" prop="roleType">
               <el-select v-model="queryParams.roleType" placeholder="请选择角色" clearable>
                 <el-option v-for="dict in role_type" :key="dict.value" :label="dict.label" :value="dict.value" />
               </el-select>
             </el-form-item>
-            <el-form-item label="是否首要联系人" prop="firstFlag" label-width='110px'>
+            <el-form-item label="是否首要联系人" prop="firstFlag" label-width="110px">
               <el-select v-model="queryParams.firstFlag" placeholder="请选择是否首要联系人" clearable>
                 <el-option v-for="dict in first_flag" :key="dict.value" :label="dict.label" :value="dict.value" />
               </el-select>
             </el-form-item>
-<!--            <el-form-item label="激活标识" prop="activeFlag">-->
-<!--              <el-input v-model="queryParams.activeFlag" placeholder="请输入激活标识" clearable @keyup.enter="handleQuery" />-->
-<!--            </el-form-item>-->
+            <!--            <el-form-item label="激活标识" prop="activeFlag">-->
+            <!--              <el-input v-model="queryParams.activeFlag" placeholder="请输入激活标识" clearable @keyup.enter="handleQuery" />-->
+            <!--            </el-form-item>-->
             <el-form-item>
               <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
               <el-button icon="Refresh" @click="resetQuery">重置</el-button>
@@ -101,9 +96,9 @@
         <el-table-column label="微信账号" align="center" prop="wechatAccount" v-if="columns[14].visible" />
         <el-table-column label="QQ号码" align="center" prop="qqNumber" v-if="columns[15].visible" />
         <el-table-column label="备注" align="center" prop="remark" v-if="columns[16].visible" />
-        <el-table-column label="激活标识" align="center" prop="activeFlag" v-if="columns[17].visible" >
+        <el-table-column label="激活标识" align="center" prop="activeFlag" v-if="columns[17].visible">
           <template #default="scope">
-            <dict-tag :options="active_flag" :value="scope.row.activeFlag"/>
+            <dict-tag :options="active_flag" :value="scope.row.activeFlag" />
           </template>
         </el-table-column>
         <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
@@ -131,12 +126,7 @@
       <el-form ref="customerContactFormRef" :model="form" :rules="rules" label-width="120px">
         <el-form-item label="所属客户" prop="customerId">
           <el-select v-model="form.customerId" placeholder="请选择所属客户" filterable clearable>
-            <el-option
-              v-for="item in customerInfoList"
-              :key="item.customerId"
-              :label="item.customerName"
-              :value="item.customerId"
-            />
+            <el-option v-for="item in customerInfoList" :key="item.customerId" :label="item.customerName" :value="item.customerId" />
           </el-select>
         </el-form-item>
         <el-form-item label="联系人姓名" prop="contactName">
@@ -158,8 +148,7 @@
           </el-radio-group>
         </el-form-item>
         <el-form-item label="生日" prop="birthday">
-          <el-date-picker clearable v-model="form.birthday" type="date" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择生日">
-          </el-date-picker>
+          <el-date-picker clearable v-model="form.birthday" type="date" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择生日"> </el-date-picker>
         </el-form-item>
         <el-form-item label="部门职务" prop="departmentPosition">
           <el-input v-model="form.departmentPosition" placeholder="请输入部门职务" />
@@ -228,7 +217,7 @@ const dialog = reactive<DialogOption>({
 /** 查询客户信息下拉框结构 */
 const customerInfoList = ref([]);
 const getCustomerInfoListSelect = async () => {
-  let res = await getCrmCustomerInfoList(null);
+  let res = await getCrmCustomerInfoList({ ourCompanyFlag: '0'});
   customerInfoList.value = res.data;
 };
 
diff --git a/src/views/oa/crm/customerInfo/index.vue b/src/views/oa/crm/customerInfo/index.vue
index 7948af1..3dd8320 100644
--- a/src/views/oa/crm/customerInfo/index.vue
+++ b/src/views/oa/crm/customerInfo/index.vue
@@ -105,7 +105,7 @@
             <dict-tag :options="customer_scale" :value="scope.row.customerScale"/>
           </template>
         </el-table-column>
-        <el-table-column label="下级客户" align="center" prop="parentCustomerId" width="100" v-if="columns[12].visible"/>
+        <el-table-column label="上级客户" align="center" prop="parentCustomerId" width="100" v-if="columns[12].visible"/>
         <el-table-column label="客户关系" align="center" prop="customerRelationship" width="120" v-if="columns[13].visible" show-overflow-tooltip/>
         <el-table-column label="法定代表人" align="center" prop="legalRepresentative" width="130" v-if="columns[14].visible" show-overflow-tooltip/>
         <el-table-column label="营业执照号码" align="center" prop="businessLicenseNumber" width="150" v-if="columns[15].visible" show-overflow-tooltip/>
@@ -119,13 +119,11 @@
             <dict-tag :options="active_flag" :value="scope.row.activeFlag"/>
           </template>
         </el-table-column>
-        <el-table-column label="本公司标识" align="center" prop="ourCompanyFlag" width="110" v-if="columns[28].visible">
-          <template #default="scope">
-            <dict-tag :options="active_flag" :value="scope.row.ourCompanyFlag"/>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" fixed="right" width="120" class-name="small-padding fixed-width">
+        <el-table-column label="操作" align="center" fixed="right" width="180" class-name="small-padding fixed-width">
           <template #default="scope">
+            <el-tooltip content="客户关系" placement="top">
+              <el-button link type="primary" icon="Connection" @click="handleViewRelation(scope.row)"></el-button>
+            </el-tooltip>
             <el-tooltip content="修改" placement="top">
               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['oa/crm:customerInfo:edit']"></el-button>
             </el-tooltip>
@@ -264,8 +262,25 @@
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="下级客户" prop="parentCustomerId">
-              <el-input v-model="form.parentCustomerId" placeholder="请输入下级客户" />
+            <el-form-item label="上级客户" prop="parentCustomerId">
+              <el-select
+                v-model="form.parentCustomerId"
+                placeholder="请选择上级客户"
+                filterable
+                :loading="customerLoading"
+                style="width: 100%"
+                clearable
+              >
+                <el-option
+                  v-for="customer in customerOptions"
+                  :key="customer.customerId"
+                  :label="customer.customerName"
+                  :value="customer.customerId"
+                >
+                  <span style="float: left">{{ customer.customerName }}</span>
+                  <span style="float: right; color: #8492a6; font-size: 13px">{{ customer.mnemonicName }}</span>
+                </el-option>
+              </el-select>
             </el-form-item>
           </el-col>
         </el-row>
@@ -319,19 +334,6 @@
             </el-form-item>
           </el-col>
         </el-row>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="本公司标识" prop="ourCompanyFlag">
-              <el-radio-group v-model="form.ourCompanyFlag">
-                <el-radio
-                  v-for="dict in active_flag"
-                  :key="dict.value"
-                  :value="dict.value"
-                >{{dict.label}}</el-radio>
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
-        </el-row>
 <!--        <el-form-item label="激活标识" prop="activeFlag">-->
 <!--          <el-radio-group v-model="form.activeFlag">-->
 <!--            <el-radio-->
@@ -349,11 +351,159 @@
         </div>
       </template>
     </el-dialog>
+
+    <!-- 客户关系查看对话框 -->
+    <el-dialog title="客户关系" v-model="relationDialog.visible" width="1000px" append-to-body>
+      <div v-loading="relationLoading">
+        <!-- 当前客户信息卡片 -->
+        <el-card shadow="hover" style="margin-bottom: 20px;">
+          <template #header>
+            <div style="display: flex; align-items: center; justify-content: space-between;">
+              <span style="font-size: 16px; font-weight: bold; color: #409EFF;">
+                当前客户
+              </span>
+            </div>
+          </template>
+          <el-descriptions :column="3" border>
+            <el-descriptions-item label="客户名称" :span="2">
+              <strong style="font-size: 16px; color: #303133;">{{ currentCustomer.customerName }}</strong>
+            </el-descriptions-item>
+            <el-descriptions-item label="助记名称">
+              {{ currentCustomer.mnemonicName || '-' }}
+            </el-descriptions-item>
+            <el-descriptions-item label="客户类型">
+              <dict-tag :options="customer_type" :value="currentCustomer.customerType"/>
+            </el-descriptions-item>
+            <el-descriptions-item label="客户状态">
+              <dict-tag :options="customer_status" :value="currentCustomer.customerStatus"/>
+            </el-descriptions-item>
+            <el-descriptions-item label="客户级别">
+              <dict-tag :options="customer_level" :value="currentCustomer.customerLevel"/>
+            </el-descriptions-item>
+            <el-descriptions-item label="客户经理">
+              {{ currentCustomer.ownerName || '-' }}
+            </el-descriptions-item>
+            <el-descriptions-item label="所属行业">
+              <dict-tag :options="industry_id" :value="currentCustomer.industryId"/>
+            </el-descriptions-item>
+            <el-descriptions-item label="企业规模">
+              <dict-tag :options="customer_scale" :value="currentCustomer.customerScale"/>
+            </el-descriptions-item>
+          </el-descriptions>
+        </el-card>
+
+        <!-- 客户关系结构 -->
+        <el-row :gutter="20">
+          <!-- 上级客户 -->
+          <el-col :span="12">
+            <el-card shadow="hover">
+              <template #header>
+                <div style="display: flex; align-items: center; justify-content: space-between;">
+                  <span style="font-size: 14px; font-weight: bold;">
+                    上级客户
+                  </span>
+                  <el-tag type="success" size="small">{{ parentCustomerList.length }} 个</el-tag>
+                </div>
+              </template>
+              <div v-if="parentCustomerList.length > 0">
+                <el-table :data="parentCustomerList" border size="small" max-height="400">
+                  <el-table-column label="客户名称" prop="customerName" min-width="150" show-overflow-tooltip>
+                    <template #default="scope">
+                      <el-link type="primary" @click="handleViewRelation(scope.row)" style="font-weight: 500;">
+                        {{ scope.row.customerName }}
+                      </el-link>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="助记名称" prop="mnemonicName" width="120" show-overflow-tooltip/>
+                  <el-table-column label="客户类型" prop="customerType" width="100">
+                    <template #default="scope">
+                      <dict-tag :options="customer_type" :value="scope.row.customerType"/>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="客户状态" prop="customerStatus" width="100">
+                    <template #default="scope">
+                      <dict-tag :options="customer_status" :value="scope.row.customerStatus"/>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="客户级别" prop="customerLevel" width="100">
+                    <template #default="scope">
+                      <dict-tag :options="customer_level" :value="scope.row.customerLevel"/>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="客户经理" prop="ownerName" width="100" show-overflow-tooltip/>
+                </el-table>
+              </div>
+              <el-empty v-else description="暂无上级客户" :image-size="60" style="padding: 40px 0;">
+                <el-text type="info" size="small">该客户没有上级客户</el-text>
+              </el-empty>
+            </el-card>
+          </el-col>
+
+          <!-- 下级客户 -->
+          <el-col :span="12">
+            <el-card shadow="hover">
+              <template #header>
+                <div style="display: flex; align-items: center; justify-content: space-between;">
+                  <span style="font-size: 14px; font-weight: bold;">
+                    下级客户
+                  </span>
+                  <el-tag type="warning" size="small">{{ childCustomerList.length }} 个</el-tag>
+                </div>
+              </template>
+              <div v-if="childCustomerList.length > 0">
+                <el-table :data="childCustomerList" border size="small" max-height="400">
+                  <el-table-column label="客户名称" prop="customerName" min-width="150" show-overflow-tooltip>
+                    <template #default="scope">
+                      <el-link type="primary" @click="handleViewRelation(scope.row)" style="font-weight: 500;">
+                        {{ scope.row.customerName }}
+                      </el-link>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="助记名称" prop="mnemonicName" width="120" show-overflow-tooltip/>
+                  <el-table-column label="客户类型" prop="customerType" width="100">
+                    <template #default="scope">
+                      <dict-tag :options="customer_type" :value="scope.row.customerType"/>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="客户状态" prop="customerStatus" width="100">
+                    <template #default="scope">
+                      <dict-tag :options="customer_status" :value="scope.row.customerStatus"/>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="客户级别" prop="customerLevel" width="100">
+                    <template #default="scope">
+                      <dict-tag :options="customer_level" :value="scope.row.customerLevel"/>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="客户经理" prop="ownerName" width="100" show-overflow-tooltip/>
+                </el-table>
+              </div>
+              <el-empty v-else description="暂无下级客户" :image-size="60" style="padding: 40px 0;">
+                <el-text type="info" size="small">该客户没有下级客户</el-text>
+              </el-empty>
+            </el-card>
+          </el-col>
+        </el-row>
+      </div>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="relationDialog.visible = false">关 闭</el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup name="CustomerInfo" lang="ts">
-import { listCustomerInfo, getCustomerInfo, delCustomerInfo, addCustomerInfo, updateCustomerInfo } from '@/api/oa/crm/customerInfo';
+import {
+  listCustomerInfo,
+  getCustomerInfo,
+  delCustomerInfo,
+  addCustomerInfo,
+  updateCustomerInfo,
+  getCrmCustomerInfoList
+} from '@/api/oa/crm/customerInfo';
 import { CustomerInfoVO, CustomerInfoQuery, CustomerInfoForm } from '@/api/oa/crm/customerInfo/types';
 import { listUser, optionSelect } from '@/api/system/user';
 import { UserVO } from '@/api/system/user/types';
@@ -372,6 +522,12 @@ const multiple = ref(true);
 const total = ref(0);
 const userOptions = ref<UserVO[]>([]);
 const userLoading = ref(false);
+const customerOptions = ref<CustomerInfoVO[]>([]);
+const customerLoading = ref(false);
+const relationLoading = ref(false);
+const parentCustomerList = ref<CustomerInfoVO[]>([]);
+const childCustomerList = ref<CustomerInfoVO[]>([]);
+const currentCustomer = ref<CustomerInfoVO>({} as CustomerInfoVO);
 
 const queryFormRef = ref<ElFormInstance>();
 const customerInfoFormRef = ref<ElFormInstance>();
@@ -394,6 +550,11 @@ const dialog = reactive<DialogOption>({
   title: ''
 });
 
+const relationDialog = reactive<DialogOption>({
+  visible: false,
+  title: ''
+});
+
 // 列显隐信息
 const columns = ref<FieldOption[]>([
   { key: 0, label: `客户ID`, visible: false },
@@ -408,7 +569,7 @@ const columns = ref<FieldOption[]>([
   { key: 9, label: `客户经理`, visible: true },
   { key: 10, label: `详细地址`, visible: true },
   { key: 11, label: `企业规模`, visible: true },
-  { key: 12, label: `下级客户`, visible: true },
+  { key: 12, label: `上级客户`, visible: true },
   { key: 13, label: `客户关系`, visible: true },
   { key: 14, label: `法定代表人`, visible: true },
   { key: 15, label: `营业执照号码`, visible: true },
@@ -423,8 +584,7 @@ const columns = ref<FieldOption[]>([
   { key: 24, label: `创建人`, visible: false },
   { key: 25, label: `创建时间`, visible: false },
   { key: 26, label: `更新人`, visible: false },
-  { key: 27, label: `更新时间`, visible: false },
-  { key: 28, label: `本公司标识`, visible: true },
+  { key: 27, label: `更新时间`, visible: false }
 ]);
 
 const initFormData: CustomerInfoForm = {
@@ -475,7 +635,7 @@ const data = reactive<PageData<CustomerInfoForm, CustomerInfoQuery>>({
     bankNumber: undefined,
     ossId: undefined,
     activeFlag: undefined,
-    ourCompanyFlag: undefined,
+    ourCompanyFlag: '0',
     params: {
     }
   },
@@ -505,6 +665,7 @@ const reset = () => {
   form.value = {...initFormData};
   customerInfoFormRef.value?.resetFields();
   userOptions.value = [];
+  customerOptions.value = [];
 }
 
 /** 搜索按钮操作 */
@@ -526,10 +687,30 @@ const handleSelectionChange = (selection: CustomerInfoVO[]) => {
   multiple.value = !selection.length;
 }
 
+/** 加载客户列表 */
+const loadCustomerList = async () => {
+  customerLoading.value = true;
+  try {
+    const res = await getCrmCustomerInfoList(null);
+    // 过滤掉当前正在编辑的客户（避免选择自己作为上级）
+    const filteredList = res.data?.filter((customer: CustomerInfoVO) =>
+      customer.customerId !== form.value.customerId
+    ) || [];
+    customerOptions.value = filteredList;
+  } catch (error) {
+    console.error('加载客户列表失败:', error);
+    customerOptions.value = [];
+  } finally {
+    customerLoading.value = false;
+  }
+}
+
 /** 新增按钮操作 */
-const handleAdd = () => {
+const handleAdd = async () => {
   reset();
   userOptions.value = [];
+  customerOptions.value = [];
+  await loadCustomerList();
   dialog.visible = true;
   dialog.title = "添加客户信息";
 }
@@ -540,6 +721,24 @@ const handleUpdate = async (row?: CustomerInfoVO) => {
   const _customerId = row?.customerId || ids.value[0]
   const res = await getCustomerInfo(_customerId);
   Object.assign(form.value, res.data);
+  // 加载客户列表
+  await loadCustomerList();
+  // 如果已选上级客户不在列表中（可能被过滤），需要单独加载
+  if (form.value.parentCustomerId) {
+    const exists = customerOptions.value.some(
+      (customer: CustomerInfoVO) => customer.customerId === form.value.parentCustomerId
+    );
+    if (!exists) {
+      try {
+        const customerRes = await getCustomerInfo(form.value.parentCustomerId);
+        if (customerRes.data) {
+          customerOptions.value.unshift(customerRes.data);
+        }
+      } catch (error) {
+        console.error('加载已选上级客户失败:', error);
+      }
+    }
+  }
   // 加载已选用户信息
   if (form.value.ownerId) {
     await loadSelectedUser(form.value.ownerId);
@@ -587,6 +786,7 @@ const remoteUserMethod = async (query: string) => {
   }
 }
 
+
 /** 提交按钮 */
 const submitForm = () => {
   customerInfoFormRef.value?.validate(async (valid: boolean) => {
@@ -620,6 +820,44 @@ const handleExport = () => {
   }, `customerInfo_${new Date().getTime()}.xlsx`)
 }
 
+/** 查看客户关系 */
+const handleViewRelation = async (row: CustomerInfoVO) => {
+  relationLoading.value = true;
+  currentCustomer.value = row;
+  parentCustomerList.value = [];
+  childCustomerList.value = [];
+
+  try {
+    // 查询上级客户（如果有parentCustomerId）
+    if (row.parentCustomerId) {
+      try {
+        const parentRes = await getCustomerInfo(row.parentCustomerId);
+        if (parentRes.data) {
+          parentCustomerList.value = [parentRes.data];
+        }
+      } catch (error) {
+        console.error('查询上级客户失败:', error);
+      }
+    }
+
+    // 查询下级客户（parentCustomerId等于当前客户ID的客户）
+    const childRes = await getCrmCustomerInfoList({
+      parentCustomerId: row.customerId
+    });
+    // 统一使用 data 字段，如果返回的是 rows 则使用 rows
+    const childList = childRes.data || childRes.rows || [];
+    if (childList.length > 0) {
+      childCustomerList.value = childList;
+    }
+  } catch (error) {
+    console.error('查询客户关系失败:', error);
+    proxy?.$modal.msgError('查询客户关系失败');
+  } finally {
+    relationLoading.value = false;
+    relationDialog.visible = true;
+  }
+}
+
 onMounted(() => {
   getList();
 });
diff --git a/src/views/oa/crm/customerInfo/ourIndex.vue b/src/views/oa/crm/customerInfo/ourIndex.vue
new file mode 100644
index 0000000..6dd4008
--- /dev/null
+++ b/src/views/oa/crm/customerInfo/ourIndex.vue
@@ -0,0 +1,824 @@
+<template>
+  <div class="p-2">
+    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+      <div v-show="showSearch" class="mb-[10px]">
+        <el-card shadow="hover">
+          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+            <el-form-item label="公司名称" prop="customerName">
+              <el-input v-model="queryParams.customerName" placeholder="请输入公司名称" clearable @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="助记名称" prop="mnemonicName">
+              <el-input v-model="queryParams.mnemonicName" placeholder="请输入助记名称" clearable @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="所属行业" prop="industryId">
+              <el-select v-model="queryParams.industryId" placeholder="请选择所属行业" clearable>
+                <el-option v-for="dict in industry_id" :key="dict.value" :label="dict.label" :value="dict.value" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="公司类型" prop="customerType">
+              <el-select v-model="queryParams.customerType" placeholder="请选择公司类型" clearable>
+                <el-option v-for="dict in customer_type" :key="dict.value" :label="dict.label" :value="dict.value" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="公司状态" prop="customerStatus">
+              <el-select v-model="queryParams.customerStatus" placeholder="请选择公司状态" clearable>
+                <el-option v-for="dict in customer_status" :key="dict.value" :label="dict.label" :value="dict.value" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="公司级别" prop="customerLevel">
+              <el-select v-model="queryParams.customerLevel" placeholder="请选择公司级别" clearable>
+                <el-option v-for="dict in customer_level" :key="dict.value" :label="dict.label" :value="dict.value" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="公司来源" prop="customerSource">
+              <el-select v-model="queryParams.customerSource" placeholder="请选择公司来源" clearable>
+                <el-option v-for="dict in customer_source" :key="dict.value" :label="dict.label" :value="dict.value" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="企业规模" prop="customerScale">
+              <el-select v-model="queryParams.customerScale" placeholder="请选择企业规模" clearable>
+                <el-option v-for="dict in customer_scale" :key="dict.value" :label="dict.label" :value="dict.value" />
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </div>
+    </transition>
+
+    <el-card shadow="never">
+      <!--      <template #header>-->
+      <!--        <el-row :gutter="10" class="mb8">-->
+      <!--          <el-col :span="1.5">-->
+      <!--            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['oa/crm:customerInfo:add']">新增</el-button>-->
+      <!--          </el-col>-->
+      <!--          <el-col :span="1.5">-->
+      <!--            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['oa/crm:customerInfo:edit']">修改</el-button>-->
+      <!--          </el-col>-->
+      <!--          <el-col :span="1.5">-->
+      <!--            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['oa/crm:customerInfo:remove']">删除</el-button>-->
+      <!--          </el-col>-->
+      <!--          <el-col :span="1.5">-->
+      <!--            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['oa/crm:customerInfo:export']">导出</el-button>-->
+      <!--          </el-col>-->
+      <!--          <right-toolbar v-model:showSearch="showSearch" :columns="columns" :search="true" @queryTable="getList"></right-toolbar>-->
+      <!--        </el-row>-->
+      <!--      </template>-->
+
+      <el-table v-loading="loading" border :data="customerInfoList" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="公司ID" align="center" prop="customerId" width="80" v-if="columns[0].visible" />
+        <el-table-column label="公司名称" align="center" prop="customerName" width="200" v-if="columns[2].visible" show-overflow-tooltip />
+        <el-table-column label="助记名称" align="center" prop="mnemonicName" width="130" v-if="columns[3].visible" show-overflow-tooltip />
+        <el-table-column label="所属行业" align="center" prop="industryId" width="110" v-if="columns[4].visible">
+          <template #default="scope">
+            <dict-tag :options="industry_id" :value="scope.row.industryId" />
+          </template>
+        </el-table-column>
+        <el-table-column label="公司类型" align="center" prop="customerType" width="110" v-if="columns[5].visible">
+          <template #default="scope">
+            <dict-tag :options="customer_type" :value="scope.row.customerType" />
+          </template>
+        </el-table-column>
+        <el-table-column label="公司状态" align="center" prop="customerStatus" width="120" v-if="columns[6].visible">
+          <template #default="scope">
+            <dict-tag :options="customer_status" :value="scope.row.customerStatus" />
+          </template>
+        </el-table-column>
+        <el-table-column label="公司级别" align="center" prop="customerLevel" width="110" v-if="columns[7].visible">
+          <template #default="scope">
+            <dict-tag :options="customer_level" :value="scope.row.customerLevel" />
+          </template>
+        </el-table-column>
+        <el-table-column label="公司来源" align="center" prop="customerSource" width="130" v-if="columns[8].visible">
+          <template #default="scope">
+            <dict-tag :options="customer_source" :value="scope.row.customerSource" />
+          </template>
+        </el-table-column>
+        <el-table-column label="公司经理" align="center" prop="ownerName" width="120" v-if="columns[9].visible" show-overflow-tooltip />
+        <el-table-column label="详细地址" align="center" prop="detailedAddress" width="200" v-if="columns[10].visible" show-overflow-tooltip />
+        <el-table-column label="企业规模" align="center" prop="customerScale" width="120" v-if="columns[11].visible">
+          <template #default="scope">
+            <dict-tag :options="customer_scale" :value="scope.row.customerScale" />
+          </template>
+        </el-table-column>
+        <el-table-column label="上级公司" align="center" prop="parentCustomerId" width="100" v-if="columns[12].visible" />
+        <el-table-column label="公司关系" align="center" prop="customerRelationship" width="120" v-if="columns[13].visible" show-overflow-tooltip />
+        <el-table-column label="法定代表人" align="center" prop="legalRepresentative" width="130" v-if="columns[14].visible" show-overflow-tooltip />
+        <el-table-column
+          label="营业执照号码"
+          align="center"
+          prop="businessLicenseNumber"
+          width="150"
+          v-if="columns[15].visible"
+          show-overflow-tooltip
+        />
+        <el-table-column label="税号" align="center" prop="taxNumber" width="150" v-if="columns[16].visible" show-overflow-tooltip />
+        <el-table-column label="开户银行" align="center" prop="bankAccountOpening" width="180" v-if="columns[17].visible" show-overflow-tooltip />
+        <el-table-column label="银行账号" align="center" prop="bankNumber" width="180" v-if="columns[18].visible" show-overflow-tooltip />
+        <el-table-column label="附件ID" align="center" prop="ossId" width="100" v-if="columns[19].visible" />
+        <el-table-column label="备注" align="center" prop="remark" width="200" v-if="columns[20].visible" show-overflow-tooltip />
+        <el-table-column label="激活标识" align="center" prop="activeFlag" width="100" v-if="columns[21].visible">
+          <template #default="scope">
+            <dict-tag :options="active_flag" :value="scope.row.activeFlag" />
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" fixed="right" width="180" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <!--            <el-tooltip content="公司关系" placement="top">-->
+            <!--              <el-button link type="primary" icon="Connection" @click="handleViewRelation(scope.row)"></el-button>-->
+            <!--            </el-tooltip>-->
+            <el-tooltip content="修改" placement="top">
+              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['oa/crm:customerInfo:edit']"></el-button>
+            </el-tooltip>
+            <!--            <el-tooltip content="删除" placement="top">-->
+            <!--              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['oa/crm:customerInfo:remove']"></el-button>-->
+            <!--            </el-tooltip>-->
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+    </el-card>
+    <!-- 添加或修改公司信息对话框 -->
+    <el-dialog :title="dialog.title" v-model="dialog.visible" width="900px" append-to-body>
+      <el-form ref="customerInfoFormRef" :model="form" :rules="rules" label-width="120px">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="公司名称" prop="customerName">
+              <el-input v-model="form.customerName" placeholder="请输入公司名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="助记名称" prop="mnemonicName">
+              <el-input v-model="form.mnemonicName" placeholder="请输入助记名称" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="所属行业" prop="industryId">
+              <el-select v-model="form.industryId" placeholder="请选择所属行业" style="width: 100%">
+                <el-option v-for="dict in industry_id" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="公司类型" prop="customerType">
+              <el-select v-model="form.customerType" placeholder="请选择公司类型" style="width: 100%">
+                <el-option v-for="dict in customer_type" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="公司状态" prop="customerStatus">
+              <el-select v-model="form.customerStatus" placeholder="请选择公司状态" style="width: 100%">
+                <el-option v-for="dict in customer_status" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="公司级别" prop="customerLevel">
+              <el-select v-model="form.customerLevel" placeholder="请选择公司级别" style="width: 100%">
+                <el-option v-for="dict in customer_level" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="公司来源" prop="customerSource">
+              <el-select v-model="form.customerSource" placeholder="请选择公司来源" style="width: 100%">
+                <el-option v-for="dict in customer_source" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="公司经理" prop="ownerId">
+              <el-select
+                v-model="form.ownerId"
+                placeholder="请选择公司经理"
+                filterable
+                remote
+                :remote-method="remoteUserMethod"
+                :loading="userLoading"
+                style="width: 100%"
+                clearable
+              >
+                <el-option v-for="user in userOptions" :key="user.userId" :label="user.nickName" :value="user.userId">
+                  <span style="float: left">{{ user.nickName }}</span>
+                  <span style="float: right; color: #8492a6; font-size: 13px">{{ user.userName }}</span>
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-form-item label="详细地址" prop="detailedAddress">
+              <el-input v-model="form.detailedAddress" placeholder="请输入详细地址" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="企业规模" prop="customerScale">
+              <el-select v-model="form.customerScale" placeholder="请选择企业规模" style="width: 100%">
+                <el-option v-for="dict in customer_scale" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="上级公司" prop="parentCustomerId">
+              <el-select
+                v-model="form.parentCustomerId"
+                placeholder="请选择上级公司"
+                filterable
+                :loading="customerLoading"
+                style="width: 100%"
+                clearable
+              >
+                <el-option v-for="customer in customerOptions" :key="customer.customerId" :label="customer.customerName" :value="customer.customerId">
+                  <span style="float: left">{{ customer.customerName }}</span>
+                  <span style="float: right; color: #8492a6; font-size: 13px">{{ customer.mnemonicName }}</span>
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="公司关系" prop="customerRelationship">
+              <el-input v-model="form.customerRelationship" placeholder="请输入公司关系" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="法定代表人" prop="legalRepresentative">
+              <el-input v-model="form.legalRepresentative" placeholder="请输入法定代表人" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="营业执照号码" prop="businessLicenseNumber">
+              <el-input v-model="form.businessLicenseNumber" placeholder="请输入营业执照号码" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="税号" prop="taxNumber">
+              <el-input v-model="form.taxNumber" placeholder="请输入税号" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="开户银行" prop="bankAccountOpening">
+              <el-input v-model="form.bankAccountOpening" placeholder="请输入开户银行" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="银行账号" prop="bankNumber">
+              <el-input v-model="form.bankNumber" placeholder="请输入银行账号" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-form-item label="附件" prop="ossId">
+              <FileUpload v-model="ossIdString" :limit="5" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-form-item label="备注" prop="remark">
+              <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <!--        <el-form-item label="激活标识" prop="activeFlag">-->
+        <!--          <el-radio-group v-model="form.activeFlag">-->
+        <!--            <el-radio-->
+        <!--              v-for="dict in active_flag"-->
+        <!--              :key="dict.value"-->
+        <!--              :value="dict.value"-->
+        <!--            >{{dict.label}}</el-radio>-->
+        <!--          </el-radio-group>-->
+        <!--        </el-form-item>-->
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!-- 公司关系查看对话框 -->
+    <el-dialog title="公司关系" v-model="relationDialog.visible" width="1000px" append-to-body>
+      <div v-loading="relationLoading">
+        <!-- 当前公司信息卡片 -->
+        <el-card shadow="hover" style="margin-bottom: 20px">
+          <template #header>
+            <div style="display: flex; align-items: center; justify-content: space-between">
+              <span style="font-size: 16px; font-weight: bold; color: #409eff"> 当前公司 </span>
+            </div>
+          </template>
+          <el-descriptions :column="3" border>
+            <el-descriptions-item label="公司名称" :span="2">
+              <strong style="font-size: 16px; color: #303133">{{ currentCustomer.customerName }}</strong>
+            </el-descriptions-item>
+            <el-descriptions-item label="助记名称">
+              {{ currentCustomer.mnemonicName || '-' }}
+            </el-descriptions-item>
+            <el-descriptions-item label="公司类型">
+              <dict-tag :options="customer_type" :value="currentCustomer.customerType" />
+            </el-descriptions-item>
+            <el-descriptions-item label="公司状态">
+              <dict-tag :options="customer_status" :value="currentCustomer.customerStatus" />
+            </el-descriptions-item>
+            <el-descriptions-item label="公司级别">
+              <dict-tag :options="customer_level" :value="currentCustomer.customerLevel" />
+            </el-descriptions-item>
+            <el-descriptions-item label="公司经理">
+              {{ currentCustomer.ownerName || '-' }}
+            </el-descriptions-item>
+            <el-descriptions-item label="所属行业">
+              <dict-tag :options="industry_id" :value="currentCustomer.industryId" />
+            </el-descriptions-item>
+            <el-descriptions-item label="企业规模">
+              <dict-tag :options="customer_scale" :value="currentCustomer.customerScale" />
+            </el-descriptions-item>
+          </el-descriptions>
+        </el-card>
+
+        <!-- 公司关系结构 -->
+        <el-row :gutter="20">
+          <!-- 上级公司 -->
+          <el-col :span="12">
+            <el-card shadow="hover">
+              <template #header>
+                <div style="display: flex; align-items: center; justify-content: space-between">
+                  <span style="font-size: 14px; font-weight: bold"> 上级公司 </span>
+                  <el-tag type="success" size="small">{{ parentCustomerList.length }} 个</el-tag>
+                </div>
+              </template>
+              <div v-if="parentCustomerList.length > 0">
+                <el-table :data="parentCustomerList" border size="small" max-height="400">
+                  <el-table-column label="公司名称" prop="customerName" min-width="150" show-overflow-tooltip>
+                    <template #default="scope">
+                      <el-link type="primary" @click="handleViewRelation(scope.row)" style="font-weight: 500">
+                        {{ scope.row.customerName }}
+                      </el-link>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="助记名称" prop="mnemonicName" width="120" show-overflow-tooltip />
+                  <el-table-column label="公司类型" prop="customerType" width="100">
+                    <template #default="scope">
+                      <dict-tag :options="customer_type" :value="scope.row.customerType" />
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="公司状态" prop="customerStatus" width="100">
+                    <template #default="scope">
+                      <dict-tag :options="customer_status" :value="scope.row.customerStatus" />
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="公司级别" prop="customerLevel" width="100">
+                    <template #default="scope">
+                      <dict-tag :options="customer_level" :value="scope.row.customerLevel" />
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="公司经理" prop="ownerName" width="100" show-overflow-tooltip />
+                </el-table>
+              </div>
+              <el-empty v-else description="暂无上级公司" :image-size="60" style="padding: 40px 0">
+                <el-text type="info" size="small">该公司没有上级公司</el-text>
+              </el-empty>
+            </el-card>
+          </el-col>
+
+          <!-- 下级公司 -->
+          <el-col :span="12">
+            <el-card shadow="hover">
+              <template #header>
+                <div style="display: flex; align-items: center; justify-content: space-between">
+                  <span style="font-size: 14px; font-weight: bold"> 下级公司 </span>
+                  <el-tag type="warning" size="small">{{ childCustomerList.length }} 个</el-tag>
+                </div>
+              </template>
+              <div v-if="childCustomerList.length > 0">
+                <el-table :data="childCustomerList" border size="small" max-height="400">
+                  <el-table-column label="公司名称" prop="customerName" min-width="150" show-overflow-tooltip>
+                    <template #default="scope">
+                      <el-link type="primary" @click="handleViewRelation(scope.row)" style="font-weight: 500">
+                        {{ scope.row.customerName }}
+                      </el-link>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="助记名称" prop="mnemonicName" width="120" show-overflow-tooltip />
+                  <el-table-column label="公司类型" prop="customerType" width="100">
+                    <template #default="scope">
+                      <dict-tag :options="customer_type" :value="scope.row.customerType" />
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="公司状态" prop="customerStatus" width="100">
+                    <template #default="scope">
+                      <dict-tag :options="customer_status" :value="scope.row.customerStatus" />
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="公司级别" prop="customerLevel" width="100">
+                    <template #default="scope">
+                      <dict-tag :options="customer_level" :value="scope.row.customerLevel" />
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="公司经理" prop="ownerName" width="100" show-overflow-tooltip />
+                </el-table>
+              </div>
+              <el-empty v-else description="暂无下级公司" :image-size="60" style="padding: 40px 0">
+                <el-text type="info" size="small">该公司没有下级公司</el-text>
+              </el-empty>
+            </el-card>
+          </el-col>
+        </el-row>
+      </div>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="relationDialog.visible = false">关 闭</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="CustomerInfo" lang="ts">
+import {
+  listCustomerInfo,
+  getCustomerInfo,
+  delCustomerInfo,
+  addCustomerInfo,
+  updateCustomerInfo,
+  getCrmCustomerInfoList
+} from '@/api/oa/crm/customerInfo';
+import { CustomerInfoVO, CustomerInfoQuery, CustomerInfoForm } from '@/api/oa/crm/customerInfo/types';
+import { listUser, optionSelect } from '@/api/system/user';
+import { UserVO } from '@/api/system/user/types';
+import FileUpload from '@/components/FileUpload/index.vue';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { customer_type, active_flag, industry_id, customer_source, customer_scale, customer_status, customer_level } = toRefs<any>(
+  proxy?.useDict('customer_type', 'active_flag', 'industry_id', 'customer_source', 'customer_scale', 'customer_status', 'customer_level')
+);
+
+const customerInfoList = ref<CustomerInfoVO[]>([]);
+const buttonLoading = ref(false);
+const loading = ref(true);
+const showSearch = ref(false);
+const ids = ref<Array<string | number>>([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const userOptions = ref<UserVO[]>([]);
+const userLoading = ref(false);
+const customerOptions = ref<CustomerInfoVO[]>([]);
+const customerLoading = ref(false);
+const relationLoading = ref(false);
+const parentCustomerList = ref<CustomerInfoVO[]>([]);
+const childCustomerList = ref<CustomerInfoVO[]>([]);
+const currentCustomer = ref<CustomerInfoVO>({} as CustomerInfoVO);
+
+const queryFormRef = ref<ElFormInstance>();
+const customerInfoFormRef = ref<ElFormInstance>();
+
+// 附件ID字符串转换（用于FileUpload组件）
+const ossIdString = computed({
+  get: () => {
+    if (form.value.ossId === undefined || form.value.ossId === null) {
+      return '';
+    }
+    return String(form.value.ossId);
+  },
+  set: (val: string) => {
+    form.value.ossId = val || undefined;
+  }
+});
+
+const dialog = reactive<DialogOption>({
+  visible: false,
+  title: ''
+});
+
+const relationDialog = reactive<DialogOption>({
+  visible: false,
+  title: ''
+});
+
+// 列显隐信息
+const columns = ref<FieldOption[]>([
+  { key: 0, label: `公司ID`, visible: false },
+  { key: 1, label: `租户编号`, visible: false },
+  { key: 2, label: `公司名称`, visible: true },
+  { key: 3, label: `助记名称`, visible: true },
+  { key: 4, label: `所属行业`, visible: true },
+  { key: 5, label: `公司类型`, visible: true },
+  { key: 6, label: `公司状态`, visible: true },
+  { key: 7, label: `公司级别`, visible: true },
+  { key: 8, label: `公司来源`, visible: true },
+  { key: 9, label: `公司经理`, visible: true },
+  { key: 10, label: `详细地址`, visible: true },
+  { key: 11, label: `企业规模`, visible: true },
+  { key: 12, label: `上级公司`, visible: true },
+  { key: 13, label: `公司关系`, visible: true },
+  { key: 14, label: `法定代表人`, visible: true },
+  { key: 15, label: `营业执照号码`, visible: true },
+  { key: 16, label: `税号`, visible: true },
+  { key: 17, label: `开户银行`, visible: true },
+  { key: 18, label: `银行账号`, visible: true },
+  { key: 19, label: `附件ID`, visible: false },
+  { key: 20, label: `备注`, visible: false },
+  { key: 21, label: `激活标识`, visible: false },
+  { key: 22, label: `删除标志`, visible: false },
+  { key: 23, label: `创建部门`, visible: false },
+  { key: 24, label: `创建人`, visible: false },
+  { key: 25, label: `创建时间`, visible: false },
+  { key: 26, label: `更新人`, visible: false },
+  { key: 27, label: `更新时间`, visible: false }
+]);
+
+const initFormData: CustomerInfoForm = {
+  customerId: undefined,
+  customerName: undefined,
+  mnemonicName: undefined,
+  industryId: undefined,
+  customerType: undefined,
+  customerStatus: undefined,
+  customerLevel: undefined,
+  customerSource: undefined,
+  ownerId: undefined,
+  detailedAddress: undefined,
+  customerScale: undefined,
+  parentCustomerId: undefined,
+  customerRelationship: undefined,
+  legalRepresentative: undefined,
+  businessLicenseNumber: undefined,
+  taxNumber: undefined,
+  bankAccountOpening: undefined,
+  bankNumber: undefined,
+  ossId: undefined,
+  remark: undefined,
+  activeFlag: undefined,
+  ourCompanyFlag: undefined
+};
+const data = reactive<PageData<CustomerInfoForm, CustomerInfoQuery>>({
+  form: { ...initFormData },
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    customerName: undefined,
+    mnemonicName: undefined,
+    industryId: undefined,
+    customerType: undefined,
+    customerStatus: undefined,
+    customerLevel: undefined,
+    customerSource: undefined,
+    ownerId: undefined,
+    detailedAddress: undefined,
+    customerScale: undefined,
+    parentCustomerId: undefined,
+    customerRelationship: undefined,
+    legalRepresentative: undefined,
+    businessLicenseNumber: undefined,
+    taxNumber: undefined,
+    bankAccountOpening: undefined,
+    bankNumber: undefined,
+    ossId: undefined,
+    activeFlag: undefined,
+    ourCompanyFlag: '1',
+    params: {}
+  },
+  rules: {}
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询公司信息列表 */
+const getList = async () => {
+  loading.value = true;
+  const res = await listCustomerInfo(queryParams.value);
+  customerInfoList.value = res.rows;
+  total.value = res.total;
+  loading.value = false;
+};
+
+/** 取消按钮 */
+const cancel = () => {
+  reset();
+  dialog.visible = false;
+};
+
+/** 表单重置 */
+const reset = () => {
+  form.value = { ...initFormData };
+  customerInfoFormRef.value?.resetFields();
+  userOptions.value = [];
+  customerOptions.value = [];
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  handleQuery();
+};
+
+/** 多选框选中数据 */
+const handleSelectionChange = (selection: CustomerInfoVO[]) => {
+  ids.value = selection.map((item) => item.customerId);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+};
+
+/** 加载公司列表 */
+const loadCustomerList = async () => {
+  customerLoading.value = true;
+  try {
+    const res = await getCrmCustomerInfoList(null);
+    // 过滤掉当前正在编辑的公司（避免选择自己作为上级）
+    const filteredList = res.data?.filter((customer: CustomerInfoVO) => customer.customerId !== form.value.customerId) || [];
+    customerOptions.value = filteredList;
+  } catch (error) {
+    console.error('加载公司列表失败:', error);
+    customerOptions.value = [];
+  } finally {
+    customerLoading.value = false;
+  }
+};
+
+/** 新增按钮操作 */
+const handleAdd = async () => {
+  reset();
+  userOptions.value = [];
+  customerOptions.value = [];
+  await loadCustomerList();
+  dialog.visible = true;
+  dialog.title = '添加公司信息';
+};
+
+/** 修改按钮操作 */
+const handleUpdate = async (row?: CustomerInfoVO) => {
+  reset();
+  const _customerId = row?.customerId || ids.value[0];
+  const res = await getCustomerInfo(_customerId);
+  Object.assign(form.value, res.data);
+  // 加载公司列表
+  await loadCustomerList();
+  // 如果已选上级公司不在列表中（可能被过滤），需要单独加载
+  if (form.value.parentCustomerId) {
+    const exists = customerOptions.value.some((customer: CustomerInfoVO) => customer.customerId === form.value.parentCustomerId);
+    if (!exists) {
+      try {
+        const customerRes = await getCustomerInfo(form.value.parentCustomerId);
+        if (customerRes.data) {
+          customerOptions.value.unshift(customerRes.data);
+        }
+      } catch (error) {
+        console.error('加载已选上级公司失败:', error);
+      }
+    }
+  }
+  // 加载已选用户信息
+  if (form.value.ownerId) {
+    await loadSelectedUser(form.value.ownerId);
+  }
+  dialog.visible = true;
+  dialog.title = '修改公司信息';
+};
+
+/** 加载已选用户信息 */
+const loadSelectedUser = async (userId: string | number) => {
+  try {
+    const res = await optionSelect([userId]);
+    if (res.data && res.data.length > 0) {
+      userOptions.value = res.data;
+    }
+  } catch (error) {
+    console.error('加载用户信息失败:', error);
+  }
+};
+
+/** 远程搜索用户 */
+const remoteUserMethod = async (query: string) => {
+  if (query) {
+    userLoading.value = true;
+    try {
+      const res = await listUser({
+        pageNum: 1,
+        pageSize: 20,
+        nickName: query,
+        status: '0'
+      });
+      userOptions.value = res.rows || [];
+    } catch (error) {
+      console.error('搜索用户失败:', error);
+      userOptions.value = [];
+    } finally {
+      userLoading.value = false;
+    }
+  } else {
+    userOptions.value = [];
+    // 如果有已选用户，加载已选用户信息
+    if (form.value.ownerId) {
+      await loadSelectedUser(form.value.ownerId);
+    }
+  }
+};
+
+/** 提交按钮 */
+const submitForm = () => {
+  customerInfoFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      buttonLoading.value = true;
+      if (form.value.customerId) {
+        await updateCustomerInfo(form.value).finally(() => (buttonLoading.value = false));
+      } else {
+        await addCustomerInfo(form.value).finally(() => (buttonLoading.value = false));
+      }
+      proxy?.$modal.msgSuccess('操作成功');
+      dialog.visible = false;
+      await getList();
+    }
+  });
+};
+
+/** 删除按钮操作 */
+const handleDelete = async (row?: CustomerInfoVO) => {
+  const _customerIds = row?.customerId || ids.value;
+  await proxy?.$modal.confirm('是否确认删除公司信息编号为"' + _customerIds + '"的数据项？').finally(() => (loading.value = false));
+  await delCustomerInfo(_customerIds);
+  proxy?.$modal.msgSuccess('删除成功');
+  await getList();
+};
+
+/** 导出按钮操作 */
+const handleExport = () => {
+  proxy?.download(
+    'oa/crm/customerInfo/export',
+    {
+      ...queryParams.value
+    },
+    `customerInfo_${new Date().getTime()}.xlsx`
+  );
+};
+
+/** 查看公司关系 */
+const handleViewRelation = async (row: CustomerInfoVO) => {
+  relationLoading.value = true;
+  currentCustomer.value = row;
+  parentCustomerList.value = [];
+  childCustomerList.value = [];
+
+  try {
+    // 查询上级公司（如果有parentCustomerId）
+    if (row.parentCustomerId) {
+      try {
+        const parentRes = await getCustomerInfo(row.parentCustomerId);
+        if (parentRes.data) {
+          parentCustomerList.value = [parentRes.data];
+        }
+      } catch (error) {
+        console.error('查询上级公司失败:', error);
+      }
+    }
+
+    // 查询下级公司（parentCustomerId等于当前公司ID的公司）
+    const childRes = await getCrmCustomerInfoList({
+      parentCustomerId: row.customerId
+    });
+    // 统一使用 data 字段，如果返回的是 rows 则使用 rows
+    const childList = childRes.data || childRes.rows || [];
+    if (childList.length > 0) {
+      childCustomerList.value = childList;
+    }
+  } catch (error) {
+    console.error('查询公司关系失败:', error);
+    proxy?.$modal.msgError('查询公司关系失败');
+  } finally {
+    relationLoading.value = false;
+    relationDialog.visible = true;
+  }
+};
+
+onMounted(() => {
+  getList();
+});
+</script>