feat: 设备列表 - 指令下发

src/views/device-manage/device/components/CloudCommand.vue

@@ -12,7 +12,7 @@ import { CloudCommandType } from '@/api/device-manage/device/types'
 
 defineProps<{ device?: Device }>()
 
-const [registerModal, { openModal }] = useModal<CloudCommandType>()
+const [registerModal, { openModal }] = useModal<{ type: CloudCommandType, productId: string, deviceId: string }>()
 
 const commandTypes = [
   {
@@ -71,7 +71,14 @@ const [register, { reload }] = useTable({
   <div>
     <div flex="~ items-center gap-12px" mb="12px">
       <Segmented v-model:value="selectedCommonType" :options="commandTypes" @change="() => reload()" />
-      <a-button type="primary" @click="openModal(true, selectedCommon?.value)">
+      <a-button
+        type="primary"
+        @click="openModal(true, {
+          deviceId: device!.id,
+          type: selectedCommon!.value,
+          productId: device!.productId,
+        })"
+      >
         <CloudSyncOutlined />下发
       </a-button>
       <Alert
@@ -86,8 +93,6 @@ const [register, { reload }] = useTable({
 
     <SendCommandModal
       :title="selectedCommon?.label"
-      :type="selectedCommon?.value"
-      :product-id="device?.productId"
       @register="registerModal"
       @success="reload"
     />

src/views/device-manage/device/components/SendCommandModal.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { useRoute } from 'vue-router'
 import { BasicModal, useModalInner } from '@/components/Modal'
 import type { FormSchema, FormSchemaInner, Rule } from '@/components/Form'
 import { BasicForm, useForm } from '@/components/Form'
@@ -9,8 +8,8 @@ import { sendCommandToDevice, sendMessageToDevice } from '@/api/device-manage/de
 import CodeEditor from '@/components/CodeEditor/src/CodeEditor.vue'
 import { getAllModelAttributes } from '@/api/product/model'
 import { ModelAttributeDataTypesEnum, type SimpleAttribute } from '@/api/product/types'
+import { useMessage } from '@/hooks/web/useMessage'
 
-const props = defineProps<{ productId?: string, type?: CloudCommandType }>()
 const emit = defineEmits(['register', 'success'])
 
 const [registerForm, { updateSchema, resetSchema, validate, setFieldsValue, clearValidate }] = useForm({
@@ -21,6 +20,9 @@ const [registerForm, { updateSchema, resetSchema, validate, setFieldsValue, clea
   actionColOptions: { span: 23 },
 })
 
+let productId: string
+let deviceId: string
+let commandType: CloudCommandType
 const CommandAndAttributeSchemas: FormSchema[] = [
   {
     field: 'itemId',
@@ -28,7 +30,7 @@ const CommandAndAttributeSchemas: FormSchema[] = [
     required: true,
     component: 'ApiSelect',
     componentProps: {
-      api: () => getAllModelAttributes(props.productId!, props.type!),
+      api: () => getAllModelAttributes(productId!, commandType),
       valueField: 'id',
       labelField: 'name',
       allowClear: false,
@@ -107,7 +109,7 @@ const MessageSchemas: FormSchema[] = [
     required: true,
     component: 'ApiSelect',
     componentProps: {
-      api: () => getAllTopics(props.productId!),
+      api: () => getAllTopics(productId!),
       valueField: 'id',
       labelField: 'topic',
     },
@@ -140,18 +142,21 @@ const MessageSchemas: FormSchema[] = [
     },
   },
 ]
-const [register, { closeModal, setModalProps }] = useModalInner((type: CloudCommandType) => {
-  resetSchema(type === CloudCommandType.Message ? MessageSchemas : CommandAndAttributeSchemas)
+const [register, { closeModal, setModalProps }] = useModalInner((params: { type: CloudCommandType, productId: string, deviceId: string }) => {
+  productId = params.productId
+  deviceId = params.deviceId
+  commandType = params.type
+  resetSchema(commandType === CloudCommandType.Message ? MessageSchemas : CommandAndAttributeSchemas)
 })
 
-const route = useRoute()
 async function handleSubmit() {
   try {
     const values = await validate<any>()
     setModalProps({ confirmLoading: true })
-    values.deviceId = route.params.id
-    const isSendMessage = props.type === CloudCommandType.Message
+    values.deviceId = deviceId
+    const isSendMessage = commandType === CloudCommandType.Message
     await (isSendMessage ? sendMessageToDevice(values) : sendCommandToDevice(values))
+    useMessage().createMessage.success('下发成功')
     emit('success')
     closeModal()
   }

src/views/device-manage/device/components/index.ts

@@ -1,3 +1,4 @@
 export { default as DeviceInfo } from './DeviceInfo.vue'
 export { default as TopicList } from './TopicList.vue'
 export { default as CloudCommand } from './CloudCommand.vue'
+export { default as SendCommandModal } from './SendCommandModal.vue'

src/views/device-manage/device/index.vue

@@ -2,9 +2,11 @@
 import { PlusOutlined } from '@ant-design/icons-vue'
 import { columns, searchFormSchemas } from './data'
 import DeviceFormModal from './DeviceFormModal.vue'
+import { SendCommandModal } from './components'
 import { useModal } from '@/components/Modal'
 import { BasicTable, TableAction, useTable } from '@/components/Table'
 import { deleteDevice, getDeviceList } from '@/api/device-manage/device'
+import { CloudCommandType } from '@/api/device-manage/device/types'
 import type { Device } from '@/api/device-manage/device/types'
 import { useMessage } from '@/hooks/web/useMessage'
 import { usePermission } from '@/hooks/web/usePermission'
@@ -12,6 +14,10 @@ import { usePermission } from '@/hooks/web/usePermission'
 defineOptions({ name: 'Device' })
 
 const [registerModal, { openModal }] = useModal<Device>()
+const [
+  registerSendCommandModal,
+  { openModal: openSendCommandModal },
+] = useModal<{ type: CloudCommandType, productId: string, deviceId: string }>()
 
 const { hasPermission } = usePermission()
 
@@ -26,7 +32,7 @@ const [register, { reload }] = useTable({
   canResize: false,
   useSearchForm: true,
   actionColumn: {
-    width: 220,
+    width: 320,
     title: '操作',
     dataIndex: 'action',
     fixed: 'right',
@@ -70,6 +76,15 @@ async function handleDelete(id: string) {
                 auth: 'device_edit',
                 onClick: () => openModal(true, record),
               },
+              {
+                icon: 'i-ant-design:cloud-sync-outlined',
+                label: '指令下发',
+                onClick: () => openSendCommandModal(true, {
+                  deviceId: record.id,
+                  productId: record.productId,
+                  type: CloudCommandType.Message,
+                }),
+              },
               {
                 icon: 'i-ant-design:delete-outlined',
                 danger: true,
@@ -88,5 +103,6 @@ async function handleDelete(id: string) {
     </BasicTable>
 
     <DeviceFormModal @register="registerModal" @success="reload" />
+    <SendCommandModal title="指令下发" @register="registerSendCommandModal" />
   </div>
 </template>