1.4.5.2

EdgeAdmin/web/public/js/components/plans/plan-bandwidth-ranges-plus.js

@@ -0,0 +1,226 @@
+Vue.component("plan-bandwidth-ranges", {
+	props: ["value"],
+	data: function () {
+		let ranges = this.value
+		if (ranges == null) {
+			ranges = []
+		}
+		return {
+			ranges: ranges,
+			isAdding: false,
+
+			minMB: "",
+			minMBUnit: "mb",
+
+			maxMB: "",
+			maxMBUnit: "mb",
+
+			pricePerMB: "",
+			totalPrice: "",
+			addingRange: {
+				minMB: 0,
+				maxMB: 0,
+				pricePerMB: 0,
+				totalPrice: 0
+			}
+		}
+	},
+	methods: {
+		add: function () {
+			this.isAdding = !this.isAdding
+			let that = this
+			setTimeout(function () {
+				that.$refs.minMB.focus()
+			})
+		},
+		cancelAdding: function () {
+			this.isAdding = false
+		},
+		confirm: function () {
+			if (this.addingRange.minMB < 0) {
+				teaweb.warn("带宽下限需要大于0")
+				return
+			}
+			if (this.addingRange.maxMB < 0) {
+				teaweb.warn("带宽上限需要大于0")
+				return
+			}
+			if (this.addingRange.pricePerMB <= 0) {
+				teaweb.warn("请设置单位价格或者总价格")
+				return
+			}
+
+			this.isAdding = false
+			this.minMB = ""
+			this.maxMB = ""
+			this.pricePerMB = ""
+			this.totalPrice = ""
+			this.ranges.push(this.addingRange)
+			this.ranges.$sort(function (v1, v2) {
+				if (v1.minMB < v2.minMB) {
+					return -1
+				}
+				if (v1.minMB == v2.minMB) {
+					if (v2.maxMB == 0 || v1.maxMB < v2.maxMB) {
+						return -1
+					}
+					return 0
+				}
+				return 1
+			})
+			this.change()
+			this.addingRange = {
+				minMB: 0,
+				maxMB: 0,
+				pricePerMB: 0,
+				totalPrice: 0
+			}
+		},
+		remove: function (index) {
+			this.ranges.$remove(index)
+			this.change()
+		},
+		change: function () {
+			this.$emit("change", this.ranges)
+		},
+		formatMB: function (mb) {
+			return teaweb.formatBits(mb * 1024 * 1024)
+		},
+		changeMinMB: function (v) {
+			let minMB = parseFloat(v.toString())
+			if (isNaN(minMB) || minMB < 0) {
+				minMB = 0
+			}
+			switch (this.minMBUnit) {
+				case "gb":
+					minMB *= 1024
+					break
+				case "tb":
+					minMB *= 1024 * 1024
+					break
+			}
+			this.addingRange.minMB = minMB
+		},
+		changeMaxMB: function (v) {
+			let maxMB = parseFloat(v.toString())
+			if (isNaN(maxMB) || maxMB < 0) {
+				maxMB = 0
+			}
+			switch (this.maxMBUnit) {
+				case "gb":
+					maxMB *= 1024
+					break
+				case "tb":
+					maxMB *= 1024 * 1024
+					break
+			}
+			this.addingRange.maxMB = maxMB
+		}
+	},
+	watch: {
+		minMB: function (v) {
+			this.changeMinMB(v)
+		},
+		minMBUnit: function () {
+			this.changeMinMB(this.minMB)
+		},
+		maxMB: function (v) {
+			this.changeMaxMB(v)
+		},
+		maxMBUnit: function () {
+			this.changeMaxMB(this.maxMB)
+		},
+		pricePerMB: function (v) {
+			let pricePerMB = parseFloat(v.toString())
+			if (isNaN(pricePerMB) || pricePerMB < 0) {
+				pricePerMB = 0
+			}
+			this.addingRange.pricePerMB = pricePerMB
+		},
+		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">
+			{{formatMB(range.minMB)}} - <span v-if="range.maxMB > 0">{{formatMB(range.maxMB)}}</span><span v-else>&infin;</span> &nbsp;  价格：<span v-if="range.totalPrice > 0">{{range.totalPrice}}元</span><span v-else="">{{range.pricePerMB}}元/Mbps</span>
+			&nbsp; <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="minMB" @keyup.enter="confirm()" @keypress.enter.prevent="1" v-model="minMB"/>
+						</div>
+						<div class="ui field">
+							<select class="ui dropdown" v-model="minMBUnit">
+								<option value="mb">Mbps</option>
+								<option value="gb">Gbps</option>
+								<option value="tb">Tbps</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="maxMB"/>
+						</div>
+						<div class="ui field">
+							<select class="ui dropdown" v-model="maxMBUnit">
+								<option value="mb">Mbps</option>
+								<option value="gb">Gbps</option>
+								<option value="tb">Tbps</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="pricePerMB"/>
+						<span class="ui label">元/Mbps</span>
+					</div>
+					<p class="comment">和总价格二选一。如果设置了单位价格，那么"总价格 = 单位价格 x 带宽/Mbps"。</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> &nbsp;
+		<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>`
+})