feat: 设备详情的告警计划添加应用指定模板功能；

src/api/alarm/index.ts

@@ -56,8 +56,11 @@ export const saveAlarmPlanTemplate = (params: TYPE.AlarmPlanTemplateParams) => {
  * 告警计划模板查询
  */
 export const getAlarmPlanTemplateList = (params: {
-  enable: 0 | 1 | null
-  eventVal: number | null
+  pageNo: number
+  pageSize: number
+  enable?: 0 | 1 | null
+  eventVal?: number | null
+  name?: string | null
 }): Promise<ResponseData<TYPE.AlarmPlanTemplateListResponseData>> => {
   return request.post('/alarm/plan/queryTpl', params)
 }

src/views/alarm/template/index.vue

@@ -179,6 +179,8 @@ const fetchList = async () => {
     loading.value = true
     await alarmApi
       .getAlarmPlanTemplateList({
+        pageNo: current.value,
+        pageSize: pageSize.value,
         enable: searchState.enable,
         eventVal: searchState.eventType,
       })

src/views/device/detail/components/alarmPlanModal/index.vue

@@ -15,6 +15,31 @@
         :label-col="{ style: { width: '80px' } }"
         hideRequiredMark
       >
+        <a-form-item v-if="props.type === 'plan'" label="计划模板" name="planName">
+          <div style="display: flex; align-items: center; gap: 8px">
+            <a-select
+              v-model:value="planTemplateId"
+              show-search
+              placeholder="选择内置模板填充内容"
+              :filter-option="false"
+              :not-found-content="null"
+              :options="planTemplateOptions"
+              @search="handleSearch"
+              @change="handleChange"
+            ></a-select>
+
+            <a-popconfirm
+              title="应用模板会覆盖内容，确认吗？"
+              ok-text="确认"
+              cancel-text="取消"
+              :disabled="!planTemplateId"
+              @confirm="useTemplateAdd"
+            >
+              <a-button size="small" type="link" :disabled="!planTemplateId">应用</a-button>
+            </a-popconfirm>
+          </div>
+        </a-form-item>
+
         <a-form-item
           label="计划名称"
           name="planName"
@@ -291,11 +316,12 @@
 
 <script setup lang="ts">
 import { ref, reactive, watch, computed } from 'vue'
-import { message, type FormInstance } from 'ant-design-vue'
+import { message, type FormInstance, type SelectProps } from 'ant-design-vue'
 import * as alarmApi from '@/api/alarm'
 import { getOriginPosition } from '@/utils/index'
 import type { AlarmPlanParams } from '@/api/alarm/types'
 import dayjs from 'dayjs'
+import { debounce } from 'lodash-es'
 
 defineOptions({
   name: 'AlarmPlanModal',
@@ -500,6 +526,76 @@ const formState = reactive<FormState>({
   timeThreshold: 300,
 })
 
+const planTemplateId = ref<number>()
+const planTemplate = ref<AlarmPlan>()
+
+const planTemplateOptions = ref<SelectProps['options']>([])
+
+// 获取列表
+const fetchTemplateList = debounce(async (val: string = '') => {
+  try {
+    await alarmApi
+      .getAlarmPlanTemplateList({
+        pageNo: 1,
+        pageSize: 30,
+        name: val,
+      })
+      .then((res) => {
+        console.log('获取告警计划模板成功✅', res)
+        const { rows } = res.data
+        try {
+          planTemplateOptions.value =
+            (Array.isArray(rows) &&
+              rows.map((item) => ({
+                label: item.name,
+                value: item.id,
+                data: {
+                  ...item,
+                  alarmTimePlan: item.alarmTimePlanTpl,
+                },
+              }))) ||
+            []
+        } catch (err) {
+          console.log('获取告警计划模板失败❌', err)
+        }
+      })
+      .catch((err) => {
+        console.log('获取告警计划模板失败❌', err)
+      })
+  } catch (err) {
+    console.log('获取告警计划列表失败❌', err)
+  }
+}, 1000)
+
+const useTemplateAdd = () => {
+  console.log('useTemplateAdd', planTemplate.value)
+  const val = planTemplate.value as SourceData
+  formState.planName = echoFormState(val).planName
+  formState.remark = echoFormState(val).remark
+  formState.thresholdTime = echoFormState(val).thresholdTime
+  formState.mergeTime = echoFormState(val).mergeTime
+  formState.eventType = echoFormState(val).eventType
+  formState.statisticsTime = echoFormState(val).statisticsTime
+  formState.count = echoFormState(val).count
+  formState.timeThreshold = echoFormState(val).timeThreshold
+  formState.planTime = echoFormState(val).planTime
+  formState.effectType = echoFormState(val).effectType
+  formState.effectTimeRanges = echoFormState(val).effectTimeRanges
+  formState.effectTimeFrames = echoFormState(val).effectTimeFrames
+  formState.region = echoFormState(val).region
+  formState.enable = echoFormState(val).enable
+  formState.linkagePushWechatService = echoFormState(val).linkagePushWechatService
+}
+
+const handleChange = (value: string, options: { value: number; label: string; data: unknown }) => {
+  console.log(`selected ${value}`, options?.data)
+  planTemplate.value = options?.data as AlarmPlan
+}
+
+const handleSearch = (val: string) => {
+  fetchTemplateList(val)
+}
+
 const initBlocks = () => {
   blocks.value = [
     {
@@ -696,6 +792,9 @@ watch(
       formState.linkagePushWechatService = echoFormState(val).linkagePushWechatService
       initBlocks()
     }
+    if (value && props.type === 'plan') {
+      fetchTemplateList()
+    }
   },
   { immediate: true }
 )