From 8f18d1145d7750e6ca9f3f97ca06a543e5cbc5d5 Mon Sep 17 00:00:00 2001
From: eryajf <eryajf@163.com>
Date: Thu, 1 Sep 2022 20:45:01 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=B0=83=E6=95=B4=E6=9B=B4=E6=94=B9?=
 =?UTF-8?q?=E7=94=A8=E6=88=B7=E7=8A=B6=E6=80=81=E7=9A=84=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/personnel/user.js          | 10 ++++++++++
 src/views/personnel/user/index.vue | 32 ++++++++++++++++++++++++++----
 2 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/src/api/personnel/user.js b/src/api/personnel/user.js
index 1a78302..0b3a46e 100644
--- a/src/api/personnel/user.js
+++ b/src/api/personnel/user.js
@@ -51,6 +51,16 @@ export function batchDeleteUserByIds(data) {
     data
   })
 }
+
+// 更改用户状态（已完成）
+export function changeUserStatus(data) {
+  return request({
+    url: '/api/user/changeUserStatus',
+    method: 'post',
+    data
+  })
+}
+
 // 同步钉钉用户信息
 export function syncDingTalkUsersApi(data) {
   return request({
diff --git a/src/views/personnel/user/index.vue b/src/views/personnel/user/index.vue
index 51815cf..1ae7066 100644
--- a/src/views/personnel/user/index.vue
+++ b/src/views/personnel/user/index.vue
@@ -46,11 +46,17 @@
         <el-table-column show-overflow-tooltip sortable prop="username" label="用户名" />
         <el-table-column show-overflow-tooltip sortable prop="nickname" label="中文名" />
         <el-table-column show-overflow-tooltip sortable prop="givenName" label="花名" />
-        <el-table-column show-overflow-tooltip sortable prop="status" label="状态" align="center">
+        <!-- 使用按钮方式展示，以后改成布尔参数比较合适 -->
+        <el-table-column label="状态" align="center">
           <template slot-scope="scope">
-            <el-tag size="small" :type="scope.row.status === 1 ? 'success':'danger'" disable-transitions>{{ scope.row.status === 1 ? '正常':'禁用' }}</el-tag>
+            <el-switch v-model="scope.row.status" :active-value='1' :inactive-value='2' @change="userStateChanged(scope.row)"></el-switch>
           </template>
         </el-table-column>
+        <!-- <el-table-column show-overflow-tooltip sortable prop="status" label="状态" align="center">
+          <template slot-scope="scope">
+            <el-tag size="small" :type="scope.row.status === 1 ? 'success':'danger'" disable-transitions>{{ scope.row.status === 1 ? '正常':'禁用' }}</el-tag>
+          </template>
+        </el-table-column> -->
         <el-table-column show-overflow-tooltip sortable prop="mail" label="邮箱" />
         <el-table-column show-overflow-tooltip sortable prop="mobile" label="手机号" />
         <el-table-column show-overflow-tooltip sortable prop="jobNumber" label="工号" />
@@ -195,7 +201,7 @@
 import JSEncrypt from 'jsencrypt'
 import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
-import { getUsers, createUser, updateUserById, batchDeleteUserByIds, syncDingTalkUsersApi, syncWeComUsersApi, syncFeiShuUsersApi, syncOpenLdapUsersApi } from '@/api/personnel/user'
+import { getUsers, createUser, updateUserById, batchDeleteUserByIds, changeUserStatus, syncDingTalkUsersApi, syncWeComUsersApi, syncFeiShuUsersApi, syncOpenLdapUsersApi } from '@/api/personnel/user'
 import { getRoles } from '@/api/system/role'
 import { getGroupTree } from '@/api/personnel/group'
 
@@ -323,7 +329,11 @@ wLXapv+ZfsjG7NgdawIDAQAB
       // 删除按钮弹出框
       popoverVisible: false,
       // 表格多选
-      multipleSelection: []
+      multipleSelection: [],
+      changeUserStatusFormData: {
+        id: '',
+        status: '',
+      },
     }
   },
   created() {
@@ -600,6 +610,20 @@ wLXapv+ZfsjG7NgdawIDAQAB
       })
     },
 
+    // 监听 switch 开关 状态改变
+   async userStateChanged(userInfo) {
+      this.changeUserStatusFormData.id = userInfo.ID
+      this.changeUserStatusFormData.status = userInfo.status
+
+      const { code } = await changeUserStatus(this.changeUserStatusFormData)
+
+      if (code !== 0) {
+        userInfo.status = !userInfo.status
+        return this.$message.error('更新用户状态失败')
+      }
+      this.$message.success('更新用户状态成功')
+    },
+
     // 表格多选
     handleSelectionChange(val) {
       this.multipleSelection = val