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

2024-03-13 22:37:07 +08:00
parent 7b79ec6c66
commit 50b1d21d13
11 changed files with 223 additions and 618 deletions
@@ -62,56 +62,15 @@
          class="cursor-pointer"
          @click="toDoc('https://www.bilibili.com/video/BV1kv4y1g7nT?p=7&vd_source=f2640257c21e3b547a790461ed94875e')"
        ><VideoCameraFilled /></el-icon>
-        <el-popover
-          v-model="deleteVisible"
-          placement="top"
-          width="160"
-          trigger="click"
-        >
-          <p>确定要删除吗？</p>
-          <div style="text-align: right; margin-top: 8px;">
-            <el-button
-              type="primary"
-              link
-              @click="deleteVisible = false"
-            >取消</el-button>
-            <el-button
-              type="primary"
-              @click="onDelete"
-            >确定</el-button>
-          </div>
-          <template #reference>
-            <el-button
-              icon="delete"
-              :disabled="!apis.length"
-              @click="deleteVisible = true"
-            >删除</el-button>
-          </template>
-        </el-popover>
-        <el-popover
-          v-model="freshVisible"
-          placement="top"
-          width="160"
-        >
-          <p>确定要刷新Casbin缓存吗？</p>
-          <div style="text-align: right; margin-top: 8px;">
-            <el-button
-              type="primary"
-              link
-              @click="freshVisible = false"
-            >取消</el-button>
-            <el-button
-              type="primary"
-              @click="onFresh"
-            >确定</el-button>
-          </div>
-          <template #reference>
-            <el-button
-              icon="Refresh"
-              @click="freshVisible = true"
-            >刷新缓存</el-button>
-          </template>
-        </el-popover>
+        <el-button
+          icon="delete"
+          :disabled="!apis.length"
+          @click="onDelete"
+        >删除</el-button>
+        <el-button
+          icon="Refresh"
+          @click="onFresh"
+        >刷新缓存</el-button>
      </div>
      <el-table
        :data="tableData"
@@ -400,32 +359,40 @@ const handleSelectionChange = (val) => {
  apis.value = val
 }

-const deleteVisible = ref(false)
 const onDelete = async() => {
-  const ids = apis.value.map(item => item.ID)
-  const res = await deleteApisByIds({ ids })
-  if (res.code === 0) {
-    ElMessage({
-      type: 'success',
-      message: res.msg
-    })
-    if (tableData.value.length === ids.length && page.value > 1) {
-      page.value--
+  ElMessageBox.confirm('确定要删除吗?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(async() => {
+    const ids = apis.value.map(item => item.ID)
+    const res = await deleteApisByIds({ ids })
+    if (res.code === 0) {
+      ElMessage({
+        type: 'success',
+        message: res.msg
+      })
+      if (tableData.value.length === ids.length && page.value > 1) {
+        page.value--
+      }
+      getTableData()
    }
-    deleteVisible.value = false
-    getTableData()
-  }
+  })
 }
-const freshVisible = ref(false)
 const onFresh = async() => {
-  const res = await freshCasbin()
-  if (res.code === 0) {
-    ElMessage({
-      type: 'success',
-      message: res.msg
-    })
-  }
-  freshVisible.value = false
+  ElMessageBox.confirm('确定要刷新缓存吗?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(async() => {
+    const res = await freshCasbin()
+    if (res.code === 0) {
+      ElMessage({
+        type: 'success',
+        message: res.msg
+      })
+    }
+  })
 }

 // 弹窗相关
@@ -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)
@@ -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)
@@ -38,33 +38,11 @@
    </div>
    <div class="gva-table-box">
      <div class="gva-btn-list">
-
-        <el-popover
-          v-model="deleteVisible"
-          placement="top"
-          width="160"
-        >
-          <p>确定要删除吗？</p>
-          <div style="text-align: right; margin-top: 8px;">
-            <el-button
-              type="primary"
-              link
-              @click="deleteVisible = false"
-            >取消</el-button>
-            <el-button
-              type="primary"
-              @click="onDelete"
-            >确定</el-button>
-          </div>
-          <template #reference>
-            <el-button
-              icon="delete"
-              style="margin-left: 10px;"
-              :disabled="!multipleSelection.length"
-              @click="deleteVisible = true"
-            >删除</el-button>
-          </template>
-        </el-popover>
+        <el-button
+          icon="delete"
+          :disabled="!multipleSelection.length"
+          @click="onDelete"
+        >删除</el-button>
      </div>
      <el-table
        ref="multipleTable"
@@ -136,7 +114,6 @@
              <el-popover
                v-if="scope.row.body"
                placement="left-start"
-                trigger="click"
              >
                <div class="popover-box">
                  <pre>{{ fmtBody(scope.row.body) }}</pre>
@@ -161,7 +138,6 @@
              <el-popover
                v-if="scope.row.resp"
                placement="left-start"
-                trigger="click"
              >
                <div class="popover-box">
                  <pre>{{ fmtBody(scope.row.resp) }}</pre>
@@ -179,32 +155,12 @@
          label="操作"
        >
          <template #default="scope">
-            <el-popover
-              v-model="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="deleteSysOperationRecordFunc(scope.row)"
-                >确定</el-button>
-              </div>
-              <template #reference>
-                <el-button
-                  icon="delete"
-                  type="primary"
-                  link
-                  @click="scope.row.visible = true"
-                >删除</el-button>
-              </template>
-            </el-popover>
+            <el-button
+              icon="delete"
+              type="primary"
+              link
+              @click="deleteSysOperationRecordFunc(scope.row)"
+            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
@@ -231,7 +187,7 @@ import {
 } from '@/api/sysOperationRecord' // 此处请自行替换地址
 import { formatDate } from '@/utils/format'
 import { ref } from 'vue'
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'

 defineOptions({
  name: 'SysOperationRecord'
@@ -283,43 +239,52 @@ const getTableData = async() => {

 getTableData()

-const deleteVisible = ref(false)
 const multipleSelection = ref([])
 const handleSelectionChange = (val) => {
  multipleSelection.value = val
 }
 const onDelete = async() => {
-  const ids = []
-  multipleSelection.value &&
+  ElMessageBox.confirm('确定要删除吗?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(async() => {
+    const ids = []
+    multipleSelection.value &&
        multipleSelection.value.forEach(item => {
          ids.push(item.ID)
        })
-  const res = await deleteSysOperationRecordByIds({ ids })
-  if (res.code === 0) {
-    ElMessage({
-      type: 'success',
-      message: '删除成功'
-    })
-    if (tableData.value.length === ids.length && page.value > 1) {
-      page.value--
+    const res = await deleteSysOperationRecordByIds({ ids })
+    if (res.code === 0) {
+      ElMessage({
+        type: 'success',
+        message: '删除成功'
+      })
+      if (tableData.value.length === ids.length && page.value > 1) {
+        page.value--
+      }
+      getTableData()
    }
-    deleteVisible.value = false
-    getTableData()
-  }
+  })
 }
 const deleteSysOperationRecordFunc = async(row) => {
-  row.visible = false
-  const res = await deleteSysOperationRecord({ 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 deleteSysOperationRecord({ ID: row.ID })
+    if (res.code === 0) {
+      ElMessage({
+        type: 'success',
+        message: '删除成功'
+      })
+      if (tableData.value.length === 1 && page.value > 1) {
+        page.value--
+      }
+      getTableData()
    }
-    getTableData()
-  }
+  })
 }
 const fmtBody = (value) => {
  try {
@@ -95,31 +95,12 @@
          fixed="right"
        >
          <template #default="scope">
-            <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="deleteUserFunc(scope.row)"
-                >确定</el-button>
-              </div>
-              <template #reference>
-                <el-button
-                  type="primary"
-                  link
-                  icon="delete"
-                >删除</el-button>
-              </template>
-            </el-popover>
+            <el-button
+                type="primary"
+                link
+                icon="delete"
+                @click="deleteUserFunc(scope.row)"
+            >删除</el-button>
            <el-button
              type="primary"
              link
@@ -390,12 +371,17 @@ const setOptions = (authData) => {
 }

 const deleteUserFunc = async(row) => {
-  const res = await deleteUser({ id: row.ID })
-  if (res.code === 0) {
-    ElMessage.success('删除成功')
-    row.visible = false
-    await getTableData()
-  }
+  ElMessageBox.confirm('确定要删除吗?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(async () => {
+    const res = await deleteUser({ id: row.ID })
+    if (res.code === 0) {
+      ElMessage.success('删除成功')
+      await getTableData()
+    }
+  })
 }

 // 弹窗相关