Initial commit (code only without large binaries)
This commit is contained in:
robin
@@ -0,0 +1,9 @@
|
||||
<first-menu>
|
||||
<menu-item href="/clusters/anti-ddos" code="index">高防产品</menu-item>
|
||||
<menu-item href="/clusters/anti-ddos/instances" code="instance">高防实例</menu-item>
|
||||
<span class="item disabled">|</span>
|
||||
<menu-item href="/clusters/anti-ddos/networks" code="network">线路选项</menu-item>
|
||||
<menu-item href="/clusters/anti-ddos/periods" code="period">有效期选项</menu-item>
|
||||
<span class="item disabled">|</span>
|
||||
<menu-item href="/clusters/anti-ddos/user-instances" code="userPackage">用户实例</menu-item>
|
||||
</first-menu>
|
||||
@@ -0,0 +1,53 @@
|
||||
{$layout "layout_popup"}
|
||||
|
||||
<h3>添加高防产品</h3>
|
||||
|
||||
<form class="ui form" data-tea-action="$" data-tea-success="success">
|
||||
<csrf-token></csrf-token>
|
||||
|
||||
<table class="ui table definition selectable">
|
||||
<tr>
|
||||
<td class="title">所属线路 *</td>
|
||||
<td>
|
||||
<select class="ui dropdown auto-width" name="networkId">
|
||||
<option value="0">[选择线路]</option>
|
||||
<option v-for="network in networks" :value="network.id">{{network.name}}</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>防护带宽 *</td>
|
||||
<td>
|
||||
<div class="ui fields inline">
|
||||
<div class="ui field">
|
||||
<input type="text" name="protectionBandwidthSize" size="4" maxlength="4"/>
|
||||
</div>
|
||||
<div class="ui field">
|
||||
<select class="ui dropdown" name="protectionBandwidthUnit">
|
||||
<option v-for="unit in protectionUnitOptions" :value="unit.code">{{unit.name}}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<p class="comment">只作为展示作用。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>业务带宽 *</td>
|
||||
<td>
|
||||
<div class="ui fields inline">
|
||||
<div class="ui field">
|
||||
<input type="text" name="serverBandwidthSize" size="4" maxlength="4"/>
|
||||
</div>
|
||||
<div class="ui field">
|
||||
<select class="ui dropdown" name="serverBandwidthUnit">
|
||||
<option v-for="unit in serverUnitOptions" :value="unit.code">{{unit.name}}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<p class="comment">只作为展示作用。</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<submit-btn></submit-btn>
|
||||
</form>
|
||||
77
EdgeAdmin/web/views/@default/clusters/anti-ddos/index.html
Normal file
77
EdgeAdmin/web/views/@default/clusters/anti-ddos/index.html
Normal file
@@ -0,0 +1,77 @@
|
||||
{$layout}
|
||||
{$template "menu"}
|
||||
|
||||
<div v-show="networks.length == 0">
|
||||
<not-found-box>还没有线路，请先<a href="/clusters/anti-ddos/networks">创建线路</a>。</not-found-box>
|
||||
</div>
|
||||
|
||||
<div v-show="networks.length > 0">
|
||||
<first-menu>
|
||||
<menu-item @click.prevent="createPackage()">[添加高防产品]</menu-item>
|
||||
</first-menu>
|
||||
|
||||
<div v-show="networks.length > 1">
|
||||
<div class="margin"></div>
|
||||
<form class="ui form" method="get" action="/clusters/anti-ddos">
|
||||
<div class="ui fields inline">
|
||||
<div class="ui field">
|
||||
<select class="ui dropdown" name="networkId" v-model="networkId">
|
||||
<option value="0">[所有线路]</option>
|
||||
<option v-for="network in networks" :value="network.id">{{network.name}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="ui field">
|
||||
<button class="ui button" type="submit">搜索</button>
|
||||
|
||||
<a href="/clusters/anti-ddos" v-if="networkId > 0">[清除条件]</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div v-if="packages.length == 0">
|
||||
<p class="comment">暂时还没有高防产品。</p>
|
||||
</div>
|
||||
|
||||
<div v-if="packages.length > 0">
|
||||
<div class="margin"></div>
|
||||
<table class="ui table selectable celled">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>所属线路</th>
|
||||
<th>防护带宽</th>
|
||||
<th>业务带宽</th>
|
||||
<th>实例</th>
|
||||
<th class="width10">价格项</th>
|
||||
<th class="width5">状态</th>
|
||||
<th class="two op">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr v-for="p in packages">
|
||||
<td :class="{disabled: !p.network.isOn || !p.isOn}">{{p.network.name}}
|
||||
<div v-if="!p.network.isOn">
|
||||
<span class="red small">已停用</span>
|
||||
</div>
|
||||
</td>
|
||||
<td :class="{disabled: !p.network.isOn || !p.isOn}">{{p.protectionBandwidthSize}}{{p.protectionBandwidthUnit.toBitUpper()}}</td>
|
||||
<td :class="{disabled: !p.network.isOn || !p.isOn}">{{p.serverBandwidthSize}}{{p.serverBandwidthUnit.toBitUpper()}}</td>
|
||||
<td>
|
||||
<a :href="'/clusters/anti-ddos/instances?selectedPackageId=' + p.id">{{p.countInstances}}</a>
|
||||
</td>
|
||||
<td :class="{disabled: !p.network.isOn || !p.isOn}">
|
||||
<a href="" @click.prevent="updatePrices(p.id)">
|
||||
<span class="" v-if="p.countPrices > 0">{{p.countPrices}}<span class="grey">/{{totalPriceItems}}</span></span>
|
||||
<span class="" v-else>[设置价格]</span>
|
||||
</a>
|
||||
</td>
|
||||
<td><label-on :v-is-on="p.isOn"></label-on></td>
|
||||
<td>
|
||||
<a href="" @click.prevent="updatePackage(p.id)">修改</a>
|
||||
<a href="" @click.prevent="deletePackage(p.id)">删除</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<page-box></page-box>
|
||||
</div>
|
||||
</div>
|
||||
46
EdgeAdmin/web/views/@default/clusters/anti-ddos/index.js
Normal file
46
EdgeAdmin/web/views/@default/clusters/anti-ddos/index.js
Normal file
@@ -0,0 +1,46 @@
|
||||
Tea.context(function () {
|
||||
this.createPackage = function () {
|
||||
teaweb.popup("/clusters/anti-ddos/createPopup", {
|
||||
height: "26em",
|
||||
callback: function () {
|
||||
teaweb.successRefresh("保存成功")
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
this.updatePackage = function (packageId) {
|
||||
teaweb.popup("/clusters/anti-ddos/updatePopup?packageId=" + packageId, {
|
||||
height: "26em",
|
||||
callback: function () {
|
||||
teaweb.successRefresh("保存成功")
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
this.deletePackage = function (packageId) {
|
||||
let that = this
|
||||
teaweb.confirm("确定要删除此高防产品吗？", function () {
|
||||
that.$post(".delete")
|
||||
.params({
|
||||
packageId: packageId
|
||||
})
|
||||
.success(function () {
|
||||
teaweb.successRefresh("删除成功")
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
this.updatePrices = function (packageId) {
|
||||
teaweb.popup("/clusters/anti-ddos/updatePricesPopup?packageId=" + packageId, {
|
||||
height: "30em",
|
||||
onClose: function () {
|
||||
teaweb.reload()
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
String.prototype.toBitUpper = function () {
|
||||
let unit = this
|
||||
return unit.replace(/bps$/, "").replace(/b$/, "").toUpperCase() + "bps"
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
{$layout "layout_popup"}
|
||||
|
||||
<h3>创建高防实例</h3>
|
||||
|
||||
<form class="ui form" data-tea-action="$" data-tea-success="success">
|
||||
<csrf-token></csrf-token>
|
||||
<table class="ui table definition selectable">
|
||||
<tr v-if="packageId > 0">
|
||||
<td>所属产品</td>
|
||||
<td>{{packageSummary}}
|
||||
<input type="hidden" name="packageId" :value="packageId"/>
|
||||
</td>
|
||||
</tr>
|
||||
<tbody v-if="packageId == 0">
|
||||
<tr>
|
||||
<td>所属线路 *</td>
|
||||
<td>
|
||||
<div v-if="networks.length > 0">
|
||||
<select class="ui dropdown auto-width" name="networkId" v-model="networkId">
|
||||
<option value="0">[选择线路]</option>
|
||||
<option v-for="network in networks" :value="network.id">{{network.name}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="red" v-if="networks.length == 0">尚未创建线路和产品。</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>所属产品 *</td>
|
||||
<td>
|
||||
<div v-show="networkId > 0">
|
||||
<select class="ui dropdown auto-width" name="packageId">
|
||||
<option value="0">[选择产品]</option>
|
||||
<option v-for="p in packages" :value="p.id" v-if="p.networkId == networkId">{{p.summary}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<span v-if="networkId == 0" class="grey">请先选择线路</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tr>
|
||||
<td class="title">部署集群 *</td>
|
||||
<td>
|
||||
<node-cluster-combo-box></node-cluster-combo-box>
|
||||
<p class="comment">用于防护的网站部署的集群。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>高防IP *</td>
|
||||
<td>
|
||||
<values-box name="ipAddresses" placeholder="x.x.x.x" maxlength="64" :validator="ipValidator"></values-box>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<submit-btn>保存</submit-btn>
|
||||
</form>
|
||||
@@ -0,0 +1,13 @@
|
||||
Tea.context(function () {
|
||||
this.ipValidator = function (ip) {
|
||||
if (teaweb.validateIP(ip)) {
|
||||
return {
|
||||
isOk: true
|
||||
}
|
||||
}
|
||||
return {
|
||||
isOk: false,
|
||||
message: "请输入正确的IP"
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,92 @@
|
||||
{$layout}
|
||||
{$template "../menu"}
|
||||
|
||||
<second-menu>
|
||||
<menu-item v-if="selectedPackage != null && selectedPackage.id > 0"><span class="ui label" style="font-weight: normal">{{selectedPackage.summary}}</span> <a href="/clusters/anti-ddos/instances" title="清除条件"><i class="icon remove small"></i></a></menu-item>
|
||||
<span class="item disabled" v-if="selectedPackage != null && selectedPackage.id > 0" style="padding-left: 0">|</span>
|
||||
<menu-item @click.prevent="createInstance()">[创建高防实例]</menu-item>
|
||||
</second-menu>
|
||||
|
||||
<div v-show="selectedPackageId == 0">
|
||||
<form class="ui form" action="/clusters/anti-ddos/instances" method="get">
|
||||
<div class="ui fields inline">
|
||||
<div class="ui field">
|
||||
<select class="ui dropdown" name="networkId" v-model="networkId">
|
||||
<option value="0">[线路]</option>
|
||||
<option v-for="network in networks" :value="network.id">{{network.name}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="ui field">
|
||||
<input type="text" name="ip" placeholder="高防IP" v-model="ip" maxlength="64"/>
|
||||
</div>
|
||||
<div class="ui field">
|
||||
<button type="submit" class="ui button">搜索</button>
|
||||
|
||||
<a href="/clusters/anti-ddos/instances" v-if="networkId > 0 || ip.length > 0">[清除缓存]</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="margin"></div>
|
||||
</div>
|
||||
|
||||
<div v-if="instances.length == 0">
|
||||
<p class="comment">暂时还没有高防实例。</p>
|
||||
</div>
|
||||
|
||||
<div v-if="instances.length > 0">
|
||||
<table class="ui table selectable celled">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>所属线路</th>
|
||||
<th>防护带宽</th>
|
||||
<th>业务带宽</th>
|
||||
<th>部署集群</th>
|
||||
<th class="three wide">高防IP</th>
|
||||
<th class="three wide">租用用户</th>
|
||||
<th class="width5">状态</th>
|
||||
<th class="two op">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr v-for="instance in instances">
|
||||
<td>
|
||||
<span v-if="instance.network != null && instance.network.id > 0">{{instance.network.name}}</span>
|
||||
<span v-else class="red">已删除</span>
|
||||
</td>
|
||||
<td>
|
||||
<div v-if="instance.package != null && instance.package.id > 0">
|
||||
{{instance.package.protectionBandwidthSize}}
|
||||
{{instance.package.protectionBandwidthUnit.toBitUpper()}}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div v-if="instance.package != null && instance.package.id > 0">
|
||||
{{instance.package.serverBandwidthSize}}
|
||||
{{instance.package.serverBandwidthUnit.toBitUpper()}}
|
||||
</div>
|
||||
<span v-else class="red">已删除</span>
|
||||
</td>
|
||||
<td>
|
||||
<span v-if="instance.cluster != null && instance.cluster.id > 0">{{instance.cluster.name}}</span>
|
||||
<span v-else class="red">已删除</span>
|
||||
</td>
|
||||
<td>
|
||||
<div v-for="ipAddr in instance.ipAddresses"><keyword :v-word="ip">{{ipAddr}}</keyword></div>
|
||||
</td>
|
||||
<td>
|
||||
<div v-if="instance.user != null && instance.user.id > 0"><user-link :v-user="instance.user"></user-link>
|
||||
<div>
|
||||
<span class="small grey">到{{instance.userDayTo}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span v-else class="disabled">暂无</span>
|
||||
</td>
|
||||
<td><label-on :v-is-on="instance.isOn"></label-on></td>
|
||||
<td>
|
||||
<a href="" @click.prevent="updateInstance(instance.id)">修改</a>
|
||||
<a href="" @click.prevent="deleteInstance(instance.id)">删除</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<page-box></page-box>
|
||||
</div>
|
||||
@@ -0,0 +1,44 @@
|
||||
Tea.context(function () {
|
||||
this.createInstance = function () {
|
||||
let packageId = 0
|
||||
if (this.selectedPackage != null) {
|
||||
packageId = this.selectedPackage.id
|
||||
} else if (this.packageId > 0) {
|
||||
packageId = this.packageId
|
||||
}
|
||||
|
||||
teaweb.popup(".createPopup?networkId=" + this.networkId + "&packageId=" + packageId, {
|
||||
height: "24em",
|
||||
callback: function () {
|
||||
teaweb.successRefresh("保存成功")
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
this.updateInstance = function (instanceId) {
|
||||
teaweb.popup(".instance.updatePopup?instanceId=" + instanceId, {
|
||||
height: "24em",
|
||||
callback: function () {
|
||||
teaweb.successRefresh("保存成功")
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
this.deleteInstance = function (instanceId) {
|
||||
let that = this
|
||||
teaweb.confirm("确定要删除当前实例吗？", function () {
|
||||
that.$post(".instance.delete")
|
||||
.params({
|
||||
instanceId: instanceId
|
||||
})
|
||||
.success(function () {
|
||||
teaweb.successRefresh("删除成功")
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
String.prototype.toBitUpper = function () {
|
||||
let unit = this
|
||||
return unit.replace(/bps$/, "").replace(/b$/, "").toUpperCase() + "bps"
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,42 @@
|
||||
{$layout "layout_popup"}
|
||||
|
||||
<h3>修改高防实例</h3>
|
||||
|
||||
<form class="ui form" data-tea-action="$" data-tea-success="success">
|
||||
<csrf-token></csrf-token>
|
||||
<input type="hidden" name="instanceId" :value="instanceId"/>
|
||||
<table class="ui table definition selectable">
|
||||
<tr>
|
||||
<td>所属产品</td>
|
||||
<td>
|
||||
<span v-if="instance.package != null">{{instance.package.summary}}</span>
|
||||
<span v-else class="red">已被删除</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title">部署集群 *</td>
|
||||
<td>
|
||||
<node-cluster-combo-box :v-cluster-id="instance.clusterId"></node-cluster-combo-box>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>高防IP *</td>
|
||||
<td>
|
||||
<values-box name="ipAddresses" placeholder="x.x.x.x" maxlength="64" :validator="ipValidator" :v-values="instance.ipAddresses"></values-box>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"><more-options-indicator></more-options-indicator></td>
|
||||
</tr>
|
||||
<tbody v-show="moreOptionsVisible">
|
||||
<tr>
|
||||
<td>启用当前实例</td>
|
||||
<td>
|
||||
<checkbox name="isOn" v-model="instance.isOn"></checkbox>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<submit-btn>保存</submit-btn>
|
||||
</form>
|
||||
@@ -0,0 +1,13 @@
|
||||
Tea.context(function () {
|
||||
this.ipValidator = function (ip) {
|
||||
if (teaweb.validateIP(ip)) {
|
||||
return {
|
||||
isOk: true
|
||||
}
|
||||
}
|
||||
return {
|
||||
isOk: false,
|
||||
message: "请输入正确的IP"
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,24 @@
|
||||
{$layout "layout_popup"}
|
||||
|
||||
<h3>创建线路</h3>
|
||||
<form class="ui form" data-tea-action="$" data-tea-success="success">
|
||||
<csrf-token></csrf-token>
|
||||
|
||||
<table class="ui table definition selectable">
|
||||
<tr>
|
||||
<td class="title">线路名称 *</td>
|
||||
<td>
|
||||
<input type="text" name="name" ref="focus" maxlength="50"/>
|
||||
<p class="comment">类似于BGP线路、全球线路等。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>线路描述</td>
|
||||
<td>
|
||||
<textarea rows="3" name="description" maxlength="100"></textarea>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<submit-btn></submit-btn>
|
||||
</form>
|
||||
@@ -0,0 +1,37 @@
|
||||
{$layout}
|
||||
{$template "../menu"}
|
||||
|
||||
<second-menu>
|
||||
<menu-item @click.prevent="createNetwork">[创建线路]</menu-item>
|
||||
</second-menu>
|
||||
|
||||
<p class="comment" v-if="networks.length == 0">暂时还没有线路。</p>
|
||||
|
||||
<div v-if="networks.length > 0">
|
||||
<table class="ui table selectable celled">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="three wide">线路名称</th>
|
||||
<th>描述</th>
|
||||
<th class="width10">状态</th>
|
||||
<th class="two op">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody v-for="network in networks">
|
||||
<tr>
|
||||
<td>
|
||||
<a href="" @click.prevent="updateNetwork(network.id)">{{network.name}} <i class="icon expand small"></i></a>
|
||||
</td>
|
||||
<td>
|
||||
<span v-if="network.description.length > 0">{{network.description}}</span>
|
||||
<span v-else class="disabled">暂时没有描述</span>
|
||||
</td>
|
||||
<td><label-on :v-is-on="network.isOn"></label-on></td>
|
||||
<td>
|
||||
<a href="" @click.prevent="updateNetwork(network.id)">修改</a>
|
||||
<a href="" @click.prevent="deleteNetwork(network.id)">删除</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -0,0 +1,30 @@
|
||||
Tea.context(function () {
|
||||
this.createNetwork = function () {
|
||||
teaweb.popup(".createPopup", {
|
||||
callback: function () {
|
||||
teaweb.successRefresh("保存成功")
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
this.updateNetwork = function (networkId) {
|
||||
teaweb.popup(".network.updatePopup?networkId=" + networkId, {
|
||||
callback: function () {
|
||||
teaweb.successRefresh("保存成功")
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
this.deleteNetwork = function (networkId) {
|
||||
let that = this
|
||||
teaweb.confirm("确定要删除此线路吗？", function () {
|
||||
that.$post(".network.delete")
|
||||
.params({
|
||||
networkId: networkId
|
||||
})
|
||||
.success(function () {
|
||||
teaweb.successRefresh("删除成功")
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,37 @@
|
||||
{$layout "layout_popup"}
|
||||
|
||||
<h3>修改线路</h3>
|
||||
<form class="ui form" data-tea-action="$" data-tea-success="success">
|
||||
<csrf-token></csrf-token>
|
||||
|
||||
<input type="hidden" name="networkId" :value="network.id"/>
|
||||
|
||||
<table class="ui table definition selectable">
|
||||
<tr>
|
||||
<td class="title">线路名称 *</td>
|
||||
<td>
|
||||
<input type="text" name="name" ref="focus" maxlength="50" v-model="network.name"/>
|
||||
<p class="comment">类似于BGP线路、全球线路等。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>线路描述</td>
|
||||
<td>
|
||||
<textarea rows="3" name="description" maxlength="100" v-model="network.description"></textarea>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"><more-options-indicator></more-options-indicator></td>
|
||||
</tr>
|
||||
<tbody v-show="moreOptionsVisible">
|
||||
<tr>
|
||||
<td>启用线路</td>
|
||||
<td>
|
||||
<checkbox name="isOn" v-model="network.isOn"></checkbox>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<submit-btn></submit-btn>
|
||||
</form>
|
||||
@@ -0,0 +1,26 @@
|
||||
{$layout "layout_popup"}
|
||||
|
||||
<h3>添加有效期选项</h3>
|
||||
|
||||
<form class="ui form" data-tea-action="$" data-tea-success="success">
|
||||
<csrf-token></csrf-token>
|
||||
<table class="ui table definition selectable">
|
||||
<tr>
|
||||
<td class="title">有效期选项 *</td>
|
||||
<td>
|
||||
<div class="ui fields inline">
|
||||
<div class="ui field">
|
||||
<input type="text" name="count" size="4" maxlength="4" ref="focus" placeholder="数量"/>
|
||||
</div>
|
||||
<div class="ui field">
|
||||
<select class="ui dropdown" name="unit">
|
||||
<option value="month">月</option>
|
||||
<option value="year">年</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<submit-btn></submit-btn>
|
||||
</form>
|
||||
@@ -0,0 +1,30 @@
|
||||
{$layout}
|
||||
{$template "../menu"}
|
||||
|
||||
<second-menu>
|
||||
<menu-item @click.prevent="createPeriod">[添加有效期选项]</menu-item>
|
||||
</second-menu>
|
||||
|
||||
<p class="comment" v-if="periods.length == 0">暂时还没有有效期选项设置。</p>
|
||||
|
||||
<table class="ui table celled selectable" v-if="periods.length > 0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>有效期选项</th>
|
||||
<th class="width6">状态</th>
|
||||
<th class="two op">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr v-for="period in periods">
|
||||
<td>
|
||||
<a href="" @click.prevent="updatePeriod(period.id)">{{period.count}}{{period.unitName}} <i class="icon expand small"></i></a>
|
||||
</td>
|
||||
<td>
|
||||
<label-on :v-is-on="period.isOn"></label-on>
|
||||
</td>
|
||||
<td>
|
||||
<a href="" @click.prevent="updatePeriod(period.id)">修改</a>
|
||||
<a href="" @click.prevent="deletePeriod(period.id)">删除</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
@@ -0,0 +1,32 @@
|
||||
Tea.context(function () {
|
||||
this.createPeriod = function () {
|
||||
teaweb.popup("/clusters/anti-ddos/periods/createPopup", {
|
||||
callback: function () {
|
||||
teaweb.successRefresh("保存成功")
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
this.updatePeriod = function (periodId) {
|
||||
teaweb.popup("/clusters/anti-ddos/periods/period/updatePopup?periodId=" + periodId, {
|
||||
callback: function () {
|
||||
teaweb.successRefresh("保存成功")
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
this.deletePeriod = function (periodId) {
|
||||
let that = this
|
||||
teaweb.confirm("确定要删除此有效期选项吗？", function () {
|
||||
that.$post("/clusters/anti-ddos/periods/period/delete")
|
||||
.params({
|
||||
periodId: periodId
|
||||
})
|
||||
.success(function () {
|
||||
teaweb.success("删除成功", function () {
|
||||
teaweb.reload()
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,23 @@
|
||||
{$layout "layout_popup"}
|
||||
|
||||
<h3>修改有效期选项</h3>
|
||||
|
||||
<form class="ui form" data-tea-action="$" data-tea-success="success">
|
||||
<csrf-token></csrf-token>
|
||||
<input type="hidden" name="periodId" :value="period.id"/>
|
||||
|
||||
<table class="ui table definition selectable">
|
||||
<tr>
|
||||
<td class="title">有效期选项</td>
|
||||
<td>{{period.count}}{{period.unitName}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>启用</td>
|
||||
<td>
|
||||
<checkbox name="isOn" v-model="period.isOn"></checkbox>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<submit-btn></submit-btn>
|
||||
</form>
|
||||
@@ -0,0 +1,65 @@
|
||||
{$layout "layout_popup"}
|
||||
|
||||
<h3>修改高防产品</h3>
|
||||
|
||||
<form class="ui form" data-tea-action="$" data-tea-success="success">
|
||||
<csrf-token></csrf-token>
|
||||
<input type="hidden" name="packageId" :value="package.id"/>
|
||||
|
||||
<table class="ui table definition selectable">
|
||||
<tr>
|
||||
<td class="title">所属线路 *</td>
|
||||
<td>
|
||||
<select class="ui dropdown auto-width" name="networkId" v-model="package.networkId">
|
||||
<option value="0">[选择线路]</option>
|
||||
<option v-for="network in networks" :value="network.id">{{network.name}}</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>防护带宽 *</td>
|
||||
<td>
|
||||
<div class="ui fields inline">
|
||||
<div class="ui field">
|
||||
<input type="text" name="protectionBandwidthSize" size="4" maxlength="4" v-model="package.protectionBandwidthSize"/>
|
||||
</div>
|
||||
<div class="ui field">
|
||||
<select class="ui dropdown" name="protectionBandwidthUnit" v-model="package.protectionBandwidthUnit">
|
||||
<option v-for="unit in protectionUnitOptions" :value="unit.code">{{unit.name}}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<p class="comment">只作为展示作用。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>业务带宽 *</td>
|
||||
<td>
|
||||
<div class="ui fields inline">
|
||||
<div class="ui field">
|
||||
<input type="text" name="serverBandwidthSize" size="4" maxlength="4" v-model="package.serverBandwidthSize"/>
|
||||
</div>
|
||||
<div class="ui field">
|
||||
<select class="ui dropdown" name="serverBandwidthUnit" v-model="package.serverBandwidthUnit">
|
||||
<option v-for="unit in serverUnitOptions" :value="unit.code">{{unit.name}}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<p class="comment">只作为展示作用。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"><more-options-indicator></more-options-indicator></td>
|
||||
</tr>
|
||||
<tbody v-show="moreOptionsVisible">
|
||||
<tr>
|
||||
<td>启用当前高防产品</td>
|
||||
<td>
|
||||
<checkbox name="isOn" v-model="package.isOn"></checkbox>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<submit-btn></submit-btn>
|
||||
</form>
|
||||
@@ -0,0 +1,39 @@
|
||||
{$layout "layout_popup"}
|
||||
|
||||
<h3>高防产品"防护{{package.protectionBandwidthSize}}{{package.protectionBandwidthUnit.toBitUpper()}}/业务{{package.serverBandwidthSize}}{{package.serverBandwidthUnit.toBitUpper()}}"价格</h3>
|
||||
|
||||
<div v-if="periods.length == 0">
|
||||
<p class="comment">暂时还没有有效期选项。</p>
|
||||
</div>
|
||||
|
||||
<div v-if="periods.length > 0">
|
||||
<table class="ui table celled selectable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="two wide">有效期</th>
|
||||
<th>价格</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody v-for="period in periods">
|
||||
<tr>
|
||||
<td>{{period.name}}</td>
|
||||
<td>
|
||||
<span v-if="prices[period.id] > 0">{{prices[period.id]}}元</span>
|
||||
<span v-else class="disabled">[无]</span>
|
||||
<div>
|
||||
<a href="" @click.prevent="editPrice(period.id)"><span class="small">[设置]</span></a>
|
||||
<div v-show="editingPeriodId == period.id">
|
||||
<div class="ui input small right labeled">
|
||||
<input type="text" size="6" maxlength="6" :ref="'input' + period.id" placeholder="价格" @keyup.enter="savePrice(period.id)" @keypress.enter.prevent="1"/>
|
||||
<span class="ui label">元</span>
|
||||
</div>
|
||||
<div style="margin-top: 0.6em">
|
||||
<button class="ui button tiny primary" type="button" @click.prevent="savePrice(period.id)">保存</button> <a href="" title="取消" @click.prevent="cancelEditing"><i class="icon remove small"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -0,0 +1,72 @@
|
||||
Tea.context(function () {
|
||||
this.editingPeriodId = 0
|
||||
|
||||
this.editPrice = function (periodId) {
|
||||
this.editingPeriodId = periodId
|
||||
|
||||
let refs = this.$refs
|
||||
if (typeof refs == "object") {
|
||||
for (let k in refs) {
|
||||
if (typeof k == "string" && k == "input" + periodId) {
|
||||
let inputs = refs[k]
|
||||
if (inputs.length > 0) {
|
||||
setTimeout(function () {
|
||||
inputs[0].focus()
|
||||
}, 10)
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.cancelEditing = function () {
|
||||
this.editingPeriodId = 0
|
||||
}
|
||||
|
||||
this.savePrice = function (periodId) {
|
||||
let refs = this.$refs
|
||||
let price = -1
|
||||
if (typeof refs == "object") {
|
||||
for (let k in refs) {
|
||||
if (typeof k == "string" && k == "input" + periodId) {
|
||||
let inputs = refs[k]
|
||||
if (inputs.length > 0) {
|
||||
let input = inputs[0]
|
||||
let newPrice = parseFloat(input.value)
|
||||
if (isNaN(newPrice) || newPrice < 0) {
|
||||
teaweb.warn("请输入一个正确的数字", function () {
|
||||
input.focus()
|
||||
})
|
||||
return
|
||||
}
|
||||
price = newPrice
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (price < 0) {
|
||||
teaweb.warn("请输入一个正确的数字", function () {
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
this.$post("/clusters/anti-ddos/updatePrice")
|
||||
.params({
|
||||
packageId: this.package.id,
|
||||
periodId: periodId,
|
||||
price: price
|
||||
})
|
||||
.success(function () {
|
||||
this.editingPeriodId = 0
|
||||
this.prices[periodId] = price
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
String.prototype.toBitUpper = function () {
|
||||
let unit = this
|
||||
return unit.replace(/bps$/, "").replace(/b$/, "").toUpperCase() + "bps"
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
{$layout "layout_popup"}
|
||||
|
||||
<h3>添加高防实例</h3>
|
||||
|
||||
<form class="ui form" data-tea-action="$" data-tea-success="success">
|
||||
<csrf-token></csrf-token>
|
||||
|
||||
<input type="hidden" name="packageId" :value="selectedPackageId"/>
|
||||
<input type="hidden" name="periodId" :value="selectedPeriodId"/>
|
||||
|
||||
<table class="ui table definition selectable">
|
||||
<tr>
|
||||
<td>选择用户 *</td>
|
||||
<td>
|
||||
<user-selector></user-selector>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title">选择线路 *</td>
|
||||
<td>
|
||||
<a v-for="network in allNetworks" class="ui label basic" :class="{blue: network.id == selectedNetworkId}" @click.prevent="selectNetwork(network.id)">{{network.name}}</a>
|
||||
<p class="comment" v-for="network in allNetworks" v-if="network.id == selectedNetworkId && network.description.length > 0">{{network.name}}：{{network.description}}</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>选择防护带宽 *</td>
|
||||
<td>
|
||||
<a v-for="protectionBandwidth in allProtectionBandwidthSizes" v-if="hasProtectionBandwidth(protectionBandwidth)" class="ui label basic" :class="{blue: protectionBandwidth == selectedProtectionBandwidth}" @click.prevent="selectProtectionBandwidth(protectionBandwidth)">{{protectionBandwidth}}</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>选择业务带宽 *</td>
|
||||
<td>
|
||||
<a v-for="serverBandwidth in allServerBandwidthSizes" v-if="hasServerBandwidth(serverBandwidth)" class="ui label basic" :class="{blue: serverBandwidth == selectedServerBandwidth}" @click.prevent="selectServerBandwidth(serverBandwidth)">{{serverBandwidth}}</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>选择有效期 *</td>
|
||||
<td>
|
||||
<a v-for="period in allPeriods" class="ui label basic" v-if="hasPeriod(period.id)" :class="{blue: period.id == selectedPeriodId}" @click.prevent="selectPeriod(period.id)">{{period.count}}{{period.unitName}}</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>选择实例数量 *</td>
|
||||
<td>
|
||||
<div class="ui input">
|
||||
<select class="ui dropdown" name="count" v-model="count" @change="changeCount(this.count)">
|
||||
<option v-for="i in max" :value="i">{{i}}</option>
|
||||
</select>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>价格</td>
|
||||
<td>
|
||||
<span v-if="amount == 0" class="disabled">没有找到对应价格</span>
|
||||
<span v-if="amount > 0">{{amount}}元</span>
|
||||
<p class="comment">管理员操作时，此价格仅供展示，并不会从用户账户中扣款。</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<submit-btn :class="{disabled: amount <= 0}"></submit-btn>
|
||||
</form>
|
||||
@@ -0,0 +1,213 @@
|
||||
Tea.context(function () {
|
||||
this.selectedNetworkId = 0
|
||||
this.selectedProtectionBandwidth = ""
|
||||
this.selectedServerBandwidth = ""
|
||||
this.selectedPackageId = 0
|
||||
this.selectedPeriodId = 0
|
||||
this.amount = -1
|
||||
this.max = 1
|
||||
this.count = 1
|
||||
this.selectedPrice = null
|
||||
|
||||
this.$delay(function () {
|
||||
if (this.allNetworks.length > 0) {
|
||||
this.selectNetwork(this.allNetworks[0].id)
|
||||
}
|
||||
})
|
||||
|
||||
this.selectNetwork = function (networkId) {
|
||||
this.selectedNetworkId = networkId
|
||||
this.selectedProtectionBandwidth = ""
|
||||
this.selectedServerBandwidth = ""
|
||||
this.selectedPeriodId = 0
|
||||
this.amount = -1
|
||||
|
||||
// 选择第一个防护带宽
|
||||
let that = this
|
||||
let found = false
|
||||
this.prices.sort(function (v1, v2) {
|
||||
return that.compareBits(v1.protectionBandwidth, v2.protectionBandwidth)
|
||||
}).forEach(function (v) {
|
||||
if (!found && v.networkId == that.selectedNetworkId) {
|
||||
that.selectProtectionBandwidth(v.protectionBandwidth)
|
||||
found = true
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
this.selectProtectionBandwidth = function (protectionBandwidth) {
|
||||
this.selectedProtectionBandwidth = protectionBandwidth
|
||||
this.selectedServerBandwidth = ""
|
||||
this.selectedPeriodId = 0
|
||||
this.amount = -1
|
||||
|
||||
// 选择第一个业务带宽
|
||||
let that = this
|
||||
let found = false
|
||||
this.prices.sort(function (v1, v2) {
|
||||
return that.compareBits(v1.serverBandwidth, v2.serverBandwidth)
|
||||
}).forEach(function (v) {
|
||||
if (!found && v.networkId == that.selectedNetworkId && v.protectionBandwidth == protectionBandwidth) {
|
||||
that.selectServerBandwidth(v.serverBandwidth)
|
||||
found = true
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
this.selectServerBandwidth = function (serverBandwidth) {
|
||||
this.selectedServerBandwidth = serverBandwidth
|
||||
this.selectedPeriodId = 0
|
||||
this.amount = -1
|
||||
|
||||
// 选择第一个有效期
|
||||
let that = this
|
||||
let found = false
|
||||
|
||||
this.prices.sort(function (v1, v2) {
|
||||
let periodId1 = v1.periodId
|
||||
let periodId2 = v2.periodId
|
||||
return (that.toPeriodMonths(that.findPeriodWithId(periodId1)) > that.toPeriodMonths(that.findPeriodWithId(periodId2))) ? 1 : -1
|
||||
}).forEach(function (v) {
|
||||
if (!found && v.networkId == that.selectedNetworkId && v.protectionBandwidth == that.selectedProtectionBandwidth && v.serverBandwidth == serverBandwidth) {
|
||||
that.selectPeriod(v.periodId)
|
||||
found = true
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
this.selectPeriod = function (periodId) {
|
||||
this.selectedPeriodId = periodId
|
||||
|
||||
let price = null
|
||||
let found = false
|
||||
let that = this
|
||||
this.prices.forEach(function (v) {
|
||||
if (!found && v.networkId == that.selectedNetworkId
|
||||
&& v.protectionBandwidth == that.selectedProtectionBandwidth
|
||||
&& v.serverBandwidth == that.selectedServerBandwidth
|
||||
&& v.periodId == that.selectedPeriodId) {
|
||||
price = v
|
||||
found = true
|
||||
}
|
||||
})
|
||||
if (price == null) {
|
||||
teaweb.warn("数据错误，请刷新页面后重试，如果仍然没有恢复，请联系管理员。")
|
||||
return
|
||||
}
|
||||
|
||||
this.selectedPrice = price
|
||||
|
||||
this.selectedPackageId = price.packageId
|
||||
this.count = 1
|
||||
this.max = price.maxInstances
|
||||
this.changeCount(this.count)
|
||||
}
|
||||
|
||||
this.hasProtectionBandwidth = function (protectionBandwidth) {
|
||||
if (this.prices == null) {
|
||||
return
|
||||
}
|
||||
|
||||
let found = false
|
||||
let that = this
|
||||
this.prices.forEach(function (v) {
|
||||
if (v.networkId == that.selectedNetworkId && v.protectionBandwidth == protectionBandwidth) {
|
||||
found = true
|
||||
}
|
||||
})
|
||||
return found
|
||||
}
|
||||
|
||||
this.hasServerBandwidth = function (serverBandwidth) {
|
||||
if (this.prices == null) {
|
||||
return
|
||||
}
|
||||
|
||||
let found = false
|
||||
let that = this
|
||||
this.prices.forEach(function (v) {
|
||||
if (v.networkId == that.selectedNetworkId
|
||||
&& v.protectionBandwidth == that.selectedProtectionBandwidth
|
||||
&& v.serverBandwidth == serverBandwidth) {
|
||||
found = true
|
||||
}
|
||||
})
|
||||
return found
|
||||
}
|
||||
|
||||
this.hasPeriod = function (periodId) {
|
||||
if (this.prices == null) {
|
||||
return
|
||||
}
|
||||
|
||||
let found = false
|
||||
let that = this
|
||||
this.prices.forEach(function (v) {
|
||||
if (v.networkId == that.selectedNetworkId
|
||||
&& v.protectionBandwidth == that.selectedProtectionBandwidth
|
||||
&& v.serverBandwidth == that.selectedServerBandwidth
|
||||
&& v.periodId == periodId) {
|
||||
found = true
|
||||
}
|
||||
})
|
||||
return found
|
||||
}
|
||||
|
||||
this.changeCount = function () {
|
||||
if (this.selectedPrice == null) {
|
||||
this.amount = -1
|
||||
return
|
||||
}
|
||||
this.amount = this.selectedPrice.price * this.count
|
||||
|
||||
// 从服务器获取最新价格
|
||||
this.$post(".price")
|
||||
.params({
|
||||
packageId: this.selectedPackageId,
|
||||
periodId: this.selectedPeriodId,
|
||||
count: this.count
|
||||
})
|
||||
.success(function (resp) {
|
||||
this.amount = resp.data.amount
|
||||
})
|
||||
}
|
||||
|
||||
this.toBits = function (b) {
|
||||
let m = b.match(/^(\d+)(\w+)$/)
|
||||
let n = parseInt(m[1])
|
||||
switch (m[2]) {
|
||||
case "bps":
|
||||
return n
|
||||
case "Kbps":
|
||||
return n * 1024
|
||||
case "Mbps":
|
||||
return n * Math.pow(1024, 2)
|
||||
case "Gbps":
|
||||
return n * Math.pow(1024, 3)
|
||||
case "Tbps":
|
||||
return n * Math.pow(1024, 4)
|
||||
case "Pbps":
|
||||
return n * Math.pow(1024, 5)
|
||||
}
|
||||
return n
|
||||
}
|
||||
|
||||
this.compareBits = function (b1, b2) {
|
||||
return (this.toBits(b1) > this.toBits(b2)) ? 1 : -1
|
||||
}
|
||||
|
||||
this.findPeriodWithId = function (periodId) {
|
||||
return this.allPeriods.$find(function (k, v) {
|
||||
return v.id == periodId
|
||||
})
|
||||
}
|
||||
|
||||
this.toPeriodMonths = function (period) {
|
||||
switch (period.unit) {
|
||||
case "year":
|
||||
return period.count * 12
|
||||
default:
|
||||
return period.count
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,67 @@
|
||||
{$layout}
|
||||
{$template "../menu"}
|
||||
|
||||
<second-menu>
|
||||
<menu-item @click.prevent="createUserInstance">[添加用户实例]</menu-item>
|
||||
</second-menu>
|
||||
|
||||
<p class="comment" v-if="userInstances.length == 0">暂时还没有用户实例。</p>
|
||||
|
||||
<div v-if="userInstances.length > 0">
|
||||
<table class="ui table selectable celled">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>用户</th>
|
||||
<th>高防产品</th>
|
||||
<th>高防IP</th>
|
||||
<th style="width: 7em">有效期</th>
|
||||
<th style="width: 7em">开始日期</th>
|
||||
<th style="width: 7em">结束日期</th>
|
||||
<th class="width6">防护对象</th>
|
||||
<th class="two op">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr v-for="userInstance in userInstances">
|
||||
<td><user-link :v-user="userInstance.user"></user-link></td>
|
||||
<td>
|
||||
<span v-if="userInstance.package.id > 0">{{userInstance.package.summary}}</span>
|
||||
<span v-else class="red">已删除</span>
|
||||
</td>
|
||||
<td>
|
||||
<div v-if="userInstance.ipAddresses != null && userInstance.ipAddresses.length > 0">
|
||||
<div v-for="ip in userInstance.ipAddresses">
|
||||
{{ip}}
|
||||
</div>
|
||||
</div>
|
||||
<span v-else class="red">无有效IP</span>
|
||||
</td>
|
||||
<td>{{userInstance.periodCount}}{{userInstance.periodUnitName}}</td>
|
||||
<td>{{userInstance.dayFrom}}</td>
|
||||
<td>{{userInstance.dayTo}}
|
||||
<div v-if="userInstance.isExpired">
|
||||
<span v-if="userInstance.isExpired" class="small red">已过期</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<!-- 防护对象 -->
|
||||
<a href="" v-if="userInstance.isAvailable" @click.prevent="updateObjectsPopup(userInstance.id)">
|
||||
<span v-if="userInstance.countObjects > 0">{{userInstance.countObjects}}个对象</span>
|
||||
<span v-else>设置</span>
|
||||
</a>
|
||||
<span v-else class="disabled">{{userInstance.countObjects}}</span>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<!-- 续费 -->
|
||||
<span v-if="userInstance.instance.userInstanceId == userInstance.id"><a href="" @click.prevent="renewUserInstance(userInstance.id)">续期</a></span>
|
||||
<span v-else class="disabled">续期</span>
|
||||
|
||||
<!-- 删除 -->
|
||||
<a href="" v-if="userInstance.canDelete" @click.prevent="deleteUserInstance(userInstance.id)">删除</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<page-box></page-box>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
Tea.context(function () {
|
||||
this.createUserInstance = function () {
|
||||
teaweb.popup(".createPopup", {
|
||||
height: "32em",
|
||||
callback: function () {
|
||||
teaweb.successRefresh("保存成功")
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
this.renewUserInstance = function (userInstanceId) {
|
||||
teaweb.popup(".renewPopup?userInstanceId=" + userInstanceId, {
|
||||
height: "26em",
|
||||
callback: function () {
|
||||
teaweb.successRefresh("续期成功")
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
this.updateObjectsPopup = function (userInstanceId) {
|
||||
teaweb.popup(".updateObjectsPopup?userInstanceId=" + userInstanceId, {
|
||||
width: "60em",
|
||||
height: "40em",
|
||||
callback: function () {
|
||||
teaweb.successRefresh("保存成功")
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
this.deleteUserInstance = function (userInstanceId) {
|
||||
let that = this
|
||||
teaweb.confirm("确定要删除此用户实例吗？", function () {
|
||||
that.$post(".delete")
|
||||
.params({
|
||||
userInstanceId: userInstanceId
|
||||
})
|
||||
.success(function () {
|
||||
teaweb.successRefresh("删除成功")
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,60 @@
|
||||
{$layout "layout_popup"}
|
||||
|
||||
<h3>续期实例</h3>
|
||||
<form class="ui form" data-tea-action="$" data-tea-success="success">
|
||||
<csrf-token></csrf-token>
|
||||
<input type="hidden" name="userInstanceId" :value="userInstance.id"/>
|
||||
<input type="hidden" name="periodId" :value="selectedPeriodId"/>
|
||||
<table class="ui table definition selectable">
|
||||
<tr>
|
||||
<td class="title">用户</td>
|
||||
<td>
|
||||
<div v-if="userInstance.user.id > 0"><user-link :v-user="userInstance.user"></user-link></div>
|
||||
<span v-else class="red">已删除</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>高防产品</td>
|
||||
<td>
|
||||
<div v-if="userInstance.package.id > 0">{{userInstance.package.summary}}</div>
|
||||
<span v-else class="red">已删除</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>高防IP</td>
|
||||
<td>
|
||||
<div v-if="userInstance.instance.id > 0">
|
||||
<div v-for="ip in userInstance.instance.ipAddresses">{{ip}}</div>
|
||||
</div>
|
||||
<span v-else class="red">已删除</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>当前有效期</td>
|
||||
<td>{{userInstance.dayTo}}
|
||||
<p class="comment" v-if="userInstance.isExpired">
|
||||
<span class="red">已过期，续期后新的有效期将会从今天（{{userInstance.today}}）开始。</span>
|
||||
</p>
|
||||
<p class="comment" v-else>续期后，将会在此基础上增加新的有效期。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>新续有效期 *</td>
|
||||
<td>
|
||||
<div v-if="allPeriods.length > 0">
|
||||
<a v-for="period in allPeriods" class="ui label basic" :class="{blue: period.id == selectedPeriodId}" @click.prevent="selectPeriod(period.id)">{{period.count}}{{period.unitName}}</a>
|
||||
</div>
|
||||
<span v-else class="red">没有可用的有效期</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>价格</td>
|
||||
<td>
|
||||
<span v-if="amount == 0" class="disabled">没有找到对应价格</span>
|
||||
<span v-if="amount > 0">{{amount}}元</span>
|
||||
<p class="comment">管理员操作时，此价格仅供展示，并不会从用户账户中扣款。</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<submit-btn v-if="amount > 0">续期</submit-btn>
|
||||
</form>
|
||||
@@ -0,0 +1,23 @@
|
||||
Tea.context(function () {
|
||||
this.selectedPeriodId = 0
|
||||
this.amount = -1
|
||||
|
||||
this.$delay(function () {
|
||||
if (this.userInstance.periodId > 0) {
|
||||
let that = this
|
||||
if (this.allPeriods.$find(function (k, v) {
|
||||
return that.userInstance.periodId == v.id
|
||||
}) != null) {
|
||||
this.selectPeriod(this.userInstance.periodId)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
this.selectPeriod = function (periodId) {
|
||||
this.selectedPeriodId = periodId
|
||||
|
||||
this.amount = this.prices.$find(function (k, v) {
|
||||
return v.periodId == periodId
|
||||
}).price
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,45 @@
|
||||
{$layout "layout_popup"}
|
||||
|
||||
<h3>设置防护对象</h3>
|
||||
|
||||
<form class="ui form" data-tea-action="$" data-tea-success="success">
|
||||
<csrf-token></csrf-token>
|
||||
<input type="hidden" name="userInstanceId" :value="userInstance.id"/>
|
||||
|
||||
<table class="ui table selectable definition">
|
||||
<tr>
|
||||
<td class="title">用户</td>
|
||||
<td>
|
||||
<div v-if="userInstance.user.id > 0"><user-link :v-user="userInstance.user"></user-link></div>
|
||||
<span v-else class="red">已删除</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>高防产品</td>
|
||||
<td>
|
||||
<div v-if="userInstance.package.id > 0">{{userInstance.package.summary}}</div>
|
||||
<span v-else class="red">已删除</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>高防IP</td>
|
||||
<td>
|
||||
<div v-if="userInstance.instance.id > 0">
|
||||
<div v-for="ip in userInstance.instance.ipAddresses">{{ip}}</div>
|
||||
</div>
|
||||
<span v-else class="red">已删除</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>防护对象</td>
|
||||
<td>
|
||||
<div v-if="userInstance.isAvailable && userInstance.user.id > 0">
|
||||
<ad-instance-objects-box :v-objects="userInstance.objects" :v-user-id="userInstance.user.id"></ad-instance-objects-box>
|
||||
</div>
|
||||
<span v-else class="red">实例已经失效，无法设置防护对象</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<submit-btn v-show="userInstance.isAvailable && userInstance.user.id > 0"></submit-btn>
|
||||
</form>
|
||||
Reference in New Issue
Block a user