用户管理

src/api/system/user.js

@@ -9,32 +9,49 @@
 import request from '@/utils/request';
 // 用户管理 aos/auth/api/user/list
 export function getUserList(data) {
-    return request({
+  return request({
-        url: '/aos/auth/api/user/list',
+    url: '/aos/auth/api/user/list',
-        method: 'post',
+    method: 'post',
-        data
+    data
-    });
+  });
 }
 // 新增用户 aos/auth/api/user/add
 export function addUser(data) {
-    return request({
+  return request({
-        url: '/aos/auth/api/user/add',
+    url: '/aos/auth/api/user/add',
-        method: 'post',
+    method: 'post',
-        data
+    data
-    });
+  });
 }
 // 更新用户 aos/auth/api/user/update
 export function updateUser(data) {
-    return request({
+  return request({
-        url: '/aos/auth/api/user/update',
+    url: '/aos/auth/api/user/update',
-        method: 'put',
+    method: 'put',
-        data
+    data
-    });
+  });
 }
 // 删除 aos/auth/api/user/delete
-export function deleteUser(id) {
+export function deleteUser(data) {
-    return request({
+  return request({
-      url: `/aos/auth/api/user/delete`,
+    url: `/aos/auth/api/user/delete`,
-      method: 'delete'
+    method: 'delete',
-    })
+    data
-  }
+  });
+}
+// 重置密码 aos/auth/api/user/restPassword
+export function restPassword(data) {
+  return request({
+    url: '/aos/auth/api/user/restPassword',
+    method: 'post',
+    data
+  });
+}
+// 用户管理-角色列表 aos/auth/api/role/role/info/list
+export function selectRoleList() {
+  return request({
+    url: '/aos/auth/api/role/role/info/list',
+    method: 'get',
+  });
+}
+

src/layout/index.vue

@@ -8,26 +8,20 @@
         <tags-view v-if="needTagsView" />
       </div>
       <app-main />
-      <right-panel v-if="showSettings">
-        <settings />
-      </right-panel>
     </div>
   </div>
 </template>
 
 <script>
-import RightPanel from '@/components/RightPanel'
+import { AppMain, Navbar, Sidebar, TagsView } from './components';
-import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
+import ResizeMixin from './mixin/ResizeHandler';
-import ResizeMixin from './mixin/ResizeHandler'
+import { mapState } from 'vuex';
-import { mapState } from 'vuex'
 
 export default {
   name: 'Layout',
   components: {
     AppMain,
     Navbar,
-    RightPanel,
-    Settings,
     Sidebar,
     TagsView
   },
@@ -36,7 +30,6 @@ export default {
     ...mapState({
       sidebar: state => state.app.sidebar,
       device: state => state.app.device,
-      showSettings: state => state.settings.showSettings,
       needTagsView: state => state.settings.tagsView,
       fixedHeader: state => state.settings.fixedHeader
     }),
@@ -46,15 +39,15 @@ export default {
         openSidebar: this.sidebar.opened,
         withoutAnimation: this.sidebar.withoutAnimation,
         mobile: this.device === 'mobile'
-      }
+      };
     }
   },
   methods: {
     handleClickOutside() {
-      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
+      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false });
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>

src/main.js

@@ -1,6 +1,6 @@
 /*
- * @Descripttion: 
+ * @Descripttion:
- * @version: 
+ * @version:
  * @Author: zgj
  * @Date: 2022-11-19 09:11:29
  * @LastEditors: your name
@@ -14,8 +14,6 @@ import 'normalize.css/normalize.css'; // a modern alternative to CSS resets
 
 import Element from 'element-ui';
 import './styles/element-variables.scss';
-import enLang from 'element-ui/lib/locale/lang/en';// 如果使用中文语言包请默认支持，无需额外引入，请删除该依赖
-
 import '@/styles/index.scss'; // global css
 
 import App from './App';
@@ -28,9 +26,9 @@ import './utils/error-log'; // error log
 // 分页组件
 import Pagination from '@/components/Pagination';
 // 自定义表格工具组件
-import RightToolbar from "@/components/RightToolbar"
+import RightToolbar from '@/components/RightToolbar';
 import * as filters from './filters'; // global filters
-import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from "@/utils/manager";
+import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from '@/utils/manager';
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api
@@ -55,7 +53,6 @@ Vue.prototype.selectDictLabels = selectDictLabels;
 Vue.prototype.handleTree = handleTree;
 Vue.use(Element, {
   size: Cookies.get('size') || 'medium', // set element-ui default size
-  locale: enLang // 如果使用中文，无需设置，请删除
 });
 
 // register global utility filters

src/styles/index.scss

@@ -189,3 +189,7 @@ aside {
 .multiselect--active {
   z-index: 1000 !important;
 }
+.pagination-container .el-pagination {
+	right: 0;
+	position: absolute;
+}

src/views/system/user/index.vue

@@ -1,22 +1,32 @@
 <template>
   <div class="app-container">
     <el-form
-      :model="queryParams"
+      v-show="showSearch"
       ref="queryForm"
+      :model="queryParams"
       size="small"
       :inline="true"
-      v-show="showSearch"
       label-width="68px"
     >
-      <el-form-item label="用户名称" prop="name">
+      <el-form-item label="用户账号" prop="account">
         <el-input
-          v-model="queryParams.name"
+          v-model="queryParams.account"
+          placeholder="请输入用户账号"
+          clearable
+          style="width: 240px"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="用户名称" prop="userName">
+        <el-input
+          v-model="queryParams.userName"
           placeholder="请输入用户名称"
           clearable
           style="width: 240px"
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
+
       <el-form-item label="手机号码" prop="phone">
         <el-input
           v-model="queryParams.phone"
@@ -27,12 +37,7 @@
         />
       </el-form-item>
       <el-form-item label="状态" prop="state">
-        <el-select
+        <el-select v-model="queryParams.state" placeholder="用户状态" clearable style="width: 240px">
-          v-model="queryParams.state"
-          placeholder="用户状态"
-          clearable
-          style="width: 240px"
-        >
           <el-option
             v-for="dict in statusOpt"
             :key="dict.value"
@@ -51,31 +56,24 @@
           start-placeholder="开始日期"
           end-placeholder="结束日期"
         ></el-date-picker>
-      </el-form-item> -->
+      </el-form-item>-->
       <el-form-item>
-        <el-button
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-          type="primary"
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-          icon="el-icon-search"
-          size="mini"
-          @click="handleQuery"
-          >搜索</el-button
-        >
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
-          >重置</el-button
-        >
       </el-form-item>
     </el-form>
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
         <el-button
-          type="primary"
+          type="warning"
           plain
-          icon="el-icon-plus"
+          icon="el-icon-key"
           size="mini"
-          @click="handleAdd"
+          :disabled="multiple"
-          >新增</el-button
+          @click="handleInitPassword"
-        >
+        >重置密码</el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -85,69 +83,46 @@
           size="mini"
           :disabled="multiple"
           @click="handleDelete"
-          >删除</el-button
+        >删除</el-button>
-        >
       </el-col>
       <right-toolbar
         style="text-align: right; float: right"
-        :showSearch.sync="showSearch"
+        :show-search.sync="showSearch"
         @queryTable="getList"
       ></right-toolbar>
     </el-row>
 
-    <el-table
+    <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
-      v-loading="loading"
-      :data="userList"
-      @selection-change="handleSelectionChange"
-    >
       <el-table-column type="selection" width="50" align="center" />
+      <el-table-column key="account" label="用户账户" align="account" prop="account" />
       <el-table-column
-        label="用户账户"
+        key="userName"
-        align="account"
-        key="account"
-        prop="account"
-      />
-      <el-table-column
         label="用户名称"
         align="center"
-        key="name"
+        prop="userName"
-        prop="name"
         :show-overflow-tooltip="true"
       />
-      <el-table-column
+      <el-table-column key="phone" label="手机号码" align="center" prop="phone" />
-        label="手机号码"
+      <el-table-column key="email" label="邮箱" align="center" prop="email" width="280" />
-        align="center"
+      <el-table-column label="创建时间" align="center" prop="createdAt">
-        key="phone"
+        <template slot-scope="scope">
-        prop="phone"
+          <span>{{ scope.row.createdAt }}</span>
-      />
+        </template>
-      <el-table-column
+      </el-table-column>
-        label="邮箱"
+      <el-table-column label="更新时间" align="center" prop="updatedAt">
-        align="center"
+        <template slot-scope="scope">
-        key="email"
+          <span>{{ scope.row.updatedAt }}</span>
-        prop="email"
+        </template>
-        width="280"
+      </el-table-column>
-      />
+      <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
-      <el-table-column
+        <template v-if="scope.row.userId !== 1" slot-scope="scope">
-        label="操作"
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
-        align="center"
-        width="160"
-        class-name="small-padding fixed-width"
-      >
-        <template slot-scope="scope" v-if="scope.row.userId !== 1">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            >修改</el-button
-          >
           <el-button
             size="mini"
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
-            >删除</el-button
+          >删除</el-button>
-          >
         </template>
       </el-table-column>
     </el-table>
@@ -165,51 +140,31 @@
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-row>
           <el-col :span="12">
-            <el-form-item label="用户名" prop="name">
+            <el-form-item label="用户名" prop="userName">
-              <el-input
+              <el-input v-model="form.userName" placeholder="请输入用户名" maxlength="30" />
-                v-model="form.name"
-                placeholder="请输入用户名"
-                maxlength="30"
-              />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="用户账户" prop="account">
-              <el-input
+              <el-input v-model="form.account" placeholder="请输入用户账户" maxlength="30" />
-                v-model="form.account"
-                placeholder="请输入用户账户"
-                maxlength="30"
-              />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="12">
             <el-form-item label="手机号码" prop="phone">
-              <el-input
+              <el-input v-model="form.phone" placeholder="请输入手机号码" maxlength="11" />
-                v-model="form.phone"
-                placeholder="请输入手机号码"
-                maxlength="11"
-              />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="邮箱" prop="email">
-              <el-input
+              <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
-                v-model="form.email"
-                placeholder="请输入邮箱"
-                maxlength="50"
-              />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="12">
-            <el-form-item
+            <el-form-item v-if="form.id" label="用户密码" prop="password">
-              v-if="form.userId == undefined"
-              label="用户密码"
-              prop="password"
-            >
               <el-input
                 v-model="form.password"
                 placeholder="请输入用户密码"
@@ -221,17 +176,12 @@
           </el-col>
           <el-col :span="12">
             <el-form-item label="角色">
-              <el-select
+              <el-select v-model="form.hasRoleList" multiple placeholder="请选择角色">
-                v-model="form.roleIds"
-                multiple
-                placeholder="请选择角色"
-              >
                 <el-option
                   v-for="item in roleOptions"
-                  :key="item.roleId"
+                  :key="item.id"
                   :label="item.roleName"
-                  :value="item.roleId"
+                  :value="item.id"
-                  :disabled="item.status == 1"
                 ></el-option>
               </el-select>
             </el-form-item>
@@ -239,14 +189,13 @@
         </el-row>
         <el-row>
           <el-col :span="12">
-            <el-form-item label="状态">
+            <el-form-item v-if="form.id" label="状态">
-              <el-radio-group v-model="form.status">
+              <el-radio-group v-model="form.state">
                 <el-radio
                   v-for="dict in statusOpt"
                   :key="dict.value"
                   :label="dict.value"
-                  >{{ dict.label }}</el-radio
+                >{{ dict.label }}</el-radio>
-                >
               </el-radio-group>
             </el-form-item>
           </el-col>
@@ -261,14 +210,18 @@
 </template>
 
 <script>
-import { getUserList, addUser,deleteUser } from "@/api/system/user";
+import {
-import { getToken } from "@/utils/auth";
+  getUserList,
-import Treeselect from "@riophae/vue-treeselect";
+  addUser,
-import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+  updateUser,
+  deleteUser,
+  restPassword,
+  selectRoleList
+} from '@/api/system/user';
 
 export default {
-  name: "User",
+  name: 'User',
-  components: { Treeselect },
+  components: {},
   data() {
     return {
       // 遮罩层
@@ -286,19 +239,13 @@ export default {
       // 用户表格数据
       userList: [],
       // 弹出层标题
-      title: "",
+      title: '',
-      // 部门树选项
-      deptOptions: undefined,
       // 是否显示弹出层
       open: false,
-      // 部门名称
-      deptName: undefined,
       // 默认密码
       initPassword: undefined,
       // 日期范围
       dateRange: [],
-      // 岗位选项
-      postOptions: [],
       // 角色选项
       roleOptions: [],
       // 表单参数
@@ -306,112 +253,84 @@ export default {
       statusOpt: [
         {
           value: 0,
-          label: "正常",
+          label: '停用'
         },
         {
           value: 1,
-          label: "停用",
+          label: '启用'
-        },
+        }
       ],
-      sexOpt: [],
       defaultProps: {
-        children: "children",
+        children: 'children',
-        label: "label",
+        label: 'label'
-      },
-      // 用户导入参数
-      upload: {
-        // 是否显示弹出层（用户导入）
-        open: false,
-        // 弹出层标题（用户导入）
-        title: "",
-        // 是否禁用上传
-        isUploading: false,
-        // 是否更新已经存在的用户数据
-        updateSupport: 0,
-        // 设置上传的请求头部
-        headers: { Authorization: "Bearer " + getToken() },
-        // 上传的地址
-        url: process.env.VUE_APP_BASE_API + "/system/user/importData",
       },
       // 查询参数
       queryParams: {
         pages: 1,
         size: 10,
-        name: undefined,
+        userName: undefined,
         phone: undefined,
-        state: undefined,
+        state: undefined
       },
       // 表单校验
       rules: {
-        name: [
+        userName: [
-          { required: true, message: "用户名称不能为空", trigger: "blur" },
+          { required: true, message: '用户名称不能为空', trigger: 'blur' },
           {
             min: 2,
             max: 20,
-            message: "用户名称长度必须介于 2 和 20 之间",
+            message: '用户名称长度必须介于 2 和 20 之间',
-            trigger: "blur",
+            trigger: 'blur'
-          },
+          }
+        ],
+        account: [
+          { required: true, message: '用户账户不能为空', trigger: 'blur' }
         ],
         password: [
-          { required: true, message: "用户密码不能为空", trigger: "blur" },
           {
             min: 5,
             max: 20,
-            message: "用户密码长度必须介于 5 和 20 之间",
+            message: '用户密码长度必须介于 5 和 20 之间',
-            trigger: "blur",
+            trigger: 'blur'
-          },
+          }
         ],
         email: [
+          { required: true, message: '邮箱不能为空', trigger: 'blur' },
           {
-            type: "email",
+            type: 'email',
-            message: "请输入正确的邮箱地址",
+            message: '请输入正确的邮箱地址',
-            trigger: ["blur", "change"],
+            trigger: ['blur', 'change']
-          },
+          }
         ],
+        hasRoleList: [
+          { required: true, message: '角色不能为空', trigger: 'change' }
+        ],
+        state: [{ required: true, message: '状态不能为空', trigger: 'change' }],
         phone: [
           {
+            required: true,
             pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
-            message: "请输入正确的手机号码",
+            message: '请输入正确的手机号码',
-            trigger: "blur",
+            trigger: 'blur'
-          },
+          }
-        ],
+        ]
-      },
+      }
     };
   },
   watch: {},
   created() {
     this.getList();
-    // this.getDeptTree();
-    // this.getConfigKey("sys.user.initPassword").then((response) => {
-    //   this.initPassword = response.msg;
-    // });
   },
   methods: {
     /** 查询用户列表 */
     getList() {
       this.loading = true;
-      getUserList(this.queryParams).then((response) => {
+      getUserList(this.queryParams).then(response => {
-        debugger;
         this.userList = response.data.records;
-        this.total = 1; // response.data.total
+        this.total = response.data.total;
         this.loading = false;
       });
     },
-    // 用户状态修改
-    handleStatusChange(row) {
-      let text = row.status === "0" ? "启用" : "停用";
-      this.$modal
-        .confirm('确认要"' + text + '""' + row.userName + '"用户吗？')
-        .then(function () {
-          return changeUserStatus(row.userId, row.status);
-        })
-        .then(() => {
-          this.$modal.msgSuccess(text + "成功");
-        })
-        .catch(function () {
-          row.status = row.status === "0" ? "1" : "0";
-        });
-    },
     // 取消按钮
     cancel() {
       this.open = false;
@@ -420,20 +339,25 @@ export default {
     // 表单重置
     reset() {
       this.form = {
-        userId: undefined,
+        id: undefined,
-        deptId: undefined,
         userName: undefined,
-        nickName: undefined,
         password: undefined,
-        phonenumber: undefined,
+        phone: undefined,
         email: undefined,
-        sex: undefined,
+        state: 1,
-        status: "0",
+        hasRoleList: []
-        remark: undefined,
-        postIds: [],
-        roleIds: [],
       };
-      this.resetForm("form");
+      this.resetForm('form');
+    },
+    // 获取角色列表
+    getRoleList() {
+      selectRoleList()
+        .then(res => {
+          if (res.code === '000000') {
+            this.roleOptions = res.data;
+          }
+        })
+        .catch();
     },
     /** 搜索按钮操作 */
     handleQuery() {
@@ -443,78 +367,116 @@ export default {
     /** 重置按钮操作 */
     resetQuery() {
       this.dateRange = [];
-      this.resetForm("queryForm");
+      this.resetForm('queryForm');
       this.$refs.tree.setCurrentKey(null);
       this.handleQuery();
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map((item) => item.userId);
+      this.ids = selection.map(item => item.id);
       this.single = selection.length != 1;
       this.multiple = !selection.length;
     },
     /** 新增按钮操作 */
     handleAdd() {
-      debugger;
       this.reset();
+      this.title = '添加用户';
+      this.getRoleList();
       this.open = true;
-      this.title = "添加用户";
       // this.form.password = this.initPassword;
-      // getUser().then((response) => {
-      //   this.postOptions = response.posts;
-      //   this.roleOptions = response.roles;
-      // });
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
-      // getUser(userId).then((response) => {
+      this.form = Object.assign({}, row);
-      //   this.form = response.data;
+      this.getRoleList();
-      //   this.postOptions = response.posts;
+      this.title = '修改用户';
-      //   this.roleOptions = response.roles;
+      this.open = true;
-      //   this.$set(this.form, "postIds", response.postIds);
+    },
-      //   this.$set(this.form, "roleIds", response.roleIds);
+    // 重置密码
-      //   this.open = true;
+    handleInitPassword() {
-      //   this.title = "修改用户";
+      const userIds = this.ids;
-      //   this.form.password = "";
+      this.$confirm('是否确认重置密码, 是否继续?', '提示', {
-      // });
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          restPassword(userIds)
+            .then(res => {
+              if (res.code === '000000') {
+                this.$message({
+                  type: 'success',
+                  message: '重置密码成功!'
+                });
+                this.getList();
+              } else {
+                this.$message({
+                  type: 'danger',
+                  message: '重置密码失败!'
+                });
+              }
+            })
+            .catch();
+        })
+        .catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除'
+          });
+        });
     },
-
     /** 删除按钮操作 */
     handleDelete(row) {
-      const userIds = row.id || this.ids;
+      const userIds = row && row.id ? [row.id] : this.ids;
-      this.$modal
+      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
-        .confirm('是否确认删除用户编号为"' + userIds + '"的数据项？')
+        confirmButtonText: '确定',
-        .then(function () {
+        cancelButtonText: '取消',
-          return deleteUser(userIds);
+        type: 'warning'
-        })
+      })
         .then(() => {
-          this.getList();
+          deleteUser(userIds)
-          this.$message({
+            .then(res => {
-                message: "删除成功",
+              if (res.code === '000000') {
-                type: "success",
+                this.$message({
-              });
+                  type: 'success',
+                  message: '删除成功!'
+                });
+                this.getList();
+              } else {
+                this.$message({
+                  type: 'danger',
+                  message: '删除失败!'
+                });
+              }
+            })
+            .catch();
         })
-        .catch(() => {});
+        .catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除'
+          });
+        });
     },
     // 新增用户
     submitForm() {
-      this.$refs["form"].validate((valid) => {
+      this.$refs['form'].validate(valid => {
         if (valid) {
           if (this.form.id != undefined) {
-            updateUser(this.form).then((response) => {
+            updateUser(this.form).then(response => {
               this.$message({
-                message: "修改成功",
+                message: '修改成功',
-                type: "success",
+                type: 'success'
               });
               this.open = false;
               this.getList();
             });
           } else {
-            addUser(this.form).then((response) => {
+            addUser(this.form).then(response => {
               this.$message({
-                message: "新增成功",
+                message: '新增成功',
-                type: "success",
+                type: 'success'
               });
               this.open = false;
               this.getList();
@@ -522,7 +484,7 @@ export default {
           }
         }
       });
-    },
+    }
-  },
+  }
 };
-</script>
+</script>