134 lines
3.8 KiB
JavaScript
134 lines
3.8 KiB
JavaScript
Vue.component("origin-input-box", {
|
||
props: ["v-family", "v-oss-types"],
|
||
data: function () {
|
||
let family = this.vFamily
|
||
if (family == null) {
|
||
family = "http"
|
||
}
|
||
|
||
let ossTypes = this.vOssTypes
|
||
if (ossTypes == null) {
|
||
ossTypes = []
|
||
}
|
||
|
||
return {
|
||
origins: [],
|
||
isAdding: false,
|
||
family: family,
|
||
ossTypes: ossTypes
|
||
}
|
||
},
|
||
methods: {
|
||
add: function () {
|
||
let scheme = ""
|
||
switch (this.family) {
|
||
case "http":
|
||
scheme = "http"
|
||
break
|
||
case "tcp":
|
||
scheme = "tcp"
|
||
break
|
||
case "udp":
|
||
scheme = "udp"
|
||
break
|
||
}
|
||
this.origins.push({
|
||
id: "",
|
||
host: "",
|
||
isPrimary: true,
|
||
isPrimaryValue: 1,
|
||
scheme: scheme
|
||
})
|
||
|
||
let that = this
|
||
setTimeout(function () {
|
||
let inputs = that.$refs.originHost
|
||
if (inputs != null) {
|
||
inputs[inputs.length - 1].focus()
|
||
}
|
||
}, 10)
|
||
},
|
||
confirm: function () {
|
||
},
|
||
cancel: function () {
|
||
},
|
||
remove: function (index) {
|
||
this.origins.$remove(index)
|
||
},
|
||
changePrimary: function (origin) {
|
||
origin.isPrimary = origin.isPrimaryValue == 1
|
||
},
|
||
changeFamily: function (family) {
|
||
this.family = family
|
||
let that = this
|
||
this.origins.forEach(function (origin) {
|
||
let scheme = ""
|
||
switch (that.family) {
|
||
case "http":
|
||
scheme = "http"
|
||
break
|
||
case "tcp":
|
||
scheme = "tcp"
|
||
break
|
||
case "udp":
|
||
scheme = "udp"
|
||
break
|
||
}
|
||
origin.scheme = scheme
|
||
})
|
||
}
|
||
},
|
||
template: `<div>
|
||
<input type="hidden" name="originsJSON" :value="JSON.stringify(origins)"/>
|
||
<div>
|
||
<div class="ui fields inline">
|
||
<div class="ui field" style="padding-left: 0.1em; width:6.8em; color: grey">源站协议</div>
|
||
<div class="ui field" style="width:21em; color: grey">源站地址（Host:Port）</div>
|
||
<div class="ui field" style="color: grey">优先级 <tip-icon content="优先级：优先使用主源站，如果主源站无法连接时才会连接备用源站"></tip-icon></div>
|
||
</div>
|
||
<div class="ui divider"></div>
|
||
<div v-for="(origin, index) in origins">
|
||
<div class="ui fields inline" style="margin-top: 0.6em">
|
||
<div class="ui field">
|
||
<select class="ui dropdown auto-width" v-model="origin.scheme">
|
||
<option value="http" v-if="family == 'http'">http://</option>
|
||
<option value="https" v-if="family == 'http'">https://</option>
|
||
|
||
<!-- 对象存储 -->
|
||
<optgroup label="对象存储" v-if="family == 'http' && ossTypes.length > 0"></optgroup>
|
||
<option v-if="family == 'http'" v-for="ossType in ossTypes" :value="ossType.code">{{ossType.name}}</option>
|
||
|
||
<option value="tcp" v-if="family == 'tcp'">tcp://</option>
|
||
<option value="tls" v-if="family == 'tcp'">tls://</option>
|
||
<option value="udp" v-if="family == 'udp'">udp://</option>
|
||
</select>
|
||
</div>
|
||
<div class="ui field">
|
||
<div v-show="origin.scheme != null && origin.scheme.startsWith('oss:')">
|
||
请在创建网站后，再在对应网站设置"源站"功能中进行添加对象存储源站。
|
||
</div>
|
||
<div v-show="!origin.scheme.startsWith('oss:')">
|
||
<input type="text" placeholder="源站地址" v-model="origin.host" ref="originHost" style="width:20em"/>
|
||
</div>
|
||
</div>
|
||
<div class="ui field">
|
||
<div v-show="origin.scheme != null && origin.scheme.startsWith('oss:')">
|
||
</div>
|
||
<div v-show="!origin.scheme.startsWith('oss:')">
|
||
<select class="ui dropdown auto-width small" v-model="origin.isPrimaryValue" @change="changePrimary(origin)">
|
||
<option value="1">主</option>
|
||
<option value="0">备</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="ui field">
|
||
<a href="" title="删除" @click.prevent="remove(index)"><i class="icon remove icon small"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top: 1em">
|
||
<button class="ui button tiny" type="button" @click.prevent="add()">+</button>
|
||
</div>
|
||
</div>`
|
||
}) |