...

src/router/index.js

    component: Layout,
    redirect: '/example/table',
    name: 'Example',
    meta: { title: 'Example', icon: 'el-icon-s-help' },
    meta: { title: '系统管理', icon: 'el-icon-s-help' },
    children: [
      {
        path: 'table',
        name: 'Tree',
        component: () => import('@/views/tree/index'),
        meta: { title: 'Tree', icon: 'tree' }
      },
      {
        path: 'user',
        name: 'User',
        component: () => import('@/views/user/index'),
        meta: { title: '用户管理', icon: 'form' }
      }
    ]
  },
      }
    ]
  },
  {
    path: '/user',
    component: Layout,
    children: [
      {
        path: 'user',
        name: 'User',
        component: () => import('@/views/user/user.vue'),
        meta: { title: 'User', icon: 'form' }
      }
    ]
  },
  // {
  //   path: '/user',
  //   component: Layout,
  //   children: [
  //     {
  //       path: 'user',
  //       name: 'User',
  //       component: () => import('@/views/user/index'),
  //       meta: { title: '用户管理', icon: 'form' }
  //     }
  //   ]
  // },
  {
    path: '/nested',

src/utils/validate.js

  const valid_map = ['admin', 'editor']
  return valid_map.indexOf(str.trim()) >= 0
}
/**
 * 邮箱
 * @param {*} s
 */
 export function isEmail (s) {
  return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)
}
/**
 * 手机号码
 * @param {*} s
 */
 export function isMobile (s) {
  return /^1[0-9]{10}$/.test(s)
}
/**
 * 电话号码
 * @param {*} s
 */
export function isPhone (s) {
  return /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(s)
}
/**
 * URL地址
 * @param {*} s
 */
export function isURL (s) {
  return /^http[s]?:\/\/.*/.test(s)
}

src/views/login/index.vue

    //验证码
    getCaptcha() {
      let uuid = Math.random();
      this.vercodePath = `/sys/Login/captcha?${uuid}`;
      this.vercodePath = `http://192.168.0.2:9528/sys/Login/captcha?${uuid}`;
    },
    showPwd() {

src/views/user/user.vue

        align="center"
        label="用户名">
      </el-table-column>
      <el-table-column
        prop="rolename"
        header-align="center"
        align="center"
        label="角色">
      </el-table-column>
      <el-table-column
        prop="nickname"
        header-align="center"
        align="center"
        label="昵称">
      </el-table-column>
      <el-table-column
        prop="email"
        header-align="center"
        label="邮箱">
      </el-table-column>
      <el-table-column
        prop="rolename"
        prop="per_time"
        header-align="center"
        align="center"
        width="180"
        label="最后登录时间">
      </el-table-column>
      <el-table-column
        prop="per_ip"
        header-align="center"
        align="center"
        label="用户组">
        width="180"
        label="最后登录IP">
      </el-table-column>
      <el-table-column
        prop="status"
        width="150"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.userId)">修改</el-button>
          <el-button type="text" size="small" @click="deleteHandle(scope.row.userId)">删除</el-button>
          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.userid)">修改</el-button>
          <el-button type="text" size="small" @click="deleteHandle(scope.row.userid)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        console.log(1);
        // console.log(1);
        this.$http({
          url: this.$http.adornUrl('/sys/user/index'),
          method: 'get',
            'username': this.dataForm.userName
          })
        }).then(({data}) => {
         console.log(data);
        //  console.log(data);
          if (data && data.code === 0) {
            this.dataList = data.data.data
            this.totalPage = data.data.total
      },
      // 删除
      deleteHandle (id) {
        var userIds = id ? [id] : this.dataListSelections.map(item => {
          return item.userId
        var userids = id ? [id] : this.dataListSelections.map(item => {
          return item.userid
        })
        this.$confirm(`确定对[id=${userIds.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
        this.$confirm(`确定对[id=${userids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
          this.$http({
            url: this.$http.adornUrl('/sys/user/delete'),
            method: 'post',
            data: this.$http.adornData(userIds, false)
            data: this.$http.adornData(userids, false)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({

src/views/user/user-add-or-update.vue

<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :title="!dataForm.id ? '新增管理员' : '修改管理员'"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
      @keyup.enter.native="dataFormSubmit()"
      label-width="80px"
    >
      <el-form-item label="用户名" prop="userName">
        <el-input v-model="dataForm.userName" placeholder="登录帐号"></el-input>
      <el-form-item label="用户名" prop="username">
        <el-input v-model="dataForm.username" placeholder="登录帐号"></el-input>
      </el-form-item>
      <el-form-item
        label="密码"
          placeholder="确认密码"
        ></el-input>
      </el-form-item>
      <el-form-item label="昵称" prop="nickname">
        <el-input v-model="dataForm.nickname" placeholder="昵称"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="truename">
        <el-input v-model="dataForm.truename" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="dataForm.email" placeholder="邮箱"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="dataForm.mobile" placeholder="手机号"></el-input>
      </el-form-item>
      <!-- <el-form-item label="部门" prop="departmentList">
      <el-form-item label="部门" prop="departmentname">
        <el-select
          v-model="dataForm.departmentList"
          placeholder="部门"
          allow-create
          filterable
          @change="getClientName"
          v-model="dataForm.departmentname"
          size="medium"
          placeholder="请选择部门"
          @change="changedepartmentName"
        >
          <el-tree
          <el-option
            v-for="item in departmentList"
            :label="item.departmentName"
            :value="item.departmentId"
            :key="item.departmentId"
          ></el-tree>
            :key="item.departmentid"
            :value="item.departmentid"
            :label="item.departmentname"
          >
          </el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="部门" prop="departmentName">
        <el-popover
          ref="menuListPopover"
          placement="bottom-start"
          trigger="click">
          <el-tree
            :data="departmentList"
            :props="menuListTreeProps"
            node-key="departmentId"
            ref="departmentListTree"
            @current-change="departmentListTreeCurrentChangeHandle"
            :default-expand-all="true"
            :highlight-current="true"
            :expand-on-click-node="true">
          </el-tree>
        </el-popover>
        <el-input v-model="dataForm.departmentName" v-popover:menuListPopover :readonly="true" placeholder="点击选择部门" class="menu-list__input"></el-input>
      </el-form-item>
      <el-form-item label="角色" size="mini" prop="roleIdList">
        <el-checkbox-group v-model="dataForm.roleIdList">
          <el-checkbox
            v-for="role in roleList"
            :key="role.roleId"
            :label="role.roleId"
            >{{ role.roleName }}</el-checkbox
      <el-form-item label="角色" size="mini" prop="roleList">
        <el-select
          v-model="dataForm.rolename"
          size="medium"
          placeholder="请选择角色"
          @change="changeRole"
        >
          <el-option
            v-for="item in roleList"
            :key="item.roleid"
            :value="item.roleid"
            :label="item.name"
          >
        </el-checkbox-group>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态" size="mini" prop="status">
        <el-radio-group v-model="dataForm.status">
<script>
import { isEmail, isMobile } from "@/utils/validate";
import { treeDataTranslate } from '@/utils'
import { treeDataTranslate } from "@/utils";
export default {
  data() {
    var validatePassword = (rule, value, callback) => {
        callback();
      }
    };
    var validateMobile = (rule, value, callback) => {
      if (!isMobile(value)) {
        callback(new Error("手机号格式错误"));
      } else {
        callback();
      }
    };
    // var validateMobile = (rule, value, callback) => {
    //   if (!isMobile(value)) {
    //     callback(new Error("手机号格式错误"));
    //   } else {
    //     callback();
    //   }
    // };
    return {
      visible: false,
      visible: false,//加载控制样式
      dialogImageUrl: "",
      roleList: [],
      roleList: [],//角色列表
      dataForm: {
        id: 0,
        userName: "",
        password: "",
        comfirmPassword: "",
        salt: "",
        email: "",
        mobile: "",
        roleIdList: [],
        status: 1,
        avatar: "",
        departmentId:"",
        departmentName:"",
        username: "",//用户名
        userid: "",//用户id
        nickname: "",//昵称
        rolename:"",//角色名
        roleid:"",//角色id
        truename: "",//姓名
        password: "",//密码
        comfirmPassword: "",//二次确认密码
        // salt: "",
        email: "",//邮箱
        // mobile: "",
        // roleIdList: [],//角色
        status: 1,//状态
        avatar: "",//头像
        departmentid: "",//部门id
        departmentname: "",//部门名称
        remark: "",//备注
      },
      departmentList: [],
        menuListTreeProps: {
          label: 'departmentName',
          children: 'children'
        },
      departmentList: [],//部门列表
      // menuListTreeProps: {
      //   label: "departmentName",
      //   children: "children",
      // },
      dataRule: {
        userName: [
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
        ],
        password: [{ validator: validatePassword, trigger: "blur" }],
          { validator: validateComfirmPassword, trigger: "blur" },
        ],
        email: [
          { required: true, message: "邮箱不能为空", trigger: "blur" },
          // { required: true, message: "邮箱不能为空", trigger: "blur" },
          { validator: validateEmail, trigger: "blur" },
        ],
        mobile: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
          { validator: validateMobile, trigger: "blur" },
        ],
        // mobile: [
        //   { required: true, message: "手机号不能为空", trigger: "blur" },
        //   { validator: validateMobile, trigger: "blur" },
        // ],
      },
    };
  },
  methods: {
    // 上传成功
    handlePictureCardPreview(response, file) {
      console.log(response);
      // console.log(response);
      this.dataForm.avatar = response.url;
    },
    getClientName(e) {
      console.log(e);
      let obj = {};
      obj = this.departmentList.find((item) => {
        return item.departmentId === e;
      });
      console.log(obj);
      console.log(obj.name);
      this.dataForm.departmentId = e;
    },
   
    init(id) {
      this.dataForm.id = id || 0;
      this.$http({
        url: this.$http.adornUrl("/sys/user/index"),
        url: this.$http.adornUrl("/sys/Department/index"),
        method: "get",
        params: this.$http.adornParams(),
      }).then(({ data }) => {
          this.departmentList = treeDataTranslate(data.list, 'departmentId')
        console.log(data);
          this.departmentList = data.data
        console.log(this.departmentList);
          
      }).then(() => {
          this.visible = true
          this.$nextTick(() => {
          })
        })
      this.$http({
        url: this.$http.adornUrl("/sys/user/index"),
        url: this.$http.adornUrl("/sys/Role/index"),
        method: "get",
        params: this.$http.adornParams(),
      })
        .then(({ data }) => {
          this.roleList = data && data.code === 0 ? data.list : [];
          // console.log(data);
          this.roleList = data && data.code === 0 ? data.data : [];
          // console.log(this.roleList);
        })
        .then(() => {
          this.visible = true;
          });
        })
        .then(() => {
          if (this.dataForm.id) {
          // if (this.dataForm.id) {
            this.$http({
              url: this.$http.adornUrl(`/sys/user/info/${this.dataForm.id}`),
              url: this.$http.adornUrl(`/sys/user/info/id/${this.dataForm.id}`),
              method: "get",
              params: this.$http.adornParams(),
            }).then(({ data }) => {
              // console.log(data);
              if (data && data.code === 0) {
                this.dataForm.userName = data.user.username;
                this.dataForm.salt = data.user.salt;
                this.dataForm.email = data.user.email;
                this.dataForm.mobile = data.user.mobile;
                this.dataForm.roleIdList = data.user.roleIdList;
                this.dataForm.status = data.user.status;
                this.dataForm.avatar = data.user.avatar;
                this.dataForm.departmentId = data.user.departmentId;
                this.dataForm.departmentName = data.user.departmentName;
                this.menuListTreeSetCurrentNode()
                this.visible = true;
                this.dataForm.username = data.data.username;
                this.dataForm.nickname = data.data.nickname;
                this.dataForm.truename = data.data.truename;
                this.dataForm.rolename = data.data.rolename;
                this.dataForm.departmentid = data.data.departmentid;
                this.dataForm.userid = data.data.userid;
                this.dataForm.roleid = data.data.roleid;
                // this.dataForm.salt = data.data.salt;
                this.dataForm.email = data.data.email;
                // this.dataForm.mobile = data.data.mobile;
                // this.dataForm.roleIdList = data.data.roleIdList;
                this.dataForm.status = data.data.status;
                this.dataForm.avatar = data.data.avatar;
                // this.dataForm.departmentId = data.data.departmentId;
                this.dataForm.departmentname = data.data.departmentname;
                // this.menuListTreeSetCurrentNode();
              }
            });
          }else{
            this.menuListTreeSetCurrentNode()
          }
          // } else {
          //   this.menuListTreeSetCurrentNode();
          // }
        });
        // 头像 
      // this.dialogImageUrl = this.$http.adornUrl(
      //   `/sys/oss/uploadimg?token=${this.$cookie.get("token")}`
      // );
      // console.log(this.dialogImageUrl);
    },
    // 菜单树选中
      departmentListTreeCurrentChangeHandle (data, node) {
        this.dataForm.departmentId = data.departmentId
        this.dataForm.departmentName = data.departmentName
      },
      // 菜单树设置当前选中节点
      menuListTreeSetCurrentNode () {
        this.$refs.departmentListTree.setCurrentKey(this.dataForm.departmentId)
        this.dataForm.departmentName = (this.$refs.departmentListTree.getCurrentNode() || {})['departmentName']
      },
    //选择角色
    changeRole(e) {
      // console.log(e);
      // this.dataForm.roleid = e
      let obj = {};
      obj = this.roleList.find((item) => {
        return item.roleid === e;
      });
      // console.log(obj);
      // console.log(obj.name);
      this.dataForm.roleid = e;
      this.dataForm.rolename = obj.name;
      // console.log(this.dataForm.rolename);
      // console.log(this.dataForm.roleid);
    },
    //选择部门
     changedepartmentName(e) {
      // console.log(e);
      let obj = {};
      obj = this.departmentList.find((item) => {
        return item.departmentid === e;
      });
      // console.log(this.departmentList);
      // console.log(obj);
      // console.log(obj.name);
      this.dataForm.departmentid = e;
      this.dataForm.departmentname = obj.departmentname;
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(
              `/sys/user/${!this.dataForm.id ? "save" : "update"}`
              `/sys/User/save`
            ),
            method: "post",
            data: this.$http.adornData({
              userId: this.dataForm.id || undefined,
              username: this.dataForm.userName,
            data: {
              userid: this.dataForm.userid || 0,
              username: this.dataForm.username,
              nickname: this.dataForm.nickname,
              truename: this.dataForm.truename,
              roleid: this.dataForm.roleid,
              password: this.dataForm.password,
              salt: this.dataForm.salt,
              repassword: this.dataForm.comfirmPassword,
              email: this.dataForm.email,
              mobile: this.dataForm.mobile,
              status: this.dataForm.status,
              roleIdList: this.dataForm.roleIdList,
              departmentId: this.dataForm.departmentId,
              departmentid: this.dataForm.departmentid,
              avatar: this.dataForm.avatar,
            }),
              remark: this.dataForm.remark,
            },
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({