SaaS-lib/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/equipmentAlarm/editeEquipmentAlarm.vue

<template>
  <ns-drawer
    v-model:visible="visible"
    width="520"
    :title="infoObject?.id ? '修改告警功能' : '新增告警'"
    :ok="btnClick"
    :cancel="handleClose"
    placement="right">
    <ns-form ref="formRef" :schemas="schemas" :model="infoObject" formLayout="vertical" />
    <div style="margin-left: 52px">
      应用规则:
      <a-switch
        v-model:checked="infoObject.isUse"
        :class="{
          'blue-background': infoObject.isUse,
          'grey-background': !infoObject.isUse,
        }"
        style="margin-left: 6px"
        @change="changeSwitch" />
    </div>
  </ns-drawer>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { NsMessage } from '/nerv-lib/component';

  const visible = ref(false);
  //表单数据
  const infoObject = ref({});
  const formRef = ref();
  const emit = defineEmits(['editObject']);
  const toggle = (value) => {
    //判断 是新增 还是修改
    if (value) {
      infoObject.value = value;
    } else {
      infoObject.value = {
        accountNo: null,
      };
    }
    console.log('xxxx');

    visible.value = !visible.value;
  };
  const schemas = [
    {
      field: 'basicInfo',
      label: '',
      displayFormItem: false,
      class: 'ns-form-item-full',
      component: 'NsChildForm',
      componentProps: {
        schemas: [
          {
            field: 'accountNo',
            label: '告警标题',
            component: 'NsInput',
            rules: [
              {
                required: true,
                message: '告警标题不能为空',
                trigger: 'change',
              },
            ],
            componentProps: {
              placeholder: '请输入告警标题',
              maxLength: 20,
            },
          },
          {
            field: 'select',
            label: '重复次数',
            rules: [
              {
                required: true,
                message: '重复次数不能为空',
                trigger: 'change',
              },
            ],
            component: 'NsSelect',
            componentProps: {
              allowClear: true,
              placeholder: '请选择重复次数',

              options: [
                {
                  label: '单次',
                  value: 0,
                },
                {
                  label: '重复',
                  value: 1,
                },
                {
                  label: '累计',
                  value: 2,
                },
              ],
            },
          },
          {
            field: 'accountNo',
            label: '检测时长',
            component: 'NsInputNumber',
            rules: [
              {
                required: true,
                validator: (rules, value, cbfn) => {
                  if (value && /^[0-9]*$/.test(value)) {
                    cbfn();
                  } else {
                    cbfn('请输入正确的检测时长');
                  }
                },
                trigger: 'change',
              },
            ],
            componentProps: {
              placeholder: '请输入监测时长',
              // maxLength: 30,
            },
          },
          {
            field: 'danwei',
            label: '监测时长单位',
            component: 'NsSelect',
            rules: [
              {
                required: true,
                message: '监测时长单位不能为空',
                trigger: 'change',
              },
            ],
            componentProps: {
              allowClear: true,
              placeholder: '请选择监测时长单位',
              options: [
                {
                  label: '分',
                  value: 1,
                },
                {
                  label: '时',
                  value: 2,
                },
                {
                  label: '天',
                  value: 3,
                },
              ],
            },
          },
          {
            field: 'select',
            label: '优先级',
            component: 'NsSelect',
            rules: [
              {
                required: true,
                message: '优先级不能为空',
                trigger: 'change',
              },
            ],
            componentProps: {
              allowClear: true,
              placeholder: '请选择优先级',
              options: [
                {
                  label: '紧急',
                  value: 1,
                },
                {
                  label: '重要',
                  value: 2,
                },
                {
                  label: '一般',
                  value: 3,
                },
              ],
            },
          },
        ],
      },
    },
  ];
  const changeSwitch = () => {
    console.log(infoObject.value.selectSwitch, '开关');
  };
  const btnClick = () => {
    //表单校验
    formRef.value.triggerSubmit().then((data: any) => {
      console.log('校验成功');
      console.log('data', infoObject.value);
      visible.value = false;
      NsMessage.success('操作成功');
      emit('editObject', null);
      //调用接口
      // http
      //         .post(props.api, data)
      //         .then(() => {
      //           isLoading.value = false;
      //           NsMessage.success('操作成功', 1, () => {
      //             navigateBack();
      //           });
      //         })
      //         .catch(() => {
      //           isLoading.value = false;
      //         });
    });
  };
  const handleClose = () => {
    // 清楚校验错误信息
    formRef.value.formElRef.clearValidate();
    console.log(infoObject.value);
    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>