fix: bug#16210

src/store/metadata.ts

@@ -21,7 +21,8 @@ export const useMetadataStore = defineStore({
       action: 'add',
       import: false,
       importMetadata: false,
-    } as MetadataModelType
+    } as MetadataModelType,
+    tabActiveKey: 'properties',
   }),
   actions: {
     set(key: string, value: any) {

src/utils/utils.ts

@@ -145,3 +145,41 @@ export const ArrayToTree = (list: any[]): any[] => {
   // 返回出去
   return treeList;
 };
+
+export const EventEmitter = {
+  list: {},
+  subscribe: function(events: string[], fn: Function) {
+    const list = this.list
+    events.forEach(event => {
+      (list[event] || (list[event] = [])).push(fn)
+    })
+    return this
+  },
+  emit: function(events:string, data?: any) {
+    const list = this.list
+    const fns: Function[] = list[events] ? [...list[events]] : []
+
+    if (!fns.length) return false;
+
+    fns.forEach(fn => {
+      fn(data)
+    })
+
+    return this
+  },
+  unSubscribe: function(events:string[], fn: Function) {
+    const list = this.list
+    events.forEach(key => {
+      if (key in list) {
+        const fns = list[key]
+        for (let i = 0; i < fns.length; i++) {
+          if (fns[i] === fn) {
+            fns.splice(i, 1)
+            break;
+          }
+        }
+      }
+    })
+    return this
+  }
+}

src/views/device/Instance/Detail/index.vue

@@ -128,6 +128,7 @@ import { getImage, onlyMessage } from '@/utils/comm';
 import { getWebSocket } from '@/utils/websocket';
 import { useMenuStore } from '@/store/menu';
 import { useRouterParams } from '@/utils/hooks/useParams';
+import { EventEmitter } from '@/utils/utils'
 
 const menuStory = useMenuStore();
 
@@ -297,7 +298,13 @@ onMounted(() => {
 });
 
 const onTabChange = (e: string) => {
+    if (instanceStore.tabActiveKey === 'Metadata') {
+      EventEmitter.emit('MetadataTabs', () => {
         instanceStore.tabActiveKey = e;
+      })
+    } else {
+      instanceStore.tabActiveKey = e;
+    }
 };
 
 const handleAction = async () => {

src/views/device/Product/Detail/index.vue

@@ -123,6 +123,7 @@ import {
 import { getImage, handleParamsToString, onlyMessage } from '@/utils/comm';
 import { useMenuStore } from '@/store/menu';
 import { useRouterParams } from '@/utils/hooks/useParams';
+import {EventEmitter} from "@/utils/utils";
 
 const menuStory = useMenuStore();
 const route = useRoute();
@@ -187,7 +188,13 @@ const onBack = () => {
 };
 
 const onTabChange = (e: string) => {
+  if (productStore.tabActiveKey === 'Metadata') {
+    EventEmitter.emit('MetadataTabs', () => {
       productStore.tabActiveKey = e;
+    })
+  } else {
+    productStore.tabActiveKey = e;
+  }
 };
 
 /**

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

@@ -8,6 +8,7 @@
           placeholder: '请输入搜索名称'
         }"
         serial
+        @editStatus="editStatusChange"
     >
         <template #expand>
           <PermissionButton
@@ -16,12 +17,12 @@
               :hasPermission="`${permission}:update`"
               key="add"
 
-              :disabled="hasOperate('add', type)"
+              :disabled="hasOperate('add', type) || !editStatus"
               :tooltip="{
                     placement: hasOperate('add', type) ? 'topRight' : 'top',
                     title: hasOperate('add', type)
                         ? '当前的存储方式不支持新增'
-                        : '新增',
+                        : !editStatus ? '暂无改动数据': '新增',
                 }"
               @click="handleAddClick()"
           >
@@ -34,11 +35,11 @@
               v-else
               :loading="loading"
 
-              :disabled="hasOperate('add', type)"
+              :disabled="hasOperate('add', type) || !editStatus"
               :tooltip="{
                     title: hasOperate('add', type)
                         ? '当前的存储方式不支持新增'
-                        : '保存',
+                        : !editStatus ? '暂无改动数据': '保存',
                     placement: hasOperate('add', type) ? 'topRight' : 'top',
                 }"
               @click="handleSaveClick"
@@ -190,10 +191,10 @@ import type {
     ProductItem,
 } from '@/views/device/Product/typings';
 import type { PropType } from 'vue';
+import { onBeforeRouteLeave } from 'vue-router'
 import { useMetadata, useOperateLimits } from './hooks';
 import {TypeStringMap, useColumns} from './columns';
 import { levelMap, sourceMap, expandsType, limitsMap } from './utils';
-import Rule from '@/components/Metadata/Rule';
 import { Source, OtherSetting, InputParams, ConfigParams } from './components';
 import { saveProductVirtualProperty } from '@/api/device/product';
 import { saveDeviceVirtualProperty } from '@/api/device/instance';
@@ -204,8 +205,9 @@ import { useMetadataStore } from '@/store/metadata';
 import { DeviceInstance } from '@/views/device/Instance/typings';
 import { onlyMessage } from '@/utils/comm';
 import {omit} from "lodash-es";
-import {useAction} from "@/views/device/components/Metadata/Base/hooks/useAction";
 import { PropertiesModal, FunctionModal, EventModal, TagsModal } from './DetailModal'
+import { Modal } from 'jetlinks-ui-components'
+import {EventEmitter} from "@/utils/utils";
 
 const props = defineProps({
     target: {
@@ -234,6 +236,7 @@ const productStore = useProductStore()
 const dataSource = ref<MetadataItem[]>(metadata.value || []);
 const tableRef = ref();
 const loading = ref(false)
+const editStatus = ref(false) // 编辑表格的编辑状态
 
 // const columns = computed(() => MetadataMapping.get(props.type!));
 const {columns} = useColumns(props.type, _target, noEdit, productNoEdit)
@@ -247,8 +250,6 @@ const showSave = ref(metadata.value.length !== 0)
 
 const showLastDelete = ref(false)
 
-const { addAction, copyAction, removeAction } = useAction(tableRef)
-
 provide('_dataSource', dataSource.value)
 
 const showDetail = (data: any) => {
@@ -377,7 +378,11 @@ const removeItem = (index: number) => {
   }
 }
 
-const handleSaveClick = async () => {
+const editStatusChange = (status: boolean) => {
+  editStatus.value = status
+}
+
+const handleSaveClick = async (next?: Function) => {
     let resp = await tableRef.value.getData().finally(() => {
 
     });
@@ -430,9 +435,41 @@ const handleSaveClick = async () => {
         dataSource.value = resp
         tableRef.value.cleanEditStatus()
         onlyMessage('操作成功！')
+        next?.()
       }
     }
 };
+
+const tabsChange = inject('tabsChange')
+
+const parentTabsChange = (next?: Function) => {
+  if (editStatus.value) {
+    Modal.confirm({
+      content: '页面改动数据未保存',
+      okText: '保存',
+      cancelText: '不保存',
+      onOk: () => {
+        handleSaveClick(next as Function)
+      },
+      onCancel: () => {
+        (next as Function)?.()
+      }
+    })
+  } else {
+    (next as Function)?.()
+  }
+}
+
+EventEmitter.subscribe(['MetadataTabs'], parentTabsChange)
+
+onUnmounted(() => {
+  EventEmitter.unSubscribe(['MetadataTabs'], parentTabsChange)
+})
+
+onBeforeRouteLeave((to, from, next) => {
+  parentTabsChange(next as Function)
+})
+
 </script>
 
 <style scoped>

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

@@ -14,7 +14,7 @@
 <!--          </div>-->
 <!--        </j-tooltip>-->
 <!--      </div>-->
-      <j-tabs class="metadataNav" destroyInactiveTabPane type="card">
+      <j-tabs class="metadataNav" :activeKey="metadataStore.tabActiveKey" destroyInactiveTabPane type="card" @change="tabsChange">
         <template #rightExtra>
           <j-space>
             <PermissionButton v-if="type === 'device' && instanceStore.detail?.independentMetadata"
@@ -54,6 +54,7 @@ import Cat from './Cat/index.vue'
 // import BaseMetadata from './Base/index.vue'
 import BaseMetadata from './Base/Base.vue'
 import { useMetadataStore } from '@/store/metadata'
+import {EventEmitter} from "@/utils/utils";
 
 const route = useRoute()
 const instanceStore = useInstanceStore()
@@ -85,6 +86,13 @@ const resetMetadata = async () => {
     // }, 400)
   }
 }
+
+const tabsChange = (e: string) => {
+  EventEmitter.emit('MetadataTabs', () => {
+    metadataStore.tabActiveKey = e;
+  })
+}
+
 </script>
 <style scoped lang="less">
 .device-detail-metadata {

src/views/device/components/Metadata/metadata.ts

@@ -35,22 +35,22 @@ const filterProductMetadata = (data: any[], productMetaData: any[]) => {
 
   if (productMetaData) {
     if (productMetaData.properties && productMetaData.properties.length) {
-      metadata.properties = filterProductMetadata(metadata.properties, productMetaData.properties)
+      metadata.properties = filterProductMetadata(item, productMetaData.properties)
     }
     if (productMetaData.functions && productMetaData.functions.length) {
-      metadata.functions = filterProductMetadata(metadata.functions, productMetaData.functions)
+      metadata.functions = filterProductMetadata(item, productMetaData.functions)
     }
     if (productMetaData.events && productMetaData.events.length) {
-      metadata.events = filterProductMetadata(metadata.events, productMetaData.events)
+      metadata.events = filterProductMetadata(item, productMetaData.events)
     }
     if (productMetaData.tags && productMetaData.tags.length) {
-      metadata.tags = filterProductMetadata(metadata.tags, productMetaData.tags)
+      metadata.tags = filterProductMetadata(item, productMetaData.tags)
     }
+  } else {
+    metadata[type] = item as any
   }
-
+  console.log(metadata, type)
-  console.log(metadata)
   metadata[type] = metadata[type].sort((a, b) => b?.sortsIndex - a?.sortsIndex) as any[]
-  console.log('updateMetadata',metadata)
   data.metadata = JSON.stringify(metadata);
   onEvent?.(data.metadata)
   return data;

yarn.lock

@@ -3837,8 +3837,8 @@ jetlinks-ui-components@^1.0.23:
 
 jetlinks-ui-components@^1.0.24:
   version "1.0.24"
-  resolved "http://registry.jetlinks.cn/jetlinks-ui-components/-/jetlinks-ui-components-1.0.24.tgz#33f59962062e023d6f10907bd941aef183db6dc5"
+  resolved "http://registry.jetlinks.cn/jetlinks-ui-components/-/jetlinks-ui-components-1.0.24.tgz#42eea061b08a87f9bb58cb6a2f2dd94daa17499b"
-  integrity sha512-/Bch0MnW/aWSc1r62423eOFQS+lbLMPdKpb4hryXTZ5c+oBryBWzRXsXOYMyI1zqBJoVdxdJTfs7Q77N6Y4J4w==
+  integrity sha512-+QWKtOqAFs8TneJSE5dGswT3qZ/OHAz6U8AVzRAAict2r6FIYmSJ90CF4a3JTCRbF9yQ3rnhGnmUAMbyGR9BBQ==
   dependencies:
     "@vueuse/core" "^9.12.0"
     "@vueuse/router" "^9.13.0"