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

<template>
  <ns-drawer
    v-model:visible="visible"
    width="520"
    :title="infoObject?.id ? '修改能源告警' : '新增能源告警'"
    :footer-style="{ textAlign: 'right' }"
    :ok="btnClick"
    :cancel="handleClose"
    placement="right">
    <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 { deviceAlarms } from '/@/api/alarmSettings/deviceAlarms';

  const visible = ref(false);
  //表单数据
  const infoObject = ref({
    id: null,
    accountNo: null,
    enableRules: 0,
  });
  const formRef = ref();
  const emit = defineEmits(['editObject']);
  const toggle = (value: any) => {
    //判断 是新增 还是修改
    if (value) {
      infoObject.value = value;
    } else {
      infoObject.value = {
        id: null,
        accountNo: null,
        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',
              },
            ],
            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: 'priority',
            label: '监测频率',
            component: 'NsSelect',
            rules: [
              {
                required: true,
                message: '监测频率不能为空',
                trigger: 'change',
              },
            ],
            componentProps: {
              allowClear: true,
              placeholder: '请选择监测频率',
              componentProps: {
                api: '/api/community/objs/DictItem',
                params: {
                  pageSize: 100,
                  code: 'MZ',
                },
                placeholder: '请选择设备点位',
                resultField: 'data',
                labelField: 'dictName',
                valueField: 'dictValue',
                immediate: true,
                autoSelectFirst: false,
              },
            },
          },
        ],
      },
    },
  ];
  //开关
  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(deviceAlarms.addOrUpNewData, infoObject.value).then(() => {
      //   NsMessage.success('操作成功');
      //   visible.value = false;
      //   emit('editObject', null);
      // });
    });
  };
  const handleClose = () => {
    // 清楚校验错误信息
    formRef.value.formElRef.clearValidate();
    console.log(infoObject.value);
    visible.value = false;
    NsMessage.success('操作成功');
  };
  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>