<template> <div id="user"> <div id="UserTop"> <el-input placeholder="请输入用户名称" v-model="UserValue" clearable></el-input> <el-button type="primary" icon="el-icon-search" @click="loadGridData()" v-has="'Search'">搜索</el-button> <el-button type="primary" icon="el-icon-plus" @click="handleClick('AddUser')" v-has="'m9-1-1'">新增用户</el-button> </div> <div id="UserCentent" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" > <el-table :data="TableData" style="width: 100%;height:calc(100% - 45px)" stripe> <el-table-column prop="realName" label="用户名称"></el-table-column> <el-table-column prop="login" label="登录名"></el-table-column> <el-table-column prop="mobile" label="联系方式"></el-table-column> <el-table-column prop="userType" label="类型"> <template slot-scope="scope"> <span v-if="scope.row.userType==0" style="color:green">普通用户</span> <span v-else style="color: red">最高权限管理</span> </template> </el-table-column> <el-table-column label="操作" width="180px"> <template slot-scope="scope"> <el-button type="text" size="small" @click="handleClick('update', scope.row)" v-has="'m9-2-b3'" >修改用户</el-button> <el-button type="text" size="small" @click="handleClick('delete', scope.row)" v-has="'m9-2-b4'" >删除用户</el-button> </template> </el-table-column> </el-table> <el-pagination @size-change="ALSizeChange" @current-change="ALCurrentChange" :current-page="ALPage" :page-sizes="[10, 20, 50, 100]" :page-size="ALSize" layout="total, sizes, prev, pager, next, jumper" :total="ALDatagridDataLength" style="margin-top:10px;" ></el-pagination> </div> <!--弹窗--> <page-dialog :title="dialogInfo.title[dialogInfo.type]" :visible.sync="dialogInfo.visible" :width="dialogInfo.width" :bt-loading="dialogInfo.btLoading" :bt-list="dialogInfo.btList" @handleClick="handleClick" > <page-form :ref-obj.sync="formInfo.ref" :data="formInfo.data" :field-list="formInfo.fieldList" :rules="formInfo.rules" :label-width="formInfo.labelWidth" :list-type-info="listTypeInfo" @handleClick="handleClick" /> </page-dialog> </div> </template> <script> import { mapGetters } from 'vuex' import { message } from "./../../util/item"; export default { name: "user", data() { // 验证电话 let checkPhone = (rule, value, callback) => { let check = this.$validate({label:'电话',value,rules:['moblie']}) if (!check.result) { callback(new Error(check.message)) } else { callback() } } return { UserValue: "", loading: false, TableData: [], //表格数据 ALPage: 1, //分页默认显示页 ALDatagridDataLength: 0, //分页上显示的数据总条数 ALSize: 10, //分页上显示的每页的条数 //弹窗相关 dialogInfo:{ title: { update: '修改用户', AddUser: '添加用户' }, visible: false, btLoading: false, width: '500px', type: '', btList: [ {label:'关闭',type:'',icon:'',event:'close',show:true}, {label:'保存',type:'primary',icon:'',event:'save',show:true,loading:true} ] }, //表单相关 formInfo:{ ref: null, data: { id: undefined, login: '', pwd: '', realName: '', //用户名称 userType: 0, //类型 mobile: '', //电话 orgId: undefined, //组织 roleId: undefined, //角色 }, fieldList: [ {label:'登录名',value:'login',type:'input',required:true}, {label:'登录密码',value:'pwd',type:'password'}, {label:'用户名称',value:'realName',type:'input',required:true}, {label:'电话',value:'mobile',type:'input',validator:checkPhone}, {label:'用户类型',value:'userType',type:'select',list:'userType',required:true,disabled:true}, {label:'所属组织',value:'orgId',type:'treeselect',list:'deptTree',required:true}, {label:'所属角色',value:'roleId',type:'select',list:'roleList',required:true} ], rules: {}, labelWidth: '100px' }, //列表相关 listTypeInfo: { deptTree: [], roleTree: [], userType: [ {key: '普通用户',value:0}, {key: '超级管理员',value:1}, ], roleList: [], } }; }, computed: { ...mapGetters([ 'allDept','allRole' ]) }, watch: { 'dialogInfo.visible'(val){ let formInfo = this.formInfo; if (!val) { if (formInfo.ref) { formInfo.ref.resetFields(); } this.resetForm(); this.dialogInfo.btLoading = false; } } }, methods: { // 初始化验证 initRules(){ let formInfo = this.formInfo; formInfo.rules = this.$initRules(formInfo.fieldList); }, // 初始化角色 initRoles() { this.$http.post(this.nozzle.roleGetRoles, { current: 0, size: 0, data: { searchStr: "", type: undefined } }).then(res => { if(res.data.code === 1) { this.listTypeInfo.roleList = res.data.data.map(item => { return{ key: item.roleName, value: item.roleId } }) } }) }, //点击事件 handleClick(event, data) { const formInfo = this.formInfo; const dialogInfo = this.dialogInfo; switch(event){ //添加用户 case 'AddUser': dialogInfo.type = event; dialogInfo.visible = true; this.formInfo.fieldList.forEach(item =>{ if(item.value === "pwd") { item.required = true; } }) this.initRules(); setTimeout(() => { this.formInfo.ref.clearValidate(); }, 0); break //编辑用户 case 'update': dialogInfo.type = event; for (let key in data) { if (key in formInfo.data) { formInfo.data[key] = data[key]; } } this.formInfo.fieldList.forEach(item =>{ if(item.value === "pwd") { item.required = false; } }) this.initRules(); dialogInfo.visible = true; break //删除用户 case 'delete': this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }).then(res =>{ this.$http.post(this.nozzle.deleteSysuser,[data.id]).then(res =>{ if(res.data.code === 1 || res.data.code === 200) { this.loadGridData(); } this.$message({ message: res.data.msg, type: res.data.code === 1 ? 'success' : 'error', showClose: true, }) }).catch(e =>{ message(e); }) }).catch(() =>{ this.$message({ type: "info", message: "已取消删除" }); }) break //保存 case 'save': this.formInfo.ref.validate(valid => { if(valid){ let api; let params = this.formInfo.data; let type = this.dialogInfo.type; if (type === 'AddUser') { api = this.nozzle.addSysuser; } else if (type === 'update') { api = this.nozzle.updateSysuser; } else { return } dialogInfo.btLoading = true; this.$http.post(api,params).then(res =>{ if(res.data.code === 1 || res.data.code === 200) { dialogInfo.visible = false; this.loadGridData(); } this.$message({ message: res.data.msg, type: res.data.code === 1 ? 'success' : 'error', showClose: true, }) dialogInfo.btLoading = true; }).catch(e =>{ dialogInfo.btLoading = false; }) }else{ return false; } }) break //关闭 case 'close': dialogInfo.visible = false; break } }, ALSizeChange(val) { // 改变每页的条数 this.ALSize = val; this.loadGridData(); }, ALCurrentChange(val) { //改变页数 this.ALPage = val; this.loadGridData(); }, // 获取所有的用户 loadGridData() { this.loading = true; this.TableData = []; this.$http .post(this.nozzle.selectSysuser, { pageNo: this.ALPage, pageSize: this.ALSize, condition: this.UserValue //模糊搜索 }) .then(response => { this.loading = false; if (response.data.code === 1) { this.TableData = response.data.data; this.ALDatagridDataLength = response.data.total; } else { message(response); } }) .catch(response => { this.loading = false; message(response); }); }, //初始化表单 resetForm() { this.formInfo.data = { id: undefined, login: '', pwd: '', realName: '', //用户名称 userType: 0, //类型 mobile: '', //电话 orgId: undefined, //组织 roleId: undefined, //角色 } } }, mounted() { this.loadGridData(); this.initRules(); this.initRoles(); this.listTypeInfo.deptTree = this.allDept; this.listTypeInfo.roleTree = this.allRole; } }; </script> <style lang="scss" scoped> #user { width: 100%; height: 100%; } /* 顶部搜索 */ #UserTop { width: 100%; height: 60px; line-height: 60px; text-align: left; } #UserTop .el-input { width: 250px; margin: 0 10px; } /* 表格 */ #UserCentent { width: 100%; height: calc(100% - 70px); margin-top: 10px; background: rgba(53, 53, 53, 0.5); } </style>