SaaS-lib/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/notificationManagement/index.vue

<template>
  <ns-drawer
    v-model:visible="visible"
    width="520"
    :title="' '"
    :ok="btnClick"
    :cancel="handleClose"
    placement="right"
    :footer-style="{ textAlign: 'right' }"
    @close="handleClose">
    <div style="padding: 18px; width: 100%; overflow: hidden">
      <a-form ref="formRef" :model="infoObject" :rules="rules">
        <a-form-item ref="notification" label="通知方式" name="notification">
          <a-select
            ref="select"
            v-model:value="infoObject.notification"
            style="width: 100%"
            mode="multiple"
            :options="devicePointData"
            show-search
            :allowClear="true"
            placeholder="请选择通知方式"
            :filter-option="filterDevicePoint" />
        </a-form-item>
        <a-form-item label="启用规则" name="enableRules">
          <a-switch
            :checked="infoObject.enableRules === 1 ? true : false"
            :class="{
              'blue-background': infoObject.enableRules === 1 ? true : false,
              'grey-background': infoObject.enableRules === 1 ? false : true,
            }"
            @click="clickSwitch" />
        </a-form-item>
        <a-form-item label="通知用户" name="user">
          <a-cascader
            v-model:value="infoObject.user"
            style="width: 100%"
            multiple
            :max-tag-count="1"
            :options="options"
            :load-data="loadData"
            placeholder="请选择通知用户"
            :show-checked-strategy="Cascader.SHOW_CHILD" />
        </a-form-item>
      </a-form>
      <a-table :dataSource="dataSource" :columns="columns" :pagination="false" />
    </div>
  </ns-drawer>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { Cascader } from 'ant-design-vue';

  import { NsMessage } from '/nerv-lib/component';
  import { http } from '/nerv-lib/util';

  // import { deviceAlarms } from '/@/api/alarmSettings/deviceAlarms';

  //table 数据
  const columns = [
    {
      title: '序号',
      dataIndex: 'address',
      customRender: (text: any) => {
        return text.index + 1;
      },
    },
    {
      title: '通知名单',
      dataIndex: 'name',
      key: 'name',
    },
  ];
  const dataSource = [
    {
      name: '运维>运维1部>张三',
    },
    {
      name: '运维>运维1部>李四',
    },
  ];
  const visible = ref(false);
  //表单数据
  const infoObject = ref({
    enableRules: 0,
  });
  //设备点位搜索
  const filterDevicePoint = (input: string, option: any) => {
    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
  };
  //开关
  const clickSwitch = () => {
    if (infoObject.value.enableRules === 1) {
      infoObject.value.enableRules = 0;
    } else {
      infoObject.value.enableRules = 1;
    }
  };
  // 通知信息
  const devicePointData = ref([
    { label: '站内信息', value: 1 },
    { label: '邮件', value: 2 },
  ]);
  //通知用户
  const options = ref([
    {
      value: 1,
      label: 'Zhejiang',
      isLeaf: false,
    },
    {
      value: 2,
      label: 'Jiangsu',
      isLeaf: false,
    },
  ]);
  //加载用户
  const loadData = (selectedOptions: any) => {
    const targetOption = selectedOptions[selectedOptions.length - 1];
    targetOption.loading = true;
    // load options lazily
    setTimeout(() => {
      targetOption.loading = false;
      console.log(targetOption, '数据');
      targetOption.children = [
        {
          label: `${targetOption.label} Dynamic 1`,
          value: 3,
          isLeaf: false,
        },
        {
          label: `${targetOption.label} Dynamic 2`,
          value: 4,
          isLeaf: false,
        },
      ];
      options.value = [...options.value];
    }, 1000);
  };

  const rules = {
    notification: [{ required: true, message: '请选择站点', trigger: 'change' }],
    enableRules: [{ required: true, message: '请选择启用规则', trigger: 'change' }],
    user: [{ required: true, message: '请选择通知人', trigger: 'change' }],
    abnormalDescription: [
      {
        required: true,
        message: '请输入异常描述',
        trigger: 'blur',
        validator: (rules: any, abnormalDescription: any, cbfn: any) => {
          if (abnormalDescription.trim() !== '') {
            cbfn();
          } else {
            cbfn('告警标题不能为空');
          }
        },
      },
    ],
    alarm: [{ required: true, message: '请选择逻辑', trigger: 'blur' }],
    number: [{ required: true, message: '请输入数值', trigger: 'blur' }],
  };
  const formRef = ref();
  const emit = defineEmits(['editObject']);
  const toggle = (value: any) => {
    //判断 是新增 还是修改
    if (value) {
      // infoObject.value = value;
      infoObject.value = {};
    } else {
      infoObject.value = {
        enableRules: 0,
      };
    }
    visible.value = !visible.value;
  };

  const btnClick = () => {
    console.log(infoObject.value);
    //表单校验
    formRef.value.validate().then(() => {
      //调用接口
      // http.post(deviceAlarms.addOrUpNewData, infoObject.value).then(() => {
      //   NsMessage.success('操作成功');
      //   visible.value = false;
      //   emit('editObject', null);
      // });
    });
  };
  const handleClose = () => {
    // 清楚校验错误信息
    formRef.value.resetFields();
    visible.value = false;
    options.value = [
      {
        value: 'zhejiang',
        label: 'Zhejiang',
        isLeaf: false,
      },
      {
        value: 'jiangsu',
        label: 'Jiangsu',
        isLeaf: false,
      },
    ];
  };
  defineExpose({
    toggle,
    handleClose,
    formRef,
  });
</script>
<style scoped lang="less">
  .drawerContainer {
    height: 100%;
    display: flex;
    justify-content: space-between;
  }
  .blue-background.ant-switch-checked {
    background-color: linear-gradient(
      180deg,
      rgba(1, 206, 255, 1) 0%,
      rgba(0, 150, 229, 1) 100%
    ) !important;
  }

  .grey-background.ant-switch {
    background-color: grey !important;
  }

  .blue-background.ant-switch-checked .ant-switch-handle {
    background-color: linear-gradient(
      180deg,
      rgba(1, 206, 255, 1) 0%,
      rgba(0, 150, 229, 1) 100%
    ) !important;
  }

  .grey-background.ant-switch .ant-switch-handle {
    background-color: grey !important;
  }
  /deep/ .ant-form-item-label {
    z-index: 20;
    text-align: right;
    width: 23%;
  }
</style>