You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dolphinscheduler.apache.org by li...@apache.org on 2022/06/18 13:53:51 UTC
[dolphinscheduler] 14/16: [Fix][UI] Add loading before file modification data is returned. (#10450)
This is an automated email from the ASF dual-hosted git repository.
liudongkai pushed a commit to branch 3.0.0-beta-2-prepare
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler.git
commit 788e3343291b7a4b2d080f7050f6ed574c249802
Author: Amy0104 <97...@users.noreply.github.com>
AuthorDate: Wed Jun 15 15:06:06 2022 +0800
[Fix][UI] Add loading before file modification data is returned. (#10450)
(cherry picked from commit d516369e8076166ec85227f4adf3d1e9085285a6)
---
.../src/views/resource/file/edit/index.tsx | 83 ++++++++++++----------
.../src/views/resource/file/edit/use-edit.ts | 3 +-
2 files changed, 46 insertions(+), 40 deletions(-)
diff --git a/dolphinscheduler-ui/src/views/resource/file/edit/index.tsx b/dolphinscheduler-ui/src/views/resource/file/edit/index.tsx
index 9845bdbff4..73686ba053 100644
--- a/dolphinscheduler-ui/src/views/resource/file/edit/index.tsx
+++ b/dolphinscheduler-ui/src/views/resource/file/edit/index.tsx
@@ -17,7 +17,7 @@
import { useRoute, useRouter } from 'vue-router'
import { defineComponent, toRefs, watch } from 'vue'
-import { NButton, NForm, NFormItem, NSpace } from 'naive-ui'
+import { NButton, NForm, NFormItem, NSpace, NSpin } from 'naive-ui'
import { useI18n } from 'vue-i18n'
import { useForm } from './use-form'
import { useEdit } from './use-edit'
@@ -38,7 +38,7 @@ export default defineComponent({
const { getResourceView, handleUpdateContent } = useEdit(state)
const handleFileContent = () => {
- state.fileForm.content = resourceViewRef.value.content
+ state.fileForm.content = resourceViewRef.state.value.content
handleUpdateContent(fileId)
}
@@ -47,10 +47,9 @@ export default defineComponent({
}
const resourceViewRef = getResourceView(fileId)
-
watch(
- () => resourceViewRef.value.content,
- () => (state.fileForm.content = resourceViewRef.value.content)
+ () => resourceViewRef.state.value.content,
+ () => (state.fileForm.content = resourceViewRef.state.value.content)
)
return {
@@ -65,44 +64,52 @@ export default defineComponent({
const { t } = useI18n()
return (
<Card title={t('resource.file.file_details')}>
- <div class={styles['file-edit-content']}>
- <h2>
- <span>{this.resourceViewRef.alias}</span>
- </h2>
- <NForm
- rules={this.rules}
- ref='fileFormRef'
- class={styles['form-content']}
- disabled={this.componentName !== 'resource-file-edit'}
- >
- <NFormItem path='content'>
- <MonacoEditor v-model={[this.resourceViewRef.content, 'value']} />
- </NFormItem>
- <NSpace>
- <NButton
- type='info'
- size='small'
- text
- style={{ marginRight: '15px' }}
- onClick={this.handleReturn}
- class='btn-cancel'
- >
- {t('resource.file.return')}
- </NButton>
- {this.componentName === 'resource-file-edit' && (
+ {this.resourceViewRef.isReady.value ? (
+ <div class={styles['file-edit-content']}>
+ <h2>
+ <span>{this.resourceViewRef.state.value.alias}</span>
+ </h2>
+ <NForm
+ rules={this.rules}
+ ref='fileFormRef'
+ class={styles['form-content']}
+ disabled={this.componentName !== 'resource-file-edit'}
+ >
+ <NFormItem path='content'>
+ <MonacoEditor
+ v-model={[this.resourceViewRef.state.value.content, 'value']}
+ />
+ </NFormItem>
+ <NSpace>
<NButton
type='info'
size='small'
- round
- onClick={() => this.handleFileContent()}
- class='btn-submit'
+ text
+ style={{ marginRight: '15px' }}
+ onClick={this.handleReturn}
+ class='btn-cancel'
>
- {t('resource.file.save')}
+ {t('resource.file.return')}
</NButton>
- )}
- </NSpace>
- </NForm>
- </div>
+ {this.componentName === 'resource-file-edit' && (
+ <NButton
+ type='info'
+ size='small'
+ round
+ onClick={() => this.handleFileContent()}
+ class='btn-submit'
+ >
+ {t('resource.file.save')}
+ </NButton>
+ )}
+ </NSpace>
+ </NForm>
+ </div>
+ ) : (
+ <NSpace justify='center'>
+ <NSpin show={true} />
+ </NSpace>
+ )}
</Card>
)
}
diff --git a/dolphinscheduler-ui/src/views/resource/file/edit/use-edit.ts b/dolphinscheduler-ui/src/views/resource/file/edit/use-edit.ts
index 7dac246bb3..d2edaa9665 100644
--- a/dolphinscheduler-ui/src/views/resource/file/edit/use-edit.ts
+++ b/dolphinscheduler-ui/src/views/resource/file/edit/use-edit.ts
@@ -33,11 +33,10 @@ export function useEdit(state: any) {
skipLineNum: 0,
limit: 3000
}
- const { state } = useAsyncState(viewResource(params, id), {
+ return useAsyncState(viewResource(params, id), {
alias: '',
content: ''
})
- return state
}
const handleUpdateContent = (id: number) => {