<template>
|
<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>
|
|
<!-- 操作按钮区 -->
|
<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="tabName === 'supplier' || tabName === 'customer'">导出</el-button>
|
</el-row>
|
<!-- 表格组件 -->
|
<div>
|
<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="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, 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";
|
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";
|
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);
|
const coalDialogFormVisible = ref(false);
|
const supplierDialogFormVisible = ref(false);
|
const dialogFormVisible = ref(false);
|
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 pageSizes = ref(10);
|
const activeTab = ref("supplier");
|
const selectedRows = ref([]);
|
// 查询参数
|
const queryParams = reactive({
|
});
|
// 地址选择数据
|
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();
|
// 标签页数据
|
const tabs = reactive([
|
{ name: "supplier", label: "供应商信息" },
|
{ name: "customer", label: "客户信息" },
|
{ name: "coal", label: "煤种信息" },
|
{ name: "coalQualityMaintenance", label: "煤质维护" },
|
]);
|
// 是否编辑
|
const addOrEdit = ref("add");
|
// 表格数据
|
const tableData = ref([]);
|
// supplier 供应商数据
|
const supplierColumns = ref([
|
{ 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: 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: "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 煤质维护数据
|
const coalQualityMaintenanceColumns = ref([
|
{ prop: "supplierName", label: "全水(<)", minWidth: 200 },
|
{ prop: "identifyNumber", label: "水分析(<)", minWidth: 120 },
|
{ prop: "address", label: "灰分", minWidth: 150 },
|
{ prop: "bank", label: "挥发(>)", minWidth: 100 },
|
{ prop: "bankAccount", label: "硫(<)", minWidth: 100 },
|
{ prop: "contacts", label: "固定碳", minWidth: 100 },
|
{ prop: "contactAddress", label: "高位发热量", minWidth: 100 },
|
{ prop: "maintainer", label: "低位发热量", minWidth: 100 },
|
]);
|
// 标签页点击
|
const handleTabClick = (tab) => {
|
form.value = {};
|
addOrEdit.value = "add";
|
loading.value = true;
|
tabName.value = tab.props.name;
|
tableData.value = [];
|
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;
|
}
|
};
|
// 重置查询
|
const resetQuery = () => {
|
Object.keys(queryParams).forEach((key) => {
|
if (key !== "pageNum" && key !== "pageSizes") {
|
queryParams[key] = "";
|
}
|
});
|
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();
|
} else if (tabName === "coalQualityMaintenance") {
|
dialogFormVisible.value = true;
|
title.value = title.value + "煤质维护";
|
openDialog();
|
}
|
};
|
// 打开弹窗
|
const openDialog = () => {
|
if (addOrEdit.value === "edit") {
|
copyForm.value = JSON.parse(JSON.stringify(form.value));
|
dialogFormVisible.value = true;
|
return;
|
}
|
form.value = {};
|
dialogFormVisible.value = true;
|
};
|
// 分页
|
const handPagination = (val) => {
|
pageNum.value = val.page;
|
pageSizes.value = val.limit;
|
getList();
|
};
|
// 提交表单
|
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) => {
|
dialogFormVisible.value = value;
|
};
|
// 选择行
|
const handleSelectionChange = (selection) => {
|
selectedRows.value = selection;
|
};
|
// 编辑
|
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);
|
};
|
// 批量删除
|
const handleDelete = () => {
|
if (selectedRows.value.length === 0) {
|
ElMessage.warning("请选择要删除的数据");
|
return;
|
}
|
let arr = reactive([]);
|
selectedRows.value.forEach(element => {
|
return arr.push(element.id);
|
});
|
ElMessageBox.confirm("确定删除选中的数据吗？", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.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 handleBeforeClose = () => {
|
dialogFormVisible.value = false;
|
form.value = {};
|
};
|
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", "煤质维护信息");
|
|
}
|
}
|
const Export = (api,name) => {
|
proxy.download(api, {
|
...queryParams.value
|
}, `${name}${new Date().getTime()}.xlsx`)
|
ElMessage.success("导出数据：" + name);
|
};
|
// 选择接口
|
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>
|
/* 响应式布局 */
|
@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>
|
