<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">
|
<el-tab-pane
|
v-for="tab in tabs"
|
:key="tab.name"
|
:label="tab.label"
|
:name="tab.name"
|
/>
|
</el-tabs>
|
<!-- 操作按钮区 -->
|
<el-space>
|
<el-button type="primary" :icon="Plus" @click="openDia('add')">新建</el-button>
|
<el-button type="danger" :icon="Delete" @click="handleDelete">删除</el-button>
|
<el-button type="info" plain :icon="Download" @click="handleExport">导出</el-button>
|
</el-space>
|
<!-- 表格组件 -->
|
<div>
|
<ETable :loading="tableLoading"
|
:table-data="tableData"
|
:columns="columns"
|
@selection-change="handleSelectionChange"
|
:show-selection="true"
|
:border="true"
|
:maxHeight="480"
|
@edit="openDia"></ETable>
|
</div>
|
<pagination
|
v-if="total>0"
|
:page-num="pageNum"
|
:page-size="pageSize"
|
:total="total"
|
@pagination="handleQuery"
|
:layout="'total, prev, pager, next, jumper'"
|
/>
|
</el-card>
|
<form-dia ref="formDia" @closeDia="handleQuery"></form-dia>
|
</div>
|
</template>
|
|
<script setup>
|
import {ref, reactive} from "vue";
|
const { proxy } = getCurrentInstance()
|
import {Delete, Download, Plus} from "@element-plus/icons-vue";
|
import ETable from "@/components/Table/ETable.vue";
|
import Pagination from "@/components/Pagination/index.vue";
|
import FormDia from "@/views/salesOutbound/components/formDia.vue";
|
|
const formDia = ref()
|
const activeTab = ref("out");
|
// 标签页数据
|
const tabs = reactive([
|
{ name: "out", label: "销售出库" },
|
]);
|
// 表格数据
|
const tableLoading = ref(false);
|
const tableData = ref([]);
|
const columns = ref([
|
{ prop: "supplierName", label: "销售日期", minWidth: 160 },
|
{ prop: "identifyNumber", label: "客户", minWidth: 120 },
|
{ prop: "address", label: "煤种", minWidth: 150 },
|
{ prop: "unit", 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 selectedRows = ref([]);
|
const total = ref(0);
|
const pageNum = ref(1);
|
const pageSize = ref(10);
|
// 查询参数
|
const queryParams = reactive({
|
searchText: "",
|
supplierName: "",
|
identifyNumber: "",
|
address: "",
|
})
|
|
// 点击查询
|
const handleQuery = () => {
|
tableLoading.value = true;
|
setTimeout(() => {
|
tableLoading.value = false;
|
}, 500);
|
}
|
// 重置查询
|
const resetQuery = () => {
|
Object.keys(queryParams).forEach((key) => {
|
if (key !== "pageNum" && key !== "pageSize") {
|
queryParams[key] = "";
|
}
|
});
|
handleQuery();
|
};
|
// 新增出库
|
const openDia = (type, row) => {
|
nextTick(() => {
|
formDia.value?.openDialog(type, row)
|
})
|
};
|
// 删除出库
|
const handleDelete = () => {
|
|
};
|
// 导出出库
|
const handleExport = () => {
|
|
};
|
// 选择行
|
const handleSelectionChange = (selection) => {
|
selectedRows.value = selection;
|
};
|
</script>
|
|
<style scoped>
|
|
</style>
|
