1.4.5.2
This commit is contained in:
144
EdgeUser/web/public/js/components/server/cache-cond-box.js
Normal file
144
EdgeUser/web/public/js/components/server/cache-cond-box.js
Normal file
@@ -0,0 +1,144 @@
|
||||
Vue.component("cache-cond-box", {
|
||||
data: function () {
|
||||
return {
|
||||
conds: [],
|
||||
addingExt: false,
|
||||
addingPath: false,
|
||||
|
||||
extDuration: null,
|
||||
pathDuration: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addExt: function () {
|
||||
this.addingExt = !this.addingExt
|
||||
this.addingPath = false
|
||||
|
||||
if (this.addingExt) {
|
||||
let that = this
|
||||
setTimeout(function () {
|
||||
if (that.$refs.extInput != null) {
|
||||
that.$refs.extInput.focus()
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
changeExtDuration: function (duration) {
|
||||
this.extDuration = duration
|
||||
},
|
||||
confirmExt: function () {
|
||||
let value = this.$refs.extInput.value
|
||||
if (value.length == 0) {
|
||||
return
|
||||
}
|
||||
|
||||
let exts = []
|
||||
let pieces = value.split(/[,,]/)
|
||||
pieces.forEach(function (v) {
|
||||
v = v.trim()
|
||||
v = v.replace(/\s+/, "")
|
||||
if (v.length > 0) {
|
||||
if (v[0] != ".") {
|
||||
v = "." + v
|
||||
}
|
||||
exts.push(v)
|
||||
}
|
||||
})
|
||||
|
||||
this.conds.push({
|
||||
type: "url-extension",
|
||||
value: JSON.stringify(exts),
|
||||
duration: this.extDuration
|
||||
})
|
||||
this.$refs.extInput.value = ""
|
||||
this.cancel()
|
||||
},
|
||||
addPath: function () {
|
||||
this.addingExt = false
|
||||
this.addingPath = !this.addingPath
|
||||
|
||||
if (this.addingPath) {
|
||||
let that = this
|
||||
setTimeout(function () {
|
||||
if (that.$refs.pathInput != null) {
|
||||
that.$refs.pathInput.focus()
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
changePathDuration: function (duration) {
|
||||
this.pathDuration = duration
|
||||
},
|
||||
confirmPath: function () {
|
||||
let value = this.$refs.pathInput.value
|
||||
if (value.length == 0) {
|
||||
return
|
||||
}
|
||||
|
||||
if (value[0] != "/") {
|
||||
value = "/" + value
|
||||
}
|
||||
|
||||
this.conds.push({
|
||||
type: "url-prefix",
|
||||
value: value,
|
||||
duration: this.pathDuration
|
||||
})
|
||||
this.$refs.pathInput.value = ""
|
||||
this.cancel()
|
||||
},
|
||||
remove: function (index) {
|
||||
this.conds.$remove(index)
|
||||
},
|
||||
cancel: function () {
|
||||
this.addingExt = false
|
||||
this.addingPath = false
|
||||
}
|
||||
},
|
||||
template: `<div>
|
||||
<input type="hidden" name="cacheCondsJSON" :value="JSON.stringify(conds)"/>
|
||||
<div v-if="conds.length > 0">
|
||||
<div v-for="(cond, index) in conds" class="ui label basic" style="margin-top: 0.2em; margin-bottom: 0.2em">
|
||||
<span v-if="cond.type == 'url-extension'">扩展名</span>
|
||||
<span v-if="cond.type == 'url-prefix'">路径</span>:{{cond.value}} <span class="grey small">(<time-duration-text :v-value="cond.duration"></time-duration-text>)</span>
|
||||
<a href="" title="删除" @click.prevent="remove(index)"><i class="icon remove"></i></a>
|
||||
</div>
|
||||
<div class="ui divider"></div>
|
||||
</div>
|
||||
|
||||
<!-- 添加扩展名 -->
|
||||
<div v-show="addingExt">
|
||||
<div class="ui fields inline">
|
||||
<div class="ui field">
|
||||
<input type="text" placeholder="扩展名,比如.png, .gif,英文逗号分割" style="width:20em" ref="extInput" @keyup.enter="confirmExt" @keypress.enter.prevent="1"/>
|
||||
</div>
|
||||
<div class="ui field">
|
||||
<time-duration-box placeholder="缓存时长" :v-unit="'day'" :v-count="1" @change="changeExtDuration"></time-duration-box>
|
||||
</div>
|
||||
<div class="ui field">
|
||||
<a href="" class="ui button tiny" @click.prevent="confirmExt">确定</a> <a href="" title="取消" @click.prevent="cancel()"><i class="icon remove small"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 添加路径 -->
|
||||
<div v-show="addingPath">
|
||||
<div class="ui fields inline">
|
||||
<div class="ui field">
|
||||
<input type="text" placeholder="路径,以/开头" style="width:20em" ref="pathInput" @keyup.enter="confirmPath" @keypress.enter.prevent="1"/>
|
||||
</div>
|
||||
<div class="ui field">
|
||||
<time-duration-box placeholder="缓存时长" :v-unit="'day'" :v-count="1" @change="changePathDuration"></time-duration-box>
|
||||
</div>
|
||||
<div class="ui field">
|
||||
<a href="" class="ui button tiny" @click.prevent="confirmPath">确定</a> <a href="" title="取消" @click.prevent="cancel()"><i class="icon remove small"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 1em">
|
||||
<button type="button" class="ui button tiny" @click.prevent="addExt">+缓存扩展名</button>
|
||||
<button type="button" class="ui button tiny" @click.prevent="addPath">+缓存路径</button>
|
||||
</div>
|
||||
</div>`
|
||||
})
|
||||
Reference in New Issue
Block a user