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