platform/io.sc.engine.rule.frontend/src/views/shared/SelectIndicatorDialog.vue

<template>
  <w-dialog
    ref="dialogRef"
    :title="$t('re.indicator.grid.title')"
    width="1248px"
    height="500px"
    :can-maximize="false"
    :buttons="[
      {
        label: $t('confirm'),
        noCaps: true,
        click: (args: any) => {
          axios
            .post(Environment.apiContextPath('/api/re/model/parameter/addIndicators'), {
              modelId: modelId,
              indicators: indicatorGridRef.getTickedRows(),
            })
            .then((response) => {
              close();
              parameterGrid.refresh();
            });
        },
      },
    ]"
  >
    <q-splitter :model-value="450" unit="px" separator-style="width: 3px;" class="w-full" style="height: 100%">
      <template #before>
        <div class="pr-1" style="height: 100%">
          <w-grid
            ref="libTreeGridRef"
            :title="$t('re.lib.grid.title')"
            dense-body
            hide-bottom
            :config-button="true"
            selection="multiple"
            :checkbox-selection="false"
            :tree="true"
            :tree-icon="
              (row) => {
                if (row.type === 'FOLDER') {
                  return { name: 'folder', color: 'amber' };
                } else {
                  return { name: 'bi-card-list' };
                }
              }
            "
            ticked-field="selected"
            :data-url="Environment.apiContextPath('/api/re/lib')"
            :pageable="false"
            :toolbar-configure="{ noIcon: false }"
            :toolbar-actions="['refresh', 'separator', 'expand', 'separator', 'view', 'separator']"
            :columns="[
              {
                width: '100%',
                name: 'name',
                label: $t('name'),
              },
              {
                width: 80,
                name: 'type',
                label: $t('type'),
                format: (value) => {
                  if (value !== 'FOLDER') {
                    return EngineEnums.LibType.formater(value);
                  }
                },
              },
              { width: 60, name: 'version', label: $t('version'), align: 'right' },
              {
                width: 80,
                name: 'status',
                label: $t('status'),
                align: 'center',
                format: EngineEnums.DeployStatus.formater,
              },
            ]"
            :viewer="{
              panel: {
                columnNum: 1,
                fields: [
                  { name: 'id', label: $t('id') },
                  { name: 'parent', label: $t('parent') },
                  { name: 'type', label: $t('type'), format: Formater.none() },
                  { name: 'code', label: $t('code') },
                  { name: 'name', label: $t('name') },
                  { name: 'description', label: $t('description') },
                  ...CorporationAuditorEntityManager.getViewerFields(),
                ],
              },
            }"
            @row-click="
              (args: any) => {
                if (args.row.type === 'INDICATOR') {
                  currentSelectedLibIdRef = args.row.id;
                } else {
                  currentSelectedLibIdRef = null;
                }
                indicatorGridRef?.refresh();
              }
            "
            @before-request-data="
              (args: any) => {
                currentSelectedLibIdRef = null;
                indicatorGridRef?.refresh();
              }
            "
          ></w-grid>
        </div>
      </template>
      <template #after>
        <div class="pl-1" style="height: 100%">
          <w-grid
            ref="indicatorGridRef"
            :title="$t('re.indicator.grid.title')"
            dense-body
            hide-bottom
            :config-button="true"
            selection="multiple"
            :checkbox-selection="true"
            :tree="false"
            :fetch-data-url="Environment.apiContextPath('api/re/indicator?lib=' + currentSelectedLibIdRef)"
            :data-url="Environment.apiContextPath('api/re/indicator')"
            :pageable="false"
            :toolbar-configure="{ noIcon: false }"
            :toolbar-actions="['query', 'refresh', 'separator', 'view']"
            :query-form-cols-num="6"
            :query-form-fields="[
              { colSpan: 2, name: 'code', label: $t('code'), type: 'w-text', clearable: true },
              { colSpan: 3, name: 'name', label: $t('name'), type: 'w-text', clearable: true },
            ]"
            :columns="[
              { width: 250, name: 'name', label: $t('name') },
              { width: 60, name: 'type', label: $t('type'), format: EngineEnums.IndicatorType.formater },
              ...valueTypeManager.getColumns(),
            ]"
            :viewer="{
              panel: {
                columnNum: 1,
                fields: [
                  { name: 'id', label: $t('id') },
                  { name: 'lib', label: $t('lib') },
                  { name: 'type', label: $t('type'), format: Formater.none() },
                  { name: 'code', label: $t('code') },
                  { name: 'name', label: $t('name') },
                  { name: 'description', label: $t('description') },
                  ...valueTypeManager.getViewerFields(),
                  { name: 'order', label: $t('order') },
                  ...CorporationAuditorEntityManager.getViewerFields(),
                ],
              },
            }"
          ></w-grid>
        </div>
      </template>
    </q-splitter>
  </w-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { axios, Environment, EnumTools, Formater, CorporationAuditorEntityManager } from 'platform-core';
import { ValueTypeManager } from '@/views/shared/ValueTypeManager';
import { EngineEnums } from '@/views/shared/enums/EngineEnums';

const props = defineProps({
  parameterGrid: { type: Object, default: undefined },
  modelId: { type: String, default: undefined },
});

const dialogRef = ref();
const libTreeGridRef = ref();
const indicatorGridRef = ref();
const currentSelectedLibIdRef = ref();
const valueTypeManager = new ValueTypeManager();

const open = () => {
  dialogRef.value.show();
  libTreeGridRef.value?.refresh();
};

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

defineExpose({
  open,
  close,
});

await valueTypeManager.init();
await EngineEnums.init();
</script>