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

<script setup lang="ts">
import { ref, watch, onMounted, computed } from 'vue'
import moment from 'moment'
import dayjs from 'dayjs'

const props = defineProps({
  defaultData: {
    type: Object
  },
  radioisDisabled: {
    type: Boolean,
    default: false
  },
  isRecent: {
    type: Boolean,
    default: false
  },
  isETDToETA: {
    type: Boolean,
    default: false
  },
  isContainer: {
    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 filters_visible = ref(false)
const shipper = ref(['All', 'Air', 'Sea', 'Road'])
const shipper_two = ref(['ETD', 'ETA'])
const DashDate = ref()
DashDate.value = []
const startDate = ref()
const EndDate = ref()
let dashboardObj: any = {}

const checkboxDisabled = computed(() => {
  if (props.isContainer && !props.isETDToETA) {
    return true
  } else {
    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
  } 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_end = defaultfiltersData.value?.date_end
    } else {
      dashboardObj.date_start = dayjs(DashDate.value[0]).format('MM/DD/YYYY')
      dashboardObj.date_end = dayjs(DashDate.value[1]).format('MM/DD/YYYY')
    }
  }
  dashboardObj.transportation = checkboxGroup1.value
  dashboardObj.date_type = CheckboxGroup2.value
}
const changeCheckboxGroup1 = (val: any) => {
  if (val.length == 3) {
    checkboxGroup1.value = ['All']
  }
  if (val.length == 0) {
    checkboxGroup1.value = ['All']
  } else if (val.indexOf('All') != -1) {
    if (val.indexOf('All') == 1 && val.length == 2) {
      checkboxGroup1.value = ['All']
    } else {
      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, date2: any) => {
  if (props.isContainer) {
    dashboardObj.date_start = value
    dashboardObj.date_end = date2
  } else {
    dashboardObj.date_start = value[0]
    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()
}
// 查询
const DateRangeSearch = () => {
  if (props.isRecent) {
    emit('FilterSearch', false, dashboardObj)
  } else {
    emit('FilterSearch', dashboardObj)
  }
  filters_visible.value = false
}
</script>
<template>
  <div class="DashFilters">
    <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">
            <svg class="iconfont" aria-hidden="true">
              <use xlink:href="#icon-icon_filter_b"></use>
            </svg>
          </span>
          Filters
          <span class="iconfont_icon">
            <svg class="iconfont" aria-hidden="true">
              <use xlink:href="#icon-icon_dropdown_b"></use>
            </svg>
          </span>
        </el-button>
      </template>
      <div class="Dash_title">Transport Mode</div>
      <div class="filter_filter">
        <el-checkbox-group
          @change="changeCheckboxGroup1"
          v-model="checkboxGroup1"
          size="large"
          :disabled="checkboxDisabled"
        >
          <el-checkbox-button v-for="item in shipper" :key="item" :value="item">
            {{ item }}
          </el-checkbox-button>
        </el-checkbox-group>
      </div>
      <div class="Dash_title">
        <div>Date Range</div>
        <div v-if="props.isContainer && !props.isETDToETA" class="dash_tips">
          The time range is fixed at 12 months.
        </div>
      </div>
      <div class="dash_flex">
        <div class="filter_filter">
          <el-radio-group
            v-model="CheckboxGroup2"
            @change="changeCheckboxGroup2"
            :disabled="props.radioisDisabled"
          >
            <el-radio-button v-for="item in shipper_two" :key="item" :value="item" :label="item">
            </el-radio-button>
          </el-radio-group>
        </div>
        <div class="filter_filter" style="margin-left: 8px">
          <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"
            :Date="DashDate"
            :isDisabled="isDisabled"
          ></QuickCalendarDate>
        </div>
      </div>
      <div class="daterange_bottom">
        <div><el-button type="default" @click="clearrest" class="Clear">Reset</el-button></div>
        <div>
          <el-button class="search el-button--dark" @click="DateRangeSearch">Search</el-button>
        </div>
      </div>
    </el-popover>
  </div>
</template>
<style lang="scss" scoped>
:deep(.el-checkbox-button__inner) {
  color: var(--tag-info-text-color);
  font-size: var(--font-size-3);
  font-weight: 400;
  padding: 0;
  width: 92px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  margin-bottom: 8px;
}
:deep(.el-checkbox-button__inner:hover) {
  color: var(--color-theme);
  background-color: var(--color-btn-default-bg-hover);
  border-color: var(--color-btn-default-bg-hover);
}
:deep(.el-checkbox-button.is-focus .el-checkbox-button__inner) {
  border-color: var(--color-border);
}
:deep(.el-checkbox-button:first-child .el-checkbox-button__inner) {
  border-left: 1px solid var(--color-border);
  border-top-left-radius: var(--border-radius-6);
  border-bottom-left-radius: var(--border-radius-6);
}
:deep(.el-checkbox-button:last-child .el-checkbox-button__inner) {
  border-top-right-radius: var(--border-radius-6);
  border-bottom-right-radius: var(--border-radius-6);
}
:deep(.el-checkbox-button.is-checked .el-checkbox-button__inner) {
  color: var(--color-theme);
  background-color: transparent;
  border-color: var(--color-theme);
  box-shadow: none;
  font-weight: 700;
}
:deep(.el-checkbox-button.is-checked:first-child .el-checkbox-button__inner) {
  border-left-color: var(--color-theme);
}
:deep(.el-checkbox-button.is-disabled.is-checked .el-checkbox-button__inner) {
  background-color: #eaebed;
  border-color: var(--color-border);
  color: #2b2f36;
  font-weight: 700;
}
// :deep(.el-checkbox-button.is-focus .el-checkbox-button__inner) {
//   border-color: var(--color-border);
// }
.Dash_title {
  height: 48px;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 8px 16px 0 16px;
}
.filter_filter {
  margin-left: 16px;
}
.dash_flex {
  display: flex;
  align-items: center;
  height: 40px;
  margin-bottom: 16px;
}
.daterange_bottom {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 48px;
  border-top: 1px solid var(--color-border);
  margin-top: 5px;
  font-weight: 400;
  font-size: var(--font-size-3);
}
.Clear {
  width: 81px;
  height: 32px;
  margin-right: 7.82px;
}
.search {
  width: 86px;
  height: 32px;
  margin-right: 16px;
}
.dash_tips {
  font-weight: 100;
  font-size: 12px;
  color: var(--color-neutral-5);
}
</style>