feat: 消息下发 新增

src/controller/iot/device.ts

@@ -115,6 +115,7 @@ export class DeviceContriller {
 
   /** 消息下发 下发消息 */
   static async addDeviceMsg (data: {deviceId: string, msgPayload: string, msgLabel: string, topic: string}) {
-    return await addDeviceMsg(data)
+    await addDeviceMsg(data)
+    message.success('新增下发消息成功')
   }
 }

src/pages/Iot/device/components/cloudview.vue

@@ -12,11 +12,15 @@
         <a-col> <a-button type="primary" @click="state.visible = true">下发消息</a-button>  </a-col>
       </a-row>
       <a-table
+        style="margin-top: 20px;"
         :columns="columns"
         :dataSource="state.msgDataSource"
         :loading="state.loading"
       >
         <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'status'">
+            <span>{{ DeviceContriller.deviceMag.get(record.status)?.name }}</span>
+          </template>
           <template v-if="column.key === 'action'">
             <a @click="openDetailModal(record)" >详情</a>
           </template>
@@ -34,6 +38,28 @@
     @cancel="state.visible = false"
     @ok="ok"
   >
+  <a-form
+    :labelCol="{span: 4}"
+    :wrapperCol="{span: 14}"
+  >
+    <a-form-item
+      label="消息名称"
+      v-bind="validateInfos.msgLabel"
+    >
+      <a-input v-model:value="msgState.msgLabel" > </a-input>
+    </a-form-item>
+    <a-form-item
+      label="Topic"
+    >
+      <a-input v-model:value="msgState.topic" > </a-input>
+    </a-form-item>
+    <a-form-item
+      label="消息内容"
+      v-bind="validateInfos.msgPayload"
+    >
+      <a-textarea v-model:value="msgState.msgPayload" > </a-textarea>
+    </a-form-item>
+  </a-form>
 
   </modal-pro>
 </template>
@@ -43,10 +69,11 @@
 import { DeviceContriller } from '@/controller'
 import { computed, onMounted, reactive, ref } from 'vue'
 import { useRoute } from 'vue-router'
+import { Form } from 'ant-design-vue'
 
 const msg = '消息下发不依赖产品模型，平台会以异步方式（消息下发后无需等待设备侧回复响应）下发消息给设备。当前仅MQTT设备支持消息下发。'
 const cmdMsg = '如果设备所属产品定义了命令功能，则您可以通过应用调用平台接口或者操作下面的“下发命令”按钮下发命令。当前MQTT设备仅支持同步命令下发，NB设备仅支持异步命令下发 。'
-const modalTitle = 'modal-pro'
+const modalTitle = '新增下发消息'
 const tabListNoTitle = [
   {
     key: 'msg',
@@ -61,7 +88,8 @@ const tabListNoTitle = [
 const columns = [
   {
     title: '状态',
-    dataIndex: 'status'
+    dataIndex: 'status',
+    key: 'status'
   },
   {
     title: '消息名称',
@@ -79,16 +107,13 @@ const columns = [
     title: '消息创建时间',
     dataIndex: 'createAt'
   },
-  {
-    title: '状态',
-    dataIndex: 'status'
-  },
   {
     title: '操纵',
     key: 'action'
   }
 ]
 
+const useForm = Form.useForm
 const route = useRoute()
 const deviceId = route.query.id as string
 
@@ -110,8 +135,24 @@ const state = reactive<{
   msgDetail: {}
 })
 
-const ok = () => {
+const msgState = reactive({
+  deviceId: deviceId,
+  msgPayload: '',
+  msgLabel: '',
+  topic: ''
+})
 
+const { resetFields, validate, validateInfos } = useForm(msgState, reactive({
+  msgPayload: [{ required: true, message: '请填写消息内容' }],
+  msgLabel: [{ required: true, message: '请填写消息标题' }]
+}))
+
+const ok = () => {
+  validate().then(async () => {
+    await DeviceContriller.addDeviceMsg(msgState)
+    state.visible = false
+    getDeviceMsgList()
+  })
 }
 
 const openDetailModal = (record: IOT.API.DEVICE.Msg) => {
@@ -120,7 +161,9 @@ const openDetailModal = (record: IOT.API.DEVICE.Msg) => {
 }
 
 const getDeviceMsgList = async () => {
+  state.loading = true
   state.msgDataSource = await DeviceContriller.listDeviceMsg({ deviceId })
+  state.loading = false
 }
 
 const onTabChange = (value: 'msg' | 'cmd') => state.tasActive = value