forked from wangqifan/calc
前台区域改成输入选择框
This commit is contained in:
parent
79dd7667bf
commit
5bb223d6c8
@ -54,9 +54,16 @@
|
||||
<el-row :gutter="20">
|
||||
<el-col :md="6" :sm="24">
|
||||
<el-form-item label="区域">
|
||||
<el-select v-model="form.region" placeholder="请选择区域" class="full-width">
|
||||
<el-select
|
||||
v-model="form.region"
|
||||
placeholder="请选择区域"
|
||||
class="full-width"
|
||||
filterable
|
||||
clearable
|
||||
:filter-method="filterRegions"
|
||||
:remote-method="filterRegions">
|
||||
<el-option
|
||||
v-for="region in regions"
|
||||
v-for="region in filteredRegions"
|
||||
:key="region.code"
|
||||
:label="region.name"
|
||||
:value="region.code">
|
||||
@ -435,6 +442,7 @@
|
||||
yearly_discount: 0.85 // 默认60%，即6折
|
||||
},
|
||||
regions: [],
|
||||
filteredRegions: [], // 添加筛选后的区域列表
|
||||
searchResults: [],
|
||||
selectedInstance: null,
|
||||
comparisonList: [], // 用于存储要比较的实例
|
||||
@ -450,6 +458,7 @@
|
||||
try {
|
||||
// 使用API服务获取区域列表
|
||||
this.regions = await apiService.getRegions()
|
||||
this.filteredRegions = [...this.regions] // 初始化筛选后的区域列表
|
||||
|
||||
// 如果数据加载成功，默认选择第一个区域
|
||||
if (this.regions && this.regions.length > 0) {
|
||||
@ -457,7 +466,7 @@
|
||||
}
|
||||
|
||||
// 从本地存储加载之前保存的对比列表
|
||||
const savedComparison = localStorage.getItem('instance_comparison')
|
||||
const savedComparison = localStorage.getItem('instance_comparison_discount')
|
||||
if (savedComparison) {
|
||||
this.comparisonList = JSON.parse(savedComparison)
|
||||
}
|
||||
@ -467,6 +476,16 @@
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
filterRegions(query) {
|
||||
if (query) {
|
||||
this.filteredRegions = this.regions.filter(region => {
|
||||
return region.name.toLowerCase().includes(query.toLowerCase()) ||
|
||||
region.code.toLowerCase().includes(query.toLowerCase())
|
||||
})
|
||||
} else {
|
||||
this.filteredRegions = [...this.regions]
|
||||
}
|
||||
},
|
||||
async searchInstances() {
|
||||
if (!this.form.cpu_cores && !this.form.memory_gb && !this.form.disk_gb) {
|
||||
this.$message.warning('请至少指定一项配置要求')
|
||||
@ -540,7 +559,7 @@
|
||||
this.$message.success('已添加到对比列表')
|
||||
|
||||
// 保存到本地存储
|
||||
localStorage.setItem('instance_comparison', JSON.stringify(this.comparisonList))
|
||||
localStorage.setItem('instance_comparison_discount', JSON.stringify(this.comparisonList))
|
||||
|
||||
// 滚动到对比列表区域
|
||||
setTimeout(() => {
|
||||
@ -552,12 +571,12 @@
|
||||
},
|
||||
removeFromComparison(index) {
|
||||
this.comparisonList.splice(index, 1)
|
||||
localStorage.setItem('instance_comparison', JSON.stringify(this.comparisonList))
|
||||
localStorage.setItem('instance_comparison_discount', JSON.stringify(this.comparisonList))
|
||||
this.$message.success('已从对比列表中移除')
|
||||
},
|
||||
clearComparison() {
|
||||
this.comparisonList = []
|
||||
localStorage.removeItem('instance_comparison')
|
||||
localStorage.removeItem('instance_comparison_discount')
|
||||
this.$message.success('已清空对比列表')
|
||||
},
|
||||
exportComparison() {
|
||||
|
||||
@ -54,9 +54,16 @@
|
||||
<el-row :gutter="20">
|
||||
<el-col :md="6" :sm="24">
|
||||
<el-form-item label="区域">
|
||||
<el-select v-model="form.region" placeholder="请选择区域" class="full-width">
|
||||
<el-select
|
||||
v-model="form.region"
|
||||
placeholder="请选择区域"
|
||||
class="full-width"
|
||||
filterable
|
||||
clearable
|
||||
:filter-method="filterRegions"
|
||||
:remote-method="filterRegions">
|
||||
<el-option
|
||||
v-for="region in regions"
|
||||
v-for="region in filteredRegions"
|
||||
:key="region.code"
|
||||
:label="region.name"
|
||||
:value="region.code">
|
||||
@ -389,6 +396,7 @@ export default {
|
||||
operating_system: 'Linux' // 默认Linux
|
||||
},
|
||||
regions: [],
|
||||
filteredRegions: [], // 添加筛选后的区域列表
|
||||
searchResults: [],
|
||||
selectedInstance: null,
|
||||
comparisonList: [], // 用于存储要比较的实例
|
||||
@ -404,6 +412,7 @@ export default {
|
||||
try {
|
||||
// 使用API服务获取区域列表
|
||||
this.regions = await apiService.getRegions()
|
||||
this.filteredRegions = [...this.regions] // 初始化筛选后的区域列表
|
||||
|
||||
// 如果数据加载成功，默认选择第一个区域
|
||||
if (this.regions && this.regions.length > 0) {
|
||||
@ -421,6 +430,16 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
filterRegions(query) {
|
||||
if (query) {
|
||||
this.filteredRegions = this.regions.filter(region => {
|
||||
return region.name.toLowerCase().includes(query.toLowerCase()) ||
|
||||
region.code.toLowerCase().includes(query.toLowerCase())
|
||||
})
|
||||
} else {
|
||||
this.filteredRegions = [...this.regions]
|
||||
}
|
||||
},
|
||||
async searchInstances() {
|
||||
if (!this.form.cpu_cores && !this.form.memory_gb && !this.form.disk_gb) {
|
||||
this.$message.warning('请至少指定一项配置要求')
|
||||
|
||||
@ -26,9 +26,16 @@
|
||||
|
||||
<el-col :md="12" :sm="24">
|
||||
<el-form-item label="区域">
|
||||
<el-select v-model="form.region" placeholder="请选择区域" class="full-width">
|
||||
<el-select
|
||||
v-model="form.region"
|
||||
placeholder="请选择区域"
|
||||
class="full-width"
|
||||
filterable
|
||||
clearable
|
||||
:filter-method="filterRegions"
|
||||
:remote-method="filterRegions">
|
||||
<el-option
|
||||
v-for="region in regions"
|
||||
v-for="region in filteredRegions"
|
||||
:key="region"
|
||||
:label="region"
|
||||
:value="region">
|
||||
@ -160,6 +167,7 @@ export default {
|
||||
},
|
||||
instanceTypes: [],
|
||||
regions: [],
|
||||
filteredRegions: [],
|
||||
priceResult: null
|
||||
}
|
||||
},
|
||||
@ -172,12 +180,22 @@ export default {
|
||||
|
||||
this.instanceTypes = instanceTypes
|
||||
this.regions = regions.map(region => region.code)
|
||||
this.filteredRegions = [...this.regions] // 初始化筛选后的区域列表
|
||||
} catch (error) {
|
||||
console.error('Error fetching data:', error)
|
||||
this.$message.error('获取数据失败')
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
filterRegions(query) {
|
||||
if (query) {
|
||||
this.filteredRegions = this.regions.filter(region => {
|
||||
return region.toLowerCase().includes(query.toLowerCase())
|
||||
})
|
||||
} else {
|
||||
this.filteredRegions = [...this.regions]
|
||||
}
|
||||
},
|
||||
async calculatePrice() {
|
||||
try {
|
||||
this.priceResult = await apiService.calculatePrice(this.form)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user