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 <[email protected]> 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) => {
