feat(客户管理): 新增地区列表查询功能并重构客户档案页面布局

yyb

5 天以前 dfe4ae8545ded79d19ce1130501dff0f4d61364f

 src/views/basicData/customerFile/index.vue

@@ -1,548 +1,1275 @@
<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 class="customer-split">
      <div class="left-panel">
        <div class="left-header">
          <div class="left-title">地区</div>
          <el-button type="primary"
                     size="small"
                     @click="openAddRegionDialog">新增地区</el-button>
        </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: selectedRegion === '' }"
                 @click="selectRegion('')">全部</div>
            <div v-for="item in filteredRegions"
                 :key="item.__key"
                 class="region-item"
                 :class="{ active: selectedRegion === item.regionName }"
                 @click="selectRegion(item.regionName)"
                 :title="item.regionName">{{ item.regionName }}</div>
            <div v-if="filteredRegions.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="dialogFormVisible"
      :title="operationType === 'add' ? '新增客户信息' : '编辑客户信息'"
      width="70%"
      @close="closeDia"
    >
      <el-form
        :model="form"
        label-width="140px"
        label-position="top"
        :rules="rules"
        ref="formRef"
      >

    <el-dialog v-model="addRegionDialogVisible"
               title="新增地区"
               width="420px"
               @close="closeAddRegionDialog">
      <el-form :model="addRegionForm"
               label-width="90px">
        <el-form-item label="地区名称">
          <el-input v-model="addRegionForm.regionName"
                    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="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 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 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 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 label="客户地区："
                          prop="regions">
              <el-input v-model="form.regions"
                        placeholder="请输入"
                        clearable />
            </el-form-item>
          </el-col>

        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <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>
        <el-row :gutter="30" v-for="(contact, index) in formYYs.contactList" :key="index">
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="联系人：" prop="contactPerson">
              <el-input v-model="contact.contactPerson" placeholder="请输入" clearable  />
            <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="contactPhone">
            <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-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-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-button @click="addNewContact"
                   style="margin-bottom: 10px;">+ 新增联系人</el-button>
        <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-row>
        <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-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
                disabled
              />
            <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 type="primary"
                     @click="submitForm">确认</el-button>
          <el-button @click="closeDia">取消</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"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
    <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
            >
            <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 type="primary"
                     @click="submitFileForm">确 定</el-button>
          <el-button @click="upload.open = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <!--
    回访提醒 / 洽谈进度功能（入口及弹窗）已按需求注释。
    如需恢复：放开操作列入口 + 取消本段注释 + 恢复 script 中相关变量/方法/接口引入。
    -->
    <!-- 客户详情对话框 -->
    <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>
      <!--
      洽谈进度记录（含附件/修改/删除）已按需求整体注释。
      如需恢复：取消本段注释，并恢复 script 中相关变量/方法/接口引入。
      -->
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDetailDialog">关闭</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 { userListNoPage } from "@/api/system/user.js";
import useUserStore from "@/store/modules/user";
import { getToken } from "@/utils/auth.js";
const { proxy } = getCurrentInstance();
const userStore = useUserStore();
  import { onMounted, ref, reactive, getCurrentInstance, toRefs, computed } from "vue";
  import { Search } from "@element-plus/icons-vue";
  import {
    addCustomer,
    delCustomer,
    getCustomer,
    listCustomer,
    listCustomerRegions,
    updateCustomer,
    // addCustomerFollow,
    // updateCustomerFollow,
    // delCustomerFollow,
    // addReturnVisit,
    // getReturnVisit,
  } from "@/api/basicData/customerFile.js";
  import { ElMessageBox } from "element-plus";
  import { userListNoPage } from "@/api/system/user.js";
  import useUserStore from "@/store/modules/user";
  import { getToken } from "@/utils/auth.js";
  const { proxy } = getCurrentInstance();
  const userStore = useUserStore();

const tableColumn = ref([
  {
    label: "客户名称",
    prop: "customerName",
    width: 220,
  },
  {
    label: "纳税人识别码",
    prop: "taxpayerIdentificationNumber",
    width: 220,
  },
  {
    label: "地址及联系方式",
    prop: "addressPhone",
    width: 250,
  },
  {
    label: "联系人",
    prop: "contactPerson",
  },
  {
    label: "联系电话",
    prop: "contactPhone",
    width:150
  },
  {
    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",
    operation: [
      {
        name: "编辑",
        type: "text",
        clickFun: (row) => {
          openForm("edit", row);
        },
      },
    ],
  },
]);
const tableData = ref([]);
const selectedRows = ref([]);
const userList = ref([]);
const tableLoading = ref(false);
const page = reactive({
  current: 1,
  size: 100,
  total: 0,
});
const total = ref(0);
  // 回访提醒/洽谈进度相关（已按需求整体注释）
  // 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 operationType = ref("");
const dialogFormVisible = ref(false);
const formYYs = ref({    // 其他字段...
  contactList: [
    {
      contactPerson: "",
      contactPhone: ""
    }
  ]
});
const data = reactive({
  searchForm: {
  // 详情相关
  const detailDialogVisible = ref(false);
  const detailForm = reactive({
    customerName: "",
  },
  form: {
    customerName: "",
    customerType: "",
    taxpayerIdentificationNumber: "",
    companyAddress: "",
    companyPhone: "",
    companyAddress: "",
    basicBankAccount: "",
    bankAccount: "",
    bankCode: "",
    contactPerson: "",
    contactPhone: "",
    maintainer: "",
    maintenanceTime: "",
    basicBankAccount: "",
    bankAccount: "",
    bankCode: "",
  },
  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" },
    ],
    basicBankAccount: [{ required: true, message: "请输入", trigger: "blur" }],
    bankAccount: [{ required: true, message: "请输入", trigger: "blur" }],
    bankCode: [{ required: true, message: "请输入", trigger: "blur" }],
  },
});
const upload = reactive({
  // 是否显示弹出层（客户导入）
  open: false,
  // 弹出层标题（客户导入）
  title: "",
  // 是否禁用上传
  isUploading: false,
  // 设置上传的请求头部
  headers: { Authorization: "Bearer " + getToken() },
  // 上传的地址
  url: import.meta.env.VITE_APP_BASE_API + "/basic/customer/importData",
});
const { searchForm, form, rules } = toRefs(data);
const addNewContact = () => {
  formYYs.value.contactList.push({
    contactPerson: "",
    contactPhone: ""
  });
};
  const negotiationRecords = ref([]);

const removeContact = (index) => {
  if (formYYs.value.contactList.length > 1) {
    formYYs.value.contactList.splice(index, 1);
  }
};
// 查询列表
/** 搜索按钮操作 */
const handleQuery = () => {
  page.current = 1;
  getList();
};
const pagination = (obj) => {
  page.current = obj.page;
  page.size = obj.limit;
  getList();
};
const getList = () => {
  tableLoading.value = true;
  listCustomer({ ...searchForm.value, ...page }).then((res) => {
    tableLoading.value = false;
    tableData.value = res.records;
    page.total = res.total;
  });
};
// 表格选择数据
const handleSelectionChange = (selection) => {
  selectedRows.value = selection;
};
/** 提交上传文件 */
function submitFileForm() {
  proxy.$refs["uploadRef"].submit();
}
/** 导入按钮操作 */
function handleImport() {
  upload.title = "客户导入";
  upload.open = true;
}
// 打开弹框
const openForm = (type, row) => {
  operationType.value = type;
  form.value = {};
  form.value.maintainer = userStore.nickName;
  formYYs.value.contactList = [
  // 附件相关（随洽谈进度整体注释）
  // const attachmentDialogVisible = ref(false);
  // const attachmentUploadRef = ref();
  // const currentAttachmentList = ref([]);
  // const currentFollowRecord = ref({});
  // const attachmentUploadHeaders = { Authorization: "Bearer " + getToken() };
  // const getAttachmentUploadUrl = () => {};

  const tableColumn = ref([
    {
      label: "客户分类",
      prop: "customerType",
      width: 120,
    },
    {
      label: "客户名称",
      prop: "customerName",
      width: 220,
    },
    {
      label: "客户地区",
      prop: "regions",
      width: 120,
    },
    {
      label: "纳税人识别码",
      prop: "taxpayerIdentificationNumber",
      width: 220,
    },
    {
      label: "地址及联系方式",
      prop: "addressPhone",
      width: 250,
    },
    {
      label: "联系人",
      prop: "contactPerson",
    },
    {
      label: "联系电话",
      prop: "contactPhone",
      width: 150,
    },
    {
      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",
      fixed: "right",
      width: 120,
      operation: [
        {
          name: "编辑",
          type: "text",
          clickFun: row => {
            openForm("edit", row);
          },
        },
        // {
        //   name: "添加洽谈进度",
        //   type: "text",
        //   clickFun: row => {
        //     openNegotiationDialog(row);
        //   },
        // },
        // {
        //   name: "回访提醒",
        //   type: "text",
        //   clickFun: row => {
        //     openReminderDialog(row);
        //   },
        // },
            {
               name: "详情",
               type: "text",
               clickFun: row => {
                  openDetailDialog(row);
               },
            },
      ],
    },
  ]);
  const tableData = ref([]);
  const selectedRows = ref([]);
  const userList = ref([]);
  const tableLoading = ref(false);
  const page = reactive({
    current: 1,
    size: 100,
    total: 0,
  });
  const total = ref(0);

  // 用户信息表单弹框数据
  const operationType = ref("");
  const dialogFormVisible = ref(false);
  const formYYs = ref({
    // 其他字段...
    contactList: [
      {
        contactPerson: "",
        contactPhone: "",
      },
    ],
  });
  const data = reactive({
    searchForm: {
      customerName: "",
      customerType: "",
      regions: "",
    },
    form: {
      customerName: "",
      taxpayerIdentificationNumber: "",
      companyAddress: "",
      companyPhone: "",
      contactPerson: "",
      contactPhone: ""
    }
  ];
  form.value.maintenanceTime = getCurrentDate();
  userListNoPage().then((res) => {
    userList.value = res.data;
      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" },
      ],
      basicBankAccount: [{ required: true, message: "请输入", trigger: "blur" }],
      bankAccount: [{ required: true, message: "请输入", trigger: "blur" }],
      bankCode: [{ required: true, message: "请输入", trigger: "blur" }],
      customerType: [{ required: true, message: "请选择", trigger: "change" }],
    },
  });
  if (type === "edit") {
    getCustomer(row.id).then((res) => {
      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;
};
// 提交表单
const submitForm = () => {
  proxy.$refs["formRef"].validate((valid) => {
    if (valid) {
      if (operationType.value === "edit") {
        submitEdit();
      } else {
        submitAdd();
  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 regionsLoading = ref(false);
  const regions = ref([]);
  const regionKeyword = ref("");
  const selectedRegion = ref(""); // '' 表示全部
  const addRegionDialogVisible = ref(false);
  const addRegionForm = reactive({ regionName: "" });

  const normalizeRegionItem = (raw, index) => {
    if (typeof raw === "string") {
      return { regionName: raw, __key: `s_${raw}_${index}`, __local: false };
    }
    const name = raw?.regionName ?? raw?.regions ?? raw?.name ?? raw?.label ?? "";
    return { ...raw, regionName: name, __key: raw?.id ?? `o_${name}_${index}` };
  };

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

  const filteredRegions = computed(() => {
    const kw = (regionKeyword.value || "").trim();
    if (!kw) return regions.value;
    return regions.value.filter(r => (r.regionName || "").includes(kw));
  });
};
// 提交新增
const submitAdd = () => {
  if(formYYs.value.contactList.length < 1){
    return proxy.$modal.msgWarning("请至少添加一个联系人");

  const selectRegion = regionName => {
    selectedRegion.value = regionName ?? "";
    searchForm.value.regions = selectedRegion.value || "";
    handleQuery();
  };

  const openAddRegionDialog = () => {
    addRegionForm.regionName = "";
    addRegionDialogVisible.value = true;
  };
  const closeAddRegionDialog = () => {
    addRegionDialogVisible.value = false;
    addRegionForm.regionName = "";
  };
  const submitAddRegion = () => {
    const name = (addRegionForm.regionName || "").trim();
    if (!name) return proxy.$modal.msgWarning("请输入地区名称");
    const exists = regions.value.some(r => r.regionName === name);
    if (!exists) {
      regions.value.unshift({
        regionName: name,
        __key: `local_${Date.now()}`,
        __local: true,
      });
    }
    proxy.$modal.msgWarning("地区新增接口未提供，已本地新增（刷新后失效）");
    closeAddRegionDialog();
  };
  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 = obj => {
    page.current = obj.page;
    page.size = obj.limit;
    getList();
  };
  const getList = () => {
    tableLoading.value = true;
    listCustomer({ ...searchForm.value, ...page }).then(res => {
      tableLoading.value = false;
      tableData.value = res.records;
      page.total = res.total;
    });
  };
  // 表格选择数据
  const handleSelectionChange = selection => {
    selectedRows.value = selection;
  };
  /** 提交上传文件 */
  function submitFileForm() {
    upload.isUploading = true;
    proxy.$refs["uploadRef"].submit();
  }
  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();
  /** 导入按钮操作 */
  function handleImport() {
    upload.title = "客户导入";
    upload.open = true;
  }
  /** 下载模板 */
  function importTemplate() {
    proxy.download("/basic/customer/downloadTemplate", {}, "客户导入模板.xlsx");
  }
  // 打开弹框
  const openForm = (type, row) => {
    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") {
      getCustomer(row.id).then(res => {
        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;
  };
  // 提交表单
  const submitForm = () => {
    proxy.$refs["formRef"].validate(valid => {
      if (valid) {
        if (operationType.value === "edit") {
          submitEdit();
        } else {
          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();
    });
  };
  // 提交修改
  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();
    });
  };
  // 关闭弹框
  const closeDia = () => {
    proxy.resetForm("formRef");
    dialogFormVisible.value = false;
  };
  // 导出
  const handleOut = () => {
    ElMessageBox.confirm("选中的内容将被导出，是否确认导出？", "导出", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        proxy.download("/basic/customer/export", {}, "客户档案.xlsx");
      })
      .catch(() => {
        proxy.$modal.msg("已取消");
      });
  };
  // 删除
  const handleDelete = () => {
    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;
    }
    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("已取消");
      });
  };

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

  // 打开详情弹窗
  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;
  };

  /*
   * 洽谈进度记录 & 附件管理相关（已随入口整体注释）
   * - editNegotiationRecord / deleteNegotiationRecord
   * - openAttachmentDialog / closeAttachmentDialog / ...附件相关方法
   */

  // 获取当前日期并格式化为 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}`;
  }

  onMounted(() => {
    fetchRegions();
    getList();
  });
};
// 提交修改
const submitEdit = () => {
  updateCustomer(form.value).then((res) => {
    proxy.$modal.msgSuccess("提交成功");
    closeDia();
    getList();
  });
};
// 关闭弹框
const closeDia = () => {
  proxy.resetForm("formRef");
  dialogFormVisible.value = false;
};
// 导出
const handleOut = () => {
  ElMessageBox.confirm("选中的内容将被导出，是否确认导出？", "导出", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      proxy.download("/basic/customer/export", {}, "客户档案.xlsx");
    })
    .catch(() => {
      proxy.$modal.msg("已取消");
    });
};
// 删除
const handleDelete = () => {
  let ids = [];
  if (selectedRows.value.length > 0) {
    ids = selectedRows.value.map((item) => item.id);
  } else {
    proxy.$modal.msgWarning("请选择数据");
    return;
  }
  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("已取消");
    });
};

// 获取当前日期并格式化为 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();
</script>

<style scoped lang="scss"></style>
<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-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;
  }

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

  .detail-section {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 4px;
  }

  .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>