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

<script setup lang="ts">
import type { DropdownInstance } from 'element-plus'
import { cloneDeep } from 'lodash'
import { useFiltersStore } from '@/stores/modules/filtersList'

const filtersStore = useFiltersStore()

interface ListItem {
  name: string
  sname: string
  number: number
  icon: string
  checked: boolean
}
interface Props {
  transportListItem: ListItem[]
}
const props = withDefaults(defineProps<Props>(), {})
const transportList = ref()
const checkAll = ref(false)
const dropdownVisible = ref<DropdownInstance>()
const updateTransportList = (data: any) => {
  transportList.value = cloneDeep(data)
  const isCheckedAll = transportList.value?.every((item: any) => item.checked)
  isCheckedAll ? (checkAll.value = true) : (checkAll.value = false)
}
watch(
  () => props.transportListItem,
  (current) => {
    updateTransportList(current)
  },
  {
    immediate: true,
    deep: true
  }
)

const totalNumber = computed(() => {
  return (
    transportList.value?.filter((item) => {
      return item.checked
    }).length || 0
  )
})

const handleCheckAllChange = (checked: any) => {
  transportList.value.forEach((item: any) => {
    item.checked = checked
  })
}
const handleCheckedTransportChange = (item: any) => {
  const isCheckedAll = transportList.value.every((item: any) => item.checked)
  isCheckedAll ? (checkAll.value = true) : (checkAll.value = false)
}

// 清除选中
const clearList = () => {
  checkAll.value = false
  if (transportList.value != undefined) {
    transportList.value.forEach((item: any) => {
      item.checked = false
    })
  }
}
const emit = defineEmits(['transportSearch'])

const transportSearch = () => {
  const allChecked = transportList.value.every((item) => item.checked)
  const selectedNames = allChecked
    ? ['All']
    : transportList.value.filter((item) => item.checked).map((item) => item.sname)
  filtersStore.updateFilter({
    title: 'Transport Mode',
    value: selectedNames,
    keyType: 'array',
    key: 'transport_mode'
  })
  dropdownVisible.value.handleClose()
  emit('transportSearch', transportList.value)
}

// 每次打开时都应该重新赋值
const handleDropdownVisibleChange = (visible: boolean) => {
  if (visible) {
    updateTransportList(props.transportListItem)
  }
}
</script>
<template>
  <div class="select">
    <el-dropdown
      ref="dropdownVisible"
      trigger="click"
      :hide-on-click="false"
      @visible-change="handleDropdownVisibleChange"
    >
      <div class="el-dropdown-link">
        <div class="select_title">Transport Mode</div>
        <span class="iconfont_icon">
          <svg class="iconfont icon_dark" 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">({{ totalNumber }})</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)"
              >
                <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;
  fill: var(--color-neutral-1);
}
.select {
  width: 186px;
  margin-left: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  border: 1px solid var(--color-select-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: 100%;
  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: 100%;
  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(--border-color-2);
  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);
}
:deep(.el-dropdown-menu) {
  background-color: var(--management-bg-color);
}
.dropdownwidth {
  width: 248px;
  background-color: var(--management-bg-color);
  border-color: var(--management-bg-color);
}
@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(--border-color-2);
}
</style>