实现在服务中使用分组

web/public/js/components/node/node-group-selector.js

@@ -1,20 +1,8 @@
 Vue.component("node-group-selector", {
 	props: ["v-cluster-id", "v-group"],
-	mounted: function () {
-		let that = this
-		Tea.action("/clusters/cluster/groups/options")
-			.post()
-			.params({
-				clusterId: this.vClusterId
-			})
-			.success(function (resp) {
-
-			})
-	},
 	data: function () {
 		return {
-			groups: [],
-			selectedGroup: this.vGroup,
+			selectedGroup: this.vGroup
 		}
 	},
 	methods: {

web/public/js/components/server/server-group-selector.js

@@ -0,0 +1,53 @@
+Vue.component("server-group-selector", {
+	props: ["v-groups"],
+	data: function () {
+		let groups = this.vGroups
+		if (groups == null) {
+			groups = []
+		}
+		return {
+			groups: groups
+		}
+	},
+	methods: {
+		selectGroup: function () {
+			let that = this
+			let groupIds = this.groups.map(function (v) {
+				return v.id.toString()
+			}).join(",")
+			teaweb.popup("/servers/components/groups/selectPopup?selectedGroupIds=" + groupIds, {
+				callback: function (resp) {
+					that.groups.push(resp.data.group)
+				}
+			})
+		},
+		addGroup: function () {
+			let that = this
+			teaweb.popup("/servers/components/groups/createPopup", {
+				callback: function (resp) {
+					that.groups.push(resp.data.group)
+				}
+			})
+		},
+		removeGroup: function (index) {
+			this.groups.$remove(index)
+		},
+		groupIds: function () {
+			return this.groups.map(function (v) {
+				return v.id
+			})
+		}
+	},
+	template: `<div>
+	<div v-if="groups.length > 0">
+		<div class="ui label tiny" v-if="groups.length > 0" v-for="(group, index) in groups">
+			<input type="hidden" name="groupIds" :value="group.id"/>
+			{{group.name}} &nbsp;<a href="" title="删除" @click.prevent="removeGroup(index)"><i class="icon remove"></i></a>
+		</div>
+		<div class="ui divider"></div>
+	</div>
+	<div>
+		<a href="" @click.prevent="selectGroup()">[选择分组]</a> &nbsp; <a href="" @click.prevent="addGroup()">[添加分组]</a>
+	</div>
+</div>`
+})

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

@@ -82,6 +82,13 @@
 			</td>
 		</tr>
 
+		<tr>
+			<td>选择分组</td>
+			<td>
+				<server-group-selector></server-group-selector>
+			</td>
+		</tr>
+
 		<tr>
 			<td colspan="2"><more-options-indicator></more-options-indicator></td>
 		</tr>

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

@@ -7,6 +7,7 @@
 	<thead>
 		<tr>
 			<th>服务名称</th>
+			<th>所属分组</th>
 			<th>服务类型</th>
 			<th>部署集群</th>
 			<th>端口</th>
@@ -16,6 +17,14 @@
 	</thead>
 	<tr v-for="server in servers">
 		<td>{{server.name}}</td>
+		<td>
+			<div v-if="server.groups.length > 0">
+				<div  v-for="group in server.groups">
+					<span class="ui label tiny" style="margin-bottom:0.5em">{{group.name}}</span>
+				</div>
+			</div>
+			<span class="disabled" v-else>-</span>
+		</td>
 		<td>{{server.serverTypeName}}</td>
 		<td>{{server.cluster.name}}</td>
 		<td>

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

@@ -26,6 +26,12 @@
 					{{typeName}}
 				</td>
 			</tr>
+			<tr>
+				<td>选择分组</td>
+				<td>
+					<server-group-selector :v-groups="server.groups"></server-group-selector>
+				</td>
+			</tr>
 			<tr>
 				<td colspan="2"><more-options-indicator></more-options-indicator></td>
 			</tr>