condition.vue 4.76 KB
<template>
  <CollapseContainer style="background-color: #eeeeee">
    <div style="position: relative">
      <BasicForm
        :labelWidth="100"
        :emptySpan="10"
        :showResetButton="false"
        :showSubmitButton="false"
        @register="registerCondition"
      />
    </div>
  </CollapseContainer>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { CollapseContainer } from '/@/components/Container/index';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { Input } from 'ant-design-vue';
  import { useConditionDrawerSchema } from '../config';
  import { screenLinkPageByDeviceIdGetAttribut } from '/@/api/ruleengine/ruleengineApi';

  export default defineComponent({
    components: { CollapseContainer, BasicForm, [Input.name]: Input },
    props: ['deviceInfo1', 'editConditionFather', 'newConditionMapFather'],

    setup(props) {
      const fieldValue: any = ref({});
      const [registerCondition, { setFieldsValue, getFieldsValue, updateSchema, resetFields }] =
        useForm({
          labelWidth: 100,
          schemas: useConditionDrawerSchema,
          actionColOptions: { span: 24 },
        });
      const getFieldsValueFunc = () => {
        fieldValue.value = getFieldsValue();
        return fieldValue.value;
      };
      const resetFieldsValueFunc = () => {
        resetFields();
      };
      const updateFieldDeviceId = (v) => {
        const option = v;
        setTimeout(() => {
          updateSchema({
            field: 'entityId',
            componentProps: {
              options: option,
              onChange(e) {
                updateFieldType2Func(e);
              },
            },
          });
        }, 10);
      };
      const updateFieldType2Func = async (e) => {
        const data1 = await screenLinkPageByDeviceIdGetAttribut('DEVICE', e);
        const data = data1.map((m) => {
          return {
            label: m,
            value: m,
          };
        });
        setTimeout(() => {
          updateSchema({
            field: 'type',
            componentProps() {
              return {
                placeholder: '请选择属性',
                options: data,
                onChange(e) {
                  if (e) {
                    updateSchema([
                      {
                        field: 'operation',
                        ifShow: true,
                      },
                      {
                        field: 'value',
                        ifShow: true,
                      },
                    ]);
                  } else {
                    updateSchema([
                      {
                        field: 'operation',
                        ifShow: false,
                      },
                      {
                        field: 'value',
                        ifShow: false,
                      },
                    ]);
                  }
                },
              };
            },
          });
        }, 10);
      };

      //回显数据
      const setFieldsFormValueFun = () => {
        if (props.editConditionFather !== 1) {
          setTimeout(() => {
            setFieldsValue(props.editConditionFather);
            setFieldsValue({
              type:
                props.editConditionFather?.triggerCondition?.condition[0]?.valueType == 'NUMERIC'
                  ? 'NUMERIC1'
                  : 'NUMERIC2',
              operation1:
                props.editConditionFather?.triggerCondition?.condition[0]?.predicate?.operation,
              operation2:
                props.editConditionFather?.triggerCondition?.condition[0]?.predicate?.operation,
              value1:
                props.editConditionFather?.triggerCondition?.condition[0]?.predicate?.value
                  ?.defaultValue,
              value2:
                props.editConditionFather?.triggerCondition?.condition[0]?.predicate?.value
                  ?.defaultValue,
            });
          }, 100);
        }
      };
      setFieldsFormValueFun();
      const editSelectDevice = () => {
        if (props.newConditionMapFather !== 1) {
          setTimeout(() => {
            updateSchema({
              field: 'entityId',
              componentProps: {
                options: props.newConditionMapFather,
              },
            });
          }, 100);
        }
      };
      editSelectDevice();
      //新增清空设备选择
      const clearSelectDevice = () => {
        updateSchema({
          field: 'entityId',
          componentProps: {
            options: [],
          },
        });
      };
      return {
        updateFieldDeviceId,
        resetFieldsValueFunc,
        clearSelectDevice,
        editSelectDevice,
        getFieldsValueFunc,
        registerCondition,
      };
    },
  });
</script>