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 | 414 ++++++++++++++++++++++++++++++++++------------------------ 1 files changed, 243 insertions(+), 171 deletions(-) diff --git a/src/views/examples/report.vue b/src/views/examples/report.vue index 311fa7e..1103947 100644 --- a/src/views/examples/report.vue +++ b/src/views/examples/report.vue @@ -1,141 +1,20 @@ <template> <div class="example-report-view" ref="refView"> - <div class="search-form"> - <Form :model="form" :label-width="110"> - <Row> - <Col span="6"> - <FormItem label="渚涘簲鍟嗙紪鐮侊細"> - <Input - v-model="form.WH_Code" - placeholder="Enter something..." - size="small" - ></Input> - </FormItem> - </Col> - <Col span="6"> - <FormItem label="渚涘簲鍟嗗悕绉帮細"> - <Input - v-model="form.WH_Code" - placeholder="Enter something..." - size="small" - ></Input> - </FormItem> - </Col> - <Col span="6"> - <FormItem label="ASN鍗曞彿锛�> - <Input - v-model="form.WH_Code" - placeholder="Enter something..." - size="small" - ></Input> - </FormItem> - </Col> - <Col span="6"> - <FormItem label="瀛樿揣锛�> - <Input - v-model="form.WH_Code" - placeholder="Enter something..." - size="small" - ></Input> - </FormItem> - </Col> - </Row> - <Row> - <Col span="6"> - <FormItem label="浠h喘璁㈠崟鍙凤細"> - <Input - v-model="form.WH_Code" - placeholder="Enter something..." - size="small" - ></Input> - </FormItem> - </Col> - <Col span="12"> - <FormItem label="璁㈠崟浜ゆ湡锛�> - <Input - v-model="form.WH_Code" - placeholder="Enter something..." - size="small" - ></Input> - </FormItem> - </Col> - <Col span="6"> - <FormItem label="鐘舵�锛�> - <Input - v-model="form.WH_Code" - placeholder="Enter something..." - size="small" - ></Input> - </FormItem> - </Col> - </Row> - <Row> - <Col span="6"> - <FormItem label="閲囪喘鍛橈細"> - <Input - v-model="form.WH_Code" - placeholder="Enter something..." - size="small" - ></Input> - </FormItem> - </Col> - <Col span="6"> - <FormItem label="閲囪喘绫诲瀷锛�> - <Input - v-model="form.WH_Code" - placeholder="Enter something..." - size="small" - ></Input> - </FormItem> - </Col> - <Col span="6"> - <FormItem label="鍗曟嵁绫诲瀷锛�> - <Input - v-model="form.WH_Code" - placeholder="Enter something..." - size="small" - ></Input> - </FormItem> - </Col> - <Col span="6"> - <FormItem label="鍏抽棴鐘舵�锛�> - <Input - v-model="form.WH_Code" - placeholder="Enter something..." - size="small" - ></Input> - </FormItem> - </Col> - </Row> - <Row> - <Col span="6"> - <FormItem label="鏄惁鍒拌揣瀹屾垚锛�> - <Input - v-model="form.WH_Code" - placeholder="Enter something..." - size="small" - ></Input> - </FormItem> - </Col> - <Col span="6"> - <FormItem label="ASN鍒涘缓鏃ユ湡锛�> - <Input - v-model="form.WH_Code" - placeholder="Enter something..." - size="small" - ></Input> - </FormItem> - </Col> - </Row> - </Form> - </div> - <div class="buttons"> - <Button type="success" size="small" @click="onExportClick">瀵煎嚭</Button> - </div> <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> @@ -143,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: { @@ -150,102 +30,302 @@ }, data() { return { + formObject: { + options: {}, + items: [], + }, + buttons: [ + { + showName: "鏌ヨ", + onClick: () => this.onSearchClick(), + }, + { + showName: "娓呯┖", + onClick: () => this.onClearClick(), + }, + { + showName: "瀵煎嚭", + onClick: () => this.onExportClick(), + }, + ], columns: [], data: [], - tableHeight: 0, - form: { - WH_Code: "", - }, + height: 0, + // 鍒嗛〉鍙傛暟 + page: 1, + limit: 30, + limits: [10, 20, 30], + total: 0, + loading: false, }; }, methods: { + async loadForm() { + this.formObject.options = { + labelWidth: 110, + }; + this.formObject.items = [ + { + label: "渚涘簲鍟嗙紪鐮侊細", + field: "SupplierCode", + value: "", + type: "input", + suffix: "ios-more", + span: 6, + onSuffixClick: () => {}, + }, + { + label: "渚涘簲鍟嗗悕绉帮細", + field: "SupplierName", + value: "", + type: "input", + suffix: "ios-more", + span: 6, + onSuffixClick: () => {}, + }, + { + label: "ASN鍗曞彿锛�, + field: "ASNCode", + value: "", + type: "input", + suffix: "ios-more", + span: 6, + onSuffixClick: () => {}, + }, + { + label: "瀛樿揣锛�, + field: "Invertory", + value: "", + type: "input", + suffix: "ios-more", + span: 6, + onSuffixClick: () => {}, + }, + { + label: "浠h喘璁㈠崟鍙凤細", + field: "PurchaseOrderNo", + value: "", + type: "input", + suffix: "ios-more", + span: 6, + onSuffixClick: () => {}, + }, + { + label: "璁㈠崟浜ゆ湡锛�, + field: "OrderDate", + value: "", + type: "daterange", + span: 12, + onChange: () => {}, + }, + { + label: "鐘舵�锛�, + field: "State", + value: "", + type: "input", + span: 6, + options: [ + { labe: "涓�, value: 1 }, + { labe: "浜�, value: 2 }, + { labe: "涓�, value: 3 }, + ], + }, + { + label: "閲囪喘鍛橈細", + field: "Purchase", + value: "", + type: "input", + span: 6, + }, + ]; + }, async loadColumns() { this.columns = [ { - type: "index", + key: "index", title: " ", render: (h, { index }) => { - return h(index); + return h("div", (this.page - 1) * this.limit + index + 1); }, - width: 50, + width: 40, + align: "center", }, { - key: "", + key: "ASNCode", title: "ASN鍗曞彿", width: 100, + sortable: true, + resizable: true, }, { - key: "", + key: "CloseState", title: "鍏抽棴鐘舵�", width: 100, + sortable: true, + resizable: true, }, { - key: "", + key: "InventoryState", title: "瀛樿揣鐘舵�", width: 100, + sortable: true, + resizable: true, }, { - key: "", + key: "InvertoryName", title: "瀛樿揣鍚嶇О", width: 100, + resizable: true, }, { - key: "", + key: "SpecModel", title: "瑙勬牸鍨嬪彿", width: 100, + sortable: true, + resizable: true, }, { - key: "", + key: "AuditState", title: "瀹℃牳鐘舵�", width: 100, + resizable: true, }, { - key: "", + key: "SendDate", title: "鍙戣揣鏃ユ湡", width: 100, + sortable: true, + resizable: true, }, { - key: "", + key: "SupplierCode", title: "渚涘簲鍟嗙紪鐮�, width: 100, + resizable: true, }, { - key: "", + key: "SupplierName", title: "渚涘簲鍟嗗悕绉�, width: 100, + resizable: true, }, { - key: "", + key: "Creator", title: "鍒涘缓浜�, width: 100, }, { - key: "", + key: "CreateTime", title: "鍒涘缓鏃堕棿", width: 100, + sortable: true, }, { - key: "", + key: "PurchasePoint", title: "閲囪喘鐐�, width: 100, }, ]; }, - async loadData() {}, - resize() { - let height = - this.refView.clientHeight - - this.$el.querySelector(".search-form").clientHeight - - this.$el.querySelector(".buttons").clientHeight - - 9 - - 9; - this.tableHeight = height; + // 鍔犺浇鏁版嵁琛�+ async loadData() { + let msg = this.$Message.loading("姝e湪鍔犺浇鏁版嵁..."); + this.loading = true; + + let { data, total } = await this.fakeDataList(); + + msg(); + + this.data = data; + this.total = total; + this.loading = false; }, - onExportClick() {}, + // 鍔犺浇鍏ㄩ儴鏁版嵁(瀵煎嚭) + async loadAllData() { + let msg = this.$Message.loading("姝e湪鍔犺浇鏁版嵁..."); + 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.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(); }); @@ -260,13 +340,5 @@ <style lang="less"> .example-report-view { height: 100%; - .search-form, - .buttons { - margin-bottom: 9px; - } - .ivu-form .ivu-form-item-label, - .ivu-checkbox-wrapper { - font-size: 12px; - } } </style> \ No newline at end of file -- Gitblit v1.9.1