<template>
|
<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-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 :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"
|
@viewRow="handleView"
|
@selection-change="handleSelectionChange"
|
: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"
|
>
|
{{ getFieldDisplayName(field.trim()) }}
|
</el-tag>
|
</template>
|
<template v-else>
|
<el-tag size="small" type="primary">
|
{{ 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"
|
/>
|
<managementDialog
|
|
></managementDialog>
|
</el-card>
|
</div>
|
</template>
|
|
<script setup>
|
import {
|
computed,
|
getCurrentInstance,
|
onMounted,
|
reactive,
|
ref,
|
nextTick,
|
} from "vue";
|
import { ElMessage, ElMessageBox } from "element-plus";
|
import { Delete, Download, Plus } from "@element-plus/icons-vue";
|
|
// ===== 组件导入 =====
|
import DataTable from "@/components/Table/ETable.vue";
|
import Pagination from "@/components/Pagination";
|
import managementDialog from "./mould/managementDialog.vue";
|
// ===== API 服务导入 =====
|
import { delSupply, getSupply } from "@/api/basicInformation/supplier.js";
|
import { useDelete } from "@/hooks/useDelete.js";
|
import { testUserList } from "@/api/tool/publicInterface.js";
|
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("management");
|
const loading = ref(false);
|
const activeTab = ref("management");
|
|
// 分页状态管理
|
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: "management", label: "供应商信息" },
|
{ name: "customer", label: "客户信息" },
|
]);
|
|
// ===== 工具函数 =====
|
|
|
/**
|
* 构建地址映射表
|
* @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();
|
console.log("获取用户列表数据:", res);
|
console.log("userMap:", userMap.value);
|
if (res && res.data) {
|
userList.value = res.data;
|
userList.value.forEach((user) => {
|
userMap.value[user.userId] = user.nickName;
|
});
|
}
|
} 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 ["management"].includes(tabName.value);
|
});
|
|
/**
|
* 搜索框占位符文本
|
*/
|
const searchPlaceholder = computed(() => {
|
const placeholderMap = {
|
management: "供应商/统一识别码/详细地址",
|
};
|
return placeholderMap[tabName.value] || "请输入搜索信息";
|
});
|
|
/**
|
* 是否显示搜索框
|
*/
|
const shouldShowSearch = computed(() => {
|
return [
|
"management",
|
].includes(tabName.value);
|
});
|
|
/**
|
* 当前选中行数量
|
*/
|
const selectedCount = computed(() => selectedRows.value.length);
|
|
// ===== 表格列配置 =====
|
|
/**
|
* 供应商表格列配置
|
*/
|
const management = ref([
|
{ prop: "equipmentId", label: "设备编号", minWidth: 100 },
|
{ prop: "equipmentName", label: "设备名称", minWidth: 100 },
|
{ prop: "quantity", label: "数量", minWidth: 100 },
|
{ prop: "specification", label: "规格型号", minWidth: 100 },
|
{ prop: "usageStatus", label: "使用状态", minWidth: 100 },
|
{ prop: "usingDepartment", label: "使用部门", minWidth: 100 },
|
{ prop: "userId", label: "使用人", minWidth: 100 },
|
{ prop: "purchaseDate", label: "采购日期", minWidth: 100 },
|
{ prop: "purchasePrice", label: "采购价格", minWidth: 100 },
|
]);
|
|
|
// ===== 事件处理函数 =====
|
|
/**
|
* 标签页切换事件处理
|
* @param {Object} tab - 标签页对象
|
* @description 处理标签页切换，重置表单和状态，加载对应数据
|
*/
|
const handleTabClick = (tab) => {
|
// 重置表单和状态
|
form.value = {};
|
addOrEdit.value = "add";
|
loading.value = true;
|
tabName.value = tab.props.name;
|
tableData.value = [];
|
pageNum.value = 1;
|
pageSizes.value = 10;
|
total.value = 0;
|
queryParams.searchAll = "";
|
// 根据标签页类型设置对应的列配置
|
const tabConfig = {
|
management: () => {
|
columns.value = management.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"
|
? "新增"
|
: addOrEdit.value === "edit"
|
? "编辑"
|
: "查看";
|
|
const tabTitleMap = {
|
supplier: "供应商信息",
|
customer: "客户信息",
|
};
|
|
title.value = `${actionText}${tabTitleMap[currentTabName] || ""}`;
|
openDialog();
|
};
|
|
/**
|
* 打开弹窗
|
* @description 根据编辑状态决定是否复制表单数据
|
*/
|
const openDialog = () => {
|
if (addOrEdit.value === "edit" || addOrEdit.value === "viewRow") {
|
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 deleteApiMap = {
|
management: delSupply,
|
};
|
const {handleDeleteBatch :handleDelete} = useDelete({
|
deleteApi: () => deleteApiMap[tabName.value],
|
selectedRows: selectedRows,
|
getList: () => getList,
|
tableData: tableData,
|
total: total,
|
confirmText: "确认删除选中的数据吗？",
|
successText: "删除成功",
|
})
|
|
/**
|
* 关闭弹窗处理
|
*/
|
const handleBeforeClose = () => {
|
dialogFormVisible.value = false;
|
form.value = {};
|
};
|
|
/**
|
* 导出数据
|
* @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 = {
|
management: () => 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;
|
}
|
};
|
|
const handleView = (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 = "viewRow";
|
handleAddEdit(tabName.value);
|
};
|
|
|
// ===== 生命周期钩子 =====
|
|
/**
|
* 组件挂载后的初始化操作
|
*/
|
onMounted(async () => {
|
try {
|
// 并行执行初始化操作
|
await Promise.all([
|
handleTabClick({ props: { name: "management" } }),
|
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>
|
