修改：IOT 产品管理 发布产品和产品详情

src/api/iot/product/index.ts

@@ -46,5 +46,10 @@ export const ProductApi = {
   // 导出iot 产品 Excel
   exportProduct: async (params) => {
     return await request.download({ url: `/iot/product/export-excel`, params })
+  },
+
+  // 更新产品状态
+  updateProductStatus: async (id: number, status: number) => {
+    return await request.put({ url: `/iot/product/update-status?id=` + id + `&status=` + status })
   }
-}
+}

src/components/DictTag/src/DictTag.vue

@@ -3,7 +3,7 @@ import { defineComponent, PropType, computed } from 'vue'
 import { isHexColor } from '@/utils/color'
 import { ElTag } from 'element-plus'
 import { DictDataType, getDictOptions } from '@/utils/dict'
-import { isArray, isString, isNumber } from '@/utils/is'
+import { isArray, isString, isNumber, isBoolean } from '@/utils/is'
 
 export default defineComponent({
   name: 'DictTag',
@@ -29,15 +29,15 @@ export default defineComponent({
   },
   setup(props) {
     const valueArr: any = computed(() => {
-      // 1.是Number类型的情况
-      if (isNumber(props.value)) {
+      // 1. 是 Number 类型和 Boolean 类型的情况
+      if (isNumber(props.value) || isBoolean(props.value)) {
         return [String(props.value)]
       }
-      // 2.是字符串（进一步判断是否有包含分隔符号 -> props.sepSymbol ）
+      // 2. 是字符串（进一步判断是否有包含分隔符号 -> props.sepSymbol ）
       else if (isString(props.value)) {
         return props.value.split(props.separator)
       }
-      // 3.数组
+      // 3. 数组
       else if (isArray(props.value)) {
         return props.value.map(String)
       }
@@ -57,7 +57,7 @@ export default defineComponent({
         <div
           class="dict-tag"
           style={{
-            display: 'flex',
+            display: 'inline-flex',
             gap: props.gutter,
             justifyContent: 'center',
             alignItems: 'center'
@@ -72,7 +72,7 @@ export default defineComponent({
                 // 添加标签的文字颜色为白色，解决自定义背景颜色时标签文字看不清的问题
                 <ElTag
                   style={dict?.cssClass ? 'color: #fff' : ''}
-                  type={dict?.colorType}
+                  type={dict?.colorType || null}
                   color={dict?.cssClass && isHexColor(dict?.cssClass) ? dict?.cssClass : ''}
                   disableTransitions={true}
                 >

src/utils/formatTime.ts

@@ -56,11 +56,11 @@ export const defaultShortcuts = [
  * 时间日期转换
  * @param date 当前时间，new Date() 格式
  * @param format 需要转换的时间格式字符串
- * @description format 字符串随意，如 `YYYY-mm、YYYY-mm-dd`
- * @description format 季度："YYYY-mm-dd HH:MM:SS QQQQ"
- * @description format 星期："YYYY-mm-dd HH:MM:SS WWW"
- * @description format 几周："YYYY-mm-dd HH:MM:SS ZZZ"
- * @description format 季度 + 星期 + 几周："YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ"
+ * @description format 字符串随意，如 `YYYY-MM、YYYY-MM-DD`
+ * @description format 季度："YYYY-MM-DD HH:mm:ss QQQQ"
+ * @description format 星期："YYYY-MM-DD HH:mm:ss WWW"
+ * @description format 几周："YYYY-MM-DD HH:mm:ss ZZZ"
+ * @description format 季度 + 星期 + 几周："YYYY-MM-DD HH:mm:ss WWW QQQQ ZZZ"
  * @returns 返回拼接后的时间字符串
  */
 export function formatDate(date: Date, format?: string): string {
@@ -110,7 +110,7 @@ export function getWeek(dateTime: Date): number {
  * @description param 3天：   60 * 60* 24 * 1000 * 3
  * @returns 返回拼接后的时间字符串
  */
-export function formatPast(param: string | Date, format = 'YYYY-mm-dd HH:MM:SS'): string {
+export function formatPast(param: string | Date, format = 'YYYY-MM-DD HH:mm:ss'): string {
   // 传入格式处理、存储转换值
   let t: any, s: number
   // 获取js 时间戳

src/views/iot/product/ProductForm.vue

@@ -103,16 +103,15 @@
 import { ProductApi, ProductVO } from '@/api/iot/product'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 
-/** iot 产品 表单 */
 defineOptions({ name: 'ProductForm' })
 
-const { t } = useI18n() // 国际化
-const message = useMessage() // 消息弹窗
+const { t } = useI18n()
+const message = useMessage()
 
-const dialogVisible = ref(false) // 弹窗的是否展示
-const dialogTitle = ref('') // 弹窗的标题
-const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const dialogVisible = ref(false)
+const dialogTitle = ref('')
+const formLoading = ref(false)
+const formType = ref('')
 const formData = ref({
   name: undefined,
   id: undefined,
@@ -161,15 +160,13 @@ const formRules = reactive({
     }
   ]
 })
-const formRef = ref() // 表单 Ref
+const formRef = ref()
 
-/** 打开弹窗 */
 const open = async (type: string, id?: number) => {
   dialogVisible.value = true
   dialogTitle.value = t('action.' + type)
   formType.value = type
   resetForm()
-  // 修改时，设置数据
   if (id) {
     formLoading.value = true
     try {
@@ -179,14 +176,11 @@ const open = async (type: string, id?: number) => {
     }
   }
 }
-defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+defineExpose({ open, close: () => (dialogVisible.value = false) })
 
-/** 提交表单 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const emit = defineEmits(['success'])
 const submitForm = async () => {
-  // 校验表单
   await formRef.value.validate()
-  // 提交请求
   formLoading.value = true
   try {
     const data = formData.value as unknown as ProductVO
@@ -197,15 +191,13 @@ const submitForm = async () => {
       await ProductApi.updateProduct(data)
       message.success(t('common.updateSuccess'))
     }
-    dialogVisible.value = false
-    // 发送操作成功的事件
+    dialogVisible.value = false // 确保关闭弹框
     emit('success')
   } finally {
     formLoading.value = false
   }
 }
 
-/** 重置表单 */
 const resetForm = () => {
   formData.value = {
     name: undefined,

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

@@ -10,36 +10,89 @@
       </div>
       <div>
         <!-- 右上：按钮 -->
-        <el-button @click="openForm('update', product.id)" v-hasPermi="['iot:product:update']">
+        <el-button
+          @click="openForm('update', product.id)"
+          v-hasPermi="['iot:product:update']"
+          v-if="product.status === 0"
+        >
           编辑
         </el-button>
+        <el-button
+          type="primary"
+          @click="confirmPublish(product.id)"
+          v-hasPermi="['iot:product:update']"
+          v-if="product.status === 0"
+        >
+          发布
+        </el-button>
+        <el-button
+          type="danger"
+          @click="confirmUnpublish(product.id)"
+          v-hasPermi="['iot:product:update']"
+          v-if="product.status === 1"
+        >
+          撤销发布
+        </el-button>
       </div>
     </div>
   </div>
   <ContentWrap class="mt-10px">
-    <el-descriptions :column="5" direction="vertical">
-      <el-descriptions-item label="产品名称">{{ product.name }}</el-descriptions-item>
-      <el-descriptions-item label="产品标识">{{ product.identification }}</el-descriptions-item>
-      <el-descriptions-item label="设备类型">
-        <dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="product.deviceType" />
+    <el-descriptions :column="5" direction="horizontal">
+      <el-descriptions-item label="ProductKey">
+        {{ product.productKey }}
+        <el-button @click="copyToClipboard(product.productKey)">复制</el-button>
       </el-descriptions-item>
-      <el-descriptions-item label="产品状态">
-        <dict-tag :type="DICT_TYPE.IOT_PRODUCT_STATUS" :value="product.status" />
+    </el-descriptions>
+    <el-descriptions :column="5" direction="horizontal">
+      <el-descriptions-item label="设备数">
+        0
+        <el-button @click="goToManagement(product.productKey)">前往管理</el-button>
       </el-descriptions-item>
     </el-descriptions>
   </ContentWrap>
   <!-- 表单弹窗：添加/修改 -->
-  <ProductForm ref="formRef" @success="openForm('update', product.id)" />
+  <ProductForm ref="formRef" @success="emit('refresh')" />
 </template>
 <script setup lang="ts">
 import ProductForm from '@/views/iot/product/ProductForm.vue'
-import { DICT_TYPE } from '@/utils/dict'
-import { ProductVO } from '@/api/iot/product'
+import { ProductApi, ProductVO } from '@/api/iot/product'
+
+const message = useMessage()
+const copyToClipboard = (text: string) => {
+  navigator.clipboard.writeText(text).then(() => {
+    message.success('复制成功')
+  })
+}
+const goToManagement = (productKey: string) => {
+  message.warning('暂未开放')
+}
 
 // 操作修改
 const formRef = ref()
 const openForm = (type: string, id?: number) => {
   formRef.value.open(type, id)
 }
+const confirmPublish = async (id: number) => {
+  try {
+    await ProductApi.updateProductStatus(id, 1)
+    message.success('发布成功')
+    formRef.value.close() // 关闭弹框
+    emit('refresh')
+  } catch (error) {
+    message.error('发布失败')
+  }
+}
+const confirmUnpublish = async (id: number) => {
+  try {
+    await ProductApi.updateProductStatus(id, 0)
+    message.success('撤销发布成功')
+    formRef.value.close() // 关闭弹框
+    emit('refresh')
+  } catch (error) {
+    message.error('撤销发布失败')
+  }
+}
+
 const { product } = defineProps<{ product: ProductVO }>()
+const emit = defineEmits(['refresh'])
 </script>

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

@@ -1,34 +1,41 @@
 <template>
   <ContentWrap>
     <el-collapse v-model="activeNames">
-      <el-collapse-item name="basicInfo">
-        <template #title>
-          <span class="text-base font-bold">基本信息</span>
-        </template>
-        <el-descriptions :column="4">
-          <el-descriptions-item label="产品名称">{{ product.name }}</el-descriptions-item>
-          <el-descriptions-item label="产品标识">{{ product.identification }}</el-descriptions-item>
-          <el-descriptions-item label="设备类型">
-            <dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="product.deviceType" />
-          </el-descriptions-item>
-          <el-descriptions-item label="数据格式">
-            <dict-tag :type="DICT_TYPE.IOT_PRODUCT_DATA_FORMAT" :value="product.dataFormat" />
-          </el-descriptions-item>
-          <el-descriptions-item label="协议类型">
-            <dict-tag :type="DICT_TYPE.IOT_PRODUCT_PROTOCOL_TYPE" :value="product.protocolType" />
-          </el-descriptions-item>
-          <el-descriptions-item label="产品状态">
-            <dict-tag :type="DICT_TYPE.IOT_PRODUCT_STATUS" :value="product.status" />
-          </el-descriptions-item>
-          <el-descriptions-item label="产品描述">{{ product.description }}</el-descriptions-item>
-        </el-descriptions>
-      </el-collapse-item>
+      <el-descriptions :column="3" title="产品信息">
+        <el-descriptions-item label="产品名称">{{ product.name }}</el-descriptions-item>
+        <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="数据格式">
+          <dict-tag :type="DICT_TYPE.IOT_DATA_FORMAT" :value="product.dataFormat" />
+        </el-descriptions-item>
+        <el-descriptions-item label="数据校验级别">
+          <dict-tag :type="DICT_TYPE.IOT_VALIDATE_TYPE" :value="product.validateType" />
+        </el-descriptions-item>
+        <el-descriptions-item label="产品状态">
+          <dict-tag :type="DICT_TYPE.IOT_PRODUCT_STATUS" :value="product.status" />
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="联网方式"
+          v-if="product.deviceType === 0 || product.deviceType === 2"
+        >
+          <dict-tag :type="DICT_TYPE.IOT_NET_TYPE" :value="product.netType" />
+        </el-descriptions-item>
+        <el-descriptions-item label="接入网关协议" v-if="product.deviceType === 1">
+          <dict-tag :type="DICT_TYPE.IOT_PROTOCOL_TYPE" :value="product.protocolType" />
+        </el-descriptions-item>
+        <el-descriptions-item label="产品描述">{{ product.description }}</el-descriptions-item>
+      </el-descriptions>
     </el-collapse>
   </ContentWrap>
 </template>
 <script setup lang="ts">
 import { DICT_TYPE } from '@/utils/dict'
 import { ProductVO } from '@/api/iot/product'
+import { formatDate } from '@/utils/formatTime'
 
 const { product } = defineProps<{ product: ProductVO }>()
 

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

@@ -2,12 +2,15 @@
   <ProductDetailsHeader :loading="loading" :product="product" @refresh="getProductData(id)" />
   <el-col>
     <el-tabs>
-      <el-tab-pane label="详细资料">
+      <el-tab-pane label="产品信息">
         <ProductDetailsInfo :product="product" />
       </el-tab-pane>
+      <el-tab-pane label="Topic 类列表" />
       <el-tab-pane label="物模型">
         <!--        <ProductDetailsModel :product="product" />-->
       </el-tab-pane>
+      <el-tab-pane label="消息解析" />
+      <el-tab-pane label="服务端订阅" />
     </el-tabs>
   </el-col>
 </template>
@@ -30,6 +33,7 @@ const getProductData = async (id: number) => {
   loading.value = true
   try {
     product.value = await ProductApi.getProduct(id)
+    console.log(product.value)
   } finally {
     loading.value = false
   }

src/views/iot/product/index.vue

@@ -37,15 +37,6 @@
         >
           <Icon icon="ep:plus" class="mr-5px" /> 新增
         </el-button>
-        <el-button
-          type="success"
-          plain
-          @click="handleExport"
-          :loading="exportLoading"
-          v-hasPermi="['iot:product:export']"
-        >
-          <Icon icon="ep:download" class="mr-5px" /> 导出
-        </el-button>
       </el-form-item>
     </el-form>
   </ContentWrap>
@@ -57,7 +48,7 @@
       <el-table-column label="ProductKey" align="center" prop="productKey" />
       <el-table-column label="设备类型" align="center" prop="deviceType">
         <template #default="scope">
-          <dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :code="scope.row.deviceType" />
+          <dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="scope.row.deviceType" />
         </template>
       </el-table-column>
       <el-table-column
@@ -69,7 +60,7 @@
       />
       <el-table-column label="产品状态" align="center" prop="status">
         <template #default="scope">
-          <dict-tag :type="DICT_TYPE.IOT_PRODUCT_STATUS" :code="scope.row.status" />
+          <dict-tag :type="DICT_TYPE.IOT_PRODUCT_STATUS" :value="scope.row.status" />
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center">
@@ -77,16 +68,17 @@
           <el-button
             link
             type="primary"
-            @click="openForm('update', scope.row.id)"
-            v-hasPermi="['iot:product:update']"
+            @click="openDetail(scope.row.id)"
+            v-hasPermi="['iot:product:query']"
           >
-            编辑
+            查看
           </el-button>
           <el-button
             link
             type="danger"
             @click="handleDelete(scope.row.id)"
             v-hasPermi="['iot:product:delete']"
+            :disabled="scope.row.status === 1"
           >
             删除
           </el-button>
@@ -171,6 +163,12 @@ const openForm = (type: string, id?: number) => {
   formRef.value.open(type, id)
 }
 
+/** 打开详情 */
+const { currentRoute, push } = useRouter()
+const openDetail = (id: number) => {
+  push({ name: 'IotProductDetail', params: { id } })
+}
+
 /** 删除按钮操作 */
 const handleDelete = async (id: number) => {
   try {