【代码评审】IoT：产品、设备、物模型的代码

src/views/iot/product/ProductForm.vue

@@ -128,15 +128,10 @@ const formData = ref({
 })
 const formRules = reactive({
   name: [{ required: true, message: '产品名称不能为空', trigger: 'blur' }],
-  deviceType: [
-    {
-      required: true,
-      message: '设备类型不能为空',
-      trigger: 'change'
-    }
-  ],
+  deviceType: [{ required: true, message: '设备类型不能为空', trigger: 'change' }],
   netType: [
     {
+      // TODO @haohao：0、1、/2 最好前端也枚举下；另外，这里的 required 可以直接设置为 true。然后表单那些 v-if。只要不存在，它自动就不校验了哈
       required: formData.deviceType === 0 || formData.deviceType === 2,
       message: '联网方式不能为空',
       trigger: 'change'
@@ -145,23 +140,12 @@ const formRules = reactive({
   protocolType: [
     { required: formData.deviceType === 1, message: '接入网关协议不能为空', trigger: 'change' }
   ],
-  dataFormat: [
-    {
-      required: true,
-      message: '数据格式不能为空',
-      trigger: 'change'
-    }
-  ],
-  validateType: [
-    {
-      required: true,
-      message: '数据校验级别不能为空',
-      trigger: 'change'
-    }
-  ]
+  dataFormat: [{ required: true, message: '数据格式不能为空', trigger: 'change' }],
+  validateType: [{ required: true, message: '数据校验级别不能为空', trigger: 'change' }]
 })
 const formRef = ref()
 
+/** 打开弹窗 */
 const open = async (type: string, id?: number) => {
   dialogVisible.value = true
   dialogTitle.value = t('action.' + type)
@@ -178,6 +162,7 @@ const open = async (type: string, id?: number) => {
 }
 defineExpose({ open, close: () => (dialogVisible.value = false) })
 
+/** 提交表单 */
 const emit = defineEmits(['success'])
 const submitForm = async () => {
   await formRef.value.validate()
@@ -198,6 +183,7 @@ const submitForm = async () => {
   }
 }
 
+/** 重置表单 */
 const resetForm = () => {
   formData.value = {
     name: undefined,

src/views/iot/product/detail/ProductDetailsHeader.vue

@@ -58,19 +58,24 @@ import ProductForm from '@/views/iot/product/ProductForm.vue'
 import { ProductApi, ProductVO } from '@/api/iot/product'
 
 const message = useMessage()
+
+const { product } = defineProps<{ product: ProductVO }>() // 定义 Props
+
+/** 处理复制 */
 const copyToClipboard = (text: string) => {
   navigator.clipboard.writeText(text).then(() => {
     message.success('复制成功')
   })
 }
 
-// 路由跳转到设备管理
-const { currentRoute, push } = useRouter()
+/** 路由跳转到设备管理 */
+const { push } = useRouter()
 const goToManagement = (productId: string) => {
   push({ name: 'IoTDevice', query: { productId } })
 }
 
-// 操作修改
+/** 操作修改 */
+const emit = defineEmits(['refresh']) // 定义 Emits
 const formRef = ref()
 const openForm = (type: string, id?: number) => {
   formRef.value.open(type, id)
@@ -95,10 +100,4 @@ const confirmUnpublish = async (id: number) => {
     message.error('撤销发布失败')
   }
 }
-
-// 定义 Props
-const { product } = defineProps<{ product: ProductVO }>()
-
-// 定义 Emits
-const emit = defineEmits(['refresh'])
 </script>

src/views/iot/product/detail/ProductDetailsInfo.vue

@@ -6,9 +6,9 @@
         <el-descriptions-item label="设备类型">
           <dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="product.deviceType" />
         </el-descriptions-item>
-        <el-descriptions-item label="创建时间">{{
-          formatDate(product.createTime)
-        }}</el-descriptions-item>
+        <el-descriptions-item label="创建时间">
+          {{ formatDate(product.createTime) }}
+        </el-descriptions-item>
         <el-descriptions-item label="数据格式">
           <dict-tag :type="DICT_TYPE.IOT_DATA_FORMAT" :value="product.dataFormat" />
         </el-descriptions-item>

src/views/iot/product/detail/ProductTopic.vue

@@ -44,6 +44,7 @@ const columns2 = reactive([
   { label: '描述', field: 'description' }
 ])
 
+// TODO @haohao：这个，有没可能写到一个枚举里，方便后续维护？ /Users/yunai/Java/yudao-ui-admin-vue3/src/views/ai/utils/constants.ts
 const data1 = computed(() => {
   if (!props.product || !props.product.productKey) return []
   return [

src/views/iot/product/detail/ThinkModelFunction.vue

@@ -88,6 +88,7 @@ import ThinkModelFunctionForm from '@/views/iot/product/detail/ThinkModelFunctio
 
 const props = defineProps<{ product: ProductVO }>()
 
+const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
 const loading = ref(true) // 列表的加载中
@@ -97,7 +98,7 @@ const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
   type: undefined,
-  productId: undefined
+  productId: -1
 })
 
 const queryFormRef = ref() // 搜索的表单

src/views/iot/product/detail/ThinkModelFunctionForm.vue

@@ -46,7 +46,6 @@
         <span class="mx-2">~</span>
         <el-input v-model="formData.property.dataType.specs.max" placeholder="请输入最大值" />
       </el-form-item>
-
       <el-form-item label="步长" prop="step">
         <el-input v-model="formData.property.dataType.specs.step" placeholder="请输入步长" />
       </el-form-item>
@@ -77,7 +76,6 @@
 
 <script setup lang="ts">
 import { ProductVO } from '@/api/iot/product'
-import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { ThinkModelFunctionApi, ThinkModelFunctionVO } from '@/api/iot/thinkmodelfunction'
 
 const props = defineProps<{ product: ProductVO }>()
@@ -159,6 +157,7 @@ const formRules = reactive({
 })
 const formRef = ref()
 
+/** 打开弹窗 */
 const open = async (type: string, id?: number) => {
   dialogVisible.value = true
   dialogTitle.value = t('action.' + type)
@@ -175,6 +174,7 @@ const open = async (type: string, id?: number) => {
 }
 defineExpose({ open, close: () => (dialogVisible.value = false) })
 
+/** 提交表单 */
 const emit = defineEmits(['success'])
 const submitForm = async () => {
   await formRef.value.validate()
@@ -197,6 +197,7 @@ const submitForm = async () => {
   }
 }
 
+/** 重置表单 */
 const resetForm = () => {
   formData.value = {
     id: undefined,
@@ -205,7 +206,7 @@ const resetForm = () => {
     identifier: undefined,
     name: undefined,
     description: undefined,
-    type: '1',
+    type: '1', // todo @HAOHAO：看看枚举下
     property: {
       identifier: undefined,
       name: undefined,

src/views/iot/product/detail/index.vue

@@ -23,9 +23,14 @@ import ProductDetailsHeader from '@/views/iot/product/detail/ProductDetailsHeade
 import ProductDetailsInfo from '@/views/iot/product/detail/ProductDetailsInfo.vue'
 import ProductTopic from '@/views/iot/product/detail/ProductTopic.vue'
 import ThinkModelFunction from '@/views/iot/product/detail/ThinkModelFunction.vue'
+import { useTagsViewStore } from '@/store/modules/tagsView'
+import { useRouter } from 'vue-router'
 
 defineOptions({ name: 'IoTProductDetail' })
 
+const { delView } = useTagsViewStore() // 视图操作
+const { currentRoute } = useRouter()
+
 const route = useRoute()
 const message = useMessage()
 const id = Number(route.params.id) // 编号
@@ -45,7 +50,7 @@ const getProductData = async (id: number) => {
 }
 
 // 查询设备数量
-const getDeviceCount = async (productId: string) => {
+const getDeviceCount = async (productId: number) => {
   try {
     const count = await DeviceApi.getDeviceCount(productId)
     console.log('Device count response:', count)

src/views/iot/product/index.vue

@@ -104,7 +104,6 @@
 
 <script setup lang="ts">
 import { dateFormatter } from '@/utils/formatTime'
-import download from '@/utils/download'
 import { ProductApi, ProductVO } from '@/api/iot/product'
 import ProductForm from './ProductForm.vue'
 import { DICT_TYPE } from '@/utils/dict'
@@ -135,7 +134,6 @@ const queryParams = reactive({
   dataFormat: undefined
 })
 const queryFormRef = ref() // 搜索的表单
-const exportLoading = ref(false) // 导出的加载中
 
 /** 查询列表 */
 const getList = async () => {
@@ -168,7 +166,7 @@ const openForm = (type: string, id?: number) => {
 }
 
 /** 打开详情 */
-const { currentRoute, push } = useRouter()
+const { push } = useRouter()
 const openDetail = (id: number) => {
   push({ name: 'IoTProductDetail', params: { id } })
 }
@@ -186,21 +184,6 @@ const handleDelete = async (id: number) => {
   } catch {}
 }
 
-/** 导出按钮操作 */
-const handleExport = async () => {
-  try {
-    // 导出的二次确认
-    await message.exportConfirm()
-    // 发起导出
-    exportLoading.value = true
-    const data = await ProductApi.exportProduct(queryParams)
-    download.excel(data, 'iot 产品.xls')
-  } catch {
-  } finally {
-    exportLoading.value = false
-  }
-}
-
 /** 初始化 **/
 onMounted(() => {
   getList()