增加服务分组管理

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

@@ -0,0 +1,40 @@
+{$layout}
+{$template "/left_menu"}
+
+<div class="right-box">
+	<first-menu>
+		<menu-item href="/servers/components/groups" active="true">列表</menu-item>
+		<span class="item">|</span>
+		<a href="" class="item" @click.prevent="createGroup()">[创建]</a>
+	</first-menu>
+
+	<p class="comment" v-if="groups.length == 0">暂时还没有分组。</p>
+	<div v-show="groups.length > 0">
+		<div class="margin"></div>
+		<table class="ui table selectable" id="sortable-table">
+			<thead>
+				<tr>
+					<th style="width:3em"></th>
+					<th>分组名称</th>
+					<th>服务数量</th>
+					<th class="two op">操作</th>
+				</tr>
+			</thead>
+			<tbody v-for="group in groups" :data-group-id="group.id">
+				<tr>
+					<td style="text-align: center;"><i class="icon bars handle grey"></i> </td>
+					<td>{{group.name}}</td>
+					<td>
+						<span v-if="group.countServers.length > 0">{{group.countServers}}</span>
+						<span v-else class="disabled">0</span>
+					</td>
+					<td>
+						<a href="" @click.prevent="updateGroup(group.id)">修改</a> &nbsp; <a href="" @click.prevent="deleteGroup(group.id)">删除</a>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+
+	<p v-if="groups.length > 0" class="comment">可以拖动左侧的<i class="icon bars"></i>排序。</p>
+</div>