调整删除方法 放弃使用el-popover 删除操作使用弹窗提示

web/src/view/superAdmin/dictionary/sysDictionary.vue

@@ -34,32 +34,13 @@
               >
                 <Edit />
               </el-icon>
-              <el-popover
-                v-model:visible="dictionary.visible"
-                placement="top"
-                width="160"
+              <el-icon
+                class="ml-2 group-hover:text-red-500"
+                :class="selectID === dictionary.ID ? 'text-white-800':'text-red-500'"
+                @click="deleteSysDictionaryFunc(dictionary)"
               >
-                <p>确定要删除吗？</p>
-                <div style="text-align: right; margin-top: 8px;">
-                  <el-button
-                    type="primary"
-                    link
-                    @click="dictionary.visible = false"
-                  >取消</el-button>
-                  <el-button
-                    type="primary"
-                    @click="deleteSysDictionaryFunc(dictionary)"
-                  >确定</el-button>
-                </div>
-                <template #reference>
-                  <el-icon
-                    class="ml-2 group-hover:text-red-500"
-                    :class="selectID === dictionary.ID ? 'text-white-800':'text-red-500'"
-                  >
-                    <Delete />
-                  </el-icon>
-                </template>
-              </el-popover>
+                <Delete />
+              </el-icon>
             </div>
           </div>
         </el-scrollbar>
@@ -148,7 +129,7 @@ import {
 } from '@/api/sysDictionary' // 此处请自行替换地址
 import WarningBar from '@/components/warningBar/warningBar.vue'
 import { ref } from 'vue'
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 
 import sysDictionaryDetail from './sysDictionaryDetail.vue'
 import { Edit } from '@element-plus/icons-vue'
@@ -225,15 +206,20 @@ const closeDialog = () => {
   }
 }
 const deleteSysDictionaryFunc = async(row) => {
-  row.visible = false
-  const res = await deleteSysDictionary({ ID: row.ID })
-  if (res.code === 0) {
-    ElMessage({
-      type: 'success',
-      message: '删除成功',
-    })
-    getTableData()
-  }
+  ElMessageBox.confirm('确定要删除吗?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(async() => {
+    const res = await deleteSysDictionary({ ID: row.ID })
+    if (res.code === 0) {
+      ElMessage({
+        type: 'success',
+        message: '删除成功',
+      })
+      getTableData()
+    }
+  })
 }
 
 const dialogForm = ref(null)

web/src/view/superAdmin/dictionary/sysDictionaryDetail.vue

@@ -74,32 +74,12 @@
               icon="edit"
               @click="updateSysDictionaryDetailFunc(scope.row)"
             >变更</el-button>
-            <el-popover
-              v-model:visible="scope.row.visible"
-              placement="top"
-              width="160"
-            >
-              <p>确定要删除吗？</p>
-              <div style="text-align: right; margin-top: 8px;">
-                <el-button
-                  type="primary"
-                  link
-                  @click="scope.row.visible = false"
-                >取消</el-button>
-                <el-button
-                  type="primary"
-                  @click="deleteSysDictionaryDetailFunc(scope.row)"
-                >确定</el-button>
-              </div>
-              <template #reference>
-                <el-button
-                  type="primary"
-                  link
-                  icon="delete"
-                  @click="scope.row.visible = true"
-                >删除</el-button>
-              </template>
-            </el-popover>
+            <el-button
+              type="primary"
+              link
+              icon="delete"
+              @click="deleteSysDictionaryDetailFunc(scope.row)"
+            >删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -208,7 +188,7 @@ import {
   getSysDictionaryDetailList
 } from '@/api/sysDictionaryDetail' // 此处请自行替换地址
 import { ref, watch } from 'vue'
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { formatBoolean, formatDate } from '@/utils/format'
 
 defineOptions({
@@ -307,18 +287,23 @@ const closeDialog = () => {
   }
 }
 const deleteSysDictionaryDetailFunc = async(row) => {
-  row.visible = false
-  const res = await deleteSysDictionaryDetail({ ID: row.ID })
-  if (res.code === 0) {
-    ElMessage({
-      type: 'success',
-      message: '删除成功'
-    })
-    if (tableData.value.length === 1 && page.value > 1) {
-      page.value--
+  ElMessageBox.confirm('确定要删除吗?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(async() => {
+    const res = await deleteSysDictionaryDetail({ ID: row.ID })
+    if (res.code === 0) {
+      ElMessage({
+        type: 'success',
+        message: '删除成功'
+      })
+      if (tableData.value.length === 1 && page.value > 1) {
+        page.value--
+      }
+      getTableData()
     }
-    getTableData()
-  }
+  })
 }
 
 const dialogForm = ref(null)