【功能新增】IoT：产品新增时，productKey 由前端生成；同时增加 icon、picUrl 字段

dc2dbcbc · YunaiV · 3a94b8a9 · dc2dbcbc · dc2dbcbc
Commit dc2dbcbc authored Dec 07, 2024 by YunaiV
Hide whitespace changes
Inline Side-by-side

Showing with 76 additions and 45 deletions

src/api/iot/product/category/index.ts
+5 -0

src/views/iot/product/product/ProductForm.vue
+71 -45

No files found.
--- a/src/api/iot/product/category/index.ts
+++ b/src/api/iot/product/category/index.ts
@@ -34,5 +34,10 @@ export const ProductCategoryApi = {
  // 删除产品分类
  deleteProductCategory: async (id: number) => {
    return await request.delete({ url: `/iot/product-category/delete?id=` + id })
+  },
+  /** 获取产品分类精简列表 */
+  getSimpleProductCategoryList: () => {
+    return request.get({ url: '/iot/product-category/simple-list' })
  }
 }
--- a/src/views/iot/product/product/ProductForm.vue
+++ b/src/views/iot/product/product/ProductForm.vue
@@ -4,28 +4,40 @@
      ref="formRef"
      :model="formData"
      :rules="formRules"
-      label-width="100px"
+      label-width="110px"
      v-loading="formLoading"
    >
+      <el-form-item label="产品标识" prop="productKey">
+        <el-input
+          v-model="formData.productKey"
+          placeholder="请输入产品标识"
+          :readonly="formType === 'update'"
+        />
+      </el-form-item>
      <el-form-item label="产品名称" prop="name">
        <el-input v-model="formData.name" placeholder="请输入产品名称" />
      </el-form-item>
+      <el-form-item label="产品分类" prop="categoryId">
-      <el-form-item label="设备类型" prop="deviceType">
+        <el-select v-model="formData.categoryId" placeholder="请选择产品分类" clearable>
-        <el-select
-          v-model="formData.deviceType"
-          placeholder="请选择设备类型"
-          :disabled="formType === 'update'"
-        >
          <el-option
-            v-for="dict in getIntDictOptions(DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE)"
+            v-for="category in categoryList"
-            :key="dict.value"
+            :key="category.id"
-            :label="dict.label"
+            :label="category.name"
-            :value="dict.value"
+            :value="category.id"
          />
        </el-select>
      </el-form-item>
+      <el-form-item label="设备类型" prop="deviceType">
+        <el-radio-group v-model="formData.deviceType" :disabled="formType === 'update'">
+          <el-radio
+            v-for="dict in getIntDictOptions(DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE)"
+            :key="dict.value"
+            :label="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
      <el-form-item
        v-if="formData.deviceType === 0 || formData.deviceType === 2"
        label="联网方式"
@@ -44,7 +56,6 @@
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="formData.deviceType === 1" label="接入网关协议" prop="protocolType">
        <el-select
          v-model="formData.protocolType"
@@ -59,22 +70,17 @@
          />
        </el-select>
      </el-form-item>
      <el-form-item label="数据格式" prop="dataFormat">
-        <el-select
+        <el-radio-group v-model="formData.dataFormat" :disabled="formType === 'update'">
-          v-model="formData.dataFormat"
+          <el-radio
-          placeholder="请选择接数据格式"
-          :disabled="formType === 'update'"
-        >
-          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.IOT_DATA_FORMAT)"
            :key="dict.value"
-            :label="dict.label"
+            :label="dict.value"
-            :value="dict.value"
+          >
-          />
+            {{ dict.label }}
-        </el-select>
+          </el-radio>
+        </el-radio-group>
      </el-form-item>
      <el-form-item label="数据校验级别" prop="validateType">
        <el-radio-group v-model="formData.validateType" :disabled="formType === 'update'">
          <el-radio
@@ -86,12 +92,20 @@
          </el-radio>
        </el-radio-group>
      </el-form-item>
+      <el-collapse>
-      <el-form-item label="产品描述" prop="description">
+        <el-collapse-item title="更多配置">
-        <el-input type="textarea" v-model="formData.description" placeholder="请输入产品描述" />
+          <el-form-item label="产品图标" prop="icon">
-      </el-form-item>
+            <UploadImg v-model="formData.icon" :height="'80px'" :width="'80px'" />
+          </el-form-item>
+          <el-form-item label="产品图片" prop="picUrl">
+            <UploadImg v-model="formData.picUrl" :height="'120px'" :width="'120px'" />
+          </el-form-item>
+          <el-form-item label="产品描述" prop="description">
+            <el-input type="textarea" v-model="formData.description" placeholder="请输入产品描述" />
+          </el-form-item>
+        </el-collapse-item>
+      </el-collapse>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
@@ -100,8 +114,11 @@
 </template>
 <script setup lang="ts">
-import { ValidateTypeEnum, ProductApi, ProductVO } from '@/api/iot/product/product'
+import { ValidateTypeEnum, ProductApi, ProductVO, DataFormatEnum } from '@/api/iot/product/product'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { ProductCategoryApi, ProductCategoryVO } from '@/api/iot/product/category'
+import { UploadImg } from '@/components/UploadFile'
+import { generateRandomStr } from '@/utils'
 defineOptions({ name: 'IoTProductForm' })
@@ -113,21 +130,24 @@ const dialogTitle = ref('')
 const formLoading = ref(false)
 const formType = ref('')
 const formData = ref({
-  name: undefined,
  id: undefined,
-  productKey: undefined,
+  name: undefined,
-  protocolId: undefined,
+  productKey: '',
  categoryId: undefined,
+  icon: undefined,
+  picUrl: undefined,
  description: undefined,
-  validateType: ValidateTypeEnum.WEAK,
-  status: undefined,
  deviceType: undefined,
  netType: undefined,
  protocolType: undefined,
-  dataFormat: undefined
+  protocolId: undefined,
+  dataFormat: DataFormatEnum.JSON,
+  validateType: ValidateTypeEnum.WEAK
 })
 const formRules = reactive({
+  productKey: [{ required: true, message: '产品标识不能为空', trigger: 'blur' }],
  name: [{ required: true, message: '产品名称不能为空', trigger: 'blur' }],
+  categoryId: [{ required: true, message: '产品分类不能为空', trigger: 'change' }],
  deviceType: [{ required: true, message: '设备类型不能为空', trigger: 'change' }],
  netType: [
    {
@@ -138,7 +158,6 @@ const formRules = reactive({
  ],
  protocolType: [
    {
-      // required: formData.deviceType === 1,
      required: true,
      message: '接入网关协议不能为空',
      trigger: 'change'
@@ -148,6 +167,7 @@ const formRules = reactive({
  validateType: [{ required: true, message: '数据校验级别不能为空', trigger: 'change' }]
 })
 const formRef = ref()
+const categoryList = ref<ProductCategoryVO[]>([]) // 产品分类列表
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
@@ -162,7 +182,12 @@ const open = async (type: string, id?: number) => {
    } finally {
      formLoading.value = false
    }
+  } else {
+    // 新增时，生成随机 productKey
+    formData.value.productKey = generateRandomStr(16)
  }
+  // 加载分类列表
+  categoryList.value = await ProductCategoryApi.getSimpleProductCategoryList()
 }
 defineExpose({ open, close: () => (dialogVisible.value = false) })
@@ -190,18 +215,19 @@ const submitForm = async () => {
 /** 重置表单 */
 const resetForm = () => {
  formData.value = {
-    name: undefined,
    id: undefined,
-    productKey: undefined,
+    name: undefined,
-    protocolId: undefined,
+    productKey: '',
    categoryId: undefined,
+    icon: undefined,
+    picUrl: undefined,
    description: undefined,
-    validateType: ValidateTypeEnum.WEAK,
-    status: undefined,
    deviceType: undefined,
    netType: undefined,
    protocolType: undefined,
-    dataFormat: undefined
+    protocolId: undefined,
+    dataFormat: DataFormatEnum.JSON,
+    validateType: ValidateTypeEnum.WEAK
  }
  formRef.value?.resetFields()
 }