refactor(客户档案): 更新地区字段名称并添加地区ID管理

yyb

5 天以前 0e3ecc528fbff3bc3b51a5a053d81b8774e0703d

 src/views/basicData/customerFile/index.vue

@@ -1,52 +1,158 @@
<template>
  <div class="app-container">
    <div class="search_form">
      <div>
        <span class="search_title">客户名称：</span>
        <el-input v-model="searchForm.customerName"
                  style="width: 240px;margin-right: 10px"
                  placeholder="请输入"
                  @change="handleQuery"
                  clearable
                  :prefix-icon="Search" />
        <span class="search_title">客户分类：</span>
        <el-select v-model="searchForm.customerType"
                   placeholder="请选择"
                   style="width: 240px"
                   clearable
                   @change="handleQuery">
          <el-option label="零售客户"
                     value="零售客户" />
          <el-option label="进销商客户"
                     value="进销商客户" />
        </el-select>
        <el-button type="primary"
                   @click="handleQuery"
                   style="margin-left: 10px">搜索</el-button>
    <div class="customer-split">
      <div class="left-panel">
        <div class="left-header">
          <div class="left-title">地区</div>
          <div class="left-actions">
            <el-button type="primary"
                       size="small"
                       @click="openAddRegionDialog">新增</el-button>
            <el-button size="small"
                       @click="openEditRegionDialog">修改</el-button>
            <el-button type="danger"
                       plain
                       size="small"
                       @click="handleDeleteRegion">删除</el-button>
          </div>
        </div>

        <div class="left-search">
          <el-input v-model="regionKeyword"
                    placeholder="查询地区"
                    clearable
                    :prefix-icon="Search" />
        </div>

        <div class="left-list">
          <el-skeleton v-if="regionsLoading"
                       :rows="8"
                       animated />
          <template v-else>
            <div class="region-item"
                 :class="{ active: selectedRegionId === 0 }"
                 @click="selectRegion('')">全部</div>
            <el-tree ref="regionTreeRef"
                     :data="regionTreeData"
                     node-key="id"
                     :props="regionTreeProps"
                     :filter-node-method="filterRegionNode"
                     highlight-current
                     default-expand-all
                     :expand-on-click-node="false"
                     @node-click="handleRegionNodeClick" />
            <div v-if="regionTreeData.length === 0"
                 class="empty-tip">暂无地区</div>
          </template>
        </div>
      </div>
      <div>
        <el-button type="primary"
                   @click="openForm('add')">新增客户</el-button>
        <el-button @click="handleOut">导出</el-button>
        <el-button type="info"
                   plain
                   icon="Upload"
                   @click="handleImport">导入</el-button>
        <el-button type="danger"
                   plain
                   @click="handleDelete">删除</el-button>

      <div class="right-panel">
        <div class="toolbar-card">
          <div class="search_form right-search-form">
          <div class="search-fields">
            <span class="search_title">客户名称：</span>
            <el-input v-model="searchForm.customerName"
                      style="width: 240px;margin-right: 10px"
                      placeholder="请输入"
                      @change="handleQuery"
                      clearable
                      :prefix-icon="Search" />
            <span class="search_title">客户分类：</span>
            <el-select v-model="searchForm.customerType"
                       placeholder="请选择"
                       style="width: 240px"
                       clearable
                       @change="handleQuery">
              <el-option label="零售客户"
                         value="零售客户" />
              <el-option label="进销商客户"
                         value="进销商客户" />
            </el-select>
            <el-button type="primary"
                       @click="handleQuery"
                       style="margin-left: 10px">搜索</el-button>
          </div>
          <div class="toolbar-divider"></div>
          <div class="action-buttons">
            <el-button type="primary"
                       @click="openForm('add')">新增客户</el-button>
            <el-button @click="handleOut">导出</el-button>
            <el-button type="info"
                       plain
                       icon="Upload"
                       @click="handleImport">导入</el-button>
            <el-button type="danger"
                       plain
                       @click="handleDelete">删除</el-button>
          </div>
          </div>
        </div>
        <div class="table_list table-card">
          <PIMTable rowKey="id"
                    :column="tableColumn"
                    :tableData="tableData"
                    :page="page"
                    :isSelection="true"
                    @selection-change="handleSelectionChange"
                    :tableLoading="tableLoading"
                    @pagination="pagination"></PIMTable>
        </div>
      </div>
    </div>
    <div class="table_list">
      <PIMTable rowKey="id"
                :column="tableColumn"
                :tableData="tableData"
                :page="page"
                :isSelection="true"
                @selection-change="handleSelectionChange"
                :tableLoading="tableLoading"
                @pagination="pagination"></PIMTable>
    </div>

    <el-dialog v-model="addRegionDialogVisible"
               title="新增地区"
               width="420px"
               @close="closeAddRegionDialog">
      <el-form :model="addRegionForm"
               label-width="90px">
        <el-form-item label="上级地区">
          <el-cascader v-model="addRegionForm.parentPath"
                       :options="regionTreeData"
                       :props="regionCascaderProps"
                       clearable
                       filterable
                       placeholder="不选则为顶级地区" />
        </el-form-item>
        <el-form-item label="地区名称">
          <el-input v-model="addRegionForm.regionsName"
                    placeholder="请输入"
                    clearable />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary"
                     @click="submitAddRegion">确认</el-button>
          <el-button @click="closeAddRegionDialog">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="editRegionDialogVisible"
               title="修改地区"
               width="420px"
               @close="closeEditRegionDialog">
      <el-form :model="editRegionForm"
               label-width="90px">
        <el-form-item label="上级地区">
          <el-input :value="editRegionParentLabel"
                    disabled />
        </el-form-item>
        <el-form-item label="地区名称">
          <el-input v-model="editRegionForm.regionsName"
                    placeholder="请输入"
                    clearable />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary"
                     @click="submitEditRegion">确认</el-button>
          <el-button @click="closeEditRegionDialog">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="dialogFormVisible"
               :title="operationType === 'add' ? '新增客户信息' : '编辑客户信息'"
               width="70%"
@@ -76,19 +182,47 @@
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="公司地址："
            <el-form-item label="客户地区："
                          prop="regions">
              <el-cascader v-model="formRegionPath"
                           :options="regionTreeData"
                           :props="regionCascaderProps"
                           clearable
                           filterable
                           style="width: 100%"
                           placeholder="请选择"
                           @change="handleFormRegionChange" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户地址："
                          prop="companyAddress">
              <el-input v-model="form.companyAddress"
                        placeholder="请输入"
                        clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="公司电话："
            <el-form-item label="客户电话："
                          prop="companyPhone">
              <el-input v-model="form.companyPhone"
                        placeholder="请输入"
                        clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户分类："
                          prop="customerType">
              <el-select v-model="form.customerType"
                         placeholder="请选择"
                         clearable>
                <el-option label="零售客户"
                           value="零售客户" />
                <el-option label="进销商客户"
                           value="进销商客户" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
@@ -117,19 +251,6 @@
              <el-input v-model="form.bankCode"
                        placeholder="请输入"
                        clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户分类："
                          prop="customerType">
              <el-select v-model="form.customerType"
                         placeholder="请选择"
                         clearable>
                <el-option label="零售客户"
                           value="零售客户" />
                <el-option label="进销商客户"
                           value="进销商客户" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
@@ -240,132 +361,10 @@
        </div>
      </template>
    </el-dialog>
    <!-- 回访提醒对话框 -->
    <el-dialog title="回访提醒"
               v-model="reminderDialogVisible"
               width="500px"
               @close="closeReminderDialog">
      <el-form :model="reminderForm"
               label-width="100px"
               :rules="reminderRules"
               ref="reminderFormRef">
        <el-form-item label="客户名称：">
          <el-input v-model="reminderForm.customerName"
                    disabled />
        </el-form-item>
        <el-form-item label="提醒开关：">
          <el-switch v-model="reminderForm.reminderSwitch" />
        </el-form-item>
        <el-form-item label="提醒内容："
                      prop="reminderContent">
          <el-input v-model="reminderForm.reminderContent"
                    type="textarea"
                    :maxlength="100"
                    show-word-limit
                    placeholder="请输入提醒内容" />
        </el-form-item>
        <el-form-item label="提醒时间："
                      prop="reminderTime">
          <el-date-picker v-model="reminderForm.reminderTime"
                          type="datetime"
                          value-format="YYYY-MM-DD HH:mm:ss"
                          format="YYYY-MM-DD HH:mm:ss"
                          placeholder="请选择提醒时间"
                          style="width: 100%" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeReminderDialog">取消</el-button>
          <el-button type="primary"
                     @click="submitReminderForm">提交</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 添加/修改洽谈进度对话框 -->
    <el-dialog :title="negotiationForm.editIndex !== undefined ? '修改进度' : '添加进度'"
               v-model="negotiationDialogVisible"
               width="600px"
               @close="closeNegotiationDialog">
      <el-form :model="negotiationForm"
               label-width="100px"
               :rules="negotiationRules"
               ref="negotiationFormRef">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="跟进方式："
                          prop="followUpMethod">
              <el-select v-model="negotiationForm.followUpMethod"
                         placeholder="请选择"
                         style="width: 100%">
                <el-option label="电话"
                           value="电话" />
                <el-option label="邮件"
                           value="邮件" />
                <el-option label="上门"
                           value="上门" />
                <el-option label="微信"
                           value="微信" />
                <el-option label="其他"
                           value="其他" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="跟进程度："
                          prop="followUpLevel">
              <el-select v-model="negotiationForm.followUpLevel"
                         placeholder="请选择"
                         style="width: 100%">
                <el-option label="潜在客户"
                           value="潜在客户" />
                <el-option label="初次拜访"
                           value="初次拜访" />
                <el-option label="多次拜访"
                           value="多次拜访" />
                <el-option label="意向客户"
                           value="意向客户" />
                <el-option label="已签约客户"
                           value="已签约客户" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="跟进时间："
                          prop="followUpTime">
              <el-date-picker v-model="negotiationForm.followUpTime"
                              type="datetime"
                              value-format="YYYY-MM-DD HH:mm:ss"
                              format="YYYY-MM-DD HH:mm:ss"
                              placeholder="请选择"
                              style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="跟进人：">
              <el-input v-model="negotiationForm.followerUserName"
                        disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="内容："
                      prop="content">
          <el-input v-model="negotiationForm.content"
                    type="textarea"
                    :rows="4"
                    placeholder="请输入" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeNegotiationDialog">取消</el-button>
          <el-button type="primary"
                     @click="submitNegotiationForm">提交</el-button>
        </div>
      </template>
    </el-dialog>
    <!--
    回访提醒 / 洽谈进度功能（入口及弹窗）已按需求注释。
    如需恢复：放开操作列入口 + 取消本段注释 + 恢复 script 中相关变量/方法/接口引入。
    -->
    <!-- 客户详情对话框 -->
    <el-dialog title="客户详情"
               v-model="detailDialogVisible"
@@ -398,7 +397,7 @@
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <span class="info-label">公司电话：</span>
                <span class="info-label">客户电话：</span>
                <span class="info-value">{{ detailForm.companyPhone }}</span>
              </div>
            </el-col>
@@ -406,52 +405,60 @@
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="info-item">
                <span class="info-label">公司地址：</span>
                <span class="info-label">客户地区：</span>
                <span class="info-value">{{ detailForm.regionsName || detailForm.regions }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <span class="info-label">客户地址：</span>
                <span class="info-value">{{ detailForm.companyAddress }}</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="info-item">
                <span class="info-label">银行基本户：</span>
                <span class="info-value">{{ detailForm.basicBankAccount }}</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="info-item">
                <span class="info-label">银行账号：</span>
                <span class="info-value">{{ detailForm.bankAccount }}</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="info-item">
                <span class="info-label">开户行号：</span>
                <span class="info-value">{{ detailForm.bankCode }}</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="info-item">
                <span class="info-label">联系人：</span>
                <span class="info-value">{{ detailForm.contactPerson }}</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="info-item">
                <span class="info-label">联系电话：</span>
                <span class="info-value">{{ detailForm.contactPhone }}</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="info-item">
                <span class="info-label">维护人：</span>
                <span class="info-value">{{ detailForm.maintainer }}</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20"> 
            <el-col :span="12">
              <div class="info-item">
                <span class="info-label">维护时间：</span>
@@ -461,174 +468,38 @@
          </el-row>
        </div>
      </div>
      <!-- 洽谈进度记录 -->
      <div class="detail-section">
        <div class="section-header">
          <h3 class="section-title">洽谈进度记录</h3>
          <el-button type="primary"
                     size="small"
                     @click="openNegotiationDialog(detailForm)">
            添加进度
          </el-button>
        </div>
        <el-table :data="negotiationRecords"
                  border
                  style="width: 100%">
          <el-table-column prop="followUpTime"
                           label="跟进时间"
                           width="160" />
          <el-table-column prop="followUpMethod"
                           label="跟进方式"
                           width="100" />
          <el-table-column prop="followUpLevel"
                           label="跟进程度" />
          <el-table-column prop="followerUserName"
                           label="跟进人"
                           width="100" />
          <el-table-column prop="content"
                           label="内容"
                           show-overflow-tooltip />
          <el-table-column label="附件"
                           width="100"
                           align="center">
            <template #default="{ row }">
              <el-button type="info"
                         link
                         size="small"
                         @click="openAttachmentDialog(row)">
                <el-icon>
                  <Paperclip />
                </el-icon>
                附件
                <!-- {{ row.fileList && row.fileList.length > 0 ? row.fileList.length : '上传' }} -->
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作"
                           width="150"
                           align="center">
            <template #default="{ row, $index }">
              <el-button type="primary"
                         link
                         size="small"
                         @click="editNegotiationRecord(row, $index)">
                修改
              </el-button>
              <el-button type="danger"
                         link
                         size="small"
                         @click="deleteNegotiationRecord(row, $index)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div v-if="negotiationRecords.length === 0"
             class="no-records">
          暂无洽谈进度记录
        </div>
      </div>
      <!--
      洽谈进度记录（含附件/修改/删除）已按需求整体注释。
      如需恢复：取消本段注释，并恢复 script 中相关变量/方法/接口引入。
      -->
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDetailDialog">关闭</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 附件上传弹窗 -->
    <el-dialog title="附件管理"
               v-model="attachmentDialogVisible"
               width="600px"
               @close="closeAttachmentDialog">
      <div class="attachment-section">
        <div class="upload-area">
          <el-upload ref="attachmentUploadRef"
                     :action="getAttachmentUploadUrl()"
                     :headers="attachmentUploadHeaders"
                     :file-list="currentAttachmentList"
                     :on-success="handleAttachmentSuccess"
                     :on-error="handleAttachmentError"
                     :on-remove="handleAttachmentRemove"
                     :before-upload="beforeAttachmentUpload"
                     multiple
                     :limit="10"
                     name="files">
            <el-button type="primary">
              <el-icon>
                <Upload />
              </el-icon>
              上传附件
            </el-button>
            <template #tip>
              <div class="el-upload__tip">
                支持上传图片、文档等文件，单个文件不超过50MB
              </div>
            </template>
          </el-upload>
        </div>
        <div v-if="currentAttachmentList.length > 0"
             class="attachment-list">
          <h4>已上传附件：</h4>
          <el-table :data="currentAttachmentList"
                    border
                    size="small">
            <el-table-column prop="name"
                             label="文件名"
                             show-overflow-tooltip />
            <el-table-column prop="size"
                             label="大小"
                             width="100">
              <template #default="{ row }">
                {{ formatFileSize(row.size) }}
              </template>
            </el-table-column>
            <el-table-column label="操作"
                             width="120"
                             align="center">
              <template #default="{ row, $index }">
                <el-button type="primary"
                           link
                           size="small"
                           @click="downloadAttachment(row)">
                  下载
                </el-button>
                <el-button type="danger"
                           link
                           size="small"
                           @click="deleteAttachment(row, $index)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-else
             class="no-attachment">
          暂无附件
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeAttachmentDialog">关闭</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 附件管理功能已随洽谈进度整体注释 -->
  </div>
</template>

<script setup>
  import { onMounted, ref, reactive, getCurrentInstance, toRefs } from "vue";
  import { Search, Paperclip, Upload } from "@element-plus/icons-vue";
  import { onMounted, ref, reactive, getCurrentInstance, toRefs, computed, watch } from "vue";
  import { Search } from "@element-plus/icons-vue";
  import {
    addCustomer,
    delCustomer,
    getCustomer,
    listCustomer,
    listCustomerRegions,
    addCustomerRegions,
    updateCustomerRegions,
    delCustomerRegions,
    updateCustomer,
    addCustomerFollow,
    updateCustomerFollow,
    delCustomerFollow,
    addReturnVisit,
    getReturnVisit,
    // addCustomerFollow,
    // updateCustomerFollow,
    // delCustomerFollow,
    // addReturnVisit,
    // getReturnVisit,
  } from "@/api/basicData/customerFile.js";
  import { ElMessageBox } from "element-plus";
  import { userListNoPage } from "@/api/system/user.js";
@@ -637,54 +508,55 @@
  const { proxy } = getCurrentInstance();
  const userStore = useUserStore();

  // 回访提醒相关
  const reminderDialogVisible = ref(false);
  const reminderFormRef = ref();
  const currentCustomerId = ref();
  const reminderForm = reactive({
    customerName: "",
    reminderSwitch: false,
    reminderContent: "",
    reminderTime: "",
  });
  const reminderRules = {
    reminderContent: [
      { required: true, message: "请输入提醒内容", trigger: "blur" },
    ],
    reminderTime: [
      { required: true, message: "请选择提醒时间", trigger: "change" },
    ],
  };

  // 洽谈进度相关
  const negotiationDialogVisible = ref(false);
  const negotiationFormRef = ref();
  const negotiationForm = reactive({
    customerName: "",
    customerId: "",
    followUpMethod: "",
    followUpLevel: "",
    followUpTime: "",
    followerUserName: "",
    content: "",
  });
  const negotiationRules = {
    followUpMethod: [
      { required: true, message: "请选择跟进方式", trigger: "change" },
    ],
    followUpLevel: [
      { required: true, message: "请选择跟进程度", trigger: "change" },
    ],
    followUpTime: [
      { required: true, message: "请选择跟进时间", trigger: "change" },
    ],
    content: [{ required: true, message: "请输入内容", trigger: "blur" }],
  };
  // 回访提醒/洽谈进度相关（已按需求整体注释）
  // const reminderDialogVisible = ref(false);
  // const reminderFormRef = ref();
  // const currentCustomerId = ref();
  // const reminderForm = reactive({
  //   customerName: "",
  //   reminderSwitch: false,
  //   reminderContent: "",
  //   reminderTime: "",
  // });
  // const reminderRules = {
  //   reminderContent: [
  //     { required: true, message: "请输入提醒内容", trigger: "blur" },
  //   ],
  //   reminderTime: [
  //     { required: true, message: "请选择提醒时间", trigger: "change" },
  //   ],
  // };
  //
  // const negotiationDialogVisible = ref(false);
  // const negotiationFormRef = ref();
  // const negotiationForm = reactive({
  //   customerName: "",
  //   customerId: "",
  //   followUpMethod: "",
  //   followUpLevel: "",
  //   followUpTime: "",
  //   followerUserName: "",
  //   content: "",
  // });
  // const negotiationRules = {
  //   followUpMethod: [
  //     { required: true, message: "请选择跟进方式", trigger: "change" },
  //   ],
  //   followUpLevel: [
  //     { required: true, message: "请选择跟进程度", trigger: "change" },
  //   ],
  //   followUpTime: [
  //     { required: true, message: "请选择跟进时间", trigger: "change" },
  //   ],
  //   content: [{ required: true, message: "请输入内容", trigger: "blur" }],
  // };

  // 详情相关
  const detailDialogVisible = ref(false);
  const detailForm = reactive({
    customerName: "",
    regionsName: "",
    regions: "",
    customerType: "",
    taxpayerIdentificationNumber: "",
    companyPhone: "",
@@ -699,21 +571,13 @@
  });
  const negotiationRecords = ref([]);

  // 附件相关
  const attachmentDialogVisible = ref(false);
  const attachmentUploadRef = ref();
  const currentAttachmentList = ref([]);
  const currentFollowRecord = ref({});
  const attachmentUploadHeaders = { Authorization: "Bearer " + getToken() };

  // 动态构建上传URL
  const getAttachmentUploadUrl = () => {
    const baseUrl =
      import.meta.env.VITE_APP_BASE_API + "/basic/customer-follow/upload";
    return currentFollowRecord.value.id
      ? `${baseUrl}/${currentFollowRecord.value.id}`
      : baseUrl;
  };
  // 附件相关（随洽谈进度整体注释）
  // const attachmentDialogVisible = ref(false);
  // const attachmentUploadRef = ref();
  // const currentAttachmentList = ref([]);
  // const currentFollowRecord = ref({});
  // const attachmentUploadHeaders = { Authorization: "Bearer " + getToken() };
  // const getAttachmentUploadUrl = () => {};

  const tableColumn = ref([
    {
@@ -725,6 +589,11 @@
      label: "客户名称",
      prop: "customerName",
      width: 220,
    },
    {
      label: "客户地区",
      prop: "regionsName",
      width: 120,
    },
    {
      label: "纳税人识别码",
@@ -784,7 +653,7 @@
      label: "操作",
      align: "center",
      fixed: "right",
      width: 250,
      width: 120,
      operation: [
        {
          name: "编辑",
@@ -793,27 +662,27 @@
            openForm("edit", row);
          },
        },
        {
          name: "详情",
          type: "text",
          clickFun: row => {
            openDetailDialog(row);
          },
        },
        {
          name: "回访提醒",
          type: "text",
          clickFun: row => {
            openReminderDialog(row);
          },
        },
        {
          name: "添加洽谈进度",
          type: "text",
          clickFun: row => {
            openNegotiationDialog(row);
          },
        },
        // {
        //   name: "添加洽谈进度",
        //   type: "text",
        //   clickFun: row => {
        //     openNegotiationDialog(row);
        //   },
        // },
        // {
        //   name: "回访提醒",
        //   type: "text",
        //   clickFun: row => {
        //     openReminderDialog(row);
        //   },
        // },
            {
               name: "详情",
               type: "text",
               clickFun: row => {
                  openDetailDialog(row);
               },
            },
      ],
    },
  ]);
@@ -844,11 +713,16 @@
    searchForm: {
      customerName: "",
      customerType: "",
      regions: "",
      regionsId: "",
    },
    form: {
      customerName: "",
      taxpayerIdentificationNumber: "",
      companyAddress: "",
      regions: "",
      regionsId: "",
      regionsld: "",
      companyPhone: "",
      contactPerson: "",
      contactPhone: "",
@@ -865,6 +739,7 @@
        { required: true, message: "请输入", trigger: "blur" },
      ],
      companyAddress: [{ required: true, message: "请输入", trigger: "blur" }],
      regions: [{ required: true, message: "请选择客户地区", trigger: "change" }],
      companyPhone: [{ required: true, message: "请输入", trigger: "blur" }],
      // contactPerson: [{ required: true, message: "请输入", trigger: "blur" }],
      // contactPhone: [{ required: true, message: "请输入", trigger: "blur" }],
@@ -934,6 +809,177 @@
    },
  });
  const { searchForm, form, rules } = toRefs(data);

  // 左侧地区栏
  const regionTreeRef = ref();
  const regionsLoading = ref(false);
  const regionTreeData = ref([]);
  const regionKeyword = ref("");
  const selectedRegionId = ref(0); // 0 表示全部
  const selectedRegionNode = ref(null);
  const formRegionPath = ref([]);
  const addRegionDialogVisible = ref(false);
  const editRegionDialogVisible = ref(false);
  const addRegionForm = reactive({ parentPath: [], regionsName: "" });
  const editRegionForm = reactive({ id: undefined, parentId: 0, regionsName: "" });
  const regionTreeProps = { label: "label", children: "children" };
  const regionCascaderProps = {
    value: "id",
    label: "label",
    children: "children",
    checkStrictly: true,
    emitPath: true,
  };
  const regionNodeMap = computed(() => {
    const map = new Map();
    const walk = list => {
      (list || []).forEach(node => {
        map.set(node.id, node);
        walk(node.children || []);
      });
    };
    walk(regionTreeData.value);
    return map;
  });
  const editRegionParentLabel = computed(() => {
    if (!editRegionForm.parentId) return "顶级地区";
    return regionNodeMap.value.get(editRegionForm.parentId)?.label || "未知";
  });

  const normalizeRegionTree = list => {
    return (list || []).map(item => ({
      ...item,
      label: item.label || item.regionsName || "",
      regionsName: item.regionsName || item.label || "",
      children: normalizeRegionTree(item.children || []),
    }));
  };

  const fetchRegions = async () => {
    regionsLoading.value = true;
    try {
      const res = await listCustomerRegions({});
      const list = res?.data ?? res?.rows ?? res ?? [];
      regionTreeData.value = Array.isArray(list) ? normalizeRegionTree(list) : [];
    } catch (e) {
      console.error("地区查询失败:", e);
      regionTreeData.value = [];
    } finally {
      regionsLoading.value = false;
    }
  };

  const filterRegionNode = (value, data) => {
    if (!value) return true;
    return (data.label || "").includes(value);
  };

  const selectRegion = regionName => {
    selectedRegionId.value = 0;
    selectedRegionNode.value = null;
    searchForm.value.regions = regionName || "";
    searchForm.value.regionsId = "";
    handleQuery();
  };
  const handleRegionNodeClick = data => {
    selectedRegionId.value = data.id;
    selectedRegionNode.value = data;
    searchForm.value.regions = data.regionsName || data.label || "";
    searchForm.value.regionsId = data.id;
    handleQuery();
  };

  const openAddRegionDialog = () => {
    addRegionForm.parentPath = [];
    addRegionForm.regionsName = "";
    addRegionDialogVisible.value = true;
  };
  const closeAddRegionDialog = () => {
    addRegionDialogVisible.value = false;
    addRegionForm.parentPath = [];
    addRegionForm.regionsName = "";
  };
  const submitAddRegion = async () => {
    const name = (addRegionForm.regionsName || "").trim();
    if (!name) return proxy.$modal.msgWarning("请输入地区名称");
    const parentPath = addRegionForm.parentPath || [];
    const parentId = parentPath.length ? parentPath[parentPath.length - 1] : 0;
    await addCustomerRegions({ parentId, regionsName: name });
    proxy.$modal.msgSuccess("新增成功");
    await fetchRegions();
    closeAddRegionDialog();
  };

  const openEditRegionDialog = () => {
    if (!selectedRegionNode.value || selectedRegionId.value === 0) {
      return proxy.$modal.msgWarning("请先选择要修改的地区");
    }
    editRegionForm.id = selectedRegionNode.value.id;
    editRegionForm.parentId = selectedRegionNode.value.parentId || 0;
    editRegionForm.regionsName =
      selectedRegionNode.value.regionsName || selectedRegionNode.value.label || "";
    editRegionDialogVisible.value = true;
  };
  const closeEditRegionDialog = () => {
    editRegionDialogVisible.value = false;
    editRegionForm.id = undefined;
    editRegionForm.parentId = 0;
    editRegionForm.regionsName = "";
  };
  const submitEditRegion = async () => {
    const name = (editRegionForm.regionsName || "").trim();
    if (!name) return proxy.$modal.msgWarning("请输入地区名称");
    await updateCustomerRegions({
      id: editRegionForm.id,
      parentId: editRegionForm.parentId,
      regionsName: name,
    });
    proxy.$modal.msgSuccess("修改成功");
    await fetchRegions();
    closeEditRegionDialog();
  };
  const handleDeleteRegion = () => {
    if (!selectedRegionNode.value || selectedRegionId.value === 0) {
      return proxy.$modal.msgWarning("请先选择要删除的地区");
    }
    ElMessageBox.confirm("删除后不可恢复，是否继续？", "删除地区", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(async () => {
        await delCustomerRegions(selectedRegionNode.value.id);
        proxy.$modal.msgSuccess("删除成功");
        selectRegion("");
        await fetchRegions();
      })
      .catch(() => {});
  };

  const handleFormRegionChange = value => {
    const ids = value || [];
    if (!ids.length) {
      form.value.regions = "";
      form.value.regionsId = "";
      form.value.regionsld = "";
      return;
    }
    const lastId = ids[ids.length - 1];
    form.value.regions = regionNodeMap.value.get(lastId)?.regionsName || "";
    form.value.regionsId = lastId;
    form.value.regionsld = lastId;
  };
  const findRegionPathByName = (tree, targetName, parentPath = []) => {
    for (const item of tree || []) {
      const currentPath = [...parentPath, item.id];
      if ((item.regionsName || item.label) === targetName) {
        return currentPath;
      }
      const childResult = findRegionPathByName(item.children || [], targetName, currentPath);
      if (childResult.length) return childResult;
    }
    return [];
  };
  const addNewContact = () => {
    formYYs.value.contactList.push({
      contactPerson: "",
@@ -987,6 +1033,9 @@
  const openForm = (type, row) => {
    operationType.value = type;
    form.value = {};
    formRegionPath.value = [];
    form.value.regionsId = "";
    form.value.regionsld = "";
    form.value.maintainer = userStore.nickName;
    formYYs.value.contactList = [
      {
@@ -1001,6 +1050,16 @@
    if (type === "edit") {
      getCustomer(row.id).then(res => {
        form.value = { ...res.data };
        formRegionPath.value = findRegionPathByName(
          regionTreeData.value,
          form.value.regions || ""
        );
        const selectedRegionId =
          formRegionPath.value.length > 0
            ? formRegionPath.value[formRegionPath.value.length - 1]
            : "";
        form.value.regionsId = form.value.regionsId || selectedRegionId;
        form.value.regionsld = form.value.regionsld || form.value.regionsId || selectedRegionId;
        formYYs.value.contactList = res.data.contactPerson
          .split(",")
          .map((item, index) => {
@@ -1036,6 +1095,10 @@
    form.value.contactPhone = formYYs.value.contactList
      .map(item => item.contactPhone)
      .join(",");
    if (!form.value.regionsId && formRegionPath.value.length) {
      form.value.regionsId = formRegionPath.value[formRegionPath.value.length - 1];
    }
    form.value.regionsld = form.value.regionsId || "";
    addCustomer(form.value).then(res => {
      proxy.$modal.msgSuccess("提交成功");
      closeDia();
@@ -1050,6 +1113,10 @@
    form.value.contactPhone = formYYs.value.contactList
      .map(item => item.contactPhone)
      .join(",");
    if (!form.value.regionsId && formRegionPath.value.length) {
      form.value.regionsId = formRegionPath.value[formRegionPath.value.length - 1];
    }
    form.value.regionsld = form.value.regionsId || "";
    updateCustomer(form.value).then(res => {
      proxy.$modal.msgSuccess("提交成功");
      closeDia();
@@ -1059,6 +1126,7 @@
  // 关闭弹框
  const closeDia = () => {
    proxy.resetForm("formRef");
    formRegionPath.value = [];
    dialogFormVisible.value = false;
  };
  // 导出
@@ -1113,168 +1181,17 @@
      });
  };

  // 打开回访提醒弹窗
  const openReminderDialog = row => {
    currentCustomerId.value = row.id;
    reminderForm.customerName = row.customerName;
    reminderForm.reminderSwitch = false;
    reminderForm.reminderContent = "";
    reminderForm.reminderTime = "";

    // 尝试获取已有的回访提醒
    getReturnVisit(row.id)
      .then(res => {
        if (res.code === 200 && res.data) {
          reminderForm.reminderSwitch = res.data.isEnabled === 1;
          reminderForm.reminderContent = res.data.content;
          reminderForm.reminderTime = res.data.reminderTime;
          reminderForm.id = res.data.id;
        }
      })
      .catch(error => {
        console.error("获取回访提醒失败:", error);
      });

    reminderDialogVisible.value = true;
  };

  // 关闭回访提醒弹窗
  const closeReminderDialog = () => {
    proxy.resetForm("reminderFormRef");
    reminderDialogVisible.value = false;
  };
  const submitvalue = ref({});

  // 提交回访提醒
  const submitReminderForm = () => {
    console.log("提交回访提醒数据:", userStore.id, userStore);
    proxy.$refs.reminderFormRef.validate(valid => {
      if (valid) {
        if (reminderForm.id) {
          submitvalue.value = {
            id: reminderForm.id,
            customerId: currentCustomerId.value,
            isEnabled: reminderForm.reminderSwitch ? 1 : 0,
            content: reminderForm.reminderContent,
            reminderTime: reminderForm.reminderTime,
            remindUserId: userStore.id,
          };
        } else {
          submitvalue.value = {
            customerId: currentCustomerId.value,
            isEnabled: reminderForm.reminderSwitch ? 1 : 0,
            content: reminderForm.reminderContent,
            reminderTime: reminderForm.reminderTime,
            remindUserId: userStore.id,
          };
        }

        console.log("提交回访提醒数据:", submitvalue.value);

        // 调用接口
        addReturnVisit(submitvalue.value)
          .then(res => {
            if (res.code === 200) {
              proxy.$modal.msgSuccess("回访提醒设置成功");
              closeReminderDialog();
            } else {
              proxy.$modal.msgError(res.msg || "设置失败");
            }
          })
          .catch(error => {
            console.error("设置回访提醒失败:", error);
            proxy.$modal.msgError("设置失败");
          });
      }
    });
  };

  // 打开洽谈进度弹窗
  const openNegotiationDialog = row => {
    negotiationForm.customerName = row.customerName;
    negotiationForm.customerId = row.id;
    negotiationForm.followUpMethod = "";
    negotiationForm.followUpLevel = "";
    negotiationForm.followUpTime = "";
    negotiationForm.followerUserName = userStore.nickName; // 默认当前登录人
    negotiationForm.content = "";
    // {
    //    "customerId": 152,
    //    "followUpMethod": "电话沟通",
    //    "followUpLevel": "没有意向",
    //    "followUpTime": "2026-03-04T15:30:00",
    //    "followerUserName": "管理员账号",
    //    "content": "111"
    // }
    negotiationDialogVisible.value = true;
  };

  // 关闭洽谈进度弹窗
  const closeNegotiationDialog = () => {
    proxy.resetForm("negotiationFormRef");
    // 清除编辑状态
    delete negotiationForm.editIndex;
    delete negotiationForm.id;
    negotiationDialogVisible.value = false;
  };

  // 提交洽谈进度
  const submitNegotiationForm = () => {
    proxy.$refs.negotiationFormRef.validate(valid => {
      if (valid) {
        // 判断是新增还是修改
        const isEdit = negotiationForm.editIndex !== undefined;

        if (isEdit) {
          // 修改操作
          console.log("修改洽谈进度数据:", negotiationForm);
          // 这里可以调用更新接口
          // 实际项目中需要根据后端接口进行调整
          // 示例：updateCustomerFollow(negotiationForm).then(res => {
          //   // 更新本地数据
          //   const index = negotiationForm.editIndex;
          //   negotiationRecords.value[index] = {
          //     followUpTime: negotiationForm.followUpTime,
          //     followUpMethod: negotiationForm.followUpMethod,
          //     followUpLevel: negotiationForm.followUpLevel,
          //     followerUserName: negotiationForm.followerUserName,
          //     content: negotiationForm.content,
          //     id: negotiationForm.id,
          //   };
          //   proxy.$modal.msgSuccess("修改成功");
          //   closeNegotiationDialog();
          // });
          updateCustomerFollow(negotiationForm).then(res => {
            // 更新本地数据
            getCustomer(negotiationForm.customerId).then(res => {
              // 更新本地数据
              negotiationRecords.value = res.data.followUpList || [];
            });
          });
          proxy.$modal.msgSuccess("修改成功");
          closeNegotiationDialog();
        } else {
          // 新增操作
          console.log("提交洽谈进度数据:", negotiationForm);
          addCustomerFollow(negotiationForm).then(res => {
            // 添加成功后更新详情页面的进度记录
            const newRecord = {
              followUpTime: negotiationForm.followUpTime,
              followUpMethod: negotiationForm.followUpMethod,
              followUpLevel: negotiationForm.followUpLevel,
              followerUserName: negotiationForm.followerUserName,
              content: negotiationForm.content,
            };
            negotiationRecords.value.unshift(newRecord);

            proxy.$modal.msgSuccess("提交成功");
            closeNegotiationDialog();
            getList();
          });
        }
      }
    });
  };
  /*
   * 回访提醒 / 洽谈进度功能（入口及弹窗）已按需求注释，以下方法暂不启用：
   * - openReminderDialog / closeReminderDialog / submitReminderForm
   * - openNegotiationDialog / closeNegotiationDialog / submitNegotiationForm
   */
  // const openReminderDialog = row => {};
  // const closeReminderDialog = () => {};
  // const submitReminderForm = () => {};
  // const openNegotiationDialog = row => {};
  // const closeNegotiationDialog = () => {};
  // const submitNegotiationForm = () => {};

  // 打开详情弹窗
  const openDetailDialog = row => {
@@ -1295,190 +1212,11 @@
    detailDialogVisible.value = false;
  };

  // 修改洽谈记录
  const editNegotiationRecord = (row, index) => {
    // 将当前记录数据填充到表单
    Object.assign(negotiationForm, {
      customerName: row.customerName,
      customerId: row.customerId,
      followUpMethod: row.followUpMethod,
      followUpLevel: row.followUpLevel,
      followUpTime: row.followUpTime,
      followerUserName: row.followerUserName,
      content: row.content,
      id: row.id, // 记录ID用于更新
      editIndex: index, // 记录索引用于本地更新
    });
    negotiationDialogVisible.value = true;
  };

  // 删除洽谈记录
  const deleteNegotiationRecord = (row, index) => {
    ElMessageBox.confirm("确定要删除这条洽谈记录吗？", "删除提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        // 这里可以调用删除接口
        // 实际项目中需要根据后端接口进行调整
        // 示例：deleteCustomerFollow(row.id).then(() => {
        //   negotiationRecords.value.splice(index, 1);
        //   proxy.$modal.msgSuccess("删除成功");
        // });
        delCustomerFollow(row.id).then(() => {
          // 删除成功后更新本地数据
          getCustomer(row.customerId).then(res => {
            // 更新本地数据
            negotiationRecords.value = res.data.followUpList || [];
          });
          proxy.$modal.msgSuccess("删除成功");
        });
        // 本地删除（模拟）
        negotiationRecords.value.splice(index, 1);
        proxy.$modal.msgSuccess("删除成功");
      })
      .catch(() => {
        proxy.$modal.msg("已取消删除");
      });
  };

  // 打开附件弹窗
  const openAttachmentDialog = row => {
    currentFollowRecord.value = row;
    // 转换为符合Element Plus fileList格式的数组
    currentAttachmentList.value = (row.fileList || []).map((file, index) => ({
      name: file.fileName,
      url: file.fileUrl,
      size: file.fileSize,
      id: file.id,
      uid: file.id || index,
      status: "success",
    }));

    attachmentDialogVisible.value = true;
  };

  // 关闭附件弹窗
  const closeAttachmentDialog = () => {
    attachmentDialogVisible.value = false;
    currentFollowRecord.value = {};
    currentAttachmentList.value = [];
  };

  // 附件上传成功
  const handleAttachmentSuccess = (response, file, fileList) => {
    if (response.code === 200) {
      proxy.$modal.msgSuccess("上传成功");
      // 更新当前记录的附件列表
      currentAttachmentList.value = fileList.map(item => ({
        name: item.name,
        size: item.size,
        url: item.response?.data?.url || item.url,
        id: item.response?.data?.id,
        uid: item.uid,
        status: "success",
      }));
      // 更新原记录中的files字段
      if (currentFollowRecord.value) {
        currentFollowRecord.value.files = [...currentAttachmentList.value];
      }
    } else {
      proxy.$modal.msgError(response.msg || "上传失败");
    }
  };

  // 附件上传失败
  const handleAttachmentError = (error, file, fileList) => {
    console.error("上传失败:", error);
    proxy.$modal.msgError("上传失败");
  };

  // 附件移除
  const handleAttachmentRemove = (file, fileList) => {
    currentAttachmentList.value = fileList;
    // 更新原记录中的files字段
    if (currentFollowRecord.value) {
      currentFollowRecord.value.files = [...fileList];
    }
  };

  // 附件上传前校验
  const beforeAttachmentUpload = file => {
    const maxSize = 50 * 1024 * 1024; // 50MB
    if (file.size > maxSize) {
      proxy.$modal.msgError("文件大小不能超过50MB");
      return false;
    }
    return true;
  };

  // 格式化文件大小
  const formatFileSize = size => {
    if (size < 1024) {
      return size + " B";
    } else if (size < 1024 * 1024) {
      return (size / 1024).toFixed(2) + " KB";
    } else {
      return (size / (1024 * 1024)).toFixed(2) + " MB";
    }
  };

  // 下载附件
  const downloadAttachment = row => {
    if (row.url) {
      // proxy.download(row.url, {}, row.name);
      proxy.$download.name(row.url);
    } else {
      proxy.$modal.msgError("下载链接不存在");
    }
  };

  // 删除附件
  const deleteAttachment = (row, index) => {
    ElMessageBox.confirm("确定要删除这个附件吗？", "删除提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        // 调用后端接口删除附件
        const deleteUrl =
          import.meta.env.VITE_APP_BASE_API +
          "/basic/customer-follow/file/" +
          row.id;
        fetch(deleteUrl, {
          method: "DELETE",
          headers: {
            Authorization: "Bearer " + getToken(),
            "Content-Type": "application/json",
          },
        })
          .then(response => response.json())
          .then(res => {
            if (res.code === 200) {
              // 删除成功后更新本地文件列表
              currentAttachmentList.value.splice(index, 1);
              // 更新原记录中的files字段
              if (currentFollowRecord.value) {
                currentFollowRecord.value.files = [
                  ...currentAttachmentList.value,
                ];
              }
              proxy.$modal.msgSuccess("删除成功");
            } else {
              proxy.$modal.msgError(res.msg || "删除失败");
            }
          })
          .catch(error => {
            console.error("删除附件失败:", error);
            proxy.$modal.msgError("删除失败");
          });
      })
      .catch(() => {
        proxy.$modal.msg("已取消删除");
      });
  };
  /*
   * 洽谈进度记录 & 附件管理相关（已随入口整体注释）
   * - editNegotiationRecord / deleteNegotiationRecord
   * - openAttachmentDialog / closeAttachmentDialog / ...附件相关方法
   */

  // 获取当前日期并格式化为 YYYY-MM-DD
  function getCurrentDate() {
@@ -1490,11 +1228,186 @@
  }

  onMounted(() => {
    fetchRegions();
    getList();
  });

  watch(regionKeyword, value => {
    regionTreeRef.value?.filter((value || "").trim());
  });
</script>

<style scoped lang="scss">
  .customer-split {
    display: flex;
    gap: 12px;
  }

  .left-panel {
    width: 260px;
    flex: 0 0 260px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #ebeef5;
    padding: 12px;
    height: calc(100vh - 140px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .right-panel {
    flex: 1;
    min-width: 0;
  }

  .toolbar-card {
    background: #ffffff;
    border: 1px solid #ebeef5;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 10px rgba(31, 35, 41, 0.04);
  }

  .right-search-form {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
  }

  .search-fields {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
    flex: 1;
    min-width: 0;
  }

  .toolbar-divider {
    width: 1px;
    align-self: stretch;
    background: linear-gradient(to bottom, transparent, #e4e7ed 15%, #e4e7ed 85%, transparent);
  }

  .action-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-left: 2px;
    flex-shrink: 0;
  }

  .action-buttons :deep(.el-button) {
    margin-left: 0;
    min-width: 84px;
  }

  .table-card {
    background: #fff;
    border: 1px solid #ebeef5;
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 2px 10px rgba(31, 35, 41, 0.03);
  }

  @media (max-width: 1500px) {
    .right-search-form {
      flex-wrap: wrap;
    }

    .search-fields {
      flex-wrap: wrap;
      gap: 8px 0;
    }

    .toolbar-divider {
      display: none;
    }

    .action-buttons {
      width: 100%;
      border-top: 1px dashed #e4e7ed;
      padding-top: 10px;
    }
  }

  .left-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }

  .left-title {
    font-weight: 600;
    color: #303133;
  }

  .left-actions {
    display: flex;
    gap: 6px;
  }

  .left-actions :deep(.el-button) {
    margin-left: 0;
    padding: 5px 10px;
  }

  .left-search {
    margin-bottom: 10px;
  }

  .left-list {
    flex: 1;
    overflow: auto;
    padding-right: 4px;
  }

  .region-item {
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    color: #303133;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .region-item:hover {
    background: #f5f7fa;
  }

  .region-item.active {
    background: #ecf5ff;
    color: #409eff;
    font-weight: 600;
  }

  .left-list :deep(.el-tree) {
    background: transparent;
  }

  .left-list :deep(.el-tree-node__content) {
    height: 30px;
    border-radius: 6px;
  }

  .left-list :deep(.el-tree-node__content:hover) {
    background: #f5f7fa;
  }

  .empty-tip {
    padding: 16px 10px;
    color: #909399;
    font-size: 13px;
  }

  .detail-section {
    margin-bottom: 20px;
    padding: 15px;