添加:物流管理 - 国家选择器添加全选和取消全选(仅多选模式有效)

This commit is contained in:
wuhui_zzw 2023-08-28 16:01:11 +08:00
parent f55c520015
commit 5e978f268c
1 changed files with 41 additions and 7 deletions

View File

@ -1,4 +1,15 @@
<style>
.countries-top{
width: 100%;
display: inline-flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
}
.countries-top button{
margin-right: 10px;
}
.countries-list{
margin-top: 10px;
width: 100%;
@ -129,13 +140,15 @@
</style>
<template id="select-countries">
<el-dialog
custom-class="mobileWidth"
title="{{ __('admin/customer.choose_country') }}"
:visible.sync="is_show"
width="80%" @close="closeSelectCountries">
<el-dialog custom-class="mobileWidth" title="{{ __('admin/customer.choose_country') }}" :visible.sync="is_show" width="80%" @close="closeSelectCountries">
{{--顶部内容--}}
<div class="top">
<div class="top countries-top">
{{--操作按钮--}}
<div v-if="!is_single">
<el-button v-if="Object.values(country_list).length < Object.values(countries_list).length" size="small" type="warning" @click="allSelected">{{ __('common.select_all') }}</el-button>
<el-button v-else size="small" type="warning" @click="allSelectedCancel">{{ __('admin/admin_roles.select_all') }}</el-button>
</div>
{{--搜索输入框--}}
<input type="text" v-model="countries_name" class="form-control" placeholder="{{ __('admin/customer.search_placeholder') }}"/>
</div>
{{--国家列表--}}
@ -226,7 +239,28 @@
_this.$message.success("{{ __('common.edit_success') }}");
_this.$emit('change-info',countryIds);
}
},
// 全选 - 点击全选
allSelected(){
let _this = this;
let countriesList = Object.assign({}, _this.countries_list);
let countryIds = {};
// 循环全选
Object.values(countriesList).forEach(item => {
countryIds[item.id] = item;
});
_this.$message.success("{{ __('common.edit_success') }}");
_this.$emit('change-info',countryIds);
},
// 全选 - 取消选中
allSelectedCancel(){
let _this = this;
let countryIds = {};
_this.$message.success("{{ __('common.edit_success') }}");
_this.$emit('change-info',countryIds);
},
}