gaoluyang
3 天以前 00ef76a2e286e338fa3c648ce183e3533ce006ad
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
<template>
  <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>
 
      <!-- 操作按钮区 -->
      <el-row :gutter="24" class="table-toolbar">
        <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" v-show="canExport">导出</el-button>
      </el-row> <!-- 表格组件 -->
      <div>
        <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="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, 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";
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 activeTab = ref("supplier");
 
// 分页状态管理
const pageNum = ref(1);
const pageSizes = ref(10);
const total = ref(0);
 
// 表格状态管理
const selectedRows = ref([]);
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: "煤质字段" }
]);
 
// ===== 工具函数 =====
 
/**
 * 获取地址选择数据并构建映射表
 * @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);
  }
};
 
/**
 * 构建地址映射表
 * @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 },
]);
 
/**
 * 客户表格列配置
 */
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: "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 },
]);
 
/**
 * 煤种表格列配置
 */
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 = {};
  addOrEdit.value = "add";
  loading.value = true;
  tabName.value = tab.props.name;
  tableData.value = [];
 
  // 根据标签页类型设置对应的列配置
  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();
  }
};
 
/**
 * 重置查询条件
 * @description 重置查询参数并重新加载数据
 */
const resetQuery = () => {
  Object.keys(queryParams).forEach((key) => {
    if (key !== "pageNum" && key !== "pageSizes") {
      queryParams[key] = "";
    }
  });
  getList();
};
 
/**
 * 搜索功能
 * @description 重置页码并执行搜索
 */
const search = () => {
  pageNum.value = 1;
  getList();
};
 
/**
 * 新增按钮点击处理
 */
const handleAdd = () => {
  addOrEdit.value = "add";
  handleAddEdit(tabName.value);
};
 
/**
 * 新增/编辑弹窗处理
 * @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));
  } else {
    form.value = {};
  }
  dialogFormVisible.value = true;
};
 
/**
 * 分页处理
 * @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));
  
  // 构建供应商业务地址数组
  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);
};
 
/**
 * 批量删除处理
 * @description 批量删除选中的记录
 */
const handleDelete = async () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning("请选择要删除的数据");
    return;
  }
 
  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 = () => {
  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);
  }
};
 
/**
 * 导出数据
 * @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;
  }
};
 
// ===== 生命周期钩子 =====
 
/**
 * 组件挂载后的初始化操作
 */
onMounted(async () => {
  try {
    // 并行执行初始化操作
    await Promise.all([
      handleTabClick({ props: { name: "supplier" } }),
      fetchAreaOptions(),
      getUserList()
    ]);
  } catch (error) {
    console.error('组件初始化失败:', error);
    ElMessage.error("页面初始化失败,请刷新重试");
  }
});
</script>
 
<style scoped>
/* 响应式布局 */
@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%;
  }
}
 
.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>* {
  margin: 0 0 0 0 !important;
}
 
.table-toolbar {
  margin-bottom: 20px !important;
}
 
.el-form--inline .el-form-item {
  margin-right: 25px;
}
 
.main-container {
  background: red !important;
}
</style>