platform/io.sc.engine.rule.frontend/src/views/resources/designer/Designer.vue

<template>
  <q-splitter v-model="verticalSplitterRef" unit="px" separator-style="width: 3px;" style="height: 100%">
    <template #before>
      <div>{{ $route.params }}</div>
      <Model
        :resource="currentSelectedResourceRef"
        @row-click="
          (args) => {
            currentSelectedModelRef = args.row;
            if (args.row.parent) {
              statusReactive.parameterAndTestcaseTab = 'parameter';
              statusReactive.isShowParameter = true;
              statusReactive.isShowTestCase = false;
              statusReactive.isShowValidator = false;
              statusReactive.isShowProcessor = false;
              statusReactive.isShowOption = false;
              statusReactive.isShowTestCaseParameter = false;
            } else {
              statusReactive.parameterAndTestcaseTab = 'parameter';
              statusReactive.isShowParameter = true;
              statusReactive.isShowTestCase = true;
              statusReactive.isShowValidator = false;
              statusReactive.isShowProcessor = false;
              statusReactive.isShowOption = false;
              statusReactive.isShowTestCaseParameter = false;
              testCaseGridRef?.refresh();
            }
            parameterGridRef?.refresh();
          }
        "
        @before-request-data="
          () => {
            statusReactive.parameterAndTestcaseTab = 'parameter';
            statusReactive.isShowParameter = false;
            statusReactive.isShowTestCase = false;
            statusReactive.isShowValidator = false;
            statusReactive.isShowProcessor = false;
            statusReactive.isShowOption = false;
            statusReactive.isShowTestCaseParameter = false;
          }
        "
      ></Model>
    </template>

    <template #after>
      <q-splitter v-model="horizontalSplitterRef" unit="%" separator-style="height: 3px" horizontal style="height: 100%">
        <template #before>
          <q-tabs
            v-model="statusReactive.parameterAndTestcaseTab"
            no-caps
            inline-label
            align="left"
            @update:model-value="
              (value) => {
                if (value === 'testcase') {
                  horizontalSplitterRef = 30;
                } else {
                  horizontalSplitterRef = 50;
                }
              }
            "
          >
            <q-tab v-if="statusReactive.isShowParameter" name="parameter" icon="bi-p-square" :label="$t('re.resources.designer.parameter.tab.title')" />
            <q-tab v-if="statusReactive.isShowTestCase" name="testcase" icon="bi-receipt" :label="$t('re.resources.designer.testcase.tab.title')" />
          </q-tabs>
          <q-tab-panels v-model="statusReactive.parameterAndTestcaseTab" animated style="height: calc(100% - 48px)">
            <q-tab-panel v-if="statusReactive.isShowParameter" name="parameter" style="padding: 0px; height: 100%">
              <Parameter
                ref="parameterGridRef"
                :model="currentSelectedModelRef"
                :resource="currentSelectedResourceRef"
                @row-click="
                  (evt, row, index) => {
                    currentSelectedParameterRef = row;
                    if (row.type === 'IN') {
                      statusReactive.isShowValidator = true;
                      statusReactive.isShowProcessor = false;
                      statusReactive.isShowOption = false;
                      statusReactive.isShowTestCaseParameter = false;
                      validatorGridRef?.refresh();
                    } else if (row.type === 'IN_OPTION') {
                      statusReactive.isShowValidator = false;
                      statusReactive.isShowProcessor = false;
                      statusReactive.isShowOption = true;
                      statusReactive.isShowTestCaseParameter = false;
                      optionGridRef?.refresh();
                    } else if (row.type == 'OUT' || row.type == 'INTERMEDIATE' || row.type == 'RULE_RESULT' || row.type == 'SINGLE_RULE_RESULT') {
                      statusReactive.isShowValidator = false;
                      statusReactive.isShowProcessor = true;
                      statusReactive.isShowOption = false;
                      statusReactive.isShowTestCaseParameter = false;
                      processorGridRef?.refresh();
                    } else {
                      statusReactive.isShowValidator = false;
                      statusReactive.isShowProcessor = false;
                      statusReactive.isShowOption = false;
                      statusReactive.isShowTestCaseParameter = false;
                    }
                  }
                "
                @before-request-data="
                  () => {
                    statusReactive.isShowValidator = false;
                    statusReactive.isShowProcessor = false;
                    statusReactive.isShowOption = false;
                    statusReactive.isShowTestCaseParameter = false;
                  }
                "
              ></Parameter>
            </q-tab-panel>
            <q-tab-panel v-if="statusReactive.isShowTestCase" name="testcase" class="px-0 pb-0" style="padding: 0px; height: 100%">
              <TestCase
                ref="testCaseGridRef"
                :model="currentSelectedModelRef"
                @row-click="
                  (evt, row, index) => {
                    currentSelectedTestCaseRef = row;
                    statusReactive.isShowValidator = false;
                    statusReactive.isShowProcessor = false;
                    statusReactive.isShowOption = false;
                    statusReactive.isShowTestCaseParameter = true;
                    testCaseParameterGridRef?.refresh();
                  }
                "
                @before-request-data="
                  () => {
                    statusReactive.isShowValidator = false;
                    statusReactive.isShowProcessor = false;
                    statusReactive.isShowOption = false;
                    statusReactive.isShowTestCaseParameter = false;
                  }
                "
              ></TestCase>
            </q-tab-panel>
          </q-tab-panels>
        </template>
        <template #after>
          <div style="height: 100%">
            <Validator v-if="statusReactive.isShowValidator" ref="validatorGridRef" :parameter="currentSelectedParameterRef"></Validator>
            <Processor v-if="statusReactive.isShowProcessor" ref="processorGridRef" :parameter="currentSelectedParameterRef"></Processor>
            <Option v-if="statusReactive.isShowOption" ref="optionGridRef" :parameter="currentSelectedParameterRef"></Option>
            <TestCaseParameter
              v-if="statusReactive.isShowTestCaseParameter"
              ref="testCaseParameterGridRef"
              :test-case="currentSelectedTestCaseRef"
            ></TestCaseParameter>
          </div>
        </template>
      </q-splitter>
    </template>
  </q-splitter>
</template>
<script setup lang="ts">
import { ref, nextTick, reactive, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { axios, Environment, Tools, EnumTools, Options, Formater } from 'platform-core';
import Model from './Model.vue';
import Parameter from './Parameter.vue';
import TestCase from './TestCase.vue';
import TestCaseParameter from './TestCaseParameter.vue';
import Validator from './Validator.vue';
import Processor from './Processor.vue';
import Option from './Option.vue';

const route = useRoute();
const currentSelectedResourceId = route.params.id;
const horizontalSplitterRef = ref(50);
const verticalSplitterRef = ref(400);

const readOnlyRef = ref();
const currentSelectedResourceRef = ref();
const currentSelectedModelRef = ref({});
const currentSelectedParameterRef = ref({});
const currentSelectedTestCaseRef = ref({});
const parameterGridRef = ref();
const validatorGridRef = ref();
const processorGridRef = ref();
const optionGridRef = ref();
const testCaseGridRef = ref();
const testCaseParameterGridRef = ref();

const statusReactive = reactive({
  parameterAndTestcaseTab: 'parameter',
  isShowParameter: false,
  isShowTestCase: false,
  isShowValidator: false,
  isShowProcessor: false,
  isShowOption: false,
  isShowTestCaseParameter: false,
});

const Enums = await EnumTools.fetch(['io.sc.engine.rule.core.enums.DeployStatus']);

axios.get(Environment.apiContextPath('/api/re/resource/' + currentSelectedResourceId)).then((response) => {
  currentSelectedResourceRef.value = response.data;
});
</script>