|
@@ -5,15 +5,40 @@
|
|
<a-row :gutter="15">
|
|
<a-row :gutter="15">
|
|
<a-col :md="5" :sm="24">
|
|
<a-col :md="5" :sm="24">
|
|
<a-form-item label="选择月份">
|
|
<a-form-item label="选择月份">
|
|
- <a-range-picker
|
|
|
|
|
|
+ <div class="monthBox" style="display:flex;algin-item:center;">
|
|
|
|
+ <a-month-picker
|
|
|
|
+ v-model="startMonthVal"
|
|
|
|
+ :disabled-date="disabledStartDate"
|
|
|
|
+ format="YYYY-MM"
|
|
|
|
+ placeholder="开始月份"
|
|
|
|
+ @openChange="handleStartOpenChange"
|
|
|
|
+ />
|
|
|
|
+ <span>~</span>
|
|
|
|
+ <a-month-picker
|
|
|
|
+ v-model="endMonthVal"
|
|
|
|
+ :disabled-date="disabledEndDate"
|
|
|
|
+ format="YYYY-MM"
|
|
|
|
+ placeholder="结束月份"
|
|
|
|
+ :open="endOpen"
|
|
|
|
+ @openChange="handleEndOpenChange"
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ <!-- <a-range-picker
|
|
:placeholder="['开始月份', '结束月份']"
|
|
:placeholder="['开始月份', '结束月份']"
|
|
format="YYYY-MM"
|
|
format="YYYY-MM"
|
|
:value="monthVal"
|
|
:value="monthVal"
|
|
- :mode="['month','month']"
|
|
|
|
|
|
+ :ranges="{'上月':[moment().add(-1, 'M'),moment().add(-1, 'M')], '本月': [moment(), moment().endOf('month')] }"
|
|
|
|
+ :disabled-date="disabledDate"
|
|
|
|
+ :mode="['month', 'month']"
|
|
@panelChange="handlePanelChange"
|
|
@panelChange="handlePanelChange"
|
|
@change="handleChange"
|
|
@change="handleChange"
|
|
>
|
|
>
|
|
- </a-range-picker>
|
|
|
|
|
|
+ <template slot="renderExtraFooter">
|
|
|
|
+ <a-button type="primary">
|
|
|
|
+ 确定
|
|
|
|
+ </a-button>
|
|
|
|
+ </template>
|
|
|
|
+ </a-range-picker> -->
|
|
</a-form-item>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-col>
|
|
<a-col :md="5" :sm="24">
|
|
<a-col :md="5" :sm="24">
|
|
@@ -80,12 +105,14 @@ import ProductBrand from '@/views/common/productBrand.js'
|
|
import { STable, VSelect } from '@/components'
|
|
import { STable, VSelect } from '@/components'
|
|
import { productTypeQueryAll } from '@/api/productType'
|
|
import { productTypeQueryAll } from '@/api/productType'
|
|
import gatherList from './list'
|
|
import gatherList from './list'
|
|
|
|
+import moment from 'moment'
|
|
export default {
|
|
export default {
|
|
name: 'PriceDifferenceDetailReportList',
|
|
name: 'PriceDifferenceDetailReportList',
|
|
mixins: [commonMixin],
|
|
mixins: [commonMixin],
|
|
components: { STable, VSelect, ProductBrand, gatherList },
|
|
components: { STable, VSelect, ProductBrand, gatherList },
|
|
data () {
|
|
data () {
|
|
return {
|
|
return {
|
|
|
|
+ moment,
|
|
queryParam: {
|
|
queryParam: {
|
|
name: '',
|
|
name: '',
|
|
queryWord: '',
|
|
queryWord: '',
|
|
@@ -96,18 +123,38 @@ export default {
|
|
},
|
|
},
|
|
productType: undefined,
|
|
productType: undefined,
|
|
productTypeList: [],
|
|
productTypeList: [],
|
|
- monthVal: [],
|
|
|
|
disabled: false,
|
|
disabled: false,
|
|
- tableHeight: 0
|
|
|
|
|
|
+ tableHeight: 0,
|
|
|
|
+ endOpen: false,
|
|
|
|
+ startMonthVal: undefined,
|
|
|
|
+ endMonthVal: undefined
|
|
}
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
- handlePanelChange (value, mode) {
|
|
|
|
- this.monthVal = value
|
|
|
|
|
|
+ // 选择月份限制
|
|
|
|
+ disabledStartDate (startValue) {
|
|
|
|
+ const endValue = this.endMonthVal
|
|
|
|
+ if (!startValue || !endValue) {
|
|
|
|
+ return startValue.valueOf() > this.moment().valueOf()
|
|
|
|
+ }
|
|
|
|
+ return startValue.valueOf() >= endValue.valueOf()
|
|
},
|
|
},
|
|
- handleChange (value) {
|
|
|
|
- this.monthVal = value
|
|
|
|
|
|
+ disabledEndDate (endValue) {
|
|
|
|
+ const startValue = this.startMonthVal
|
|
|
|
+ if (!startValue) {
|
|
|
|
+ return endValue.valueOf() > this.moment().valueOf()
|
|
|
|
+ }
|
|
|
|
+ return endValue.valueOf() < startValue.valueOf() || endValue.valueOf() > this.moment().valueOf()
|
|
},
|
|
},
|
|
|
|
+ handleStartOpenChange (open) {
|
|
|
|
+ if (!open) {
|
|
|
|
+ this.endOpen = true
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ handleEndOpenChange (open) {
|
|
|
|
+ this.endOpen = open
|
|
|
|
+ },
|
|
|
|
+
|
|
// 产品分类 change
|
|
// 产品分类 change
|
|
changeProductType (val, opt) {
|
|
changeProductType (val, opt) {
|
|
this.queryParam.productTypeSn1 = val[0] ? val[0] : ''
|
|
this.queryParam.productTypeSn1 = val[0] ? val[0] : ''
|
|
@@ -128,7 +175,8 @@ export default {
|
|
|
|
|
|
},
|
|
},
|
|
searchForm () {
|
|
searchForm () {
|
|
-
|
|
|
|
|
|
+ console.log('1111:', this.startMonthVal)
|
|
|
|
+ debugger
|
|
},
|
|
},
|
|
resetSearchForm () {
|
|
resetSearchForm () {
|
|
|
|
|
|
@@ -155,5 +203,10 @@ export default {
|
|
|
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
|
|
|
+<style lang="less" scoped>
|
|
|
|
+ .monthBox{
|
|
|
|
+ /deep/.ant-calendar-picker-icon{
|
|
|
|
+ display:none !important;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
</style>
|
|
</style>
|