sooka_bi_vue/src/view/frame/User.vue

<template>
  	<div class="wrapper-content">
		  <div class="ibox">
			  <div class="ibox-title">
				  用户管理
			  </div>
			  <div class="ibox-content">
				<div class="btn-group optbtncls" role="group">
					<button type="button" class="btn btn-outline btn-default" title="新增" @click="addUser(false)">
						<i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
					</button>
					<button type="button" class="btn btn-outline btn-default" title="修改" @click="addUser(true)">
						<i class="glyphicon glyphicon-edit" aria-hidden="true"></i>
					</button>
					<button type="button" class="btn btn-outline btn-default" title="删除" @click="delUser()">
						<i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
					</button>
				</div>
				 <el-table :data="tableData" @row-click="selectme" border style="width: 100%" header-row-class-name="tableHeadbg">
					<!--
					<el-table-column type="selection" width="45"></el-table-column>
					-->
					<el-table-column label="" width="45">
						<template slot-scope="scope">
							<el-radio v-model="checked" name="myselect" :label="scope.row.userId">&nbsp;</el-radio>
						</template>
					</el-table-column>
					<el-table-column align="center" prop="userId" label="标识"></el-table-column>
					<el-table-column align="center" prop="staffId" label="工号"></el-table-column>
					<el-table-column align="center" prop="loginName" label="用户名"></el-table-column>
					<el-table-column align="center" prop="state" :formatter="fmtstate" label="状态"></el-table-column>
					<el-table-column align="center" prop="logCnt" label="登陆次数"></el-table-column>
					<el-table-column align="center" prop="loginTime" label="登录时间"></el-table-column>
					<el-table-column align="center" prop="userId" label="操作">
						<template slot-scope="scope">
								<a class="btn btn-primary btn-xs" @click="userRole(scope.userId)"> 授权角色 </a>
								<a class="btn btn-primary btn-xs" @click="userMenu(scope.userId)"> 授权菜单 </a>
						</template>
					</el-table-column>
				</el-table>
			  </div>
		  </div>
		  	<el-dialog :title="dialogTitle" :visible.sync="addUserDailog">
			  	<el-form :model="user" :rules="rules" ref="userForm">
					  <template v-if="isupdate">
						  <el-form-item label="用户标识" label-width="100px" prop="userId">
							<el-input readOnly="true" v-model="user.userId"></el-input>
						</el-form-item>
					  </template>
				    <el-form-item label="用户工号" label-width="100px" prop="staffId">
				     	<el-input :readonly="isupdate" v-model="user.staffId"  placeholder="登录系统使用"></el-input>
				    </el-form-item>
					<template v-if="!isupdate">
					<el-form-item label="登录密码" label-width="100px" prop="password">
				     	<el-input type="password" v-model="user.password"  :show-password="true" ></el-input>
				    </el-form-item>
					<el-form-item label="重复密码" label-width="100px" prop="password2">
				     	<el-input type="password" v-model="user.password2" :show-password="true"  ></el-input>
				    </el-form-item>
					</template>
					<el-form-item label="用户名称" label-width="100px" prop="loginName">
				     	<el-input v-model="user.loginName"  ></el-input>
				    </el-form-item>
					
				    <el-form-item label="用户性别" label-width="100px" prop="gender">
						<el-select v-model="user.gender" placeholder="请选择">
							<el-option
							v-for="item in opts.sexs"
							:key="item.value"
							:label="item.label"
							:value="item.value">
							</el-option>
						</el-select>				    
					</el-form-item>
					<el-form-item label="账号状态" label-width="100px" prop="state">
				     	<el-select v-model="user.state" placeholder="请选择">
							<el-option
							v-for="item in opts.status"
							:key="item.value"
							:label="item.label"
							:value="item.value">
							</el-option>
						</el-select>
				    </el-form-item>
					<el-form-item label="手机号码" label-width="100px">
				     	<el-input v-model="user.mobilePhone"  ></el-input>
				    </el-form-item>
					<el-form-item label="办公电话" label-width="100px">
				     	<el-input v-model="user.officeTel"  ></el-input>
				    </el-form-item>
					<el-form-item label="电子邮件" label-width="100px">
				     	<el-input v-model="user.email"  ></el-input>
				    </el-form-item>
			  	</el-form>
			  <div slot="footer" class="dialog-footer">
			    <el-button type="primary" @click="saveUser()">确 定</el-button>
				<el-button @click="addUserDailog = false">取 消</el-button>
			  </div>
			</el-dialog>
  	</div>
</template>

<script>
	import {baseUrl, ajax} from '@/common/biConfig'
	import $ from 'jquery'

	export default {
	    data(){
			return {
				tableData: [],
				addUserDailog:false,
				dialogTitle:"",
				checked:null,
				isupdate: false,
				user:{
					userId:null,
					staffId:null,
					password:'',
					password2:'',
					loginName:'',
					gender:null,
					state:null,
					mobilePhone:'',
					officeTel:'',
					email:''
				},
				rules:{
					staffId:[
						{ required: true, message: '必填', trigger: 'blur' }
					],
					password:[
						{ required: true, message: '必填', trigger: 'blur' },
						{ min: 6, max: 18, message: '密码长度6到18位', trigger: 'blur' }
					],
					password2:[
						{ required: true, message: '必填', trigger: 'blur' },
						{ min: 6, max: 18, message: '密码长度6到18位', trigger: 'blur' }
					],
					loginName:[
						{ required: true, message: '必填', trigger: 'blur' }
					],
					gender:[
						{ required: true, message: '必填', trigger: 'blur' }
					],
					state:[
						{ required: true, message: '必填', trigger: 'blur' }
					]
				},
				opts:{
					sexs:[{
						label:"男",
						value:"男"
					},{
						label:"女",
						value:"女"
					}],
					status:[{
						label:"启用",
						value:"1"
					},{
						label:"停用",
						value:"0"
					}]
				}
				
			}
		},
		mounted(){
			this.loadDatas();
		},
		computed: {
		},
		methods: {
			loadDatas:function(){
				let ts = this;
				ajax({
					type:"GET",
					data:{},
					url:"frame/user/list.action", 
					success:function(resp){
						ts.tableData = resp.rows;
					}
				}, ts);
			},
			fmtstate:function(row, column, cellValue, index){
				return cellValue === 1 ?"启用":"停用";
			},
			addUser : function(isupdate){
				let ts = this;
				if(isupdate){
					if(!ts.checked){
						ts.$notify.error({
										title: '未勾选数据',
										offset: 50
									});
						return false;
					}
					this.addUserDailog = true;	
					this.dialogTitle = "修改用户";
					//回写值
					ajax({
						url:"frame/user/get.action",
						data:{userId:ts.checked},
						dataType:"json",
						success:function(dt){
							dt = dt.rows;
							for(let v in ts.user){
								ts.user[v] = dt[v] + "";
							}
						}
					}, ts);
				}else{
					this.addUserDailog = true;	
					this.dialogTitle = "新增用户";
					//清空值
					for(let v in ts.user){
						ts.user[v] = null;
					}
				}
				this.isupdate = isupdate;
			},
			selectme:function(a, b){
				this.checked = a.userId;
			},
			saveUser:function(){
				let ts = this;
				this.$refs['userForm'].validate((valid) => {
					if (valid) {
						if(ts.user.password != ts.user.password2){
							ts.$notify.error({
										title: '两次密码不一致',
										offset: 50
									});
							return false;
						}
						ajax({
							type:"POST",
							data: ts.user,
							postJSON:false,
							url:ts.isupdate?"frame/user/update.action":"frame/user/save.action",
							success:function(resp){
								ts.$notify.success({
										title: ts.isupdate?"用户修改成功":'用户创建成功',
										offset: 50
									});
								ts.addUserDailog = false;
								ts.loadDatas();
							}
						}, ts);
					} else {
						//console.log('error submit!!');
						return false;
					}
				});
			},
			delUser:function(){
				let ts = this;
				if(!this.checked){
					ts.$notify.error({
						title: '请勾选数据',
						offset: 50
					});
					return;
				}
				if(confirm("是否确认删除？")){
					ajax({
						type:"GET",
						data: {userId: ts.checked},
						postJSON:false,
						url:"frame/user/delete.action",
						success:function(resp){
							ts.$notify.success({
									title: '用户删除成功',
									offset: 50
								});
							ts.loadDatas();
						}
					}, this);
				}
			}
		},
		watch: {
		}
	}
</script>

<style lang="less" scoped>
	@import '../../style/mixin';
	@import '../../style/common';
</style>