admin-web-template/src/views/product/components/Model.vue

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