Browse Source

[Fix][UI] Add loading before file modification data is returned. (#10450)

3.1.0-release
Amy0104 2 years ago committed by GitHub
parent
commit
d516369e80
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 83
      dolphinscheduler-ui/src/views/resource/file/edit/index.tsx
  2. 3
      dolphinscheduler-ui/src/views/resource/file/edit/use-edit.ts

83
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>
)
}

3
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) => {

Loading…
Cancel
Save