[improvement][Resources] Improve details page return to the previous list page (#14951) (#14954)

zhutong6688 · SbloodyS · web-flow · commit 166ef69066e6 · 2023-10-12T22:07:33.000-05:00
* Update ResourcesServiceImpl.java * Update index.tsx feature-14951:Improvement details page * Update use-edit.ts * Update use-table.ts * Update index.tsx * [improvement] improve details page return to the previous list page (#14951) improve details page return to the previous list page * [improvement] improve details page return to the previous list page (#14951) improve details page return to the previous list page * [improvement] improve details page return to the previous list page (#14951) improve details page return to the previous list page * [improvement] improve details page return to the previous list page (#14951) improve details page return to the previous list page * [improvement] improve details page return to the previous list page (#14951) improve details page return to the previous list page * [improvement] improve details page return to the previous list page (#14951) improve details page return to the previous list page --------- Co-authored-by: xiangzihao <460888207@qq.com>
diff --git a/dolphinscheduler-ui/src/views/resource/components/resource/edit/index.tsx b/dolphinscheduler-ui/src/views/resource/components/resource/edit/index.tsx
@@ -20,7 +20,7 @@ import { defineComponent, toRefs, watch } from 'vue'
 import { NButton, NForm, NFormItem, NSpace, NSpin } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import { useForm } from './use-form'
-import { useEdit } from './use-edit'
+import { useEdit, useIsDetailPageStore } from './use-edit'
 import Card from '@/components/card'
 import MonacoEditor from '@/components/monaco-editor'
 import styles from '../index.module.scss'
@@ -30,7 +30,9 @@ export default defineComponent({
   setup() {
     const route = useRoute()
     const router = useRouter()
-
+    const isDetailPageStore = useIsDetailPageStore()
+    isDetailPageStore.$reset()
+    
     const componentName = route.name
     // fullname is now the id of resources
     const fullName = String(router.currentRoute.value.query.prefix || '')
@@ -40,11 +42,13 @@ export default defineComponent({
     const { getResourceView, handleUpdateContent } = useEdit(state)
 
     const handleFileContent = () => {
+      isDetailPageStore.setIsDetailPage(true)
       state.fileForm.content = resourceViewRef.state.value.content
       handleUpdateContent(fullName, tenantCode)
     }
 
     const handleReturn = () => {
+      isDetailPageStore.setIsDetailPage(true)
       router.go(-1)
     }
 
diff --git a/dolphinscheduler-ui/src/views/resource/components/resource/edit/use-edit.ts b/dolphinscheduler-ui/src/views/resource/components/resource/edit/use-edit.ts
@@ -23,6 +23,7 @@ import {
   updateResourceContent,
   viewResource
 } from '@/service/modules/resources'
+import { defineStore } from 'pinia'
 
 export function useEdit(state: any) {
   const { t } = useI18n()
@@ -61,3 +62,29 @@ export function useEdit(state: any) {
     handleUpdateContent
   }
 }
+
+export const useIsDetailPageStore = defineStore("isDetailPage", {
+  state:() => {
+    return {
+      isDetailPage:false
+    }
+  },
+  getters: {
+    getIsDetailPage(): boolean {
+      return this.isDetailPage
+    }
+  },
+  actions: {
+    setIsDetailPage(isDetailPage: boolean) {
+      this.isDetailPage = isDetailPage
+    }
+  }
+})
+
+export const isEmpty = (string: any): boolean => {
+    if(string === '' || string === undefined || string === null){
+        return true
+    }else{
+        return false
+    }
+}
diff --git a/dolphinscheduler-ui/src/views/resource/components/resource/index.tsx b/dolphinscheduler-ui/src/views/resource/components/resource/index.tsx
@@ -19,6 +19,7 @@ import { useRouter } from 'vue-router'
 import {
   defineComponent,
   onMounted,
+  onUnmounted,
   ref,
   getCurrentInstance,
   PropType,
@@ -37,7 +38,8 @@ import {
 } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import { SearchOutlined } from '@vicons/antd'
-import { useTable } from './table/use-table'
+import { useTable, useDetailPageStore } from './table/use-table'
+import { useIsDetailPageStore, isEmpty } from './edit/use-edit'
 import { useFileStore } from '@/store/file/file'
 import Card from '@/components/card'
 import ResourceFolderModal from './folder'
@@ -104,8 +106,33 @@ export default defineComponent({
     const handleRenameFile = () => {
       variables.renameShowRef = true
     }
+    const detailPageStore = useDetailPageStore()   
+    const isDetailPageStore = useIsDetailPageStore()
+    
+    const handleDetailBackList = () => {
+      if(isDetailPageStore.getIsDetailPage){
+        variables.resourceType = detailPageStore.getResourceType  
+        variables.fullName = detailPageStore.getFullName 
+        variables.tenantCode = detailPageStore.getTenantCode 
+        variables.searchRef = detailPageStore.getSearchValue 
+        variables.pagination.page = detailPageStore.getPage 
+        variables.pagination.pageSize = detailPageStore.getPageSize 
+        if(!isEmpty(variables.searchRef)){
+          handleConditions()
+        }
+	detailPageStore.$reset()
+	isDetailPageStore.$reset()
+      } else {
+	  detailPageStore.$reset()
+	  isDetailPageStore.$reset()
+      }
+    }
 
+    onUnmounted(() => {
+      isDetailPageStore.$reset()
+    })
     onMounted(() => {
+      handleDetailBackList()
       createColumns(variables)
       fileStore.setCurrentDir(variables.fullName)
       breadListRef.value = fileStore.getCurrentDir
diff --git a/dolphinscheduler-ui/src/views/resource/components/resource/table/use-table.ts b/dolphinscheduler-ui/src/views/resource/components/resource/table/use-table.ts
@@ -30,6 +30,7 @@ import {
 } from '@/common/column-width-config'
 import type { Router } from 'vue-router'
 import { useFileState } from '@/views/resource/components/resource/use-file'
+import { defineStore } from 'pinia'
 
 const goSubFolder = (router: Router, item: any) => {
   if (item.directory) {
@@ -211,7 +212,8 @@ export function useTable() {
   }
 
   const { getResourceListState } = useFileState(setPagination)
-
+  const detailPageStore = useDetailPageStore()
+  
   const requestData = () => {
     variables.resourceList = getResourceListState(
       variables.resourceType!,
@@ -221,6 +223,12 @@ export function useTable() {
       variables.pagination.page,
       variables.pagination.pageSize
     )
+    detailPageStore.setResourceType(variables.resourceType!)
+    detailPageStore.setFullName(variables.fullName)
+    detailPageStore.setTenantCode(variables.tenantCode)
+    detailPageStore.setSearchValue(variables.searchRef)
+    detailPageStore.setPage(variables.pagination.page)
+    detailPageStore.setPageSize(variables.pagination.pageSize)
   }
 
   const updateList = () => {
@@ -237,3 +245,56 @@ export function useTable() {
     handleCreateFile: createFile
   }
 }
+export const useDetailPageStore = defineStore("detailPage", { 
+  state:() => {
+	var resourceTypeInitValue:ResourceType
+    return {
+      resourceType:resourceTypeInitValue!,
+	  fullName:'',
+	  tenantCode:'',
+	  searchValue:'',
+	  page:1,
+	  pageSize:10
+    }
+  },
+  getters: {
+    getResourceType(): ResourceType {
+      return this.resourceType
+    },
+	getFullName(): string {
+	  return this.fullName
+	},
+	getTenantCode(): string {
+	  return this.tenantCode
+	},
+	getSearchValue(): string {
+	  return this.searchValue
+	},
+	getPage(): number {
+	  return this.page
+	},
+	getPageSize(): number {
+	  return this.pageSize
+	}
+  },
+  actions: {
+    setResourceType(resourceTypeValue: ResourceType) {
+      this.resourceType = resourceTypeValue
+    },
+	setFullName(fullName: string) {
+	  this.fullName = fullName
+	},
+	setTenantCode(fullName: string) {
+	  this.fullName = fullName
+	},
+	setSearchValue(searchValue: string) {
+	  this.searchValue = searchValue
+	},
+	setPage(page: number) {
+	  this.page = page
+	},
+	setPageSize(pageSize: number) {
+	  this.pageSize = pageSize
+	}
+  }
+})
