fix: 物模型组件开发

src/api/device/instance.ts

@@ -1,6 +1,7 @@
+import { LocalStore } from '@/utils/comm'
 import server from '@/utils/request'
-import { BASE_API_PATH } from '@/utils/variable'
+import { BASE_API_PATH, TOKEN_KEY } from '@/utils/variable'
-import { DeviceInstance } from '@/views/device/instance/typings'
+import { DeviceInstance } from '@/views/device/Instance/typings'
 
 /**
  * 删除设备物模型
@@ -97,5 +98,5 @@ export const batchDeleteDevice = (data: string[]) => server.put(`/device-instanc
   * @param type 文件类型
   * @returns 
   */
-  export const deviceExport = (productId: string, type: string) => `${BASE_API_PATH}/device-instance${!!productId ? '/' + productId : ''}/export.${type}`
+export const deviceExport = (productId: string, type: string) => `${BASE_API_PATH}/device-instance${!!productId ? '/' + productId : ''}/export.${type}`
  

src/api/device/product.ts

@@ -43,3 +43,10 @@ export const detail = (id: string) => server.get<ProductItem>(`/device-product/$
  * @param data
  */
 export const category = (data: any) => server.post('/device/category/_tree', data)
+
+/**
+ * 保存产品
+ * @param data 产品信息
+ * @returns 
+ */
+export const saveProductMetadata = (data: Record<string, unknown>) => server.patch('/device-product', data)

src/components/Table/index.tsx

@@ -54,7 +54,7 @@ export interface JTableProps extends TableProps{
     rowSelection?: TableProps['rowSelection'];
     cardProps?:  Record<string, any>;
     dataSource?:  Record<string, any>[];
-    gridColumn: number;
+    gridColumn?: number;
     /**
      * 用于不同分辨率
      * gridColumns[0] 1366 ~ 1440 分辨率；

src/store/instance.ts

@@ -1,4 +1,4 @@
-import { DeviceInstance, InstanceModel } from "@/views/device/instance/typings";
+import { DeviceInstance, InstanceModel } from "@/views/device/Instance/typings"
 import { defineStore } from "pinia";
 
 export const useInstanceStore = defineStore({
@@ -7,6 +7,7 @@ export const useInstanceStore = defineStore({
   actions: {
     setCurrent(current: Partial<DeviceInstance>) {
       this.current = current
+      this.detail = current
     }
   }
 })

src/store/metadata.ts

@@ -0,0 +1,31 @@
+import { DeviceInstance, InstanceModel } from "@/views/device/Instance/typings"
+import { defineStore } from "pinia";
+import type { MetadataItem, MetadataType } from '@/views/device/Product/typings'
+
+type MetadataModelType = {
+  item: MetadataItem | unknown;
+  edit: boolean;
+  type: MetadataType;
+  action: 'edit' | 'add';
+  import: boolean;
+  importMetadata: boolean;
+};
+
+export const useMetadataStore = defineStore({
+  id: 'metadata',
+  state: () => ({ 
+    model: {
+      item: undefined,
+      edit: false,
+      type: 'events',
+      action: 'add',
+      import: false,
+      importMetadata: false,
+    } as MetadataModelType 
+  }),
+  actions: {
+    set(key: string, value: any) {
+      this.model[key] = value
+    }
+  }
+})

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

@@ -0,0 +1,119 @@
+<template>
+  <a-drawer :mask-closable="false" width="25vw" visible :title="`新增${typeMapping[metadataStore.model.type]}`"
+    @close="close" destroy-on-close :z-index="1000" placement="right">
+    <template #extra>
+      <a-button :loading="save.loading" type="primary" @click="save.saveMetadata">保存</a-button>
+    </template>
+    <a-form ref="addFormRef" :model="form.model"></a-form>
+  </a-drawer>
+</template>
+<script lang="ts" setup name="Edit">
+import { useInstanceStore } from '@/store/instance';
+import { useMetadataStore } from '@/store/metadata';
+import { useProductStore } from '@/store/product';
+import { MetadataItem, ProductItem } from '@/views/device/Product/typings';
+import { message } from 'ant-design-vue/es';
+import type { FormInstance } from 'ant-design-vue/es';
+import { updateMetadata, asyncUpdateMetadata } from '../../metadata'
+import { Store } from 'jetlinks-store';
+import { SystemConst } from '@/utils/consts';
+import { detail } from '@/api/device/instance';
+
+interface Props {
+  type: 'product' | 'device';
+  tabs?: string;
+}
+const props = defineProps<Props>()
+const route = useRoute()
+
+const instanceStore = useInstanceStore()
+const productStore = useProductStore()
+const metadataStore = useMetadataStore()
+const typeMapping: Record<string, string> = {
+  properties: '属性',
+  events: '事件',
+  functions: '功能',
+  tags: '标签',
+};
+const close = () => {
+  metadataStore.set('edit', false)
+  metadataStore.set('item', {})
+}
+
+const addFormRef = ref<FormInstance>()
+/**
+ * 保存按钮
+ */
+const save = reactive({
+  loading: false,
+  saveMetadata: (deploy?: boolean) => {
+    save.loading = true
+    addFormRef.value?.validateFields().then(async (formValue) => {
+      const type = metadataStore.model.type
+      const _metadata = JSON.parse((props.type === 'device' ? instanceStore.detail.metadata : productStore.current?.metadata) || '{}')
+      const list = _metadata[type] as any[]
+      if (formValue.id) {
+        if (metadataStore.model.action === 'add' && list.some(item => item.id === formValue.id)) {
+          message.error('标识已存在')
+          save.loading = false
+          return
+        }
+      }
+      const updateStore = (metadata: string) => {
+        if (props.type === 'device') {
+          const detail = instanceStore.current
+          detail.metadata = metadata
+          instanceStore.setCurrent(detail)
+        } else {
+          const detail = productStore.current || {} as ProductItem
+          detail.metadata = metadata
+          productStore.setCurrent(detail)
+        }
+      }
+      const _data = updateMetadata(type, [formValue], _metadata, updateStore)
+      const result = await asyncUpdateMetadata(props.type, _data)
+      if (result.status === 200) {
+        if ((window as any).onTabSaveSuccess) {
+          if (result) {
+            (window as any).onTabSaveSuccess(result);
+            setTimeout(() => window.close(), 300);
+          }
+        } else {
+          Store.set(SystemConst.REFRESH_METADATA_TABLE, true);
+          if (deploy) {
+            Store.set('product-deploy', deploy);
+          } else {
+            save.resetMetadata();
+            message.success({
+              key: 'metadata',
+              content: '操作成功！',
+            });
+          }
+          metadataStore.set('edit', false)
+          metadataStore.set('item', {})
+          if (instanceStore.detail) {
+            instanceStore.detail.independentMetadata = true;
+          }
+        }
+      } else {
+        message.error('操作失败！');
+      }
+      save.loading = false
+    })
+  },
+  resetMetadata: async () => {
+    const { id } = route.params
+    const resp = await detail(id as string);
+    if (resp.status === 200) {
+      instanceStore.detail = resp?.result || [];
+    }
+  }
+})
+
+const form = reactive({
+  model: {}
+})
+</script>
+<style lang="scss" scoped>
+
+</style>

src/views/device/components/Metadata/Base/columns.ts

@@ -0,0 +1,91 @@
+import { JColumnProps } from "@/components/Table";
+
+const SourceMap = {
+  device: '设备',
+  manual: '手动',
+  rule: '规则',
+};
+
+const type = {
+  read: '读',
+  write: '写',
+  report: '上报',
+};
+
+const BaseColumns: JColumnProps[] = [
+  {
+    title: '标识',
+    dataIndex: 'id',
+    ellipsis: true,
+  },
+  {
+    title: '名称',
+    dataIndex: 'name',
+    ellipsis: true,
+  },
+  {
+    title: '说明',
+    dataIndex: 'description',
+    ellipsis: true,
+  },
+];
+
+const EventColumns: JColumnProps[] = BaseColumns.concat([
+  {
+    title: '事件级别',
+    dataIndex: 'expands',
+    scopedSlots: true,
+  },
+]);
+
+const FunctionColumns: JColumnProps[] = BaseColumns.concat([
+  {
+    title: '是否异步',
+    dataIndex: 'async',
+    scopedSlots: true,
+  },
+  // {
+  //   title: '读写类型',
+  //   dataIndex: 'expands',
+  //   render: (text: any) => (text?.type || []).map((item: string | number) => <Tag>{type[item]}</Tag>),
+  // },
+]);
+
+const PropertyColumns: JColumnProps[] = BaseColumns.concat([
+  {
+    title: '数据类型',
+    dataIndex: 'valueType',
+    scopedSlots: true,
+  },
+  {
+    title: '属性来源',
+    dataIndex: 'expands',
+    scopedSlots: true,
+  },
+  {
+    title: '读写类型',
+    dataIndex: 'expands',
+    scopedSlots: true,
+  },
+]);
+
+const TagColumns: JColumnProps[] = BaseColumns.concat([
+  {
+    title: '数据类型',
+    dataIndex: 'valueType',
+    scopedSlots: true,
+  },
+  {
+    title: '读写类型',
+    dataIndex: 'expands',
+    scopedSlots: true,
+  },
+]);
+
+const MetadataMapping = new Map<string, JColumnProps[]>();
+MetadataMapping.set('properties', PropertyColumns);
+MetadataMapping.set('events', EventColumns);
+MetadataMapping.set('tags', TagColumns);
+MetadataMapping.set('functions', FunctionColumns);
+
+export default MetadataMapping;

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

@@ -0,0 +1,100 @@
+<template>
+  <JTable :loading="loading" :data-source="data" size="small" :columns="columns" row-key="id">
+    <template #headerTitle>
+      <a-input-search v-model:value="searchValue" placeholder="请输入名称" @search="handleSearch"></a-input-search>
+      <PermissionButton :has-permission="permission" key="add" @click="handleAddClick"
+        :disabled="operateLimits('add', type)" type="primary" :tooltip="{
+          title: operateLimits('add', type) ? '当前的存储方式不支持新增' : '新增',
+        }">
+        <template #icon>
+          <PlusOutlined />
+        </template>
+        新增
+      </PermissionButton>
+      <Edit
+        v-if="metadataStore.model.edit"
+        :type="target"
+        :tabs="type"
+      ></Edit>
+    </template>
+  </JTable>
+</template>
+<script setup lang="ts" name="BaseMetadata">
+import type { MetadataItem, MetadataType } from '@/views/device/Product/typings'
+import MetadataMapping from './columns'
+import JTable, { JColumnProps } from '@/components/Table'
+import { useInstanceStore } from '@/store/instance'
+import { useProductStore } from '@/store/product'
+import { useMetadataStore } from '@/store/metadata'
+import PermissionButton from '@/components/PermissionButton/index.vue'
+// import { detail } from '@/api/device/instance'
+// import { detail as productDetail } from '@/api/device/product'
+interface Props {
+  type: MetadataType;
+  target: 'product' | 'device';
+  permission: string | string[];
+}
+const props = defineProps<Props>()
+const route = useRoute()
+const instanceStore = useInstanceStore()
+const productStore = useProductStore()
+
+const loading = ref(false)
+const data = ref<MetadataItem[]>([])
+const { type, target = 'product' } = props
+const actions: JColumnProps[] = [
+  {
+    title: '操作',
+    align: 'left',
+    width: 200,
+    scopedSlots: true,
+  },
+];
+const columns = computed(() => MetadataMapping.get(type)!.concat(actions))
+const items = computed(() => JSON.parse((target === 'product' ? productStore.current?.metadata : instanceStore.current.metadata) || '{}') as MetadataItem[])
+const searchValue = ref<string>()
+const handleSearch = (searchValue: string) => {
+  if (searchValue) {
+    const arr = items.value.filter(item => item.name!.indexOf(searchValue) > -1).sort((a, b) => b?.sortsIndex - a?.sortsIndex)
+    data.value = arr
+  } else {
+    data.value = items.value
+  }
+}
+
+onMounted(() => {
+
+})
+
+watch([route.params.id, type], () => {
+  // const res = target === 'product'
+  //       ? await productDetail(route.params.id as string)
+  //       : await detail(route.params.id as string);
+  const result = target === 'product' ? productStore.current?.metadata : instanceStore.current.metadata
+  const item = JSON.parse(result || '{}') as MetadataItem[]
+  data.value = item[type]?.sort((a: any, b: any) => b?.sortsIndex - a?.sortsIndex)
+  loading.value = false
+}, { immediate: true })
+
+const metadataStore = useMetadataStore()
+const handleAddClick = () => {
+  metadataStore.set('edit', true)
+  metadataStore.set('item', undefined)
+  metadataStore.set('type', type)
+  metadataStore.set('action', 'add')
+}
+
+const limitsMap = new Map<string, any>();
+limitsMap.set('events-add', 'eventNotInsertable');
+limitsMap.set('events-updata', 'eventNotModifiable');
+limitsMap.set('properties-add', 'propertyNotInsertable');
+limitsMap.set('properties-updata', 'propertyNotModifiable');
+const operateLimits = (action: 'add' | 'updata', types: MetadataType) => {
+  return (
+    target === 'device' &&
+    (instanceStore.detail.features || []).find((item: { id: string; name: string }) => item.id === limitsMap.get(`${types}-${action}`))
+  );
+};
+</script>
+<style scoped lang="scss">
+</style>

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

@@ -47,14 +47,16 @@ import { saveMetadata } from '@/api/device/instance'
 import { queryNoPagingPost, convertMetadata, modify } from '@/api/device/product'
 import type { DefaultOptionType } from 'ant-design-vue/es/select';
 import { UploadProps } from 'ant-design-vue/es';
-import type { DeviceMetadata } from '@/views/device/Product/typings'
+import type { DeviceMetadata, ProductItem } from '@/views/device/Product/typings'
 import { message } from 'ant-design-vue/es';
 import { Store } from 'jetlinks-store';
 import { SystemConst } from '@/utils/consts';
 import { useInstanceStore } from '@/store/instance'
+import { useProductStore } from '@/store/product';
 
 const route = useRoute()
 const instanceStore = useInstanceStore()
+const productStore = useProductStore()
 
 interface Props {
   visible: boolean,
@@ -191,8 +193,10 @@ const handleImport = async () => {
         const { id } = route.params || {}
         if (props?.type === 'device') {
           await saveMetadata(id as string, metadata)
+          instanceStore.setCurrent(JSON.parse(metadata || '{}'))
         } else {
           await modify(id as string, { metadata: metadata })
+          productStore.setCurrent(JSON.parse(metadata || '{}'))
         }
         loading.value = false
         // MetadataAction.insert(JSON.parse(metadata || '{}'));
@@ -231,10 +235,12 @@ const handleImport = async () => {
           if (props?.type === 'device') {
             const metadata: DeviceMetadata = JSON.parse(paramsDevice || '{}')
             // MetadataAction.insert(metadata);
+            instanceStore.setCurrent(metadata)
             message.success('导入成功')
           } else {
-            const metadata: DeviceMetadata = JSON.parse(params?.metadata || '{}')
+            const metadata: ProductItem = JSON.parse(params?.metadata || '{}')
             // MetadataAction.insert(metadata);
+            productStore.setCurrent(metadata)
             message.success('导入成功')
           }
         }

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

@@ -0,0 +1,61 @@
+import { saveProductMetadata } from "@/api/device/product";
+import { saveMetadata } from "@/api/device/instance";
+import type { DeviceInstance } from "../../Instance/typings";
+import type { DeviceMetadata, MetadataItem, MetadataType, ProductItem } from "../../Product/typings";
+
+/**
+ * 更新物模型
+ * @param type 物模型类型 events
+ * @param item 物模型数据 【{a},{b},{c}】
+ // * @param target product、device
+ * @param data product 、device [{event:[1,2,3]]
+ * @param onEvent 数据更新回调：更新数据库、发送事件等操作
+ *
+ */
+ export const updateMetadata = (
+  type: MetadataType,
+  item: MetadataItem[],
+  // target: 'product' | 'device',
+  data: ProductItem | DeviceInstance,
+  onEvent?: (item: string) => void,
+): ProductItem | DeviceInstance => {
+  if (!data) return data;
+  const metadata = JSON.parse(data.metadata || '{}') as DeviceMetadata;
+  const config = (metadata[type] || []) as MetadataItem[];
+  if (item.length > 0) {
+    item.forEach((i) => {
+      const index = config.findIndex((c) => c.id === i.id);
+      if (index > -1) {
+        config[index] = i;
+        // onEvent?.('update', i);
+      } else {
+        config.push(i);
+        // onEvent?.('add', i);
+      }
+    });
+  } else {
+    console.warn('未触发物模型修改');
+  }
+  // @ts-ignore
+  metadata[type] = config.sort((a, b) => b?.sortsIndex - a?.sortsIndex);
+  data.metadata = JSON.stringify(metadata);
+  onEvent?.(data.metadata)
+  return data;
+};
+
+/**
+ * 保存物模型数据到服务器
+ * @param type 类型
+ * @param data 数据
+ */
+export const asyncUpdateMetadata = (
+  type: 'product' | 'device',
+  data: ProductItem | DeviceInstance,
+): Promise<any> => {
+  switch (type) {
+    case 'product':
+      return saveProductMetadata(data);
+    case 'device':
+      return saveMetadata(data.id, JSON.parse(data.metadata || '{}'));
+  }
+};