费用报销查询条件增加时间

src/components/common/timeSearchForm.vue

+<template>
+  <section>
+    <el-row class="form-content-time-top">
+      <el-form ref="clientTimeForm" :model="clientTimeForm" size="mini">
+        <el-col :span="8" :xs="24">
+          <el-form-item label="成交日期:" label-width="42">
+            <el-radio-group v-model="clientTimeForm[formSearchKey + '[period]']" size="mini">
+              <el-radio-button label="thisweek">本周</el-radio-button>
+              <el-radio-button label="lastweek">上周</el-radio-button>
+              <el-radio-button label="thismonth">本月</el-radio-button>
+              <el-radio-button label="lastmonth">上月</el-radio-button>
+              <el-radio-button label="nextmonth">下月</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+      </el-form>
+      <el-form ref="clientTimeRange" :model="clientTimeRange" size="mini">
+        <el-col :span="8" :offset="8" :xs="{span: 24, offset: 0}" class="form-content-time-range">
+          <el-form-item label-width="0">
+            <el-date-picker
+              size="mini"
+              v-model="clientTimeRange.from"
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="开始时间">
+            </el-date-picker>
+            至
+            <el-date-picker
+              size="mini"
+              v-model="clientTimeRange.to"
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="结束时间">
+            </el-date-picker>
+            <el-button type="primary" size="mini" @click="setSearchTime">确定</el-button>
+          </el-form-item>
+        </el-col>
+      </el-form>
+    </el-row>
+  </section>
+</template>
+<script>
+import setParams from './setParams'
+export default {
+  name: 'timeSearchForm',
+
+  mixins: [setParams],
+
+  props: ['formSearchKey'],
+
+  data () {
+    return {
+      clientTimeForm: {},
+      clientTimeRange: {
+        from: '',
+        to: ''
+      }
+    }
+  },
+
+  created () {
+    this.initParams()
+    this.init()
+  },
+
+  methods: {
+    init () {
+      this.$watch('clientTimeForm', (val) => {
+        let perid = val[this.formSearchKey + '[period]']
+        this.$emit('update:list', Object.assign({}, {[this.formSearchKey + '[period]']: perid}))
+      }, {deep: true})
+    },
+
+    initParams () {
+      this.setInitParams((ret) => {
+        this.$set(this.clientTimeForm, this.formSearchKey + '[period]', ret[this.formSearchKey + '[period]'] || '')
+      })
+    },
+
+    setSearchTime () {
+      let from = this.clientTimeRange.from
+      let to = this.clientTimeRange.to
+      this.$emit('update:list', Object.assign({}, {
+        [this.formSearchKey + '[from]']: from,
+        [this.formSearchKey + '[to]']: to
+      }, this.clientTimeForm))
+    }
+  },
+
+  watch: {
+    'formSearchKey': {
+      handler (val) {
+        this.$set(this.clientTimeForm, val + '[period]', '')
+      }
+    },
+    'clientTimeRange.from' (val) {
+      if (new Date(val) >= new Date(this.clientTimeRange.to)) {
+        this.clientTimeRange.to = val
+      }
+    },
+    'clientTimeRange.to' (val) {
+      if (new Date(val) <= new Date(this.clientTimeRange.from)) {
+        this.clientTimeRange.from = val
+      }
+    }
+  }
+}
+</script>
+<style scoped>
+  .form-content-time-top {
+    background: #FFF;
+  }
+
+  .form-content-time-top .el-form-item {
+    margin: 7px 0 9px;
+  }
+
+  .form-content-time-top .el-col {
+    padding: 0 15px;
+  }
+</style>

src/components/reimbursement_list/reimbursementHome.vue

@@ -9,6 +9,11 @@
         @update:headerSearch="search => searchKeyword(search)"
         @update:headerAdd="() => addSch()">
       </search-header>
+      <time-search-form
+        ref="timeSearchForm"
+        form-search-key="projectSearch"
+        @update:list="search => timeSearchForm(search)">
+      </time-search-form>
       <search-form
         ref="clientForm"
         :filter="filter"
@@ -58,20 +63,23 @@
 
 <script>
 import SearchHeader from '../common/searchHeader'
+import TimeSearchForm from '../common/timeSearchForm'
 import SearchForm from '../common/SearchForm'
 import ReimItem from './reimbursementItem'
 import ReimModal from '../reimbursement/reimbursementModal'
 import CountArr from './countArr'
-// import LeaveMessage from '../common/leaveMessage'
 import Pagenation from './reimbursementPagenation'
 import clickOutside from '@/lib/bind'
 import singleRadioTool from '../common/singleRadioTool'
+import SetParams from '../common/setParams'
 import {
   requestAPI,
   api
 } from '@/lib/commonMixin'
 export default {
-  name: '',
+  name: 'reimbursementHome',
+
+  mixins: [SetParams],
 
   components: {
     SearchHeader,
@@ -80,7 +88,8 @@ export default {
     ReimModal,
     CountArr,
     Pagenation,
-    singleRadioTool
+    singleRadioTool,
+    TimeSearchForm
   },
 
   directives: {
@@ -158,8 +167,20 @@ export default {
       this.getList()
     },
 
+    timeSearchForm (search) {
+      let params = this.setParams({
+        ...this.form,
+        page: this.pagenation.thispage
+      }, search)
+      this.getList(params)
+    },
+
     searchKeyword (search) {
-      this.updateForm(search)
+      let params = this.setParams({
+        ...this.form,
+        page: this.pagenation.thispage
+      }, search)
+      this.getList(params)
     },
 
     updateForm (search) {
@@ -215,11 +236,8 @@ export default {
       })
     },
 
-    getList () {
-      requestAPI(api.getReimList, {
-        ...this.form,
-        page: this.pagenation.thispage
-      }).then((res) => {
+    getList (params) {
+      requestAPI(api.getReimList, params).then((res) => {
         const {
           list = [],
           countArr = [],