apache/cloudstack
1
0
Fork 0
mirror of https://github.com/apache/cloudstack.git synced 2025-11-04 00:02:37 +01:00
Code Issues Packages Projects Releases Wiki Activity

UI - Fixes search error in selectbox (#5472)

Browse Source 
* fix search select options

* fix error when selected zone

* fix filterOptions of selecbox
This commit is contained in:
Hoang Nguyen 2021-09-21 00:42:18 +07:00 committed by GitHub
parent 93150f465b
commit 121a72c4fa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
37 changed files with 408 additions and 286 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui/src/components/header/ProjectMenu.vue
View File

@ -38,10 +38,12 @@
</span>
</a-tooltip>
<a-select-option v-for="(project, index) in projects" :key="index">
<a-select-option v-for="(project, index) in projects" :key="index" :label="project.displaytext || project.name">
<span>
<resource-icon v-if="project.icon && project.icon.base64image" :image="project.icon.base64image" size="1x" style="margin-right: 5px"/>
<a-icon v-else style="margin-right: 5px" type="project" />
{{ project.displaytext || project.name }}
</span>
</a-select-option>
</a-select>
</span>
@ -106,7 +108,7 @@ export default {
}
},
filterProject (input, option) {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
}
}

7
ui/src/components/view/SearchView.vue
View File

@ -61,13 +61,15 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
:loading="field.loading">
<a-select-option
v-for="(opt, idx) in field.opts"
:key="idx"
:value="opt.id">
:value="opt.id"
:label="$t(opt.name)">
<div>
<span v-if="(field.name.startsWith('zone'))">
<span v-if="opt.icon">
<resource-icon :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
@ -81,6 +83,7 @@
<a-icon v-else type="block" style="margin-right: 5px" />
</span>
{{ $t(opt.name) }}
</div>
</a-select-option>
</a-select>
<a-input

8
ui/src/views/AutogenView.vue
View File

@ -265,13 +265,13 @@
:loading="field.loading"
:placeholder="field.description"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
:autoFocus="fieldIndex === firstIndex"
>
<a-select-option key="">{{ }}</a-select-option>
<a-select-option v-for="opt in field.opts" :key="opt.id">
<span>
<a-select-option v-for="opt in field.opts" :key="opt.id" :label="opt.name || opt.description || opt.traffictype || opt.publicip">
<div>
<span v-if="(field.name.startsWith('template') || field.name.startsWith('iso'))">
<span v-if="opt.icon">
<resource-icon :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
@ -308,8 +308,8 @@
</span>
<a-icon v-else type="block" style="margin-right: 5px"/>
</span>
</span>
{{ opt.name || opt.description || opt.traffictype || opt.publicip }}
</div>
</a-select-option>
</a-select>
</span>

22
ui/src/views/compute/AssignInstance.vue
View File

@ -52,12 +52,14 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" >
<a-select-option v-for="domain in domains" :key="domain.name" :value="domain.id">
<a-select-option v-for="domain in domains" :key="domain.name" :value="domain.id" :label="domain.path || domain.name || domain.description">
<span>
<resource-icon v-if="domain && domain.icon" :image="domain.icon.base64image" size="1x" style="margin-right: 5px"/>
<a-icon v-else type="block" style="margin-right: 5px" />
{{ domain.path || domain.name || domain.description }}
</span>
</a-select-option>
</a-select>
</div>
@ -71,12 +73,14 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" >
<a-select-option v-for="account in accounts" :key="account.name" :value="account.name">
<span>
<resource-icon v-if="account && account.icon" :image="account.icon.base64image" size="1x" style="margin-right: 5px"/>
<a-icon v-else type="team" style="margin-right: 5px" />
{{ account.name }}
</span>
</a-select-option>
</a-select>
<span v-if="accountError" class="required">{{ $t('label.required') }}</span>
@ -92,12 +96,14 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" >
<a-select-option v-for="project in projects" :key="project.id" :value="project.id">
<a-select-option v-for="project in projects" :key="project.id" :value="project.id" :label="project.name">
<span>
<resource-icon v-if="project && project.icon" :image="project.icon.base64image" size="1x" style="margin-right: 5px"/>
<a-icon v-else type="project" style="margin-right: 5px" />
{{ project.name }}
</span>
</a-select-option>
</a-select>
<span v-if="projectError" class="required">{{ $t('label.required') }}</span>
@ -111,12 +117,14 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" >
<a-select-option v-for="network in networks" :key="network.id" :value="network.id">
<a-select-option v-for="network in networks" :key="network.id" :value="network.id" :label="network.name ? network.name : '-'">
<span>
<resource-icon v-if="network && network.icon" :image="network.icon.base64image" size="1x" style="margin-right: 5px"/>
<a-icon v-else type="apartment" style="margin-right: 5px" />
{{ network.name ? network.name : '-' }}
</span>
</a-select-option>
</a-select>
</div>

6
ui/src/views/compute/CreateKubernetesCluster.vue
View File

@ -49,15 +49,17 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
:loading="zoneLoading"
:placeholder="apiParams.zoneid.description"
@change="val => { this.handleZoneChange(this.zones[val]) }">
<a-select-option v-for="(opt, optIndex) in this.zones" :key="optIndex">
<a-select-option v-for="(opt, optIndex) in this.zones" :key="optIndex" :label="opt.name || opt.description">
<span>
<resource-icon v-if="opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
<a-icon v-else type="global" style="margin-right: 5px" />
{{ opt.name || opt.description }}
</span>
</a-select-option>
</a-select>
</a-form-item>

15
ui/src/views/compute/DeployVM.vue
View File

@ -68,15 +68,19 @@
}]"
showSearch
optionFilterProp="children"
:filterOption="filterOption"
:filterOption="(input, option) => {
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
@change="onSelectZoneId"
:loading="loading.zones"
autoFocus
>
<a-select-option v-for="zone1 in zones" :key="zone1.id">
<a-select-option v-for="zone1 in zones" :key="zone1.id" :label="zone1.name">
<span>
<resource-icon v-if="zone1.icon && zone1.icon.base64image" :image="zone1.icon.base64image" size="1x" style="margin-right: 5px"/>
<a-icon v-else style="margin-right: 5px" type="global" />
{{ zone1.name }}
</span>
</a-select-option>
</a-select>
</a-form-item>
@ -1878,9 +1882,10 @@ export default {
})
},
filterOption (input, option) {
return (
option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0
)
console.log(option)
// return (
// option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0
// )
},
onSelectZoneId (value) {
this.dataPreFill = {}

7
ui/src/views/compute/InstanceTab.vue
View File

@ -165,15 +165,18 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" >
<a-select-option
v-for="network in addNetworkData.allNetworks"
:key="network.id"
:value="network.id">
:value="network.id"
:label="network.name">
<span>
<resource-icon v-if="network.icon" :image="network.icon.base64image" size="1x" style="margin-right: 5px"/>
<a-icon v-else type="apartment" style="margin-right: 5px" />
{{ network.name }}
</span>
</a-select-option>
</a-select>
<p class="modal-form__label">{{ $t('label.publicip') }}:</p>

5
ui/src/views/compute/wizard/NetworkSelection.vue
View File

@ -267,8 +267,11 @@ export default {
this.form = this.$form.createForm(this)
},
created () {
this.vpcs = []
const projectId = store?.getters?.project?.id || null
if (!projectId) return
api('listVPCs', {
projectid: store.getters.project.id
projectid: projectId
}).then((response) => {
this.vpcs = _.get(response, 'listvpcsresponse.vpc')
})

6
ui/src/views/dashboard/CapacityDashboard.vue
View File

@ -28,12 +28,14 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" >
<a-select-option v-for="(zone, index) in zones" :key="index">
<a-select-option v-for="(zone, index) in zones" :key="index" :label="zone.name">
<span>
<resource-icon v-if="zone.icon && zone.icon.base64image" :image="zone.icon.base64image" size="1x" style="margin-right: 5px"/>
<a-icon v-else style="margin-right: 5px" type="global" />
{{ zone.name }}
</span>
</a-select-option>
</a-select>
</div>

6
ui/src/views/iam/AddAccount.vue
View File

@ -112,12 +112,14 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" >
<a-select-option v-for="domain in domainsList" :key="domain.id">
<a-select-option v-for="domain in domainsList" :key="domain.id" :label="domain.path || domain.name || domain.description">
<span>
<resource-icon v-if="domain && domain.icon" :image="domain.icon.base64image" size="1x" style="margin-right: 5px"/>
<a-icon v-else type="block" style="margin-right: 5px"/>
{{ domain.path || domain.name || domain.description }}
</span>
</a-select-option>
</a-select>
</a-form-item>

12
ui/src/views/iam/AddUser.vue
View File

@ -92,12 +92,14 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" >
<a-select-option v-for="domain in domainsList" :key="domain.id">
<a-select-option v-for="domain in domainsList" :key="domain.id" :label="domain.path || domain.name || domain.description">
<span>
<resource-icon v-if="domain && domain.icon" :image="domain.icon.base64image" size="1x" style="margin-right: 5px"/>
<a-icon v-else type="block" style="margin-right: 5px" />
{{ domain.path || domain.name || domain.description }}
</span>
</a-select-option>
</a-select>
</a-form-item>
@ -112,12 +114,14 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" >
<a-select-option v-for="(item, idx) in accountList" :key="idx">
<a-select-option v-for="(item, idx) in accountList" :key="idx" :label="item.name">
<span>
<resource-icon v-if="item && item.icon" :image="item.icon.base64image" size="1x" style="margin-right: 5px"/>
<a-icon v-else type="team" style="margin-right: 5px" />
{{ item.name }}
</span>
</a-select-option>
</a-select>
</a-form-item>

6
ui/src/views/image/AddKubernetesSupportedVersion.vue
View File

@ -58,14 +58,16 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
:loading="zoneLoading"
:placeholder="apiParams.zoneid.description">
<a-select-option v-for="(opt, optIndex) in this.zones" :key="optIndex">
<a-select-option v-for="(opt, optIndex) in this.zones" :key="optIndex" :label="opt.name || opt.description">
<span>
<resource-icon v-if="opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
<a-icon v-else type="global" style="margin-right: 5px"/>
{{ opt.name || opt.description }}
</span>
</a-select-option>
</a-select>
</a-form-item>

6
ui/src/views/image/IsoZones.vue
View File

@ -121,16 +121,18 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
:loading="zoneLoading"
autoFocus>
<a-select-option v-for="zone in zones" :key="zone.id">
<a-select-option v-for="zone in zones" :key="zone.id" :label="zone.name">
<div>
<span v-if="zone.icon && zone.icon.base64image">
<resource-icon :image="zone.icon.base64image" size="1x" style="margin-right: 5px"/>
</span>
<a-icon v-else type="global" style="margin-right: 5px" />
{{ zone.name }}
</div>
</a-select-option>
</a-select>
</a-form-item>

12
ui/src/views/image/RegisterOrUploadIso.vue
View File

@ -88,14 +88,16 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
:loading="zoneLoading"
:placeholder="apiParams.zoneid.description">
<a-select-option :value="opt.id" v-for="opt in zones" :key="opt.id">
<a-select-option :value="opt.id" v-for="opt in zones" :key="opt.id" :label="opt.name || opt.description">
<span>
<resource-icon v-if="opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
<a-icon v-else type="global" style="margin-right: 5px" />
{{ opt.name || opt.description }}
</span>
</a-select-option>
</a-select>
</a-form-item>
@ -118,14 +120,16 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
:loading="osTypeLoading"
:placeholder="apiParams.ostypeid.description">
<a-select-option :value="opt.id" v-for="(opt, optIndex) in osTypes" :key="optIndex">
<a-select-option :value="opt.id" v-for="(opt, optIndex) in osTypes" :key="optIndex" :label="opt.name || opt.description">
<span>
<resource-icon v-if="opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
<a-icon v-else type="global" style="margin-right: 5px" />
{{ opt.name || opt.description }}
</span>
</a-select-option>
</a-select>
</a-form-item>

12
ui/src/views/image/RegisterOrUploadTemplate.vue
View File

@ -99,14 +99,16 @@
mode="multiple"
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
:placeholder="apiParams.zoneids.description"
@change="handlerSelectZone">
<a-select-option v-for="opt in zones.opts" :key="opt.id">
<a-select-option v-for="opt in zones.opts" :key="opt.id" :label="opt.name || opt.description">
<span>
<resource-icon v-if="opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
<a-icon v-else type="global" style="margin-right: 5px" />
{{ opt.name || opt.description }}
</span>
</a-select-option>
</a-select>
</a-form-item>
@ -133,15 +135,17 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
@change="handlerSelectZone"
:placeholder="apiParams.zoneid.description"
:loading="zones.loading">
<a-select-option :value="zone.id" v-for="zone in zones.opts" :key="zone.id">
<a-select-option :value="zone.id" v-for="zone in zones.opts" :key="zone.id" :label="zone.name || zone.description">
<span>
<resource-icon v-if="zone.icon" :image="zone.icon.base64image" size="1x" style="margin-right: 5px"/>
<a-icon v-else type="global" style="margin-right: 5px" />
{{ zone.name || zone.description }}
</span>
</a-select-option>
</a-select>
</a-form-item>

6
ui/src/views/image/TemplateZones.vue
View File

@ -122,16 +122,18 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
:loading="zoneLoading"
autoFocus>
<a-select-option v-for="zone in zones" :key="zone.id">
<a-select-option v-for="zone in zones" :key="zone.id" :label="zone.name">
<div>
<span v-if="zone.icon && zone.icon.base64image">
<resource-icon :image="zone.icon.base64image" size="1x" style="margin-right: 5px"/>
</span>
<a-icon v-else type="global" style="margin-right: 5px" />
{{ zone.name }}
</div>
</a-select-option>
</a-select>
</a-form-item>

12
ui/src/views/image/UpdateTemplateIsoPermissions.vue
View File

@ -74,12 +74,14 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" >
<a-select-option v-for="account in accountsList" :key="account.name">
<a-select-option v-for="account in accountsList" :key="account.name" :label="account.name">
<span>
<resource-icon v-if="account.icon" :image="account.icon.base64image" size="1x" style="margin-right: 5px"/>
<a-icon v-else type="team" style="margin-right: 5px" />
{{ account.name }}
</span>
</a-select-option>
</a-select>
</div>
@ -103,12 +105,14 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" >
<a-select-option v-for="project in projectsList" :key="project.name">
<a-select-option v-for="project in projectsList" :key="project.name" :label="project.name">
<span>
<resource-icon v-if="project.icon" :image="project.icon.base64image" size="1x" style="margin-right: 5px"/>
<a-icon v-else type="project" style="margin-right: 5px" />
{{ project.name }}
</span>
</a-select-option>
</a-select>
</div>

6
ui/src/views/infra/AddPrimaryStorage.vue
View File

@ -59,12 +59,14 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" >
<a-select-option :value="zone.id" v-for="(zone) in zones" :key="zone.id">
<a-select-option :value="zone.id" v-for="(zone) in zones" :key="zone.id" :label="zone.name">
<span>
<resource-icon v-if="zone.icon" :image="zone.icon.base64image" size="1x" style="margin-right: 5px"/>
<a-icon v-else type="global" style="margin-right: 5px" />
{{ zone.name }}
</span>
</a-select-option>
</a-select>
</a-form-item>

7
ui/src/views/infra/AddSecondaryStorage.vue
View File

@ -55,15 +55,18 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" >
<a-select-option
:value="zone.id"
v-for="(zone) in zones"
:key="zone.id">
:key="zone.id"
:label="zone.name">
<span>
<resource-icon v-if="zone.icon" :image="zone.icon.base64image" size="1x" style="margin-right: 5px"/>
<a-icon v-else type="global" style="margin-right: 5px" />
{{ zone.name }}
</span>
</a-select-option>
</a-select>
</a-form-item>

7
ui/src/views/infra/ClusterAdd.vue
View File

@ -27,15 +27,18 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" >
<a-select-option
v-for="zone in zonesList"
:value="zone.id"
:key="zone.id">
:key="zone.id"
:label="zone.name">
<span>
<resource-icon v-if="zone.icon" :image="zone.icon.base64image" size="1x" style="margin-right: 5px"/>
<a-icon v-else type="global" style="margin-right: 5px" />
{{ zone.name }}
</span>
</a-select-option>
</a-select>
</div>

7
ui/src/views/infra/HostAdd.vue
View File

@ -28,15 +28,18 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" >
<a-select-option
v-for="zone in zonesList"
:value="zone.id"
:key="zone.id">
:key="zone.id"
:label="zone.name">
<span>
<resource-icon v-if="zone.icon" :image="zone.icon.base64image" size="1x" style="margin-right: 5px"/>
<a-icon v-else type="global" style="margin-right: 5px" />
{{ zone.name }}
</span>
</a-select-option>
</a-select>
</div>

7
ui/src/views/infra/PodAdd.vue
View File

@ -29,15 +29,18 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" >
<a-select-option
v-for="zone in zonesList"
:value="zone.id"
:key="zone.id">
:key="zone.id"
:label="zone.name">
<span>
<resource-icon v-if="zone.icon" :image="zone.icon.base64image" size="1x" style="margin-right: 5px"/>
<a-icon v-else type="global" style="margin-right: 5px" />
{{ zone.name }}
</span>
</a-select-option>
</a-select>
</a-form-item>

17
ui/src/views/infra/network/DedicatedVLANTab.vue
View File

@ -104,12 +104,14 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" >
<a-select-option v-for="domain in domains" :key="domain.id" :value="domain.id">
<a-select-option v-for="domain in domains" :key="domain.id" :value="domain.id" :label="domain.path || domain.name || domain.description">
<span>
<resource-icon v-if="domain && domain.icon" :image="domain.icon.base64image" size="1x" style="margin-right: 5px"/>
<a-icon v-else type="block" style="margin-right: 5px" />
{{ domain.path || domain.name || domain.description }}
</span>
</a-select-option>
</a-select>
</a-form-item>
@ -122,15 +124,17 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" >
<a-select-option
v-for="account in accounts"
:key="account.id"
:value="account.name">
<span>
<resource-icon v-if="account && account.icon" :image="account.icon.base64image" size="1x" style="margin-right: 5px"/>
<a-icon v-else type="team" style="margin-right: 5px" />
{{ account.name }}
</span>
</a-select-option>
</a-select>
</a-form-item>
@ -143,15 +147,18 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" >
<a-select-option
v-for="project in projects"
:key="project.id"
:value="project.id">
:value="project.id"
:label="project.name">
<span>
<resource-icon v-if="project && project.icon" :image="project.icon.base64image" size="1x" style="margin-right: 5px"/>
<a-icon v-else type="project" style="margin-right: 5px" />
{{ project.name }}
</span>
</a-select-option>
</a-select>
</a-form-item>

6
ui/src/views/network/CreateIsolatedNetworkForm.vue
View File

@ -54,15 +54,17 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
:loading="zoneLoading"
:placeholder="this.$t('label.zoneid')"
@change="val => { this.handleZoneChange(this.zones[val]) }">
<a-select-option v-for="(opt, optIndex) in this.zones" :key="optIndex">
<a-select-option v-for="(opt, optIndex) in this.zones" :key="optIndex" :label="opt.name || opt.description">
<span>
<resource-icon v-if="opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
<a-icon v-else type="global" style="margin-right: 5px" />
{{ opt.name || opt.description }}
</span>
</a-select-option>
</a-select>
</a-form-item>

12
ui/src/views/network/CreateL2NetworkForm.vue
View File

@ -54,15 +54,17 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
:loading="zoneLoading"
:placeholder="this.$t('label.zoneid')"
@change="val => { this.handleZoneChange(this.zones[val]) }">
<a-select-option v-for="(opt, optIndex) in this.zones" :key="optIndex">
<a-select-option v-for="(opt, optIndex) in this.zones" :key="optIndex" :label="opt.name || opt.description">
<span>
<resource-icon v-if="opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
<a-icon v-else type="global" style="margin-right: 5px" />
{{ opt.name || opt.description }}
</span>
</a-select-option>
</a-select>
</a-form-item>
@ -73,15 +75,17 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
:loading="domainLoading"
:placeholder="this.$t('label.domainid')"
@change="val => { this.handleDomainChange(this.domains[val]) }">
<a-select-option v-for="(opt, optIndex) in this.domains" :key="optIndex">
<a-select-option v-for="(opt, optIndex) in this.domains" :key="optIndex" :label="opt.path || opt.name || opt.description">
<span>
<resource-icon v-if="opt && opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
<a-icon v-else-if="optIndex !== 0" type="block" style="margin-right: 5px" />
{{ opt.path || opt.name || opt.description }}
</span>
</a-select-option>
</a-select>
</a-form-item>

18
ui/src/views/network/CreateSharedNetworkForm.vue
View File

@ -54,15 +54,17 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
:loading="zoneLoading"
:placeholder="this.$t('label.zoneid')"
@change="val => { this.handleZoneChange(this.zones[val]) }">
<a-select-option v-for="(opt, optIndex) in this.zones" :key="optIndex">
<a-select-option v-for="(opt, optIndex) in this.zones" :key="optIndex" :label="opt.name || opt.description">
<span>
<resource-icon v-if="opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
<a-icon v-else type="global" style="margin-right: 5px" />
{{ opt.name || opt.description }}
</span>
</a-select-option>
</a-select>
</a-form-item>
@ -158,15 +160,17 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
:loading="domainLoading"
:placeholder="this.$t('label.domainid')"
@change="val => { this.handleDomainChange(this.domains[val]) }">
<a-select-option v-for="(opt, optIndex) in this.domains" :key="optIndex">
<a-select-option v-for="(opt, optIndex) in this.domains" :key="optIndex" :label="opt.path || opt.name || opt.description">
<span>
<resource-icon v-if="opt && opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
<a-icon v-else-if="optIndex !== 0" type="block" style="margin-right: 5px" />
{{ opt.path || opt.name || opt.description }}
</span>
</a-select-option>
</a-select>
</a-form-item>
@ -194,15 +198,17 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
:loading="projectLoading"
:placeholder="this.$t('label.projectid')"
@change="val => { this.handleProjectChange(this.projects[val]) }">
<a-select-option v-for="(opt, optIndex) in this.projects" :key="optIndex">
<a-select-option v-for="(opt, optIndex) in this.projects" :key="optIndex" :label="opt.name || opt.description">
<span>
<resource-icon v-if="opt && opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
<a-icon v-else-if="optIndex !== 0" type="project" style="margin-right: 5px" />
{{ opt.name || opt.description }}
</span>
</a-select-option>
</a-select>
</a-form-item>

6
ui/src/views/network/CreateVpc.vue
View File

@ -49,12 +49,14 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" >
<a-select-option v-for="zone in zones" :key="zone.id">
<a-select-option v-for="zone in zones" :key="zone.id" :label="zone.name">
<span>
<resource-icon v-if="zone.icon" :image="zone.icon.base64image" size="1x" style="margin-right: 5px"/>
<a-icon v-else type="global" style="margin-right: 5px" />
{{ zone.name }}
</span>
</a-select-option>
</a-select>
</a-form-item>

12
ui/src/views/offering/AddComputeOffering.vue
View File

@ -443,14 +443,16 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
:loading="domainLoading"
:placeholder="apiParams.domainid.description">
<a-select-option v-for="(opt, optIndex) in domains" :key="optIndex">
<a-select-option v-for="(opt, optIndex) in domains" :key="optIndex" :label="opt.path || opt.name || opt.description">
<span>
<resource-icon v-if="opt && opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
<a-icon v-else type="block" style="margin-right: 5px" />
{{ opt.path || opt.name || opt.description }}
</span>
</a-select-option>
</a-select>
</a-form-item>
@ -474,15 +476,17 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
@select="val => fetchvSphereStoragePolicies(val)"
:loading="zoneLoading"
:placeholder="apiParams.zoneid.description">
<a-select-option v-for="(opt, optIndex) in zones" :key="optIndex">
<a-select-option v-for="(opt, optIndex) in zones" :key="optIndex" :label="opt.name || opt.description">
<span>
<resource-icon v-if="opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
<a-icon v-else type="global" style="margin-right: 5px"/>
{{ opt.name || opt.description }}
</span>
</a-select-option>
</a-select>
</a-form-item>

12
ui/src/views/offering/AddDiskOffering.vue
View File

@ -278,14 +278,16 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
:loading="domainLoading"
:placeholder="apiParams.domainid.description">
<a-select-option v-for="(opt, optIndex) in domains" :key="optIndex">
<a-select-option v-for="(opt, optIndex) in domains" :key="optIndex" :label="opt.path || opt.name || opt.description">
<span>
<resource-icon v-if="opt && opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
<a-icon v-else type="block" style="margin-right: 5px" />
{{ opt.path || opt.name || opt.description }}
</span>
</a-select-option>
</a-select>
</a-form-item>
@ -309,15 +311,17 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
@select="val => fetchvSphereStoragePolicies(val)"
:loading="zoneLoading"
:placeholder="apiParams.zoneid.description">
<a-select-option v-for="(opt, optIndex) in zones" :key="optIndex">
<a-select-option v-for="(opt, optIndex) in zones" :key="optIndex" :label="opt.name || opt.description">
<span>
<resource-icon v-if="opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
<a-icon v-else type="global" style="margin-right: 5px"/>
{{ opt.name || opt.description }}
</span>
</a-select-option>
</a-select>
</a-form-item>

12
ui/src/views/offering/AddNetworkOffering.vue
View File

@ -341,14 +341,16 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
:loading="domainLoading"
:placeholder="apiParams.domainid.description">
<a-select-option v-for="(opt, optIndex) in domains" :key="optIndex">
<a-select-option v-for="(opt, optIndex) in domains" :key="optIndex" :label="opt.path || opt.name || opt.description">
<span>
<resource-icon v-if="opt && opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
<a-icon v-else type="block" style="margin-right: 5px" />
{{ opt.path || opt.name || opt.description }}
</span>
</a-select-option>
</a-select>
</a-form-item>
@ -372,14 +374,16 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
:loading="zoneLoading"
:placeholder="apiParams.zoneid.description">
<a-select-option v-for="(opt, optIndex) in zones" :key="optIndex">
<a-select-option v-for="(opt, optIndex) in zones" :key="optIndex" :label="opt.name || opt.description">
<span>
<resource-icon v-if="opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
<a-icon v-else type="global" style="margin-right: 5px"/>
{{ opt.name || opt.description }}
</span>
</a-select-option>
</a-select>
</a-form-item>

10
ui/src/views/offering/AddVpcOffering.vue
View File

@ -83,11 +83,11 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
:loading="domainLoading"
:placeholder="apiParams.domainid.description">
<a-select-option v-for="(opt, optIndex) in domains" :key="optIndex">
<a-select-option v-for="(opt, optIndex) in domains" :key="optIndex" :label="opt.path || opt.name || opt.description">
<resource-icon v-if="opt && opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
<a-icon v-else type="block" style="margin-right: 5px" />
{{ opt.path || opt.name || opt.description }}
@ -114,14 +114,16 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
:loading="zoneLoading"
:placeholder="apiParams.zoneid.description">
<a-select-option v-for="(opt, optIndex) in zones" :key="optIndex">
<a-select-option v-for="(opt, optIndex) in zones" :key="optIndex" :label="opt.name || opt.description">
<span>
<resource-icon v-if="opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
<a-icon v-else type="global" style="margin-right: 5px"/>
{{ opt.name || opt.description }}
</span>
</a-select-option>
</a-select>
</a-form-item>

6
ui/src/views/offering/ImportBackupOffering.vue
View File

@ -48,12 +48,14 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" >
<a-select-option v-for="zone in zones.opts" :key="zone.name">
<a-select-option v-for="zone in zones.opts" :key="zone.name" :label="zone.name">
<span>
<resource-icon v-if="zone.icon" :image="zone.icon.base64image" size="1x" style="margin-right: 5px"/>
<a-icon v-else type="global" style="margin-right: 5px"/>
{{ zone.name }}
</span>
</a-select-option>
</a-select>
</a-form-item>

12
ui/src/views/offering/UpdateOfferingAccess.vue
View File

@ -43,14 +43,16 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
:loading="domainLoading"
:placeholder="this.apiParams.domainid.description">
<a-select-option v-for="(opt, optIndex) in this.domains" :key="optIndex">
<a-select-option v-for="(opt, optIndex) in this.domains" :key="optIndex" :label="opt.path || opt.name || opt.description">
<span>
<resource-icon v-if="opt && opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
<a-icon v-else type="block" style="margin-right: 5px" />
{{ opt.path || opt.name || opt.description }}
</span>
</a-select-option>
</a-select>
</a-form-item>
@ -75,14 +77,16 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
:loading="zoneLoading"
:placeholder="this.apiParams.zoneid.description">
<a-select-option v-for="(opt, optIndex) in this.zones" :key="optIndex">
<a-select-option v-for="(opt, optIndex) in this.zones" :key="optIndex" :label="opt.name || opt.description">
<span>
<resource-icon v-if="opt.icon" :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>
<a-icon v-else type="global" style="margin-right: 5px"/>
{{ opt.name || opt.description }}
</span>
</a-select-option>
</a-select>
</a-form-item>

7
ui/src/views/storage/CreateVolume.vue
View File

@ -43,15 +43,18 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" >
<a-select-option
v-for="(zone, index) in zones"
:value="zone.id"
:key="index">
:key="index"
:label="zone.name">
<span>
<resource-icon v-if="zone.icon" :image="zone.icon.base64image" size="1x" style="margin-right: 5px"/>
<a-icon v-else type="global" style="margin-right: 5px"/>
{{ zone.name }}
</span>
</a-select-option>
</a-select>
</a-form-item>

6
ui/src/views/storage/UploadLocalVolume.vue
View File

@ -68,12 +68,14 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}" >
<a-select-option :value="zone.id" v-for="zone in zones" :key="zone.id">
<a-select-option :value="zone.id" v-for="zone in zones" :key="zone.id" :label="zone.name || zone.description">
<span>
<resource-icon v-if="zone.icon" :image="zone.icon.base64image" size="1x" style="margin-right: 5px"/>
<a-icon v-else type="global" style="margin-right: 5px"/>
{{ zone.name || zone.description }}
</span>
</a-select-option>
</a-select>
</a-form-item>

18
ui/src/views/tools/ImportUnmanagedInstance.vue
View File

@ -55,15 +55,17 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
:loading="optionsLoading.domains"
:placeholder="apiParams.domainid.description"
@change="val => { this.selectedDomainId = val }">
<a-select-option v-for="dom in domainSelectOptions" :key="dom.value">
<a-select-option v-for="dom in domainSelectOptions" :key="dom.value" :label="dom.label">
<span>
<resource-icon v-if="dom.icon" :image="dom.icon" size="1x" style="margin-right: 5px"/>
<a-icon v-else-if="dom.value !== null" style="margin-right: 5px" type="block" />
{{ dom.label }}
</span>
</a-select-option>
</a-select>
</a-form-item>
@ -80,14 +82,16 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
:loading="optionsLoading.projects"
:placeholder="apiParams.projectid.description">
<a-select-option v-for="proj in projectSelectOptions" :key="proj.value">
<a-select-option v-for="proj in projectSelectOptions" :key="proj.value" :label="proj.label">
<span>
<resource-icon v-if="proj.icon" :image="proj.icon" size="1x" style="margin-right: 5px"/>
<a-icon v-else-if="proj.value !== null" style="margin-right: 5px" type="project" />
{{ proj.label }}
</span>
</a-select-option>
</a-select>
</a-form-item>
@ -116,14 +120,16 @@
showSearch
optionFilterProp="children"
:filterOption="(input, option) => {
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
:loading="optionsLoading.templates"
:placeholder="apiParams.templateid.description">
<a-select-option v-for="temp in templateSelectOptions" :key="temp.value">
<a-select-option v-for="temp in templateSelectOptions" :key="temp.value" :label="temp.label">
<span>
<resource-icon v-if="temp.icon" :image="temp.icon" size="1x" style="margin-right: 5px"/>
<os-logo v-else-if="temp.value !== null" :osId="temp.ostypeid" :osName="temp.ostypename" size="lg" style="margin-left: -1px" />
{{ temp.label }}
</span>
</a-select-option>
</a-select>
</a-col>

8
ui/src/views/tools/ManageInstances.vue
View File

@ -49,15 +49,19 @@
v-decorator="['zoneid', {}]"
showSearch
optionFilterProp="children"
:filterOption="filterOption"
:filterOption="(input, option) => {
return option.componentOptions.propsData.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
}"
@change="onSelectZoneId"
:loading="optionLoading.zones"
autoFocus
>
<a-select-option v-for="zoneitem in zoneSelectOptions" :key="zoneitem.value">
<a-select-option v-for="zoneitem in zoneSelectOptions" :key="zoneitem.value" :label="zoneitem.label">
<span>
<resource-icon v-if="zoneitem.icon" :image="zoneitem.icon" size="1x" style="margin-right: 5px"/>
<a-icon v-else style="margin-right: 5px" type="global" />
{{ zoneitem.label }}
</span>
</a-select-option>
</a-select>
</a-form-item>