fixed

zrlibs

2025-03-21 cd24c776d772c7ad797891afd779b3b072293ec2

 src/views/examples/report.vue

@@ -1,141 +1,21 @@
<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.SupplierCode" size="small">
                <template #suffix>
                  <Icon type="ios-more" />
                </template>
              </Input>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="供应商名称：">
              <Input v-model="form.SupplierName" size="small"></Input>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="ASN单号：">
              <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.Invertory" size="small">
                <template #suffix> <Icon type="ios-more" /> </template
              ></Input>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="6">
            <FormItem label="代购订单号：">
              <Input v-model="form.PurchaseOrderNo" size="small">
                <template #suffix> <Icon type="ios-more" /> </template
              ></Input>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="订单交期：">
              <DatePicker
                type="daterange"
                v-model="form.OrderDate"
                separator=" 至 "
                size="small"
                style="width: 100%"
              ></DatePicker>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="状态：">
              <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.Purchase" size="small"></Input>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="采购类型：">
              <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="单据类型：">
              <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="关闭状态：">
              <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="是否到货完成：">
              <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创建日期：">
              <DatePicker type="date" v-model="form.CreateTime" size="small" />
            </FormItem>
          </Col>
        </Row>
      </Form>
    </div>
    <div class="buttons">
      <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>
    <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>
    <DataTable
      :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>

@@ -150,25 +30,27 @@
  },
  data() {
    return {
      formObject: {
        options: {},
        items: [],
      },
      buttons: [
        {
          showName: "查询",
          onClick: () => this.onSearchClick(),
        },
        {
          showName: "清空",
          onClick: () => this.onClearClick(),
        },
        {
          showName: "导出",
          onClick: () => this.onExportClick(),
        },
      ],
      columns: [],
      data: [],
      tableHeight: 0,
      // 查询表单的定义
      form: {
        SupplierCode: "",
        ASNName: "",
        ASNCode: "",
        Invertory: "",
        PurchaseOrderNo: "",
        OrderDate: [],
        State: "",
        Purchase: "",
        PurchaseType: "",
        DocumentType: "",
        CloseState: "",
        IsArrived: "",
        ASNCreateDate: "",
      },
      height: 0,
      // 分页参数
      page: 1,
      limit: 30,
@@ -178,6 +60,85 @@
    };
  },
  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: "代购订单号：",
          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 = [
        {
@@ -320,13 +281,7 @@
      });
    },
    resize() {
      let height =
        this.refView.clientHeight -
        this.$el.querySelector(".search-form").clientHeight -
        this.$el.querySelector(".buttons").clientHeight -
        9 -
        9;
      this.tableHeight = height;
      this.height = this.refView.clientHeight - 20;
    },
    onSearchClick() {
      alert(JSON.stringify(this.form, "", "    "));
@@ -368,6 +323,7 @@
    },
  },
  async mounted() {
    await this.loadForm();
    await this.loadColumns();
    this.loadData();
    this.$nextTick(() => {
@@ -384,21 +340,5 @@
<style lang="less">
.example-report-view {
  height: 100%;
  .search-form,
  .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>