feat: 任务中心crud

src/pages/Iot/task/manage.vue

@@ -10,7 +10,6 @@
             <a-select
               style="width: 170px"
               v-model:value="queryParamsState.status"
-              @change="changeStatus"
             >
               <a-select-option
                 v-for="item in statusList"
@@ -45,19 +44,35 @@
     :pagination="queryParamsState"
     @change="changePage"
   >
-  <template #bodyCell="{column, record}">
-        <template v-if="column.key === 'action'" >
-          <a-space>
-            <a >编辑</a>
-            <a >删除</a>
-          </a-space>
-        </template>
-      </template>
+    <template #bodyCell="{column, record}">
+          <template v-if="column.key === 'status'" >
+            <a-switch
+              @click="changeStatus(record)"
+              v-model:checked="record.status"
+              checked-children="运行中"
+              un-checked-children="已关闭"
+            />
+          </template>
+          <template v-if="column.key === 'action'" >
+            <a-space>
+              <a @click="openModal('update', record.id)" >编辑</a>
+              <a-popconfirm
+                  title="确实要删除吗？"
+                  ok-text="确定"
+                  cancel-text="取消"
+                  @confirm="delTask(record.id)"
+                >
+                <a>删除</a>
+                </a-popconfirm>
+            </a-space>
+          </template>
+    </template>
   </a-table>
 
   <modal-pro
     :label="modalTitle"
     :visible="state.visible"
+    destroyOnClose
     @cancel="state.visible = false"
     @ok="ok"
   >
@@ -68,17 +83,6 @@
       <a-form-item label="任务描述" >
         <a-input v-model:value="modalRef.taskDescription" />
       </a-form-item>
-      <a-form-item label="任务类型" v-bind="validateInfos.taskType">
-        <a-select v-model:value="modalRef.taskConfig.taskType" >
-          <a-select-option
-            :value="item"
-            v-for="item in TaskController.taskTypeList"
-            :key="item"
-          >
-            {{TaskController.taskTypeMap.get(item)?.label }}
-          </a-select-option>
-        </a-select>
-      </a-form-item>
       <a-form-item label="选择产品" >
         <a-select
           placeholder="请选择产品"
@@ -94,30 +98,70 @@
         </a-select>
       </a-form-item>
       <a-form-item label="选择设备" >
-          <a-space>
-            <a-tag color="blue" v-if="modalRef.taskConfig.deviceLabel" >{{modalRef.taskConfig.deviceLabel}}</a-tag>
-            <a-button
-              type="primary"
-              @click="state.deviceModalVisible = true"
-            >
-              {{modalRef.taskConfig.deviceId ? '重新选择' : '请选择设备'}}
-            </a-button>
-          </a-space>
-      </a-form-item>
-      <a-form-item label="选择命令" >
         <a-select
-          style="width: 170px;"
-          v-model:value="modalRef.taskConfig.cmdId"
+          placeholder="请选择产品"
+          v-model:value="modalRef.taskConfig.deviceId"
         >
           <a-select-option
-            v-for="cmdItem in state.cmdList"
-            :key="cmdItem.id"
-            :value="cmdItem.id"
+            v-for="device in state.deviceList"
+            :key="device.id"
+            :value="device.id"
+          >
+            {{device.deviceLabel}}
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item label="任务类型" v-bind="validateInfos.taskType">
+        <a-select v-model:value="modalRef.taskConfig.taskType" >
+          <a-select-option
+            :value="item"
+            v-for="item in TaskController.taskTypeList"
+            :key="item"
           >
-          {{cmdItem.cmdLabel}}
+            {{TaskController.taskTypeMap.get(item)?.label }}
           </a-select-option>
         </a-select>
       </a-form-item>
+      <span v-if="modalRef.taskConfig.taskType === 'DEVICE_CMD'" >
+        <a-form-item label="选择命令" >
+          <a-select
+            style="width: 170px;"
+            v-model:value="modalRef.taskConfig.cmdId"
+          >
+            <a-select-option
+              v-for="cmdItem in state.cmdList"
+              :key="cmdItem.id"
+              :value="cmdItem.id"
+            >
+            {{cmdItem.cmdLabel}}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item label="命令参数" >
+          <div
+            v-for="(item, index) in modalRef.taskConfig.cmdParameters"
+            :key="index"
+            style="margin-bottom: 10px;"
+          >
+            <a-input-group compact  >
+              <a-input placeholder="key"  disabled v-model:value="item.paramLabel" style="width: 50%" />
+              <a-input placeholder="value" v-model:value="item.dataUnit" style="width: 50%" />
+            </a-input-group>
+          </div>
+        </a-form-item>
+      </span>
+      <span v-if="modalRef.taskConfig.taskType === 'DEVICE_MSG'" >
+        <a-form-item label="主题" >
+          <a-input v-model:value="modalRef.taskConfig.topic"  />
+        </a-form-item>
+        <a-form-item label="消息名称" >
+          <a-input v-model:value="modalRef.taskConfig.msgLabel"  />
+        </a-form-item>
+        <a-form-item label="消息内容" >
+          <a-textarea :auto-size="{ minRows: 2, maxRows: 5 }" v-model:value="modalRef.taskConfig.msgPayload"  />
+        </a-form-item>
+      </span>
+
     </a-form>
   </modal-pro>
 </a-card>
@@ -133,30 +177,25 @@
       ref="selectDeviceRef"
     />
 </modal-pro>
+
 </template>
 <script lang='ts' setup >
 import { TaskController } from '@/controller/iot/task'
-import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { computed, onMounted, reactive, ref, toRefs, watch } from 'vue'
 import { Form } from 'ant-design-vue'
-import { ModelAttrController, ModelCmdController, ModelController } from '@/controller'
+import { DeviceContriller, ModelAttrController, ModelCmdController, ModelController } from '@/controller'
 import SelectDevice from '@/pages/iot/rule/components/selectDevice.vue'
 
 const columns = [
+  {
+    title: 'id',
+    dataIndex: 'id'
+  },
   {
     title: '任务名称',
     dataIndex: 'taskLabel',
     key: 'taskLabel'
   },
-  {
-    title: '任务配置',
-    dataIndex: 'taskConfig',
-    key: 'taskConfig'
-  },
-  {
-    title: '任务状态',
-    dataIndex: 'status',
-    key: 'status'
-  },
   {
     title: '任务描述',
     dataIndex: 'taskDescription',
@@ -167,6 +206,11 @@ const columns = [
     dataIndex: 'cornDescr',
     key: 'cornDescr'
   },
+  {
+    title: '任务状态',
+    dataIndex: 'status',
+    key: 'status'
+  },
   {
     title: '操作',
     dataIndex: 'action',
@@ -200,7 +244,9 @@ const state = reactive({
   modelList: [],
   cmdList: [],
   attrList: [],
-  deviceModalVisible: false
+  deviceList: [],
+  deviceModalVisible: false,
+  taskId: ''
 })
 
 const modalRef = reactive({
@@ -213,24 +259,37 @@ const modalRef = reactive({
     deviceLabel: '',
     modelId: '',
     cmdLabel: '',
-    cmdParameters: {},
-    cmdId: ''
+    cmdParameters: [],
+    cmdId: '',
+    msgLabel: '',
+    msgPayload: '',
+    topic: ''
   }
 })
 
 const selectDeviceRef = ref('')
 
-// watch(
-//   () => modalRef.taskConfig.cmdId,
-//   () => {
-//     const cmdDetail = state.cmdList.find(item => item.id === initActionsData.cmdId)!
-//     console.log('cmdDetail:', cmdDetail)
+watch(
+  () => modalRef.taskConfig.modelId,
+  () => {
+    getCmdList()
+    getAttrList()
+  }
+)
 
-//     modalRef.taskConfig.cmdParameters = cmdDetail.cmdParams
+watch(
+  () => modalRef.taskConfig.cmdId,
+  () => {
+    if (modalRef.taskConfig.taskType === 'DEVICE_CMD') {
+      const cmdDetail = state.cmdList.find(item => item.id === modalRef.taskConfig.cmdId)!
+      console.log('cmdDetail:', state.cmdList, cmdDetail)
 
-//     modalRef.taskConfig.cmdLabel = cmdDetail.cmdLabel
-//   }
-// )
+      modalRef.taskConfig.cmdParameters = cmdDetail.cmdParams
+
+      modalRef.taskConfig.cmdLabel = cmdDetail.cmdLabel
+    }
+  }
+)
 
 const { resetFields, validate, validateInfos } = useForm(modalRef, reactive({
   taskLabel: [{ required: true, message: '请填写任务名称' }],
@@ -240,6 +299,8 @@ const { resetFields, validate, validateInfos } = useForm(modalRef, reactive({
   deviceId: [{ required: true, message: '请选择设备' }]
 }))
 
+const changeStatus = async (record) => TaskController.updateStatus(record.id, record.status)
+
 // 选择设备
 const selectDevice = () => {
   const _device = selectDeviceRef.value.getSelectDevice()
@@ -250,16 +311,34 @@ const selectDevice = () => {
 
 const ok = () => {
   validate().then(async () => {
+    const obj = {}
+    modalRef.taskConfig.cmdParameters.forEach(item => {
+      obj[item.paramLabel] = item.dataUnit
+    })
+
+    modalRef.taskConfig.cmdParameters = obj
+
+    if (state.opraState === 'add') {
+      await TaskController.add(modalRef)
+    } else {
+      await TaskController.update({ ...modalRef, id: state.taskId })
+    }
+
+    state.visible = false
+    getTaskPage()
   })
 }
 
-const openModal = (opraState: 'add' | 'update') => {
+const delTask = (id: string) => TaskController.del(id)
+
+const openModal = (opraState: 'add' | 'update', id = '') => {
+  resetFields()
   state.opraState = opraState
   state.visible = true
-}
-
-const changeStatus = (value) => {
-  queryParamsState.status = value
+  state.taskId = id
+  if (opraState === 'update') {
+    getTaskById(id)
+  }
 }
 
 const getCmdList = async () => {
@@ -278,6 +357,25 @@ const getModelList = async () => {
   state.modelList = data
 }
 
+const getDeviceList = async () => {
+  const { data } = await DeviceContriller.list()
+  state.deviceList = data
+}
+
+const getTaskById = async (id: string) => {
+  const { data } = await TaskController.byId(id)
+  console.log('getTaskById:', data)
+
+  if (data.taskConfig.taskType === 'DEVICE_CMD') {
+    const cmdParameters = Object.keys(data.taskConfig.cmdParameters).map(key => {
+      return { key, value: data.taskConfig.cmdParameters[key] }
+    })
+    data.taskConfig.cmdParameters = cmdParameters
+  }
+
+  resetFields(data)
+}
+
 const getTaskPage = async () => {
   state.loading = true
   const { data, sum } = await TaskController.page(queryParamsState)
@@ -294,8 +392,7 @@ const changePage = ({ current }) => {
 onMounted(() => {
   getTaskPage()
   getModelList()
-  getCmdList()
-  getAttrList()
+  getDeviceList()
 })
 
 </script>

src/type/iot.d.ts

@@ -324,7 +324,10 @@ declare namespace IOT {
     namespace TASK {
       interface Task {
         'taskLabel': string,
-        'taskConfig': {}, // 任务配置
+        'taskConfig': {
+          cmdParameters: Record<string, any>
+          taskType: 'DEVICE_CMD' |'DEVICE_MSG' |'DEVICE_DISCONNECT'
+        }, // 任务配置
         'status': number, // 任务状态
         'taskDescription': string,
         'cornDescr': string // corn 表达式