feat(components): 优化对话框组件并添加关闭功能

- 在 RenderDialog 组件中添加 close 方法，用于关闭对话框
- 优化 knowledgeForm 组件的代码结构和样式
- 在 knowledgeForm 组件中添加对 visible 属性的监听，以同步更新父组件的状态- 修复 knowledgeForm 组件中的保存逻辑

src/components/RenderDialog/index.vue

@@ -74,10 +74,11 @@ export default {
       this.$emit('confirm')
       // this.$emit('update:visible', false)
     },
+    close() {
+      this.cancel()
+    },
     handleBeforeClose() {
-      this.beforeClose
-        ? this.beforeClose()
-        : (this.$emit('cancel'), this.$emit('update:visible', false))
+      this.beforeClose ? this.beforeClose() : this.cancel()
     }
   },
   created() {},

src/views/knowledge/detail/components/knowledgeForm.vue

@@ -1,11 +1,22 @@
 <template>
-  <r-dialog :visible.sync="visible" :title="(datasetId ? `修改` : `新增`) + '知识库'" destroy-on-close width="500px">
+  <r-dialog
+    :visible.sync="visible"
+    :title="(datasetId ? `修改` : `新增`) + '知识库'"
+    destroy-on-close
+    width="500px"
+  >
     <div slot="header" class="clearfix">
       <h3>{{ datasetId ? '修改' : '新增' }}</h3>
     </div>
     <el-row>
       <el-col>
-        <el-form :model="model" ref="model" label-width="120px" :rules="rules" label-position="top">
+        <el-form
+          :model="model"
+          ref="model"
+          label-width="120px"
+          :rules="rules"
+          label-position="top"
+        >
           <el-form-item label="知识库名称：" prop="name">
             <el-input v-model="model.name" size="medium"></el-input>
           </el-form-item>
@@ -14,7 +25,11 @@
             <el-input type="textarea" v-model="model.description"></el-input>
           </el-form-item>
 
-          <el-form-item label="分段模式：" prop="segmentedMode" v-if="datasetId">
+          <el-form-item
+            label="分段模式："
+            prop="segmentedMode"
+            v-if="datasetId"
+          >
             {{ model.segmentedMode | filterSegmentedMode }}
           </el-form-item>
           <el-form-item label="分段模式：" prop="segmentedMode" v-else>
@@ -27,12 +42,32 @@
       </el-col>
     </el-row>
     <div slot="footer" :span="24">
-      <el-button size="medium" v-if="!infoDialogVisible" @click="$emit('update:visible', false)">取消</el-button>
-      <el-button type="primary" size="medium" @click="save" v-if="!infoDialogVisible">
+      <el-button
+        size="medium"
+        v-if="!infoDialogVisible"
+        @click="$emit('update:visible', false)"
+        >取消</el-button
+      >
+      <el-button
+        type="primary"
+        size="medium"
+        @click="save"
+        v-if="!infoDialogVisible"
+      >
         {{ datasetId ? '保存' : '创建' }}
       </el-button>
-      <el-button size="medium" @click="jumpKnowledgeList" v-if="infoDialogVisible">返回知识库列表</el-button>
-      <el-button size="medium" @click="jumpKnowledgeDetail" v-if="infoDialogVisible">查看知识库详情</el-button>
+      <el-button
+        size="medium"
+        @click="jumpKnowledgeList"
+        v-if="infoDialogVisible"
+        >返回知识库列表</el-button
+      >
+      <el-button
+        size="medium"
+        @click="jumpKnowledgeDetail"
+        v-if="infoDialogVisible"
+        >查看知识库详情</el-button
+      >
     </div>
   </r-dialog>
 
@@ -41,7 +76,11 @@
 <script>
 import 'nprogress/nprogress.css' // progress bar style
 
-import { datasetCreate, datasetUpdate, getDatasetById } from '@/api/generatedApi'
+import {
+  datasetCreate,
+  datasetUpdate,
+  getDatasetById
+} from '@/api/generatedApi'
 
 export default {
   name: 'knowledgeForm',
@@ -56,7 +95,9 @@ export default {
         id: null
       },
       rules: {
-        name: [{ required: true, message: '请输入知识库名称', trigger: 'blur' }],
+        name: [
+          { required: true, message: '请输入知识库名称', trigger: 'blur' }
+        ],
         segmentedMode: [{ required: true, message: '请选择分段模式' }]
       }
     }
@@ -72,6 +113,15 @@ export default {
     }
   },
   watch: {
+    visible: {
+      handler(val) {
+        this.$nextTick(() => {
+          this.$emit('update:visible', val)
+        })
+      },
+      immediate: true
+    },
+
     datasetId(val) {
       if (val) {
         this.getDetail()
@@ -126,7 +176,8 @@ export default {
         if (!valid) {
           return false
         }
-        ;(!this.datasetId ? datasetCreate : datasetUpdate)(this.model).then(res => {
+        ;(!this.datasetId ? datasetCreate : datasetUpdate)(this.model).then(
+          res => {
             if (res) {
               // 添加保存成功的提示
               this.$message.success('保存成功')
@@ -135,7 +186,8 @@ export default {
               this.$emit('update:visible', false)
               // this.$router.go(-1)
             }
-        })
+          }
+        )
       })
     }
   },