修改全局 dialog 样式，修改api管理的删除初始化显示问题

web/src/view/superAdmin/api/api.vue

@@ -29,7 +29,6 @@
     </div>
     <div class="gva-table-box">
       <div class="gva-btn-list">
-
         <el-button size="mini" type="primary" icon="el-icon-plus" @click="openDialog('addApi')">新增</el-button>
         <el-popover v-model:visible="deleteVisible" placement="top" width="160">
           <p>确定要删除吗？</p>
@@ -38,41 +37,46 @@
             <el-button size="mini" type="primary" @click="onDelete">确定</el-button>
           </div>
           <template #reference>
-            <el-button icon="el-icon-delete" size="mini" style="margin-left: 10px;">删除</el-button>
+            <el-button
+              icon="el-icon-delete"
+              size="mini"
+              style="margin-left: 10px;"
+              :disabled="showTableHeadDelbtn"
+            >删除</el-button>
           </template>
         </el-popover>
       </div>
-      <el-table :data="tableData" @sort-change="sortChange" @selection-change="handleSelectionChange">
-        <el-table-column
-          type="selection"
-          width="55"
-        />
+      <el-table
+        :data="tableData"
+        @sort-change="sortChange"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" />
         <el-table-column label="id" min-width="60" prop="ID" sortable="custom" />
         <el-table-column label="API路径" min-width="150" prop="path" sortable="custom" />
         <el-table-column label="API分组" min-width="150" prop="apiGroup" sortable="custom" />
         <el-table-column label="API简介" min-width="150" prop="description" sortable="custom" />
         <el-table-column label="请求" min-width="150" prop="method" sortable="custom">
           <template #default="scope">
-            <div>
-              {{ scope.row.method }} / {{ methodFiletr(scope.row.method) }}
-            </div>
+            <div>{{ scope.row.method }} / {{ methodFiletr(scope.row.method) }}</div>
           </template>
         </el-table-column>
 
         <el-table-column fixed="right" label="操作" width="200">
           <template #default="scope">
-            <el-button
-              icon="el-icon-edit"
-              size="small"
-              type="text"
-              @click="editApi(scope.row)"
-            >编辑</el-button>
-            <el-button
-              icon="el-icon-delete"
-              size="small"
-              type="text"
-              @click="deleteApi(scope.row)"
-            >删除</el-button>
+            <el-button icon="el-icon-edit" size="small" type="text" @click="editApi(scope.row)">编辑</el-button>
+            <el-popconfirm
+              confirmButtonText="好的"
+              cancelButtonText="不用了"
+              icon="el-icon-info"
+              iconColor="red"
+              title="你确定要删除吗？"
+              @confirm="deleteApi(scope.row)"
+            >
+              <template #reference>
+                <el-button icon="el-icon-delete" size="small" type="text">删除</el-button>
+              </template>
+            </el-popconfirm>
           </template>
         </el-table-column>
       </el-table>
@@ -87,12 +91,11 @@
           @size-change="handleSizeChange"
         />
       </div>
-
     </div>
 
     <el-dialog v-model="dialogFormVisible" :before-close="closeDialog" :title="dialogTitle">
       <warning-bar title="新增API，需要在角色管理内篇日志权限才可使用" />
-      <el-form ref="apiForm" :model="form" :rules="rules" label-width="80px">
+      <el-form ref="apiForm" :model="form" :rules="rules" label-width="120px">
         <el-form-item label="路径" prop="path">
           <el-input v-model="form.path" autocomplete="off" />
         </el-form-item>
@@ -192,7 +195,8 @@ export default {
         description: [
           { required: true, message: '请输入api介绍', trigger: 'blur' }
         ]
-      }
+      },
+      showTableHeadDelbtn: true
     }
   },
   created() {
@@ -209,6 +213,11 @@ export default {
     },
     //  选中api
     handleSelectionChange(val) {
+      if (val.length) {
+        this.showTableHeadDelbtn = false
+      } else {
+        this.showTableHeadDelbtn = true
+      }
       this.apis = val
     },
     async onDelete() {
@@ -276,30 +285,17 @@ export default {
       this.openDialog('edit')
     },
     async deleteApi(row) {
-      this.$confirm('此操作将永久删除所有角色下该api, 是否继续?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      })
-        .then(async() => {
-          const res = await deleteApi(row)
-          if (res.code === 0) {
-            this.$message({
-              type: 'success',
-              message: '删除成功!'
-            })
-            if (this.tableData.length === 1 && this.page > 1) {
-              this.page--
-            }
-            this.getTableData()
-          }
-        })
-        .catch(() => {
-          this.$message({
-            type: 'info',
-            message: '已取消删除'
-          })
+      const res = await deleteApi(row)
+      if (res.code === 0) {
+        this.$message({
+          type: 'success',
+          message: '删除成功!'
         })
+        if (this.tableData.length === 1 && this.page > 1) {
+          this.page--
+        }
+        this.getTableData()
+      }
     },
     async enterDialog() {
       this.$refs.apiForm.validate(async valid => {