Merge branch 'dev_g' of United_Software/k_online_ui into dev

src/components/DateRange/src/components/QuickCalendarDate.vue

@@ -15,7 +15,8 @@ const props = defineProps({
     type: Array
   },
   isDisabled: {
-    type: Array
+    type: Boolean,
+    default: false
   }
 })
 const ETDDate = ref(props.Date)

src/styles/elementui.scss

@@ -707,4 +707,11 @@ div .ShowAlerIcon {
 }
 div .dash_popver {
   border-radius: 12px !important;
+}
+div .el-month-table td .el-date-table-cell__text {
+  color: var(--color-neutral-1);
+}
+div .el-month-table td.today .el-date-table-cell__text {
+  color: var(--color-neutral-1) ; 
+  font-weight: 400 ;
 }

src/views/Dashboard/src/components/DashFiters.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, watch, onMounted, computed } from 'vue'
+import moment from 'moment'
 import dayjs from 'dayjs'
 
 const props = defineProps({
@@ -31,7 +32,7 @@ watch(
     defaultfiltersData.value = current
   }
 )
-const isDisabled = ref([false, false])
+const isDisabled = ref(false)
 const checkboxGroup1 = ref(['All'])
 const CheckboxGroup2 = ref('ETD')
 const filters_visible = ref(false)
@@ -39,8 +40,8 @@ const shipper = ref(['All', 'Air', 'Sea', 'Road'])
 const shipper_two = ref(['ETD', 'ETA'])
 const DashDate = ref()
 DashDate.value = []
-const MonthStartDate = ref('')
-const MonthEndDate = ref('')
+const startDate = ref()
+const EndDate = ref()
 let dashboardObj: any = {}
 
 const checkboxDisabled = computed(() => {
@@ -58,12 +59,11 @@ const getdefaultdata = () => {
   CheckboxGroup2.value = defaultfiltersData.value?.date_type
   if (defaultfiltersData.value?.date_start == '') {
     DashDate.value = []
-    isDisabled.value = [true, true]
+    isDisabled.value = true
   } else {
     if (props.isContainer) {
-      MonthStartDate.value = defaultfiltersData.value?.date_start_two
-      MonthEndDate.value = defaultfiltersData.value?.date_end_two
-      console.log(MonthStartDate.value, MonthEndDate.value)
+      startDate.value = defaultfiltersData.value?.date_start_two
+      EndDate.value = defaultfiltersData.value?.date_end_two
     } else {
       DashDate.value = [
         dayjs(defaultfiltersData.value?.date_start_two),
@@ -109,6 +109,32 @@ const DateChange = (value: any, date2: any) => {
     dashboardObj.date_end = value[1]
   }
 }
+const StartChange = (val: any) => {
+  if (!props.isETDToETA) {
+    const nextMonth = new Date(val)
+    let currentYear = nextMonth.getFullYear() + 1
+    let currentMonth = nextMonth.getMonth() + 2
+    let current = currentYear + '-' + currentMonth
+    EndDate.value = current
+  }
+  const date1 = moment(String(val)).format('MM/YYYY')
+  const date2 = moment(EndDate.value).format('MM/YYYY')
+  dashboardObj.date_start = date1
+  dashboardObj.date_end = date2
+}
+const EndChange = (val: any) => {
+  if (!props.isETDToETA) {
+    const nextMonth = new Date(val)
+    let currentYear = nextMonth.getFullYear() - 1
+    let currentMonth = nextMonth.getMonth()
+    let current = currentYear + '-' + currentMonth
+    startDate.value = current
+  }
+  const date1 = moment(startDate.value).format('MM/YYYY')
+  const date2 = moment(String(val)).format('MM/YYYY')
+  dashboardObj.date_start = date1
+  dashboardObj.date_end = date2
+}
 // 清除
 const clearrest = () => {
   getdefaultdata()
@@ -125,7 +151,13 @@ const DateRangeSearch = () => {
 </script>
 <template>
   <div class="DashFilters">
-    <el-popover trigger="click" popper-class="dash_popver" :visible="filters_visible" :width="400">
+    <el-popover
+      trigger="click"
+      popper-class="dash_popver"
+      :visible="filters_visible"
+      :width="400"
+      :offset="8"
+    >
       <template #reference>
         <el-button class="el-button--default" @click="filters_visible = !filters_visible">
           <span class="iconfont_icon">
@@ -172,13 +204,28 @@ const DateRangeSearch = () => {
           </el-radio-group>
         </div>
         <div class="filter_filter" style="margin-left: 8px">
-          <QuickMonth
-            v-if="props.isContainer"
-            :isETDToETA="props.isETDToETA"
-            @DateChange="DateChange"
-            :MonthStartDate="MonthStartDate"
-            :MonthEndDate="MonthEndDate"
-          ></QuickMonth>
+          <div v-if="props.isContainer">
+            <el-date-picker
+              style="width: 120px"
+              v-model="startDate"
+              format="MMM-YYYY"
+              type="month"
+              @change="StartChange"
+              :clearable="false"
+              placeholder="Start month"
+              placement="bottom"
+            />
+            <el-date-picker
+              style="width: 120px; margin-left: 8px"
+              v-model="EndDate"
+              format="MMM-YYYY"
+              type="month"
+              @change="EndChange"
+              :clearable="false"
+              placeholder="End month"
+              placement="bottom"
+            />
+          </div>
           <QuickCalendarDate
             v-else
             @DateChange="DateChange"