VUE 页面时间查询、重置后数据加载

<template>
  <a-card :bordered="false">

    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">

          <a-col :md="6" :sm="8">
            <a-form-item label="长者姓名">
              <a-select showSearch
                        :filterOption="filterOption"
                        placeholder="请输入长者姓名"
                        style="width: 100%"
                        v-model="queryParam.elderId"
                        @change="onChange"
                        @search="elderChange">
//长者姓名模糊查询 例：输张--“张三，张思”
                <a-select-option v-for="(item,index) in elderList" :key="index" :value="item.id">{{item.name}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="8">
            <a-form-item label="缴药时间">
//前端时间区间查询 2020-09-01--2020-09-02
              <a-range-picker v-model="dateObj" format="YYYY-MM-DD" @change="handleDateChange" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8" >
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>

        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus">存缴</a-button>
    </div>

    <!-- table区域-begin -->
    <div>

      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange">

        <span slot="action" slot-scope="text, record">
           <a @click="takeMedicineClick(record)">取药</a>
          <a @click="recordClick(record.id)" style="margin-left: 10px">记录</a>
          <span v-if="record.takeNumber === 0">
            <a @click="handleEdit(record)" style="margin-left: 10px">编辑</a>
           <a-popconfirm title="确定删除吗?" style="margin-left: 10px" @confirm="() => handleDelete(record.id)">
            <a>删除</a>
          </a-popconfirm>
          </span>
        </span>

      </a-table>
    </div>
    <!-- table区域-end -->

    <!-- 表单区域 -->
    <pharmacyDrugAgent-modal ref="modalForm" @ok="modalFormOk"></pharmacyDrugAgent-modal>
    <record-model ref="recordModel" @ok="modalFormOk"></record-model>
    <take-medicine ref="takeMedicine" @ok="modalFormOk"></take-medicine>
  </a-card>
</template>

<script>
  import pharmacyDrugAgentModal from './modules/pharmacyDrugAgentModal'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { getAction } from '../../api/manage'
  import recordModel from './modules/recordModel'//记录
  import takeMedicine from './modules/takeMedicine'
  import moment from 'moment'
  //取药

  export default {
    name: "pharmacyDrugAgentList",
    mixins:[JeecgListMixin],
    components: {
      pharmacyDrugAgentModal,
      recordModel,
      takeMedicine
    },
    data () {
      return {
        description: '自带药管理管理页面',
        elderList: [],
        dateObj: [],
        orgId: '53f84a469d61a78a12033c90f39f8b44',
        // 表头
        columns: [
          {
            title: 'No',
            dataIndex: '',
            key:'rowIndex',
            width:30,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
           },
		   {
            title: '姓名',
            align:"center",
            dataIndex: 'elderId_dictText'
           },
		   {
            title: '编号',
            align:"center",
            dataIndex: 'elderNumber'
           },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            width: 160,
            scopedSlots: { customRender: 'action' },
          }
        ],
		url: {
          list: "/pharmacy/pharmacyDrugAgent/list",
          delete: "/pharmacy/pharmacyDrugAgent/delete",
          deleteBatch: "/pharmacy/pharmacyDrugAgent/deleteBatch",
          exportXlsUrl: "pharmacy/pharmacyDrugAgent/exportXls",
          importExcelUrl: "pharmacy/pharmacyDrugAgent/importExcel",
          elder: "/activity/accidentRecord/queryElderByOrgId",
       },
    }
  },
  computed: {
    importExcelUrl: function(){
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    }
  },
    methods: {
      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
      handleAdd() {
        this.$refs.modalForm.add();
        this.$refs.modalForm.title = "存缴";
      },
      onChange (value) {
        this.elderList.forEach(item => {
          if (item.id === value) {
            // this.form.setFieldsValue({'elderNumber': item.elderNumber})
            this.queryParam.elderId = value
          }
        })
      },
      elderChange(value){
        // console.log(this.orgId)
        return new Promise((resolve, reject) => {
          getAction(this.url.elder, {name: value, orgId: this.orgId}).then((res) => {
            if (res.success) {
              this.elderList = res.result
              resolve()
            } else {
              this.$message.warning(res.message);
              reject()
            }
          }).catch(error => reject())
        })
      },
      //记录
      recordClick(id){
        this.$refs.recordModel.getInfo(id);
      },
      //取药
      takeMedicineClick(item){
        this.$refs.takeMedicine.takeMed(item);
      },
//格式化时间
      handleDateChange (date, mode) {
        if (date.length) {
          this.queryParam.startTime = date[0] ? moment(date[0]).startOf('date').format('YYYY-MM-DD') : ''
          this.queryParam.endTime = date[1] ? moment(date[1]).endOf('date').format('YYYY-MM-DD') : ''
        } else {
          this.queryParam.startTime = ''
          this.queryParam.endTime = ''
        }
      },
      **//重置操作**
      searchReset() {
     //重置加载等待
        this.loading=true;
     //重置查询框
        this.dateObj = []
        this.queryParam = {}
        **//重置之后重新调用getAction方法，刷新页面**
        getAction(this.url.list).then(res => {
          if(res.success){
            this.dataSource = res.result.records
            this.loading = false
          }else{
            this.$message.warning(res.message);
          }
        })
      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less'
</style>