From cd24c776d772c7ad797891afd779b3b072293ec2 Mon Sep 17 00:00:00 2001
From: zrlibs <jesting_rr@163.com>
Date: 星期五, 21 三月 2025 17:35:07 +0800
Subject: [PATCH] fixed
---
src/views/examples/report.vue | 326 +++++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 282 insertions(+), 44 deletions(-)
diff --git a/src/views/examples/report.vue b/src/views/examples/report.vue
index ced8fda..1103947 100644
--- a/src/views/examples/report.vue
+++ b/src/views/examples/report.vue
@@ -1,9 +1,20 @@
<template>
<div class="example-report-view" ref="refView">
<DataTable
- :tableHeight="tableHeight"
+ :height="height"
+ :formObject="formObject"
+ :buttons="buttons"
:columns="columns"
:data="data"
+ :page="page"
+ :limit="limit"
+ :limits="limits"
+ :total="total"
+ :loading="loading"
+ @on-change="onPageChange"
+ @on-page-size-change="onPageSizeChange"
+ @on-prev="onPrev"
+ @on-next="onNext"
></DataTable>
</div>
</template>
@@ -11,6 +22,7 @@
<script>
import { ref } from "vue";
import DataTable from "@/components/examples/data-table.vue";
+import { exportExcel } from "./excel.js";
export default {
name: "ExampleReportView",
components: {
@@ -18,76 +30,302 @@
},
data() {
return {
+ formObject: {
+ options: {},
+ items: [],
+ },
+ buttons: [
+ {
+ showName: "鏌ヨ",
+ onClick: () => this.onSearchClick(),
+ },
+ {
+ showName: "娓呯┖",
+ onClick: () => this.onClearClick(),
+ },
+ {
+ showName: "瀵煎嚭",
+ onClick: () => this.onExportClick(),
+ },
+ ],
columns: [],
data: [],
- tableHeight: 0,
+ height: 0,
+ // 鍒嗛〉鍙傛暟
+ page: 1,
+ limit: 30,
+ limits: [10, 20, 30],
+ total: 0,
+ loading: false,
};
},
methods: {
- async loadColumns() {
- this.columns = [
+ async loadForm() {
+ this.formObject.options = {
+ labelWidth: 110,
+ };
+ this.formObject.items = [
{
- type: "index",
- title: " ",
- render: (h, { index }) => {
- return h(index);
- },
- width: 50,
+ label: "渚涘簲鍟嗙紪鐮侊細",
+ field: "SupplierCode",
+ value: "",
+ type: "input",
+ suffix: "ios-more",
+ span: 6,
+ onSuffixClick: () => {},
},
{
- key: "WH_Code",
- title: "浠撳簱缂栫爜",
- width: 150,
+ label: "渚涘簲鍟嗗悕绉帮細",
+ field: "SupplierName",
+ value: "",
+ type: "input",
+ suffix: "ios-more",
+ span: 6,
+ onSuffixClick: () => {},
},
{
- key: "WH_Name",
- title: "浠撳簱鍚嶇О",
+ label: "ASN鍗曞彿锛�,
+ field: "ASNCode",
+ value: "",
+ type: "input",
+ suffix: "ios-more",
+ span: 6,
+ onSuffixClick: () => {},
},
{
- key: "WH_Leader",
- title: "浠撳簱璐熻矗浜�,
- width: 100,
+ label: "瀛樿揣锛�,
+ field: "Invertory",
+ value: "",
+ type: "input",
+ suffix: "ios-more",
+ span: 6,
+ onSuffixClick: () => {},
},
{
- key: "WH_Tel",
- title: "浠撳簱鐢佃瘽",
- width: 100,
+ label: "浠ｈ喘璁㈠崟鍙凤細",
+ field: "PurchaseOrderNo",
+ value: "",
+ type: "input",
+ suffix: "ios-more",
+ span: 6,
+ onSuffixClick: () => {},
},
{
- key: "Address",
- title: "鍦板潃",
- width: 100,
+ label: "璁㈠崟浜ゆ湡锛�,
+ field: "OrderDate",
+ value: "",
+ type: "daterange",
+ span: 12,
+ onChange: () => {},
},
{
- key: "TopLevelWH_Code",
- title: "涓婄骇浠撳簱缂栫爜",
- width: 100,
+ label: "鐘舵�锛�,
+ field: "State",
+ value: "",
+ type: "input",
+ span: 6,
+ options: [
+ { labe: "涓�, value: 1 },
+ { labe: "浜�, value: 2 },
+ { labe: "涓�, value: 3 },
+ ],
},
{
- key: "IsThisLevel",
- title: "鏄惁鏈骇",
- width: 70,
- },
- {
- key: "IsEscrow",
- title: "鏄惁浠ｇ",
- width: 70,
- },
- {
- key: "IsEnable",
- title: "鏄惁鍚敤",
- width: 70,
+ label: "閲囪喘鍛橈細",
+ field: "Purchase",
+ value: "",
+ type: "input",
+ span: 6,
},
];
},
- async loadData() {},
+ async loadColumns() {
+ this.columns = [
+ {
+ key: "index",
+ title: " ",
+ render: (h, { index }) => {
+ return h("div", (this.page - 1) * this.limit + index + 1);
+ },
+ width: 40,
+ align: "center",
+ },
+ {
+ key: "ASNCode",
+ title: "ASN鍗曞彿",
+ width: 100,
+ sortable: true,
+ resizable: true,
+ },
+ {
+ key: "CloseState",
+ title: "鍏抽棴鐘舵�",
+ width: 100,
+ sortable: true,
+ resizable: true,
+ },
+ {
+ key: "InventoryState",
+ title: "瀛樿揣鐘舵�",
+ width: 100,
+ sortable: true,
+ resizable: true,
+ },
+ {
+ key: "InvertoryName",
+ title: "瀛樿揣鍚嶇О",
+ width: 100,
+ resizable: true,
+ },
+ {
+ key: "SpecModel",
+ title: "瑙勬牸鍨嬪彿",
+ width: 100,
+ sortable: true,
+ resizable: true,
+ },
+ {
+ key: "AuditState",
+ title: "瀹℃牳鐘舵�",
+ width: 100,
+ resizable: true,
+ },
+ {
+ key: "SendDate",
+ title: "鍙戣揣鏃ユ湡",
+ width: 100,
+ sortable: true,
+ resizable: true,
+ },
+ {
+ key: "SupplierCode",
+ title: "渚涘簲鍟嗙紪鐮�,
+ width: 100,
+ resizable: true,
+ },
+ {
+ key: "SupplierName",
+ title: "渚涘簲鍟嗗悕绉�,
+ width: 100,
+ resizable: true,
+ },
+ {
+ key: "Creator",
+ title: "鍒涘缓浜�,
+ width: 100,
+ },
+ {
+ key: "CreateTime",
+ title: "鍒涘缓鏃堕棿",
+ width: 100,
+ sortable: true,
+ },
+ {
+ key: "PurchasePoint",
+ title: "閲囪喘鐐�,
+ width: 100,
+ },
+ ];
+ },
+ // 鍔犺浇鏁版嵁琛�+ async loadData() {
+ let msg = this.$Message.loading("姝ｅ湪鍔犺浇鏁版嵁...");
+ this.loading = true;
+
+ let { data, total } = await this.fakeDataList();
+
+ msg();
+
+ this.data = data;
+ this.total = total;
+ this.loading = false;
+ },
+ // 鍔犺浇鍏ㄩ儴鏁版嵁(瀵煎嚭)
+ async loadAllData() {
+ let msg = this.$Message.loading("姝ｅ湪鍔犺浇鏁版嵁...");
+ this.loading = true;
+
+ let { data } = await this.fakeDataList(this.total);
+
+ msg();
+
+ this.loading = false;
+
+ return data;
+ },
+ // 娴嬭瘯鏁版嵁鍒楄〃
+ fakeDataList(limit) {
+ return new Promise((resolve) => {
+ let total = 99;
+ let fakeList = [];
+ for (let i = 0; i < (limit || this.limit); i++) {
+ let row = {
+ ASNCode: `ASN鍗曞彿-${(this.page - 1) * this.limit + i + 1}`,
+ CloseState: `鍏抽棴鐘舵�-${(this.page - 1) * this.limit + i + 1}`,
+ InventoryState: `瀛樿揣鐘舵�-${(this.page - 1) * this.limit + i + 1}`,
+ InvertoryName: `瀛樿揣鍚嶇О-${(this.page - 1) * this.limit + i + 1}`,
+ SpecModel: `瑙勬牸鍨嬪彿-${(this.page - 1) * this.limit + i + 1}`,
+ AuditState: `瀹℃牳鐘舵�-${(this.page - 1) * this.limit + i + 1}`,
+ SendDate: `鍙戣揣鏃ユ湡-${(this.page - 1) * this.limit + i + 1}`,
+ SupplierCode: `渚涘簲鍟嗙紪鐮�${(this.page - 1) * this.limit + i + 1}`,
+ SupplierName: `渚涘簲鍟嗗悕绉�${(this.page - 1) * this.limit + i + 1}`,
+ Creator: `鍒涘缓浜�${(this.page - 1) * this.limit + i + 1}`,
+ CreateTime: `鍒涘缓鏃堕棿-${(this.page - 1) * this.limit + i + 1}`,
+ PurchasePoint: `閲囪喘鐐�${(this.page - 1) * this.limit + i + 1}`,
+ };
+ if ((this.page - 1) * this.limit + i + 1 < 100) fakeList.push(row);
+ }
+ setTimeout(() => {
+ resolve({ data: fakeList, total });
+ }, 1 * 1000);
+ });
+ },
resize() {
- this.tableHeight = this.refView.clientHeight;
+ this.height = this.refView.clientHeight - 20;
+ },
+ onSearchClick() {
+ alert(JSON.stringify(this.form, "", " "));
+ },
+ onClearClick() {
+ this.form.SupplierCode = "";
+ this.form.ASNName = "";
+ this.form.ASNCode = "";
+ this.form.Invertory = "";
+ this.form.PurchaseOrderNo = "";
+ this.form.OrderDate = [];
+ this.form.State = "";
+ this.form.Purchase = "";
+ this.form.PurchaseType = "";
+ this.form.DocumentType = "";
+ this.form.CloseState = "";
+ this.form.IsArrived = "";
+ this.form.ASNCreateDate = "";
+ },
+ async onExportClick() {
+ let datas = await this.loadAllData();
+ await exportExcel(this, datas);
+ },
+ onPageChange(page) {
+ this.page = page;
+ this.loadData();
+ },
+ onPageSizeChange(limit) {
+ this.limit = limit;
+ this.loadData();
+ },
+ onPrev(page) {
+ this.page = page;
+ this.loadData();
+ },
+ onNext(page) {
+ this.page = page;
+ this.loadData();
},
},
async mounted() {
+ await this.loadForm();
await this.loadColumns();
- await this.loadData();
+ this.loadData();
this.$nextTick(() => {
this.resize();
});
@@ -99,7 +337,7 @@
};
</script>
-<style lang="less" scoped>
+<style lang="less">
.example-report-view {
height: 100%;
}
--
Gitblit v1.9.1