|
|
@@ -7,7 +7,7 @@ const props = defineProps({
|
|
|
defaultData: {
|
|
|
type: Object
|
|
|
},
|
|
|
- radioisDisabled: {
|
|
|
+ isPending: {
|
|
|
type: Boolean,
|
|
|
default: false
|
|
|
},
|
|
|
@@ -30,17 +30,13 @@ const props = defineProps({
|
|
|
isShowTransportModeGuide: {
|
|
|
type: Boolean,
|
|
|
default: false
|
|
|
+ },
|
|
|
+ threeMonthsInterval: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
}
|
|
|
})
|
|
|
|
|
|
-const defaultfiltersData = ref(props.defaultData)
|
|
|
-watch(
|
|
|
- () => props.defaultData,
|
|
|
- (current) => {
|
|
|
- defaultfiltersData.value = current
|
|
|
- }
|
|
|
-)
|
|
|
-const isDisabled = ref(false)
|
|
|
const checkboxGroup1 = ref(['All'])
|
|
|
const CheckboxGroup2 = ref('ETD')
|
|
|
const CheckboxGroup3 = ref('Invoice Issue Date')
|
|
|
@@ -48,11 +44,9 @@ const filters_visible = ref(false)
|
|
|
const shipper = ref(['All', 'Air', 'Sea', 'Road', 'Rail'])
|
|
|
const shipper_two = ref(['ETD', 'ETA'])
|
|
|
const shipper_three = ref(['Invoice Issue Date'])
|
|
|
-const DashDate = ref()
|
|
|
-DashDate.value = []
|
|
|
+const DashDate = ref([])
|
|
|
const startDate = ref()
|
|
|
const EndDate = ref()
|
|
|
-let dashboardObj: any = {}
|
|
|
|
|
|
const checkboxDisabled = computed(() => {
|
|
|
if (props.isContainer && !props.isETDToETA) {
|
|
|
@@ -61,40 +55,82 @@ const checkboxDisabled = computed(() => {
|
|
|
return false
|
|
|
}
|
|
|
})
|
|
|
-onMounted(() => {
|
|
|
- getdefaultdata()
|
|
|
-})
|
|
|
-const getdefaultdata = () => {
|
|
|
- checkboxGroup1.value = defaultfiltersData.value?.transportation
|
|
|
- CheckboxGroup2.value = defaultfiltersData.value?.date_type
|
|
|
- if (defaultfiltersData.value?.date_start == '') {
|
|
|
- DashDate.value = []
|
|
|
- isDisabled.value = true
|
|
|
+// onMounted(() => {
|
|
|
+// getdefaultdata()
|
|
|
+// })
|
|
|
+
|
|
|
+const emit = defineEmits(['FilterSearch'])
|
|
|
+const timeRange = ref([])
|
|
|
+const DateChange = (value: any) => {
|
|
|
+ timeRange.value = value
|
|
|
+}
|
|
|
+const DateRangeSearch = () => {
|
|
|
+ let date = { date_start: '', date_end: '' }
|
|
|
+ if (!props.isPending) {
|
|
|
+ date = props.isContainer
|
|
|
+ ? {
|
|
|
+ date_start: dayjs(startDate.value).format('MM/YYYY'),
|
|
|
+ date_end: dayjs(EndDate.value).format('MM/YYYY')
|
|
|
+ }
|
|
|
+ : {
|
|
|
+ date_start: dayjs(timeRange.value[0]).format('MM/DD/YYYY'),
|
|
|
+ date_end: dayjs(timeRange.value[1]).format('MM/DD/YYYY')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const data = {
|
|
|
+ transportation: checkboxGroup1.value,
|
|
|
+ date_type: CheckboxGroup2.value,
|
|
|
+ date_start: date.date_start,
|
|
|
+ date_end: date.date_end
|
|
|
+ }
|
|
|
+ emit('FilterSearch', data)
|
|
|
+ filters_visible.value = false
|
|
|
+}
|
|
|
+const getdefaultdata = (data: any, isReset: boolean = false) => {
|
|
|
+ checkboxGroup1.value = data?.transportation
|
|
|
+ CheckboxGroup2.value = data?.date_type
|
|
|
+
|
|
|
+ if (props.isContainer) {
|
|
|
+ // 容器模式：固定12个月范围（含当前月）
|
|
|
+ startDate.value = dayjs().subtract(12, 'month').format('YYYY-MM')
|
|
|
+ EndDate.value = dayjs().format('YYYY-MM')
|
|
|
} else {
|
|
|
- if (props.isContainer) {
|
|
|
- startDate.value = defaultfiltersData.value?.date_start_two
|
|
|
- EndDate.value = defaultfiltersData.value?.date_end_two
|
|
|
- } else {
|
|
|
- DashDate.value = [
|
|
|
- dayjs(defaultfiltersData.value?.date_start_two),
|
|
|
- dayjs(defaultfiltersData.value?.date_end_two)
|
|
|
- ]
|
|
|
- }
|
|
|
- if (props.isContainer) {
|
|
|
- dashboardObj.date_start = defaultfiltersData.value?.date_start
|
|
|
- dashboardObj.date_start_two = defaultfiltersData.value?.date_start_two
|
|
|
- dashboardObj.date_end = defaultfiltersData.value?.date_end
|
|
|
- dashboardObj.date_end_two = defaultfiltersData.value?.date_end_two
|
|
|
+ if (props.isPending) {
|
|
|
+ DashDate.value = ['', '']
|
|
|
} else {
|
|
|
- dashboardObj.date_start = dayjs(DashDate.value[0]).format('MM/DD/YYYY')
|
|
|
- dashboardObj.date_start_two = dayjs(DashDate.value[0]).format('YYYY-MM-DD')
|
|
|
- dashboardObj.date_end = dayjs(DashDate.value[1]).format('MM/DD/YYYY')
|
|
|
- dashboardObj.date_end_two = dayjs(DashDate.value[1]).format('YYYY-MM-DD')
|
|
|
+ const monthsInterval = props.threeMonthsInterval ? 3 : 12
|
|
|
+
|
|
|
+ let start = dayjs().subtract(monthsInterval, 'month').startOf('month')
|
|
|
+ let end = dayjs()
|
|
|
+
|
|
|
+ // isRecent 模式下，结束时间延后一个月
|
|
|
+ if (props.isRecent) {
|
|
|
+ end = dayjs().add(1, 'month')
|
|
|
+ }
|
|
|
+
|
|
|
+ DashDate.value = [start, end]
|
|
|
}
|
|
|
+ timeRange.value = DashDate.value
|
|
|
+ }
|
|
|
+ if (!isReset) {
|
|
|
+ DateRangeSearch()
|
|
|
}
|
|
|
- dashboardObj.transportation = checkboxGroup1.value
|
|
|
- dashboardObj.date_type = CheckboxGroup2.value
|
|
|
}
|
|
|
+watch(
|
|
|
+ () => props.defaultData,
|
|
|
+ (value) => {
|
|
|
+ if (value && Object.keys(value).length) {
|
|
|
+ nextTick(() => {
|
|
|
+ getdefaultdata(value)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ immediate: true,
|
|
|
+ deep: true
|
|
|
+ }
|
|
|
+)
|
|
|
+
|
|
|
const changeCheckboxGroup1 = (val: any) => {
|
|
|
if (val.length == 4) {
|
|
|
checkboxGroup1.value = ['All']
|
|
|
@@ -108,18 +144,8 @@ const changeCheckboxGroup1 = (val: any) => {
|
|
|
checkboxGroup1.value.splice(val.indexOf('All'), 1)
|
|
|
}
|
|
|
}
|
|
|
- dashboardObj.transportation = checkboxGroup1.value
|
|
|
-}
|
|
|
-const changeCheckboxGroup2 = (val: any) => {
|
|
|
- dashboardObj.date_type = val
|
|
|
-}
|
|
|
-const emit = defineEmits(['FilterSearch'])
|
|
|
-const DateChange = (value: any) => {
|
|
|
- dashboardObj.date_start = value[0]
|
|
|
- dashboardObj.date_start_two = dayjs(value[0]).format('YYYY-MM-DD')
|
|
|
- dashboardObj.date_end = value[1]
|
|
|
- dashboardObj.date_end_two = dayjs(value[1]).format('YYYY-MM-DD')
|
|
|
}
|
|
|
+
|
|
|
const StartChange = (val: any) => {
|
|
|
if (!props.isETDToETA) {
|
|
|
const nextMonth = new Date(val)
|
|
|
@@ -128,14 +154,6 @@ const StartChange = (val: any) => {
|
|
|
let current = currentYear + '-' + currentMonth
|
|
|
EndDate.value = current
|
|
|
}
|
|
|
- const date1 = dayjs(String(val)).format('MM/YYYY')
|
|
|
- const date1_two = dayjs(String(val)).format('MM-YYYY')
|
|
|
- const date2 = dayjs(EndDate.value).format('MM/YYYY')
|
|
|
- const date2_two = dayjs(EndDate.value).format('MM-YYYY')
|
|
|
- dashboardObj.date_start = date1
|
|
|
- dashboardObj.date_start_two = date1_two
|
|
|
- dashboardObj.date_end = date2
|
|
|
- dashboardObj.date_end_two = date2_two
|
|
|
}
|
|
|
const EndChange = (val: any) => {
|
|
|
if (!props.isETDToETA) {
|
|
|
@@ -145,23 +163,10 @@ const EndChange = (val: any) => {
|
|
|
let current = currentYear + '-' + currentMonth
|
|
|
startDate.value = current
|
|
|
}
|
|
|
- const date1 = dayjs(startDate.value).format('MM/YYYY')
|
|
|
- const date1_two = dayjs(startDate.value).format('MM-YYYY')
|
|
|
- const date2 = dayjs(String(val)).format('MM/YYYY')
|
|
|
- const date2_two = dayjs(String(val)).format('MM-YYYY')
|
|
|
- dashboardObj.date_start = date1
|
|
|
- dashboardObj.date_start_two = date1_two
|
|
|
- dashboardObj.date_end = date2
|
|
|
- dashboardObj.date_end_two = date2_two
|
|
|
}
|
|
|
// 清除
|
|
|
const clearrest = () => {
|
|
|
- getdefaultdata()
|
|
|
-}
|
|
|
-// 查询
|
|
|
-const DateRangeSearch = () => {
|
|
|
- emit('FilterSearch', dashboardObj)
|
|
|
- filters_visible.value = false
|
|
|
+ getdefaultdata({}, true)
|
|
|
}
|
|
|
|
|
|
import { useThemeStore } from '@/stores/modules/theme'
|
|
|
@@ -231,11 +236,7 @@ const guideStore = useGuideStore()
|
|
|
</el-radio-group>
|
|
|
</div>
|
|
|
<div class="filter_filter" v-else>
|
|
|
- <el-radio-group
|
|
|
- v-model="CheckboxGroup2"
|
|
|
- @change="changeCheckboxGroup2"
|
|
|
- :disabled="props.radioisDisabled"
|
|
|
- >
|
|
|
+ <el-radio-group v-model="CheckboxGroup2" :disabled="props.isPending">
|
|
|
<el-radio-button v-for="item in shipper_two" :key="item" :value="item" :label="item">
|
|
|
</el-radio-button>
|
|
|
</el-radio-group>
|
|
|
@@ -274,7 +275,7 @@ const guideStore = useGuideStore()
|
|
|
v-else
|
|
|
@DateChange="DateChange"
|
|
|
:Date="DashDate"
|
|
|
- :isDisabled="isDisabled"
|
|
|
+ :isDisabled="isPending"
|
|
|
></QuickCalendarDate>
|
|
|
</div>
|
|
|
</div>
|
Jack Zhou