<template>
|
<div class="app-container">
|
<el-form :inline="true" :model="queryParams" class="search-form">
|
<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.coal"
|
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-space>
|
<el-button type="primary" :icon="Plus" @click="handleAdd">新建</el-button>
|
<el-button type="danger" :icon="Delete" @click="handleDelete">删除</el-button>
|
<el-button type="info" plain :icon="Download">导出</el-button>
|
</el-space>
|
<div>
|
<div>
|
<ETable :loading="tableLoading"
|
:table-data="tableData"
|
:columns="columns"
|
@selection-change="handleSelectionChange"
|
:show-selection="true"
|
:border="true"
|
:maxHeight="480"
|
@edit="handleAdd"></ETable>
|
</div>
|
<pagination
|
v-if="total>0"
|
:page-num="pageNum"
|
:page-size="pageSize"
|
:total="total"
|
@pagination="handleQuery"
|
:layout="'total, prev, pager, next, jumper'"
|
/>
|
</div>
|
</el-card>
|
</div>
|
</template>
|
|
<script setup>
|
import {Download, Delete, Plus} from "@element-plus/icons-vue";
|
import {onMounted, ref} from "vue";
|
import Pagination from "@/components/Pagination/index.vue";
|
import ETable from "@/components/Table/ETable.vue";
|
|
// 查询参数
|
const queryParams = reactive({
|
supplierName: "",
|
coal: "",
|
})
|
// 当前标签
|
const activeTab = ref("task");
|
const tabName = ref("qrCode");
|
// 标签页数据
|
const tabs = reactive([
|
{ name: "task", label: "任务下发" },
|
{ name: "qrCode", label: "二维码管理" },
|
]);
|
// 表格
|
const selectedRows = ref([]);
|
const tableData = ref([]);
|
const tableLoading = ref(false);
|
const total = ref(0);
|
const pageNum = ref(1);
|
const pageSize = ref(10);
|
const columns = ref([
|
{ prop: "saleDate", label: "销售日期", minWidth: 160 },
|
{ prop: "customer", label: "客户", minWidth: 120 },
|
{ prop: "coal", label: "煤种", minWidth: 150 },
|
{ prop: "unit", label: "单位", minWidth: 150 },
|
{ prop: "priceIncludingTax", label: "单价(含税)", minWidth: 150 },
|
{ prop: "inventoryQuantity", label: "库存数量", minWidth: 120 },
|
{ prop: "saleQuantity", label: "销售数量", minWidth: 120 },
|
{ prop: "salePrice", label: "销售单价(含税)", minWidth: 150 },
|
{ prop: "totalAmount", label: "销售总价(含税)", minWidth: 120 },
|
{ prop: "freight", label: "运费", minWidth: 90 },
|
{ prop: "taxCoal", label: "购销煤税率(%)", minWidth: 120 },
|
{ prop: "taxTrans", label: "运输税率(%)", minWidth: 120 },
|
{ prop: "grossProfit", label: "毛利润", minWidth: 90 },
|
{ prop: "netProfit", label: "净利润", minWidth: 90 },
|
{ prop: "registrant", label: "登记人", minWidth: 100 },
|
{ prop: "registrationDate", label: "登记日期", minWidth: 100 },
|
]);
|
|
onMounted(() => {
|
handleTabClick({ props: { name: "task" } });
|
});
|
// 标签页点击
|
const handleTabClick = (tab) => {
|
tabName.value = tab.props.name;
|
tableData.value = [];
|
getList();
|
};
|
// 点击查询
|
const handleQuery = () => {
|
pageNum.value = 1
|
pageSize.value = 10
|
getList()
|
}
|
const getList = () => {
|
// tableLoading.value = true;
|
|
};
|
// 重置查询
|
const resetQuery = () => {
|
Object.keys(queryParams).forEach((key) => {
|
if (key !== "pageNum" && key !== "pageSize") {
|
queryParams[key] = "";
|
}
|
});
|
handleQuery();
|
};
|
|
// 新增、编辑
|
const handleAdd = (row) => {
|
|
};
|
// 删除任务
|
const handleDelete = () => {
|
if (selectedRows.value.length === 0) {
|
proxy.$modal.msgWarning("请选择要删除的数据");
|
return;
|
}
|
const deleteIds = selectedRows.value.map(item => item.id);
|
proxy.$modal.confirm('是否确认删除所选数据项？').then(function() {
|
return delSalesRecord(deleteIds)
|
}).then(() => {
|
handleQuery()
|
proxy.$modal.msgSuccess("删除成功")
|
}).catch(() => {})
|
};
|
// 选择行
|
const handleSelectionChange = (selection) => {
|
selectedRows.value = selection;
|
};
|
</script>
|
|
<style scoped>
|
|
</style>
|
