platform/erm.frontend/src/views/kpi/SelectIndicatorDialog.vue

<template>
  <w-dialog
    ref="dialogRef"
    :title="$t('erm.kpi.shared.selectIndicator.dialog.title')"
    width="1024px"
    height="900px"
    :can-maximize="false"
    :buttons="[
      {
        label: $t('confirm'),
        click: () => {
          const ids = Tools.extractProperties(gridRef.getSelectedRows(), 'id');
          emit('afterSelected', ids, dialogRef);
        },
      },
    ]"
  >
    <div class="px-2">
      <w-grid
        ref="gridRef"
        :title="$t('erm.kpi.shared.selectIndicator.dialog.grid.title')"
        selection="multiple"
        :full-screen-button="false"
        :toolbar-configure="{ noIcon: false }"
        :toolbar-actions="[['query', 'moreQuery'], 'refresh']"
        :query-form-cols-num="4"
        :query-form-fields="[
          { name: 'code', label: $t('code'), type: 'text' },
          { name: 'name', label: $t('name'), type: 'text' },
          {
            name: 'enable',
            label: $t('enable'),
            type: 'select',
            options: Options.yesNo(),
            queryOperator: 'equals',
          },
          {
            name: 'enable',
            label: $t('enable'),
            type: 'select',
            clearable: true,
            options: Options.yesNo(),
            queryOperator: 'equals',
          },
          {
            name: 'source',
            label: $t('erm.kpi.indicator.grid.entity.source'),
            type: 'select',
            clearable: true,
            options: Options.dictionary(INDICATOR_SOURCE),
            queryOperator: 'equals',
          },
          {
            name: 'category',
            label: $t('erm.kpi.indicator.grid.entity.category'),
            type: 'select',
            clearable: true,
            options: Options.dictionary(INDICATOR_CATEGORY),
            queryOperator: 'equals',
          },
          {
            name: 'categoryRisk',
            label: $t('erm.kpi.indicator.grid.entity.categoryRisk'),
            type: 'select',
            clearable: true,
            options: Options.dictionary(INDICATOR_CATEGORY_RISK),
            queryOperator: 'equals',
          },
          {
            name: 'categoryBusiness',
            label: $t('erm.kpi.indicator.grid.entity.categoryBusiness'),
            type: 'select',
            clearable: true,
            options: Options.dictionary(INDICATOR_CATEGORY_BUSINESS),
            queryOperator: 'equals',
          },
          {
            name: 'categoryCal',
            label: $t('erm.kpi.indicator.grid.entity.categoryCal'),
            type: 'select',
            clearable: true,
            options: Options.dictionary(INDICATOR_CATEGORY_CAL),
            queryOperator: 'equals',
          },
          {
            name: 'unit',
            label: $t('erm.kpi.indicator.grid.entity.unit'),
            type: 'select',
            clearable: true,
            options: Options.dictionary(INDICATOR_UNIT),
            queryOperator: 'equals',
          },
          {
            name: 'frequency',
            label: $t('erm.kpi.indicator.grid.entity.frequency'),
            type: 'select',
            clearable: true,
            options: Options.dictionary(INDICATOR_FREQUENCY),
            queryOperator: 'equals',
          },
        ]"
        :auto-fetch-data="false"
        :fetch-data-url="fetchDataUrl + '?' + foreignKey + '=' + foreignValue"
        :columns="[
          { width: 100, name: 'code', label: $t('code') },
          { width: 300, name: 'name', label: $t('name') },
          { width: 70, name: 'enable', label: $t('enable'), align: 'center', format: Formater.enableTag() },
          { width: 70, name: 'unit', label: $t('erm.kpi.indicator.grid.entity.unit'), format: Formater.dictionary(INDICATOR_UNIT) },
          { width: 70, name: 'frequency', label: $t('erm.kpi.indicator.grid.entity.frequency'), format: Formater.dictionary(INDICATOR_FREQUENCY) },
          { width: 80, name: 'category', label: $t('erm.kpi.indicator.grid.entity.category'), format: Formater.dictionary(INDICATOR_CATEGORY) },
          {
            width: 100,
            name: 'categoryCal',
            label: $t('erm.kpi.indicator.grid.entity.categoryCal'),
            format: Formater.dictionary(INDICATOR_CATEGORY_CAL),
          },
          {
            width: 100,
            name: 'categoryRisk',
            label: $t('erm.kpi.indicator.grid.entity.categoryRisk'),
            format: Formater.dictionary(INDICATOR_CATEGORY_RISK),
          },
          {
            width: 100,
            name: 'categoryBusiness',
            label: $t('erm.kpi.indicator.grid.entity.categoryBusiness'),
            format: Formater.dictionary(INDICATOR_CATEGORY_BUSINESS),
          },
          {
            width: 100,
            name: 'superviseCondition',
            label: $t('erm.kpi.indicator.grid.entity.superviseCondition'),
            format: (value, row) => {
              if (row.superviseCondition && !Tools.isUndefinedOrNull(row.superviseValue)) {
                return row.superviseCondition + row.superviseValue;
              }
              return '';
            },
          },
        ]"
      ></w-grid>
    </div>
  </w-dialog>
</template>
<script setup lang="ts">
import { ref, nextTick } from 'vue';
import { useI18n } from 'vue-i18n';
import { Tools, DictionaryTools, Options, Formater } from 'platform-core';

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

const emit = defineEmits<{
  (e: 'afterSelected', ids: string[], dialogComponent: any): void;
}>();

const { t } = useI18n();
const dialogRef = ref();
const gridRef = ref();
const foreignKeyRef = ref();

const open = (foreignKey: string) => {
  foreignKeyRef.value = foreignKey;
  dialogRef.value.show();

  nextTick(() => {
    gridRef.value.refresh();
  });
};

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

defineExpose({
  open,
  close,
});

const INDICATOR_CATEGORY = await DictionaryTools.fetch('INDICATOR_CATEGORY');
const INDICATOR_CATEGORY_RISK = await DictionaryTools.fetch('INDICATOR_CATEGORY_RISK');
const INDICATOR_CATEGORY_BUSINESS = await DictionaryTools.fetch('INDICATOR_CATEGORY_BUSINESS');
const INDICATOR_CATEGORY_CAL = await DictionaryTools.fetch('INDICATOR_CATEGORY_CAL');
const INDICATOR_UNIT = await DictionaryTools.fetch('INDICATOR_UNIT');
const INDICATOR_FREQUENCY = await DictionaryTools.fetch('INDICATOR_FREQUENCY');
const INDICATOR_SOURCE = await DictionaryTools.fetch('INDICATOR_SOURCE');
</script>