Merge branch 'dev_天津_君歌化工' of http://114.132.189.42:9002/r/product-inventor...

yyb

昨天 d54ecccc11a8c9a342102aca7c126a16c385cbd2

 src/views/basicData/customerFile/index.vue

@@ -1,304 +1,1679 @@
<template>
<div class="app-container">
  <div class="search_form">
    <div>
      <span class="search_title">客户名称：</span>
      <el-input
          v-model="searchForm.customerName"
          style="width: 240px"
          placeholder="请输入"
          @change="handleQuery"
          clearable
          :prefix-icon="Search"
      />
      <el-button type="primary" @click="handleQuery" style="margin-left: 10px">搜索</el-button>
    </div>
    <div>
      <el-button type="primary" @click="openForm('add')">新增客户</el-button>
      <el-button @click="handleOut">导出</el-button>
      <el-button type="danger" plain @click="handleDelete">删除</el-button>
    </div>
  </div>
  <div class="table_list">
    <PIMTable :column="tableColumn" :tableData="tableData" :page="page" :handleSelectionChange="handleSelectionChange"
              :tableLoading="tableLoading" @pagination="pagination" :total="total"></PIMTable>
  </div>
  <el-dialog v-model="dialogFormVisible" :title="operationType === 'add' ? '新增客户信息' : '编辑客户信息'" width="70%" @close="closeDia">
    <el-form :model="form" label-width="140px" label-position="top" :rules="rules" ref="formRef">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="客户名称：" prop="customerName">
            <el-input v-model="form.customerName" placeholder="请输入" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="纳税人识别号：" prop="taxpayerIdentificationNumber">
            <el-input v-model="form.taxpayerIdentificationNumber" placeholder="请输入" clearable/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="公司地址：" prop="companyAddress">
            <el-input v-model="form.companyAddress" placeholder="请输入" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公司电话：" prop="companyPhone">
            <el-input v-model="form.companyPhone" placeholder="请输入" clearable/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="联系人：" prop="contactPerson">
            <el-input v-model="form.contactPerson" placeholder="请输入" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话：" prop="contactPhone">
            <el-input v-model="form.contactPhone" placeholder="请输入" clearable/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="维护人：" prop="maintainer">
            <el-select v-model="form.maintainer" placeholder="请选择" clearable>
              <el-option v-for="item in userList" :key="item.nickName" :label="item.nickName" :value="item.nickName"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="维护时间：" prop="maintenanceTime">
            <el-date-picker
                style="width: 100%"
                v-model="form.maintenanceTime"
                value-format="YYYY-MM-DD"
                format="YYYY-MM-DD"
                type="date"
                placeholder="请选择"
                clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确认</el-button>
        <el-button @click="closeDia">取消</el-button>
  <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>
    </template>
  </el-dialog>
</div>
      <div>
        <el-button type="primary"
                   @click="openForm('add')">新增客户
        </el-button>
        <el-button type="primary" @click="handleOut">导出</el-button>
        <el-button type="primary" @click="handleOutFollowUpList">导出跟进记录</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 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="dialogFormVisible"
               :title="operationType === 'add' ? '新增客户信息' : '编辑客户信息'"
               width="70%"
               @close="closeDia">
      <el-form :model="form"
               label-width="140px"
               label-position="top"
               :rules="rules"
               ref="formRef">
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="客户名称："
                          prop="customerName">
              <el-input v-model="form.customerName"
                        placeholder="请输入"
                        clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="纳税人识别号："
                          prop="taxpayerIdentificationNumber">
              <el-input v-model="form.taxpayerIdentificationNumber"
                        placeholder="请输入"
                        clearable/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="公司地址："
                          prop="companyAddress">
              <el-input v-model="form.companyAddress"
                        placeholder="请输入"
                        clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公司电话："
                          prop="companyPhone">
              <el-input v-model="form.companyPhone"
                        placeholder="请输入"
                        clearable/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="银行基本户："
                          prop="basicBankAccount">
              <el-input v-model="form.basicBankAccount"
                        placeholder="请输入"
                        clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="银行账号："
                          prop="bankAccount">
              <el-input v-model="form.bankAccount"
                        placeholder="请输入"
                        clearable/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="开户行号："
                          prop="bankCode">
              <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>
        <el-row :gutter="30"
                v-for="(contact, index) in formYYs.contactList"
                :key="index">
          <el-col :span="12">
            <el-form-item label="联系人："
                          prop="contactPerson">
              <el-input v-model="contact.contactPerson"
                        placeholder="请输入"
                        clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话："
                          prop="contactPhone">
              <div style="display: flex; align-items: center;width: 100%;">
                <el-input v-model="contact.contactPhone"
                          placeholder="请输入"
                          clearable/>
                <el-button @click="removeContact(index)"
                           type="danger"
                           circle
                           style="margin-left: 5px;">
                  <el-icon>
                    <Close/>
                  </el-icon>
                </el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-button @click="addNewContact"
                   style="margin-bottom: 10px;">+ 新增联系人
        </el-button>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="维护人："
                          prop="maintainer">
              <el-select v-model="form.maintainer"
                         placeholder="请选择"
                         clearable
                         disabled>
                <el-option v-for="item in userList"
                           :key="item.nickName"
                           :label="item.nickName"
                           :value="item.nickName"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="维护时间："
                          prop="maintenanceTime">
              <el-date-picker style="width: 100%"
                              v-model="form.maintenanceTime"
                              value-format="YYYY-MM-DD"
                              format="YYYY-MM-DD"
                              type="date"
                              placeholder="请选择"
                              clearable/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary"
                     @click="submitForm">确认
          </el-button>
          <el-button @click="closeDia">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="transferDialogVisible"
               title="客户交接"
               width="500px"
               @close="closeTransferDialog">
      <el-form :model="transferForm"
               :rules="transferRules"
               ref="transferFormRef"
               label-width="100px">
        <el-form-item label="交接人员："
                      prop="createUser">
          <el-select v-model="transferForm.createUser"
                     placeholder="请选择"
                     clearable
                     filterable
                     style="width: 100%">
            <el-option v-for="item in userList"
                       :key="item.userId"
                       :label="item.userName || item.nickName"
                       :value="item.userId"/>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary"
                     @click="submitTransfer">确认
          </el-button>
          <el-button @click="closeTransferDialog">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 用户导入对话框 -->
    <el-dialog :title="upload.title"
               v-model="upload.open"
               width="400px"
               append-to-body>
      <el-upload ref="uploadRef"
                 :limit="1"
                 accept=".xlsx, .xls"
                 :headers="upload.headers"
                 :action="upload.url + '?updateSupport=' + upload.updateSupport"
                 :disabled="upload.isUploading"
                 :before-upload="upload.beforeUpload"
                 :on-progress="upload.onProgress"
                 :on-success="upload.onSuccess"
                 :on-error="upload.onError"
                 :on-change="upload.onChange"
                 :auto-upload="false"
                 drag>
        <el-icon class="el-icon--upload">
          <upload-filled/>
        </el-icon>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip text-center">
            <span>仅允许导入xls、xlsx格式文件。</span>
            <el-link type="primary"
                     :underline="false"
                     style="font-size: 12px; vertical-align: baseline"
                     @click="importTemplate">下载模板
            </el-link>
          </div>
        </template>
      </el-upload>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary"
                     @click="submitFileForm">确 定
          </el-button>
          <el-button @click="upload.open = false">取 消</el-button>
        </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 type="primary" @click="submitReminderForm">确认</el-button>
          <el-button @click="closeReminderDialog">取消</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 type="primary" @click="submitNegotiationForm">确认</el-button>
          <el-button @click="closeNegotiationDialog">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 客户详情对话框 -->
    <el-dialog title="客户详情"
               v-model="detailDialogVisible"
               width="1000px"
               @close="closeDetailDialog">
      <!-- 客户基本信息 -->
      <div class="detail-section">
        <h3 class="section-title">客户基本信息</h3>
        <div class="info-display">
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="info-item">
                <span class="info-label">客户名称：</span>
                <span class="info-value">{{ detailForm.customerName }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <span class="info-label">客户分类：</span>
                <span class="info-value">{{ detailForm.customerType }}</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.taxpayerIdentificationNumber }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <span class="info-label">公司电话：</span>
                <span class="info-value">{{ detailForm.companyPhone }}</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.companyAddress }}</span>
              </div>
            </el-col>
            <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-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-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-col :span="12">
              <div class="info-item">
                <span class="info-label">维护时间：</span>
                <span class="info-value">{{ detailForm.maintenanceTime }}</span>
              </div>
            </el-col>
          </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
                         @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
                         @click="editNegotiationRecord(row, $index)">
                修改
              </el-button>
              <el-button type="danger"
                         link
                         @click="deleteNegotiationRecord(row, $index)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div v-if="negotiationRecords.length === 0"
             class="no-records">
          暂无洽谈进度记录
        </div>
      </div>
      <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
                           @click="downloadAttachment(row)">
                  下载
                </el-button>
                <el-button type="danger"
                           link
                           @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 { ref } from 'vue'
import {Search} from "@element-plus/icons-vue";
import {addCustomer, delCustomer, getCustomer, listCustomer, updateCustomer} from "@/api/basicData/customerFile.js";
import {ElMessageBox } from "element-plus";
import {onMounted, ref, reactive, getCurrentInstance, toRefs} from "vue";
import {Search, Paperclip, Upload} from "@element-plus/icons-vue";
import {
  addCustomer,
  delCustomer,
  getCustomer,
  listCustomer,
  updateCustomer,
  addCustomerFollow,
  updateCustomerFollow,
  delCustomerFollow,
  addReturnVisit,
  getReturnVisit, transferCustomer,
} from "@/api/basicData/customerFile.js";
import {ElMessageBox} from "element-plus";
import {userListNoPage} from "@/api/system/user.js";
const { proxy } = getCurrentInstance()
import useUserStore from "@/store/modules/user";
import {getToken} from "@/utils/auth.js";

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 detailDialogVisible = ref(false);
const detailForm = reactive({
  customerName: "",
  customerType: "",
  taxpayerIdentificationNumber: "",
  companyPhone: "",
  companyAddress: "",
  basicBankAccount: "",
  bankAccount: "",
  bankCode: "",
  contactPerson: "",
  contactPhone: "",
  maintainer: "",
  maintenanceTime: "",
});
const negotiationRecords = ref([]);

// 客户交接
const transferDialogVisible = ref(false);
const transferFormRef = ref();
const transferForm = reactive({
  id: 0,
  createUser: 0,
});
const transferRules = {
  userId: [{required: true, message: "请选择交接人员", trigger: "change"}],
};

// 附件相关
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 tableColumn = ref([
  {
    label: '客户名称',
    prop: 'customerName',
    label: "客户分类",
    prop: "customerType",
    width: 120,
  },
  {
    label: '纳税人识别码',
    prop: 'taxpayerIdentificationNumber'
    label: "客户名称",
    prop: "customerName",
    width: 220,
  },
  {
    label: '地址及联系方式',
    prop: 'addressPhone'
    label: "纳税人识别码",
    prop: "taxpayerIdentificationNumber",
    width: 220,
  },
  {
    label: '联系人',
    prop: 'contactPerson'
    label: "地址及联系方式",
    prop: "addressPhone",
    width: 250,
  },
  {
    label: '联系电话',
    prop: 'contactPhone',
    label: "联系人",
    prop: "contactPerson",
  },
  {
    label: '维护人',
    prop: 'maintainer',
    label: "联系电话",
    prop: "contactPhone",
    width: 150,
  },
  {
    label: '维护时间',
    prop: 'maintenanceTime',
    label: "跟进进度",
    prop: "followUpLevel",
    width: 120,
  },
  {
    label: "跟进时间",
    prop: "followUpTime",
    width: 120,
  },
  {
    label: "银行基本户",
    prop: "basicBankAccount",
    width: 220,
  },
  {
    label: "银行账号",
    prop: "bankAccount",
    width: 220,
  },
  {
    label: "开户行号",
    prop: "bankCode",
    width: 220,
  },
  {
    label: "维护人",
    prop: "maintainer",
  },
  {
    label: "维护时间",
    prop: "maintenanceTime",
    width: 100,
  },
  {
    dataType: "action",
    label: "操作",
    align: 'center',
    align: "center",
    fixed: "right",
    width: 360,
    operation: [
      {
        name: "编辑",
        type: "text",
        clickFun: (row) => {
          openForm('edit', row);
        clickFun: row => {
          openForm("edit", row);
        },
      },
      {
        name: "添加洽谈进度",
        type: "text",
        clickFun: row => {
          openNegotiationDialog(row);
        },
      },
      {
        name: "回访提醒",
        type: "text",
        clickFun: row => {
          openReminderDialog(row);
        },
      },
      {
        name: "客户交接",
        type: "text",
        clickFun: row => {
          openTransferDialog(row);
        },
      },
      {
        name: "详情",
        type: "text",
        clickFun: row => {
          openDetailDialog(row);
        },
      },
    ],
  },
])
const tableData = ref([])
const selectedRows = ref([])
const userList = ref([])
const tableLoading = ref(false)
]);
const tableData = ref([]);
const selectedRows = ref([]);
const userList = ref([]);
const tableLoading = ref(false);
const page = reactive({
  current: 1,
  size: 10,
})
const total = ref(0)
  size: 100,
  total: 0,
});
const total = ref(0);

// 用户信息表单弹框数据
const operationType = ref('')
const dialogFormVisible = ref(false)
const operationType = ref("");
const dialogFormVisible = ref(false);
const formYYs = ref({
  // 其他字段...
  contactList: [
    {
      contactPerson: "",
      contactPhone: "",
    },
  ],
});
const data = reactive({
  searchForm: {
    customerName: '',
    customerName: "",
    customerType: "",
  },
  form: {
    customerName: '',
    taxpayerIdentificationNumber: '',
    companyAddress: '',
    companyPhone: '',
    contactPerson: '',
    contactPhone: '',
    maintainer: '',
    maintenanceTime: '',
    customerName: "",
    taxpayerIdentificationNumber: "",
    companyAddress: "",
    companyPhone: "",
    contactPerson: "",
    contactPhone: "",
    maintainer: "",
    maintenanceTime: "",
    basicBankAccount: "",
    bankAccount: "",
    bankCode: "",
    customerType: "",
  },
  rules: {
    customerName: [{ required: true, message: "请输入", trigger: "blur" }],
    taxpayerIdentificationNumber: [{ required: true, message: "请输入", trigger: "blur" }],
    companyAddress: [{ required: true, message: "请输入", trigger: "blur" }],
    companyPhone: [{ required: true, message: "请输入", trigger: "blur" }],
    contactPerson: [{ required: true, message: "请输入", trigger: "blur" }],
    contactPhone: [{ required: true, message: "请输入", trigger: "blur" }],
    maintainer: [{ required: false, message: "请选择", trigger: "change" }],
    maintenanceTime: [{ required: false, message: "请选择", trigger: "change" }],
  }
})
const { searchForm, form, rules } = toRefs(data)
    customerName: [{required: true, message: "请输入", trigger: "blur"}],
    taxpayerIdentificationNumber: [
      {required: true, message: "请输入", trigger: "blur"},
    ],
    companyAddress: [{required: true, message: "请输入", trigger: "blur"}],
    companyPhone: [{required: true, message: "请输入", trigger: "blur"}],
    // contactPerson: [{ required: true, message: "请输入", trigger: "blur" }],
    // contactPhone: [{ required: true, message: "请输入", trigger: "blur" }],
    maintainer: [{required: false, message: "请选择", trigger: "change"}],
    maintenanceTime: [
      {required: false, message: "请选择", trigger: "change"},
    ],
    basicBankAccount: [{required: true, message: "请输入", trigger: "blur"}],
    bankAccount: [{required: true, message: "请输入", trigger: "blur"}],
    bankCode: [{required: true, message: "请输入", trigger: "blur"}],
    customerType: [{required: true, message: "请选择", trigger: "change"}],
  },
});
const upload = reactive({
  // 是否显示弹出层（客户导入）
  open: false,
  // 弹出层标题（客户导入）
  title: "",
  // 是否禁用上传
  isUploading: false,
  // 设置上传的请求头部
  headers: {Authorization: "Bearer " + getToken()},
  // 上传的地址
  url: import.meta.env.VITE_APP_BASE_API + "/basic/customer/importData",
  // 文件上传前的回调
  beforeUpload: file => {
    console.log("文件即将上传", file);
    // 可以在此处做文件类型或大小校验
    const isValid =
        file.type ===
        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
        file.name.endsWith(".xlsx") ||
        file.name.endsWith(".xls");
    if (!isValid) {
      proxy.$modal.msgError("只能上传 Excel 文件");
    }
    return isValid;
  },
  // 文件状态改变时的回调
  onChange: (file, fileList) => {
    console.log("文件状态改变", file, fileList);
  },
  // 文件上传成功时的回调
  onSuccess: (response, file, fileList) => {
    console.log("上传成功", response, file, fileList);
    upload.isUploading = false;
    if (response.code === 200) {
      proxy.$modal.msgSuccess("文件上传成功");
      upload.open = false;
      proxy.$refs["uploadRef"].clearFiles();
      getList();
    } else if (response.code === 500) {
      proxy.$modal.msgError(response.msg);
    } else {
      proxy.$modal.msgWarning(response.msg);
    }
  },
  // 文件上传失败时的回调
  onError: (error, file, fileList) => {
    console.error("上传失败", error, file, fileList);
    upload.isUploading = false;
    proxy.$modal.msgError("文件上传失败");
  },
  // 文件上传进度回调
  onProgress: (event, file, fileList) => {
    console.log("上传中...", event.percent);
  },
});
const {searchForm, form, rules} = toRefs(data);
const addNewContact = () => {
  formYYs.value.contactList.push({
    contactPerson: "",
    contactPhone: "",
  });
};

const removeContact = index => {
  if (formYYs.value.contactList.length > 1) {
    formYYs.value.contactList.splice(index, 1);
  }
};
// 查询列表
/** 搜索按钮操作 */
const handleQuery = () => {
  page.current = 1
  getList()
}
const pagination = ({ current, limit }) => {
  page.current = current;
  page.size = limit;
  getList()
}
  page.current = 1;
  getList();
};
const pagination = obj => {
  page.current = obj.page;
  page.size = obj.limit;
  getList();
};
const getList = () => {
  tableLoading.value = true
  tableLoading.value = true;
  listCustomer({...searchForm.value, ...page}).then(res => {
    tableLoading.value = false
    tableData.value = res.rows
    total.value = res.total
  })
}
    tableLoading.value = false;
    tableData.value = res.records;
    page.total = res.total;
  });
};
// 表格选择数据
const handleSelectionChange = (selection) => {
  selectedRows.value = selection
const handleSelectionChange = selection => {
  selectedRows.value = selection;
};

/** 提交上传文件 */
function submitFileForm() {
  upload.isUploading = true;
  proxy.$refs["uploadRef"].submit();
}

/** 导入按钮操作 */
function handleImport() {
  upload.title = "客户导入";
  upload.open = true;
}

/** 下载模板 */
function importTemplate() {
  proxy.download("/basic/customer/downloadTemplate", {}, "客户导入模板.xlsx");
}

// 打开弹框
const openForm = (type, row) => {
  operationType.value = type
  form.value = {}
  operationType.value = type;
  form.value = {};
  form.value.maintainer = userStore.nickName;
  formYYs.value.contactList = [
    {
      contactPerson: "",
      contactPhone: "",
    },
  ];
  form.value.maintenanceTime = getCurrentDate();
  userListNoPage().then(res => {
    userList.value = res.data
  })
  if (type === 'edit') {
    userList.value = res.data;
  });
  if (type === "edit") {
    getCustomer(row.id).then(res => {
      form.value = {...res.data}
    })
      form.value = {...res.data};
      formYYs.value.contactList = res.data.contactPerson
          .split(",")
          .map((item, index) => {
            return {
              contactPerson: item,
              contactPhone: res.data.contactPhone.split(",")[index],
            };
          });
    });
  }
  dialogFormVisible.value = true
}
  dialogFormVisible.value = true;
};
// 提交表单
const submitForm = () => {
  proxy.$refs["formRef"].validate(valid => {
    if (valid) {
      if (operationType.value === "edit") {
        submitEdit()
        submitEdit();
      } else {
        submitAdd()
        submitAdd();
      }
    }
  })
}
  });
};
// 提交新增
const submitAdd = () => {
  if (formYYs.value.contactList.length < 1) {
    return proxy.$modal.msgWarning("请至少添加一个联系人");
  }
  form.value.contactPerson = formYYs.value.contactList
      .map(item => item.contactPerson)
      .join(",");
  form.value.contactPhone = formYYs.value.contactList
      .map(item => item.contactPhone)
      .join(",");
  addCustomer(form.value).then(res => {
    proxy.$modal.msgSuccess("提交成功")
    closeDia()
    getList()
  })
}
    proxy.$modal.msgSuccess("提交成功");
    closeDia();
    getList();
  });
};
// 提交修改
const submitEdit = () => {
  form.value.contactPerson = formYYs.value.contactList
      .map(item => item.contactPerson)
      .join(",");
  form.value.contactPhone = formYYs.value.contactList
      .map(item => item.contactPhone)
      .join(",");
  updateCustomer(form.value).then(res => {
    proxy.$modal.msgSuccess("提交成功")
    closeDia()
    getList()
  })
}
    proxy.$modal.msgSuccess("提交成功");
    closeDia();
    getList();
  });
};
// 关闭弹框
const closeDia = () => {
  proxy.resetForm("formRef")
  dialogFormVisible.value = false
}
  proxy.resetForm("formRef");
  dialogFormVisible.value = false;
};

const openTransferDialog = row => {
  userListNoPage().then(res => {
    userList.value = res.data;
  });
  transferForm.id = row.id;
  transferForm.createUser = row.createUser;
  transferDialogVisible.value = true;
};
const closeTransferDialog = () => {
  proxy.resetForm("transferFormRef");
  transferDialogVisible.value = false;
};
const submitTransfer = () => {
  proxy.$refs["transferFormRef"].validate(valid => {
    if (!valid) {
      return;
    }
    transferCustomer(transferForm).then(res => {
      proxy.$modal.msgSuccess("交接成功");
      getList();
    })
    closeTransferDialog();
  });
};
// 导出
const handleOut = () => {
  ElMessageBox.confirm(
      '选中的内容将被导出，是否确认导出？',
      '导出', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    proxy.download("/basic/customer/export", {}, '客户档案.xlsx')
  }).catch(() => {
    proxy.$modal.msg("已取消")
  ElMessageBox.confirm("选中的内容将被导出，是否确认导出？", "导出", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
}
      .then(() => {
        proxy.download("/basic/customer/export", {}, "客户档案.xlsx");
      })
      .catch(() => {
        proxy.$modal.msg("已取消");
      });
};

// 导出跟进记录
const handleOutFollowUpList = () => {
  ElMessageBox.confirm("选中的内容将被导出，是否确认导出？", "导出", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
      .then(() => {
        proxy.download("/basic/customer/exportFollowUpList", {}, "客户跟进记录.xlsx");
      })
      .catch(() => {
        proxy.$modal.msg("已取消");
      });
};
// 删除
const handleDelete = () => {
  let ids = []
  let ids = [];
  if (selectedRows.value.length > 0) {
    // 检查是否有他人维护的数据
    const unauthorizedData = selectedRows.value.filter(
        item => item.maintainer !== userStore.nickName
    );
    if (unauthorizedData.length > 0) {
      proxy.$modal.msgWarning("不可删除他人维护的数据");
      return;
    }
    ids = selectedRows.value.map(item => item.id);
  } else {
    proxy.$modal.msgWarning('请选择数据')
    return
    proxy.$modal.msgWarning("请选择数据");
    return;
  }
  ElMessageBox.confirm(
      '选中的内容将被删除，是否确认删除？',
      '导出', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    delCustomer(ids).then(res => {
      proxy.$modal.msgSuccess("删除成功")
    })
    getList()
  }).catch(() => {
    proxy.$modal.msg("已取消")
  ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "删除提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
      .then(() => {
        tableLoading.value = true;
        delCustomer(ids)
            .then(res => {
              proxy.$modal.msgSuccess("删除成功");
              getList();
            })
            .finally(() => {
              tableLoading.value = false;
            });
      })
      .catch(() => {
        proxy.$modal.msg("已取消");
      });
};

// 打开回访提醒弹窗
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();
        });
      }
    }
  });
};

// 打开详情弹窗
const openDetailDialog = row => {
  // 调用getCustomer接口获取客户详情
  getCustomer(row.id).then(res => {
    // 填充客户基本信息
    Object.assign(detailForm, res.data);

    // 获取洽谈进度记录
    negotiationRecords.value = res.data.followUpList || [];

    detailDialogVisible.value = true;
  });
};

// 关闭详情弹窗
const closeDetailDialog = () => {
  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("已取消删除");
      });
};

// 获取当前日期并格式化为 YYYY-MM-DD
function getCurrentDate() {
  const today = new Date();
  const year = today.getFullYear();
  const month = String(today.getMonth() + 1).padStart(2, "0"); // 月份从0开始
  const day = String(today.getDate()).padStart(2, "0");
  return `${year}-${month}-${day}`;
}
getList()


onMounted(() => {
  getList();
});
</script>

<style scoped lang="scss">
.detail-section {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

</style>
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 15px 0;
  color: #333;
}

.info-display {
  background-color: #fff;
  padding: 15px;
  border-radius: 4px;
}

.info-item {
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
}

.info-label {
  width: 120px;
  font-weight: 500;
  color: #606266;
  margin-right: 10px;
}

.info-value {
  flex: 1;
  color: #303133;
  word-break: break-word;
}

.no-records {
  text-align: center;
  padding: 30px;
  color: #999;
  font-size: 14px;
}

.attachment-section {
  .upload-area {
    margin-bottom: 20px;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 4px;
    border: 1px dashed #d9d9d9;

    .el-upload__tip {
      margin-top: 10px;
      color: #909399;
    }
  }

  .attachment-list {
    h4 {
      margin: 0 0 10px 0;
      font-size: 14px;
      color: #606266;
    }
  }

  .no-attachment {
    text-align: center;
    padding: 40px;
    color: #909399;
    font-size: 14px;
  }
}
</style>