权限修改ack

src/views/permissions/userPermission.vue

@@ -26,7 +26,17 @@ 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: [
@@ -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) {
@@ -889,14 +905,8 @@ onMounted(async function () {
         </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">
@@ -962,8 +972,9 @@ 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 />
@@ -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>
@@ -997,19 +1007,9 @@ onMounted(async function () {
         </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>
@@ -1056,26 +1056,15 @@ onMounted(async function () {
         <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-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>
@@ -1090,8 +1079,7 @@ onMounted(async function () {
       </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>
@@ -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>