【功能新增】IoT：优化产品管理的 card 展示
YunaiV
parent
1ce8233159
commit
8b59786fbf
|
|
@ -8,6 +8,8 @@ export interface ProductVO {
|
|||
protocolId: number // 协议编号
|
||||
categoryId: number // 产品所属品类标识符
|
||||
categoryName?: string // 产品所属品类名称
|
||||
icon: string // 产品图标
|
||||
picUrl: string // 产品图片
|
||||
description: string // 产品描述
|
||||
validateType: number // 数据校验级别
|
||||
status: number // 产品状态
|
||||
|
|
@ -17,7 +19,6 @@ export interface ProductVO {
|
|||
dataFormat: number // 数据格式
|
||||
deviceCount: number // 设备数量
|
||||
createTime: Date // 创建时间
|
||||
picUrl: string // 产品图片 URL
|
||||
}
|
||||
|
||||
// IOT 数据校验级别枚举类
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 9.8 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 12 12"><g clip-path="url(#a)"><path fill="url(#b)" fill-rule="evenodd" d="M6.958.42C6.444.216 5.61.216 5.098.42L1.15 1.975c-.77.304-.77.797 0 1.1l3.947 1.558c.514.202 1.347.202 1.86 0l3.948-1.557c.77-.304.77-.797 0-1.1L6.958.418ZM4.715 11.788a.857.857 0 0 0 .3.056c.383 0 .671-.295.671-.7V6.404c0-.49-.364-1.007-.817-1.177L1.09 3.805a.808.808 0 0 0-.284-.056c-.353 0-.581.275-.581.7V9.19c0 .508.33 1.014.763 1.177l3.726 1.422Zm2.229-.024h-.02l.073.003c.074.004.154.009.227-.019L11 10.367c.45-.168.83-.686.83-1.177V4.45c0-.413-.29-.7-.673-.7a.965.965 0 0 0-.317.055l-3.72 1.422c-.44.165-.75.67-.75 1.177v4.74c0 .42.218.621.575.621Z" clip-rule="evenodd"/></g><defs><linearGradient id="b" x1=".226" x2="11.803" y1=".267" y2="11.871" gradientUnits="userSpaceOnUse"><stop stop-color="#1B3149"/><stop offset="1" stop-color="#717D8A"/></linearGradient><clipPath id="a"><path fill="#fff" d="M0 0h12v12H0z"/></clipPath></defs></svg>
|
||||
|
After Width: | Height: | Size: 1011 B |
|
|
@ -7,10 +7,10 @@
|
|||
label-width="110px"
|
||||
v-loading="formLoading"
|
||||
>
|
||||
<el-form-item label="产品标识" prop="productKey">
|
||||
<el-form-item label="ProductKey" prop="productKey">
|
||||
<el-input
|
||||
v-model="formData.productKey"
|
||||
placeholder="请输入产品标识"
|
||||
placeholder="请输入 ProductKey"
|
||||
:readonly="formType === 'update'"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
|
@ -145,7 +145,7 @@ const formData = ref({
|
|||
validateType: ValidateTypeEnum.WEAK
|
||||
})
|
||||
const formRules = reactive({
|
||||
productKey: [{ required: true, message: '产品标识不能为空', trigger: 'blur' }],
|
||||
productKey: [{ required: true, message: 'ProductKey 不能为空', trigger: 'blur' }],
|
||||
name: [{ required: true, message: '产品名称不能为空', trigger: 'blur' }],
|
||||
categoryId: [{ required: true, message: '产品分类不能为空', trigger: 'change' }],
|
||||
deviceType: [{ required: true, message: '设备类型不能为空', trigger: 'change' }],
|
||||
|
|
|
|||
|
|
@ -63,49 +63,93 @@
|
|||
|
||||
<!-- 卡片视图 -->
|
||||
<ContentWrap>
|
||||
<div
|
||||
v-if="viewMode === 'card'"
|
||||
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"
|
||||
>
|
||||
<div v-if="viewMode === 'card'" class="flex flex-wrap gap-4">
|
||||
<el-card
|
||||
v-for="item in list"
|
||||
:key="item.id"
|
||||
class="cursor-pointer hover:shadow-lg transition-shadow"
|
||||
@click="openDetail(item.id)"
|
||||
class="w-[calc(25%-12px)] transition-colors"
|
||||
:body-style="{ padding: '0' }"
|
||||
>
|
||||
<div class="flex items-center mb-4">
|
||||
<el-image
|
||||
:src="item.picUrl || '/src/assets/default-product.png'"
|
||||
class="w-12 h-12 mr-4"
|
||||
fit="cover"
|
||||
/>
|
||||
<div class="flex-1">
|
||||
<div class="font-bold text-lg">{{ item.name }}</div>
|
||||
<div class="text-gray-500 text-sm">{{ item.productKey }}</div>
|
||||
<!-- 内容区域 -->
|
||||
<div class="p-4">
|
||||
<!-- 标题区域 -->
|
||||
<div class="flex items-center mb-3">
|
||||
<div class="mr-2.5 flex items-center">
|
||||
<el-image
|
||||
:src="item.icon || defaultIconUrl"
|
||||
class="w-[35px] h-[35px]"
|
||||
fit="contain"
|
||||
/>
|
||||
</div>
|
||||
<div class="text-[16px] font-600">{{ item.name }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 信息区域 -->
|
||||
<div class="flex items-center text-[14px]">
|
||||
<div class="flex-1">
|
||||
<div class="mb-2.5 last:mb-0">
|
||||
<span class="text-[#717c8e] mr-2.5">产品分类</span>
|
||||
<span class="text-[#0070ff]">{{ item.categoryName }}</span>
|
||||
</div>
|
||||
<div class="mb-2.5 last:mb-0">
|
||||
<span class="text-[#717c8e] mr-2.5">产品类型</span>
|
||||
<dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="item.deviceType" />
|
||||
</div>
|
||||
<div class="mb-2.5 last:mb-0">
|
||||
<span class="text-[#717c8e] mr-2.5">产品标识</span>
|
||||
<span class="text-[#0b1d30]">{{ item.productKey }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-[100px] h-[100px]">
|
||||
<el-image :src="item.picUrl || defaultPicUrl" class="w-full h-full" fit="cover" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分隔线 -->
|
||||
<el-divider class="!my-3" />
|
||||
|
||||
<!-- 按钮组 -->
|
||||
<div class="flex items-center">
|
||||
<el-button
|
||||
class="flex-1 !px-2 !h-[32px]"
|
||||
type="primary"
|
||||
plain
|
||||
@click="openForm('update', item.id)"
|
||||
v-hasPermi="['iot:product:update']"
|
||||
>
|
||||
<Icon icon="ep:edit-pen" class="mr-1" />
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
class="flex-1 !px-2 !h-[32px] !ml-[12px]"
|
||||
type="warning"
|
||||
plain
|
||||
@click="openDetail(item.id)"
|
||||
>
|
||||
<Icon icon="ep:view" class="mr-1" />
|
||||
详情
|
||||
</el-button>
|
||||
<el-button
|
||||
class="flex-1 !px-2 !h-[32px] !ml-[12px]"
|
||||
type="success"
|
||||
plain
|
||||
@click="openObjectModel(item)"
|
||||
>
|
||||
<Icon icon="ep:scale-to-original" class="mr-1" />
|
||||
物模型
|
||||
</el-button>
|
||||
<div class="mx-[12px] h-[20px] w-[1px] bg-[#dcdfe6]"></div>
|
||||
<el-button
|
||||
class="!px-2 !h-[32px]"
|
||||
type="danger"
|
||||
plain
|
||||
@click="handleDelete(item.id)"
|
||||
v-hasPermi="['iot:product:delete']"
|
||||
:disabled="item.status === 1"
|
||||
>
|
||||
<Icon icon="ep:delete" />
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm text-gray-500">
|
||||
<span>{{ item.categoryName }}</span>
|
||||
<dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="item.deviceType" />
|
||||
</div>
|
||||
<div class="flex justify-end mt-4">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
@click.stop="openForm('update', item.id)"
|
||||
v-hasPermi="['iot:product:update']"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="danger"
|
||||
@click.stop="handleDelete(item.id)"
|
||||
v-hasPermi="['iot:product:delete']"
|
||||
:disabled="item.status === 1"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
|
@ -199,6 +243,8 @@ import { ProductApi, ProductVO } from '@/api/iot/product/product'
|
|||
import ProductForm from './ProductForm.vue'
|
||||
import { DICT_TYPE } from '@/utils/dict'
|
||||
import download from '@/utils/download'
|
||||
import defaultPicUrl from '@/assets/imgs/iot/device.png'
|
||||
import defaultIconUrl from '@/assets/svgs/iot/cube.svg'
|
||||
|
||||
/** iot 产品列表 */
|
||||
defineOptions({ name: 'IoTProduct' })
|
||||
|
|
@ -216,7 +262,7 @@ const queryParams = reactive({
|
|||
productKey: undefined
|
||||
})
|
||||
const queryFormRef = ref() // 搜索的表单
|
||||
const exportLoading = ref(false) // 导出的加载中
|
||||
const exportLoading = ref(false) // 导出加载中
|
||||
const viewMode = ref<'card' | 'list'>('card') // 视图模式状态
|
||||
|
||||
/** 查询列表 */
|
||||
|
|
|
|||
Loading…
Reference in New Issue