fix: bug#16322

src/views/device/components/Metadata/Base/Base.vue

@@ -209,6 +209,7 @@ import {omit} from "lodash-es";
 import { PropertiesModal, FunctionModal, EventModal, TagsModal } from './DetailModal'
 import { Modal } from 'jetlinks-ui-components'
 import {EventEmitter} from "@/utils/utils";
+import {watch} from "vue";
 
 const props = defineProps({
     target: {
@@ -469,6 +470,10 @@ onUnmounted(() => {
   EventEmitter.unSubscribe(['MetadataTabs'], parentTabsChange)
 })
 
+watch(() => metadata.value, () => {
+  dataSource.value = metadata.value
+}, { immediate: true })
+
 onBeforeRouteLeave((to, from, next) => {
   parentTabsChange(next as Function)
 })

src/views/device/components/Metadata/Base/hooks/useMatadata.ts

@@ -2,9 +2,10 @@ import {DeviceMetadata, MetadataItem, MetadataType} from "@/views/device/Product
 import {useInstanceStore} from "store/instance";
 import {useProductStore} from "store/product";
 import type { Ref, ComputedRef } from "vue";
+import { storeToRefs } from 'pinia'
 
 const useMetadata = (type: 'device' | 'product', key?: MetadataType, ): {
-    data: ComputedRef<MetadataItem[]>,
+    data: Ref<MetadataItem[]>,
     metadata: Ref<Partial<DeviceMetadata>>,
     noEdit: Ref<any>
     productNoEdit: Ref<any>
@@ -14,12 +15,15 @@ const useMetadata = (type: 'device' | 'product', key?: MetadataType, ): {
     const metadata = ref<Partial<DeviceMetadata>>({})
     const noEdit = ref<any>({})
     const productNoEdit = ref<any>({})
+    const data = ref<MetadataItem[]>([])
+    const { current: instanceCurrent } = storeToRefs(instanceStore)
+    const { current: productCurrent } = storeToRefs(productStore)
 
-    const data = computed(() => {
-        const _metadataStr = type === 'product' ? productStore.current?.metadata : instanceStore.current.metadata
+    const handleMetadata = (_metadataStr: string) => {
         const _metadata = JSON.parse(_metadataStr || '{}')
         const newMetadata = (key ? _metadata?.[key] || [] : []) as DeviceMetadata[]
 
+
         metadata.value = newMetadata as any
 
         const indexKeys = newMetadata.map((item, index) => index)
@@ -31,8 +35,8 @@ const useMetadata = (type: 'device' | 'product', key?: MetadataType, ): {
             noEdit.value.source = indexKeys
         }
 
-        if (type === 'device' && instanceStore.current.productMetadata) {
-            const productMetadata: any = JSON.parse(instanceStore.current.productMetadata)
+        if (type === 'device' && instanceCurrent.value.productMetadata) {
+            const productMetadata: any = JSON.parse(instanceCurrent.value.productMetadata)
             const metaArray = key ? productMetadata[key] : []
             const productIndexKeys = metaArray?.map((item:any, index: number) => index) || []
             productNoEdit.value.ids = metaArray?.map((item: any) => item.id) || []
@@ -64,8 +68,16 @@ const useMetadata = (type: 'device' | 'product', key?: MetadataType, ): {
             }
         }
 
-        return newMetadata
-    })
+        data.value = newMetadata
+    }
+
+    watch(() => [instanceCurrent.value.metadata, productCurrent.value.metadata], () => {
+        if (type === 'device') {
+            handleMetadata(instanceCurrent.value.metadata)
+        } else {
+            handleMetadata(productCurrent.value.metadata)
+        }
+    }, { immediate: true})
 
     return {
         data,

src/views/device/components/Metadata/Import/index.vue

@@ -77,6 +77,7 @@ interface Props {
 }
 interface Emits {
   (e: 'update:visible', data: boolean): void;
+  (e: 'submit', data: any): void;
 }
 const props = defineProps<Props>()
 const emits = defineEmits<Emits>()