yudao
/
admin-vue3
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vue3.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

【功能完善】IOT: 产品物模型-属性

pull/620/head
puhui999 2024-12-16 17:47:02 +08:00
parent 187b5b03ee
commit e36e48586e
7 changed files with 143 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/api/iot/thinkmodelfunction/index.ts
View File

@ -10,6 +10,7 @@ export interface ThingModelData {
description?: string // 功能描述 description?: string // 功能描述
productId?: number // 产品编号 productId?: number // 产品编号
productKey?: string // 产品标识 productKey?: string // 产品标识
dataType: string // 数据类型，与 dataSpecs 的 dataType 保持一致
type: ProductFunctionTypeEnum // 功能类型 type: ProductFunctionTypeEnum // 功能类型
property: ThingModelProperty // 属性 property: ThingModelProperty // 属性
event?: ThingModelEvent // 事件 event?: ThingModelEvent // 事件
@ -53,34 +54,35 @@ export enum ProductFunctionAccessModeEnum {
// IoT 产品物模型 API // IoT 产品物模型 API
export const ThinkModelFunctionApi = { export const ThinkModelFunctionApi = {
// 查询产品物模型分页 // 查询产品物模型分页
getThinkModelFunctionPage: async (params: any) => { getProductThingModelPage: async (params: any) => {
return await request.get({ url: `/iot/think-model-function/page`, params }) return await request.get({ url: `/iot/product-thing-model/page`, params })
}, },
// 获得产品物模型 // 获得产品物模型
getThinkModelFunctionListByProductId: async (params: any) => { getProductThingModelListByProductId: async (params: any) => {
return await request.get({ return await request.get({
url: `/iot/think-model-function/list-by-product-id`, url: `/iot/product-thing-model/list-by-product-id`,
params params
}) })
}, },
// 查询产品物模型详情 // 查询产品物模型详情
getThinkModelFunction: async (id: number) => { getProductThingModel: async (id: number) => {
return await request.get({ url: `/iot/think-model-function/get?id=` + id }) return await request.get({ url: `/iot/product-thing-model/get?id=` + id })
}, },
// 新增产品物模型 // 新增产品物模型
createThinkModelFunction: async (data: ThingModelData) => { createProductThingModel: async (data: ThingModelData) => {
return await request.post({ url: `/iot/think-model-function/create`, data }) return await request.post({ url: `/iot/product-thing-model/create`, data })
}, },
// 修改产品物模型 // 修改产品物模型
updateThinkModelFunction: async (data: ThingModelData) => { updateProductThingModel: async (data: ThingModelData) => {
return await request.put({ url: `/iot/think-model-function/update`, data }) return await request.put({ url: `/iot/product-thing-model/update`, data })
}, },
// 删除产品物模型 // 删除产品物模型
deleteThinkModelFunction: async (id: number) => { deleteProductThingModel: async (id: number) => {
return await request.delete({ url: `/iot/think-model-function/delete?id=` + id }) return await request.delete({ url: `/iot/product-thing-model/delete?id=` + id })
} }
} }

28
src/views/iot/product/product/detail/ThingModel/ThingModelDataSpecs.vue
View File

@ -24,34 +24,35 @@
v-model="property.dataSpecsList" v-model="property.dataSpecsList"
/> />
<!-- 布尔型配置 --> <!-- 布尔型配置 -->
<el-form-item label="布尔值" prop="bool" v-if="property.dataType === DataSpecsDataType.BOOL"> <el-form-item v-if="property.dataType === DataSpecsDataType.BOOL" label="布尔值" prop="bool">
<template v-for="item in property.dataSpecsList" :key="item.value"> <template v-for="item in property.dataSpecsList" :key="item.value">
<div class="flex items-center justify-start w-1/1 mb-5px"> <div class="flex items-center justify-start w-1/1 mb-5px">
<span>{{ item.value }}</span> <span>{{ item.value }}</span>
<span class="mx-2">-</span> <span class="mx-2">-</span>
<el-input <el-input
v-model="item.name" v-model="item.name"
class="w-255px!"
:placeholder="`如：${item.value === 0 ? '关' : '开'}`" :placeholder="`如：${item.value === 0 ? '关' : '开'}`"
class="w-255px!"
/> />
</div> </div>
</template> </template>
</el-form-item> </el-form-item>
<!-- 文本型配置 --> <!-- 文本型配置 -->
<el-form-item label="数据长度" prop="text" v-if="property.dataType === DataSpecsDataType.TEXT"> <el-form-item v-if="property.dataType === DataSpecsDataType.TEXT" label="数据长度" prop="text">
<el-input v-model="property.length" class="w-255px!" placeholder="请输入文本字节长度"> <el-input v-model="property.dataSpecs.length" class="w-255px!" placeholder="请输入文本字节长度">
<template #append>字节</template> <template #append>字节</template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<!-- 时间型配置 --> <!-- 时间型配置 -->
<el-form-item label="时间格式" prop="date" v-if="property.dataType === DataSpecsDataType.DATE"> <el-form-item v-if="property.dataType === DataSpecsDataType.DATE" label="时间格式" prop="date">
<el-input disabled class="w-255px!" placeholder="String类型的UTC时间戳（毫秒）" /> <el-input class="w-255px!" disabled placeholder="String类型的UTC时间戳（毫秒）" />
</el-form-item> </el-form-item>
<!-- 数组型配置--> <!-- 数组型配置-->
<ThingModelArrayTypeDataSpecs <ThingModelArrayTypeDataSpecs
v-model="property.dataSpecs"
v-if="property.dataType === DataSpecsDataType.ARRAY" v-if="property.dataType === DataSpecsDataType.ARRAY"
v-model="property.dataSpecs"
/> />
<!-- TODO puhui999: Struct 属性待完善 -->
<el-form-item label="读写类型" prop="accessMode"> <el-form-item label="读写类型" prop="accessMode">
<el-radio-group v-model="property.accessMode"> <el-radio-group v-model="property.accessMode">
<el-radio label="rw">读写</el-radio> <el-radio label="rw">读写</el-radio>
@ -84,16 +85,8 @@ const handleChange = (dataType: any) => {
property.value.dataSpecsList = [] property.value.dataSpecsList = []
property.value.dataSpecs = {} property.value.dataSpecs = {}
property.value.dataSpecs.dataType = dataType
switch (dataType) { switch (dataType) {
case DataSpecsDataType.INT:
property.value.dataSpecs.dataType = DataSpecsDataType.INT
break
case DataSpecsDataType.DOUBLE:
property.value.dataSpecs.dataType = DataSpecsDataType.DOUBLE
break
case DataSpecsDataType.FLOAT:
property.value.dataSpecs.dataType = DataSpecsDataType.FLOAT
break
case DataSpecsDataType.ENUM: case DataSpecsDataType.ENUM:
property.value.dataSpecsList.push({ property.value.dataSpecsList.push({
dataType: DataSpecsDataType.ENUM, dataType: DataSpecsDataType.ENUM,
@ -110,9 +103,6 @@ const handleChange = (dataType: any) => {
}) })
} }
break break
case DataSpecsDataType.ARRAY:
property.value.dataSpecs.dataType = DataSpecsDataType.ARRAY
break
} }
} }
</script> </script>

33
src/views/iot/product/product/detail/ThingModel/ThingModelForm.vue
View File

@ -22,8 +22,8 @@
</el-form-item> </el-form-item>
<!-- 属性配置 --> <!-- 属性配置 -->
<ThingModelDataSpecs <ThingModelDataSpecs
v-model="formData.property"
v-if="formData.type === ProductFunctionTypeEnum.PROPERTY" v-if="formData.type === ProductFunctionTypeEnum.PROPERTY"
v-model="formData.property"
/> />
</el-form> </el-form>
@ -39,11 +39,12 @@ import { ProductVO } from '@/api/iot/product/product'
import ThingModelDataSpecs from './ThingModelDataSpecs.vue' import ThingModelDataSpecs from './ThingModelDataSpecs.vue'
import { import {
ProductFunctionTypeEnum, ProductFunctionTypeEnum,
ThinkModelFunctionApi, ThingModelData,
ThingModelData ThinkModelFunctionApi
} from '@/api/iot/thinkmodelfunction' } from '@/api/iot/thinkmodelfunction'
import { IOT_PROVIDE_KEY } from '@/views/iot/utils/constants' import { IOT_PROVIDE_KEY } from '@/views/iot/utils/constants'
import { DataSpecsDataType } from './config' import { DataSpecsDataType } from './config'
import { cloneDeep } from 'lodash-es'
defineOptions({ name: 'IoTProductThingModelForm' }) defineOptions({ name: 'IoTProductThingModelForm' })
@ -58,12 +59,15 @@ const formLoading = ref(false)
const formType = ref('') const formType = ref('')
const formData = ref<ThingModelData>({ const formData = ref<ThingModelData>({
type: ProductFunctionTypeEnum.PROPERTY, type: ProductFunctionTypeEnum.PROPERTY,
dataType: DataSpecsDataType.INT,
property: { property: {
dataType: DataSpecsDataType.INT, dataType: DataSpecsDataType.INT,
dataSpecsList: [], dataSpecs: {
dataSpecs: {} dataType: DataSpecsDataType.INT
}
} }
}) })
// TODO puhui999: 表单校验待完善
const formRules = reactive({ const formRules = reactive({
name: [ name: [
{ required: true, message: '功能名称不能为空', trigger: 'blur' }, { required: true, message: '功能名称不能为空', trigger: 'blur' },
@ -114,7 +118,7 @@ const open = async (type: string, id?: number) => {
if (id) { if (id) {
formLoading.value = true formLoading.value = true
try { try {
formData.value = await ThinkModelFunctionApi.getThinkModelFunction(id) formData.value = await ThinkModelFunctionApi.getProductThingModel(id)
} finally { } finally {
formLoading.value = false formLoading.value = false
} }
@ -128,14 +132,19 @@ const submitForm = async () => {
await formRef.value.validate() await formRef.value.validate()
formLoading.value = true formLoading.value = true
try { try {
const data = formData.value as unknown as ThingModelData const data = cloneDeep(formData.value) as ThingModelData
// 信息补全
data.productId = product!.value.id data.productId = product!.value.id
data.productKey = product!.value.productKey data.productKey = product!.value.productKey
data.description = data.property.description
data.dataType = data.property.dataType
data.property.identifier = data.identifier
data.property.name = data.name
if (formType.value === 'create') { if (formType.value === 'create') {
await ThinkModelFunctionApi.createThinkModelFunction(data) await ThinkModelFunctionApi.createProductThingModel(data)
message.success(t('common.createSuccess')) message.success(t('common.createSuccess'))
} else { } else {
await ThinkModelFunctionApi.updateThinkModelFunction(data) await ThinkModelFunctionApi.updateProductThingModel(data)
message.success(t('common.updateSuccess')) message.success(t('common.updateSuccess'))
} }
} finally { } finally {
@ -149,10 +158,12 @@ const submitForm = async () => {
const resetForm = () => { const resetForm = () => {
formData.value = { formData.value = {
type: ProductFunctionTypeEnum.PROPERTY, type: ProductFunctionTypeEnum.PROPERTY,
dataType: DataSpecsDataType.INT,
property: { property: {
dataType: DataSpecsDataType.INT, dataType: DataSpecsDataType.INT,
dataSpecsList: [], dataSpecs: {
dataSpecs: {} dataType: DataSpecsDataType.INT
}
} }
} }
formRef.value?.resetFields() formRef.value?.resetFields()

5
src/views/iot/product/product/detail/ThingModel/config.ts
View File

@ -43,3 +43,8 @@ export const dataTypeOptions = [
{ value: DataSpecsDataType.STRUCT, label: 'struct (结构体)' }, { value: DataSpecsDataType.STRUCT, label: 'struct (结构体)' },
{ value: DataSpecsDataType.ARRAY, label: 'array (数组)' } { value: DataSpecsDataType.ARRAY, label: 'array (数组)' }
] ]
/** 获得物体模型数据类型配置项名称 */
export const getDataTypeOptionsLabel = (value: string) => {
return dataTypeOptions.find((option) => option.value === value)?.label
}

35
src/views/iot/product/product/detail/ThingModel/index.vue
View File

@ -32,7 +32,12 @@
<Icon class="mr-5px" icon="ep:refresh" /> <Icon class="mr-5px" icon="ep:refresh" />
重置 重置
</el-button> </el-button>
<el-button plain type="primary" @click="openForm('create')"> <el-button
v-hasPermi="[`iot:product-thing-model:create`]"
plain
type="primary"
@click="openForm('create')"
>
<Icon class="mr-5px" icon="ep:plus" /> <Icon class="mr-5px" icon="ep:plus" />
添加功能 添加功能
</el-button> </el-button>
@ -49,12 +54,21 @@
</el-table-column> </el-table-column>
<el-table-column align="center" label="功能名称" prop="name" /> <el-table-column align="center" label="功能名称" prop="name" />
<el-table-column align="center" label="标识符" prop="identifier" /> <el-table-column align="center" label="标识符" prop="identifier" />
<el-table-column align="center" label="数据类型" prop="identifier" /> <el-table-column align="center" label="数据类型" prop="identifier">
<el-table-column align="center" label="数据定义" prop="identifier" /> <template #default="{ row }">
{{ dataTypeOptionsLabel(row.property.dataType) ?? '-' }}
</template>
</el-table-column>
<el-table-column align="center" label="数据定义" prop="identifier">
<template #default="{ row }">
<!-- TODO puhui999: 数据定义展示待完善 -->
{{ row.property.dataSpecs ?? row.property.dataSpecsList }}
</template>
</el-table-column>
<el-table-column align="center" label="操作"> <el-table-column align="center" label="操作">
<template #default="scope"> <template #default="scope">
<el-button <el-button
v-hasPermi="[`iot:think-model-function:update`]" v-hasPermi="[`iot:product-thing-model:update`]"
link link
type="primary" type="primary"
@click="openForm('update', scope.row.id)" @click="openForm('update', scope.row.id)"
@ -62,7 +76,7 @@
编辑 编辑
</el-button> </el-button>
<el-button <el-button
v-hasPermi="['iot:think-model-function:delete']" v-hasPermi="['iot:product-thing-model:delete']"
link link
type="danger" type="danger"
@click="handleDelete(scope.row.id)" @click="handleDelete(scope.row.id)"
@ -85,11 +99,12 @@
<ThingModelForm ref="formRef" @success="getList" /> <ThingModelForm ref="formRef" @success="getList" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ThinkModelFunctionApi, ThinkModelFunctionVO } from '@/api/iot/thinkmodelfunction' import { ThingModelData, ThinkModelFunctionApi } from '@/api/iot/thinkmodelfunction'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import ThingModelForm from './ThingModelForm.vue' import ThingModelForm from './ThingModelForm.vue'
import { ProductVO } from '@/api/iot/product/product' import { ProductVO } from '@/api/iot/product/product'
import { IOT_PROVIDE_KEY } from '@/views/iot/utils/constants' import { IOT_PROVIDE_KEY } from '@/views/iot/utils/constants'
import { getDataTypeOptionsLabel } from '@/views/iot/product/product/detail/ThingModel/config'
defineOptions({ name: 'IoTProductThingModel' }) defineOptions({ name: 'IoTProductThingModel' })
@ -97,7 +112,7 @@ const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
const loading = ref(true) // 列表的加载中 const loading = ref(true) // 列表的加载中
const list = ref<ThinkModelFunctionVO[]>([]) // 列表的数据 const list = ref<ThingModelData[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数 const total = ref(0) // 列表的总页数
const queryParams = reactive({ const queryParams = reactive({
pageNo: 1, pageNo: 1,
@ -108,12 +123,14 @@ const queryParams = reactive({
const queryFormRef = ref() // 搜索的表单 const queryFormRef = ref() // 搜索的表单
const product = inject<Ref<ProductVO>>(IOT_PROVIDE_KEY.PRODUCT) // 注入产品信息 const product = inject<Ref<ProductVO>>(IOT_PROVIDE_KEY.PRODUCT) // 注入产品信息
const dataTypeOptionsLabel = computed(() => (value: string) => getDataTypeOptionsLabel(value)) // 解析数据类型
/** 查询列表 */ /** 查询列表 */
const getList = async () => { const getList = async () => {
loading.value = true loading.value = true
try { try {
queryParams.productId = product?.value?.id || -1 queryParams.productId = product?.value?.id || -1
const data = await ThinkModelFunctionApi.getThinkModelFunctionPage(queryParams) const data = await ThinkModelFunctionApi.getProductThingModelPage(queryParams)
list.value = data.list list.value = data.list
total.value = data.total total.value = data.total
} finally { } finally {
@ -145,7 +162,7 @@ const handleDelete = async (id: number) => {
// 删除的二次确认 // 删除的二次确认
await message.delConfirm() await message.delConfirm()
// 发起删除 // 发起删除
await ThinkModelFunctionApi.deleteThinkModelFunction(id) await ThinkModelFunctionApi.deleteProductThingModel(id)
message.success(t('common.delSuccess')) message.success(t('common.delSuccess'))
// 刷新列表 // 刷新列表
await getList() await getList()

2
src/views/iot/product/product/detail/index.vue
View File

@ -8,7 +8,7 @@
<el-tab-pane label="Topic 类列表" name="topic"> <el-tab-pane label="Topic 类列表" name="topic">
<ProductTopic v-if="activeTab === 'topic'" :product="product" /> <ProductTopic v-if="activeTab === 'topic'" :product="product" />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="功能定义" lazy name="function"> <el-tab-pane label="功能定义" lazy name="thingModel">
<IoTProductThingModel ref="thingModelRef" /> <IoTProductThingModel ref="thingModelRef" />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="消息解析" name="message" /> <el-tab-pane label="消息解析" name="message" />

124
src/views/iot/product/product/index.vue
View File

@ -2,49 +2,57 @@
<ContentWrap> <ContentWrap>
<!-- 搜索工作栏 --> <!-- 搜索工作栏 -->
<el-form <el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef" ref="queryFormRef"
:inline="true" :inline="true"
:model="queryParams"
class="-mb-15px"
label-width="68px" label-width="68px"
> >
<el-form-item label="产品名称" prop="name"> <el-form-item label="产品名称" prop="name">
<el-input <el-input
v-model="queryParams.name" v-model="queryParams.name"
placeholder="请输入产品名称"
clearable
@keyup.enter="handleQuery"
class="!w-240px" class="!w-240px"
clearable
placeholder="请输入产品名称"
@keyup.enter="handleQuery"
/> />
</el-form-item> </el-form-item>
<el-form-item label="ProductKey" prop="productKey"> <el-form-item label="ProductKey" prop="productKey">
<el-input <el-input
v-model="queryParams.productKey" v-model="queryParams.productKey"
placeholder="请输入产品标识"
clearable
@keyup.enter="handleQuery"
class="!w-240px" class="!w-240px"
clearable
placeholder="请输入产品标识"
@keyup.enter="handleQuery"
/> />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button> <el-button @click="handleQuery">
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button> <Icon class="mr-5px" icon="ep:search" />
<el-button 搜索
type="primary" </el-button>
plain <el-button @click="resetQuery">
@click="openForm('create')" <Icon class="mr-5px" icon="ep:refresh" />
v-hasPermi="['iot:product:create']" 重置
>
<Icon icon="ep:plus" class="mr-5px" /> 新增
</el-button> </el-button>
<el-button <el-button
type="success" v-hasPermi="['iot:product:create']"
plain plain
@click="handleExport" type="primary"
:loading="exportLoading" @click="openForm('create')"
v-hasPermi="['iot:product:export']"
> >
<Icon icon="ep:download" class="mr-5px" /> 导出 <Icon class="mr-5px" icon="ep:plus" />
新增
</el-button>
<el-button
v-hasPermi="['iot:product:export']"
:loading="exportLoading"
plain
type="success"
@click="handleExport"
>
<Icon class="mr-5px" icon="ep:download" />
导出
</el-button> </el-button>
</el-form-item> </el-form-item>
<!-- 视图切换按钮 --> <!-- 视图切换按钮 -->
@ -64,8 +72,8 @@
<!-- 卡片视图 --> <!-- 卡片视图 -->
<ContentWrap> <ContentWrap>
<el-row v-if="viewMode === 'card'" :gutter="16"> <el-row v-if="viewMode === 'card'" :gutter="16">
<el-col v-for="item in list" :key="item.id" :xs="24" :sm="12" :md="12" :lg="6" class="mb-4"> <el-col v-for="item in list" :key="item.id" :lg="6" :md="12" :sm="12" :xs="24" class="mb-4">
<el-card class="h-full transition-colors" :body-style="{ padding: '0' }"> <el-card :body-style="{ padding: '0' }" class="h-full transition-colors">
<!-- 内容区域 --> <!-- 内容区域 -->
<div class="p-4"> <div class="p-4">
<!-- 标题区域 --> <!-- 标题区域 -->
@ -103,41 +111,41 @@
<!-- 按钮组 --> <!-- 按钮组 -->
<div class="flex items-center px-0"> <div class="flex items-center px-0">
<el-button <el-button
class="flex-1 !px-2 !h-[32px] text-[13px]"
type="primary"
plain
@click="openForm('update', item.id)"
v-hasPermi="['iot:product:update']" v-hasPermi="['iot:product:update']"
class="flex-1 !px-2 !h-[32px] text-[13px]"
plain
type="primary"
@click="openForm('update', item.id)"
> >
<Icon icon="ep:edit-pen" class="mr-1" /> <Icon class="mr-1" icon="ep:edit-pen" />
编辑 编辑
</el-button> </el-button>
<el-button <el-button
class="flex-1 !px-2 !h-[32px] !ml-[10px] text-[13px]" class="flex-1 !px-2 !h-[32px] !ml-[10px] text-[13px]"
type="warning"
plain plain
type="warning"
@click="openDetail(item.id)" @click="openDetail(item.id)"
> >
<Icon icon="ep:view" class="mr-1" /> <Icon class="mr-1" icon="ep:view" />
详情 详情
</el-button> </el-button>
<el-button <el-button
class="flex-1 !px-2 !h-[32px] !ml-[10px] text-[13px]" class="flex-1 !px-2 !h-[32px] !ml-[10px] text-[13px]"
type="success"
plain plain
type="success"
@click="openObjectModel(item)" @click="openObjectModel(item)"
> >
<Icon icon="ep:scale-to-original" class="mr-1" /> <Icon class="mr-1" icon="ep:scale-to-original" />
物模型 物模型
</el-button> </el-button>
<div class="mx-[10px] h-[20px] w-[1px] bg-[#dcdfe6]"></div> <div class="mx-[10px] h-[20px] w-[1px] bg-[#dcdfe6]"></div>
<el-button <el-button
class="!px-2 !h-[32px] text-[13px]"
type="danger"
plain
@click="handleDelete(item.id)"
v-hasPermi="['iot:product:delete']" v-hasPermi="['iot:product:delete']"
:disabled="item.status === 1" :disabled="item.status === 1"
class="!px-2 !h-[32px] text-[13px]"
plain
type="danger"
@click="handleDelete(item.id)"
> >
<Icon icon="ep:delete" /> <Icon icon="ep:delete" />
</el-button> </el-button>
@ -148,68 +156,68 @@
</el-row> </el-row>
<!-- 列表视图 --> <!-- 列表视图 -->
<el-table v-else v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true"> <el-table v-else v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
<el-table-column label="ID" align="center" prop="id" /> <el-table-column align="center" label="ID" prop="id" />
<el-table-column label="ProductKey" align="center" prop="productKey" /> <el-table-column align="center" label="ProductKey" prop="productKey" />
<el-table-column label="品类" align="center" prop="categoryName" /> <el-table-column align="center" label="品类" prop="categoryName" />
<el-table-column label="设备类型" align="center" prop="deviceType"> <el-table-column align="center" label="设备类型" prop="deviceType">
<template #default="scope"> <template #default="scope">
<dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="scope.row.deviceType" /> <dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="scope.row.deviceType" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="产品图标" align="center" prop="icon"> <el-table-column align="center" label="产品图标" prop="icon">
<template #default="scope"> <template #default="scope">
<el-image <el-image
v-if="scope.row.icon" v-if="scope.row.icon"
:preview-src-list="[scope.row.icon]"
:src="scope.row.icon" :src="scope.row.icon"
class="w-40px h-40px" class="w-40px h-40px"
:preview-src-list="[scope.row.icon]"
/> />
<span v-else>-</span> <span v-else>-</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="产品图片" align="center" prop="picture"> <el-table-column align="center" label="产品图片" prop="picture">
<template #default="scope"> <template #default="scope">
<el-image <el-image
v-if="scope.row.picUrl" v-if="scope.row.picUrl"
:preview-src-list="[scope.row.picture]"
:src="scope.row.picUrl" :src="scope.row.picUrl"
class="w-40px h-40px" class="w-40px h-40px"
:preview-src-list="[scope.row.picture]"
/> />
<span v-else>-</span> <span v-else>-</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
label="创建时间"
align="center"
prop="createTime"
:formatter="dateFormatter" :formatter="dateFormatter"
align="center"
label="创建时间"
prop="createTime"
width="180px" width="180px"
/> />
<el-table-column label="操作" align="center"> <el-table-column align="center" label="操作">
<template #default="scope"> <template #default="scope">
<el-button <el-button
v-hasPermi="['iot:product:query']"
link link
type="primary" type="primary"
@click="openDetail(scope.row.id)" @click="openDetail(scope.row.id)"
v-hasPermi="['iot:product:query']"
> >
查看 查看
</el-button> </el-button>
<el-button <el-button
v-hasPermi="['iot:product:update']"
link link
type="primary" type="primary"
@click="openForm('update', scope.row.id)" @click="openForm('update', scope.row.id)"
v-hasPermi="['iot:product:update']"
> >
编辑 编辑
</el-button> </el-button>
<el-button <el-button
v-hasPermi="['iot:product:delete']"
:disabled="scope.row.status === 1"
link link
type="danger" type="danger"
@click="handleDelete(scope.row.id)" @click="handleDelete(scope.row.id)"
v-hasPermi="['iot:product:delete']"
:disabled="scope.row.status === 1"
> >
删除 删除
</el-button> </el-button>
@ -219,9 +227,9 @@
<!-- 分页 --> <!-- 分页 -->
<Pagination <Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize" v-model:limit="queryParams.pageSize"
v-model:page="queryParams.pageNo"
:total="total"
@pagination="getList" @pagination="getList"
/> />
</ContentWrap> </ContentWrap>
@ -230,7 +238,7 @@
<ProductForm ref="formRef" @success="getList" /> <ProductForm ref="formRef" @success="getList" />
</template> </template>
<script setup lang="ts"> <script lang="ts" setup>
import { dateFormatter } from '@/utils/formatTime' import { dateFormatter } from '@/utils/formatTime'
import { ProductApi, ProductVO } from '@/api/iot/product/product' import { ProductApi, ProductVO } from '@/api/iot/product/product'
import ProductForm from './ProductForm.vue' import ProductForm from './ProductForm.vue'
@ -301,7 +309,7 @@ const openObjectModel = (item: ProductVO) => {
push({ push({
name: 'IoTProductDetail', name: 'IoTProductDetail',
params: { id: item.id }, params: { id: item.id },
query: { tab: 'function' } query: { tab: 'thingModel' }
}) })
} }