开发通用查看单条数据的详情页面 优化基础模块 优化生产加工数据匹配渲染问题

zhang_12370

6 天以前 c8025c2f6d5ba52649ebe043fa44ff8d8768f411

 src/views/basicInformation/index.vue

@@ -2,7 +2,11 @@
  <div class="app-container">
    <el-form :inline="true" :model="queryParams" class="search-form">
      <el-form-item v-if="shouldShowSearch" label="搜索">
        <el-input v-model="queryParams.searchAll" :placeholder="searchPlaceholder" clearable/>
        <el-input
          v-model="queryParams.searchAll"
          :placeholder="searchPlaceholder"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
@@ -11,61 +15,165 @@
    </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 :icon="Plus" type="primary" @click="handleAdd">新建</el-button>
        <el-button :icon="Delete" type="danger" @click="handleDelete">删除</el-button>
        <el-button @click="jump">admins</el-button>
        <el-button v-show="canExport" :icon="Download" type="info" @click="handleExport">导出</el-button>
      </el-row> <!-- 表格组件 -->
        <el-button :icon="Plus" type="primary" @click="handleAdd"
          >新建</el-button
        >
        <el-button :icon="Delete" type="danger" @click="handleDelete"
          >删除</el-button
        >
        <el-button
          v-show="canExport"
          :icon="Download"
          type="info"
          @click="handleExport"
          >导出</el-button
        >
      </el-row>
      <!-- 表格组件 -->
      <div>
        <data-table :border="true" :columns="columns" :loading="loading" style="width: 100%;height: calc(100vh - 29em)"
                    :show-selection="true" :table-data="tableData" @edit="handleEdit" @selection-change="handleSelectionChange">
        <data-table
          :border="true"
          :columns="columns"
          :loading="loading"
          style="width: 100%; height: calc(100vh - 29em)"
          :show-selection="true"
          :table-data="tableData"
          @edit="handleEdit"
          @viewRow="handleView"
          @selection-change="handleSelectionChange"
          :showOperations="true"
          :showIndex="true"
          :showPagination="false"
          :operations="['edit', 'viewRow']"
          :operationsWidth="200"
        >
          <!-- 字段名称列的自定义插槽 - 显示为标签 -->
          <template v-if="tabName === 'coalQualityMaintenance'" #fieldIds="{ row }">
            <template v-if="typeof row.fieldIds === 'string' && row.fieldIds.includes(',')">
              <el-tag v-for="(field, index) in row.fieldIds.split(',')" :key="index" size="small" style="margin-right: 4px; margin-bottom: 2px;"
                      type="primary">
          <template
            v-if="tabName === 'coalQualityMaintenance'"
            #fieldIds="{ row }"
          >
            <template
              v-if="
                typeof row.fieldIds === 'string' && row.fieldIds.includes(',')
              "
            >
              <el-tag
                v-for="(field, index) in row.fieldIds.split(',')"
                :key="index"
                size="small"
                style="margin-right: 4px; margin-bottom: 2px"
                type="primary"
              >
                {{ getFieldDisplayName(field.trim()) }}
              </el-tag>
            </template>
            <template v-else>
              <el-tag size="small" type="primary">
                {{ getFieldDisplayName(row.fieldIds) || '--' }}
                {{ getFieldDisplayName(row.fieldIds) || "--" }}
              </el-tag>
            </template>
          </template>
        </data-table>
      </div>
      <pagination v-if="total > 0" :layout="'total, prev, pager, next, jumper'" :limit="pageSizes" :page="pageNum" :total="total"
                  @pagination="handPagination"/>
      <Supplier v-if="tabName === 'supplier'" v-model:copyForm="copyForm"
                v-model:supplierDialogFormVisible="dialogFormVisible" :addOrEdit="addOrEdit" :form="form" :title="title"
                @beforeClose="handleBeforeClose" @submit="handleSubmit"
                @update:dialogFormVisible="handleDialogFormVisible"/>
      <Customer v-if="tabName === 'customer'" v-model:copyForm="copyForm"
                v-model:customerDialogFormVisible="dialogFormVisible" :addOrEdit="addOrEdit" :form="form" :title="title"
                @beforeClose="handleBeforeClose" @submit="handleSubmit"/>
      <Coal v-if="tabName === 'coal'" v-model:coalDialogFormVisible="dialogFormVisible" v-model:copyForm="copyForm"
            :addOrEdit="addOrEdit" :form="form" :title="title" @submit="handleSubmit"/>
      <coalQualityMaintenance v-if="tabName === 'coalQualityMaintenance'" v-model:coalQualityMaintenanceDialogFormVisible="dialogFormVisible"
                              v-model:copyForm="copyForm" :addOrEdit="addOrEdit"
      <pagination
        v-if="total > 0"
        :layout="'total, prev, pager, next, jumper'"
        :limit="pageSizes"
        :page="pageNum"
        :total="total"
        @pagination="handPagination"
      />
      <Supplier
        v-if="tabName === 'supplier'"
        v-model:copyForm="copyForm"
        v-model:supplierDialogFormVisible="dialogFormVisible"
        :addOrEdit="addOrEdit"
                              :form="form"
                              :title="title" @submit="handleSubmit"/>
      <coalMeiZhiZiDuanWeiHu v-if="tabName === 'coalMeiZhiZiDuanWeiHu'" v-model:coalMaintenanceFieldDialogVisible="dialogFormVisible"
                             v-model:copyForm="copyForm" :addOrEdit="addOrEdit" :form="form"
                             :title="title"
                             @submit="handleSubmit"/>
        @beforeClose="handleBeforeClose"
        @submit="handleSubmit"
        @update:dialogFormVisible="handleDialogFormVisible"
      />
      <Customer
        v-if="tabName === 'customer'"
        v-model:copyForm="copyForm"
        v-model:customerDialogFormVisible="dialogFormVisible"
        :addOrEdit="addOrEdit"
        :form="form"
        :title="title"
        @beforeClose="handleBeforeClose"
        @submit="handleSubmit"
      />
      <Coal
        v-if="tabName === 'coal'"
        v-model:coalDialogFormVisible="dialogFormVisible"
        v-model:copyForm="copyForm"
        :addOrEdit="addOrEdit"
        :form="form"
        :title="title"
        @submit="handleSubmit"
      />
      <coalQualityMaintenance
        v-if="tabName === 'coalQualityMaintenance'"
        v-model:coalQualityMaintenanceDialogFormVisible="dialogFormVisible"
        v-model:copyForm="copyForm"
        :addOrEdit="addOrEdit"
        :form="form"
        :title="title"
        @submit="handleSubmit"
      />
      <coalMeiZhiZiDuanWeiHu
        v-if="tabName === 'coalMeiZhiZiDuanWeiHu'"
        v-model:coalMaintenanceFieldDialogVisible="dialogFormVisible"
        v-model:copyForm="copyForm"
        :addOrEdit="addOrEdit"
        :form="form"
        :title="title"
        @submit="handleSubmit"
      />
      <Descriptions
        v-model:descriptionsVisible="showDialog"
        title="供应商详情"
        :formData="supplierData"
        :fieldLabels="supplierFieldLabels"
        :column="2"
        :isViewOnly="false"
        :border="true"
        :showOperations="true"
        descriptionsTitle="基本信息"
        :fieldConfig="fieldConfig"
        :excludeFields="excludeFields"
        @edit="descriptionsHandleEdit"
        @close="handleClose"
      />
    </el-card>
  </div>
</template>

<script setup>
import {computed, getCurrentInstance, onMounted, reactive, ref, nextTick} from "vue";
import {
  computed,
  getCurrentInstance,
  onMounted,
  reactive,
  ref,
  nextTick,
} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {Delete, Download, Plus} from "@element-plus/icons-vue";

@@ -77,28 +185,95 @@
import Coal from "./mould/coal.vue";
import coalQualityMaintenance from "./mould/coalQualityMaintenance.vue";
import coalMeiZhiZiDuanWeiHu from "./mould/coalMeiZhiZiDuanWeiHu.vue";
import Descriptions from "@/components/dialog/Descriptions.vue";

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

const {proxy} = getCurrentInstance();
import router from "@/router";

// ===== 响应式状态管理 =====
const jump = () => {
};
// 弹窗控制状态
const showDialog = ref(false)
const supplierFieldLabels = {
  supplierName: '供应商名称',
  taxpayerId: '统一社会信用代码',
}
// 数据对象
const supplierData = ref({
  supplierName: "测试供应商",
  taxpayerId: "91320000MA1N2P3Q4R", 
  contactPerson: "张三",
  contactPhone: "13800138000",
  bankAccount: "6222024200019999999",
  bankName: "中国工商银行",
  businessAddress: "江苏省苏州市工业园区星湖街328号",
  contactAddress: "江苏省苏州市姑苏区观前街100号",
  createTime: "2024-01-15T10:30:00",
  updateTime: "2024-06-25T14:20:00",
  id: 123,
})
// 字段配置
const fieldConfig = ref({
  supplierName: { 
    label: '供应商名称', 
    span: 2  // 跨2列显示
  },
  taxpayerId: { 
    label: '统一社会信用代码' 
  },
  contactPhone: { 
    label: '联系电话',
    formatter: (value) => value || '暂无联系方式'
  },
  createTime: {
    label: '创建时间',
    formatter: (value) => new Date(value).toLocaleDateString('zh-CN')
  },
  businessAddress: {
    label: '详细经营地址',
    span: 2
  },
  contactAddress: {
    label: '详细联系地址',
    span: 2
  }
})
// 排除不显示的字段
const excludeFields = ref(["id", "updateTime", "deleted"]);

// 事件处理
const descriptionsHandleEdit = (data) => {
  console.log("编辑数据:", data);
  // 跳转到编辑页面或打开编辑弹窗
};

const handleClose = () => {
  console.log("弹窗关闭");
};

const dialogFormVisible = ref(false);
const form = ref({});
const title = ref("");
const copyForm = ref({});
const addOrEdit = ref("add");
const descriptionsVisible = ref(false);

// 数据缓存映射
const userList = ref([]);
@@ -135,7 +310,7 @@
  {name: "customer", label: "客户信息"},
  {name: "coal", label: "煤种信息"},
  {name: "coalQualityMaintenance", label: "煤质方案"},
  {name: "coalMeiZhiZiDuanWeiHu", label: "煤质字段"}
  { name: "coalMeiZhiZiDuanWeiHu", label: "煤质字段" },
]);

// ===== 工具函数 =====
@@ -153,7 +328,7 @@
      buildAddressMap(res.data);
    }
  } catch (error) {
    console.error('获取地址选项失败:', error);
    console.error("获取地址选项失败:", error);
  }
};

@@ -164,11 +339,11 @@
 */
const buildAddressMap = (areaData) => {
  const buildMap = (list, pathList = []) => {
    list.forEach(item => {
    list.forEach((item) => {
      const currentPath = [...pathList, item.label];
      addressMap.value[item.id] = {
        name: item.label,
        fullPath: currentPath.join(' / ')
        fullPath: currentPath.join(" / "),
      };
      if (item.children && item.children.length > 0) {
        buildMap(item.children, currentPath);
@@ -185,19 +360,26 @@
 * @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 '--';
  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 || '--');
  const addressNames = addressIds.map(
    (id) => addressMap.value[id]?.name || "--"
  );

  if (addressNames.every(name => name === '--')) {
    return '--';
  if (addressNames.every((name) => name === "--")) {
    return "--";
  }

  return addressNames.filter(name => name !== '--').join(' / ');
  return addressNames.filter((name) => name !== "--").join(" / ");
};

/**
@@ -209,12 +391,12 @@
    const res = await testUserList();
    if (res && res.data) {
      userList.value = res.data;
      userList.value.forEach(user => {
      userList.value.forEach((user) => {
        userMap.value[user.userId] = user.username;
      });
    }
  } catch (error) {
    console.error('获取用户列表失败:', error);
    console.error("获取用户列表失败:", error);
  }
};

@@ -229,7 +411,7 @@
      coalFieldList.value = data;
    }
  } catch (error) {
    console.error('获取煤质字段数据失败:', error);
    console.error("获取煤质字段数据失败:", error);
  }
};

@@ -240,10 +422,10 @@
 * @description 通过字段ID匹配对应的字段名称
 */
const getFieldDisplayName = (fieldId) => {
  if (!fieldId) return '--';
  if (!fieldId) return "--";

  const numId = parseInt(fieldId);
  const matchedField = coalFieldList.value.find(item => item.id === numId);
  const matchedField = coalFieldList.value.find((item) => item.id === numId);

  return matchedField ? matchedField.fieldName : numId;
};
@@ -254,7 +436,7 @@
 * 当前标签页是否支持导出功能
 */
const canExport = computed(() => {
  return ['supplier', 'customer'].includes(tabName.value);
  return ["supplier", "customer"].includes(tabName.value);
});

/**
@@ -266,7 +448,7 @@
    customer: "供应商/识别码/详细地址",
    coal: "请输入搜索信息",
    coalQualityMaintenance: "请输入搜索信息",
    coalMeiZhiZiDuanWeiHu: "请输入搜索信息"
    coalMeiZhiZiDuanWeiHu: "请输入搜索信息",
  };
  return placeholderMap[tabName.value] || "请输入搜索信息";
});
@@ -275,7 +457,13 @@
 * 是否显示搜索框
 */
const shouldShowSearch = computed(() => {
  return ['supplier', 'customer', 'coal', 'coalQualityMaintenance', 'coalMeiZhiZiDuanWeiHu'].includes(tabName.value);
  return [
    "supplier",
    "customer",
    "coal",
    "coalQualityMaintenance",
    "coalMeiZhiZiDuanWeiHu",
  ].includes(tabName.value);
});

/**
@@ -304,11 +492,10 @@
    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",
@@ -318,10 +505,9 @@
    formatter: (row) => {
      const addressIds = [row.cprovinceId, row.ccityId, row.cdistrictId];
      return formatAddressArray(addressIds);
    }
    },
  },
  {prop: "contactAddress", label: "联系人详细地址", minWidth: 120},
  {prop: "updateTime", label: "维护日期", minWidth: 120},
]);

/**
@@ -336,9 +522,13 @@
    minWidth: 150,
    showOverflowTooltip: true,
    formatter: (row) => {
      const addressIds = [row.businessProvinceId, row.businessCityId, row.businessDistrictId];
      const addressIds = [
        row.businessProvinceId,
        row.businessCityId,
        row.businessDistrictId,
      ];
      return formatAddressArray(addressIds);
    }
    },
  },
  {prop: "businessAddress", label: "详细地址", minWidth: 150},
  {prop: "bankName", label: "开户行", minWidth: 120},
@@ -353,7 +543,7 @@
    formatter: (row) => {
      const addressIds = [row.provinceId, row.cityId, row.districtId];
      return formatAddressArray(addressIds);
    }
    },
  },
  {prop: "contactAddress", label: "联系人详细地址", minWidth: 150},
  {prop: "updateTime", label: "维护日期", minWidth: 100},
@@ -370,13 +560,13 @@
    minWidth: 120,
    formatter: (row, column, cellValue) => {
      if (!userMap.value || Object.keys(userMap.value).length === 0) {
        return '--';
        return "--";
      }
      if (cellValue === null || cellValue === undefined || cellValue === '') {
        return '--';
      if (cellValue === null || cellValue === undefined || cellValue === "") {
        return "--";
      }
      return userMap.value[cellValue] || '--';
    }
      return userMap.value[cellValue] || "--";
    },
  },
  {prop: "maintenanceDate", label: "维护日期", minWidth: 150},
]);
@@ -394,10 +584,10 @@
    slot: true,
    formatter: (row, column, cellValue) => {
      if (Array.isArray(cellValue)) {
        return cellValue.map(item => item);
        return cellValue.map((item) => item);
      }
      return cellValue || '--';
    }
      return cellValue || "--";
    },
  },
  {prop: "schemeDesc", label: "字段描述", minWidth: 100},
]);
@@ -449,7 +639,7 @@
    coalMeiZhiZiDuanWeiHu: () => {
      columns.value = coalMeiZhiZiDuanWeiHuColumns.value;
      getList();
    }
    },
  };

  // 执行对应的配置函数
@@ -495,17 +685,22 @@
 * @description 根据标签页类型设置弹窗标题并打开弹窗
 */
const handleAddEdit = (currentTabName) => {
  const actionText = addOrEdit.value === "add" ? "新增" : "编辑";
  const actionText =
    addOrEdit.value === "add"
      ? "新增"
      : addOrEdit.value === "edit"
      ? "编辑"
      : "查看";

  const tabTitleMap = {
    supplier: "供应商信息",
    customer: "客户信息",
    coal: "煤种信息",
    coalQualityMaintenance: "煤质方案维护",
    coalMeiZhiZiDuanWeiHu: "煤质字段维护"
    coalMeiZhiZiDuanWeiHu: "煤质字段维护",
  };

  title.value = `${actionText}${tabTitleMap[currentTabName] || ''}`;
  title.value = `${actionText}${tabTitleMap[currentTabName] || ""}`;
  openDialog();
};

@@ -514,7 +709,7 @@
 * @description 根据编辑状态决定是否复制表单数据
 */
const openDialog = () => {
  if (addOrEdit.value === "edit") {
  if (addOrEdit.value === "edit" || addOrEdit.value === "viewRow") {
    copyForm.value = JSON.parse(JSON.stringify(form.value));
  } else {
    form.value = {};
@@ -580,8 +775,16 @@
  }

  // 构建客户业务地址数组
  if (form.value.businessCityId && form.value.businessDistrictId && form.value.businessProvinceId) {
    form.value.bids = [row.businessProvinceId, row.businessCityId, row.businessDistrictId];
  if (
    form.value.businessCityId &&
    form.value.businessDistrictId &&
    form.value.businessProvinceId
  ) {
    form.value.bids = [
      row.businessProvinceId,
      row.businessCityId,
      row.businessDistrictId,
    ];
  }

  // 构建客户联系地址数组
@@ -594,6 +797,49 @@
};

/**
 * 查看按钮点击处理
 * @param {Object} row - 行数据
 * @description 处理查看操作，构建地址数组并打开查看弹窗
 */
const handleView = (row) => {
  console.log("查看行数据:", row);
  // 拿到所有的keys
  const keys = Object.keys(row);
  console.log("所有keys:", keys);
  showDialog.value = true;
  // form.value = JSON.parse(JSON.stringify(row));
  // console.log("查看行数据:", form.value);
  // // 构建供应商业务地址数组
  // 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 = "viewRow";
  // handleAddEdit(tabName.value);
};

/**
 * 批量删除处理
 * @description 批量删除选中的记录
 */
@@ -603,7 +849,7 @@
    return;
  }

  const deleteIds = selectedRows.value.map(item => item.id);
  const deleteIds = selectedRows.value.map((item) => item.id);

  try {
    await ElMessageBox.confirm("确定删除选中的数据吗？", "提示", {
@@ -616,10 +862,10 @@
      supplier: delSupply,
      coal: delCoalInfo,
      coalQualityMaintenance: () => {
        throw new Error('delCoalQuality API not imported');
        throw new Error("delCoalQuality API not imported");
      },
      customer: delCustomer,
      coalMeiZhiZiDuanWeiHu: deleteCoalField
      coalMeiZhiZiDuanWeiHu: deleteCoalField,
    };

    const deleteApi = deleteApiMap[tabName.value];
@@ -627,7 +873,7 @@
      ElMessage.error("删除接口未配置");
      return;
    }
    console.log(deleteIds)
    console.log(deleteIds);
    const res = await deleteApi(deleteIds);

    if (res.code !== 200 && res.msg !== "操作成功") {
@@ -638,8 +884,8 @@
    ElMessage.success("删除成功");
    await getList();
  } catch (error) {
    if (error.message !== 'cancel') {
      console.error('删除操作失败:', error);
    if (error.message !== "cancel") {
      console.error("删除操作失败:", error);
      ElMessage.error("删除失败，请稍后再试");
    } else {
      ElMessage.info("已取消删除操作");
@@ -665,7 +911,7 @@
    supplier: {api: "/supply/export", name: "供应商信息"},
    customer: {api: "/customer/export", name: "客户信息"},
    coal: {api: "/supply/export", name: "煤种信息"},
    coalQualityMaintenance: {api: "/supply/export", name: "煤质维护信息"}
    coalQualityMaintenance: { api: "/supply/export", name: "煤质维护信息" },
  };

  const config = exportConfig[tabName.value];
@@ -680,7 +926,11 @@
 * @param {string} name - 导出文件名前缀
 */
const exportData = (api, name) => {
  proxy.download(api, {...queryParams}, `${name}${new Date().getTime()}.xlsx`);
  proxy.download(
    api,
    { ...queryParams },
    `${name}${new Date().getTime()}.xlsx`
  );
  ElMessage.success("导出数据：" + name);
};
// ===== 数据获取函数 =====
@@ -702,11 +952,13 @@
    customer: () => getCustomerList(apiParams),
    coal: () => getCoalInfo(apiParams),
    coalQualityMaintenance: () => getCoalPlanList(apiParams),
    coalMeiZhiZiDuanWeiHu: () => coalField(apiParams)
    coalMeiZhiZiDuanWeiHu: () => coalField(apiParams),
  };

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

/**
@@ -719,14 +971,14 @@
    const {data, code} = await selectInterface();

    if (code !== 200) {
      ElMessage.error("获取数据失败：" + (data?.msg || '未知错误'));
      ElMessage.error("获取数据失败：" + (data?.msg || "未知错误"));
      return;
    }

    tableData.value = data.records || [];
    total.value = data.total || 0;
  } catch (error) {
    console.error('获取列表数据失败:', error);
    console.error("获取列表数据失败:", error);
    ElMessage.error("获取数据失败，请稍后再试");
  } finally {
    loading.value = false;
@@ -744,10 +996,10 @@
    await Promise.all([
      handleTabClick({props: {name: "supplier"}}),
      fetchAreaOptions(),
      getUserList()
      getUserList(),
    ]);
  } catch (error) {
    console.error('组件初始化失败:', error);
    console.error("组件初始化失败:", error);
    ElMessage.error("页面初始化失败，请刷新重试");
  }
});