完善基础管理 供应商、客户、煤种等功能

张诺

4 天以前 dd159ea51a7a77bd8cc00c70c0e900f472fb3395

 src/views/basicInformation/index.vue

@@ -1,125 +1,51 @@
<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
          />
        </el-form-item>
        <el-form-item label="供应商名称">
          <el-input
            v-model="queryParams.supplierName"
            placeholder="请输入"
            clearable
          />
        </el-form-item>
        <el-form-item label="统一人识别号">
          <el-input
            v-model="queryParams.identifyNumber"
            placeholder="请输入"
            clearable
          />
        </el-form-item>
        <el-form-item label="经营地址">
          <el-input
            v-model="queryParams.address"
            placeholder="请输入"
            clearable
          />
        </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="tabName === 'supplier' || tabName === 'customer'">
        <el-input v-model="queryParams.searchAll" placeholder="供应商/识别码/详细地址" clearable />
      </el-form-item>
      <el-form-item label="搜索" v-if="tabName === 'coal' || tabName === 'coalQualityMaintenance'">
        <el-input v-model="queryParams.searchAll" placeholder="请输入搜索信息" 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="tabName === 'supplier' || tabName === 'customer'">导出</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" />
      </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"
        :addOrEdit="addOrEdit"
        @beforeClose="handleBeforeClose"
      />
      <Coal
        v-if="tabName === 'coal'"
        v-model:coalDialogFormVisible="dialogFormVisible"
        :form="form"
        :title="title"
        :addOrEdit="addOrEdit"
        @submit="handleSubmit"
      />
      <coalQualityMaintenance
        v-if="tabName === 'coalQualityMaintenance'"
        v-model:coalQualityMaintenanceDialogFormVisible="dialogFormVisible"
        :form="form"
        :title="title"
        :addOrEdit="addOrEdit"
        @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:coalQualityMaintenanceDialogFormVisible="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 } 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";
@@ -129,6 +55,13 @@
import Coal from "./mould/coal.vue";
import coalQualityMaintenance from "./mould/coalQualityMaintenance.vue";
const { proxy } = getCurrentInstance()
import { getSupply, addOrEditSupply, delSupply } from "@/api/basicInformation/supplier.js";
import { getCoalInfo, delCoalInfo } from "@/api/basicInformation/coal.js";
import { getCoalQuality, delCoalQuality } from "@/api/basicInformation/coalQualityMaintenance.js";
import { testUserList } from "@/api/tool/publicInterface.js";
import { getAreaOptions } from "@/api/system/area.js";
import { getCustomerList, delCustomer } from "@/api/basicInformation/customer.js";

// 弹窗
const coalQualityMaintenanceDialogFormVisible = ref(false);
const customerDialogFormVisible = ref(false);
@@ -138,24 +71,89 @@
const form = ref({});
const title = ref("");
const copyForm = ref({});
// 用户列表数据
const userList = ref([]);
// 用户映射表，用于快速查找
const userMap = ref({});
// 地址映射表，用于快速查找地址名称
const addressMap = ref({});
// 当前标签
const tabName = ref("supplier");
// 状态变量
const loading = ref(false);
const total = ref(0);
const pageNum = ref(1);
const pageSize = ref(10);
const pageSizes = ref(10);
const activeTab = ref("supplier");
const selectedRows = ref([]);
// 查询参数
const queryParams = reactive({
  searchText: "",
  supplierName: "",
  identifyNumber: "",
  address: "",
});
onMounted(() => {
  handleTabClick({ props: { name: "supplier" } });
// 地址选择数据
const addressSelectOptions = ref([]);
const fetchAreaOptions = async () => {
  addressSelectOptions.value = [];
  const res = await getAreaOptions();
  if (res.code === 200) {
    addressSelectOptions.value = res.data;
    buildAddressMap(res.data); // 构建地址映射表
  }
}

// 构建地址映射表，用于快速查找地址名称
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);
};

// 地址格式化函数
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 => {
    return addressMap.value[id]?.name || '--';
  });
  
  // 如果所有地址名称都是 '--'，则返回 '--'
  if (addressNames.every(name => name === '--')) {
    return '--';
  }
  
  return addressNames.filter(name => name !== '--').join(' / ');
};
// 获取用户列表数据
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);
  }
};

onMounted(async () => {
  await handleTabClick({ props: { name: "supplier" } });
  await fetchAreaOptions(); // 先获取地址选择数据并构建映射表
  await getUserList(); // 获取用户列表
});
const columns = ref();
// 标签页数据
@@ -169,43 +167,127 @@
const addOrEdit = ref("add");
// 表格数据
const tableData = ref([]);
// 方法定义
const handleQuery = () => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 500);
};
// supplier 供应商数据
const supplierColumns = ref([
  { prop: "supplierName", label: "供应商名称", minWidth: 200 },
  { prop: "identifyNumber", label: "统一人识别号", minWidth: 120 },
  { prop: "address", label: "经营地址", minWidth: 150 },
  { prop: "detailedaddress", 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 },
  { prop: "supplierName", label: "供应商名称", minWidth: 100 },
  { prop: "taxpayerId", label: "统一人识别号", minWidth: 170 },  { 
    prop: "bids", 
    label: "经营地址", 
    minWidth: 150,
    showOverflowTooltip: true,
    formatter: (row, column, cellValue) => {
      let arr = [
        row.bprovinceId,
        row.bcityId,
        row.bdistrictId,
      ]
      return formatAddressArray(arr);
    }
  },
  { 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, column, cellValue) => {
      let arr = [
        row.cprovinceId,
        row.ccityId,
        row.cdistrictId,
      ]
      return formatAddressArray(arr);
    }
  },{ prop: "contactAddress", label: "联系人详细地址", minWidth: 120 },
  // { 
  //   prop: "maintainerId", 
  //   label: "维护人", 
  //   minWidth: 80,
  //   formatter: (row, column, cellValue) => {
  //     // 如果用户映射表还没有准备好，显示 --
  //     if (!userMap.value || Object.keys(userMap.value).length === 0) {
  //       return '--';
  //     }
  //     // 如果值为空或null，显示 --
  //     if (cellValue === null || cellValue === undefined || cellValue === '') {
  //       return '--';
  //     }
  //     // 如果用户映射表中有对应的用户名，返回用户名
  //     if (userMap.value[cellValue]) {
  //       return userMap.value[cellValue];
  //     }
  //     // 如果没有匹配的用户，显示 --
  //     return '--';
  //   }
  // },
  { prop: "createTime", label: "维护日期", minWidth: 120 },
]);
// customer 客户数据
const customerColumns = ref([
  { prop: "customerName", label: "客户名称", minWidth: 200 },
  { prop: "identifyNumber", label: "统一人识别号", minWidth: 120 },
  { prop: "address", label: "经营地址", minWidth: 150 },
  { prop: "detailedaddress", 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 },
  { prop: "customerName", label: "客户名称", minWidth: 100 },
  { prop: "taxpayerId", label: "统一人识别号", minWidth: 120 },
{ 
    prop: "bids", 
    label: "经营地址", 
    minWidth: 150,
    showOverflowTooltip: true,
    formatter: (row, column, cellValue) => {
      let arr = [
        row.businessProvinceId,
        row.businessCityId,
        row.businessDistrictId,
      ]
      return formatAddressArray(arr);
    }
  },
  { prop: "businessAddress", label: "详细地址", minWidth: 150 },
  { prop: "bankName", label: "开户行", minWidth: 120 },
  { prop: "bankAccount", label: "银行账号", minWidth: 150 },  
  { prop: "contactPerson", label: "联系人", minWidth: 100 },
  { prop: "contactPhone", label: "联系人电话", minWidth: 100 },
{ 
    prop: "cids", 
    label: "联系人地址", 
    minWidth: 150,
    showOverflowTooltip: true,
    formatter: (row, column, cellValue) => {
      let arr = [
        row.provinceId,
        row.cityId,
        row.districtId,
      ]
      return formatAddressArray(arr);
    }
  },
  { prop: "contactAddress", label: "联系人详细地址", minWidth: 150 },
  { prop: "updateTime", label: "维护日期", minWidth: 100 },
]);
// coal 煤种数据
const coalColumns = ref([
  { prop: "coalName", label: "煤种名称", minWidth: 200 },
  { prop: "maintainer", label: "维护人", minWidth: 120 },
  { prop: "coal", label: "煤种名称", minWidth: 200 },  { 
    prop: "maintainerId", 
    label: "维护人", 
    minWidth: 120,
    formatter: (row, column, cellValue) => {
      // 如果用户映射表还没有准备好，显示 --
      if (!userMap.value || Object.keys(userMap.value).length === 0) {
        return '--';
      }
      // 如果值为空或null，显示 --
      if (cellValue === null || cellValue === undefined || cellValue === '') {
        return '--';
      }
      // 如果用户映射表中有对应的用户名，返回用户名
      if (userMap.value[cellValue]) {
        return userMap.value[cellValue];
      }
      // 如果没有匹配的用户，显示 --
      return '--';
    }
  },
  { prop: "maintenanceDate", label: "维护日期", minWidth: 150 },
]);
// coalQualityMaintenance 煤质维护数据
@@ -222,42 +304,42 @@
// 标签页点击
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.value;
      dialogFormVisible.value = supplierDialogFormVisible.value;
      getList("supplier");
      break;
    case "customer":
      columns.value = customerColumns.value;
      dialogFormVisible.value = customerDialogFormVisible.value;
      getList("customer");

      break;
    case "coal":
      columns.value = coalColumns.value;
      dialogFormVisible.value = coalDialogFormVisible.value;
      getList("coal");
      break;
    case "coalQualityMaintenance":
      columns.value = coalQualityMaintenanceColumns.value;
      dialogFormVisible.value = coalQualityMaintenanceDialogFormVisible.value;
      getList("coalQualityMaintenance");
      break;
  }
  setTimeout(() => {
    loading.value = false;
  }, 500);
};
// 重置查询
const resetQuery = () => {
  Object.keys(queryParams).forEach((key) => {
    if (key !== "pageNum" && key !== "pageSize") {
    if (key !== "pageNum" && key !== "pageSizes") {
      queryParams[key] = "";
    }
  });
  handleQuery();
  getList()
};
// 新增
const handleAdd = () => {
@@ -295,15 +377,20 @@
  form.value = {};
  dialogFormVisible.value = true;
};
// 分页
const handPagination = (val) => {
  pageNum.value = val.page;
  pageSizes.value = val.limit;
  getList();
};
// 提交表单
const handleSubmit = () => {
  // 拿到提交数据
  dialogFormVisible.value = false;
  if (addOrEdit.value === "add") {
    ElMessage.success("新增成功：" + copyForm.value.supplierName);
  } else {
    ElMessage.success("编辑成功：" + copyForm.value.supplierName);
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();
};
const handleDialogFormVisible = (value) => {
@@ -315,9 +402,37 @@
};
// 编辑
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 = () => {
@@ -325,252 +440,163 @@
    ElMessage.warning("请选择要删除的数据");
    return;
  }
  let arr = reactive([]);
  selectedRows.value.forEach(element => {
    return arr.push(element.id);
  });
  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("已取消删除操作");
  });
    .then(async () => {
      try {
        let res;
        if( tabName.value === "supplier" ) {
          res = await delSupply(arr);
        } else if (tabName.value === "coal") {
          res = await delCoalInfo(arr);
        } else if (tabName.value === "coalQualityMaintenance") {
          res = await delCoalQuality(arr);
        } else if( tabName.value === "customer") {
          res = await delCustomer(arr);
        }
        if(res.code !== 200 && res.meg == "操作成功") {
          ElMessage.error("删除失败：" + res.msg);
          return;
        }
        ElMessage.success("删除成功");
        await getList(); 
      } catch (e) {
        console.error(e);
        ElMessage.error("删除失败，请稍后再试");
      } finally {
        selectedRows.value = [];
      }
    }).catch(() => {
      ElMessage.info("已取消删除操作");
    });
}
// 表格删除
const handleDeleteSuccess = (row) => {
  ElMessage.success("删除成功：" + row.supplierName);
};
// 关闭弹窗
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 getList = () => {
  loading.value = true;
const handleExport = () => {
  if(tabName.value === "supplier") {
    Export("/supply/export", "供应商信息");
  } else if (tabName.value === "customer") {
    Export("/customer/export", "客户信息");
  } else if (tabName.value === "coal") {
    Export("/supply/export", "煤种信息");
  } else if (tabName.value === "coalQualityMaintenance") {
    Export("/supply/export", "煤质维护信息");

  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;
    loading.value = false;
  }, 500);
  }
}
const Export = (api,name) => {
  proxy.download(api, {
    ...queryParams.value
  }, `${name}${new Date().getTime()}.xlsx`)
  ElMessage.success("导出数据：" + name);
};
getList();
// 选择接口
const selectInterface = () => {
  if (tabName.value === "supplier") {
    return getSupply({
      current: pageNum.value,
      pageSize: pageSizes.value,
      searchAll: queryParams.searchAll,
    });
  } else if (tabName.value === "customer") {
    return getCustomerList({
      current: pageNum.value,
      pageSize: pageSizes.value,
      searchAll: queryParams.searchAll,
    });
  } else if (tabName.value === "coal") {
    return getCoalInfo({
      current: pageNum.value,
      pageSize: pageSizes.value,
      searchAll: queryParams.searchAll,
    });
  } else if (tabName.value === "coalQualityMaintenance") {
    return getCoalQuality({
      current: pageNum.value,
      pageSize: pageSizes.value,
      searchAll: queryParams.searchAll,
    });
  }
}
const search = () => {
  pageNum.value = 1; // 重置页码
  getList();
};
// 获取列表数据
const getList = async () => {
  loading.value = true;
  /* if (Object.keys(addressMap.value).length === 0) {
    await fetchAreaOptions();
  } */
  let { data, code } = await selectInterface()
  if(code !== 200) {
    ElMessage.error("获取数据失败：" + data.msg);
    loading.value = false;
    return;
  }
  tableData.value = data.records;
  total.value = data.total;
  loading.value = false;
};
</script>

<style scoped>
.app-container {
  padding: 20px;
  background-color: #f5f7fa;
  box-sizing: border-box;
  min-height: calc(100vh - 84px);
}
.search-form {
  background: #fff;
  padding: 20px 20px 0 20px;
  margin-bottom: 20px;
  border-radius: 4px;
  box-shadow: var(--el-box-shadow-light);
}
.el-form-item__label{
  padding: 0 5px 0 0 !important;
  font-weight: 500;
}
.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: 16%;
  }
}
.info-tabs {
  margin-bottom: 20px;
}

.table-toolbar {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 响应式表格 */
@media screen and (max-width: 768px) {
  .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{

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