Browse Source

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

(cherry picked from commit d516369e80)
3.0.0/version-upgrade
Amy0104 2 years ago committed by devosend
parent
commit
788e334329
  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 { useRoute, useRouter } from 'vue-router'
import { defineComponent, toRefs, watch } from 'vue' 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 { useI18n } from 'vue-i18n'
import { useForm } from './use-form' import { useForm } from './use-form'
import { useEdit } from './use-edit' import { useEdit } from './use-edit'
@ -38,7 +38,7 @@ export default defineComponent({
const { getResourceView, handleUpdateContent } = useEdit(state) const { getResourceView, handleUpdateContent } = useEdit(state)
const handleFileContent = () => { const handleFileContent = () => {
state.fileForm.content = resourceViewRef.value.content state.fileForm.content = resourceViewRef.state.value.content
handleUpdateContent(fileId) handleUpdateContent(fileId)
} }
@ -47,10 +47,9 @@ export default defineComponent({
} }
const resourceViewRef = getResourceView(fileId) const resourceViewRef = getResourceView(fileId)
watch( watch(
() => resourceViewRef.value.content, () => resourceViewRef.state.value.content,
() => (state.fileForm.content = resourceViewRef.value.content) () => (state.fileForm.content = resourceViewRef.state.value.content)
) )
return { return {
@ -65,44 +64,52 @@ export default defineComponent({
const { t } = useI18n() const { t } = useI18n()
return ( return (
<Card title={t('resource.file.file_details')}> <Card title={t('resource.file.file_details')}>
<div class={styles['file-edit-content']}> {this.resourceViewRef.isReady.value ? (
<h2> <div class={styles['file-edit-content']}>
<span>{this.resourceViewRef.alias}</span> <h2>
</h2> <span>{this.resourceViewRef.state.value.alias}</span>
<NForm </h2>
rules={this.rules} <NForm
ref='fileFormRef' rules={this.rules}
class={styles['form-content']} ref='fileFormRef'
disabled={this.componentName !== 'resource-file-edit'} class={styles['form-content']}
> disabled={this.componentName !== 'resource-file-edit'}
<NFormItem path='content'> >
<MonacoEditor v-model={[this.resourceViewRef.content, 'value']} /> <NFormItem path='content'>
</NFormItem> <MonacoEditor
<NSpace> v-model={[this.resourceViewRef.state.value.content, 'value']}
<NButton />
type='info' </NFormItem>
size='small' <NSpace>
text
style={{ marginRight: '15px' }}
onClick={this.handleReturn}
class='btn-cancel'
>
{t('resource.file.return')}
</NButton>
{this.componentName === 'resource-file-edit' && (
<NButton <NButton
type='info' type='info'
size='small' size='small'
round text
onClick={() => this.handleFileContent()} style={{ marginRight: '15px' }}
class='btn-submit' onClick={this.handleReturn}
class='btn-cancel'
> >
{t('resource.file.save')} {t('resource.file.return')}
</NButton> </NButton>
)} {this.componentName === 'resource-file-edit' && (
</NSpace> <NButton
</NForm> type='info'
</div> 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> </Card>
) )
} }

3
dolphinscheduler-ui/src/views/resource/file/edit/use-edit.ts

@ -33,11 +33,10 @@ export function useEdit(state: any) {
skipLineNum: 0, skipLineNum: 0,
limit: 3000 limit: 3000
} }
const { state } = useAsyncState(viewResource(params, id), { return useAsyncState(viewResource(params, id), {
alias: '', alias: '',
content: '' content: ''
}) })
return state
} }
const handleUpdateContent = (id: number) => { const handleUpdateContent = (id: number) => {

Loading…
Cancel
Save