权限修改ack

src/views/permissions/userPermission.vue

@@ -1,7 +1,7 @@
 <script setup>
-import {computed, onMounted, ref} from 'vue'
-import {ElMessage, ElMessageBox} from 'element-plus'
-import {InfoFilled} from '@element-plus/icons-vue'
+import { computed, onMounted, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { InfoFilled } from '@element-plus/icons-vue'
 import _ from 'lodash'
 import request from '@/util/http'
 import API from '@/util/http'
@@ -26,27 +26,37 @@ const getObj = ref({
   pageNum: 1,
   pageSize: 10
 })
-
+// 修改状态确认
+const ackVisible = ref(false)
+const currentStatusRow = ref(null)
+const statusLoading = ref({})
+const showStatusConfirm = (row, targetStatus) => {
+  currentStatusRow.value = {
+    ...row,// 当前行数据
+    targetStatus// 目标状态
+  }
+  ackVisible.value = true
+}
 // 规则
 const addUserRules = {
   account: [
-    {required: true, message: '请输入OA号', trigger: 'blur'},
-    {pattern: /^\d+$/, message: 'OA号必须为数字', trigger: 'blur'},
-    {max: 20, message: '长度不能超过20位', trigger: 'blur'}
+    { required: true, message: '请输入OA号', trigger: 'blur' },
+    { pattern: /^\d+$/, message: 'OA号必须为数字', trigger: 'blur' },
+    { max: 20, message: '长度不能超过20位', trigger: 'blur' }
   ],
   name: [
-    {required: true, message: '请输入用户名', trigger: 'blur'},
-    {max: 20, message: '长度不能超过20位', trigger: 'blur'}
+    { required: true, message: '请输入用户名', trigger: 'blur' },
+    { max: 20, message: '长度不能超过20位', trigger: 'blur' }
   ],
   market: [
-    {required: true, message: '请选择所属地区', trigger: 'change'}
+    { required: true, message: '请选择所属地区', trigger: 'change' }
   ],
   permission: [
-    {required: true, message: '请选择角色名称', trigger: 'change'}
+    { required: true, message: '请选择角色名称', trigger: 'change' }
   ],
   postiton: [
-    {required: true, message: '请输入职位', trigger: 'blur'},
-    {max: 20, message: '长度不能超过20位', trigger: 'blur'}
+    { required: true, message: '请输入职位', trigger: 'blur' },
+    { max: 20, message: '长度不能超过20位', trigger: 'blur' }
   ],
   machineIds: [
     {
@@ -93,7 +103,7 @@ const adminData = ref({})
 // todo 之后优化掉
 const getAdminData = async function () {
   try {
-    const result = await API({url: '/admin/userinfo', data: {}})
+    const result = await API({ url: '/admin/userinfo', data: {} })
     adminData.value = result
     // console.log('请求成功', result)
     console.log('管理员用户信息', adminData.value)
@@ -320,7 +330,7 @@ const permissionList = ref([])
 
 const getRoles = async function () {
   try {
-    const res = await API({url: '/role/selectAll'})
+    const res = await API({ url: '/role/selectAll' })
     permissionList.value = res.data.map(item => ({
       label: item.roleName,
       value: item.id
@@ -436,7 +446,7 @@ const getUserLists = async function (selectedRoleId) {
     parentRoleTip.value = '';
     const parentRes = await request({
       url: '/role/selectFather',
-      data: {id: selectedRoleId}  // 用选中的角色ID请求
+      data: { id: selectedRoleId }  // 用选中的角色ID请求
     });
     const parentId = parentRes.data.fatherId;
     const parentName = parentRes.data.parentName;
@@ -454,7 +464,7 @@ const getUserLists = async function (selectedRoleId) {
     // }
     const res = await API({
       url: '/menu/tree',
-      data: {id: roleId}
+      data: { id: roleId }
     })
     data.value = processTreeData(res.data)
     permissionEditObj.value.checkedKeys = collectIds(res.data) || [];
@@ -469,11 +479,11 @@ const getUserLists = async function (selectedRoleId) {
 //编辑用户表单校验
 const editAdminRules = {
   market: [
-    {required: true, message: '请选择所属地区', trigger: 'change'}
+    { required: true, message: '请选择所属地区', trigger: 'change' }
   ],
   postiton: [
-    {required: true, message: '请输入职位', trigger: ['blur', 'change']},
-    {max: 20, message: '长度不能超过20位', trigger: ['blur', 'change']}
+    { required: true, message: '请输入职位', trigger: ['blur', 'change'] },
+    { max: 20, message: '长度不能超过20位', trigger: ['blur', 'change'] }
   ],
   machineIds: [
     {
@@ -494,7 +504,7 @@ const editAdminRules = {
 };
 // 编辑用户权限提交
 const permissionEdit = async function () {
-  let {adminName: userName, roleName: oldRole, roleId: newRoleId} = permissionEditObj.value;
+  let { adminName: userName, roleName: oldRole, roleId: newRoleId } = permissionEditObj.value;
   if (oldRole == null) {
     oldRole = '暂未分配角色'
   }
@@ -584,13 +594,16 @@ const delConfirm = async function () {
 }
 // 禁用启用用户权限
 const editStatus = async function (row) {
+const { id, account, targetStatus, ...restRow } = currentStatusRow.value
+
   try {
-    console.log(row)
+    statusLoading.value[id] = true
 
+    console.log(row)
     permissionEditObj.value = {}
-    permissionEditObj.value.id = row.id
-    permissionEditObj.value.account = row.account
-    permissionEditObj.value.adminStatus = row.adminStatus
+    permissionEditObj.value.id = id
+    permissionEditObj.value.account = account
+    permissionEditObj.value.adminStatus = targetStatus
     console.log('修改用户权限状态', permissionEditObj.value)
 
     const result = await request({
@@ -598,9 +611,12 @@ const editStatus = async function (row) {
       data: permissionEditObj.value
     })
     console.log('请求成功2', result)
+    if (result.code === 200) {
       ElMessage.success(
         permissionEditObj.value.adminStatus === 1 ? '启用成功' : '禁用成功'
       )
+      statusLoading.value[id] = false
+    }
     permissionEditObj.value = {}
     getPermission()
   } catch (error) {
@@ -885,24 +901,18 @@ onMounted(async function () {
       <div class="head-card">
         <div class="head-card-element">
           <el-text class="mx-1" size="large">OA号：</el-text>
-              <el-input v-model="admin.account" style="width: 240px" placeholder="请输入OA号" clearable/>
+          <el-input v-model="admin.account" style="width: 240px" placeholder="请输入OA号" clearable />
         </div>
         <div class="head-card-element" style="margin-left: 50px">
           <el-text class="mx-1" size="large">所属地区：</el-text>
-              <el-cascader
-                  v-model="admin.market"
-                  :options="marketsTree"
-                  placeholder="请选择所属地区"
-                  clearable
-                  style="width:180px"
-                  @change="handleMarketChange"
-              />
+          <el-cascader v-model="admin.market" :options="marketsTree" placeholder="请选择所属地区" clearable style="width:180px"
+            @change="handleMarketChange" />
 
         </div>
         <div class="head-card-element" style="margin-left: 50px">
           <el-text class="mx-1" size="large">职位名称：</el-text>
           <el-select v-model="admin.postiton" placeholder="请选择职位名称" style="width: 240px" clearable>
-                <el-option v-for="item in postiton" :key="item" :label="item" :value="item"/>
+            <el-option v-for="item in postiton" :key="item" :label="item" :value="item" />
           </el-select>
         </div>
 
@@ -928,13 +938,13 @@ onMounted(async function () {
             </template>
           </el-table-column>
 
-              <el-table-column prop="account" label="OA号"/>
-              <el-table-column prop="name" label="姓名"/>
-              <el-table-column prop="market" label="所属地区"/>
-              <el-table-column prop="postiton" label="职位"/>
+          <el-table-column prop="account" label="OA号" />
+          <el-table-column prop="name" label="姓名" />
+          <el-table-column prop="market" label="所属地区" />
+          <el-table-column prop="postiton" label="职位" />
           <el-table-column prop="roleName" label="部门权限">
           </el-table-column>
-              <el-table-column prop="remark" label="备注"/>
+          <el-table-column prop="remark" label="备注" />
           <el-table-column prop="operation" label="操作" width="280px">
             <template #default="scope">
               <el-button type="warning" text @click="resetPassword(scope.row)">
@@ -962,11 +972,12 @@ onMounted(async function () {
           </el-table-column>
           <el-table-column prop="adminStatus" label="状态">
             <template #default="scope">
-                  <el-switch v-model="scope.row.adminStatus" :active-value="1" :inactive-value="0" size="large"
-                             :disabled="scope.row.account === adminData.account" @change="editStatus(scope.row)" style="
+              <el-switch :model-value="scope.row.adminStatus" :active-value="1" :inactive-value="0" size="large"
+                :disabled="scope.row.account === adminData.account || statusLoading[scope.row.id]"
+                @change="(targetStatus) => showStatusConfirm(scope.row, targetStatus)" style="
                     --el-switch-on-color: #13ce66;
                     --el-switch-off-color: #ff4949;
-                  " active-text="启用" inactive-text="禁用" inline-prompt/>
+                  " active-text="启用" inactive-text="禁用" inline-prompt />
             </template>
           </el-table-column>
         </el-table>
@@ -975,8 +986,7 @@ onMounted(async function () {
       <!-- 分页 -->
       <div class="pagination" style="margin-top: 20px">
         <el-pagination background :page-size="getObj.pageSize" :page-sizes="[5, 10, 20, 50, 100]"
-                           layout="total, sizes, prev, pager, next, jumper" :total="total"
-                           @size-change="handlePageSizeChange"
+          layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handlePageSizeChange"
           @current-change="handleCurrentChange"></el-pagination>
       </div>
     </el-card>
@@ -989,27 +999,17 @@ onMounted(async function () {
       <el-form ref="Ref" :rules="addUserRules" :model="addAdmin" label-width="auto"
         style="max-width: 600px; align-items: center">
         <el-form-item prop="account" label="OA号:" required clearable>
-          <el-input v-model="addAdmin.account" placeholder="请输入OA号" style="width: 220px"/>
+          <el-input v-model="addAdmin.account" placeholder="请输入OA号" style="width: 220px" />
         </el-form-item>
 
         <el-form-item prop="name" label="用户名:" required clearable>
-          <el-input v-model="addAdmin.name" placeholder="请输入用户名" style="width: 220px"/>
+          <el-input v-model="addAdmin.name" placeholder="请输入用户名" style="width: 220px" />
         </el-form-item>
 
         <el-form-item prop="market" label="所属地区:" required clearable>
-          <el-cascader
-              v-model="addAdmin.market"
-              :options="marketsTree"
-              placeholder="请选择所属地区"
-              clearable
-              collapse-tags
-              collapse-tags-tooltip
-              style="width:220px"
-              @change="handleMarketChangeAddUser"
-              :max-collapse-tags="2"
-              :props="addUserProps"
-
-          />
+          <el-cascader v-model="addAdmin.market" :options="marketsTree" placeholder="请选择所属地区" clearable collapse-tags
+            collapse-tags-tooltip style="width:220px" @change="handleMarketChangeAddUser" :max-collapse-tags="2"
+            :props="addUserProps" />
         </el-form-item>
         <el-form-item prop="permission" label="角色名称:" required>
           <el-select v-model="addAdmin.permission" placeholder="请选择角色名称" style="width: 220px" clearable>
@@ -1018,21 +1018,21 @@ onMounted(async function () {
           </el-select>
         </el-form-item>
         <el-form-item prop="postiton" label="职位:" required>
-          <el-input v-model="addAdmin.postiton" placeholder="请输入职位" style="width: 220px" clearable/>
+          <el-input v-model="addAdmin.postiton" placeholder="请输入职位" style="width: 220px" clearable />
         </el-form-item>
         <el-form-item prop="machineIds" label="机器码:" required>
           <div style="display: flex; align-items: center; flex-wrap: wrap; gap: 10px;">
             <!-- 动态添加的机器码输入框 -->
             <div v-for="(item, index) in addAdmin.machineIds" :key="index">
               <el-input v-model="addAdmin.machineIds[index]" placeholder="请输入机器码"
-                        style="width: 220px; margin-right: 10px;"/>
+                style="width: 220px; margin-right: 10px;" />
             </div>
             <el-button type="primary" @click="addMachineIdInput">添加</el-button>
           </div>
         </el-form-item>
         <el-form-item prop="remark" label="备注">
           <el-input v-model="addAdmin.remark" style="width: 300px" :rows="2" maxlength="100" show-word-limit
-                    type="textarea"/>
+            type="textarea" />
         </el-form-item>
       </el-form>
 
@@ -1050,32 +1050,21 @@ onMounted(async function () {
     <el-form ref="Ref" :rules="editAdminRules" :model="permissionEditObj" label-width="auto"
       style="max-width: 600px; align-items: center">
       <el-form-item prop="account" label="用户账号:" clearable>
-        <el-input v-model="permissionEditObj.account" placeholder="请输入OA号" style="width: 220px" disabled/>
+        <el-input v-model="permissionEditObj.account" placeholder="请输入OA号" style="width: 220px" disabled />
       </el-form-item>
       <el-form-item prop="name" label="用户名称:">
-        <el-input v-model="permissionEditObj.adminName" placeholder="请输入用户名" style="width: 220px" disabled/>
+        <el-input v-model="permissionEditObj.adminName" placeholder="请输入用户名" style="width: 220px" disabled />
       </el-form-item>
       <el-form-item prop="market" label="所属地区:" clearable>
-        <el-cascader
-            v-model="permissionEditObj.market"
-            :options="marketsTree"
-            placeholder="请选择所属地区"
-            clearable
-            collapse-tags
-            collapse-tags-tooltip
-            style="width:220px"
-            @change="handleMarketChangeEditUser"
-            :max-collapse-tags="2"
-            :props="editUserProps"
-
-        />
+        <el-cascader v-model="permissionEditObj.market" :options="marketsTree" placeholder="请选择所属地区" clearable
+          collapse-tags collapse-tags-tooltip style="width:220px" @change="handleMarketChangeEditUser"
+          :max-collapse-tags="2" :props="editUserProps" />
       </el-form-item>
       <el-form-item prop="postiton" label="职位:">
-        <el-input v-model="permissionEditObj.postiton" placeholder="请输入职位" style="width: 220px" clearable/>
+        <el-input v-model="permissionEditObj.postiton" placeholder="请输入职位" style="width: 220px" clearable />
       </el-form-item>
       <el-form-item prop="roleName" label="角色名称:">
-        <el-select v-model="permissionEditObj.roleId" placeholder="请选择角色" style="width: 220px"
-                   @change="getUserLists">
+        <el-select v-model="permissionEditObj.roleId" placeholder="请选择角色" style="width: 220px" @change="getUserLists">
           <el-option v-for="item in permissionList" :key="item.value" :label="item.label"
             :value="item.value"></el-option>
         </el-select>
@@ -1083,15 +1072,14 @@ onMounted(async function () {
       <el-form-item prop="parentName" label="上级角色:">
         <el-select v-model="permissionEditObj.parentId" placeholder="无上级角色" :disabled="!!parentRoleTip"
           style="width: 220px">
-          <el-option v-if="parentRoleTip" :key="0" :label="parentRoleTip" :value="null" disabled/>
+          <el-option v-if="parentRoleTip" :key="0" :label="parentRoleTip" :value="null" disabled />
           <el-option v-else v-for="item in permissionList" :key="item.value" :label="item.label" disabled
             :value="item.value"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item prop="permissionSelect" label="权限列表:">
         <el-tree v-if="data.length > 0" :data="data" :disabled="true" show-checkbox node-key="id"
-                 :props="{ label: 'menuName', children: 'children' }"
-                 :default-checked-keys="permissionEditObj.checkedKeys">
+          :props="{ label: 'menuName', children: 'children' }" :default-checked-keys="permissionEditObj.checkedKeys">
         </el-tree>
         <div v-else style="display: flex; align-items: center; gap: 8px;">
           <span style="color: #999;">暂无数据</span>
@@ -1102,7 +1090,7 @@ onMounted(async function () {
           <!-- 动态添加的机器码输入框 -->
           <div v-for="(item, index) in permissionEditObj.machineIds" :key="index">
             <el-input v-model="permissionEditObj.machineIds[index]" placeholder=""
-                      style="width: 220px; margin-right: 10px;"/>
+              style="width: 220px; margin-right: 10px;" />
           </div>
           <el-button type="primary" @click="UseraddMachineIdInput">添加</el-button>
         </div>
@@ -1126,7 +1114,7 @@ onMounted(async function () {
     <el-row>
       <el-col :span="4" style="margin-top: 20px">
         <el-icon class="dialog-icon" color="#10AEFF" size="50">
-          <InfoFilled/>
+          <InfoFilled />
         </el-icon>
       </el-col>
       <el-col :span="20">
@@ -1143,7 +1131,30 @@ onMounted(async function () {
     </template>
   </el-dialog>
 
-
+  <el-dialog v-model="ackVisible" :title="currentStatusRow?.adminStatus === 1 ? '确认禁用' : '确认启用'" width="300px"
+    :close-on-click-modal="false"
+    @close="() => { if (currentStatusRow) currentStatusRow.adminStatus = currentStatusRow.adminStatus === 1 ? 0 : 1 }">
+    <div class="status-confirm-content">
+      确定要{{ currentStatusRow?.adminStatus === 1 ? '禁用' : '启用' }}该用户吗？
+      <br>
+    </div>
+    <template #footer>
+      <div style="display: flex;">
+        <el-button @click="() => {
+          currentStatusRow.adminStatus = currentStatusRow.adminStatus === 1 ? 0 : 1
+          ackVisible = false
+        }">
+          取消
+        </el-button>
+        <el-button type="primary" @click="() => {
+          editStatus(currentStatusRow)
+          ackVisible = false
+        }">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
 </template>
 
 <style scoped>