MCSManager/public/template/userset.html

<div id='UsersetList' class="OneContainer">
	<div class="row">
		<div class="col-md-12 ">
			<div class="Panel PanelBlue">
				<div class="PanelTitle">用户中心</div>
				<div class="PanelBody">
					<div class="row">
						<div class="col-sm-12 PanelItemF">
							<div class="PanelItem" v-on:click="createUser = !createUser">
								<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 创建新用户
							</div>
							<div class="PanelItem" v-on:click="refresh()">
								<span class="glyphicon glyphicon-repeat" aria-hidden="true"></span> 从内存刷新
							</div>
							<div class="PanelItem" v-on:click="reloadUser()">
								<span class="glyphicon glyphicon-repeat" aria-hidden="true"></span> 重新从文件刷新用户
							</div>
						</div>
					</div>
					<div class="ItemTableList"></div>
					<div class="PanelItem ItemTableList" v-for="item of items">
						<div class="row">
							<div class="col-md-7">
								<div class="PanelItemInfo">
									<h4>
										<span v-if="TOOLS.isMaster(item.username)" class="color-high-red">[管理账号] </span>
										<span v-else class="color-green">[普通账号] </span>
										<span v-text="item.username"></span>
									</h4>
									<div>
										<span v-if="item.data.online" class="color-green">正在线上</span>
										<span v-if="!item.data.online" class="color-red">离线</span>
										| 创建时间:
										<span v-text="item.data.createDate"> </span>
										| 最后上线:
										<span v-text="item.data.lastDate"> </span>
									</div>
								</div>
							</div>
							<div class="col-md-5 NextCol">
								<div class="PanelItemMuem">
									<!-- <button class="btn btn-primary" v-on:click="">权限配置</button> -->
									<button class="btn btn-success" v-on:click="toUserView(item.username)">详细信息</button>
									<span style="margin-left: 8px;"> | </span>
									<button class="btn btn-danger" v-on:click="toDeleteUser(item.username)">删除</button>
								</div>
							</div>
						</div>

					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-lg-4">
			<div class="Panel PanelRed">
				<div class="PanelTitle">用户机制须知</div>
				<div class="PanelBody">
					<p class="color-high-red">以#符合开头的均是最高权限账号,请慎重创建</p>
					<p>我们尽可能的保证管理员与普通用户的数据安全性，但管理员是可以一定程度管理普通用户。</p>
					<p>普通用户只可以在规定的服务器内操作。</p>
					<p>普通用户无法创建，删除服务器和编辑服务器启动时参数配置。</p>
					<p>普通用户无法查看具体内存值与CPU具体信息，保证主机的信息。</p>
				</div>
			</div>
		</div>
		<div class="col-lg-8">
			<transition name="slide-fade">
				<div class="Panel PanelGreen" v-if="createUser">
					<div class="PanelItem">创建普通/高级用户</div>
					<div class="PanelBody">
						<div class="row">
							<div class="col-sm-6">
								<p>用户名 [字母 数字 下划线] (6~18位)</p>
								<div class="input-group input-group-sm">
									<span class="input-group-addon"> 用户名 </span>
									<input type="text" class="form-control" v-model="username" placeholder="用户名 [字母 数字 下划线] (6~18位)">
								</div>
							</div>
							<div class="col-sm-6">
								<p>密码 [字母 数字 符号] (6~18位) </p>
								<div class="input-group input-group-sm">
									<span class="input-group-addon"> 密码 </span>
									<input type="text" class="form-control" v-model="password" placeholder="密码 [字母 数字 符号] (6~18位)">
								</div>
							</div>
						</div>
						<p>准许的服务器，输入服务器名字，分别以空格分割</p>
						<div class="input-group input-group-sm">
							<span class="input-group-addon"> 准许的服务器 </span>
							<input type="text" class="form-control" v-model="allowedServer" placeholder="列如: 服务器名字A 服务器名字B 服务器名字C">
						</div>
						<div class="row">
							<div class="col-lg-12">
								<p>当您的数据完善时，即可确认创建新的用户</p>
								<div class="Line"></div>
								<div class="" style="float: right;margin-top: 20px;">
									<button class="btn btn-primary" v-on:click="toRegisterUser()">创建新用户</button>
									<button class="btn btn-warning" v-on:click="createUser =!createUser">取消</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</transition>
		</div>
	</div>
</div>
<script>
	MI.rListener('onload', function () {
		VIEW_MODEL.newVue('UsersetList', {
			el: '#UsersetList',
			data: {
				createUser: false,
				username: '',
				password: '',
				allowedServer: ''
			},
			methods: {
				toRegisterUser: function () {
					var allwoedServers = this.allowedServer.trim().split(' ');
					if (!TOOLS.isStdText(this.username)) {
						TOOLS.pushMsgWindow("用户名不合法！请重新输入！");
						return;
					}
					if (this.password.length < 6 || this.password.length > 18) {
						TOOLS.pushMsgWindow("密码长度不正确！");
						return;
					}
					var obj = {
						username: this.username,
						password: this.password,
						allowedServer: allwoedServers
					};
					WS.sendMsg('userset/create', JSON.stringify(obj), function () {
						PAGE.refresh();
					});
				},

				toDeleteUser: function (itemUsername) {
					var obj = {
						username: itemUsername
					};
					var result = confirm('您真的打算删除这个这个用户吗?');
					if (!result) return;
					WS.sendMsg('userset/delete', JSON.stringify(obj), function () {
						PAGE.refresh();
					});

				},
				refresh: function () {
					PAGE.refresh();
					TOOLS.pushMsgWindow('刷新完毕√')
				},

				reloadUser: function () {
					//命令服务器重新刷新
					WS.sendMsg('userset/reload', '', function () {
						PAGE.refresh();
					});
				},

				toUserView: function (_username) {
					RES.redirectPage('./template/component/user.html', 'userset/view', _username);
				}
			}
		});
	});

	MI.rListener('onend', function () {});
</script>