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

<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>