<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
|
:style="{ width: '100%' }"
|
/>
|
</el-form-item>
|
<el-form-item label="供应商名称">
|
<el-input
|
v-model="queryParams.supplierName"
|
placeholder="请输入"
|
clearable
|
:style="{ width: '100%' }"
|
/>
|
</el-form-item>
|
<el-form-item label="统一人识别号">
|
<el-input
|
v-model="queryParams.identifyNumber"
|
placeholder="请输入"
|
clearable
|
:style="{ width: '100%' }"
|
/>
|
</el-form-item>
|
<el-form-item label="经营地址">
|
<el-input
|
v-model="queryParams.address"
|
placeholder="请输入"
|
clearable
|
:style="{ width: '100%' }"
|
/>
|
</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>
|
<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" >新建</el-button
|
>
|
<el-button type="danger" :icon="Delete">删除</el-button>
|
<el-button type="info" :icon="Download">导出</el-button>
|
</el-row>
|
<div>
|
<el-table :data="tableData" border :span-method="mergeSameRows">
|
<el-table-column type="selection" width="55" align="center" />
|
<el-table-column label="序号" type="index" width="60" align="center" />
|
<el-table-column prop="name" label="供货商名称" width="180" />
|
<el-table-column prop="type" label="煤种" />
|
<el-table-column prop="unit" label="单位" />
|
<el-table-column prop="number" label="库存数量" />
|
<el-table-column prop="money" label="单价（含税）" />
|
<el-table-column prop="money1" label="总价（含税）" />
|
<el-table-column prop="money2" label="成本单价" />
|
<el-table-column prop="money3" label="利润" />
|
<el-table-column prop="createUser" label="登记人" />
|
<el-table-column prop="createTime" label="登记日期" />
|
</el-table>
|
</div>
|
</el-card>
|
</div>
|
</template>
|
|
<script setup>
|
import {onMounted, ref} from "vue";
|
import {Delete, Download, Plus} from "@element-plus/icons-vue";
|
|
const tableData = ref([])
|
const columns = ref([])
|
const tableLoading = ref(false);
|
const total = ref(0);
|
// 当前标签
|
const activeTab = ref("pendingInbound");
|
const tabName = ref("pendingInbound");
|
// 标签页数据
|
const tabs = reactive([
|
{ name: "pendingInbound", label: "待入库" },
|
{ name: "officialInventory", label: "正式库存" },
|
]);
|
// 查询参数
|
const queryParams = reactive({
|
searchText: "",
|
supplierName: "",
|
identifyNumber: "",
|
address: "",
|
})
|
onMounted(() => {
|
handleTabClick({ props: { name: "supplier" } });
|
});
|
// 标签页点击
|
const handleTabClick = (tab) => {
|
getList();
|
tableLoading.value = true;
|
tabName.value = tab.props.name;
|
tableData.value = [];
|
getList();
|
// switch (tabName.value) {
|
// case "pendingInbound":
|
// columns.value = pendingColumns;
|
// break;
|
// case "officialInventory":
|
// columns.value = officialColumns;
|
// break;
|
// }
|
setTimeout(() => {
|
tableLoading.value = false;
|
}, 500);
|
};
|
// 点击查询
|
const handleQuery = () => {
|
tableLoading.value = true;
|
setTimeout(() => {
|
tableLoading.value = false;
|
}, 500);
|
}
|
const getList = () => {
|
tableLoading.value = true;
|
setTimeout(() => {
|
// 暂时引入测试数据
|
tableData.value = [
|
{ name: "供应商A", type: "动力煤", unit: "吨", number: 100, money: 500 },
|
{ name: "供应商A", type: "动力煤", unit: "吨", number: 100, money: 500 },
|
{ name: "供应商B", type: "焦煤", unit: "吨", number: 300, money: 789 },
|
{ name: "供应商B", type: "焦煤", unit: "吨", number: 256, money: 800 },
|
{ name: "供应商C", type: "无烟煤", unit: "吨", number: 256, money: 700 }
|
];
|
total.value = tableData.value.length;
|
tableLoading.value = false;
|
}, 500);
|
};
|
// 重置查询
|
const resetQuery = () => {
|
Object.keys(queryParams).forEach((key) => {
|
if (key !== "pageNum" && key !== "pageSize") {
|
queryParams[key] = "";
|
}
|
});
|
handleQuery();
|
};
|
// 合并相同行的方法
|
const mergeSameRows = ({ row, column, rowIndex, columnIndex }) => {
|
const fieldsToMerge = ['number', 'money']
|
|
if (fieldsToMerge.includes(column.property)) {
|
const prevRow = tableData.value[rowIndex - 1]
|
const nextRow = tableData.value[rowIndex + 1]
|
// 判断当前行和下一行是否相等
|
if (
|
(!prevRow || prevRow[column.property] !== row[column.property]) &&
|
(!nextRow || nextRow[column.property] === row[column.property])
|
) {
|
let count = 1
|
while (
|
tableData.value[rowIndex + count] &&
|
tableData.value[rowIndex + count][column.property] === row[column.property]
|
) {
|
count++
|
}
|
return { rowspan: count, colspan: 1 }
|
} else if (prevRow && prevRow[column.property] === row[column.property]) {
|
// 隐藏被合并的单元格
|
return { rowspan: 0, colspan: 0 }
|
}
|
return { rowspan: 1, colspan: 1 }
|
}
|
|
// 其他列不合并
|
return { rowspan: 1, colspan: 1 }
|
}
|
</script>
|
|
<style scoped>
|
.app-container{
|
box-sizing: border-box;
|
}
|
.search-form {
|
background-color: #fff;
|
padding: 20px 20px 0 20px;
|
margin-bottom: 20px;
|
border-radius: 4px;
|
box-shadow: var(--el-box-shadow-light);
|
}
|
.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: 18%;
|
}
|
}
|
|
.table-toolbar {
|
margin-bottom: 20px;
|
display: flex;
|
flex-wrap: wrap;
|
gap: 10px;
|
}
|
|
:deep(.el-table) {
|
margin-bottom: 20px;
|
overflow-x: auto;
|
}
|
|
:deep(.el-table th) {
|
background-color: #f5f7fa;
|
}
|
|
/* 响应式样式 */
|
@media screen and (max-width: 768px) {
|
:deep(.el-table) {
|
width: 100%;
|
overflow-x: auto;
|
}
|
}
|
/* 表格工具栏 */
|
.table-toolbar, .table-toolbar > * {
|
margin: 0 0 0 0 !important;
|
}
|
.table-toolbar{
|
margin-bottom: 20px !important;
|
}
|
</style>
|
