Update index.vue

src/views/user/info/index.vue

@@ -2,16 +2,16 @@
   <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-input v-model="queryForm.id" placeholder="编号" />
       </el-form-item>
       <el-form-item label="昵称">
-        <el-input v-model="queryForm.nickName" placeholder="用户昵称"/>
+        <el-input v-model="queryForm.nickName" placeholder="用户昵称" />
       </el-form-item>
       <el-form-item label="手机号">
-        <el-input v-model="queryForm.mp" placeholder="用户手机号"/>
+        <el-input v-model="queryForm.mp" placeholder="用户手机号" />
       </el-form-item>
       <el-form-item label="邮箱">
-        <el-input v-model="queryForm.email" placeholder="用户邮箱"/>
+        <el-input v-model="queryForm.email" placeholder="用户邮箱" />
       </el-form-item>
       <el-form-item label="注册时间">
         <el-date-picker
@@ -20,44 +20,49 @@
           range-separator="至"
           start-placeholder="开始日期"
           end-placeholder="结束日期"
-          value-format="yyyy-MM-dd">
-        </el-date-picker>
+          value-format="yyyy-MM-dd"
+        />
       </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-option label="正常" value="normal" />
+          <el-option label="禁用" value="disable" />
         </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-option label="女" value="female" />
+          <el-option label="男" value="male" />
+          <el-option label="保密" value="secret" />
         </el-select>
       </el-form-item>
     </el-form>
     <el-row class="action-bar-container" type="flex" justify="end">
       <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 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 v-permission="['oauth.user.enable']" size="small" @click.native="enabledByIds(multipleSelection)">
+          启用
         </el-button>
-        <el-button v-permission="['oauth.user.add']" size="small" @click.native="$refs.dialogForm.open({})">禁用
+        <el-button v-permission="['oauth.user.disable']" size="small" @click.native="disableByIds(multipleSelection)">
+          禁用
         </el-button>
-        <el-button v-permission="['oauth.user.add']" size="small" @click.native="$refs.dialogForm.open({})">重置密码
+        <el-button v-permission="['oauth.user.reset.login.password']" size="small" @click.native="resetLoginPasswordByIds(multipleSelection)">
+          重置登录密码
         </el-button>
       </el-button-group>
     </el-row>
     <el-table
       v-loading="isLoading"
       :data="pageData.data"
-      element-loading-text="Loading"
       border
       fit
       highlight-current-row
+      @selection-change="selectionChange"
     >
+      <el-table-column type="selection" width="55" />
       <el-table-column align="center" label="编号" width="150">
         <template slot-scope="scope">
           {{ scope.row.id }}
@@ -89,7 +94,8 @@
 
       <el-table-column label="状态">
         <template slot-scope="scope">
-          <el-tag>{{ scope.row.state.text }}</el-tag>
+          <el-tag v-if="scope.row.state.value===1">{{ scope.row.state.text }}</el-tag>
+          <el-tag v-else type="danger">{{ scope.row.state.text }}</el-tag>
         </template>
       </el-table-column>
       <el-table-column label="注册时间" width="160">
@@ -106,16 +112,14 @@
         <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 v-permission="['oauth.user.edit']" @click.native="$refs.dialogForm.open(scope.row)">编辑</el-dropdown-item>
+              <el-dropdown-item v-if="scope.row.state.value===0" v-permission="['oauth.user.enable']" @click.native="enabledByIds([scope.row.id])">启用</el-dropdown-item>
+              <el-dropdown-item v-if="scope.row.state.value===1" 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>
@@ -130,7 +134,7 @@
       :page-size="pageData.pageSize"
       @current-change="handleCurrentChange"
     />
-    <dialog-form ref="dialogForm" @ok="fetchData"/>
+    <dialog-form ref="dialogForm" @ok="fetchData" />
   </div>
 </template>
 
@@ -145,13 +149,22 @@ export default {
       queryForm: {},
       isLoading: true,
       pageData: {},
-      currentPage: 1
+      currentPage: 1,
+      multipleSelection: []
     }
   },
   created() {
     this.fetchData()
   },
   methods: {
+    selectionChange(val) {
+      console.log(val)
+      const temp = []
+      val.forEach(o => {
+        temp.push(o.id)
+      })
+      this.multipleSelection = temp
+    },
     handleCurrentChange(val) {
       console.log(`当前页: ${val}`)
       this.currentPage = val