vue按钮Button

<template>
  <main-area :title="title"
             class="fullfill index"
             :buttonArray="buttonArray">
    <div class="block info-content">
      <span class="demonstration">查询日期：</span>
      <el-date-picker v-model="value1"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      value-format="yyyy-MM-dd">
      </el-date-picker>
      <el-button id="search"
                 class="btnSearch"
                 type="primary"
                 ecols-button
                 @mouseup.native="onBeforeSubmit('search',$event)">查询
      </el-button>
    </div>
    <div class="info-content1">保险记录(默认为近一年记录)</div>
    <div class="content">
      <y-table :data="tableData.data"
               :pagination="pagination">
        <el-table-column type="index"
                         width="100"
                         label="序号">
        </el-table-column>
        <el-table-column align="center"
                         width=""
                         prop="PREPOLICYID"
                         label="保单号">
        </el-table-column>
        <el-table-column align="center"
                         width=""
                         prop="INSCORPCHNAME"
                         label="保险公司名称">
        </el-table-column>
        <el-table-column align="center"
                         width=""
                         prop="INSPRDCHNAME"
                         label="产品名称">
        </el-table-column>
        <el-table-column align="center"
                         width=""
                         prop="INSPRDKIND"
                         label="交易类型">
        </el-table-column>
        <el-table-column align="center"
                         width=""
                         prop="AMOUNT"
                         label="交易金额">
        </el-table-column>
        <el-table-column align="center"
                         width=""
                         prop="UPDATEDATE"
                         label="购买日期">
        </el-table-column>
        <el-table-column align="center"
                         width=""
                         prop="YBTSERIALNO"
                         label="流水号">
        </el-table-column>
      </y-table>
    </div>
  </main-area>

</template>

<script>
  import config from '@/config'

  require('@/styles/stm/index.scss')

  export default {
    components: {},
    data() {
      return {
        staticResourcePath: config.staticResourcePath,
        photoPath: '/img/btn/btn-type3-1.png',
        tableData: {
          data: []
        },
        pagination: {
          total: 5,
          mode: 'page',
          currentPage: 1,
          pageSize: 10,
          //all:一次加载所有数据，前端进行分页控制
          //page:每次翻页都去后端读取一次数据
          //cache:前端在翻页过程中，没有数据后才发送查询到后端，后端根据分页情况加载缺失的数据并追加到数据池中（风险，缓存中的数据有变更）
        },
        title: '',
        buttonArray: [{}, {}, {}, {}, {}, {}, {}, {}],
        value1: [],
      }
    },

    methods: {
      onBeforeSubmit(id, event) {
        if ("search" == id) {
          console.log(this.value1);
          console.log(this.value1[0])
          console.log(this.value1[1])
          parent.MARS.setDataPoolValue("Tran_StartDate", this.value1[0]);//开始日期
          parent.MARS.setDataPoolValue("Tran_EndDate", this.value1[1]);//结束日期
        } else {
          console.log('error submit!!');
          //页面出现错误阻止事件继续传递，此时平台收不到事件
          event.stopPropagation();
          return false;
        }
      },
      _getDataPool() {
        let tableDataString = parent.MARS.getDataPoolValue("Tran_BuyInfoList");
        let totNum = parent.MARS.getDataPoolValue("Tran_TotalNumberOfRecords");
        this.tableData.data = tableDataString == "" ? this.tableData : JSON.parse(tableDataString);
        this.pagination.total = totNum;
        this.pagination.mode = "page";
        this.pagination.currentPage = 1;
      },

      //获取最近一年时间
      getDate() {
        var today = new Date();
        var y = today.getFullYear();
        var m = today.getMonth();
        var d = today.getDate();
        var StartDate=y-1 + '-' + m + '-' + d;
        var EndDate=y + '-' + m + '-' + d;
        console.log("today=" + today);
        console.log("StartDate=" + StartDate);
        console.log("EndDate=" + EndDate);
        // this.value1=[StartDate,EndDate];
        this.value1[0]=StartDate;
        this.value1[1]=EndDate;
        console.log(this.value1);
      },
    },

    created() {
      this.getDate();
      this._getDataPool();
      let messages = this.$i18n.messages;
      this.buttonArray = [
        //F1
        {},

        //F2
        {},

        //F3
        {},

        //F4
        {
          show: true,
          text: {
            zh: messages.zh.main.btn.exit,
            en: messages.en.main.btn.exit,
          }
        },

        //F5
        {},

        //F6
        {},

        //F7
        {},

        //F8
        {
          show: true,
          text: {
            zh: messages.zh.main.btn.returnback,
            en: messages.en.main.btn.returnback,
          }
        }
      ]
      this.buttonArray = [...this.buttonArray]
    },

    mounted() {

    },

    watch: {}

  }
</script>

<style lang="scss" scoped>
  .index {
    .info-content {
      text-align: center;
      font-size: 20px;
      margin-top: 5%;
      margin-bottom: 3%;
      font-weight: 500;

      .demonstration {
        margin-right: 8px;
      }

      /deep/ .el-date-editor {
        font-size: 20px;
        margin-right: 15px;

        .el-range-separator {
          width: 10%;
        }
      }
    }

    .info-content1 {
      text-align: center;
      font-size: 20px;
      margin-bottom: 2%;
    }

    .content {
      position: relative;
      width: 100%;
    }

    .btnSearch {
      min-width: 10vh;
      line-height: 3.5vh;
      height: 3.7vh;
      border-radius: 3vh;
      font-size: 1.8vh;
      padding: 0;
    }
  }
</style>>