fix: 物模型组件开发
This commit is contained in:
wangshuaiswim
parent
7f321213a8
commit
f5f56a1257
|
|
@ -1,6 +1,7 @@
|
|||
import { LocalStore } from '@/utils/comm'
|
||||
import server from '@/utils/request'
|
||||
import { BASE_API_PATH } from '@/utils/variable'
|
||||
import { DeviceInstance } from '@/views/device/instance/typings'
|
||||
import { BASE_API_PATH, TOKEN_KEY } from '@/utils/variable'
|
||||
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}`
|
||||
|
||||
|
|
|
|||
|
|
@ -42,4 +42,11 @@ export const detail = (id: string) => server.get<ProductItem>(`/device-product/$
|
|||
* 产品分类
|
||||
* @param data
|
||||
*/
|
||||
export const category = (data: any) => server.post('/device/category/_tree', 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)
|
||||
|
|
@ -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 分辨率；
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
|
|
@ -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>
|
||||
|
|
@ -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('导入成功')
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 || '{}'));
|
||||
}
|
||||
};
|
||||
Loading…
Reference in New Issue