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

<template>
  <q-splitter :model-value="400" unit="px" separator-style="width: 3px;" style="height: 100%">
    <template #before>
      <Model
        :resource="currentSelectedResourceRef"
        :read-only="readOnlyRef"
        @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 = 50;
                } else {
                  horizontalSplitterRef = 60;
                }
              }
            "
          >
            <q-tab v-if="statusReactive.isShowParameter" name="parameter" icon="bi-p-square" :label="$t('re.resources.dialog.designer.tab.parameter.title')" />
            <q-tab v-if="statusReactive.isShowTestCase" name="testcase" icon="bi-receipt" :label="$t('re.resources.dialog.designer.tab.testcase.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"
                :read-only="readOnlyRef"
                :model="currentSelectedModelRef"
                :resource="currentSelectedResourceRef"
                @row-click="
                  (args) => {
                    currentSelectedParameterRef = args.row;
                    if (args.row.type === 'IN') {
                      statusReactive.isShowValidator = true;
                      statusReactive.isShowProcessor = false;
                      statusReactive.isShowOption = false;
                      statusReactive.isShowTestCaseParameter = false;
                      validatorGridRef?.refresh();
                    } else if (args.row.type === 'IN_OPTION') {
                      statusReactive.isShowValidator = false;
                      statusReactive.isShowProcessor = false;
                      statusReactive.isShowOption = true;
                      statusReactive.isShowTestCaseParameter = false;
                      optionGridRef?.refresh();
                    } else if (
                      args.row.type == 'OUT' ||
                      args.row.type == 'INTERMEDIATE' ||
                      args.row.type == 'RULE_RESULT' ||
                      args.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%">
              <TestcaseGrid
                ref="testCaseGridRef"
                :read-only="readOnlyRef"
                :owner="currentSelectedResourceRef"
                @row-click="
                  (args: any) => {
                    currentSelectedTestCaseRef = args.row;
                    statusReactive.isShowValidator = false;
                    statusReactive.isShowProcessor = false;
                    statusReactive.isShowOption = false;
                    statusReactive.isShowTestCaseParameter = true;
                    testCaseParameterGridRef?.refresh();
                  }
                "
                @before-request-data="
                  (args: any) => {
                    statusReactive.isShowValidator = false;
                    statusReactive.isShowProcessor = false;
                    statusReactive.isShowOption = false;
                    statusReactive.isShowTestCaseParameter = false;
                  }
                "
              ></TestcaseGrid>
            </q-tab-panel>
          </q-tab-panels>
        </template>
        <template #after>
          <div style="height: 100%">
            <Validator
              v-if="statusReactive.isShowValidator"
              ref="validatorGridRef"
              type="parameter"
              :data-url="Environment.apiContextPath('/api/re/model/parameter/validator')"
              :owner="currentSelectedParameterRef"
              :read-only="readOnlyRef"
            ></Validator>
            <Processor
              v-if="statusReactive.isShowProcessor"
              ref="processorGridRef"
              :read-only="readOnlyRef"
              :parameter="currentSelectedParameterRef"
            ></Processor>
            <Option v-if="statusReactive.isShowOption" ref="optionGridRef" :read-only="readOnlyRef" :parameter="currentSelectedParameterRef"></Option>
            <TestcaseParameterGrid
              v-if="statusReactive.isShowTestCaseParameter"
              ref="testcaseParameterGridRef"
              :test-case="currentSelectedTestCaseRef"
            ></TestcaseParameterGrid>
          </div>
        </template>
      </q-splitter>
    </template>
  </q-splitter>
</template>
<script setup lang="ts">
import { ref, nextTick, reactive } from 'vue';
import { useRoute } from 'vue-router';
import Model from './Model.vue';
import Parameter from './Parameter.vue';
import Validator from '@/views/shared/Validator.vue';
import Processor from './Processor.vue';
import Option from './Option.vue';
import TestcaseGrid from '@/views/shared/TestcaseGrid.vue';
import TestcaseParameterGrid from '@/views/shared/TestcaseParameterGrid.vue';
import { EngineEnums } from '@/views/shared/enums/EngineEnums';

const props = defineProps({
  opener: { type: Object, default: undefined },
  fetchDataUrl: { type: String, default: '' },
  dataUrl: { type: String, default: '' },
  foreignKey: { type: String, default: '' },
  foreignValue: { type: String, default: '' },
});

const route = useRoute();
console.log(route.params);
const dialogRef = ref();
const horizontalSplitterRef = ref(60);

const readOnlyRef = ref(false);
const currentSelectedResourceRef = ref({ id: route.params.id });
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 open = (resource) => {
  currentSelectedResourceRef.value = resource;
  readOnlyRef.value = currentSelectedResourceRef.value.status !== 'SKETCH';
  dialogRef.value.show();
};

const close = () => {
  dialogRef.value.hide();
};

defineExpose({
  open,
  close,
});

await EngineEnums.init();
</script>