pref:优化告警配置 告警联系人弹窗

@@ -7,22 +7,96 @@
     width="30%"
     @ok="handleSubmit"
   >
-    <BasicForm @register="registerForm" />
+    <BasicForm @register="registerForm">
+      <template #alarmContactSlot="{ model, field }">
+        <p style="display: none">{{ field }}</p>
+        <p>{{ orgFunc(model['organizationId']) }}</p>
+        <a-select
+          placeholder="请选择告警联系人"
+          mode="multiple"
+          v-model:value="model[field]"
+          style="width: 418px; margin-top: -5px"
+          :options="alarmContactOptions.map((item) => ({ value: item.value, label: item.label }))"
+        >
+          <template #dropdownRender="{ menuNode: menu }">
+            <v-nodes :vnodes="menu" />
+            <a-divider style="margin: 4px 0" />
+            <div @click="handleOpenAlarmContact" style="padding: 4px 8px; cursor: pointer">
+              <plus-outlined />
+              新增告警联系人
+            </div>
+          </template>
+        </a-select>
+      </template>
+    </BasicForm>
   </BasicDrawer>
+  <AlarmContactDrawer @register="registerAlarmContactDrawer" @success="handleSuccess" />
 </template>
 <script lang="ts">
-  import { defineComponent, ref, computed, unref, reactive } from 'vue';
+  import { defineComponent, ref, computed, unref, reactive, watch } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
   import { formSchema } from './config.data';
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
   import { saveOrEditAlarmConfig, byOrgIdGetAlarmContact } from '/@/api/alarm/config/alarmConfig';
   import { useMessage } from '/@/hooks/web/useMessage';
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import { useDrawer } from '/@/components/Drawer';
+  import AlarmContactDrawer from '../../alarm/contacts/ContactDrawer.vue';
 
   export default defineComponent({
     name: 'ContactDrawer',
-    components: { BasicDrawer, BasicForm },
+    components: {
+      BasicDrawer,
+      BasicForm,
+      AlarmContactDrawer,
+      PlusOutlined,
+      VNodes: (_, { attrs }) => {
+        return attrs.vnodes;
+      },
+    },
     emits: ['success', 'register'],
     setup(_, { emit }) {
+      const alarmContactOptions: any = ref([]);
+      const orgId = ref('');
+      const orgFunc = (e) => {
+        orgId.value = e;
+      };
+      watch(
+        () => orgId.value,
+        async (newValue: string) => {
+          if (newValue) {
+            //获取告警联系人
+            const res = await byOrgIdGetAlarmContact(newValue);
+            if (res) {
+              alarmContactOptions.value = res.map((m) => {
+                return { label: m.username, value: m.id };
+              });
+            } else {
+              alarmContactOptions.value = [];
+            }
+          } else {
+            alarmContactOptions.value = [];
+          }
+        }
+      );
+      const [registerAlarmContactDrawer, { openDrawer }] = useDrawer();
+      async function handleSuccess() {
+        //获取告警联系人
+        const res = await byOrgIdGetAlarmContact(orgId.value);
+        if (res) {
+          alarmContactOptions.value = res.map((m) => {
+            return { label: m.username, value: m.id };
+          });
+        } else {
+          alarmContactOptions.value = [];
+        }
+      }
+      // 新增或编辑
+      const handleOpenAlarmContact = () => {
+        openDrawer(true, {
+          isUpdate: false,
+        });
+      };
       const isUpdate = ref(true);
       let allData: any = reactive({});
       const editId = ref('');
@@ -112,6 +186,11 @@
         registerDrawer,
         registerForm,
         handleSubmit,
+        alarmContactOptions,
+        orgFunc,
+        handleOpenAlarmContact,
+        registerAlarmContactDrawer,
+        handleSuccess,
       };
     },
   });

@@ -2,7 +2,6 @@ import { BasicColumn, FormSchema } from '/@/components/Table';
 import { getOrganizationList } from '/@/api/system/system';
 import { copyTransFun } from '/@/utils/fnUtils';
 import { findDictItemByCode } from '/@/api/system/dict';
-import { byOrgIdGetAlarmContact } from '/@/api/alarm/config/alarmConfig';
 
 // 表格列数据
 export const columns: BasicColumn[] = [
@@ -101,8 +100,7 @@ export const formSchema: FormSchema[] = [
     label: '所属组织',
     component: 'ApiTreeSelect',
     required: true,
-    componentProps: ({ formActionType }) => {
-      const { updateSchema, setFieldsValue } = formActionType;
+    componentProps: () => {
       return {
         maxLength: 250,
         placeholder: '请选择所属组织',
@@ -111,25 +109,6 @@ export const formSchema: FormSchema[] = [
           copyTransFun(data as any as any[]);
           return data;
         },
-        async onChange(e) {
-          setFieldsValue({
-            alarmContactId: [],
-          });
-          const res = await byOrgIdGetAlarmContact(e);
-          let opts = [];
-          if (res.length !== 0) {
-            opts = res.map((m) => {
-              return { label: m.username, value: m.id };
-            });
-            updateSchema({
-              field: 'alarmContactId',
-              componentProps: {
-                mode: 'multiple',
-                options: opts,
-              },
-            });
-          }
-        },
       };
     },
   },
@@ -137,6 +116,7 @@ export const formSchema: FormSchema[] = [
     field: 'alarmContactId',
     label: '告警联系人',
     component: 'Select',
+    slot: 'alarmContactSlot',
     required: true,
   },
   {