useDrawer.vue 8.21 KB
<template>
  <div class="drawer-class">
    <BasicDrawer
      v-bind="$attrs"
      @register="registerDrawer"
      showFooter
      :title="getTitle"
      :destroyOnClose="true"
      width="700px"
      @ok="handleSubmit"
    >
      <BasicForm @register="registerForm" />
      <!-- <CpnsTenantSet ref="getChildData" :parentData="parentSetData" /> -->
      <CollapseContainer title="实体 (0-无限制)" :defaultExpand="false">
        <Entity ref="getEntity" />
      </CollapseContainer>
      <CollapseContainer title="规则引擎 (0-无限制)" :defaultExpand="false">
        <RuleEngine ref="getRuleEngine" />
      </CollapseContainer>
      <CollapseContainer title="TTL (0-无限制)" :defaultExpand="false">
        <Ttl ref="getTtl" />
      </CollapseContainer>
      <CollapseContainer title="告警与通知 (0-无限制)" :defaultExpand="false">
        <Alarm ref="getAlarm" />
      </CollapseContainer>
      <CollapseContainer title="OTA文件(字节)(0-无限制)" :defaultExpand="false">
        <Ota ref="getOta" />
      </CollapseContainer>
      <CollapseContainer title="WS (0-无限制)" :defaultExpand="false">
        <Ws ref="getWs" />
      </CollapseContainer>
      <CollapseContainer title="速率限制" :defaultExpand="false">
        <Speed ref="getSpeed" />
      </CollapseContainer>
    </BasicDrawer>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, computed, unref, getCurrentInstance, reactive } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form';
  import { formSchema } from './config';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  // import CpnsTenantSet from './cpns/index.vue';
  import Entity from './configuration/entity.vue';
  import Ttl from './configuration/ttl.vue';
  import Alarm from './configuration/alarm.vue';
  import Ota from './configuration/ota.vue';
  import Ws from './configuration/ws.vue';
  import Speed from './configuration/speed.vue';
  import RuleEngine from './configuration/ruleEngine.vue';
  import { saveTenantProfileApi } from '/@/api/tenant/tenantApi';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { CollapseContainer } from '/@/components/Container/index';

  export default defineComponent({
    name: 'ConfigDrawer',
    components: {
      BasicDrawer,
      BasicForm,
      CollapseContainer,
      // CpnsTenantSet,
      Ws,
      RuleEngine,
      Ttl,
      Alarm,
      Ota,
      Speed,
      Entity,
    },
    emits: ['success', 'register'],
    setup(_, { emit }) {
      const { createMessage } = useMessage();
      const isUpdate = ref(true);
      let postAllData: any = reactive({});
      const parentSetData: any = ref(null);
      let getValuesFormData: any = reactive({});
      const { proxy } = getCurrentInstance() as any;
      const getChildData = ref(null);

      const getEntity = ref(null);
      const getRuleEngine = ref(null);
      const getTtl = ref(null);
      const getAlarm = ref(null);
      const getOta = ref(null);
      const getWs = ref(null);
      const getSpeed = ref(null);

      const editGetId: any = ref('');
      const isDefault = ref(false);
      const createTime = ref<string>('');
      const [registerForm, { validate, resetFields, setFieldsValue, updateSchema }] = useForm({
        schemas: formSchema,
        showActionButtonGroup: false,
      });

      const funcResetFields = () => {
        proxy.$refs.getEntity.funcResetFields();
        proxy.$refs.getRuleEngine.funcResetFields();
        proxy.$refs.getTtl.funcResetFields();
        proxy.$refs.getAlarm.funcResetFields();
        proxy.$refs.getOta.funcResetFields();
        proxy.$refs.getWs.funcResetFields();
        proxy.$refs.getSpeed.funcResetFields();
      };

      const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
        //清除表单值
        funcResetFields();
        await resetFields();
        setDrawerProps({ confirmLoading: false });
        isUpdate.value = !!data?.isUpdate;
        if (!unref(isUpdate)) {
          editGetId.value = '';
          updateStatusSchema(false);
        }
        //编辑
        if (unref(isUpdate)) {
          parentSetData.value = { ...data.record.profileData.configuration };
          proxy.$refs.getEntity.setFieldsValueFunc(parentSetData.value);
          proxy.$refs.getRuleEngine.setFieldsValueFunc(parentSetData.value);
          proxy.$refs.getTtl.setFieldsValueFunc(parentSetData.value);
          proxy.$refs.getAlarm.setFieldsValueFunc(parentSetData.value);
          proxy.$refs.getOta.setFieldsValueFunc(parentSetData.value);
          proxy.$refs.getWs.setFieldsValueFunc(parentSetData.value);
          proxy.$refs.getSpeed.setFieldsValueFunc(parentSetData.value);
          editGetId.value = data.record.id;
          isDefault.value = data.record.default;
          await setFieldsValue({
            ...data.record,
          });
          createTime.value = data.record.createdTime;
          updateStatusSchema(true);
        }
      });
      const getTitle = computed(() => (!unref(isUpdate) ? '新增租户配置' : '编辑租户配置'));

      const updateStatusSchema = (status) => {
        updateSchema([
          {
            field: 'isolatedTbRuleEngine',
            componentProps: {
              disabled: status,
            },
          },
          {
            field: 'isolatedTbCore',
            componentProps: {
              disabled: status,
            },
          },
        ]);
      };

      const getAllFieldsFunc = async (isUpdate?: boolean) => {
        getValuesFormData = await validate();
        if (!getValuesFormData) return;
        let getEntity = proxy.$refs.getEntity.getAllFields();
        let getRuleEngine = proxy.$refs.getRuleEngine.getAllFields();
        let getTtl = proxy.$refs.getTtl.getAllFields();
        let getAlarm = proxy.$refs.getAlarm.getAllFields();
        let getOta = proxy.$refs.getOta.getAllFields();
        let getWs = proxy.$refs.getWs.getAllFields();
        let getSpeed = proxy.$refs.getSpeed.getAllFields();
        let profileData1 = {
          configuration: {
            ...getEntity,
            ...getRuleEngine,
            ...getTtl,
            ...getAlarm,
            ...getOta,
            ...getWs,
            ...getSpeed,
            type: 'DEFAULT',
          },
          queueConfiguration: null,
        };
        const id: any = {
          id: unref(isUpdate) ? editGetId.value : '',
        };

        const createTime1 = {
          createdTime: isUpdate ? unref(createTime) : Date.now(),
        };

        // const defaultInfo = {
        //   default: unref(isUpdate) ? isDefault.value : false,
        // };
        Object.assign(
          postAllData,
          {
            profileData: profileData1,
          },
          getValuesFormData,
          id,
          createTime1
          // defaultInfo
        );
        if (!unref(isUpdate)) {
          delete postAllData.id;
        }
      };

      async function handleSubmit() {
        setDrawerProps({ confirmLoading: true });
        try {
          if (!unref(isUpdate)) {
            await getAllFieldsFunc();
            // return;
            await saveTenantProfileApi({ ...postAllData, isolatedTbRuleEngine: null });
            createMessage.success('租户配置新增成功');
            closeDrawer();
            emit('success');
            resetFields();
          } else {
            await getAllFieldsFunc(true);
            await saveTenantProfileApi({ ...postAllData, isolatedTbRuleEngine: null });
            createMessage.success('租户配置编辑成功');
            closeDrawer();
            emit('success');
          }
        } catch (e) {
        } finally {
          setTimeout(() => {
            setDrawerProps({ confirmLoading: false });
          }, 300);
        }
      }
      return {
        parentSetData,
        getChildData,
        registerDrawer,
        registerForm,
        getTitle,
        handleSubmit,
        getEntity,
        getRuleEngine,
        getTtl,
        getAlarm,
        getOta,
        getWs,
        getSpeed,
      };
    },
  });
</script>

<style lang="less">
  .drawer-class {
    .ant-row {
      .ant-col {
        :deep .ant-input-number {
          width: 34vw !important;
        }
      }
    }
  }
</style>