浏览代码

封装查询条件 日期范围组件

chenrui 4 年之前
父节点
当前提交
f6f13f92b9
共有 2 个文件被更改,包括 57 次插入55 次删除
  1. 9 55
      src/views/allocationManagement/transferOut/list.vue
  2. 48 0
      src/views/common/rangeDate.vue

+ 9 - 55
src/views/allocationManagement/transferOut/list.vue

@@ -6,16 +6,7 @@
         <a-row :gutter="15">
           <a-col :md="6" :sm="24">
             <a-form-item label="创建时间">
-              <a-range-picker
-                style="width:100%"
-                id="allocateBillList-createDate"
-                :disabledDate="disabledDate"
-                v-model="createDate"
-                :format="dateFormat"
-                @change="dateChange"
-                @calendarChange="dateCalendarChange"
-                :placeholder="['开始时间', '结束时间']" />
-            </a-form-item>
+              <rangeDate ref="rangeDate" @change="dateChange" />
             </a-form-item>
           </a-col>
           <a-col :md="6" :sm="24">
@@ -125,15 +116,15 @@
 import moment from 'moment'
 import { STable, VSelect } from '@/components'
 import basicInfoModal from './basicInfoModal.vue'
+import rangeDate from '@/views/common/rangeDate.vue'
 import { allocateBillList, allocateBillDel, allocateBillAudit, allocateBillExport } from '@/api/allocateBill'
 import { allocateTypeAllList } from '@/api/allocateType'
 export default {
-  components: { STable, VSelect, basicInfoModal },
+  components: { STable, VSelect, basicInfoModal, rangeDate },
   data () {
     return {
       advanced: false, // 高级搜索 展开/关闭
       tableHeight: 0,
-      createDate: [], //  创建时间
       queryParam: { //  查询条件
         targetName: '', //  调往对象
         allocateTypeSn: undefined, //  调拨类型
@@ -142,7 +133,6 @@ export default {
       },
       disabled: false, //  查询、重置按钮是否可操作
       exportLoading: false,
-      dateFormat: 'YYYY-MM-DD',
       columns: [
         { title: '序号', dataIndex: 'no', width: 80, align: 'center' },
         { title: '创建时间', dataIndex: 'createDate', width: 160, align: 'center' },
@@ -165,14 +155,6 @@ export default {
         if (this.tableHeight == 0) {
           this.tableHeight = window.innerHeight - 380
         }
-        // 创建时间
-        if (this.createDate && this.createDate.length > 0) {
-          this.queryParam.beginDate = moment(this.createDate[0]).format(this.dateFormat)
-          this.queryParam.endDate = moment(this.createDate[1]).format(this.dateFormat)
-        } else {
-          this.queryParam.beginDate = undefined
-          this.queryParam.endDate = undefined
-        }
         return allocateBillList(Object.assign(parameter, this.queryParam)).then(res => {
           const data = res.data
           const no = (data.pageNo - 1) * data.pageSize
@@ -183,44 +165,23 @@ export default {
           return data
         })
       },
-      selectPriceDate: '',
       allocateTypeList: [], //  调拨类型
-      openModal: false, //  新增编辑  弹框
-      itemId: '' //  当前品牌id
+      openModal: false //  新增编辑  弹框
     }
   },
   methods: {
-    // 不可选日期
-    disabledDate (current) {
-      //  最早可倒推选择两年数据,最晚为今天
-      const minYearVs = moment().subtract(2, 'years') //  两年前   负值
-      const maxYearVs = moment().endOf('day') //  今天,包含今天
-      //  限制最多只能查一年区间的数据
-      if (this.selectPriceDate) {
-        const oMinYearVs = moment(this.selectPriceDate, 'YYYY-MM-DD').subtract(1, 'years') //  当前选中开始日期前推一年
-        const oMaxYearVs = moment(this.selectPriceDate, 'YYYY-MM-DD').add(1, 'years') //  当前选中开始日期后推一年
-        // 判断两个时间段是否相差m天  第二个参数指相差单位,第三个参数指是否返回浮点形式(小数)
-        const beginDate = minYearVs.diff(oMinYearVs, 'days') > 0 ? minYearVs : oMinYearVs // 若当前选中开始日期前推一年超出最多倒推两年数据时,则以两年为标准
-        const endDate = maxYearVs.diff(oMaxYearVs, 'days') > 0 ? oMaxYearVs : maxYearVs // 若当前选中开始日期后推一年超出今天时,则以今天为标准
-        return current && current < beginDate || current && current > endDate
-      } else {
-        return current && current > maxYearVs || current && current < minYearVs
-      }
-    },
-    // 日期  change
-    dateChange (date, dateStrings) {
-      this.selectPriceDate = ''
-    },
-    dateCalendarChange (date, dateStrings) {
-      this.selectPriceDate = date[0]
+    dateChange (date) {
+      this.queryParam.beginDate = date[0]
+      this.queryParam.endDate = date[1]
     },
     //  重置
     resetSearchForm () {
+      this.queryParam.beginDate = ''
+      this.queryParam.endDate = ''
       this.queryParam.targetName = ''
       this.queryParam.allocateTypeSn = undefined
       this.queryParam.state = undefined
       this.queryParam.allocateNo = ''
-      this.createDate = []
       this.$refs.table.refresh(true)
     },
     //  基本信息  保存
@@ -285,13 +246,6 @@ export default {
     //  导出
     handleExport () {
       const params = this.queryParam
-      if (this.createDate && this.createDate.length) {
-        params.beginDate = moment(this.createDate[0]).format('YYYY-MM-DD')
-        params.endDate = moment(this.createDate[1]).format('YYYY-MM-DD')
-      } else {
-        params.beginDate = ''
-        params.endDate = ''
-      }
       this.exportLoading = true
       allocateBillExport(params).then(res => {
         this.exportLoading = false

+ 48 - 0
src/views/common/rangeDate.vue

@@ -0,0 +1,48 @@
+<template>
+  <a-range-picker
+    style="width:100%"
+    :disabledDate="disabledDate"
+    :format="dateFormat"
+    @change="dateChange"
+    @calendarChange="dateCalendarChange"
+    :placeholder="['开始时间', '结束时间']" />
+</template>
+<script>
+import moment from 'moment'
+export default {
+  props: {},
+  data () {
+    return {
+      dateFormat: 'YYYY-MM-DD',
+      selectPriceDate: ''
+    }
+  },
+  methods: {
+    // 不可选日期
+    disabledDate (current) {
+      //  最早可倒推选择两年数据,最晚为今天
+      const minYearVs = moment().subtract(2, 'years') //  两年前   负值
+      const maxYearVs = moment().endOf('day') //  今天,包含今天
+      //  限制最多只能查一年区间的数据
+      if (this.selectPriceDate) {
+        const oMinYearVs = moment(this.selectPriceDate, 'YYYY-MM-DD').subtract(1, 'years') //  当前选中开始日期前推一年
+        const oMaxYearVs = moment(this.selectPriceDate, 'YYYY-MM-DD').add(1, 'years') //  当前选中开始日期后推一年
+        // 判断两个时间段是否相差m天  第二个参数指相差单位,第三个参数指是否返回浮点形式(小数)
+        const beginDate = minYearVs.diff(oMinYearVs, 'days') > 0 ? minYearVs : oMinYearVs // 若当前选中开始日期前推一年超出最多倒推两年数据时,则以两年为标准
+        const endDate = maxYearVs.diff(oMaxYearVs, 'days') > 0 ? oMaxYearVs : maxYearVs // 若当前选中开始日期后推一年超出今天时,则以今天为标准
+        return current && current < beginDate || current && current > endDate
+      } else {
+        return current && current > maxYearVs || current && current < minYearVs
+      }
+    },
+    // 日期  change
+    dateChange (date, dateStrings) {
+      this.selectPriceDate = ''
+      this.$emit('change', dateStrings)
+    },
+    dateCalendarChange (date, dateStrings) {
+      this.selectPriceDate = date[0]
+    }
+  }
+}
+</script>