k_online_ui/src/components/TransportMode/src/TransportMode.vue

<script setup lang="ts">
import { ref, onMounted, onBeforeMount, watch, computed } from 'vue'
import type { DropdownInstance } from 'element-plus'
import emitter from '@/utils/bus'

interface ListItem {
  name: string
  number: number
  icon: string
  checked: boolean
}
interface Props {
  TransportListItem: ListItem[]
  isShipment: Boolean
}
const props = withDefaults(defineProps<Props>(), {})
const TransportList = ref(props.TransportListItem)
watch(
  () => props.TransportListItem,
  (current) => {
    TransportList.value = current
  }
)

onMounted(() => {
  emitter.on('clearTag', (tag: any) => {
    if (tag.includes('Transport Mode')) {
      clearList()
    }
  })
  defaultTransport()
})

onBeforeMount(() => {
  emitter.off('clearTag')
})

const checkAll = ref(false)
const dropdown1 = ref<DropdownInstance>()
let checkedCount: any[] = []
const TotalAll = computed(() => {
  var total_sum = 0
  if (TransportList.value != undefined) {
    TransportList.value.map((item) => {
      total_sum += item.number
    })
  }
  return total_sum
})

const handleCheckAllChange = (val: any) => {
  checkedCount = []
  TransportList.value.forEach((item: any) => {
    if (val) {
      item.checked = true
      checkedCount.push(item.name)
    } else {
      item.checked = false
      checkedCount = []
    }
  })
}
const handleCheckedTransportChange = (value: any, checked: any, index: any) => {
  if (checked) {
    checkedCount.push(value)
    const map = new Map()
    checkedCount.forEach((item) => map.set(item, true))
    checkedCount = [...map.keys()]
  } else {
    if (checkedCount.length == 1) {
      checkedCount.splice(0, 1)
    } else {
      checkedCount.splice(index, 1)
    }
  }
  checkAll.value = checkedCount.length === TransportList.value.length
}

// 清除选中
const clearList = () => {
  checkAll.value = false
  if (TransportList.value != undefined) {
    TransportList.value.forEach((item: any) => {
      item.checked = false
    })
  }
  changedata.value = ''
  checkedCount = []
  emit('clearTransportTags')
}
const emit = defineEmits(['TransportSearch', 'clearTransportTags', 'defaultTransport'])
const changedata = ref()
//点击搜索
const TransportData = {
  title: 'Transport Mode',
  data: ''
}
const TransportSearch = (visible: any) => {
  TransportList.value.forEach((item: any) => {
    if (item.checked) {
      checkedCount.push(item.name)
      const map = new Map()
      checkedCount.forEach((item) => map.set(item, true))
      checkedCount = [...map.keys()]
    }
  })
  if (checkedCount.length == TransportList.value.length) {
    changedata.value = 'All'
  } else {
    changedata.value = checkedCount.join(', ')
  }
  TransportData.data = changedata.value
  emit('TransportSearch', TransportData)
  if (!dropdown1.value) return
  if (visible) {
    dropdown1.value.handleClose()
  } else {
    dropdown1.value.handleOpen()
  }
}
const searchTableQeury = ref()
const searchTableQeuryTracking = ref()
const defaultTransport = () => {
  if (props.isShipment) {
    if (
      sessionStorage.getItem('clickParams') == null ||
      sessionStorage.getItem('clickParams') == '{}'
    ) {
      if (sessionStorage.getItem('searchTableQeuryTracking') == null) {
        checkAll.value = true
        TransportData.data = 'All'
      } else {
        searchTableQeuryTracking.value =
          JSON.parse(sessionStorage.getItem('searchTableQeuryTracking') as string) || {}
        if (searchTableQeuryTracking.value.transport_mode == 'All') {
          checkAll.value = true
          TransportData.data = 'All'
        } else {
          TransportData.data = ''
        }
      }
      emit('defaultTransport', TransportData, searchTableQeuryTracking.value)
    }
  } else {
    if (sessionStorage.getItem('searchTableQeury') == null) {
      checkAll.value = true
      TransportData.data = 'All'
    } else {
      searchTableQeury.value =
        JSON.parse(sessionStorage.getItem('searchTableQeury') as string) || {}
      if (searchTableQeury.value.transport_mode == 'All') {
        checkAll.value = true
        TransportData.data = 'All'
      } else {
        TransportData.data = ''
      }
    }
    emit('defaultTransport', TransportData, searchTableQeury.value)
  }
}
</script>
<template>
  <div class="select">
    <el-dropdown ref="dropdown1" trigger="click" :hide-on-click="false">
      <div class="el-dropdown-link">
        <div class="select_title">Transport Mode</div>
        <span class="iconfont_icon">
          <svg class="iconfont" aria-hidden="true">
            <use xlink:href="#icon-icon_dropdown_b"></use>
          </svg>
        </span>
      </div>
      <template #dropdown>
        <div class="dropdownwidth">
          <div class="title">Transport Mode</div>
          <el-dropdown-menu>
            <el-dropdown-item>
              <el-checkbox v-model="checkAll" class="checkbox" @change="handleCheckAllChange">
                <div class="checkbox_title">
                  <span class="iconfont_icon">
                    <svg class="iconfont iconfont_select" aria-hidden="true">
                      <use xlink:href="#icon-icon_all_b"></use>
                    </svg>
                  </span>
                  Select All
                </div>
                <div class="checkbox_number">({{ TotalAll }})</div>
              </el-checkbox>
            </el-dropdown-item>
            <el-divider></el-divider>
            <el-dropdown-item v-for="(item, index) in TransportList" :key="index">
              <el-checkbox
                :value="item.name"
                v-model="item.checked"
                class="checkbox"
                @change="handleCheckedTransportChange(item.name, item.checked, index)"
              >
                <div class="checkbox_title">
                  <span class="iconfont_icon">
                    <svg class="iconfont iconfont_select" aria-hidden="true">
                      <use :xlink:href="item.icon"></use>
                    </svg>
                  </span>
                  {{ item.name }}
                </div>
                <div class="checkbox_number">({{ item.number }})</div>
              </el-checkbox>
            </el-dropdown-item>
            <div class="transport_bottom">
              <div>
                <el-button class="clear" type="default" @click="clearList">Reset</el-button>
              </div>
              <div>
                <el-button class="search el-button--dark" @click="TransportSearch"
                  >Search</el-button
                >
              </div>
            </div>
          </el-dropdown-menu>
        </div>
      </template>
    </el-dropdown>
  </div>
</template>
<style lang="scss" scoped>
.iconfont_icon {
  margin-right: 8px;
}
.iconfont_select {
  width: 17px;
  height: 17px;
}
.select {
  width: 186px;
  margin-left: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-6);
}
.select:hover {
  border: 1px solid var(--color-theme);
}
.el-dropdown-link {
  width: 186px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.select_title {
  font-size: var(--font-size-3);
  font-weight: 400;
  margin-left: 8.53px;
  color: var(--color-neutral-1);
}
.title {
  font-weight: 700;
  font-size: var(--font-size-5);
  background-color: var(--color-header-bg);
  height: 48px;
  display: flex;
  align-items: center;
  padding-left: 16px;
}
.checkbox {
  width: 216px;
  font-weight: 400;
  font-size: var(--font-size-3);
  padding: 0 12px;
  height: 40px;
}
:deep(.el-popper__arrow, .el-popper__arrow:before) {
  height: 0;
  width: 0;
}
:deep(.el-checkbox__label) {
  width: 176px;
  padding-left: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.checkbox_title {
  color: var(--color-neutral-1);
}
.checkbox_number {
  color: var(--color-neutral-3);
}
.transport_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;
}
.search:hover {
  color: var(--color-theme);
}
:deep(.el-dropdown-menu__item:hover) {
  background-color: var(--border-hover-color);
  border-radius: var(--border-radius-6);
  border-color: var(--border-hover-color);
}
:deep(.el-dropdown-menu__item) {
  padding: 0;
  margin: 10px 16px;
}
:deep(.el-dropdown-menu__item:not(.is-disabled):focus) {
  background-color: var(--border-hover-color);
  border-radius: var(--border-radius-6);
  border-color: var(--border-hover-color);
}
.dropdownwidth {
  width: 248px;
}
@media only screen and (min-width: 1280px) {
  .el-dropdown-link,
  .select {
    width: 224px;
  }
  .dropdownwidth {
    width: 248px;
  }
}
@media only screen and (min-width: 1440px) {
  .el-dropdown-link,
  .select {
    width: 336px;
  }
  .dropdownwidth {
    width: 336px;
  }
}
.el-divider--horizontal {
  margin: 8px 0;
  border-top-color: var(--color-border);
}
</style>