fixed

zrlibs

2025-03-19 dad44b84ab21f9d1f860760a045015f1cab0aaec

 src/views/examples/report.vue

@@ -5,37 +5,29 @@
        <Row>
          <Col span="6">
            <FormItem label="供应商编码：">
              <Input
                v-model="form.WH_Code"
                placeholder="Enter something..."
                size="small"
              ></Input>
              <Input v-model="form.SupplierCode" size="small">
                <template #suffix>
                  <Icon type="ios-more" />
                </template>
              </Input>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="供应商名称：">
              <Input
                v-model="form.WH_Code"
                placeholder="Enter something..."
                size="small"
              ></Input>
              <Input v-model="form.SupplierName" size="small"></Input>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="ASN单号：">
              <Input
                v-model="form.WH_Code"
                placeholder="Enter something..."
                size="small"
              <Input v-model="form.ASNCode" size="small">
                <template #suffix> <Icon type="ios-more" /> </template
              ></Input>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="存货：">
              <Input
                v-model="form.WH_Code"
                placeholder="Enter something..."
                size="small"
              <Input v-model="form.Invertory" size="small">
                <template #suffix> <Icon type="ios-more" /> </template
              ></Input>
            </FormItem>
          </Col>
@@ -43,106 +35,114 @@
        <Row>
          <Col span="6">
            <FormItem label="代购订单号：">
              <Input
                v-model="form.WH_Code"
                placeholder="Enter something..."
                size="small"
              <Input v-model="form.PurchaseOrderNo" size="small">
                <template #suffix> <Icon type="ios-more" /> </template
              ></Input>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="订单交期：">
              <Input
                v-model="form.WH_Code"
                placeholder="Enter something..."
              <DatePicker
                type="daterange"
                v-model="form.OrderDate"
                separator=" 至 "
                size="small"
              ></Input>
                style="width: 100%"
              ></DatePicker>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="状态：">
              <Input
                v-model="form.WH_Code"
                placeholder="Enter something..."
                size="small"
              ></Input>
              <Select v-model="form.State" size="small">
                <Option :value="0">一</Option>
                <Option :value="1">二</Option>
                <Option :value="2">三</Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="6">
            <FormItem label="采购员：">
              <Input
                v-model="form.WH_Code"
                placeholder="Enter something..."
                size="small"
              ></Input>
              <Input v-model="form.Purchase" size="small"></Input>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="采购类型：">
              <Input
                v-model="form.WH_Code"
                placeholder="Enter something..."
                size="small"
              ></Input>
              <Select v-model="form.PurchaseType" size="small">
                <Option :value="0">一</Option>
                <Option :value="1">二</Option>
                <Option :value="2">三</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="单据类型：">
              <Input
                v-model="form.WH_Code"
                placeholder="Enter something..."
                size="small"
              ></Input>
              <Select v-model="form.DocumentType" size="small">
                <Option :value="0">一</Option>
                <Option :value="1">二</Option>
                <Option :value="2">三</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="关闭状态：">
              <Input
                v-model="form.WH_Code"
                placeholder="Enter something..."
                size="small"
              ></Input>
              <Select v-model="form.CloseState" size="small">
                <Option :value="0">一</Option>
                <Option :value="1">二</Option>
                <Option :value="2">三</Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="6">
            <FormItem label="是否到货完成：">
              <Input
                v-model="form.WH_Code"
                placeholder="Enter something..."
                size="small"
              ></Input>
              <Select v-model="form.IsArrived" size="small">
                <Option :value="0">一</Option>
                <Option :value="1">二</Option>
                <Option :value="2">三</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="ASN创建日期：">
              <Input
                v-model="form.WH_Code"
                placeholder="Enter something..."
                size="small"
              ></Input>
              <DatePicker type="date" v-model="form.CreateTime" size="small" />
            </FormItem>
          </Col>
        </Row>
      </Form>
    </div>
    <div class="buttons">
      <Button type="success" size="small" @click="onExportClick">导出</Button>
      <Space>
        <Button type="primary" size="small" @click="onSearchClick">查询</Button>
        <Button type="primary" size="small" @click="onClearClick">清空</Button>
        <Button type="success" size="small" @click="onExportClick">导出</Button>
      </Space>
    </div>
    <DataTable
      :tableHeight="tableHeight"
      :columns="columns"
      :data="data"
    ></DataTable>
    <div class="table">
      <DataTable
        :tableHeight="tableHeight"
        :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>
  </div>
</template>

<script>
import { ref } from "vue";
import DataTable from "@/components/examples/data-table.vue";
import { exportExcel } from "./excel.js";
export default {
  name: "ExampleReportView",
  components: {
@@ -153,85 +153,172 @@
      columns: [],
      data: [],
      tableHeight: 0,
      // 查询表单的定义
      form: {
        WH_Code: "",
        SupplierCode: "",
        ASNName: "",
        ASNCode: "",
        Invertory: "",
        PurchaseOrderNo: "",
        OrderDate: [],
        State: "",
        Purchase: "",
        PurchaseType: "",
        DocumentType: "",
        CloseState: "",
        IsArrived: "",
        ASNCreateDate: "",
      },
      // 分页参数
      page: 1,
      limit: 30,
      limits: [10, 20, 30],
      total: 0,
      loading: false,
    };
  },
  methods: {
    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() {},
    // 加载数据行
    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() {
      let height =
        this.refView.clientHeight -
@@ -241,11 +328,48 @@
        9;
      this.tableHeight = height;
    },
    onExportClick() {},
    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.loadColumns();
    await this.loadData();
    this.loadData();
    this.$nextTick(() => {
      this.resize();
    });
@@ -264,9 +388,17 @@
  .buttons {
    margin-bottom: 9px;
  }
  .table {
    height: calc(100% - 170px);
  }
  .ivu-form .ivu-form-item-label,
  .ivu-checkbox-wrapper {
    font-size: 12px;
  }
  .ivu-input-wrapper {
    .ivu-icon {
      cursor: pointer;
    }
  }
}
</style>