50 lines
1.4 KiB
JavaScript
50 lines
1.4 KiB
JavaScript
Vue.component("httpdns-clusters-selector", {
|
|
props: ["vClusters", "vName"],
|
|
data: function () {
|
|
let inputClusters = this.vClusters
|
|
let clusters = []
|
|
|
|
if (inputClusters != null && inputClusters.length > 0) {
|
|
if (inputClusters[0].isChecked !== undefined) {
|
|
// 带 isChecked 标志的完整集群列表
|
|
clusters = inputClusters.map(function (c) {
|
|
return {id: c.id, name: c.name, isChecked: c.isChecked}
|
|
})
|
|
} else {
|
|
// 仅包含已选集群，全部标记为选中
|
|
clusters = inputClusters.map(function (c) {
|
|
return {id: c.id, name: c.name, isChecked: true}
|
|
})
|
|
}
|
|
}
|
|
|
|
// 无 prop 时从根实例读取所有集群（如创建应用页面）
|
|
if (clusters.length === 0) {
|
|
let rootClusters = this.$root.clusters
|
|
if (rootClusters != null && rootClusters.length > 0) {
|
|
clusters = rootClusters.map(function (c) {
|
|
return {id: c.id, name: c.name, isChecked: false}
|
|
})
|
|
}
|
|
}
|
|
|
|
return {
|
|
clusters: clusters,
|
|
fieldName: this.vName || "clusterIds"
|
|
}
|
|
},
|
|
methods: {
|
|
changeCluster: function (cluster) {
|
|
cluster.isChecked = !cluster.isChecked
|
|
}
|
|
},
|
|
template: `<div>
|
|
<div v-if="clusters.length > 0">
|
|
<checkbox v-for="cluster in clusters" :key="cluster.id" :v-value="cluster.id" :value="cluster.isChecked ? cluster.id : 0" style="margin-right: 1em" @input="changeCluster(cluster)" :name="fieldName">
|
|
{{cluster.name}}
|
|
</checkbox>
|
|
</div>
|
|
<span class="grey" v-else>暂无可用集群</span>
|
|
</div>`
|
|
})
|