From d958d88a5101b866746f5b5a26f1e67ca8d17ae7 Mon Sep 17 00:00:00 2001
From: jiayang yue <jiayang.yue@xujiesoft.com>
Date: Fri, 11 Apr 2025 18:23:36 +0800
Subject: [PATCH] =?UTF-8?q?2025-04-11=20=E5=AE=A2=E6=88=B7=E4=BF=A1?=
 =?UTF-8?q?=E6=81=AF=E7=AE=A1=E7=90=86=E5=8A=9F=E8=83=BD=E7=A7=BB=E6=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/customer/customer.js        |   26 +
 src/views/modules/customer/info.vue | 1446 +++++++++++++++++++++++++++
 2 files changed, 1472 insertions(+)
 create mode 100644 src/api/customer/customer.js
 create mode 100644 src/views/modules/customer/info.vue

diff --git a/src/api/customer/customer.js b/src/api/customer/customer.js
new file mode 100644
index 0000000..eb3b21c
--- /dev/null
+++ b/src/api/customer/customer.js
@@ -0,0 +1,26 @@
+import { createAPI } from "@/utils/httpRequest.js";
+
+export const customerData = data => createAPI(`/cust/CustomerData`,'post',data)
+
+export const customerSave = data => createAPI(`/cust/customerSave`,'post',data)
+
+export const customerDelete = id => createAPI(`/cust/customerDel`,'post',id)
+
+// 客户开票信息
+export const fetchBillingData = data => createAPI(`/cust/fetchBillingData`,'post',data)
+
+// 删除开票信息
+export const removeBillingData = id => createAPI(`/cust/removeBillingData`,'post',id)
+
+// 保存开票信息
+export const billingSave = data => createAPI(`/cust/billingSave`,'post',data)
+
+// 获取联系人信息
+export const fetchPersonData = data => createAPI(`/cust/fetchPersonData`,'post',data)
+
+// 保存联系人信息
+export const personSave = data => createAPI(`/cust/personSave`,'post',data)
+
+// 停用联系人
+export const personInactive = id => createAPI(`/cust/personInactive`,'post',id)
+
diff --git a/src/views/modules/customer/info.vue b/src/views/modules/customer/info.vue
new file mode 100644
index 0000000..a8c420d
--- /dev/null
+++ b/src/views/modules/customer/info.vue
@@ -0,0 +1,1446 @@
+<template>
+  <div class="customer-maintenance">
+    <!-- 查询和按钮区 -->
+          <el-form inline>
+            <el-form-item label="客户名称">
+              <el-input v-model="searchData.searchName" placeholder="请输入" size="small"
+                        style="width: 120px;margin-top: 2px"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button @click="searchCustomer">查询</el-button>
+              <el-button type="primary" @click="openAddCustomerModal" style="margin-left: 10px;">新增</el-button>
+            </el-form-item>
+          </el-form>
+      <!-- 客户信息列表 -->
+    <el-table :data="customerList" border :height="height" style="width: 100%;"
+              >
+      <el-table-column
+        v-for="(item,index) in columnList" :key="index"
+        :sortable="item.columnSortable"
+        :prop="item.columnProp"
+        :header-align="item.headerAlign"
+        :show-overflow-tooltip="item.showOverflowTooltip"
+        :align="item.align"
+        :fixed="item.fixed==''?false:item.fixed"
+        :min-width="item.columnWidth"
+        :label="item.columnLabel">
+        <template slot-scope="scope">
+          <span v-if="!item.columnHidden">{{ scope.row[item.columnProp] }}</span>
+          <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]" style="width: 100px; height: 80px"/></span>
+        </template>
+      </el-table-column>
+      <el-table-column fixed="right" header-align="center" align="center" width="180" label="操作">
+        <template slot-scope="scope">
+          <a type="text" size="small" @click="editCustomer(scope.row)">编辑</a>
+          <a type="text" size="small" @click="openBilling(scope.row)">开票信息</a>
+          <a type="text" size="small" @click="deleteCustomer(scope.row)">删除</a>
+          <a type="text" size="small" @click="openPerson(scope.row)">联系人</a>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页栏 -->
+    <el-pagination
+      @size-change="sizeChangeHandle"
+      @current-change="currentChangeHandle"
+      :current-page="pageIndex"
+      :page-sizes="[20, 50, 100, 200, 500]"
+      :page-size="pageSize"
+      :total="totalPage"
+      layout="total, sizes, prev, pager, next, jumper">
+    </el-pagination>
+
+    <!-- 客户新增/编辑模态框 -->
+    <el-dialog
+      :title="customerModalTitle"
+      :visible.sync="showCustomerModal"
+      width="723px"
+      @close="closeCustomerModal"
+      :close-on-click-modal="false">
+
+      <!-- 第一行：客户名称、项目类别、客户类型 -->
+      <el-form :inline="true" label-position="top" :model="customerForm" :rules="customerRules" style="margin-left:7px; margin-top:-5px;">
+        <el-form-item label="客户名称" :rules="customerRules.customerName">
+          <el-input
+            v-model="customerForm.customerName"
+            size="small"
+            style="font-size:12px; height:30px;width: 120px">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="项目类别">
+          <el-select
+            v-model="customerForm.customerClassification"
+            placeholder="请选择"
+            size="small"
+            style="font-size:12px; height:30px;width: 120px">
+            <el-option
+              v-for="item in classificationOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="客户类型">
+          <el-select
+            v-model="customerForm.customerType"
+            placeholder="请选择"
+            size="small"
+            style="font-size:12px; height:30px;width: 150px">
+            <el-option
+              v-for="item in customerTypeOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="所属行业" :rules="customerRules.customerIndustry">
+          <el-input
+            v-model="customerForm.customerIndustry"
+            size="small"
+            style="font-size:12px; height:30px;width: 120px">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="是否收年费">
+          <el-select
+            v-model="customerForm.serviceChargeFlag"
+            size="small"
+            style="font-size:12px; height:30px;width: 120px">
+            <el-option label="是" value="Y"></el-option>
+            <el-option label="否" value="N"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+
+      <el-form :inline="true" label-position="top" :model="customerForm" style="margin-left: 7px; margin-top: 8px;">
+        <el-form-item label="区域" :rules="customerRules.district">
+          <el-input
+            v-model="customerForm.district"
+            size="small"
+            style="font-size:12px; height:30px;width: 120px">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="联系人">
+          <el-input
+            v-model="customerForm.contact"
+            size="small"
+            style="font-size:12px; height:30px;width: 120px">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="邮件地址">
+          <el-input
+            v-model="customerForm.emailAddr"
+            size="small"
+            style="font-size:12px; height:30px;width: 150px">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="QQ账户">
+          <el-input
+            v-model="customerForm.qqAccount"
+            size="small"
+            style="font-size:12px; height:30px;width: 120px">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="微信">
+          <el-input
+            v-model="customerForm.weChatAccount"
+            size="small"
+            style="font-size:12px; height:30px;width: 120px">
+          </el-input>
+        </el-form-item>
+      </el-form>
+      <el-form :inline="true" label-position="top" :model="customerForm" style="margin-left: 7px; margin-top: 8px;">
+        <el-form-item label="客户来源">
+          <el-select
+            v-model="customerForm.customerSource"
+            placeholder="请选择"
+            size="small"
+            style="font-size:12px; height:30px;width: 120px">
+            <el-option
+              v-for="item in customerSourceOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="客户简称">
+          <el-input
+            v-model="customerForm.customerShortName"
+            size="small"
+            style="font-size:12px; height:30px;width: 120px">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="网址">
+          <el-input
+            v-model="customerForm.webSite"
+            size="small"
+            style="font-size:12px; height:30px;width: 150px">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="联系电话1">
+          <el-input
+            v-model="customerForm.phoneNo1"
+            size="small"
+            style="font-size:12px; height:30px;width: 120px">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="联系电话2">
+          <el-input
+            v-model="customerForm.phoneNo2"
+            size="small"
+            style="font-size:12px; height:30px;width: 120px">
+          </el-input>
+        </el-form-item>
+      </el-form>
+
+      <!-- 第六行：地址（单行占满宽度） -->
+      <el-form label-position="top" :model="customerForm" :rules="customerRules" style="margin-left: 7px; margin-top: 8px;">
+        <el-form-item label="地址" :rules="customerRules.address">
+          <el-input
+            v-model="customerForm.address"
+            size="small"
+            style="font-size:12px; height:30px;">
+          </el-input>
+        </el-form-item>
+      </el-form>
+
+      <!-- 第七行：来源描述、自驾路线 -->
+      <el-form :inline="true" label-position="top" :model="customerForm" style="margin-left: 7px; margin-top: 8px;">
+        <el-form-item label="来源描述">
+          <el-input
+            type="textarea"
+            v-model="customerForm.customerSourceDesc"
+            size="small"
+            style="font-size:12px;width: 335px">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="自驾路线">
+          <el-input
+            type="textarea"
+            v-model="customerForm.selfDrivingRoute"
+            size="small"
+            style="font-size:12px;width: 335px">
+          </el-input>
+        </el-form-item>
+      </el-form>
+
+      <!-- 第八行：企业介绍、备注 -->
+      <el-form :inline="true" label-position="top" :model="customerForm" style="margin-left: 7px; margin-top: 30px;">
+        <el-form-item label="企业介绍">
+          <el-input
+            type="textarea"
+            v-model="customerForm.roughlyInfo"
+            size="small"
+            style="font-size:12px;width: 335px">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input
+            type="textarea"
+            v-model="customerForm.remark"
+            size="small"
+            style="font-size:12px;width: 335px">
+          </el-input>
+        </el-form-item>
+      </el-form>
+
+      <!-- 底部按钮 -->
+      <el-footer style="height:40px;margin-top: 35px;text-align:center">
+        <el-button type="primary" @click="saveCustomer">保存</el-button>
+        <el-button @click="showCustomerModal = false">取消</el-button>
+      </el-footer>
+    </el-dialog>
+    <!-- 其他模态框：开票信息、联系人信息、项目详情、文件上传等，可按类似方式封装 -->
+
+  <el-dialog
+    :visible.sync="showBillingDialog"
+    title="开票信息"
+    width="1020px"
+    @close="closeBillingMainDialog"
+    :close-on-click-modal="false">
+    <!-- 顶部客户信息及新增按钮 -->
+    <div style="margin-bottom: 10px;margin-left: -15px">
+      <!-- 隐藏的客户ID -->
+      <el-input v-model="selectedCustomer.id" style="display: none;"></el-input>
+      <div style="display: flex; align-items: center; margin-bottom: 10px;">
+        <span style="margin-left: 1.5%; font-weight:800; font-size:12px;">客户名称:</span>
+        <el-input
+          v-model="selectedCustomer.customerName"
+          disabled
+          style="width: 20%; font-size:12px; margin-left:10px;">
+        </el-input>
+        <el-button
+          type="primary"
+          size="small"
+          style="padding: 2px 8px;margin-left: 5px"
+          @click="addBilling">
+          新增
+        </el-button>
+      </div>
+    </div>
+    <!-- 开票信息表格 -->
+    <el-table
+      :data="billingData"
+      :height="height - 200"
+      border
+      style="font-size:10px; text-transform:uppercase; width:100%;">
+      <el-table-column prop="billingCompanyName" header-align="center" align-="left" label="公司名称"></el-table-column>
+      <el-table-column prop="bankName" header-align="center" align-="left" label="银行名称"></el-table-column>
+      <el-table-column prop="billingCompanyAddr" header-align="center" align-="left" label="公司地址"></el-table-column>
+      <el-table-column prop="bankNo" header-align="center" align-="center" label="银行账号"></el-table-column>
+      <el-table-column prop="taxNo" header-align="center" align-="left" label="税号"></el-table-column>
+      <el-table-column prop="phoneNo" header-align="center" align-="center" label="联系电话"></el-table-column>
+      <el-table-column prop="handMan" header-align="center" align-="left" label="经手人" width="80"></el-table-column>
+      <el-table-column label="操作" header-align="center" align="center" fixed="right" width="80">
+        <template slot-scope="scope">
+          <a type="text" size="mini" @click="editBilling(scope.row)">编辑</a>
+          <a type="text" size="mini" @click="deleteBilling(scope.row)">删除</a>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 底部关闭按钮 -->
+    <el-footer style="height:30px;margin-top: 5px;text-align:center">
+      <el-button @click="showBillingDialog = false">关闭</el-button>
+    </el-footer>
+  </el-dialog>
+
+    <el-dialog
+      :title="billingForm.title"
+      :visible.sync="billingModalVisible"
+      width="620px"
+      @close="closeBillingModal"
+      :close-on-click-modal="false">
+      <el-form :inline="true" label-position="top" :model="billingForm" :rules="billingRules" style="margin-left: 7px;
+      margin-top:-5px;">
+        <el-form-item label="公司名称" style="display: inline-block; width:36%;" :rules="billingRules.billingCompanyName">
+          <el-input
+            v-model="billingForm.billingCompanyName"
+            size="small"
+            style="font-size:12px; height:30px;">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="经手人" style="display: inline-block; width:20%">
+          <el-input
+            v-model="billingForm.handMan"
+            size="small"
+            style="font-size:12px; height:30px;">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="经手人电话" style="display: inline-block; width:36%;">
+          <el-input
+            v-model="billingForm.phoneNo"
+            size="small"
+            style="font-size:12px; height:30px;">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="银行名称" style="display: inline-block; width:36%;" :rules="billingRules.bankName">
+          <el-input
+            v-model="billingForm.bankName"
+            size="small"
+            style="font-size:12px; height:30px;">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="银行账号" style="display: inline-block; width:20%;" :rules="billingRules.bankNo">
+          <el-input
+            v-model="billingForm.bankNo"
+            size="small"
+            style="font-size:12px; height:30px;">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="税号" style="display: inline-block; width:36%;" :rules="billingRules.taxNo">
+          <el-input
+            v-model="billingForm.taxNo"
+            size="small"
+            style="font-size:12px; height:30px;">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="收件人" style="display: inline-block; width:36%;">
+          <el-input
+            v-model="billingForm.receiver"
+            size="small"
+            style="font-size:12px; height:30px;">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="收件人电话" style="display: inline-block; width:20%;">
+          <el-input
+            v-model="billingForm.receiverPhone"
+            size="small"
+            style="font-size:12px; height:30px;">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="公司地址" style="display: inline-block; width:36%;" :rules="billingRules.billingCompanyAddr">
+          <el-input
+            v-model="billingForm.billingCompanyAddr"
+            size="small"
+            style="font-size:12px; height:30px;">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="收件人地址" style="display: inline-block; width:47%;">
+          <el-input
+            type="textarea"
+            v-model="billingForm.receiverAddr"
+            size="small"
+            style="font-size:12px; height:30px">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="备注" style="display: inline-block; width:47%;">
+          <el-input
+            type="textarea"
+            v-model="billingForm.remark"
+            size="small"
+            style="font-size:12px;">
+          </el-input>
+        </el-form-item>
+      </el-form>
+    <div style="margin-top: 40px;height: 35px; text-align: center;">
+        <el-button v-if="!this.editBillingFlag" type="primary" @click="billingCopy"
+                   style="position: absolute; left: 0; margin-left: 5px;">自动获取信息
+        </el-button>
+        <el-button type="primary" @click="billingSave">保存</el-button>
+        <el-button @click="billingModalVisible = false">取消</el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog
+      :visible.sync="showPersonDialog"
+      title="联系人信息"
+      width="1220px"
+      @close="closePersonDialog"
+      :close-on-click-modal="false">
+      <!-- 顶部客户信息及新增按钮 -->
+      <div style="margin-bottom: 10px; margin-left: -15px;">
+        <span style="margin-left: 1.5%; font-weight:800; font-size:12px;">客户名称:</span>
+        <el-input
+          v-model="selectedCustomer.customerName"
+          disabled
+          style="width: 20%; font-size:12px; margin-left:10px;">
+        </el-input>
+        <el-button
+          type="primary"
+          size="small"
+          style="padding: 2px 8px;margin-left: 5px"
+          @click="openPersonModal">
+          新增
+        </el-button>
+      </div>
+      <!-- 联系人信息表格 -->
+      <el-table
+        :data="personData"
+        border
+        :height="height - 150"
+        style="font-size:10px; text-transform:uppercase; width:100%;">
+        <el-table-column prop="personName" header-align="center" align="left" label="姓名"></el-table-column>
+        <el-table-column prop="jobTitle" header-align="center" align="left" label="职位" width="90"></el-table-column>
+        <el-table-column prop="phoneNo1" header-align="center" align="center" label="联系电话1"
+                         width="110"></el-table-column>
+        <el-table-column prop="phoneNo2" header-align="center" align="center" label="联系电话2"
+                         width="110"></el-table-column>
+        <el-table-column prop="phoneNo3" header-align="center" align="center" label="联系电话3"
+                         width="110"></el-table-column>
+        <el-table-column prop="emailAddress" header-align="center" align="left" label="邮箱"
+                         width="150"></el-table-column>
+        <el-table-column prop="remark" header-align="center" align="left" label="备注" width="140"></el-table-column>
+        <el-table-column prop="defaultExpress" header-align="center" align="center" label="快递默认" width="80">
+          <template slot-scope="scope">
+            <span>{{ scope.row.defaultExpress === 'Y' ? '是' : '否' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="active" header-align="center" align="center" label="在用" width="60">
+          <template slot-scope="scope">
+            <span>{{ scope.row.active === 'Y' ? '是' : '否' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="enteredDate" header-align="center" align="center" label="录入时间" width="100">
+          <template slot-scope="scope">
+            <span>{{ formatDate(scope.row.enteredDate) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="inactiveDate" header-align="center" align="center" label="停用时间" width="100">
+          <template slot-scope="scope">
+            <span>{{ formatDate(scope.row.inactiveDate) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" header-align="center" align="center" fixed="right" width="80">
+          <template slot-scope="scope">
+            <a type="text" size="mini" @click="editPerson(scope.row)">编辑</a>
+            <a type="text" size="mini" v-if="scope.row.active === 'Y'" @click="inactivePerson(scope.row)">停用</a>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 底部关闭按钮 -->
+      <!-- 底部关闭按钮 -->
+      <el-footer style="height:30px;margin-top: 5px;text-align:center">
+        <el-button @click="showPersonDialog = false">关闭</el-button>
+      </el-footer>
+    </el-dialog>
+
+    <!-- 联系人信息新增/编辑 Dialog -->
+    <el-dialog
+      :visible.sync="personModalVisible"
+      :title="personForm.title || '联系人信息'"
+      width="580px"
+      @close="closePersonModal"
+      :close-on-click-modal="false">
+      <el-form label-position="top"
+               :model="personForm"
+               :rules="personRules"
+               style="margin-left: 7px;margin-top:-5px;">
+        <!-- 隐藏域：ID -->
+        <el-input v-model="personForm.id" style="display:none;"></el-input>
+
+        <el-row :gutter="24">
+          <el-col :span="10">
+            <el-form-item label="姓名" prop="personName">
+              <el-input
+                v-model="personForm.personName"
+                size="small"
+                style="font-size:12px; height:30px;">
+              </el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="10">
+            <el-form-item label="职位" prop="jobTitle">
+              <el-input
+                v-model="personForm.jobTitle"
+                size="small"
+                style="font-size:12px; height:30px;">
+              </el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="24">
+          <el-col :span="10">
+            <el-form-item label="联系电话1" prop="phoneNo1">
+              <el-input
+                v-model="personForm.phoneNo1"
+                size="small"
+                style="font-size:12px; height:30px;">
+              </el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="10">
+            <el-form-item label="联系电话2" prop="phoneNo2">
+              <el-input
+                v-model="personForm.phoneNo2"
+                size="small"
+                style="font-size:12px; height:30px;">
+              </el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="24">
+          <el-col :span="10">
+            <el-form-item label="联系电话3" prop="phoneNo3">
+              <el-input
+                v-model="personForm.phoneNo3"
+                size="small"
+                style="font-size:12px; height:30px;">
+              </el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="10">
+            <el-form-item label="邮箱" prop="emailAddress">
+              <el-input
+                v-model="personForm.emailAddress"
+                size="small"
+                style="font-size:12px; height:30px;">
+              </el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="4">
+            <el-form-item label="快递默认" prop="defaultExpress">
+              <el-select
+                v-model="personForm.defaultExpress"
+                size="small"
+                style="font-size:12px; width:100%;">
+                <el-option label="是" value="Y"></el-option>
+                <el-option label="否" value="N"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="24">
+          <el-col :span="20">
+            <el-form-item label="备注" prop="remark">
+              <el-input
+                v-model="personForm.remark"
+                type="textarea"
+                :row="2"
+                size="small"
+                style="font-size:12px; height:30px;">
+              </el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+
+      <div style="margin-top:35px; height:35px; text-align:center;">
+        <el-button type="primary" @click="savePerson">保存</el-button>
+        <el-button @click="personModalVisible = false">取消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import {
+  billingSave,
+  customerData,
+  customerDelete,
+  customerSave,
+  fetchBillingData, fetchPersonData, personInactive, personSave,
+  removeBillingData
+} from "../../../api/customer/customer";
+export default {
+  name: "CustomerMaintenance",
+  data() {
+    return {
+      // 查询条件
+      searchData:{
+        searchName: '',
+        page: 1,
+        limit: 50
+      },
+      pageIndex: 1,
+      pageSize: 50,
+      totalPage: 0,
+      height: 200,
+      // 客户列表
+      customerList: [],
+      // 客户表单（新增/编辑）
+      customerForm: {
+        id: null,
+        customerName: '',
+        customerClassification: 'IFS',
+        customerType: '正式客户',
+        customerIndustry: '',
+        serviceChargeFlag: 'N',
+        district: '',
+        customerShortName: '',
+        contact: '',
+        phoneNo1: '',
+        phoneNo2: '',
+        qqAccount: '',
+        weChatAccount: '',
+        emailAddr: '',
+        webSite: '',
+        customerSource: '',
+        customerSourceDesc: '',
+        remark: '',
+        selfDrivingRoute: '',
+        roughlyInfo: ''
+      },
+      showCustomerModal: false,
+      customerModalTitle: '新增客户信息',
+      // 下拉选项（可通过接口获取）
+      classificationOptions: [
+        { label: 'IFS', value: 'IFS' },
+        { label: 'ERP', value: 'ERP' },
+        { label: '编码生成器', value: '编码生成器' },
+        { label: '定制开发', value: '定制开发' },
+        { label: '其他', value: '其他' }
+      ],
+      customerTypeOptions: [
+        { label: '正式客户', value: '正式客户' },
+        { label: '潜在客户', value: '潜在客户' }
+      ],
+      customerSourceOptions: [
+        { label: '市场', value: '市场' },
+        { label: '他人介绍', value: '他人介绍' },
+        { label: '第三方外包', value: '第三方外包' },
+        { label: '其他', value: '其他' }
+      ],
+      // 此处还可添加 billingForm、personForm 等数据和对应的模态框显示控制变量
+      columnList: [
+        {
+          userId: this.$store.state.user.name,
+          functionId: 1000101,
+          serialNumber: '1000101Table1CustomerName',
+          tableId: "1000101Table1",
+          tableName: "客户信息表",
+          columnProp: 'customerName',
+          headerAlign: "center",
+          align: "left",
+          columnLabel: '客户名称',
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: true,
+          showOverflowTooltip: true,
+          sortLv: 0,
+          status: true,
+          fixed: '',
+          columnWidth: 200
+        },
+        {
+          userId: this.$store.state.user.name,
+          functionId: 1000101,
+          serialNumber: '1000101Table1CustomerClassification',
+          tableId: "1000101Table1",
+          tableName: "客户信息表",
+          columnProp: 'customerClassification',
+          headerAlign: "center",
+          align: "left",
+          columnLabel: '项目类别',
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: true,
+          showOverflowTooltip: true,
+          sortLv: 0,
+          status: true,
+          fixed: '',
+          columnWidth: 100
+        },
+        {
+          userId: this.$store.state.user.name,
+          functionId: 1000101,
+          serialNumber: '1000101Table1CustomerType',
+          tableId: "1000101Table1",
+          tableName: "客户信息表",
+          columnProp: 'customerType',
+          headerAlign: "center",
+          align: "center",
+          columnLabel: '客户类别',
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: true,
+          showOverflowTooltip: true,
+          sortLv: 0,
+          status: true,
+          fixed: '',
+          columnWidth: 100
+        },
+        {
+          userId: this.$store.state.user.name,
+          functionId: 1000101,
+          serialNumber: '1000101Table1CustomerIndustry',
+          tableId: "1000101Table1",
+          tableName: "客户信息表",
+          columnProp: 'customerIndustry',
+          headerAlign: "center",
+          align: "left",
+          columnLabel: '所属行业',
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: true,
+          showOverflowTooltip: true,
+          sortLv: 0,
+          status: true,
+          fixed: '',
+          columnWidth: 100
+        },
+        {
+          userId: this.$store.state.user.name,
+          functionId: 1000101,
+          serialNumber: '1000101Table1District',
+          tableId: "1000101Table1",
+          tableName: "客户信息表",
+          columnProp: 'district',
+          headerAlign: "center",
+          align: "left",
+          columnLabel: '区域',
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: true,
+          showOverflowTooltip: true,
+          sortLv: 0,
+          status: true,
+          fixed: '',
+          columnWidth: 80
+        },
+        {
+          userId: this.$store.state.user.name,
+          functionId: 1000101,
+          serialNumber: '1000101Table1CustomerShortName',
+          tableId: "1000101Table1",
+          tableName: "客户信息表",
+          columnProp: 'customerShortName',
+          headerAlign: "center",
+          align: "left",
+          columnLabel: '客户简称',
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: true,
+          showOverflowTooltip: true,
+          sortLv: 0,
+          status: true,
+          fixed: '',
+          columnWidth: 100
+        },
+        {
+          userId: this.$store.state.user.name,
+          functionId: 1000101,
+          serialNumber: '1000101Table1ServiceChargeFlag',
+          tableId: "1000101Table1",
+          tableName: "客户信息表",
+          columnProp: 'serviceChargeFlag',
+          headerAlign: "center",
+          align: "center",
+          columnLabel: '是否收取年费',
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: true,
+          showOverflowTooltip: true,
+          sortLv: 0,
+          status: true,
+          fixed: '',
+          columnWidth: 110
+        },
+        {
+          userId: this.$store.state.user.name,
+          functionId: 1000101,
+          serialNumber: '1000101Table1Contact',
+          tableId: "1000101Table1",
+          tableName: "客户信息表",
+          columnProp: 'contact',
+          headerAlign: "center",
+          align: "left",
+          columnLabel: '联系人',
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: true,
+          showOverflowTooltip: true,
+          sortLv: 0,
+          status: true,
+          fixed: '',
+          columnWidth: 80
+        },
+        {
+          userId: this.$store.state.user.name,
+          functionId: 1000101,
+          serialNumber: '1000101Table1PhoneNo1',
+          tableId: "1000101Table1",
+          tableName: "客户信息表",
+          columnProp: 'phoneNo1',
+          headerAlign: "center",
+          align: "center",
+          columnLabel: '联系电话',
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: true,
+          showOverflowTooltip: true,
+          sortLv: 0,
+          status: true,
+          fixed: '',
+          columnWidth: 100
+        },
+        {
+          userId: this.$store.state.user.name,
+          functionId: 1000101,
+          serialNumber: '1000101Table1QQAccount',
+          tableId: "1000101Table1",
+          tableName: "客户信息表",
+          columnProp: 'qqAccount',
+          headerAlign: "center",
+          align: "left",
+          columnLabel: 'QQ',
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: true,
+          showOverflowTooltip: true,
+          sortLv: 0,
+          status: true,
+          fixed: '',
+          columnWidth: 100
+        },
+        {
+          userId: this.$store.state.user.name,
+          functionId: 1000101,
+          serialNumber: '1000101Table1WeChatAccount',
+          tableId: "1000101Table1",
+          tableName: "客户信息表",
+          columnProp: 'weChatAccount',
+          headerAlign: "center",
+          align: "left",
+          columnLabel: '微信',
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: true,
+          showOverflowTooltip: true,
+          sortLv: 0,
+          status: true,
+          fixed: '',
+          columnWidth: 100
+        }
+      ],
+
+
+      showBillingDialog: false,
+      selectedCustomer: {
+        id: null,
+        customerName: ''
+      },
+      billingData: [], // 这里保存查询到的开票信息数据
+      billingModalVisible: false,
+      billingForm: {
+        id: 0,
+        title: '新增开票信息',
+        customerId: '',
+        customerName: '',
+        billingCompanyName: '',
+        handMan: '',
+        bankName: '',
+        phoneNo: '',
+        bankNo: '',
+        receiver: '',
+        taxNo: '',
+        receiverPhone: '',
+        billingCompanyAddr: '',
+        receiverAddr: '',
+        remark: '',
+        // 隐藏部分字段
+        status: 'Y',
+        enteredBy: '',
+        enterDate: '',
+        latestUpdatedBy: '',
+        latestUpdateDate: '',
+        recordVersion: ''
+      },
+      editBillingFlag: false,
+
+      // 联系人（联系人信息）相关
+      showPersonDialog: false,       // 用于显示联系人列表的对话框
+      personModalVisible: false,     // 用于联系人新增/编辑的弹窗
+      personData: [],                // 联系人列表数据
+      personForm: {                  // 联系人表单
+        id: 0,
+        title: '新增联系人信息',
+        personName: '',
+        jobTitle: '',
+        phoneNo1: '',
+        phoneNo2: '',
+        phoneNo3: '',
+        emailAddress: '',
+        remark: '',
+        defaultExpress: 'N'
+      },
+      personRules: {               // 联系人表单校验规则
+        personName: [
+          {
+            required: true,
+            message: ' ',
+            trigger: ['blur', 'change']
+          }
+        ],
+        jobTitle: [
+          {
+            required: true,
+            message: ' ',
+            trigger: ['blur', 'change']
+          }
+        ],
+        phoneNo1: [
+          {
+            required: true,
+            message: ' ',
+            trigger: ['blur', 'change']
+          }
+        ],
+        defaultExpress: [
+          {
+            required: true,
+            message: ' ',
+            trigger: ['blur', 'change']
+          }
+        ]
+      },
+
+      // 必填规则
+      customerRules: {
+        customerName: [
+          {
+            required: true,
+            message: ' ',
+            trigger: ['blur', 'change']
+          }
+        ],
+        customerIndustry: [
+          {
+            required: true,
+            message: ' ',
+            trigger: ['blur', 'change']
+          }
+        ],
+        district: [
+          {
+            required: true,
+            message: ' ',
+            trigger: ['blur', 'change']
+          }
+        ],
+        address: [
+          {
+            required: true,
+            message: ' ',
+            trigger: ['blur', 'change']
+          }
+        ],
+      },
+      billingRules: {
+        billingCompanyName: [
+          {
+            required: true,
+            message: ' ',
+            trigger: ['blur', 'change']
+          }
+        ],
+        bankNo: [
+          {
+            required: true,
+            message: ' ',
+            trigger: ['blur', 'change']
+          }
+        ],
+        bankName: [
+          {
+            required: true,
+            message: ' ',
+            trigger: ['blur', 'change']
+          }
+        ],
+        taxNo: [
+          {
+            required: true,
+            message: ' ',
+            trigger: ['blur', 'change']
+          }
+        ],
+        billingCompanyAddr: [
+          {
+            required: true,
+            message: ' ',
+            trigger: ['blur', 'change']
+          }
+        ],
+      }
+    }
+
+  },
+  mounted () {
+    this.$nextTick(() => {
+      this.height = window.innerHeight - 180
+    })
+  },
+  created() {
+    this.initData()
+  },
+  methods: {
+    initData() {
+      // 初始化数据：加载客户列表、下拉选项、日期选择器等
+      this.fetchCustomers()
+      this.initDatePickers()
+      this.initValueLists()
+    },
+    fetchCustomers() {
+      this.searchData.page = this.pageIndex
+      this.searchData.limit = this.pageSize
+      customerData(this.searchData).then(({data}) => {
+          if (data.code === 0)  {
+            this.customerList = data.page.list
+          } else {
+            this.customerList = []
+          }
+        })
+        .catch(err => {
+          console.error(err)
+        })
+    },
+    searchCustomer() {
+      this.fetchCustomers()
+    },
+    openAddCustomerModal() {
+      this.customerModalTitle = '新增客户信息'
+      this.showCustomerModal = true
+    },
+    editCustomer(row) {
+      this.customerModalTitle = '编辑客户信息'
+      // 深拷贝 row 的数据到 customerForm
+      this.customerForm = Object.assign({}, row)
+      this.showCustomerModal = true
+    },
+    saveCustomer() {
+      if (this.customerForm.customerName === '' || this.customerForm.customerName === null) {
+        this.$message.error('客户名称不能为空')
+        return
+      }
+      if (this.customerForm.customerIndustry === '' || this.customerForm.customerIndustry === null) {
+        this.$message.error('所属行业不能为空')
+        return
+      }
+      if (this.customerForm.district === '' || this.customerForm.district === null) {
+        this.$message.error('区域不能为空')
+        return
+      }
+      if (this.customerForm.address === '' || this.customerForm.address === null) {
+        this.$message.error('地址不能为空')
+        return
+      }
+      let inData = Object.assign({}, this.customerForm)
+        customerSave(inData).then(({data}) => {
+          if (data.code === 0) {
+            this.$message.success(data.msg)
+            this.showCustomerModal = false
+            this.customerForm = {}
+            this.fetchCustomers()
+          } else {
+            this.$message.error(data.msg)
+          }
+        })
+          .catch(err => {
+            console.error(err)
+          })
+    },
+    deleteCustomer(row) {
+      let inData = Object.assign({}, row)
+      this.$confirm('确定要删除该客户吗？', '提示', {
+        type: 'warning'
+      }).then(() => {
+          customerDelete(inData).then(({data}) => {
+              if (data.code === 0) {
+                this.$message.success(data.msg)
+                this.fetchCustomers()
+              } else {
+                this.$message.error(data.msg)
+              }
+            })
+            .catch(err => {
+              console.error(err)
+            })
+        })
+        .catch(() => {})
+    },
+    closeCustomerModal() {
+      this.showCustomerModal = false
+      this.customerForm = {
+        id: null,
+        customerName: '',
+        customerClassification: 'IFS',
+        customerType: '正式客户',
+        customerIndustry: '',
+        serviceChargeFlag: 'N',
+        district: '',
+        customerShortName: '',
+        contact: '',
+        phoneNo1: '',
+        phoneNo2: '',
+        qqAccount: '',
+        weChatAccount: '',
+        emailAddr: '',
+        webSite: '',
+        customerSource: '',
+        customerSourceDesc: '',
+        remark: '',
+        selfDrivingRoute: '',
+        roughlyInfo: ''
+      }
+    },
+    initDatePickers() {
+      // 建议使用 Element UI 的日期组件 <el-date-picker> 替代 jQuery datetimepicker
+    },
+    initValueLists() {
+      // 分别通过 axios 请求接口获取下拉选项数据，如 ValueListItem、valueListClient、ValueListSource 等
+      // 例如：
+      // axios.post('/cust/valueListItem', { type: 'TL' }).then(res => { ... })
+    },
+    // 点击开票信息时调用此方法：传入当前客户对象，查询对应开票信息，并打开模态框
+    openBilling(customer) {
+      // 复制客户信息
+      this.selectedCustomer = { ...customer }
+      // 调用查询方法，获取该客户的开票信息数据
+      this.fetchBillingData(customer)
+      // 打开模态框
+      this.showBillingDialog = true
+    },
+    // 查询开票信息
+    fetchBillingData(row) {
+      fetchBillingData(row).then(({data}) => {
+        if (data.code === 0) {
+          this.billingData = data.list
+        } else {
+          this.billingData = []
+        }
+      })
+        .catch(err => {
+          console.error(err)
+        })
+    },
+    // 新增开票信息
+    addBilling() {
+      this.editBillingFlag = false
+      // 打开开票信息新增模态框
+      this.billingForm.title = '新增开票信息'
+      this.billingForm.id = 0
+      this.billingForm.customerId = this.selectedCustomer.id
+      this.billingModalVisible = true;
+    },
+    // 编辑开票信息
+    editBilling(row) {
+      this.billingForm = { ...row,customerId:this.selectedCustomer.id, title: '编辑开票信息' }
+      // 执行编辑操作，打开编辑模态框等
+      this.editBillingFlag = true
+      this.billingModalVisible = true;
+    },
+    // 删除开票信息
+    deleteBilling(row) {
+      this.$confirm('确定要删除该开票信息吗？', '提示', { type: 'warning' })
+        .then(() => {
+          removeBillingData(row).then(({data}) => {
+              if (data.code === 0) {
+                this.$message.success(data.msg)
+                this.fetchBillingData(this.selectedCustomer)
+              } else {
+                this.$message.error(data.msg)
+              }
+            })
+            .catch(err => {
+              console.error(err)
+            })
+        })
+        .catch(() => {})
+    },
+    billingCopy() {
+      // 根据已有的客户信息自动复制部分字段
+      this.billingForm.billingCompanyName = this.selectedCustomer.customerName || ''
+      this.billingForm.handMan = this.selectedCustomer.contact || ''
+      this.billingForm.phoneNo = this.selectedCustomer.phoneNo1 || ''
+      this.billingForm.receiver = this.selectedCustomer.contact || ''
+      this.billingForm.receiverPhone = this.selectedCustomer.phoneNo1 || ''
+      this.billingForm.billingCompanyAddr = this.selectedCustomer.address || ''
+      this.billingForm.receiverAddr = this.selectedCustomer.address || ''
+    },
+
+    // 保存开票信息
+    billingSave() {
+      if (this.billingForm.billingCompanyName === '' || this.billingForm.billingCompanyName === null) {
+        this.$message.error('公司名称不能为空')
+        return
+      }
+      if (this.billingForm.bankNo === '' || this.billingForm.bankNo === null) {
+        this.$message.error('银行账号不能为空')
+        return
+      }
+      if (this.billingForm.bankName === '' || this.billingForm.bankName === null) {
+        this.$message.error('银行名称不能为空')
+        return
+      }
+      if (this.billingForm.taxNo === '' || this.billingForm.taxNo === null) {
+        this.$message.error('税号不能为空')
+        return
+      }
+      if (this.billingForm.billingCompanyAddr === '' || this.billingForm.billingCompanyAddr === null) {
+        this.$message.error('公司地址不能为空')
+        return
+      }
+      // 表单校验可使用 this.$refs.billingForm.validate(...)
+      let inData = {...this.billingForm}
+        // 编辑开票信息
+        billingSave(inData).then(({data}) => {
+          if (data.code === 0) {
+            this.$message.success(data.msg)
+            this.billingModalVisible = false
+            this.fetchBillingData(this.selectedCustomer)
+          } else {
+            this.$message.error(data.msg)
+          }
+        })
+          .catch(err => {
+            console.error(err)
+          })
+    },
+
+    // 关闭新增编辑开票信息模态框
+    closeBillingModal() {
+      this.billingModalVisible = false
+      this.billingForm = {
+        id: 0,
+        title: '新增开票信息',
+        customerId: '',
+        customerName: '',
+        billingCompanyName: '',
+        handMan: '',
+        bankName: '',
+        phoneNo: '',
+        bankNo: '',
+        receiver: '',
+        taxNo: '',
+        receiverPhone: '',
+        billingCompanyAddr: '',
+        receiverAddr: '',
+        remark: '',
+        status: 'Y',
+        enteredBy: '',
+        enterDate: '',
+        latestUpdatedBy: '',
+        latestUpdateDate: '',
+        recordVersion: ''
+      }
+    },
+
+    // 关闭开票信息模态框
+    closeBillingMainDialog() {
+      this.selectedCustomer = {
+        id: null,
+        customerName: ''
+      }
+      this.showBillingDialog = false
+      this.billingData = []
+    },
+    // 联系人（联系人信息）相关方法
+    openPerson(row) {
+      // 打开联系人列表对话框，并加载当前客户下的联系人数据
+      this.selectedCustomer = { ...row };
+      this.fetchPersonData(row);
+      this.showPersonDialog = true;
+    },
+    openPersonModal() {
+      // 打开联系人新增对话框
+      this.personForm = {
+        id: 0,
+        title: '新增联系人信息',
+        personName: '',
+        jobTitle: '',
+        phoneNo1: '',
+        phoneNo2: '',
+        phoneNo3: '',
+        emailAddress: '',
+        remark: '',
+        defaultExpress: 'N'
+      };
+      this.personModalVisible = true;
+    },
+    closePersonModal() {
+      this.personModalVisible = false;
+      this.personForm = {
+        id: 0,
+        title: '新增联系人信息',
+        personName: '',
+        jobTitle: '',
+        phoneNo1: '',
+        phoneNo2: '',
+        phoneNo3: '',
+        emailAddress: '',
+        remark: '',
+        defaultExpress: 'N'
+      };
+    },
+    fetchPersonData(row) {
+      fetchPersonData(row)
+        .then(({ data }) => {
+          if (data.code === 0) {
+            this.personData = data.list;
+          } else {
+            this.personData = [];
+          }
+        })
+        .catch(err => {
+          console.error(err);
+        });
+    },
+    savePerson() {
+      if (!this.personForm.personName || this.personForm.personName === '') {
+        this.$message.error('姓名不能为空');
+        return;
+      }
+      if (!this.personForm.jobTitle || this.personForm.jobTitle === '') {
+        this.$message.error('职位不能为空');
+        return;
+      }
+      if (!this.personForm.phoneNo1 || this.personForm.phoneNo1 === '') {
+        this.$message.error('联系电话不能为空');
+        return;
+      }
+      if (!this.personForm.defaultExpress || this.personForm.defaultExpress === '') {
+        this.$message.error('请选择是否默认快递');
+        return;
+      }
+      // 可以根据业务需要增加更多校验
+      let inData = { ...this.personForm, customerId: this.selectedCustomer.id };
+      personSave(inData)
+        .then(({ data }) => {
+          if (data.code === 0) {
+            this.$message.success(data.msg);
+            this.personModalVisible = false;
+            this.fetchPersonData(this.selectedCustomer);
+          } else {
+            this.$message.error(data.msg);
+          }
+        })
+        .catch(err => {
+          console.error(err);
+        });
+    },
+    editPerson(person) {
+      this.personForm = { ...person, title: '编辑联系人信息' };
+      this.personModalVisible = true;
+    },
+    inactivePerson(person) {
+      this.$confirm('确定停用该联系人吗？', '提示', { type: 'warning' })
+        .then(() => {
+          personInactive(person)
+            .then(({ data }) => {
+              if (data.code === 0) {
+                this.$message.success(data.msg);
+                this.fetchPersonData(this.selectedCustomer);
+              } else {
+                this.$message.error(data.msg);
+              }
+            })
+            .catch(err => {
+              console.error(err);
+            });
+        })
+        .catch(() => {});
+    },
+
+    closePersonDialog() {
+      this.showPersonDialog = false;
+      this.personData = [];
+    },
+
+    // 辅助方法：格式化日期，若数据为空返回 '-'
+    formatDate(value) {
+      if (!value) return '-';
+      let date = new Date(value);
+      let year = date.getFullYear();
+      let month = (date.getMonth() + 1).toString().padStart(2, '0');
+      let day = date.getDate().toString().padStart(2, '0');
+      return `${year}-${month}-${day}`;
+    },
+
+    // 每页数
+    sizeChangeHandle (val) {
+      this.pageSize = val
+      this.pageIndex = 1
+      this.fetchCustomers()
+    },
+
+    // 当前页
+    currentChangeHandle (val) {
+      this.pageIndex = val
+      this.fetchCustomers()
+    },
+  }
+}
+</script>
+
+<style scoped>
+.customer-maintenance {
+  padding: 0px;
+}
+.dialog-footer {
+  text-align: center;
+  margin-top: 25px;
+}
+</style>
+
+<style lang="scss" scoped>
+.el-table /deep/ .cell{
+  height: auto;
+  line-height: 1.5;
+}
+</style>