style: 禁用的弹窗

src/views/permissions/userPermission.vue

@@ -8,6 +8,7 @@ import API from '@/util/http'
 import {useAdminStore} from "@/store/index.js"
 import {storeToRefs} from "pinia"
 import {findMenuById, permissionMapping} from "@/utils/menuTreePermission.js"
+
 const adminStore = useAdminStore()
 const {adminData, menuTree} = storeToRefs(adminStore)
 
@@ -918,7 +919,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"
+          <el-cascader v-model="admin.market" :options="marketsTree" placeholder="请选择所属地区" clearable
+                       style="width:180px"
                        @change="handleMarketChange"/>
 
         </div>
@@ -938,7 +940,9 @@ onMounted(async function () {
     <el-card class="card2">
       <!-- 展示表单 -->
       <div class="add-item">
-        <el-button style="color: #048efb; border: 1px solid #048efb" :disabled="!canAdd" v-if="canAdd" @click="userAddInit()">新增用户</el-button>
+        <el-button style="color: #048efb; border: 1px solid #048efb" :disabled="!canAdd" v-if="canAdd"
+                   @click="userAddInit()">新增用户
+        </el-button>
       </div>
 
       <div>
@@ -985,7 +989,8 @@ onMounted(async function () {
           </el-table-column>
           <el-table-column prop="adminStatus" label="状态">
             <template #default="scope">
-              <el-switch :model-value="scope.row.adminStatus" :active-value="1" :inactive-value="0" size="large" v-if="change"
+              <el-switch :model-value="scope.row.adminStatus" :active-value="1" :inactive-value="0" size="large"
+                         v-if="change"
                          :disabled="!change || scope.row.account === adminData.account || statusLoading[scope.row.id]"
                          @change="(targetStatus) => showStatusConfirm(scope.row, targetStatus)" style="
                     --el-switch-on-color: #13ce66;
@@ -996,7 +1001,8 @@ onMounted(async function () {
         </el-table>
         <div class="pagination" style="margin-top: 1vh;">
           <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>
       </div>
@@ -1018,8 +1024,10 @@ 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"
+          <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>
@@ -1075,7 +1083,8 @@ onMounted(async function () {
         <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,7 +1099,8 @@ 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>
@@ -1142,22 +1152,29 @@ onMounted(async function () {
     </template>
   </el-dialog>
 
-  <el-dialog v-model="ackVisible" :title="currentStatusRow?.adminStatus === 1 ? '确认禁用' : '确认启用'" width="300px"
+  <el-dialog v-model="ackVisible" width="700px"
              :close-on-click-modal="false"
+             :style="{
+               backgroundImage: 'url(/src/assets/SvgIcons/背景.svg',
+               backgroundSize: 'cover',
+               backgroundPosition: 'center',
+               height:'400px'
+             }"
              @close="() => { if (currentStatusRow) currentStatusRow.adminStatus = currentStatusRow.adminStatus === 1 ? 0 : 1 }">
-    <div class="status-confirm-content">
-      确定要{{ currentStatusRow?.adminStatus === 1 ? '禁用' : '启用' }}该用户吗？
+    <div class="status-confirm-content"
+    >
+      将要{{ currentStatusRow?.adminStatus === 1 ? '禁用' : '启用' }}该用户
       <br>
     </div>
     <template #footer>
-      <div style="display: flex;">
-        <el-button @click="() => {
+      <div style="display: flex; justify-content: center;  gap: 10px;">
+        <el-button round size="large" @click="() => {
           currentStatusRow.adminStatus = currentStatusRow.adminStatus === 1 ? 0 : 1
           ackVisible = false
         }">
           取消
         </el-button>
-        <el-button type="primary" @click="() => {
+        <el-button round size="large" type="primary" @click="() => {
           editStatus(currentStatusRow)
           ackVisible = false
         }">
@@ -1216,4 +1233,11 @@ onMounted(async function () {
 .head-card-btn {
   margin-left: auto;
 }
+
+.status-confirm-content {
+  text-align: center;
+  margin-top: 160px;
+  margin-bottom: 30px;
+  font-size: 48px;
+}
 </style>