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

<template>
  <w-dialog
    ref="dialogRef"
    :title="$t('re.workflow.dialog.title')"
    width="1248px"
    height="500px"
    :can-maximize="false"
    :buttons="[
      {
        label: $t('confirm'),
        noCaps: true,
        click: () => {
          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 Formater.enum(Enums.LibType)(value);
                  }
                },
              },
              { width: 60, name: 'version', label: $t('version') },
              {
                width: 80,
                name: 'status',
                label: $t('status'),
                align: 'center',
                format: (value, row) => {
                  return {
                    componentType: ResourceDeployStatusTag,
                    attrs: { status: value },
                  };
                },
              },
            ]"
            @row-click="
              (evt, row, index) => {
                console.log(row);
                if (row.type === 'INDICATOR') {
                  currentSelectedLibIdRef = row.id;
                } else {
                  currentSelectedLibIdRef = null;
                }
                indicatorGridRef?.refresh();
              }
            "
            @before-request-data="
              () => {
                currentSelectedLibIdRef = null;
                indicatorGridRef?.refresh();
              }
            "
          ></w-grid>
        </div>
      </template>
      <template #after>
        <div class="pl-1" style="height: 100%">
          <w-grid
            ref="indicatorGridRef"
            :title="$t('re.lib.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="2"
            :query-form-fields="[
              { name: 'code', label: $t('code'), type: 'text', clearable: true },
              { name: 'name', label: $t('name'), type: 'text', clearable: true },
            ]"
            :columns="[
              { width: 60, name: 'order', label: $t('order'), align: 'right' },
              { width: 250, name: 'name', label: $t('name') },
              { width: 100, name: 'type', label: $t('type'), format: Formater.enum(Enums.IndicatorType) },
              {
                width: 100,
                name: 'valueType',
                label: $t('valueType'),
                format: (value, row) => {
                  return ValueTypeMap[value];
                },
              },
              { width: 80, name: 'valueTypeIsList', label: $t('re.resources.designer.parameter.grid.entity.valueTypeIsList'), format: Formater.checkTag() },
              { width: '100%', name: 'defaultValue', label: $t('defaultValue') },
            ]"
          ></w-grid>
        </div>
      </template>
    </q-splitter>
  </w-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { axios, Environment, EnumTools, Formater } from 'platform-core';
import ResourceDeployStatusTag from '@/views/shared/ResourceDeployStatusTag.vue';

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

const dialogRef = ref();
const libTreeGridRef = ref();
const currentSelectedLibIdRef = ref();
const indicatorGridRef = ref();

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

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

defineExpose({
  open,
  close,
});

const Enums = await EnumTools.fetch(['io.sc.engine.rule.core.enums.LibType', 'io.sc.engine.rule.core.enums.DeployStatus']);
let ValueTypeMap = {};
let ValueTypeList = [];
const response = await axios.get(Environment.apiContextPath('/api/re/dictionary/getAllDictionaryMap'));
if (response && response.data) {
  ValueTypeMap = {};
  ValueTypeList = [];
  for (const item of response.data) {
    ValueTypeMap[item.key] = item.value;
    ValueTypeList.push({ value: item.key, label: item.value });
  }
}
</script>