实现批量删除网站功能

web/views/@default/servers/index.css

@@ -13,6 +13,12 @@
 .node-logs-box::-webkit-scrollbar {
   width: 4px;
 }
+.server-checkbox-td .checkbox {
+  opacity: 50%;
+}
+.server-checkbox-td .checkbox:hover {
+  opacity: 100%;
+}
 .server-name-td {
   position: relative;
 }

web/views/@default/servers/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["index.less"],"names":[],"mappings":"AAAA,GAAG,QACF,MAAK;EACJ,kBAAA;EACA,UAAA;EACA,UAAA;;AAJF,GAAG,QAOF;EACC,kBAAA;;AAIF;EACC,gBAAA;EACA,gBAAA;;AAGD,cAAc;EACb,UAAA;;AAGD;EACC,kBAAA;;AADD,eAGC,MAAK;EACJ,aAAA;EACA,kBAAA;EACA,UAAA;EACA,QAAA;EACA,gBAAA;;AAIF,eAAe,MACd,MAAK;EACJ,eAAA;;AAIF,eACC;EACC,gBAAA;;AAFF,eACC,IAGC;EACC,gBAAA;;AAKH,MACC,GAAE;EACD,UAAA","file":"index.css"}
+{"version":3,"sources":["index.less"],"names":[],"mappings":"AAAA,GAAG,QACF,MAAK;EACJ,kBAAA;EACA,UAAA;EACA,UAAA;;AAJF,GAAG,QAOF;EACC,kBAAA;;AAIF;EACC,gBAAA;EACA,gBAAA;;AAGD,cAAc;EACb,UAAA;;AAGD,mBACC;EACC,YAAA;;AAFF,mBAKC,UAAS;EACR,aAAA;;AAIF;EACC,kBAAA;;AADD,eAGC,MAAK;EACJ,aAAA;EACA,kBAAA;EACA,UAAA;EACA,QAAA;EACA,gBAAA;;AAIF,eAAe,MACd,MAAK;EACJ,eAAA;;AAIF,eACC;EACC,gBAAA;;AAFF,eACC,IAGC;EACC,gBAAA;;AAKH,MACC,GAAE;EACD,UAAA","file":"index.css"}

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

@@ -39,12 +39,12 @@
         </div>
     </div>
     <div class="ui fields inline" style="margin-top: 1em">
-        <div class="ui field">
-            <checkbox name="checkDNS" :v-value="1" v-model="checkDNS">检查域名解析</checkbox>
-        </div>
         <div class="ui field" v-if="clusterId == 0 && groupId == 0 && keyword.length == 0 && latestServers.length > 0">
             <a href="" @click.prevent="showLatest()">常用<i class="icon angle" :class="{down: !latestVisible, up: latestVisible}"></i> </a>
         </div>
+        <div class="ui field" style="position: absolute; right: 1em">
+            <checkbox name="checkDNS" :v-value="1" v-model="checkDNS">检查域名解析</checkbox>
+        </div>
     </div>
 </form>
 
@@ -55,9 +55,16 @@
 
 <p class="ui message" v-if="servers.length == 0">暂时还没有网站。</p>
 
+<div v-if="checkedServerIds.length > 0">
+    <div class="ui divider"></div>
+    <button class="ui button basic" @click.prevent="deleteServers">删除所选{{checkedServerIds.length}}网站</button> &nbsp; &nbsp;
+    <button class="ui button basic" @click.prevent="resetCheckedServers">清除所选</button>
+</div>
+
 <table class="ui table selectable celled" v-if="servers.length > 0">
 	<thead>
 		<tr>
+            <th style="width: 1em" class="server-checkbox-td"><checkbox ref="allCheckedCheckboxes" @input="changeAllChecked"></checkbox></th>
 			<th>网站名称</th>
 			<th>所属用户</th>
 			<th>部署集群</th>
@@ -71,6 +78,7 @@
 		</tr>
 	</thead>
 	<tr v-for="server in servers">
+        <td class="server-checkbox-td"><checkbox ref="serverCheckboxes" :v-value="server.id" @input="changeServerChecked"></checkbox></td>
         <td class="server-name-td"><a :href="'/servers/server?serverId=' + server.id"><keyword :v-word="keyword">{{server.name}}</keyword></a>  &nbsp; <a :href="'/servers/server/settings?serverId=' + server.id" title="设置"><i class="icon setting grey"></i></a>
 			<div style="margin-top:0.4em">
 				<grey-label>{{server.serverTypeName}}</grey-label>

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

@@ -55,4 +55,54 @@ Tea.context(function () {
 	this.showLatest = function () {
 		this.latestVisible = !this.latestVisible
 	}
+
+	/**
+	 * 全选
+	 */
+	this.checkedServerIds = []
+	this.changeAllChecked = function (checked) {
+		for (let checkbox of this.$refs.serverCheckboxes) {
+			if (checked) {
+				checkbox.check()
+			} else {
+				checkbox.uncheck()
+			}
+		}
+		this.updateCheckedServers()
+	}
+
+	this.changeServerChecked = function () {
+		this.updateCheckedServers()
+	}
+
+	this.updateCheckedServers = function () {
+		let serverIds = []
+		for (let checkbox of this.$refs.serverCheckboxes) {
+			if (checkbox.isChecked()) {
+				serverIds.push(checkbox.vValue)
+			}
+		}
+		this.checkedServerIds = serverIds
+	}
+
+	this.resetCheckedServers = function () {
+		this.$refs.allCheckedCheckboxes.uncheck()
+		for (let checkbox of this.$refs.serverCheckboxes) {
+			checkbox.uncheck()
+		}
+		this.updateCheckedServers()
+	}
+
+	this.deleteServers = function () {
+		let that = this
+		teaweb.confirm("确定要删除所选的" + (this.checkedServerIds.length) + "个网站吗？", function () {
+			that.$post(".deleteServers")
+				.params({
+					serverIds: this.checkedServerIds
+				})
+				.success(function () {
+					teaweb.reload()
+				})
+		})
+	}
 })

web/views/@default/servers/index.less

@@ -19,6 +19,16 @@
 	width: 4px;
 }
 
+.server-checkbox-td {
+	.checkbox {
+		opacity: 50%;
+	}
+
+	.checkbox:hover {
+		opacity: 100%;
+	}
+}
+
 .server-name-td {
 	position: relative;