SaaS-lib/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/energyAlarm/editeEnergyAlarm.vue

<template>
  <ns-drawer
    v-model:visible="visible"
    width="520"
    :title="' '"
    :footer-style="{ textAlign: 'right' }"
    :ok="btnClick"
    :cancel="handleClose"
    placement="right"
    @close="handleClose">
    <ns-form ref="formRef" :schemas="schemas" :model="infoObject" formLayout="vertical" />
    <div style="margin-left: 52px">
      应用规则:
      <a-switch
        :checked="infoObject?.enableRules === 1 ? true : false"
        :class="{
          'blue-background': infoObject?.enableRules === 1 ? true : false,
          'grey-background': infoObject?.enableRules === 1 ? false : true,
        }"
        style="margin-left: 6px"
        @change="changeSwitch" />
    </div>
  </ns-drawer>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { NsMessage } from '/nerv-lib/component';
  import { http } from '/nerv-lib/util';
  import { energyAlarms } from '/@/api/alarmSettings/energyAlarm';

  const visible = ref(false);
  //表单数据
  const infoObject = ref({
    enableRules: 0,
  });
  const formRef = ref();
  const emit = defineEmits(['editObject']);
  const toggle = (value: any) => {
    //判断 是新增 还是修改
    if (value) {
      infoObject.value = value;
    } else {
      infoObject.value = {
        enableRules: 0,
      };
    }
    visible.value = !visible.value;
  };
  const schemas = [
    {
      field: 'basicInfo',
      label: '',
      displayFormItem: false,
      class: 'ns-form-item-full',
      component: 'NsChildForm',
      componentProps: {
        schemas: [
          {
            field: 'alarmTitle',
            label: '告警标题',
            component: 'NsInput',
            rules: [
              {
                required: true,
                message: '告警标题不能为空',
                trigger: 'change',
                validator: (rules: any, alarmTitle: any, cbfn: any) => {
                  if (alarmTitle && alarmTitle.trim() !== '') {
                    cbfn();
                  } else {
                    cbfn('告警标题不能为空');
                  }
                },
              },
            ],
            componentProps: {
              placeholder: '请输入告警标题',
              maxLength: 20,
            },
          },
          {
            field: 'repetitions',
            label: '重复次数',
            rules: [
              {
                required: true,
                message: '重复次数不能为空',
                trigger: 'change',
              },
            ],
            component: 'NsSelect',
            componentProps: {
              allowClear: true,
              placeholder: '请选择重复次数',

              options: [
                {
                  label: '单次',
                  value: 1,
                },
                {
                  label: '重复',
                  value: 2,
                },
                {
                  label: '累计',
                  value: 3,
                },
              ],
            },
          },
          {
            field: 'priority',
            label: '优先级',
            component: 'NsSelect',
            rules: [
              {
                required: true,
                message: '优先级不能为空',
                trigger: 'change',
              },
            ],
            componentProps: {
              allowClear: true,
              placeholder: '请选择优先级',
              options: [
                {
                  label: '紧急',
                  value: 1,
                },
                {
                  label: '重要',
                  value: 2,
                },
                {
                  label: '一般',
                  value: 3,
                },
              ],
            },
          },
          {
            field: 'monitorFrequency',
            label: '监测频率',
            component: 'NsSelect',
            rules: [
              {
                required: true,
                message: '监测频率不能为空',
                trigger: 'change',
              },
            ],
            componentProps: {
              allowClear: true,
              placeholder: '请选择优先级',
              options: [
                {
                  label: '小时',
                  value: 1,
                },
                {
                  label: '每日',
                  value: 2,
                },
                {
                  label: '每周',
                  value: 3,
                },
                {
                  label: '月度',
                  value: 4,
                },
                {
                  label: '年度',
                  value: 5,
                },
              ],
            },
          },
          {
            label: '是否创建工单',
            field: 'createWorkOrder',
            component: 'NsRadioGroup',
            rules: [
              {
                required: true,
                message: '是否创建工单不能为空',
                trigger: 'change',
              },
            ],
            componentProps: {
              radioType: 'radio',
              options: [
                { label: '是', value: 1 },
                { label: '否', value: 0 },
              ],
            },
          },
        ],
      },
    },
  ];
  //开关
  const changeSwitch = () => {
    switch (infoObject.value.enableRules) {
      case 1:
        infoObject.value.enableRules = 0;
        break;
      case 0:
        infoObject.value.enableRules = 1;
        break;
    }
  };
  const btnClick = () => {
    //表单校验
    formRef.value.triggerSubmit().then(() => {
      //调用接口
      http.post(energyAlarms.addOrUpNewData, infoObject.value).then(() => {
        emit('editObject', null);
        if (infoObject.value.id) {
          NsMessage.success('告警编辑成功');
        } else {
          NsMessage.success('告警创建成功');
        }
        handleClose();
      });
    });
  };
  const handleClose = () => {
    // 清楚校验错误信息
    formRef.value.formElRef.clearValidate();
    infoObject.value = {
      enableRules: 0,
    };
    visible.value = 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;
  }
</style>