1.4.5.2
This commit is contained in:
unknown
@@ -0,0 +1,234 @@
|
||||
Vue.component("plan-traffic-ranges", {
|
||||
props: ["value"],
|
||||
data: function () {
|
||||
let ranges = this.value
|
||||
if (ranges == null) {
|
||||
ranges = []
|
||||
}
|
||||
return {
|
||||
ranges: ranges,
|
||||
isAdding: false,
|
||||
|
||||
minGB: "",
|
||||
minGBUnit: "gb",
|
||||
|
||||
maxGB: "",
|
||||
maxGBUnit: "gb",
|
||||
|
||||
pricePerGB: "",
|
||||
totalPrice: "",
|
||||
addingRange: {
|
||||
minGB: 0,
|
||||
maxGB: 0,
|
||||
pricePerGB: 0,
|
||||
totalPrice: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add: function () {
|
||||
this.isAdding = !this.isAdding
|
||||
let that = this
|
||||
setTimeout(function () {
|
||||
that.$refs.minGB.focus()
|
||||
})
|
||||
},
|
||||
cancelAdding: function () {
|
||||
this.isAdding = false
|
||||
},
|
||||
confirm: function () {
|
||||
if (this.addingRange.minGB < 0) {
|
||||
teaweb.warn("流量下限需要大于0")
|
||||
return
|
||||
}
|
||||
if (this.addingRange.maxGB < 0) {
|
||||
teaweb.warn("流量上限需要大于0")
|
||||
return
|
||||
}
|
||||
if (this.addingRange.pricePerGB <= 0 && this.addingRange.totalPrice <= 0) {
|
||||
teaweb.warn("请设置单位价格或者总价格")
|
||||
return;
|
||||
}
|
||||
|
||||
this.isAdding = false
|
||||
this.minGB = ""
|
||||
this.maxGB = ""
|
||||
this.pricePerGB = ""
|
||||
this.totalPrice = ""
|
||||
this.ranges.push(this.addingRange)
|
||||
this.ranges.$sort(function (v1, v2) {
|
||||
if (v1.minGB < v2.minGB) {
|
||||
return -1
|
||||
}
|
||||
if (v1.minGB == v2.minGB) {
|
||||
if (v2.maxGB == 0 || v1.maxGB < v2.maxGB) {
|
||||
return -1
|
||||
}
|
||||
return 0
|
||||
}
|
||||
return 1
|
||||
})
|
||||
this.change()
|
||||
this.addingRange = {
|
||||
minGB: 0,
|
||||
maxGB: 0,
|
||||
pricePerGB: 0,
|
||||
totalPrice: 0
|
||||
}
|
||||
},
|
||||
remove: function (index) {
|
||||
this.ranges.$remove(index)
|
||||
this.change()
|
||||
},
|
||||
change: function () {
|
||||
this.$emit("change", this.ranges)
|
||||
},
|
||||
formatGB: function (gb) {
|
||||
return teaweb.formatBytes(gb * 1024 * 1024 * 1024)
|
||||
},
|
||||
changeMinGB: function (v) {
|
||||
let minGB = parseFloat(v.toString())
|
||||
if (isNaN(minGB) || minGB < 0) {
|
||||
minGB = 0
|
||||
}
|
||||
switch (this.minGBUnit) {
|
||||
case "tb":
|
||||
minGB *= 1024
|
||||
break
|
||||
case "pb":
|
||||
minGB *= 1024 * 1024
|
||||
break
|
||||
case "eb":
|
||||
minGB *= 1024 * 1024 * 1024
|
||||
break
|
||||
}
|
||||
this.addingRange.minGB = minGB
|
||||
},
|
||||
changeMaxGB: function (v) {
|
||||
let maxGB = parseFloat(v.toString())
|
||||
if (isNaN(maxGB) || maxGB < 0) {
|
||||
maxGB = 0
|
||||
}
|
||||
switch (this.maxGBUnit) {
|
||||
case "tb":
|
||||
maxGB *= 1024
|
||||
break
|
||||
case "pb":
|
||||
maxGB *= 1024 * 1024
|
||||
break
|
||||
case "eb":
|
||||
maxGB *= 1024 * 1024 * 1024
|
||||
break
|
||||
}
|
||||
this.addingRange.maxGB = maxGB
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
minGB: function (v) {
|
||||
this.changeMinGB(v)
|
||||
},
|
||||
minGBUnit: function (v) {
|
||||
this.changeMinGB(this.minGB)
|
||||
},
|
||||
maxGB: function (v) {
|
||||
this.changeMaxGB(v)
|
||||
},
|
||||
maxGBUnit: function (v) {
|
||||
this.changeMaxGB(this.maxGB)
|
||||
},
|
||||
pricePerGB: function (v) {
|
||||
let pricePerGB = parseFloat(v.toString())
|
||||
if (isNaN(pricePerGB) || pricePerGB < 0) {
|
||||
pricePerGB = 0
|
||||
}
|
||||
this.addingRange.pricePerGB = pricePerGB
|
||||
},
|
||||
totalPrice: function (v) {
|
||||
let totalPrice = parseFloat(v.toString())
|
||||
if (isNaN(totalPrice) || totalPrice < 0) {
|
||||
totalPrice = 0
|
||||
}
|
||||
this.addingRange.totalPrice = totalPrice
|
||||
}
|
||||
},
|
||||
template: `<div>
|
||||
<!-- 已有价格 -->
|
||||
<div v-if="ranges.length > 0">
|
||||
<div class="ui label basic small" v-for="(range, index) in ranges" style="margin-bottom: 0.5em">
|
||||
{{formatGB(range.minGB)}} - <span v-if="range.maxGB > 0">{{formatGB(range.maxGB)}}</span><span v-else>∞</span> 价格：<span v-if="range.totalPrice > 0">{{range.totalPrice}}元</span><span v-else="">{{range.pricePerGB}}元/GB</span>
|
||||
<a href="" title="删除" @click.prevent="remove(index)"><i class="icon remove small"></i></a>
|
||||
</div>
|
||||
<div class="ui divider"></div>
|
||||
</div>
|
||||
|
||||
<!-- 添加 -->
|
||||
<div v-if="isAdding">
|
||||
<table class="ui table">
|
||||
<tr>
|
||||
<td class="title">流量下限 *</td>
|
||||
<td>
|
||||
<div class="ui fields inline">
|
||||
<div class="ui field">
|
||||
<input type="text" placeholder="最小流量" style="width: 7em" maxlength="10" ref="minGB" @keyup.enter="confirm()" @keypress.enter.prevent="1" v-model="minGB"/>
|
||||
</div>
|
||||
<div class="ui field">
|
||||
<select class="ui dropdown" v-model="minGBUnit">
|
||||
<option value="gb">GB</option>
|
||||
<option value="tb">TB</option>
|
||||
<option value="pb">PB</option>
|
||||
<option value="eb">EB</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title">流量上限 *</td>
|
||||
<td>
|
||||
<div class="ui fields inline">
|
||||
<div class="ui field">
|
||||
<input type="text" placeholder="最大流量" style="width: 7em" maxlength="10" @keyup.enter="confirm()" @keypress.enter.prevent="1" v-model="maxGB"/>
|
||||
</div>
|
||||
<div class="ui field">
|
||||
<select class="ui dropdown" v-model="maxGBUnit">
|
||||
<option value="gb">GB</option>
|
||||
<option value="tb">TB</option>
|
||||
<option value="pb">PB</option>
|
||||
<option value="eb">EB</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<p class="comment">如果填0，表示上不封顶。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title">单位价格</td>
|
||||
<td>
|
||||
<div class="ui input right labeled">
|
||||
<input type="text" placeholder="单位价格" style="width: 7em" maxlength="10" @keyup.enter="confirm()" @keypress.enter.prevent="1" v-model="pricePerGB"/>
|
||||
<span class="ui label">元/GB</span>
|
||||
</div>
|
||||
<p class="comment">和总价格二选一。如果设置了单位价格，那么"总价格 = 单位价格 x 流量/GB"。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>总价格</td>
|
||||
<td>
|
||||
<div class="ui input right labeled">
|
||||
<input type="text" placeholder="总价格" style="width: 7em" maxlength="10" @keyup.enter="confirm()" @keypress.enter.prevent="1" v-model="totalPrice"/>
|
||||
<span class="ui label">元</span>
|
||||
</div>
|
||||
<p class="comment">固定的总价格，和单位价格二选一。</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<button class="ui button small" type="button" @click.prevent="confirm">确定</button>
|
||||
<a href="" title="取消" @click.prevent="cancelAdding"><i class="icon remove small"></i></a>
|
||||
</div>
|
||||
|
||||
<!-- 按钮 -->
|
||||
<div v-if="!isAdding">
|
||||
<button class="ui button small" type="button" @click.prevent="add">+</button>
|
||||
</div>
|
||||
</div>`
|
||||
})
|
||||
Reference in New Issue
Block a user