From 18c384c60aa87159a761ae35d67ebcdec8a6009f Mon Sep 17 00:00:00 2001
From: Devosend <devosend@gmail.com>
Date: Tue, 1 Mar 2022 22:21:07 +0800
Subject: [PATCH] [Fix-8615][UI Next][V1.0.0-Alpha] Fix resource manage file
 edit page blank bug (#8631)

---
 .../src/service/modules/resources/index.ts    |  5 ++-
 .../src/service/modules/resources/types.ts    |  8 ++++-
 .../src/views/resource/file/create/index.tsx  |  2 +-
 .../src/views/resource/file/edit/index.tsx    | 34 +++++++++----------
 .../src/views/resource/file/edit/use-edit.ts  |  5 ++-
 5 files changed, 33 insertions(+), 21 deletions(-)

diff --git a/dolphinscheduler-ui-next/src/service/modules/resources/index.ts b/dolphinscheduler-ui-next/src/service/modules/resources/index.ts
index 061033d4ee..4aae095c9a 100644
--- a/dolphinscheduler-ui-next/src/service/modules/resources/index.ts
+++ b/dolphinscheduler-ui-next/src/service/modules/resources/index.ts
@@ -223,7 +223,10 @@ export function updateResourceContent(data: ContentReq, id: number): any {
   })
 }
 
-export function viewResource(params: ViewResourceReq, id: number): any {
+export function viewResource(
+  params: ViewResourceReq,
+  id: number
+): ResourceViewRes {
   return axios({
     url: `/resources/${id}/view`,
     method: 'get',
diff --git a/dolphinscheduler-ui-next/src/service/modules/resources/types.ts b/dolphinscheduler-ui-next/src/service/modules/resources/types.ts
index 57038e5878..70d7752f87 100644
--- a/dolphinscheduler-ui-next/src/service/modules/resources/types.ts
+++ b/dolphinscheduler-ui-next/src/service/modules/resources/types.ts
@@ -113,6 +113,11 @@ interface ResourceListRes {
   totalList: ResourceFile[]
 }
 
+interface ResourceViewRes {
+  alias: string
+  content: string
+}
+
 export {
   FileReq,
   ResourceTypeReq,
@@ -131,5 +136,6 @@ export {
   ViewResourceReq,
   ResourceIdReq,
   UdfFuncReq,
-  ResourceListRes
+  ResourceListRes,
+  ResourceViewRes
 }
diff --git a/dolphinscheduler-ui-next/src/views/resource/file/create/index.tsx b/dolphinscheduler-ui-next/src/views/resource/file/create/index.tsx
index f16e0a5f80..d6d0f7b45f 100644
--- a/dolphinscheduler-ui-next/src/views/resource/file/create/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/resource/file/create/index.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, ref, toRefs } from 'vue'
+import { defineComponent, toRefs } from 'vue'
 import { useRouter } from 'vue-router'
 import { NForm, NFormItem, NInput, NSelect, NButton } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
diff --git a/dolphinscheduler-ui-next/src/views/resource/file/edit/index.tsx b/dolphinscheduler-ui-next/src/views/resource/file/edit/index.tsx
index 6b4d5efd3e..bffa25214d 100644
--- a/dolphinscheduler-ui-next/src/views/resource/file/edit/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/resource/file/edit/index.tsx
@@ -15,46 +15,46 @@
  * limitations under the License.
  */
 
-import { useRouter } from 'vue-router'
-import { defineComponent, onMounted, ref, toRefs } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { defineComponent, toRefs, watch } from 'vue'
 import { NButton, NForm, NFormItem, NSpace } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import Card from '@/components/card'
 import MonacoEditor from '@/components/monaco-editor'
 import { useForm } from './use-form'
 import { useEdit } from './use-edit'
-
 import styles from '../index.module.scss'
-import type { Router } from 'vue-router'
 
 export default defineComponent({
   name: 'ResourceFileEdit',
   setup() {
-    const router: Router = useRouter()
+    const route = useRoute()
+    const router = useRouter()
 
-    const resourceViewRef = ref()
-    const routeNameRef = ref(router.currentRoute.value.name)
-    const idRef = ref(Number(router.currentRoute.value.params.id))
+    const componentName = route.name
+    const fileId = Number(route.params.id)
 
     const { state } = useForm()
     const { getResourceView, handleUpdateContent } = useEdit(state)
 
     const handleFileContent = () => {
       state.fileForm.content = resourceViewRef.value.content
-      handleUpdateContent(idRef.value)
+      handleUpdateContent(fileId)
     }
 
     const handleReturn = () => {
       router.go(-1)
     }
 
-    onMounted(() => {
-      resourceViewRef.value = getResourceView(idRef.value)
-    })
+    const resourceViewRef = getResourceView(fileId)
+
+    watch(
+      () => resourceViewRef.value.content,
+      () => (state.fileForm.content = resourceViewRef.value.content)
+    )
 
     return {
-      idRef,
-      routeNameRef,
+      componentName,
       resourceViewRef,
       handleReturn,
       handleFileContent,
@@ -67,7 +67,7 @@ export default defineComponent({
       <Card title={t('resource.file.file_details')}>
         <div class={styles['file-edit-content']}>
           <h2>
-            <span>{this.resourceViewRef.value?.alias}</span>
+            <span>{this.resourceViewRef.alias}</span>
           </h2>
           <NForm
             rules={this.rules}
@@ -77,11 +77,11 @@ export default defineComponent({
             <NFormItem path='content'>
               <div style={{ width: '90%' }}>
                 <MonacoEditor
-                  v-model={[this.resourceViewRef.value.content, 'value']}
+                  v-model={[this.resourceViewRef.content, 'value']}
                 />
               </div>
             </NFormItem>
-            {this.routeNameRef === 'resource-file-edit' && (
+            {this.componentName === 'resource-file-edit' && (
               <NSpace>
                 <NButton
                   type='info'
diff --git a/dolphinscheduler-ui-next/src/views/resource/file/edit/use-edit.ts b/dolphinscheduler-ui-next/src/views/resource/file/edit/use-edit.ts
index f48a7c790c..1a2e2ed3da 100644
--- a/dolphinscheduler-ui-next/src/views/resource/file/edit/use-edit.ts
+++ b/dolphinscheduler-ui-next/src/views/resource/file/edit/use-edit.ts
@@ -33,7 +33,10 @@ export function useEdit(state: any) {
       skipLineNum: 0,
       limit: 3000
     }
-    const { state } = useAsyncState(viewResource(params, id), {})
+    const { state } = useAsyncState(viewResource(params, id), {
+      alias: '',
+      content: ''
+    })
     return state
   }