日期选中组件

src/components/dateRange/index.vue

@@ -0,0 +1,124 @@
+<template>
+  <el-date-picker :type="type" :style="style" v-model="dateRange" :value-format="valueFormat" :format="format" 
+       unlink-panels
+      :range-separator="rangeSepaSrator"
+      :start-placeholder="startPlaceholder"
+      :end-placeholder="endPlaceholder"
+      @change="onDateRangeChange"
+      :picker-options="pickerOptions"
+      ></el-date-picker>
+</template>
+
+<script> 
+import util from '@/common/js/util'
+export default {
+  name: 'date-range',
+  components: {   },
+  computed: {
+     
+  },
+  data(){
+      return {
+          dateRange:[],
+      }
+  },
+  watch:{
+      dateRange(){
+
+      },
+      value(){
+          this.initData();
+      }
+  },
+  props: {
+      
+    value: {
+      
+    }, 
+    
+    type: {
+      type: String,
+      default: 'daterange'
+    }, 
+    startKey: {
+      type: String,
+      default: 'startTime'
+    }, 
+     
+    style:{
+        typeof:Object,
+        default:{'display':'inline'}
+    },
+    
+    endKey: {
+      type: String,
+      default: 'endTime'
+    }, 
+    
+    valueFormat: {
+      type: String,
+      default: 'yyyy-MM-dd HH:mm:ss'
+    }, 
+    
+    format: {
+      type: String,
+      default: 'yyyy-MM-dd'
+    }, 
+    startPlaceholder: {
+      type: String,
+      default: '开始日期'
+    }, 
+    
+    endPlaceholder: {
+      type: String,
+      default: '结束日期'
+    }, 
+    rangeSepaSrator:{ 
+      type: String,
+      default: '至'
+    },
+    pickerOptions:{
+        typeof:Object,
+        default:util.pickerOptions('datarange')
+    }
+  },
+  methods: { 
+      
+      initData(){
+          this.dateRange=[];
+          if(this.value instanceof Array){
+              this.dateRange=this.value
+          }else if(this.value instanceof Object){
+            if(this.value && this.value[this.startKey] && this.value[this.endKey]){
+              this.dateRange=[this.value[this.startKey],this.value[this.endKey]]
+            }
+          }
+          
+      },
+      onDateRangeChange(dates){ 
+          if(this.value && this.value instanceof Object){
+            if(dates && dates.length===2){
+                this.value[this.startKey]=dates[0]
+                this.value[this.endKey]=dates[1]
+            }else if(dates && dates.length===1){
+                this.value[this.startKey]=dates[0]
+                this.value[this.endKey]=null
+            }else if(dates && dates.length===0){
+                this.value[this.startKey]=null
+                this.value[this.endKey]=null
+            }
+            this.$emit('input',this.value)
+          }else if(this.value instanceof Array){
+               this.$emit('input',dates)
+          }
+          this.$emit('change',dates)
+      }
+  },
+  mounted(){
+      this.initData();
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped> 
+</style>

src/main.js

@@ -22,9 +22,11 @@ import Print from 'vue-print-nb'
 
 
 
+import DateRange from '@/components/dateRange/index'
 
 Vue.prototype.$echarts = echarts
 Vue.use(Print); //注册
+Vue.component('date-range',DateRange)
 Vue.use(Element, {
   size: 'small', // set element-ui default size
   i18n: (key, value) => i18n.t(key, value)

src/views/xm/rpt/product/productWorkItemDayList.vue

@@ -12,6 +12,9 @@
 					<el-form :label-position="'top'" label-width="120px" :model="filters"> 
 						<el-form-item>
 							 <xm-product-select  v-if="!xmProduct"  ref="xmProductSelect" style="display:inline;"  :auto-select="false" :link-project-id="xmProject?xmProject.id:null" @row-click="onProductSelected"   @clear="onProductClear"></xm-product-select>
+  					  </el-form-item>  
+						<el-form-item label="日期区间">
+							<date-range v-model="filters" value-format="yyyy-MM-dd" start-key="startBizDate" end-key="endBizDate"></date-range>
   					  </el-form-item>  
 					<el-form-item>
 						 <el-button type="primary" icon="el-icon-search" @click="listXmProductStateHis">查询</el-button>
@@ -65,6 +68,8 @@
                     product:null,
                     iteration:null,
                     project:null,
+					startBizDate:'',
+					endBizDate:'',
                 },
 				dicts:{},//下拉选择框的所有静态数据  params=[{categoryId:'0001',itemCode:'sex'}] 返回结果 {'sex':[{optionValue:'1',optionName:'男',seqOrder:'1',fp:'',isDefault:'0'},{optionValue:'2',optionName:'女',seqOrder:'2',fp:'',isDefault:'0'}]} 
 				load:{ list: false, edit: false, del: false, add: false },//查询中... 
@@ -81,7 +86,12 @@
 					this.$notify({position:'bottom-left',showClose:true,message:'请先选中产品',type:'warning'})
 					return;
 				}
+				
 				var params={productId:this.filters.product.id,orderBy:'biz_date asc'}
+				if(this.filters.startBizDate && this.filters.endBizDate){
+					params.startBizDate=this.filters.startBizDate;
+					params.endBizDate=this.filters.endBizDate;
+				}
 				listXmProductStateHis(params).then(res=>{ 
 					this.xmProductStateHiss=res.data.tips.isOk?res.data.data:this.xmProductStateHiss;
 				})