You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
133 lines
5.0 KiB
133 lines
5.0 KiB
<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>
|
|
|