update

src/main.js

@@ -4,7 +4,7 @@ import 'normalize.css/normalize.css' // A modern alternative to CSS resets
 
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
-import locale from 'element-ui/lib/locale/lang/en' // lang i18n
+import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n
 
 import '@/styles/index.scss' // global css
 

src/styles/index.scss

@@ -71,4 +71,7 @@ div:focus {
 .action-bar-container{
   margin-bottom: 15px;
   text-align: right;
+  .el-button-group{
+    margin-left: 10px;
+  }
 }

src/views/user/info/index.vue

@@ -1,7 +1,54 @@
 <template>
   <div class="app-container">
+    <el-form :inline="true" :model="queryForm" class="demo-form-inline" size="small">
+      <el-form-item label="编号">
+        <el-input v-model="queryForm.id" placeholder="编号"/>
+      </el-form-item>
+      <el-form-item label="昵称">
+        <el-input v-model="queryForm.nickName" placeholder="用户昵称"/>
+      </el-form-item>
+      <el-form-item label="手机号">
+        <el-input v-model="queryForm.mp" placeholder="用户手机号"/>
+      </el-form-item>
+      <el-form-item label="邮箱">
+        <el-input v-model="queryForm.email" placeholder="用户邮箱"/>
+      </el-form-item>
+      <el-form-item label="注册时间">
+        <el-date-picker
+          v-model="queryForm.registerTime"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="状态">
+        <el-select v-model="queryForm.state" clearable placeholder="用户状态">
+          <el-option label="正常" value="normal"></el-option>
+          <el-option label="禁用" value="disable"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="性别">
+        <el-select v-model="queryForm.gender" clearable placeholder="用户性别">
+          <el-option label="女" value="female"></el-option>
+          <el-option label="男" value="male"></el-option>
+          <el-option label="保密" value="secret"></el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
     <el-row class="action-bar-container" type="flex" justify="end">
-      <el-button v-permission="['oauth.user.add']" type="primary" size="small" @click.native="$refs.dialogForm.open({})">新建</el-button>
+      <el-button type="primary" size="small" @click.native="fetchData">查询</el-button>
+      <el-button-group>
+        <el-button v-permission="['oauth.user.add']" size="small" @click.native="$refs.dialogForm.open({})">新建
+        </el-button>
+        <el-button v-permission="['oauth.user.add']" size="small" @click.native="$refs.dialogForm.open({})">启用
+        </el-button>
+        <el-button v-permission="['oauth.user.add']" size="small" @click.native="$refs.dialogForm.open({})">禁用
+        </el-button>
+        <el-button v-permission="['oauth.user.add']" size="small" @click.native="$refs.dialogForm.open({})">重置密码
+        </el-button>
+      </el-button-group>
     </el-row>
     <el-table
       v-loading="isLoading"
@@ -11,7 +58,7 @@
       fit
       highlight-current-row
     >
-      <el-table-column align="center" label="ID" width="150">
+      <el-table-column align="center" label="编号" width="150">
         <template slot-scope="scope">
           {{ scope.row.id }}
         </template>
@@ -59,13 +106,17 @@
         <template slot-scope="scope">
           <el-dropdown>
             <el-button type="text">
-              操作<i class="el-icon-arrow-down el-icon--right" />
+              操作<i class="el-icon-arrow-down el-icon--right"/>
             </el-button>
             <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item v-permission="['oauth.user.edit']" @click.native="$refs.dialogForm.open(scope.row)">编辑</el-dropdown-item>
-              <el-dropdown-item v-permission="['oauth.user.enable']" @click.native="enabledByIds([scope.row.id])">启用</el-dropdown-item>
-              <el-dropdown-item v-permission="['oauth.user.disable']" @click.native="disableByIds([scope.row.id])">禁用</el-dropdown-item>
-              <el-dropdown-item v-permission="['oauth.user.reset.login.password']" @click.native="resetLoginPasswordByIds([scope.row.id])">重置登录密码</el-dropdown-item>
+              <el-dropdown-item v-permission="['oauth.user.edit']" @click.native="$refs.dialogForm.open(scope.row)">编辑
+              </el-dropdown-item>
+              <el-dropdown-item v-permission="['oauth.user.enable']" @click.native="enabledByIds([scope.row.id])">启用
+              </el-dropdown-item>
+              <el-dropdown-item v-permission="['oauth.user.disable']" @click.native="disableByIds([scope.row.id])">禁用
+              </el-dropdown-item>
+              <el-dropdown-item v-permission="['oauth.user.reset.login.password']" @click.native="resetLoginPasswordByIds([scope.row.id])">重置登录密码
+              </el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
         </template>
@@ -79,7 +130,7 @@
       :page-size="pageData.pageSize"
       @current-change="handleCurrentChange"
     />
-    <dialog-form ref="dialogForm" @ok="fetchData" />
+    <dialog-form ref="dialogForm" @ok="fetchData"/>
   </div>
 </template>
 
@@ -91,6 +142,7 @@ export default {
   components: { DialogForm },
   data() {
     return {
+      queryForm: {},
       isLoading: true,
       pageData: {},
       currentPage: 1
@@ -144,7 +196,7 @@ export default {
     },
     fetchData() {
       this.isLoading = true
-      findPage({ current: this.currentPage })
+      findPage({ ...this.queryForm, current: this.currentPage })
         .then((response) => {
           this.pageData = response
         })