|
|
|
<script setup lang='ts'>
|
|
|
|
import { Alert, Popconfirm } from 'ant-design-vue'
|
|
|
|
import { useRoute } from 'vue-router'
|
|
|
|
import { EyeOutlined, PlusOutlined, SyncOutlined } from '@ant-design/icons-vue'
|
|
|
|
import { useModelService } from './composables/useModelService'
|
|
|
|
import { useModelAttribute } from './composables/useModelAttribute'
|
|
|
|
import ModelServiceFormModal from './ModelServiceFormModal.vue'
|
|
|
|
import ModelAttributeFormModal from './ModelAttributeFormModal.vue'
|
|
|
|
import { BasicTable, TableAction } from '@/components/Table'
|
|
|
|
import type { ModelAttribute } from '@/api/product/types'
|
|
|
|
import JsonPreviewModal from '@/components/JsonPreviewModal'
|
|
|
|
|
|
|
|
defineProps<{ tsl?: string }>()
|
|
|
|
|
|
|
|
const route = useRoute()
|
|
|
|
const {
|
|
|
|
selectedModelId,
|
|
|
|
setSelectedModelId,
|
|
|
|
modelServiceList,
|
|
|
|
handleDeleteModelService,
|
|
|
|
registerModelServiceModal,
|
|
|
|
openModelServiceModal,
|
|
|
|
reloadModelService,
|
|
|
|
} = useModelService(route.params.id as string)
|
|
|
|
|
|
|
|
const {
|
|
|
|
registerModelAttributeTable,
|
|
|
|
registerModelAttributeModal,
|
|
|
|
openModelAttributeModal,
|
|
|
|
reloadModalAttribute,
|
|
|
|
handleDeleteModelAttribute,
|
|
|
|
} = useModelAttribute(route.params.id as string, selectedModelId)
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<div>
|
|
|
|
<div mb="12px">
|
|
|
|
<JsonPreviewModal title="物模型 TSL" :data="tsl || ''">
|
|
|
|
<a-button type="primary">
|
|
|
|
<EyeOutlined />
|
|
|
|
物模型 TSL
|
|
|
|
</a-button>
|
|
|
|
</JsonPreviewModal>
|
|
|
|
</div>
|
|
|
|
<Alert type="info" show-icon class="py-4px text-13px" message="产品模型用于描述设备具备的能力和特性。通过定义产品模型,在平台构建一款设备的抽象模型,使平台理解该款设备支持的服务、属性、命令等信息,如颜色、开关等。当定义完一款产品模型后,在进行注册设备时,就可以使用在控制台上定义的产品模型。" />
|
|
|
|
|
|
|
|
<div flex="~ gap-12px" mt="12px">
|
|
|
|
<div w="20%">
|
|
|
|
<div flex="~ items-center justify-between" border="0 b-1 solid gray-200" class="mb-12px box-border h-40px px-10px">
|
|
|
|
<div font-bold>
|
|
|
|
服务列表
|
|
|
|
</div>
|
|
|
|
<div class="i-ant-design:plus-outlined cursor-pointer text-20px" @click="openModelServiceModal()" />
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div
|
|
|
|
v-for="item in modelServiceList" :key="item.id"
|
|
|
|
flex="~ items-center justify-between"
|
|
|
|
class="box-border h-60px cursor-pointer pl-10px hover:bg-gray-100"
|
|
|
|
border="0 b-1 solid gray-50"
|
|
|
|
:class="selectedModelId === item.id ? 'bg-gray-100' : ''"
|
|
|
|
@click="setSelectedModelId(item.id)"
|
|
|
|
>
|
|
|
|
<div w-0 flex-1>
|
|
|
|
<div truncate>
|
|
|
|
{{ item.serviceId }}
|
|
|
|
</div>
|
|
|
|
<div mt="5px" text="12px gray-500" truncate :title="item.description">
|
|
|
|
{{ item.description }}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div v-if="item.serviceId !== 'DEFAULT'">
|
|
|
|
<a-button type="link" size="small" @click="openModelServiceModal(true, item)">
|
|
|
|
<span class="i-ant-design:edit-outlined" />
|
|
|
|
</a-button>
|
|
|
|
<Popconfirm title="是否要删除数据?" @confirm="handleDeleteModelService(item.id)">
|
|
|
|
<a-button type="link" size="small" danger>
|
|
|
|
<span class="i-ant-design:delete-outlined" />
|
|
|
|
</a-button>
|
|
|
|
</Popconfirm>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div w-0 flex-1>
|
|
|
|
<BasicTable :api="async () => ([] as ModelAttribute[])" @register="registerModelAttributeTable">
|
|
|
|
<template #tableTitle>
|
|
|
|
<a-button type="primary" @click="openModelAttributeModal">
|
|
|
|
<PlusOutlined />
|
|
|
|
新增属性
|
|
|
|
</a-button>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<template #toolbar>
|
|
|
|
<a-button size="small" @click="reloadModalAttribute">
|
|
|
|
<template #icon>
|
|
|
|
<SyncOutlined />
|
|
|
|
</template>
|
|
|
|
刷新
|
|
|
|
</a-button>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<template #bodyCell="{ column, record }">
|
|
|
|
<template v-if="column.key === 'action'">
|
|
|
|
<TableAction
|
|
|
|
:actions="[
|
|
|
|
{
|
|
|
|
icon: 'i-ant-design:edit-outlined',
|
|
|
|
label: '编辑',
|
|
|
|
onClick: () => openModelAttributeModal(true, record),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
icon: 'i-ant-design:delete-outlined',
|
|
|
|
danger: true,
|
|
|
|
label: '删除',
|
|
|
|
popConfirm: {
|
|
|
|
title: '是否要删除数据?',
|
|
|
|
placement: 'left',
|
|
|
|
confirm: () => handleDeleteModelAttribute(record.id),
|
|
|
|
},
|
|
|
|
},
|
|
|
|
]"
|
|
|
|
/>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</BasicTable>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<ModelServiceFormModal @register="registerModelServiceModal" @success="reloadModelService" />
|
|
|
|
<ModelAttributeFormModal :model-id="selectedModelId || ''" @register="registerModelAttributeModal" @success="reloadModalAttribute" />
|
|
|
|
</div>
|
|
|
|
</template>
|