Merge remote-tracking branch 'origin/dev' into dev

gaoluyang

4 天以前 00ef76a2e286e338fa3c648ce183e3533ce006ad

 src/views/basicInformation/index.vue

@@ -1,507 +1,760 @@
<template>
  <div class="app-container">
      <el-form :inline="true" :model="queryParams" class="search-form">
        <el-form-item label="搜索">
          <el-input
            v-model="queryParams.searchText"
            placeholder="请输入关键词"
            clearable
            :style="{ width: '100%' }"
          />
        </el-form-item>
        <el-form-item label="供应商名称">
          <el-input
            v-model="queryParams.supplierName"
            placeholder="请输入"
            clearable
            :style="{ width: '100%' }"
          />
        </el-form-item>
        <el-form-item label="统一人识别号">
          <el-input
            v-model="queryParams.identifyNumber"
            placeholder="请输入"
            clearable
            :style="{ width: '100%' }"
          />
        </el-form-item>
        <el-form-item label="经营地址">
          <el-input
            v-model="queryParams.address"
            placeholder="请输入"
            clearable
            :style="{ width: '100%' }"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
  <div> <el-form :inline="true" :model="queryParams" class="search-form">
      <el-form-item label="搜索" v-if="shouldShowSearch">
        <el-input v-model="queryParams.searchAll" :placeholder="searchPlaceholder" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-card>
      <!-- 标签页 -->
      <el-tabs
        v-model="activeTab"
        class="info-tabs"
        @tab-click="handleTabClick"
      >
        <el-tab-pane
          v-for="tab in tabs"
          :key="tab.name"
          :label="tab.label"
          :name="tab.name"
        />
      <el-tabs v-model="activeTab" class="info-tabs" @tab-click="handleTabClick">
        <el-tab-pane v-for="tab in tabs" :key="tab.name" :label="tab.label" :name="tab.name" />
      </el-tabs>

      <!-- 操作按钮区 -->
      <el-row :gutter="24" class="table-toolbar">
        <el-button type="primary" :icon="Plus" @click="handleAdd"
          >新建</el-button
        >
        <el-button type="primary" :icon="Plus" @click="handleAdd">新建</el-button>
        <el-button type="danger" :icon="Delete" @click="handleDelete">删除</el-button>
        <el-button type="info" :icon="Download" @click="handleExport">导出</el-button>
      </el-row> 
      <!-- 表格组件 -->
        <el-button type="info" :icon="Download" @click="handleExport" v-show="canExport">导出</el-button>
      </el-row> <!-- 表格组件 -->
      <div>
        <data-table
          :loading="loading"
          :table-data="tableData"
          :columns="columns"
          @selection-change="handleSelectionChange"
          @edit="handleEdit"
          @delete="handleDeleteSuccess"
          :show-selection="true"
          :border="true"
          :maxHeight="440"
        />
        <data-table :loading="loading" :table-data="tableData" :columns="columns"
          @selection-change="handleSelectionChange" @edit="handleEdit" :show-selection="true" :border="true">          <!-- 字段名称列的自定义插槽 - 显示为标签 -->
          <template v-if="tabName === 'coalQualityMaintenance'" #coalFields="{ row }">
            <template v-if="typeof row.coalFields === 'string' && row.coalFields.includes(',')">
              <el-tag v-for="(field, index) in row.coalFields.split(',')" :key="index" type="primary" size="small"
                style="margin-right: 4px; margin-bottom: 2px;">
                {{ getFieldDisplayName(field.trim()) }}
              </el-tag>
            </template>
            <template v-else>
              <el-tag type="primary" size="small">
                {{ getFieldDisplayName(row.coalFields) || '--' }}
              </el-tag>
            </template>
          </template>
        </data-table>
      </div>
      <pagination
        v-if="total>0"
        :page-num="pageNum"
        :page-size="pageSize"
        :total="total"
        @pagination="handleQuery"
        :layout="'total, prev, pager, next, jumper'"
      />
      <Supplier
        v-if="tabName === 'supplier'"
        v-model:supplierDialogFormVisible="dialogFormVisible"
        :form="form"
        :title="title"
        @submit="handleSubmit"
        @beforeClose="handleBeforeClose"
        @update:dialogFormVisible="handleDialogFormVisible"
        :addOrEdit="addOrEdit"
      />
      <Customer
        v-if="tabName === 'customer'"
        v-model:customerDialogFormVisible="dialogFormVisible"
        :form="form"
        :title="title"
        @submit="handleSubmit"
        @beforeClose="handleBeforeClose"
      />
      <Coal
        v-if="tabName === 'coal'"
        v-model:coalDialogFormVisible="dialogFormVisible"
        :form="form"
        :title="title"
        @submit="handleSubmit"
      />
      <pagination v-if="total > 0" :page="pageNum" :limit="pageSizes" :total="total" @pagination="handPagination"
        :layout="'total, prev, pager, next, jumper'" />
      <Supplier v-if="tabName === 'supplier'" v-model:copyForm="copyForm"
        v-model:supplierDialogFormVisible="dialogFormVisible" :form="form" :title="title" @submit="handleSubmit"
        @beforeClose="handleBeforeClose" @update:dialogFormVisible="handleDialogFormVisible" :addOrEdit="addOrEdit" />
      <Customer v-if="tabName === 'customer'" v-model:copyForm="copyForm"
        v-model:customerDialogFormVisible="dialogFormVisible" :form="form" :title="title" @submit="handleSubmit"
        :addOrEdit="addOrEdit" @beforeClose="handleBeforeClose" />
      <Coal v-if="tabName === 'coal'" v-model:copyForm="copyForm" v-model:coalDialogFormVisible="dialogFormVisible"
        :form="form" :title="title" :addOrEdit="addOrEdit" @submit="handleSubmit" />
      <coalQualityMaintenance v-if="tabName === 'coalQualityMaintenance'" v-model:copyForm="copyForm"
        v-model:coalQualityMaintenanceDialogFormVisible="dialogFormVisible" :form="form" :title="title"
        :addOrEdit="addOrEdit" @submit="handleSubmit" />
      <coalMeiZhiZiDuanWeiHu v-if="tabName === 'coalMeiZhiZiDuanWeiHu'" v-model:copyForm="copyForm"
        v-model:coalMaintenanceFieldDialogVisible="dialogFormVisible" :form="form" :title="title" :addOrEdit="addOrEdit"
        @submit="handleSubmit" />
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
// ===== 核心依赖导入 =====
import { ref, reactive, onMounted, computed, getCurrentInstance } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Plus, Edit, Delete, Download } from "@element-plus/icons-vue";

// ===== 组件导入 =====
import DataTable from "@/components/Table/ETable.vue";
import Pagination from "@/components/Pagination";
import Supplier from "./mould/supplier.vue";
import Customer from "./mould/customer.vue";
import Coal from "./mould/coal.vue";
const { proxy } = getCurrentInstance()
// 弹窗
const customerDialogFormVisible = ref(false);
const coalDialogFormVisible = ref(false);
const supplierDialogFormVisible = ref(false);
import coalQualityMaintenance from "./mould/coalQualityMaintenance.vue";
import coalMeiZhiZiDuanWeiHu from "./mould/coalMeiZhiZiDuanWeiHu.vue";

// ===== API 服务导入 =====
import { getSupply, delSupply } from "@/api/basicInformation/supplier.js";
import { getCoalInfo, delCoalInfo } from "@/api/basicInformation/coal.js";
import { testUserList } from "@/api/tool/publicInterface.js";
import { getAreaOptions } from "@/api/system/area.js";
import { getCustomerList, delCustomer } from "@/api/basicInformation/customer.js";
import { coalField, deleteCoalField } from "@/api/basicInformation/coalFieldMaintenance.js";
import { getCoalFieldList, getCoalPlanList } from "@/api/basicInformation/coalQualityMaintenance";

const { proxy } = getCurrentInstance();

// ===== 响应式状态管理 =====

// 弹窗控制状态
const dialogFormVisible = ref(false);
const form = ref({});
const title = ref("");
const copyForm = ref({});
// 当前标签
const addOrEdit = ref("add");

// 数据缓存映射
const userList = ref([]);
const userMap = ref({}); // 用户ID -> 用户名映射表
const addressMap = ref({}); // 地址ID -> 地址信息映射表
const coalFieldList = ref([]); // 煤质字段列表

// 页面状态控制
const tabName = ref("supplier");
// 状态变量
const loading = ref(false);
const total = ref(0);
const pageNum = ref(1);
const pageSize = ref(10);
const activeTab = ref("supplier");

// 分页状态管理
const pageNum = ref(1);
const pageSizes = ref(10);
const total = ref(0);

// 表格状态管理
const selectedRows = ref([]);
// 查询参数
const queryParams = reactive({
  searchText: "",
  supplierName: "",
  identifyNumber: "",
  address: "",
});
onMounted(() => {
  handleTabClick({ props: { name: "supplier" } });
});
const tableData = ref([]);
const columns = ref();
// 标签页数据

// 查询参数
const queryParams = reactive({});

// 地址选择数据
const addressSelectOptions = ref([]);

// ===== 配置常量 =====

// 标签页配置
const tabs = reactive([
  { name: "supplier", label: "供应商信息" },
  { name: "customer", label: "客户信息" },
  { name: "coal", label: "煤种信息" },
  { name: "coalQualityMaintenance", label: "煤质方案" },
  { name: "coalMeiZhiZiDuanWeiHu", label: "煤质字段" }
]);
// 是否编辑
const addOrEdit = ref("add");
// 表格数据
const tableData = ref([]);
// 方法定义
const handleQuery = () => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 500);

// ===== 工具函数 =====

/**
 * 获取地址选择数据并构建映射表
 * @description 异步获取地址数据，构建快速查找的映射表
 */
const fetchAreaOptions = async () => {
  try {
    addressSelectOptions.value = [];
    const res = await getAreaOptions();
    if (res.code === 200) {
      addressSelectOptions.value = res.data;
      buildAddressMap(res.data);
    }
  } catch (error) {
    console.error('获取地址选项失败:', error);
  }
};
// supplier 供应商数据
const supplierColumns = reactive([
  { prop: "supplierName", label: "供应商名称", minWidth: 200 },
  { prop: "identifyNumber", label: "统一人识别号", minWidth: 120 },
  { prop: "address", label: "经营地址", minWidth: 150 },
  { prop: "bank", label: "开户行", minWidth: 120 },
  { prop: "bankAccount", label: "银行账号", minWidth: 150 },
  { prop: "contacts", label: "联系人", minWidth: 100 },
  { prop: "contactAddress", label: "联系地址", minWidth: 150 },
  { prop: "maintainer", label: "维护人", minWidth: 100 },
  { prop: "maintainDate", label: "维护日期", minWidth: 100 },

/**
 * 构建地址映射表
 * @param {Array} areaData - 地址数据
 * @description 递归构建地址映射表，支持多级地址查找
 */
const buildAddressMap = (areaData) => {
  const buildMap = (list, pathList = []) => {
    list.forEach(item => {
      const currentPath = [...pathList, item.label];
      addressMap.value[item.id] = {
        name: item.label,
        fullPath: currentPath.join(' / ')
      };
      if (item.children && item.children.length > 0) {
        buildMap(item.children, currentPath);
      }
    });
  };
  buildMap(areaData);
};

/**
 * 格式化地址数组为显示字符串
 * @param {Array} addressIds - 地址ID数组
 * @returns {string} 格式化后的地址字符串
 * @description 将地址ID数组转换为可读的地址字符串
 */
const formatAddressArray = (addressIds) => {
  if (!addressMap.value || Object.keys(addressMap.value).length === 0 || 
      !addressIds || !Array.isArray(addressIds) || addressIds.length === 0 || 
      addressIds.every(id => !id)) {
    return '--';
  }
  
  const addressNames = addressIds.map(id => addressMap.value[id]?.name || '--');
  
  if (addressNames.every(name => name === '--')) {
    return '--';
  }
  
  return addressNames.filter(name => name !== '--').join(' / ');
};

/**
 * 获取用户列表数据并构建映射表
 * @description 获取用户数据并构建ID到用户名的映射关系
 */
const getUserList = async () => {
  try {
    const res = await testUserList();
    if (res && res.data) {
      userList.value = res.data;
      userList.value.forEach(user => {
        userMap.value[user.userId] = user.username;
      });
    }
  } catch (error) {
    console.error('获取用户列表失败:', error);
  }
};

/**
 * 获取煤质字段数据
 * @description 获取煤质字段列表，用于字段名称匹配
 */
const coalFieldData = async () => {
  try {
    const { data, code } = await getCoalFieldList();
    if (code === 200) {
      coalFieldList.value = data;
    }
  } catch (error) {
    console.error('获取煤质字段数据失败:', error);
  }
};

/**
 * 根据字段ID获取字段显示名称
 * @param {string|number} fieldId - 字段ID
 * @returns {string} 字段显示名称
 * @description 通过字段ID匹配对应的字段名称
 */
const getFieldDisplayName = (fieldId) => {
  if (!fieldId) return '--';
  
  const numId = parseInt(fieldId);
  const matchedField = coalFieldList.value.find(item => item.id === numId);
  
  return matchedField ? matchedField.fieldName : numId;
};

// ===== 计算属性 =====

/**
 * 当前标签页是否支持导出功能
 */
const canExport = computed(() => {
  return ['supplier', 'customer'].includes(tabName.value);
});

/**
 * 搜索框占位符文本
 */
const searchPlaceholder = computed(() => {
  const placeholderMap = {
    supplier: "供应商/识别码/详细地址",
    customer: "供应商/识别码/详细地址", 
    coal: "请输入搜索信息",
    coalQualityMaintenance: "请输入搜索信息",
    coalMeiZhiZiDuanWeiHu: "请输入搜索信息"
  };
  return placeholderMap[tabName.value] || "请输入搜索信息";
});

/**
 * 是否显示搜索框
 */
const shouldShowSearch = computed(() => {
  return ['supplier', 'customer', 'coal', 'coalQualityMaintenance','coalMeiZhiZiDuanWeiHu'].includes(tabName.value);
});

/**
 * 当前选中行数量
 */
const selectedCount = computed(() => selectedRows.value.length);

/**
 * 是否有选中的行
 */
const hasSelectedRows = computed(() => selectedCount.value > 0);

// ===== 表格列配置 =====

/**
 * 供应商表格列配置
 */
const supplierColumns = ref([
  { prop: "supplierName", label: "供应商名称", minWidth: 100 },
  { prop: "taxpayerId", label: "统一人识别号", minWidth: 170 },
  {
    prop: "bids",
    label: "经营地址",
    minWidth: 150,
    showOverflowTooltip: true,
    formatter: (row) => {
      const addressIds = [row.bprovinceId, row.bcityId, row.bdistrictId];
      return formatAddressArray(addressIds);
    }
  },
  { prop: "businessAddress", label: "经营详细地址", minWidth: 150 },
  { prop: "bankAccount", label: "开户行", minWidth: 120 },
  { prop: "bankName", label: "银行账号", minWidth: 150 },
  { prop: "contactPerson", label: "联系人", minWidth: 100 },
  {
    prop: "cids",
    label: "联系人地址",
    minWidth: 150,
    showOverflowTooltip: true,
    formatter: (row) => {
      const addressIds = [row.cprovinceId, row.ccityId, row.cdistrictId];
      return formatAddressArray(addressIds);
    }
  },
  { prop: "contactAddress", label: "联系人详细地址", minWidth: 120 },
  { prop: "createTime", label: "维护日期", minWidth: 120 },
]);
// customer 客户数据
const customerColumns = reactive([
  { prop: "customerName", label: "客户名称", minWidth: 200 },
  { prop: "identifyNumber", label: "统一人识别号", minWidth: 120 },
  { prop: "address", label: "经营地址", minWidth: 150 },
  { prop: "bank", label: "开户行", minWidth: 120 },

/**
 * 客户表格列配置
 */
const customerColumns = ref([
  { prop: "customerName", label: "客户名称", minWidth: 100 },
  { prop: "taxpayerId", label: "统一人识别号", minWidth: 120 },
  {
    prop: "bids",
    label: "经营地址",
    minWidth: 150,
    showOverflowTooltip: true,
    formatter: (row) => {
      const addressIds = [row.businessProvinceId, row.businessCityId, row.businessDistrictId];
      return formatAddressArray(addressIds);
    }
  },
  { prop: "businessAddress", label: "详细地址", minWidth: 150 },
  { prop: "bankName", label: "开户行", minWidth: 120 },
  { prop: "bankAccount", label: "银行账号", minWidth: 150 },
  { prop: "contacts", label: "联系人", minWidth: 100 },
  { prop: "contactAddress", label: "联系地址", minWidth: 150 },
  { prop: "maintainer", label: "维护人", minWidth: 100 },
  { prop: "maintainDate", label: "维护日期", minWidth: 100 },
  { prop: "contactPerson", label: "联系人", minWidth: 100 },
  { prop: "contactPhone", label: "联系人电话", minWidth: 100 },
  {
    prop: "cids",
    label: "联系人地址",
    minWidth: 150,
    showOverflowTooltip: true,
    formatter: (row) => {
      const addressIds = [row.provinceId, row.cityId, row.districtId];
      return formatAddressArray(addressIds);
    }
  },
  { prop: "contactAddress", label: "联系人详细地址", minWidth: 150 },
  { prop: "updateTime", label: "维护日期", minWidth: 100 },
]);
// coal 煤种数据
const coalColumns = reactive([
  { prop: "coalName", label: "煤种名称", minWidth: 200 },
  { prop: "maintainer", label: "维护人", minWidth: 120 },

/**
 * 煤种表格列配置
 */
const coalColumns = ref([
  { prop: "coal", label: "煤种名称", minWidth: 200 },
  {
    prop: "maintainerId",
    label: "维护人",
    minWidth: 120,
    formatter: (row, column, cellValue) => {
      if (!userMap.value || Object.keys(userMap.value).length === 0) {
        return '--';
      }
      if (cellValue === null || cellValue === undefined || cellValue === '') {
        return '--';
      }
      return userMap.value[cellValue] || '--';
    }
  },
  { prop: "maintenanceDate", label: "维护日期", minWidth: 150 },
]);
// 标签页点击

/**
 * 煤质方案表格列配置
 */
const coalQualityMaintenanceColumns = ref([
  { prop: "plan", label: "方案名称", minWidth: 100 },
  {
    prop: "coalFields",
    label: "字段名称",
    minWidth: 200,
    showOverflowTooltip: true,
    slot: true,
    formatter: (row, column, cellValue) => {
      if (Array.isArray(cellValue)) {
        return cellValue.map(item => item);
      }
      return cellValue || '--';
    }
  },
  { prop: "schemeDesc", label: "字段描述", minWidth: 100 },
]);

/**
 * 煤质字段表格列配置
 */
const coalMeiZhiZiDuanWeiHuColumns = ref([
  { prop: "fieldName", label: "字段名称", minWidth: 200 },
  { prop: "fieldDescription", label: "字段描述", minWidth: 200 },
]);
// ===== 事件处理函数 =====

/**
 * 标签页切换事件处理
 * @param {Object} tab - 标签页对象
 * @description 处理标签页切换，重置表单和状态，加载对应数据
 */
const handleTabClick = (tab) => {
  // 重置表单和状态
  form.value = {};
  getList();
  addOrEdit.value = "add";
  loading.value = true;
  tabName.value = tab.props.name;
  tableData.value = [];
  getList();
  switch (tabName.value) {
    case "supplier":
      columns.value = supplierColumns;
      dialogFormVisible.value = supplierDialogFormVisible.value;
      break;
    case "customer":
      columns.value = customerColumns;
      dialogFormVisible.value = customerDialogFormVisible.value;
      break;
    case "coal":
      columns.value = coalColumns;
      dialogFormVisible.value = coalDialogFormVisible.value;
      break;

  // 根据标签页类型设置对应的列配置
  const tabConfig = {
    supplier: () => {
      columns.value = supplierColumns.value;
      getList();
    },
    customer: () => {
      columns.value = customerColumns.value;
      getList();
    },
    coal: () => {
      columns.value = coalColumns.value;
      getList();
    },
    coalQualityMaintenance: () => {
      columns.value = coalQualityMaintenanceColumns.value;
      getList();
      coalFieldData(); // 加载煤质字段数据
    },
    coalMeiZhiZiDuanWeiHu: () => {
      columns.value = coalMeiZhiZiDuanWeiHuColumns.value;
      getList();
    }
  };

  // 执行对应的配置函数
  const configFn = tabConfig[tabName.value];
  if (configFn) {
    configFn();
  }
  setTimeout(() => {
    loading.value = false;
  }, 500);
};
// 重置查询

/**
 * 重置查询条件
 * @description 重置查询参数并重新加载数据
 */
const resetQuery = () => {
  Object.keys(queryParams).forEach((key) => {
    if (key !== "pageNum" && key !== "pageSize") {
    if (key !== "pageNum" && key !== "pageSizes") {
      queryParams[key] = "";
    }
  });
  handleQuery();
  getList();
};
// 新增

/**
 * 搜索功能
 * @description 重置页码并执行搜索
 */
const search = () => {
  pageNum.value = 1;
  getList();
};

/**
 * 新增按钮点击处理
 */
const handleAdd = () => {
  addOrEdit.value = "add";
  handleAddEdit(tabName.value);
};
// 新增编辑
const handleAddEdit = (tabName) => {
  addOrEdit.value == "add" ? (title.value = "新增") : (title.value = "编辑");
  if (tabName === "supplier") {
    dialogFormVisible.value = true;
    title.value = title.value + "供应商信息";
    openDialog();
  } else if (tabName === "customer") {
    dialogFormVisible.value = true;
    title.value = title.value + "客户信息";
    openDialog();
  } else if (tabName === "coal") {
    dialogFormVisible.value = true;
    title.value = title.value + "煤种信息";
    openDialog();
  }

/**
 * 新增/编辑弹窗处理
 * @param {string} currentTabName - 当前标签页名称
 * @description 根据标签页类型设置弹窗标题并打开弹窗
 */
const handleAddEdit = (currentTabName) => {
  const actionText = addOrEdit.value === "add" ? "新增" : "编辑";
  
  const tabTitleMap = {
    supplier: "供应商信息",
    customer: "客户信息", 
    coal: "煤种信息",
    coalQualityMaintenance: "煤质方案维护",
    coalMeiZhiZiDuanWeiHu: "煤质字段维护"
  };

  title.value = `${actionText}${tabTitleMap[currentTabName] || ''}`;
  openDialog();
};
// 打开弹窗

/**
 * 打开弹窗
 * @description 根据编辑状态决定是否复制表单数据
 */
const openDialog = () => {
  if (addOrEdit.value === "edit") {
    copyForm.value = JSON.parse(JSON.stringify(form.value));
    dialogFormVisible.value = true;
    return;
  } else {
    form.value = {};
  }
  form.value = {};
  dialogFormVisible.value = true;
};
// 提交表单
const handleSubmit = (val) => {
  // 拿到提交数据

/**
 * 分页处理
 * @param {Object} val - 分页参数对象
 */
const handPagination = (val) => {
  pageNum.value = val.page;
  pageSizes.value = val.limit;
  getList();
};

/**
 * 表单提交处理
 * @param {Object} val - 提交结果对象
 */
const handleSubmit = async (val) => {
  if (val.result.code !== 200) {
    ElMessage.error("操作失败：" + val.result.msg);
    return;
  }
  ElMessage.success(val.title + val.result.msg);
  dialogFormVisible.value = false;
  getList();
};

/**
 * 弹窗显示状态处理
 * @param {boolean} value - 显示状态
 */
const handleDialogFormVisible = (value) => {
  dialogFormVisible.value = value;
};
// 选择行

/**
 * 表格行选择处理
 * @param {Array} selection - 选中的行数据
 */
const handleSelectionChange = (selection) => {
  selectedRows.value = selection;
};
// 编辑
/**
 * 编辑按钮点击处理
 * @param {Object} row - 行数据
 * @description 处理编辑操作，构建地址数组并打开编辑弹窗
 */
const handleEdit = (row) => {
    form.value = JSON.parse(JSON.stringify(row));
    addOrEdit.value = "edit";
    handleAddEdit(tabName.value);
  form.value = JSON.parse(JSON.stringify(row));
  
  // 构建供应商业务地址数组
  if (form.value.bprovinceId && form.value.bdistrictId && form.value.bcityId) {
    form.value.bids = [row.bprovinceId, row.bcityId, row.bdistrictId];
  }
  
  // 构建供应商联系地址数组
  if (form.value.cprovinceId && form.value.cdistrictId && form.value.ccityId) {
    form.value.cids = [row.cprovinceId, row.ccityId, row.cdistrictId];
  }
  
  // 构建客户业务地址数组
  if (form.value.businessCityId && form.value.businessDistrictId && form.value.businessProvinceId) {
    form.value.bids = [row.businessProvinceId, row.businessCityId, row.businessDistrictId];
  }
  
  // 构建客户联系地址数组
  if (form.value.cityId && form.value.districtId && form.value.provinceId) {
    form.value.cids = [row.provinceId, row.cityId, row.districtId];
  }
  
  addOrEdit.value = "edit";
  handleAddEdit(tabName.value);
};
// 批量删除
const handleDelete = () => {

/**
 * 批量删除处理
 * @description 批量删除选中的记录
 */
const handleDelete = async () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning("请选择要删除的数据");
    return;
  }
  ElMessageBox.confirm("确定删除选中的数据吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      ElMessage.success("删除成功，共删除" + selectedRows.value.length + "条数据");
      selectedRows.value.forEach((row) => {
        tableData.value = tableData.value.filter(
          (item) => item !== row
        );
      });
      total.value = tableData.value.length;
      // 清空选中行
      selectedRows.value = [];
  }).catch(() => {
    ElMessage.info("已取消删除操作");
  });
}
// 表格删除
const handleDeleteSuccess = (row) => {
  ElMessage.success("删除成功：" + row.supplierName);

  const deleteIds = selectedRows.value.map(item => item.id);
  
  try {
    await ElMessageBox.confirm("确定删除选中的数据吗？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    });

    const deleteApiMap = {
      supplier: delSupply,
      coal: delCoalInfo,
      coalQualityMaintenance: () => { throw new Error('delCoalQuality API not imported'); },
      customer: delCustomer,
      coalMeiZhiZiDuanWeiHu: deleteCoalField
    };

    const deleteApi = deleteApiMap[tabName.value];
    if (!deleteApi) {
      ElMessage.error("删除接口未配置");
      return;
    }

    const res = await deleteApi(deleteIds);
    
    if (res.code !== 200 && res.msg !== "操作成功") {
      ElMessage.error("删除失败：" + res.msg);
      return;
    }
    
    ElMessage.success("删除成功");
    await getList();
  } catch (error) {
    if (error.message !== 'cancel') {
      console.error('删除操作失败:', error);
      ElMessage.error("删除失败，请稍后再试");
    } else {
      ElMessage.info("已取消删除操作");
    }
  } finally {
    selectedRows.value = [];
  }
};
// 关闭弹窗

/**
 * 关闭弹窗处理
 */
const handleBeforeClose = () => {
  dialogFormVisible.value = false;
  form.value = {};
};
const handleExport = (row) => {
  proxy.download("system/post/export", {
    ...queryParams.value
  }, `post_${new Date().getTime()}.xlsx`)
  ElMessage.success("导出数据：" + row.supplierName);

/**
 * 导出功能处理
 */
const handleExport = () => {
  const exportConfig = {
    supplier: { api: "/supply/export", name: "供应商信息" },
    customer: { api: "/customer/export", name: "客户信息" },
    coal: { api: "/supply/export", name: "煤种信息" },
    coalQualityMaintenance: { api: "/supply/export", name: "煤质维护信息" }
  };

  const config = exportConfig[tabName.value];
  if (config) {
    exportData(config.api, config.name);
  }
};
const getList = () => {
  loading.value = true;
  setTimeout(() => {
    // 暂时引入测试数据
    tableData.value = [
      {
        supplierName: "中国冶金科工股份有限公司",
        identifyNumber: "123412123123123111",
        address: "山西省",
        bank: "交通银行",
        bankAccount: "901234567890123456",
        contacts: "李雪芹",
        contactAddress: "XX省XX市XX区XX路",
        maintainer: "李雪芹",
        maintainDate: "2022-09-26",
        contactsPhone: "19345678901",
      },
      {
        supplierName: "中国冶金科工股份有限公司",
        identifyNumber: "123412123123123111",
        address: "山西省",
        bank: "交通银行",
        bankAccount: "901234567890123456",
        contacts: "李雪芹",
        contactAddress: "XX省XX市XX区XX路",
        maintainer: "李雪芹",
        maintainDate: "2022-09-26",
        contactsPhone: "19345678901",
      },
      {
        supplierName: "中国冶金科工股份有限公司",
        identifyNumber: "123412123123123111",
        address: "山西省",
        bank: "交通银行",
        bankAccount: "901234567890123456",
        contacts: "李雪芹",
        contactAddress: "XX省XX市XX区XX路",
        maintainer: "李雪芹",
        maintainDate: "2022-09-26",
        contactsPhone: "19345678901",
      },
      {
        supplierName: "交通银行股份有限公司",
        identifyNumber: "042-26881314",
        address: "江西省",
        bank: "平安银行",
        bankAccount: "123456789012345678",
        contacts: "周白玉",
        contactAddress: "XX省XX市XX区XX路",
        maintainer: "周白玉",
        maintainDate: "2022-08-29",
      },
      {
        supplierName: "中国冶金科工股份有限公司",
        identifyNumber: "019-65851198",
        address: "山西省",
        bank: "交通银行",
        bankAccount: "901234567890123456",
        contacts: "李雪芹",
        contactAddress: "XX省XX市XX区XX路",
        maintainer: "李雪芹",
        maintainDate: "2022-09-26",
      },
      {
        supplierName: "交通银行股份有限公司",
        identifyNumber: "042-26881314",
        address: "江西省",
        bank: "平安银行",
        bankAccount: "123456789012345678",
        contacts: "周白玉",
        contactAddress: "XX省XX市XX区XX路",
        maintainer: "周白玉",
        maintainDate: "2022-08-29",
      },
      {
        supplierName: "中国冶金科工股份有限公司",
        identifyNumber: "019-65851198",
        address: "山西省",
        bank: "交通银行",
        bankAccount: "901234567890123456",
        contacts: "李雪芹",
        contactAddress: "XX省XX市XX区XX路",
        maintainer: "李雪芹",
        maintainDate: "2022-09-26",
      },
      {
        supplierName: "交通银行股份有限公司",
        identifyNumber: "042-26881314",
        address: "江西省",
        bank: "平安银行",
        bankAccount: "123456789012345678",
        contacts: "周白玉",
        contactAddress: "XX省XX市XX区XX路",
        maintainer: "周白玉",
        maintainDate: "2022-08-29",
      },
      {
        supplierName: "中国冶金科工股份有限公司",
        identifyNumber: "019-65851198",
        address: "山西省",
        bank: "交通银行",
        bankAccount: "901234567890123456",
        contacts: "李雪芹",
        contactAddress: "XX省XX市XX区XX路",
        maintainer: "李雪芹",
        maintainDate: "2022-09-26",
      },
      {
        supplierName: "交通银行股份有限公司",
        identifyNumber: "042-26881314",
        address: "江西省",
        bank: "平安银行",
        bankAccount: "123456789012345678",
        contacts: "周白玉",
        contactAddress: "XX省XX市XX区XX路",
        maintainer: "周白玉",
        maintainDate: "2022-08-29",
      },
      {
        supplierName: "中国冶金科工股份有限公司",
        identifyNumber: "019-65851198",
        address: "山西省",
        bank: "交通银行",
        bankAccount: "901234567890123456",
        contacts: "李雪芹",
        contactAddress: "XX省XX市XX区XX路",
        maintainer: "李雪芹",
        maintainDate: "2022-09-26",
      },
      {
        supplierName: "交通银行股份有限公司",
        identifyNumber: "042-26881314",
        address: "江西省",
        bank: "平安银行",
        bankAccount: "123456789012345678",
        contacts: "周白玉",
        contactAddress: "XX省XX市XX区XX路",
        maintainer: "周白玉",
        maintainDate: "2022-08-29",
      },
    ];
    total.value = tableData.value.length;

/**
 * 导出数据
 * @param {string} api - 导出接口路径
 * @param {string} name - 导出文件名前缀
 */
const exportData = (api, name) => {
  proxy.download(api, { ...queryParams }, `${name}${new Date().getTime()}.xlsx`);
  ElMessage.success("导出数据：" + name);
};
// ===== 数据获取函数 =====

/**
 * 根据当前标签页选择对应的API接口
 * @returns {Promise} API调用Promise
 * @description 统一的接口选择函数，根据标签页类型调用对应的API
 */
const selectInterface = () => {
  const apiParams = {
    current: pageNum.value,
    pageSize: pageSizes.value,
    searchAll: queryParams.searchAll,
  };

  const apiMap = {
    supplier: () => getSupply(apiParams),
    customer: () => getCustomerList(apiParams),
    coal: () => getCoalInfo(apiParams),
    coalQualityMaintenance: () => getCoalPlanList(apiParams),
    coalMeiZhiZiDuanWeiHu: () => coalField(apiParams)
  };

  const apiFunction = apiMap[tabName.value];
  return apiFunction ? apiFunction() : Promise.reject(new Error('未找到对应的API接口'));
};

/**
 * 获取列表数据
 * @description 统一的数据获取函数，处理加载状态和错误处理
 */
const getList = async () => {
  try {
    loading.value = true;
    const { data, code } = await selectInterface();
    
    if (code !== 200) {
      ElMessage.error("获取数据失败：" + (data?.msg || '未知错误'));
      return;
    }
    
    tableData.value = data.records || [];
    total.value = data.total || 0;
  } catch (error) {
    console.error('获取列表数据失败:', error);
    ElMessage.error("获取数据失败，请稍后再试");
  } finally {
    loading.value = false;
  }, 500);
  }
};
getList();

// ===== 生命周期钩子 =====

/**
 * 组件挂载后的初始化操作
 */
onMounted(async () => {
  try {
    // 并行执行初始化操作
    await Promise.all([
      handleTabClick({ props: { name: "supplier" } }),
      fetchAreaOptions(),
      getUserList()
    ]);
  } catch (error) {
    console.error('组件初始化失败:', error);
    ElMessage.error("页面初始化失败，请刷新重试");
  }
});
</script>

<style scoped>
.app-container{
  box-sizing: border-box;
}
.search-form {
  background-color: #fff;
  padding: 20px 20px 0 20px;
  margin-bottom: 20px;
  border-radius: 4px;
  box-shadow: var(--el-box-shadow-light);
}
.search-form :deep(.el-form-item) {
  margin-bottom: 16px;
  width: 100%;
}

/* 响应式布局 */
@media screen and (min-width: 768px) {
  .search-form :deep(.el-form-item) {
    width: 50%;
  }
}

@media screen and (min-width: 1200px) {
  .search-form :deep(.el-form-item) {
    width: 18%;
    width: 16%;
  }
}
.info-tabs {
  margin-bottom: 20px;
}

.table-toolbar {
  margin-bottom: 20px;
  display: flex;
@@ -514,15 +767,27 @@
  .table-toolbar {
    flex-direction: column;
  }

  .table-toolbar .el-button {
    width: 100%;
  }
}

/* 表格工具栏 */
.table-toolbar, .table-toolbar > * {
.table-toolbar,
.table-toolbar>* {
  margin: 0 0 0 0 !important;
}
.table-toolbar{

.table-toolbar {
  margin-bottom: 20px !important;
}

.el-form--inline .el-form-item {
  margin-right: 25px;
}

.main-container {
  background: red !important;
}
</style>