<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" @click="handleAdd"
|
>新建</el-button
|
>
|
<el-button type="danger" :icon="Delete">删除</el-button>
|
<el-button type="info" :icon="Download" @click="handleExport">导出</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"
|
/>
|
</div>
|
<pagination
|
v-if="total>0"
|
:page-num="queryParams.pageNum"
|
:page-size="queryParams.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"
|
@beforeClose="handleBeforeClose"
|
/>
|
<Coal
|
v-if="tabName === 'coal'"
|
v-model:coalDialogFormVisible="dialogFormVisible"
|
:form="form"
|
:title="title"
|
@submit="handleSubmit"
|
/>
|
</el-card>
|
</div>
|
</template>
|
|
<script setup>
|
import { usePaginationApi } from "../../../hooks/usePaginationApi";
|
import { ref, reactive, onMounted } from "vue";
|
import { ElMessage } 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";
|
const { proxy } = getCurrentInstance()
|
|
const {
|
columns
|
} = usePaginationApi(()=> {
|
// 分页逻辑可以在这里处理
|
},{
|
searchText: "",
|
supplierName: "",
|
identifyNumber: "",
|
address: "",
|
pageNum: 1,
|
pageSize: 10,
|
},[
|
{ prop: "supplierName", label: "供应商名称", minWidth: 200 },
|
{ prop: "identifyNumber", label: "统一人识别号", minWidth: 120 },
|
{ prop: "address", 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 },
|
]);
|
|
|
|
|
|
// 弹窗
|
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 tabName = ref("supplier");
|
// 状态变量
|
const loading = ref(false);
|
const total = ref(200);
|
const activeTab = ref("supplier");
|
const selectedRows = ref([]);
|
// 查询参数
|
const queryParams = reactive({
|
searchText: "",
|
supplierName: "",
|
identifyNumber: "",
|
address: "",
|
pageNum: 1,
|
pageSize: 10,
|
});
|
onMounted(() => {
|
handleTabClick({ props: { name: "supplier" } });
|
});
|
// 标签页数据
|
const tabs = reactive([
|
{ name: "supplier", label: "供应商信息" },
|
{ name: "customer", label: "客户信息" },
|
{ name: "coal", label: "煤种信息" },
|
]);
|
// 是否编辑
|
const addOrEdit = ref("add");
|
// 表格数据
|
const tableData = ref([]);
|
// 方法定义
|
const handleQuery = () => {
|
loading.value = true;
|
// 这里添加实际的查询逻辑
|
setTimeout(() => {
|
loading.value = false;
|
}, 500);
|
};
|
|
/* // supplier 供应商数据
|
const supplierColumns = reactive([
|
{ prop: "supplierName", label: "供应商名称", minWidth: 200 },
|
{ prop: "identifyNumber", label: "统一人识别号", minWidth: 120 },
|
{ prop: "address", 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 },
|
]);
|
// customer 客户数据
|
const customerColumns = reactive([
|
{ prop: "customerName", label: "客户名称", minWidth: 200 },
|
{ prop: "identifyNumber", label: "统一人识别号", minWidth: 120 },
|
{ prop: "address", 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 },
|
]);
|
// coal 煤种数据
|
const coalColumns = reactive([
|
{ prop: "coalName", label: "煤种名称", minWidth: 200 },
|
{ prop: "maintainer", label: "维护人", minWidth: 120 },
|
{ prop: "maintenanceDate", label: "维护日期", minWidth: 150 },
|
]); */
|
|
// 标签页点击
|
const handleTabClick = (tab) => {
|
loading.value = true;
|
tabName.value = tab.props.name;
|
tableData.value = [];
|
getList();
|
switch (tabName.value) {
|
case "supplier":
|
dialogFormVisible.value = supplierDialogFormVisible.value;
|
break;
|
case "customer":
|
columns.value = customerColumns;
|
dialogFormVisible.value = customerDialogFormVisible.value;
|
break;
|
case "coal":
|
columns.value = coalColumns;
|
dialogFormVisible.value = coalDialogFormVisible.value;
|
break;
|
}
|
setTimeout(() => {
|
loading.value = false;
|
}, 500);
|
};
|
// 重置查询
|
const resetQuery = () => {
|
Object.keys(queryParams).forEach((key) => {
|
if (key !== "pageNum" && key !== "pageSize") {
|
queryParams[key] = "";
|
}
|
});
|
handleQuery();
|
};
|
// 新增
|
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();
|
}
|
};
|
// 打开弹窗
|
const openDialog = () => {
|
if (addOrEdit.value === "edit") {
|
copyForm.value = JSON.parse(JSON.stringify(form.value));
|
dialogFormVisible.value = true;
|
return;
|
}
|
form.value = {};
|
dialogFormVisible.value = true;
|
};
|
|
// 提交表单
|
const handleSubmit = (val) => {
|
// 拿到提交数据
|
dialogFormVisible.value = false;
|
getList();
|
};
|
const handleDialogFormVisible = (value) => {
|
dialogFormVisible.value = value;
|
};
|
// 选择行
|
const handleSelectionChange = (selection) => {
|
selectedRows.value = selection;
|
};
|
// 编辑
|
const handleEdit = (row) => {
|
if (row.supplierName) {
|
form.value = JSON.parse(JSON.stringify(row));
|
addOrEdit.value = "edit";
|
handleAddEdit(tabName.value);
|
return;
|
}
|
if (selectedRows.value.length === 1) {
|
form.value = JSON.parse(JSON.stringify(selectedRows.value[0]));
|
addOrEdit.value = "edit";
|
handleAddEdit(tabName.value);
|
return;
|
} else {
|
ElMessage.warning("请选择一条数据修改");
|
}
|
};
|
|
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;
|
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);
|
};
|
getList();
|
</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%;
|
}
|
}
|
.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 > * {
|
margin: 0 0 0 0 !important;
|
}
|
.table-toolbar{
|
margin-bottom: 20px !important;
|
}
|
</style>
|
