wyyl/themes/default/shared/select-countries.blade.php

<style>
  .countries-list{
    margin-top: 10px;
    width: 100%;
  }
  .countries-list .list-box{
    border: 1px solid #e7e7e7;
    display: inline-flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    margin: 0 10px 10px 0;
    border-radius: 5px;
    padding: 0 10px;
    min-width: 120px!important;
    cursor: pointer;
    user-select: none;
  }
  @media screen and (max-width: 400px) {
    .countries-list .list-box{
      --show-num-: 1;
      width: 100%;
    }
    .countries-list .list-box{
      margin-right: 0!important;
    }
  }
  @media screen and (min-width: 400px) and (max-width: 600px) {
    .countries-list .list-box{
      --show-num-: 2;
      width: calc((100% - (var(--show-num-) * 10px - 10px)) / var(--show-num-));
    }
    .countries-list .list-box:nth-child(2n){
      margin-right: 0!important;
    }
  }
  @media screen and (min-width: 600px) and (max-width: 800px) {
    .countries-list .list-box{
      --show-num-: 3;
      width: calc((100% - (var(--show-num-) * 10px - 10px)) / var(--show-num-));
    }
    .countries-list .list-box:nth-child(3n){
      margin-right: 0!important;
    }
  }
  @media screen and (min-width: 800px) and (max-width: 1000px) {
    .countries-list .list-box{
      --show-num-: 4;
      width: calc((100% - (var(--show-num-) * 10px - 10px)) / var(--show-num-));
    }
    .countries-list .list-box:nth-child(4n){
      margin-right: 0!important;
    }
  }
  @media screen and (min-width: 1000px) and (max-width: 1200px){
    .countries-list .list-box{
      --show-num-: 5;
      width: calc((100% - (var(--show-num-) * 10px - 10px)) / var(--show-num-));
    }
    .countries-list .list-box:nth-child(5n){
      margin-right: 0!important;
    }
  }
  @media screen and (min-width: 1200px) and (max-width: 1400px){
    .countries-list .list-box{
      --show-num-: 6;
      width: calc((100% - (var(--show-num-) * 10px - 10px)) / var(--show-num-));
    }
    .countries-list .list-box:nth-child(6n){
      margin-right: 0!important;
    }
  }
  @media screen and (min-width: 1400px) and (max-width: 1600px){
    .countries-list .list-box{
      --show-num-: 7;
      width: calc((100% - (var(--show-num-) * 10px - 10px)) / var(--show-num-));
    }
    .countries-list .list-box:nth-child(7n){
      margin-right: 0!important;
    }
  }
  @media screen and (min-width: 1600px){
    .countries-list .list-box{
      --show-num-: 8;
      width: calc((100% - (var(--show-num-) * 10px - 10px)) / var(--show-num-));
    }
    .countries-list .list-box:nth-child(8n){
      margin-right: 0!important;
    }
  }
  .countries-list .list-box .item-title{
    font-size: 18px;
    font-weight: bold;
    color: #707070;
    width: 100%;
    height: 30px;
    line-height: 30px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .countries-list .list-box .item-code{
    font-size: 14px;
    color: #656565;
    height: 30px;
    line-height: 30px;
  }
  .countries-list .list-box-active{
    position: relative;
    border-color: #409eff;
  }
  .countries-list .list-box-active .selected-content{
    position: absolute;
    bottom: 0;
    right: 5px;
    color: #409eff;
    height: 20px;
  }
  .countries-list .list-box-active .selected-content i{
    font-size: 20px;
    display: inline-flex;
    height: 20px;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
  }


</style>
<template id="select-countries">
  <el-dialog
    custom-class="mobileWidth"
    title="{{ __('admin/customer.choose_country') }}"
    :visible.sync="is_show"
    width="80%" @close="closeSelectCountries">
    {{--顶部内容--}}
    <div class="top">
      <input type="text" v-model="countries_name" class="form-control" placeholder="{{ __('admin/customer.search_placeholder') }}"/>
    </div>
    {{--国家列表--}}
    <div class="countries-list" v-if="Object.keys(countries_list).length > 0">
      <div :class="['list-box',{'list-box-active':isSelected(item)}]" v-for="(item,index) in countries_list" :title="item.name" @click="clickCountries(item)">
        <div class="item-title">@{{ item.name }}</div>
        <div class="item-code">@{{ item.code }}</div>
        <div v-if="isSelected(item)" class="selected-content">
          <i class="bi bi-check-all"></i>
        </div>
      </div>
    </div>
    <el-empty v-else description="{{ __('admin/customer.empty_placeholder') }}" />
  </el-dialog>
</template>
<script>
  Vue.component('select-countries', {
    template: '#select-countries',
    props: {
      country_list: {
        default: {},
        type: [Object,Array]
      },
    },
    data: function () {
      return {
        is_show: false,
        countries_name: '',
        countries_list: {},
      }
    },
    watch:{
      countries_name(){
        this.getCountriesList();
      }
    },
    computed: {},
    beforeMount() {},
    mounted(){
      this.getCountriesList()
    },
    methods: {
      // 显示国家选择器
      showSelectCountries() {
        this.is_show = true;
      },
      // 关闭国家选择器
      closeSelectCountries() {
        this.is_show = false;
      },
      // 国家列表
      getCountriesList(){
        let _this = this;
        let url = `countries/autocomplete`;
        let params = {
          name: _this.countries_name,
          page_size: 'all',
        };
        // 发起请求
        $http.get(url, params, {hload: true}).then((res) => {
          if(res.status === 'success'){
            _this.countries_list = res.data || {};
          }
        })
      },
      // 判断：当前国家是否已经被选中
      isSelected(item){
        let isHas = false;
        if (Object.values(this.country_list).findIndex(info => parseInt(info.id) === parseInt(item.id)) !== -1) {
          isHas = true;
        }

        return isHas;
      },
      // 点击当前国家
      clickCountries(item){
        let _this = this;
        let countryIds = Object.assign({}, _this.country_list);
        // 判断：根据是否已经存在进行对应的存在  不存在-添加；存在-删除
        if(_this.isSelected(item)) delete countryIds[item.id];// 存在-删除
        else countryIds[item.id] = item;// 不存在  添加

        _this.$message.success("{{ __('common.edit_success') }}");
        _this.$emit('change-info',countryIds);
      }


    }
  });
</script>