pref:优化场景联动告警配置选择框弹窗告警配置

fengtao
1 parent 23279808
Showing 4 changed files with 85 additions and 21 deletions
src/views/rule/linkedge/SceneLinkAgeDrawer.vue
src/views/rule/linkedge/config/config.data.ts
src/views/rule/linkedge/cpns/Trigger-Condition.vue
src/views/rule/linkedge/cpns/action.vue
--- a/src/views/rule/linkedge/SceneLinkAgeDrawer.vue
View file @1da0e99
+++ b/src/views/rule/linkedge/SceneLinkAgeDrawer.vue
View file @1da0e99
@@ -98,6 +98,7 @@
               :arr="arr"
               @deleteAction="deleteAction"
               @getActionFormArr="getActionFormArr"
+              @dynamicChangeAlarmConfig="handleDynamicChangeAlarmConfig"
             />
           </template>
           <!-- 按钮 -->
@@ -550,8 +551,14 @@
   const getMasterDeviceList = ref([]);
   const orgId = ref('');
   const alarmConfigList = ref([]);
+  //FT add 2022-10-27
+  const addOrgId = ref('');
+  //FT add 2022-10-27
   watch(organizationId, async (newValue: string) => {
     if (!newValue) return;
+    //FT add 2022-10-27
+    addOrgId.value = newValue;
+    //FT add 2022-10-27
     const { items = [] } = await screenLinkPageByDeptIdGetDevice({ organizationId: newValue });
     //TODO fengtao
     getMasterDeviceList.value = await byOganizationIdGetMasterDevice(newValue);
@@ -567,13 +574,33 @@
     alarmConfigList.value = data.map((item) => ({ label: item.name, value: item.id }));
     setAlarmConfig(skipUnwrap.actionItemRefs, true);
   });
-
+  //FT add 2022-10-27
+  const handleDynamicChangeAlarmConfig = async () => {
+    const data = await getOrganizationAlarmConfig({
+      organizationId: isUpdate.value ? provideOrgid.value : addOrgId.value,
+    });
+    const res = data.map((item) => ({ label: item.name, value: item.id }));
+    isUpdate.value ? (editAlarmConfigData.value = res) : (alarmConfigList.value = res);
+    unref(skipUnwrap.actionItemRefs)?.map((item: any) => {
+      if (isUpdate.value) {
+        item.updateEditFieldAlarmConfig(editAlarmConfigData);
+      } else {
+        item.updateFieldAlarmConfig(alarmConfigList);
+      }
+    });
+  };
+  //FT add 2022-10-27
   // 根据上面组织变化动态改变触发器，执行条件,执行动作的设备值
   function setFields(linkAge, isOrganizationChange = false) {
     unref(linkAge).map((item) => {
       isOrganizationChange && item.resetFieldsValueFunc();
       //TODO fengtao
       item.updateFieldDeviceId(deviceList, orgId, isUpdate, getMasterDeviceList);
+      if (isUpdate.value) {
+        item.updateEditFieldAlarmConfig(editAlarmConfigData);
+      } else {
+        item.updateFieldAlarmConfig(alarmConfigList);
+      }
       //TODO fengtao
     });
   }
--- a/src/views/rule/linkedge/config/config.data.ts
View file @1da0e99
+++ b/src/views/rule/linkedge/config/config.data.ts
View file @1da0e99
@@ -3,7 +3,7 @@ import { BasicColumn, FormSchema } from '/@/components/Table';
 import { screenLinkOrganizationGetApi } from '/@/api/ruleengine/ruleengineApi';
 import { scheduleOptions } from './formatData';
 import { copyTransFun } from '/@/utils/fnUtils';
-import { numberAndNonegativeRule,numberAndEngLishRule } from '/@/utils/rules';
+import { numberAndNonegativeRule, numberAndEngLishRule } from '/@/utils/rules';
 /**
  * 所使用的枚举值
@@ -334,10 +334,11 @@ export const actionSchema: FormSchema[] = [
   {
     field: 'alarm_config',
     label: '',
-    component: 'Select',
+    component: 'Input',
     componentProps: {
       placeholder: '请选择告警配置',
     },
+    slot: 'alarmConfigSlot',
     ifShow: ({ values }) => values.outTarget === 'MSG_NOTIFY',
     colProps: { span: 6 },
   },
--- a/src/views/rule/linkedge/cpns/Trigger-Condition.vue
View file @1da0e99
+++ b/src/views/rule/linkedge/cpns/Trigger-Condition.vue
View file @1da0e99
@@ -292,6 +292,17 @@
     currentIndex.value = index;
   };
   const scheduleData = ref(null);
+  //FT add 2022-10-27
+  const updateFieldAlarmConfig = (alarmConfigList) => {
+    //什么也不做
+    console.log(alarmConfigList);
+  };
+  //FT add 2022-10-27
+  const updateEditFieldAlarmConfig = (alarmConfigList) => {
+    //什么也不做
+    console.log(alarmConfigList);
+  };
+
   defineExpose({
     getFieldsValueFunc,
     updateFieldDeviceId,
@@ -307,13 +318,15 @@
     isUpdate,
     alarmScheduleRef,
     updateFieldAttributeFunc,
+    updateFieldAlarmConfig,
+    updateEditFieldAlarmConfig,
   });
 </script>
 <style lang="less" scoped>
   ///移除选择框默认样式（24px）否则超出默认宽度会造成页面样式错乱
   :deep(.ant-select-selector) {
-    padding-right: 0px !important;
+    padding-right: 0 !important;
   }
 </style>
--- a/src/views/rule/linkedge/cpns/action.vue
View file @1da0e99
+++ b/src/views/rule/linkedge/cpns/action.vue
View file @1da0e99
@@ -19,6 +19,24 @@
           placeholder="请选择执行动作"
           allowClear
       /></template>
+      <template #alarmConfigSlot="{ model, field }">
+        <a-select
+          allowClear
+          placeholder="请选择告警配置"
+          v-model:value="model[field]"
+          style="width: 205px; margin-left: 10px"
+          :options="alarmConfigOptions.map((item) => ({ value: item.value, label: item.label }))"
+        >
+          <template #dropdownRender="{ menuNode: menu }">
+            <v-nodes :vnodes="menu" />
+            <a-divider style="margin: 4px 0" />
+            <div @click="handleOpenAlarmConfig" style="padding: 4px 0; cursor: pointer">
+              <plus-outlined />
+              新增告警配置
+            </div>
+          </template>
+        </a-select>
+      </template>
       <template #doContext>
         <div class="flex">
           <div ref="jsoneditorRef" style="height: 100%; width: 100%"></div>
@@ -56,19 +74,23 @@
       >新增清除告警</a-button
     >
   </CollapseContainer>
+  <AlarmConfigDrawer @register="registerAlarmContactDrawer" @success="handleSuccess" />
 </template>
+
 <script lang="ts" setup>
   import { ref, onMounted, nextTick, unref, computed, provide } from 'vue';
   import { CollapseContainer } from '/@/components/Container/index';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { Tooltip, Select, Checkbox, Card } from 'ant-design-vue';
   import { Icon } from '/@/components/Icon';
-  import { actionSchema } from '../config/config.data.ts';
+  import { actionSchema } from '../config/config.data';
   import jsoneditor from 'jsoneditor';
   import 'jsoneditor/dist/jsoneditor.min.css';
-  import { QuestionCircleOutlined } from '@ant-design/icons-vue';
+  import { QuestionCircleOutlined, PlusOutlined } from '@ant-design/icons-vue';
   import ClearAlarm from './ClearAlarm.vue';
   import { useMessage } from '/@/hooks/web/useMessage';
+  import { useDrawer } from '/@/components/Drawer';
+  import AlarmConfigDrawer from '/@/views/alarm/config/ContactDrawer.vue';
   const props = defineProps({
     actionIndex: {
@@ -96,13 +118,24 @@
       default: '',
     },
   });
+  const alarmConfigOptions: any = ref([]);
+  const [registerAlarmContactDrawer, { openDrawer }] = useDrawer();
+  async function handleSuccess() {
+    emit('dynamicChangeAlarmConfig');
+  }
+  // 新增或编辑
+  const handleOpenAlarmConfig = () => {
+    openDrawer(true, {
+      isUpdate: false,
+    });
+  };
   const isAddClearRule = computed(() => clearRuleList.value.length < props.triggerData.length);
   const refItem = {
     clearRuleRefs: ref([]),
   };
   const { createMessage } = useMessage();
-  const emit = defineEmits(['deleteAction', 'getActionFormArr']);
+  const emit = defineEmits(['deleteAction', 'getActionFormArr', 'dynamicChangeAlarmConfig']);
   const options = computed(() => {
     return [
       { label: '设备输出', value: 'DEVICE_OUT' },
@@ -228,23 +261,14 @@
       },
     });
   };
-  //TODO-fengtao
+  //FT add 2022-10-27
   const updateEditFieldAlarmConfig = (alarmConfigList) => {
-    updateSchema({
-      field: 'alarm_config',
-      componentProps: {
-        options: alarmConfigList,
-      },
-    });
+    alarmConfigOptions.value = alarmConfigList.value;
   };
   const updateFieldAlarmConfig = (alarmConfigList) => {
-    updateSchema({
-      field: 'alarm_config',
-      componentProps: {
-        options: alarmConfigList,
-      },
-    });
+    alarmConfigOptions.value = alarmConfigList.value;
   };
+  //FT add 2022-10-27
   const checked = ref(false);
   const validateForm = () => {
@@ -346,7 +370,6 @@
     clearRuleList,
   });
 </script>
-
 <style>
   .jsoneditor {
     border: none;