support modal close for datasources (#13586)

dolphinscheduler-ui/src/components/modal/index.tsx

@@ -74,7 +74,7 @@ const props = {
 const Modal = defineComponent({
   name: 'Modal',
   props,
-  emits: ['cancel', 'confirm', 'jumpLink'],
+  emits: ['cancel', 'confirm', 'jumpLink', 'maskClick'],
   setup(props, ctx) {
     const { t } = useI18n()
 
@@ -86,11 +86,22 @@ const Modal = defineComponent({
       ctx.emit('confirm')
     }
 
-    return { t, onCancel, onConfirm }
+    const onMaskClick = () => {
+      ctx.emit('maskClick')
+    }
+
+    return { t, onCancel, onConfirm, onMaskClick }
   },
   render() {
-    const { $slots, t, onCancel, onConfirm, confirmDisabled, confirmLoading } =
-      this
+    const {
+      $slots,
+      t,
+      onCancel,
+      onConfirm,
+      onMaskClick,
+      confirmDisabled,
+      confirmLoading
+    } = this
 
     return (
       <NModal
@@ -98,6 +109,7 @@ const Modal = defineComponent({
         class={styles.container}
         mask-closable={false}
         auto-focus={this.autoFocus}
+        onMaskClick={onMaskClick}
       >
         <NCard
           title={this.title}

dolphinscheduler-ui/src/views/datasource/list/index.tsx

@@ -23,13 +23,7 @@ import {
   toRefs,
   watch
 } from 'vue'
-import {
-  NButton,
-  NIcon,
-  NDataTable,
-  NPagination,
-  NSpace
-} from 'naive-ui'
+import { NButton, NIcon, NDataTable, NPagination, NSpace } from 'naive-ui'
 import { SearchOutlined } from '@vicons/antd'
 import { useI18n } from 'vue-i18n'
 import { useColumns } from './use-columns'
@@ -56,15 +50,17 @@ const list = defineComponent({
     const { data, changePage, changePageSize, deleteRecord, updateList } =
       useTable()
 
-    const { getColumns } = useColumns((id: number, type: 'edit' | 'delete', row?: any) => {
-      if (type === 'edit') {
-        showDetailModal.value = true
-        selectId.value = id
-        selectType.value = row.type
-      } else {
-        deleteRecord(id)
+    const { getColumns } = useColumns(
+      (id: number, type: 'edit' | 'delete', row?: any) => {
+        if (type === 'edit') {
+          showDetailModal.value = true
+          selectId.value = id
+          selectType.value = row.type
+        } else {
+          deleteRecord(id)
+        }
       }
-    })
+    )
 
     const onCreate = () => {
       selectId.value = null
@@ -83,6 +79,10 @@ const list = defineComponent({
       showSourceModal.value = true
     }
 
+    const handleSourceModalClose = () => {
+      showSourceModal.value = false
+    }
+
     onMounted(() => {
       changePage(1)
       columns.value = getColumns()
@@ -106,7 +106,8 @@ const list = defineComponent({
       trim,
       handleSelectSourceType,
       selectType,
-      handleSourceModalOpen
+      handleSourceModalOpen,
+      handleSourceModalClose
     }
   },
   render() {
@@ -127,7 +128,8 @@ const list = defineComponent({
       onUpdatedList,
       handleSelectSourceType,
       selectType,
-      handleSourceModalOpen
+      handleSourceModalOpen,
+      handleSourceModalClose
     } = this
 
     return (
@@ -144,9 +146,9 @@ const list = defineComponent({
             </NButton>
             <NSpace justify='end' wrap={false}>
               <Search
-                  v-model:value = {this.searchVal}
-                  placeholder = {t('datasource.search_input_tips')}
-                  onSearch={onUpdatedList}
+                v-model:value={this.searchVal}
+                placeholder={t('datasource.search_input_tips')}
+                onSearch={onUpdatedList}
               />
               <NButton type='primary' size='small' onClick={onUpdatedList}>
                 <NIcon>
@@ -180,7 +182,11 @@ const list = defineComponent({
             </NSpace>
           </NSpace>
         </Card>
-        <SourceModal show={showSourceModal} onChange={handleSelectSourceType}></SourceModal>
+        <SourceModal
+          show={showSourceModal}
+          onChange={handleSelectSourceType}
+          onMaskClick={handleSourceModalClose}
+        ></SourceModal>
         <DetailModal
           show={showDetailModal}
           id={id}

dolphinscheduler-ui/src/views/datasource/list/source-modal.tsx

@@ -15,14 +15,8 @@
  * limitations under the License.
  */
 
-import {
-  defineComponent,
-  PropType,
-  toRefs
-} from 'vue'
-import {
-  NSpace
-} from 'naive-ui'
+import { defineComponent, PropType, toRefs } from 'vue'
+import { NSpace } from 'naive-ui'
 import Modal from '@/components/modal'
 import { useI18n } from 'vue-i18n'
 import { useForm, datasourceTypeList } from './use-form'
@@ -41,7 +35,7 @@ const props = {
 const SourceModal = defineComponent({
   name: 'SourceModal',
   props,
-  emits: ['change'],
+  emits: ['change', 'maskClick'],
   setup(props, ctx) {
     const { t } = useI18n()
 
@@ -51,18 +45,19 @@ const SourceModal = defineComponent({
       ctx.emit('change', value)
     }
 
+    const handleMaskClick = () => {
+      ctx.emit('maskClick')
+    }
+
     return {
       t,
       ...toRefs(state),
-      handleTypeSelect
+      handleTypeSelect,
+      handleMaskClick
     }
   },
   render() {
-    const {
-      show,
-      t,
-      handleTypeSelect
-    } = this
+    const { show, t, handleTypeSelect, handleMaskClick } = this
 
     return (
       <Modal
@@ -71,13 +66,17 @@ const SourceModal = defineComponent({
         title={t('datasource.choose_datasource_type')}
         cancelShow={false}
         confirmShow={false}
+        onMaskClick={handleMaskClick}
       >
         {{
           default: () => (
             <div class={styles.content}>
               <NSpace>
                 {datasourceTypeList.map((item) => (
-                  <div class={[styles.itemBox, `${item.label}-box`]} onClick={() => handleTypeSelect(item.value)}>
+                  <div
+                    class={[styles.itemBox, `${item.label}-box`]}
+                    onClick={() => handleTypeSelect(item.value)}
+                  >
                     {item.label}
                   </div>
                 ))}