添加用户和权限查询

src/views/user/permission.vue

@@ -2,7 +2,12 @@
   <div>
     <el-card>
       <div class="filter">
-        <el-button type="primary" icon="el-icon-circle-plus" @click="addPermissionDialog=true" v-permission="('role:permission:add')">新增</el-button>
+        菜单名称:
+        <el-input v-model="queryModuleInfo.menuName" clearable placeholder="请输入菜单名称" style="width: 300px;">
+        </el-input>
+        <el-button type="primary" style="margin-left:10px" icon="el-icon-search" @click="queryData">查询</el-button>
+        <el-button type="primary" icon="el-icon-circle-plus" @click="addPermissionDialog=true"
+          v-permission="('role:permission:add')">新增</el-button>
       </div>
       <el-table :data="permissionList" border style="width: 100%;margin-top:20px">
         <el-table-column type='index' width="50px">
@@ -17,12 +22,16 @@
         <el-table-column prop="createTime" label="创建时间" width="200px"></el-table-column>
         <el-table-column label="操作">
           <slot slot-scope="scope">
-            <el-button type="warning" icon="el-icon-edit" @click="openPermissionDialog(scope.row)" v-permission="('role:permission:edit')">编辑</el-button>
-            <el-button type="danger" icon="el-icon-delete" @click="delPermissionFrom(scope.row)" v-permission="('role:permission:del')">删除</el-button>
+            <el-button type="warning" icon="el-icon-edit" @click="openPermissionDialog(scope.row)"
+              v-permission="('role:permission:edit')">编辑</el-button>
+            <el-button type="danger" icon="el-icon-delete" @click="delPermissionFrom(scope.row)"
+              v-permission="('role:permission:del')">删除</el-button>
           </slot>
         </el-table-column>
       </el-table>
-      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="queryModuleInfo.pageNum" :page-size="queryModuleInfo.pageSize" layout="total, prev, pager, next" :total="totalNum">
+      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+        :current-page.sync="queryModuleInfo.pageNum" :page-size="queryModuleInfo.pageSize"
+        layout="total, prev, pager, next" :total="totalNum">
       </el-pagination>
     </el-card>
     <!-- 添加权限对话框 -->
@@ -82,7 +91,8 @@ export default {
     return {
       queryModuleInfo: {
         pageNum: 1,
-        pageSize: 10
+        pageSize: 10,
+        menuName: ''
       },
 
       permissionList: [],
@@ -138,6 +148,10 @@ export default {
     this.getPermissionList()
   },
   methods: {
+    // 查询方法
+    queryData() {
+      this.getPermissionList()
+    },
     // 获取权限列表
     getPermissionList() {
       getPermissionListPaging(this.queryModuleInfo).then((resp) => {

src/views/user/user.vue

 <template>
   <div>
     <el-card>
-      <el-table :data="userList" border style="width: 100%;">
+      <div>
+        用户名称:
+        <el-input v-model="queryModuleInfo.userName" clearable placeholder="请输入用户名称" style="width: 300px;">
+        </el-input>
+        <el-select v-model="queryModuleInfo.roleId" placeholder="请选择角色" clearable filterable style="width:310px">
+          <el-option v-for="item in roleList" :key="item.roleId" :label="item.roleName" :value="item.roleId">
+          </el-option>
+        </el-select>
+        <el-button type="primary" style="margin-left:10px" icon="el-icon-search" @click="queryData">查询</el-button>
+      </div>
+      <el-table :data="userList" border style="width: 100%;margin-top:20px">
         <el-table-column type='index' width="50px">
           <template slot-scope="scope">
             <span>{{(queryModuleInfo.pageNum -1 ) * queryModuleInfo.pageSize + scope.$index + 1}}</span>
@@ -20,11 +30,14 @@
         <el-table-column prop="createTime" label="创建时间" width="200px"></el-table-column>
         <el-table-column label="操作">
           <slot slot-scope="scope">
-            <el-button type="warning" icon="el-icon-edit" @click="openEditDialog(scope.row)" v-permission="('user:list:edit')">编辑</el-button>
+            <el-button type="warning" icon="el-icon-edit" @click="openEditDialog(scope.row)"
+              v-permission="('user:list:edit')">编辑</el-button>
           </slot>
         </el-table-column>
       </el-table>
-      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="queryModuleInfo.pageNum" :page-size="queryModuleInfo.pageSize" layout="total, prev, pager, next" :total="totalNum">
+      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+        :current-page.sync="queryModuleInfo.pageNum" :page-size="queryModuleInfo.pageSize"
+        layout="total, prev, pager, next" :total="totalNum">
       </el-pagination>
     </el-card>
     <!-- 编辑用户 -->
@@ -35,7 +48,8 @@
         </el-form-item>
         <el-form-item label="角色名称:" prop="roleId" style="width:400px">
           <el-select v-model="editUserForm.roleId" placeholder="请选择角色" clearable filterable style="width:310px">
-            <el-option v-for="item in roleList" :key="item.roleId" :label="item.roleName" :value="item.roleId"></el-option>
+            <el-option v-for="item in roleList" :key="item.roleId" :label="item.roleName" :value="item.roleId">
+            </el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="中文名称:" style="width:400px">
@@ -62,7 +76,9 @@ export default {
     return {
       queryModuleInfo: {
         pageNum: 1,
-        pageSize: 10
+        pageSize: 10,
+        userName: '',
+        roleId: ''
       },
       totalNum: 0,
       userList: [],
@@ -95,8 +111,13 @@ export default {
   },
   created() {
     this.getUserList()
+    this.getRoleList()
   },
   methods: {
+    // 查询功能
+    queryData() {
+      this.getUserList()
+    },
     // 获取用户列表
     getUserList() {
       getUserList(this.queryModuleInfo).then((resp) => {
@@ -162,3 +183,8 @@ export default {
   }
 }
 </script>
+<style lang="less" scoped>
+.el-select {
+  margin: 0 10px 0 5px;
+}
+</style>