实现左侧分类 右侧展示 以及搜索 及显示英文字母

      <el-form-item label="">
        <template #label>
          <div class="form_label_class">目的地</div>
        </template>
        <div v-clickOutside="handleClickOutside">
          <el-input
            v-model="queryForm.destCountryCodeShow"
            placeholder="请选择"
            readonly
            suffix-icon="CaretBottom"
            @focus="inputFocus(1)"
            style="width: 210px; height: 36px">
          </el-input>

          <!-- 目的国 模态框 -->
          <div class="destCountry_model" :class="{ box_disappear: !destCountryShow }">
            <div class="destCountry_model_top">
              <div class="destCountry_top_type">
                <span class="top_type1" @click="destCountryType(1)" :class="{ top_type_active: topTypeActive === 1 }"
                  >仓码</span
                >
                <span class="top_type2" @click="destCountryType(2)" :class="{ top_type_active: topTypeActive === 2 }"
                  >邮编</span
                >
              </div>
            </div>
            <div class="destCountry_model_content">
              <el-input
                v-model="destCountrySearch"
                placeholder="输入仓码快速查询"
                @input="destCountrySearchIpt"
                maxlength="15"
                show-word-limit
                style="width: 476px; height: 40px">
              </el-input>

              <div class="country_box" v-if="countryDestList.length > 0">
                <div class="country_left_box">
                  <div
                    v-for="item in countryDestList"
                    :key="item.id"
                    @click="countryClick(item)"
                    :class="{ country_Active: countryActive.countryCode === item.countryCode }"
                    class="country_left_item">
                    {{ item.countryName }}
                  </div>
                </div>

                <div class="country_right_box">
                  <template v-for="itemSon in countryItemList" :key="itemSon.title">
                    <div class="country_right_zimu">
                      {{ itemSon.title }}
                    </div>
                    <div style="display: flex; flex-wrap: wrap">
                      <div
                        class="country_right_item"
                        v-for="itemSon2 in itemSon.children"
                        :key="itemSon2.id"
                        :class="{ fbaCode_active: itemSon2.fbaCode === queryForm.destCountryCode }"
                        @click="fbaCodeClick(itemSon2)">
                        {{ itemSon2.fbaCode }}
                      </div>
                    </div>
                  </template>
                </div>
              </div>

              <div class="no_data" v-else>
                <img src="../../../../assets/home/no_data.png" class="img_box" alt="" />
                查询【仓码】错误或暂未被收录。
              </div>
            </div>
          </div>
        </div>
      </el-form-item>

  onMounted(async () => {
    getEnumData()
    destCountrySearchIpt('')
  })



  //  目的地--   获取国家仓码
  const countryDestList = ref([])
  async function getCountryDestList (keyword) {
    const res = await fbaAddressQueryCountryGroup(keyword)
    countryDestList.value = res.data
  }


  //  目的地--    仓码邮编 搜索
  const destCountrySearch = ref('')
  const destCountrySearchIpt = debounceFun(async e => {
    await getCountryDestList(e)
    let findItem = countryDestList.value.find(item => item.countryCode === countryActive.value)
    countryClick(findItem ? findItem : countryDestList.value[0])
  }, 800)


 // 仓码  左侧 国家点击
  const countryActive = ref('US')
  const countryItemList = ref([])
  function countryClick (item) {
    if (!item || !item.children || item.children.length == 0) return (countryItemList.value = [])
    countryActive.value = item.countryCode
    // 格式化  字母
    let obj = {
      A: 0,
      B: 1,
      C: 2,
      D: 3,
      E: 4,
      F: 5,
      G: 6,
      H: 7,
      I: 8,
      J: 9,
      K: 10,
      L: 11,
      M: 12,
      N: 13,
      O: 14,
      P: 15,
      Q: 16,
      R: 17,
      S: 18,
      T: 19,
      U: 20,
      V: 21,
      W: 22,
      X: 23,
      Y: 24,
      Z: 25,
      其他: 26
    }
    let resArr = []
    for (let i = 0; i < 27; i++) {
      resArr.push({
        children: [],
        title: ''
      })
    }
    item.children.forEach(element => {
      let index = obj[element.fbaCode[0]]
      if (index !== undefined) {
        resArr[index].children.push(element)
        resArr[index].title = element.fbaCode[0]
      } else {
        resArr[26].children.push(element)
        resArr[26].title = '其他'
      }
    })
    // resArr 中children长度为0的 删除这项
    countryItemList.value = resArr.filter(item => item.children.length > 0)
  }

   // 目的国 模态框
    .destCountry_model {
      position: absolute;
      left: 0;
      top: 40px;
      z-index: 9;
      width: 520px;
      height: 471px;
      background: #ffffff;
      box-shadow: 0px 4px 20px 0px rgba(62, 62, 62, 0.3);
      transform-origin: top left;
      transition: all 0.3s ease-out;
      border-radius: 8px;
      .destCountry_model_top {
        padding: 10px 20px;
        height: 52px;
        background: #282828;
        border-radius: 8px 8px 0 0;
        .destCountry_top_type {
          display: flex;
          width: 170px;
          height: 32px;
          background: #ffffff;
          border-radius: 6px;
          padding: 2px;
          .top_type1,
          .top_type2 {
            display: inline-block;
            width: 84px;
            height: 28px;
            text-align: center;
            line-height: 28px;
            border-radius: 6px;
            font-weight: 700;
            &:hover {
              cursor: pointer;
            }
            &.top_type_active {
              background: #282828;
              color: #fff;
            }
          }
        }
      }
      .destCountry_model_content {
        padding: 9px 20px;
        .country_box {
          display: flex;
          .country_left_box {
            margin-top: 7px;
            width: 94px;
            background-color: #f1f3f5;
            margin-right: 16px;
            height: 363px;
            overflow: auto;
            .country_left_item {
              position: relative;
              display: flex;
              justify-content: center;
              align-items: center;
              color: #a0a2a8;
              font-size: 14px;
              &:hover {
                cursor: pointer;
              }

              &.country_Active {
                background-color: #fff;
                color: #000;
                font-weight: 700;
                &::before {
                  position: absolute;
                  left: 0px;
                  top: 0;
                  content: '';
                  display: inline-block;
                  width: 6px;
                  height: 30px;
                  background: #ffce00;
                }
              }
            }
          }
          .country_right_zimu {
            color: #ffce00;
            margin-top: -6px;
            margin-bottom: 4px;
          }
          .country_right_box {
            flex: 1;
            // display: flex;
            flex-wrap: wrap;
            max-height: 360px;
            overflow: auto;
            padding-top: 12px;
            .country_right_item {
              margin-right: 14px;
              margin-bottom: 14px;
              width: 76px;
              height: 28px;
              font-family: SourceHanSansCN, SourceHanSansCN;
              font-weight: 400;
              font-size: 14px;
              background-color: #f1f3f5;
              line-height: 28px;
              text-align: center;
              font-style: normal;
              color: #5b5c5d;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              border-radius: 6px;
              &:hover {
                cursor: pointer;
                background-color: #ffce00;
                transition: all 0.2s;
              }
              &.fbaCode_active {
                cursor: pointer;
                background-color: #ffce00;
                transition: all 0.2s;
              }
            }
          }
        }
        .no_data {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          height: 360px;
          color: #303133;
          font-weight: 700;
          img {
            width: 120px;
            height: 110px;
          }
        }
      }
    }