refactor(dialog): 优化对话框组件的配置和交互

- 修改了多个组件的关闭对话框逻辑，设置 wrapperClosable 为 false - 更新了多个组件的确认对话框逻辑，使用 $messageBox 替代 $confirm - 调整了部分对话框的样式和布局
2025-12-10 03:16:49 +08:00 · 2025-05-08 14:36:34 +08:00
parent fb5bcc16b9
commit 013bdb74b7
18 changed files with 182 additions and 123 deletions
--- a/src/components/RenderDialog/index.vue
+++ b/src/components/RenderDialog/index.vue
@@ -49,7 +49,7 @@ export default {
    },
    closeOnClickModal: {
      type: Boolean,
-      default: true
+      default: false
    },
    beforeClose: {
      type: Function,
--- a/src/views/app/layout/components/Sidebar/personal.vue
+++ b/src/views/app/layout/components/Sidebar/personal.vue
@@ -53,15 +53,24 @@ export default {
      this.$store.dispatch('app/toggleSideBar')
    },
    async logout() {
-      this.$confirm('确定要退出吗?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(async () => {
+      this.$messageBox(
+        async () => {
          await this.$store.dispatch('user/logout')
          await this.$store.dispatch('user/removeRoles')
          this.$router.push(`/login?redirect=${this.$route.fullPath}`)
-      })
+        },
+        '确定要退出吗?',
+        'warning',
+        '提示'
+      )
+
+      // this.$confirm({
+      //   confirmButtonText: '确定',
+      //   cancelButtonText: '取消',
+      //   type: 'warning'
+      // }).then(async () => {
+      //
+      // })
    },
    resetPassword() {
      this.resetPasswordVisible = true
--- a/src/views/knowledge/detail/components/HitTest/Index.vue
+++ b/src/views/knowledge/detail/components/HitTest/Index.vue
@@ -494,6 +494,7 @@ export default {
    <el-drawer
      append-to-body
      :modal="false"
+      :wrapperClosable="false"
      :visible.sync="dialogConfig.visible"
      :title="dialogConfig.title"
      :width="dialogConfig.width"
--- a/src/views/knowledge/detail/components/SearchSetting/Index.vue
+++ b/src/views/knowledge/detail/components/SearchSetting/Index.vue
@@ -5,6 +5,7 @@
      :visible.sync="visible"
      size="40%"
      @close="handleClose"
+      :wrapperClosable="false"
    >
      <el-form ref="form" :model="form" label-width="80%" label-position="top">
        <el-row>
--- a/src/views/knowledge/detail/components/documentDetail/DocumentDrawer.vue
+++ b/src/views/knowledge/detail/components/documentDetail/DocumentDrawer.vue
@@ -3,6 +3,7 @@
  <el-drawer
    :visible.sync="visible"
    size="80%"
+    :wrapperClosable="false"
    @close="$emit('update:visible', false)"
  >
    <!-- drawer title -->
@@ -31,6 +32,7 @@
    ></knowledgeInfo>
    <!-- 将metadata-operator改为弹窗形式 -->
    <el-drawer
+      :wrapperClosable="false"
      title="元数据操作"
      :visible.sync="metadataDialogVisible"
      width="600px"
--- a/src/views/knowledge/detail/components/documentDetail/QAModel.vue
+++ b/src/views/knowledge/detail/components/documentDetail/QAModel.vue
@@ -28,6 +28,7 @@

    <!-- 弹窗 -->
    <el-drawer
+      :wrapperClosable="false"
      title="问答详情"
      :visible.sync="dialogVisible"
      width="50%"
--- a/src/views/knowledge/detail/components/documentDetail/TextModel.vue
+++ b/src/views/knowledge/detail/components/documentDetail/TextModel.vue
@@ -41,6 +41,7 @@
    <!-- 弹窗 -->
    <el-drawer
      title="分段详情"
+      :wrapperClosable="false"
      :visible.sync="dialogVisible"
      :modal="false"
      append-to-body
--- a/src/views/knowledge/detail/components/metaData/Index.vue
+++ b/src/views/knowledge/detail/components/metaData/Index.vue
@@ -231,13 +231,15 @@ export default {
      this.currentEditIndex = index
    },
    deleteMeta(item) {
-      this.$confirm(`确认删除该元数据吗？`, '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        this.handleDelete(item)
-      })
+      this.$messageBox(()=>{  this.handleDelete(item)},`确认删除该元数据吗？`, 'warning','提示')
+
+      // this.$confirm(, {
+      //   confirmButtonText: '确定',
+      //   cancelButtonText: '取消',
+      //   type: 'warning'
+      // }).then(() => {
+      //
+      // })
    },
    handleDelete(item) {
      deleteMetadata([item.id]).then(res => {
--- a/src/views/knowledge/detail/components/split/AddRule.vue
+++ b/src/views/knowledge/detail/components/split/AddRule.vue
@@ -9,6 +9,7 @@
      "
      :visible.sync="dialogVisible"
      size="30%"
+      :wrapperClosable="false"
      :before-close="handleClose"
    >
      <div class="content">
--- a/src/views/knowledge/detail/components/words/AddRule.vue
+++ b/src/views/knowledge/detail/components/words/AddRule.vue
@@ -8,6 +8,7 @@
          : '新增知识题词规则'
      "
      :visible.sync="dialogVisible"
+      :wrapperClosable="false"
      size="30%"
      :before-close="handleClose"
    >
--- a/src/views/knowledge/detail/index.vue
+++ b/src/views/knowledge/detail/index.vue
@@ -211,6 +211,7 @@
    <el-drawer
      :title="metaDataDrawer.title"
      :visible.sync="metaDataDrawer.visible"
+      :wrapperClosable="false"
      size="30%"
    >
      <meta-data ref="metaData" :datasetId="$route.query.datasetId"></meta-data>
@@ -221,6 +222,7 @@
      :title="metadataOperatorDrawer.title"
      :visible.sync="metadataOperatorDrawer.visible"
      size="30%"
+      :wrapperClosable="false"
    >
      <metadata-operator
        ref="metadataOperator"
--- a/src/views/knowledge/index.vue
+++ b/src/views/knowledge/index.vue
@@ -178,11 +178,8 @@ export default {
      })
    },
    deleteKnowLedge(item) {
-      this.$confirm('此操作将永久删除该知识库, 是否继续?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
+      this.$messageBox(
+        () => {
          datasetDelete({ id: item.id }).then(res => {
            if (res.content.result === '0') {
              this.$message({
@@ -192,7 +189,19 @@ export default {
              this.getList()
            }
          })
-      })
+        },
+        '此操作将永久删除该知识库, 是否继续?',
+        'warning',
+        '提示'
+      )
+
+      // this.$confirm(, {
+      //   confirmButtonText: '确定',
+      //   cancelButtonText: '取消',
+      //   type: 'warning'
+      // }).then(() => {
+      //
+      // })
    },
    getKnowledgeImage(index) {
      const images = [
--- a/src/views/rules/Index.vue
+++ b/src/views/rules/Index.vue
@@ -193,11 +193,8 @@ export default {
    },
    // 处理删除规则`
    handleDelete(row, index) {
-      this.$confirm('此操作将永久删除该规则, 是否继续?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
+      this.$messageBox(
+        () => {
          deleteRule([row.id])
            .then(() => {
              // 删除当前行
@@ -219,7 +216,19 @@ export default {
                )
              })
            })
-      })
+        },
+        '此操作将永久删除该规则, 是否继续?',
+        'warning',
+        '提示'
+      )
+
+      // this.$confirm(, {
+      //   confirmButtonText: '确定',
+      //   cancelButtonText: '取消',
+      //   type: 'warning'
+      // }).then(() => {
+      //
+      // })
    },
    // 处理查询
    handleQuery() {
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -226,12 +226,8 @@ export default {
      this.handleQuery()
    },
    handleDelete(row) {
-      this.$confirm('确认删除该菜单吗？', '警告', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      })
-        .then(() => {
+      this.$messageBox(
+        () => {
          this.loading = true
          // 将id放入数组中传递
          deleteMenu([row.id])
@@ -245,10 +241,23 @@ export default {
            .finally(() => {
              this.loading = false
            })
-        })
-        .catch(() => {
-          this.$message.info('已取消删除')
-        })
+        },
+        '确认删除该菜单吗？',
+        'warning',
+        '警告'
+      )
+
+      // this.$confirm(, {
+      //   confirmButtonText: '确定',
+      //   cancelButtonText: '取消',
+      //   type: 'warning'
+      // })
+      //   .then(() => {
+      //
+      //   })
+      //   .catch(() => {
+      //     this.$message.info('已取消删除')
+      //   })
    }
  }
 }
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -67,6 +67,7 @@
    <el-drawer
      :visible.sync="permissionDrawer.visible"
      :title="permissionDrawer.title"
+      :wrapperClosable="false"
      size="60%"
    >
      <el-tree
@@ -329,12 +330,8 @@ export default {
      this.handleQuery()
    },
    handleDelete(row) {
-      this.$confirm('确认删除该角色吗？', '警告', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      })
-        .then(() => {
+      this.$messageBox(
+        () => {
          this.loading = true
          // 将id放入数组中传递
          deleteRole([row.id])
@@ -348,10 +345,23 @@ export default {
            .finally(() => {
              this.loading = false
            })
-        })
-        .catch(() => {
-          this.$message.info('已取消删除')
-        })
+        },
+        '确认删除该角色吗？',
+        'warning',
+        '警告'
+      )
+
+      // this.$confirm('确认删除该角色吗？', '警告', {
+      //   confirmButtonText: '确定',
+      //   cancelButtonText: '取消',
+      //   type: 'warning'
+      // })
+      //   .then(() => {
+      //
+      //   })
+      //   .catch(() => {
+      //     this.$message.info('已取消删除')
+      //   })
    },
    // 关闭权限抽屉
    handleOnClose() {
--- a/src/views/system/user/components/UserDialog.vue
+++ b/src/views/system/user/components/UserDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-dialog
+  <r-dialog
    :title="title"
    :visible.sync="visible"
    width="800px"
@@ -94,17 +94,17 @@
    <div slot="footer" class="dialog-footer" v-if="!isView">
      <el-button
        type="primary"
-        size="small"
+        size="medium"
        :loading="loading"
        @click="submitForm"
        >确 定</el-button
      >
-      <el-button size="small" @click="handleClose">取 消</el-button>
+      <el-button size="medium" @click="handleClose">取 消</el-button>
    </div>
    <div slot="footer" class="dialog-footer" v-else>
-      <el-button size="small" @click="handleClose">关 闭</el-button>
+      <el-button size="medium" @click="handleClose">关 闭</el-button>
    </div>
-  </el-dialog>
+  </r-dialog>
 </template>

 <script>
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -316,12 +316,8 @@ export default {
      this.getUserList()
    },
    handleDelete(row) {
-      this.$confirm('确认删除该用户吗？', '警告', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      })
-        .then(() => {
+      this.$messageBox(
+        () => {
          this.loading = true
          // 将id放入数组中传递
          deleteUser([row.id])
@@ -335,18 +331,17 @@ export default {
            .finally(() => {
              this.loading = false
            })
-        })
-        .catch(() => {
-          this.$message.info('已取消删除')
-        })
+        },
+        '确认删除该用户吗？',
+        'warning',
+        '警告'
+      )
    },
    handleToggleStatus(row) {
      const statusText = row.status === 0 ? '停用' : '启用'
-      this.$confirm(`确认${statusText}该用户吗？`, '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
+
+      this.$messageBox(
+        () => {
          // 调用changeUserStatus接口
          const newStatus = row.status === 0 ? 1 : 0 // 切换状态
          changeUserStatus({
@@ -360,15 +355,16 @@ export default {
            .catch(() => {
              this.$message.error(`${statusText}用户出错`)
            })
-      })
+        },
+        `确认${statusText}该用户吗？`,
+        'warning',
+        '提示'
+      )
    },
    handleResetPassword(row) {
      this.currentUserId = row.id
-      this.$confirm('确认重置该用户的密码吗？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
+      this.$messageBox(
+        () => {
          // 调用resetPassword接口
          resetPassword({
            userId: row.id
@@ -376,7 +372,11 @@ export default {
            this.$message.success('重置密码成功')
            this.handleQuery() // 刷新列表
          })
-      })
+        },
+        '确认重置该用户的密码吗？',
+        'warning',
+        '提示'
+      )
    }
  }
 }
--- a/src/views/track/Index.vue
+++ b/src/views/track/Index.vue
@@ -316,6 +316,7 @@ export default {
      <el-drawer
        :title="activeForm.datasetName"
        :visible.sync="infoDialogVisible"
+        :wrapperClosable="false"
        size="80%"
        :before-close="() => (infoDialogVisible = false)"
      >