Browse Source

feat: 设备列表 - 指令下发

main
刘凯 1 year ago
parent
commit
11722ab3ba
  1. 13
      src/views/device-manage/device/components/CloudCommand.vue
  2. 23
      src/views/device-manage/device/components/SendCommandModal.vue
  3. 1
      src/views/device-manage/device/components/index.ts
  4. 18
      src/views/device-manage/device/index.vue

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

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

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

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

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

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

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

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

Loading…
Cancel
Save