feat: 消息通知crud

src/controller/iot/sys.ts

@@ -1,7 +1,9 @@
-import { addNoticeMethod, getNoticeById, getNoticeMethod, getSysConf, updateNoticeLabel, updateNoticeMethod, updateNoticeStaus, updateSysConf } from '@/api/iot/sys'
+import { addNoticeMethod, delNotice, getNoticeById, getNoticeMethod, getSysConf, updateNoticeLabel, updateNoticeMethod, updateNoticeStaus, updateSysConf } from '@/api/iot/sys'
 import { message } from 'ant-design-vue'
 
 export class SysController {
+  static methodTypeList = ['EMAIL', 'WEBHOOK']
+
   static async sysConf () {
     return await getSysConf()
   }
@@ -30,7 +32,7 @@ export class SysController {
   }
 
   static async delNotice (id: string) {
-    await getNoticeById(id)
+    await delNotice(id)
     message.success('删除成功')
   }
 

src/pages/Iot/sys/notice.vue

@@ -73,91 +73,92 @@
     @ok="ok"
   >
     <a-form :label-col="{span: 4}" :wrapper-col="{span: 14}">
-      <a-form-item label="任务名称" v-bind="validateInfos.taskLabel">
-        <a-input v-model:value="modalRef.taskLabel"  />
+      <a-form-item label="通知名称" v-bind="validateInfos.label">
+        <a-input v-model:value="modalRef.label"  />
       </a-form-item>
-      <a-form-item label="任务描述" >
-        <a-input v-model:value="modalRef.taskDescription" />
+      <a-form-item label="数据来源" >
+        <a-radio-group v-model:value="modalRef.source">
+          <a-radio :value="0">通知</a-radio>
+          <a-radio :value="1">警告</a-radio>
+        </a-radio-group>
       </a-form-item>
-      <a-form-item label="选择产品" >
-        <a-select
-          placeholder="请选择产品"
-          v-model:value="modalRef.taskConfig.modelId"
-        >
-          <a-select-option
-            v-for="model in state.modelList"
-            :key="model.id"
-            :value="model.id"
-          >
-            {{model.modelLabel}}
-          </a-select-option>
-        </a-select>
-      </a-form-item>
-      <a-form-item label="选择设备" >
-        <a-select
-          placeholder="请选择产品"
-          v-model:value="modalRef.taskConfig.deviceId"
-        >
-          <a-select-option
-            v-for="device in state.deviceList"
-            :key="device.id"
-            :value="device.id"
-          >
-            {{device.deviceLabel}}
-          </a-select-option>
-        </a-select>
+      <a-form-item label="状态" >
+        <a-radio-group v-model:value="modalRef.status">
+          <a-radio :value="true">启用</a-radio>
+          <a-radio :value="false">停用</a-radio>
+        </a-radio-group>
       </a-form-item>
-      <a-form-item label="任务类型" v-bind="validateInfos.taskType">
-        <a-select v-model:value="modalRef.taskConfig.taskType" >
+      <a-form-item label="通知方式" >
+        <a-select v-model:value="modalRef.notification.methodType" >
           <a-select-option
             :value="item"
-            v-for="item in TaskController.taskTypeList"
+            v-for="item in SysController.methodTypeList"
             :key="item"
           >
-            {{TaskController.taskTypeMap.get(item)?.label }}
+            {{item}}
           </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>
+      <span v-if="modalRef.notification && modalRef.notification.methodType == 'EMAIL'" >
+        <a-form-item label="发送者" >
+          <a-input v-model:value="modalRef.notification.to"  />
         </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 label="抄送者" >
+          <a-row :gutter="[8, 8]" >
+            <a-col :span="24" v-for="(item, index) in modalRef.notification.cc" :key="index" >
+              <a-space>
+                <a-input style="width: 275px;" v-model:value="modalRef.notification.cc[index]"  />
+                <a-button @click="modalRef.notification.cc.splice(index, 1)" danger >删除</a-button>
+              </a-space>
+            </a-col>
+            <a-col>
+              <a-button @click="modalRef.notification.cc.push('')" >添加</a-button>
+            </a-col>
+          </a-row>
         </a-form-item>
       </span>
-      <span v-if="modalRef.taskConfig.taskType === 'DEVICE_MSG'" >
-        <a-form-item label="主题" >
-          <a-input v-model:value="modalRef.taskConfig.topic"  />
+      <span v-if="modalRef.notification && modalRef.notification.methodType != 'EMAIL'" >
+        <a-form-item label="地址" >
+          <a-input v-model:value="modalRef.notification.hookUrl"  />
         </a-form-item>
-        <a-form-item label="消息名称" >
-          <a-input v-model:value="modalRef.taskConfig.msgLabel"  />
+        <a-form-item label="请求方法" >
+          <a-select v-model:value="modalRef.notification.hookMethod" >
+            <a-select-option
+              :value="item"
+              v-for="item in ['POST', 'GET']"
+              :key="item"
+            >
+              {{item}}
+            </a-select-option>
+          </a-select>
         </a-form-item>
-        <a-form-item label="消息内容" >
-          <a-textarea :auto-size="{ minRows: 2, maxRows: 5 }" v-model:value="modalRef.taskConfig.msgPayload"  />
+        <a-form-item label="请求头" >
+          <a-row>
+            <a-col
+              :span="24"
+              v-for="(item, index) in modalRef.notification.customHeaders"
+              :key="index"
+            >
+              <a-space>
+                <a-input-group size="large">
+                  <a-row :gutter="8">
+                    <a-col :span="12">
+                      <a-input v-model:value="item.key" />
+                    </a-col>
+                    <a-col :span="12">
+                      <a-input v-model:value="item.value" />
+                    </a-col>
+                  </a-row>
+                </a-input-group>
+                <a-button  @click="modalRef.notification.customHeaders.splice(index, 1)" danger >删除</a-button>
+              </a-space>
+            </a-col>
+            <a-col :span="24">
+              <a-button type="primary" @click="addCustomHeaders" >新增</a-button>
+            </a-col>
+          </a-row>
         </a-form-item>
       </span>
-
     </a-form>
   </modal-pro>
 </template>
@@ -166,6 +167,7 @@
 import { reactive, onMounted, computed } from 'vue'
 import { SysController } from '@/controller'
 import { Form } from 'ant-design-vue'
+import { Item } from 'ant-design-vue/lib/menu'
 
 const useForm = Form.useForm
 
@@ -209,16 +211,32 @@ const state = reactive({
   dataSource: [],
   loading: false,
   visible: false,
-  opraState: 'add',
-  noticeId: ''
+  opraState: 'add'
 })
 
 const modalRef = reactive({
+  id: '',
   label: '',
   source: 0,
-  status: false
+  status: true,
+  notification: {
+    methodType: 'EMAIL',
+    to: '',
+    cc: [''],
+    hookUrl: '',
+    hookMethod: '',
+    customHeaders: [{ key: '', value: '' }]
+  }
 })
 
+// const customHeadersList = computed(() =>
+//   Object.keys(modalRef.notification.customHeaders).map(key => {
+//     return {
+//       key,
+//       value: modalRef.notification.customHeaders[key]
+//     }
+//   }))
+
 const modalTitle = computed(() => state.opraState === 'add' ? '新增通知' : '编辑通知')
 
 const { resetFields, validate, validateInfos } = useForm(modalRef, reactive({
@@ -226,13 +244,31 @@ const { resetFields, validate, validateInfos } = useForm(modalRef, reactive({
 }))
 
 const ok = () => {
+  validate().then(async () => {
+    if (modalRef.notification.methodType === 'WEBHOOK') {
+      const obj = {}
+      modalRef.notification.customHeaders.forEach(item => {
+        obj[item.key] = item.value
+      })
+      modalRef.notification.customHeaders = obj
+    }
+    state.opraState === 'add' ? await SysController.addNoticeMethod(modalRef) : await SysController.updateNoticeMethod(modalRef)
+    state.visible = false
+    getNoticePage()
+  })
+}
 
+const addCustomHeaders = () => {
+  console.log(modalRef.notification.customHeaders)
+
+  modalRef.notification.customHeaders.push({ key: '', value: '' })
 }
 
 const openModal = (opraState: 'add' | 'update', id = '') => {
+  resetFields()
   state.opraState = opraState
   state.visible = true
-  state.noticeId = id
+  modalRef.id = id
   if (opraState === 'update') {
     getNoticeById()
   }
@@ -243,12 +279,21 @@ const changePage = ({ current }) => {
   getNoticePage()
 }
 
-const delNotice = (id: string) => SysController.delNotice(id)
+const delNotice = async (id: string) => {
+  await SysController.delNotice(id)
+  getNoticePage()
+}
 
 const changeStatus = async (record) => SysController.updateNoticeStaus({ id: record.id, status: record.status })
 
 const getNoticeById = async () => {
-  const { data } = await SysController.noticeById(state.noticeId)
+  const { data } = await SysController.noticeById(modalRef.id)
+  data.notification.customHeaders = Object.keys(data.notification.customHeaders).map(key => {
+    return {
+      key,
+      value: data.notification.customHeaders[key]
+    }
+  })
   resetFields(data)
 }
 

src/router/index.ts

@@ -166,18 +166,18 @@ export const routes: Array<ROUTER.RoutesProps> = [
       {
         path: '/sys',
         name: '系统设置',
-        redirect: '/task/manage',
+        redirect: '/sys/logo',
         icon: 'DatabaseOutlined',
         children: [
           {
-            path: '/task/manage',
-            name: '任务管理',
-            component: () => import('@/pages/iot/task/manage.vue')
+            path: '/sys/logo',
+            name: '系统设置',
+            component: () => import('@/pages/iot/sys/logo.vue')
           },
           {
-            path: '/task/track',
-            name: '任务追踪',
-            component: () => import('@/pages/iot/task/track.vue')
+            path: '/sys/notice',
+            name: '通知设置',
+            component: () => import('@/pages/iot/sys/notice.vue')
           }
         ]
       }

src/type/iot.d.ts

@@ -360,7 +360,15 @@ declare namespace IOT {
         'source': 0 | 1, // 通知数据来源 0 通知 1 告警
         'label': string, // 通知方式名称
         'notification': null, // 通知配置
-        'status': boolean // 状态 true 是启用 false 是停用
+        'status': boolean, // 状态 true 是启用 false 是停用
+        notification: {
+          methodType: 'EMAIL' | 'WEBHOOK',
+          to: string
+          cc: string[]
+          hookUrl: string
+          hookMethod: 'POST' | 'GET'
+          customHeaders: Record<string, string>
+        }
       }
     }
 }