You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dolphinscheduler.apache.org by ch...@apache.org on 2023/02/20 11:10:53 UTC
[dolphinscheduler] branch dev updated: support modal close for datasources (#13586)
This is an automated email from the ASF dual-hosted git repository.
chufenggao pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler.git
The following commit(s) were added to refs/heads/dev by this push:
new eaf2541018 support modal close for datasources (#13586)
eaf2541018 is described below
commit eaf2541018a1818ad5a0f1cbefe98b095bcc9b8b
Author: Devosend <de...@gmail.com>
AuthorDate: Mon Feb 20 19:10:38 2023 +0800
support modal close for datasources (#13586)
---
dolphinscheduler-ui/src/components/modal/index.tsx | 20 +++++++--
.../src/views/datasource/list/index.tsx | 48 ++++++++++++----------
.../src/views/datasource/list/source-modal.tsx | 31 +++++++-------
3 files changed, 58 insertions(+), 41 deletions(-)
diff --git a/dolphinscheduler-ui/src/components/modal/index.tsx b/dolphinscheduler-ui/src/components/modal/index.tsx
index 79aeb0c4a6..db39caba20 100644
--- a/dolphinscheduler-ui/src/components/modal/index.tsx
+++ b/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}
diff --git a/dolphinscheduler-ui/src/views/datasource/list/index.tsx b/dolphinscheduler-ui/src/views/datasource/list/index.tsx
index 275ba08ddb..546c093c59 100644
--- a/dolphinscheduler-ui/src/views/datasource/list/index.tsx
+++ b/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}
diff --git a/dolphinscheduler-ui/src/views/datasource/list/source-modal.tsx b/dolphinscheduler-ui/src/views/datasource/list/source-modal.tsx
index c874d6189f..4cec77c8b1 100644
--- a/dolphinscheduler-ui/src/views/datasource/list/source-modal.tsx
+++ b/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>
))}