IPBox把IP加入黑名单可以选择过期时间/可以从已经添加的名单中删除/已经添加的名单中显示过期时间

web/public/js/components/common/datetime-input.js

@@ -135,6 +135,7 @@ Vue.component("datetime-input", {
 			this.timestamp = Math.floor(date.getTime() / 1000)
 		},
 		leadingZero: function (s, l) {
+			s = s.toString()
 			if (l <= s.length) {
 				return s
 			}
@@ -142,6 +143,18 @@ Vue.component("datetime-input", {
 				s = "0" + s
 			}
 			return s
+		},
+		resultTimestamp: function () {
+			return this.timestamp
+		},
+		nextDays: function (days) {
+			let date = new Date()
+			date.setTime(date.getTime() + days * 86400 * 1000)
+			this.day = date.getFullYear() + "-" + this.leadingZero(date.getMonth() + 1, 2) + "-" + this.leadingZero(date.getDate(), 2)
+			this.hour = this.leadingZero(date.getHours(), 2)
+			this.minute = this.leadingZero(date.getMinutes(), 2)
+			this.second = this.leadingZero(date.getSeconds(), 2)
+			this.change()
 		}
 	},
 	template: `<div>
@@ -156,5 +169,6 @@ Vue.component("datetime-input", {
 		<div class="ui field">:</div>
 		<div class="ui field" :class="{error: hasSecondError}"><input type="text" v-model="second" maxlength="2" style="width:4em" placeholder="秒" @input="change"/></div>
 	</div>
+	<p class="comment">常用时间：<a href="" @click.prevent="nextDays(1)"> &nbsp;1天&nbsp; </a> <span class="disabled">|</span> <a href="" @click.prevent="nextDays(3)"> &nbsp;3天&nbsp; </a> <span class="disabled">|</span> <a href="" @click.prevent="nextDays(7)"> &nbsp;一周&nbsp; </a> <span class="disabled">|</span> <a href="" @click.prevent="nextDays(30)"> &nbsp;30天&nbsp; </a> </p>
 </div>`
 })

web/views/@default/servers/ipbox/index.html

@@ -23,19 +23,44 @@
     <tr v-if="publicBlackIPLists.length > 0">
         <td>所在IP名单</td>
         <td colspan="5">
-            <div class="ui label basic small" v-for="ipList in ipLists">
+            <div class="ui label basic small" v-for="ipList in ipLists" style="margin-bottom: 0.5em">
                 {{ipList.name}}
+
+                <!-- 过期时间 -->
+                <span v-if="ipList.itemExpiredTime.length == 0" class="grey small">（不过期）</span>
+                <span v-else class="grey small">（有效至：{{ipList.itemExpiredTime}}）</span>
+
+                <!-- 操作 -->
+                <a href="" title="删除" @click.prevent="deleteFromList(ipList.id, ipList.itemId)"><i class="icon remove small"></i></a>
             </div>
+            <span v-if="ipLists.length == 0" class="disabled">暂时未在任何名单。</span>
             &nbsp; &nbsp;
-            <a href="" @click.prevent="showBlackLists"><i class="icon angle" :class="{up: blackListsVisible, down: !blackListsVisible}"></i>加入到黑名单</a>
+            <div>
+                <a href="" @click.prevent="showBlackLists"><i class="icon angle" :class="{up: blackListsVisible, down: !blackListsVisible}"></i>加入到<span v-if="ipLists.length > 0">其他</span>黑名单</a>
+            </div>
         </td>
     </tr>
     <tr v-if="publicBlackIPLists.length > 0 && blackListsVisible">
         <td>加入黑名单</td>
         <td colspan="5">
-            <a class="ui label basic small" v-for="ipList in publicBlackIPLists" @click.prevent="addBlackIP(ipList)">
-                {{ipList.name}}
-            </a>
+            <form class="ui form">
+                <table class="ui table">
+                    <tr>
+                        <td class="title">过期时间</td>
+                        <td>
+                            <datetime-input :v-timestamp="defaultItemExpiredAt" ref="itemExpiredTimestamp"></datetime-input>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>选择名单 *</td>
+                        <td>
+                            <a class="ui label basic small" :class="{blue: selectedListId == ipList.id}" v-for="ipList in publicBlackIPLists" @click.prevent="addBlackIP(ipList)" style="margin-top: 0.3em">
+                                {{ipList.name}}
+                            </a>
+                        </td>
+                    </tr>
+                </table>
+            </form>
         </td>
     </tr>
 </table>

web/views/@default/servers/ipbox/index.js

@@ -2,7 +2,11 @@ Tea.context(function () {
 	this.blackListsVisible = false
 	this.allPublicBlackIPLists = this.publicBlackIPLists.$copy()
 
+
+	this.defaultItemExpiredAt = Math.floor(new Date().getTime() / 1000) + 86400
 	this.showBlackLists = function () {
+		this.defaultItemExpiredAt = Math.floor(new Date().getTime() / 1000) + 86400
+
 		let that = this
 		this.publicBlackIPLists = this.allPublicBlackIPLists.filter(function (allList) {
 			let found = true
@@ -16,17 +20,33 @@ Tea.context(function () {
 		this.blackListsVisible = !this.blackListsVisible
 	}
 
+	this.selectedListId = 0
 	this.addBlackIP = function (list) {
+		this.selectedListId = list.id
+		let expiredAt = this.$refs.itemExpiredTimestamp.resultTimestamp()
 		let that = this
-		teaweb.confirm("确定要将此IP添加到此黑名单吗？", function () {
+		teaweb.confirm("确定要将此IP添加到黑名单'" + list.name + "'吗？", function () {
 			that.$post(".addIP")
 				.params({
 					listId: list.id,
-					ip: that.ip
+					ip: that.ip,
+					expiredAt: expiredAt
 				})
 				.success(function () {
-					that.ipLists.push(list)
-					that.blackListsVisible = false
+					teaweb.reload()
+				})
+		})
+	}
+
+	this.deleteFromList = function (listId, itemId) {
+		teaweb.confirm("确定要从此名单中删除此IP吗？", function () {
+			this.$post(".deleteFromList")
+				.params({
+					listId: listId,
+					itemId: itemId
+				})
+				.success(function () {
+					teaweb.reload()
 				})
 		})
 	}