<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(255, 255, 255, 0.3)" > <el-table :data="TableData" style="width: 100%;height:calc(100% - 45px)"> <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="240px"> <template slot-scope="scope"> <el-button type="text" size="small" @click="handleClick('update', scope.row)" v-has="'m9-1-2'" >修改用户</el-button > <template v-if="scope.row.userType !== 1"> <el-button type="text" size="small" @click="handleClick('delete', scope.row)" v-has="'m9-1-3'" >删除用户</el-button > </template> <el-button type="text" size="small" @click="handleClick('reset', scope.row)" v-has="'m9-1-4'" >重置密码</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: "", realName: "", //用户名称 userType: 0, //类型 mobile: "", //电话 orgId: undefined, //组织 roleId: undefined //角色 }, fieldList: [ { label: "登录名", value: "login", type: "input", required: true }, { label: "用户名称", value: "realName", type: "input", required: true }, { label: "电话", value: "mobile", type: "input", validator: checkPhone, required: true }, { 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; 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]; } } dialogInfo.visible = true; break; //重置密码 case "reset": this.$confirm("此操作会重置该用户密码为初始手机号, 是否继续?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }).then(res =>{ this.$http.post(this.nozzle.resetUserPwd,{data:{userId:data.id}}).then(res =>{ if(res.data.code === 1) { this.loadGridData(); } this.$message({ message: res.data.msg, type: res.data.code === 1 ? "success" : "error", showClose: true }); }).catch(e => { message(e); }); }); 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 = false; }) .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: "", 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>