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

<template>
  <w-grid
    ref="gridRef"
    :title="$t('erm.kpi.indicator.grid.title')"
    :config-button="true"
    selection="multiple"
    :checkbox-selection="true"
    :sticky-num="2"
    :data-url="Environment.apiContextPath('/api/erm/kpi/indicator')"
    :query-form-cols-num="4"
    :query-form-fields="[
      { name: 'code', label: $t('code'), type: 'w-text' },
      { name: 'name', label: $t('name'), type: 'w-text' },
      {
        name: 'enable',
        label: $t('enable'),
        type: 'w-select',
        clearable: true,
        options: Options.yesNo(),
        queryOperator: 'equals',
      },
      {
        name: 'source',
        label: $t('erm.kpi.indicator.grid.entity.source'),
        type: 'w-select',
        clearable: true,
        options: Options.dictionary(DICTIONARY_MAP.INDICATOR_SOURCE),
        queryOperator: 'equals',
      },
      {
        name: 'category',
        label: $t('erm.kpi.indicator.grid.entity.category'),
        type: 'w-select',
        clearable: true,
        options: Options.dictionary(DICTIONARY_MAP.INDICATOR_CATEGORY),
        queryOperator: 'equals',
      },
      {
        name: 'categoryRisk',
        label: $t('erm.kpi.indicator.grid.entity.categoryRisk'),
        type: 'w-select',
        clearable: true,
        options: Options.dictionary(DICTIONARY_MAP.INDICATOR_CATEGORY_RISK),
        queryOperator: 'equals',
      },
      {
        name: 'categoryBusiness',
        label: $t('erm.kpi.indicator.grid.entity.categoryBusiness'),
        type: 'w-select',
        clearable: true,
        options: Options.dictionary(DICTIONARY_MAP.INDICATOR_CATEGORY_BUSINESS),
        queryOperator: 'equals',
      },
      {
        name: 'categoryCal',
        label: $t('erm.kpi.indicator.grid.entity.categoryCal'),
        type: 'w-select',
        clearable: true,
        options: Options.dictionary(DICTIONARY_MAP.INDICATOR_CATEGORY_CAL),
        queryOperator: 'equals',
      },
      {
        name: 'unit',
        label: $t('erm.kpi.indicator.grid.entity.unit'),
        type: 'w-select',
        clearable: true,
        options: Options.dictionary(DICTIONARY_MAP.INDICATOR_UNIT),
        queryOperator: 'equals',
      },
      {
        name: 'frequency',
        label: $t('erm.kpi.indicator.grid.entity.frequency'),
        type: 'w-select',
        clearable: true,
        options: Options.dictionary(DICTIONARY_MAP.INDICATOR_FREQUENCY),
        queryOperator: 'equals',
      },
    ]"
    :pagination="{
      sortBy: 'lastModifyDate',
      descending: true,
    }"
    :toolbar-configure="{ noIcon: false }"
    :toolbar-actions="[['query', 'moreQuery'], 'reset', 'refresh', 'separator', 'add', 'clone', 'edit', 'remove', 'separator', 'view', 'separator', 'export']"
    :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(DICTIONARY_MAP.INDICATOR_UNIT) },
      { width: 70, name: 'frequency', label: $t('erm.kpi.indicator.grid.entity.frequency'), format: Formater.dictionary(DICTIONARY_MAP.INDICATOR_FREQUENCY) },
      { width: 80, name: 'category', label: $t('erm.kpi.indicator.grid.entity.category'), format: Formater.dictionary(DICTIONARY_MAP.INDICATOR_CATEGORY) },
      {
        width: 100,
        name: 'categoryCal',
        label: $t('erm.kpi.indicator.grid.entity.categoryCal'),
        format: Formater.dictionary(DICTIONARY_MAP.INDICATOR_CATEGORY_CAL),
      },
      {
        width: 100,
        name: 'categoryRisk',
        label: $t('erm.kpi.indicator.grid.entity.categoryRisk'),
        format: Formater.dictionary(DICTIONARY_MAP.INDICATOR_CATEGORY_RISK),
      },
      {
        width: 100,
        name: 'categoryBusiness',
        label: $t('erm.kpi.indicator.grid.entity.categoryBusiness'),
        format: Formater.dictionary(DICTIONARY_MAP.INDICATOR_CATEGORY_BUSINESS),
      },
      {
        width: 100,
        name: 'source',
        label: $t('erm.kpi.indicator.grid.entity.source'),
        format: Formater.dictionary(DICTIONARY_MAP.INDICATOR_SOURCE),
      },
      {
        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 '';
        },
      },
      { width: 300, name: 'superviseSource', label: $t('erm.kpi.indicator.grid.entity.superviseSource') },
      { width: 200, name: 'formula', label: $t('erm.kpi.indicator.grid.entity.formula') },
      { width: 300, name: 'sql', label: $t('erm.kpi.indicator.grid.entity.sql') },
      { width: 100, name: 'lastModifier', label: $t('lastModifier') },
      { width: 110, name: 'lastModifyDate', label: $t('lastModifyDate'), format: Formater.dateOnly() },
    ]"
    :editor="{
      dialog: {
        width: '800px',
        height: '650px',
      },
      form: {
        colsNum: 3,
        fields: [
          { name: 'code', label: $t('code'), type: 'w-text', requiredIf: true },
          { name: 'name', label: $t('name'), type: 'w-text', requiredIf: true },
          { name: 'enable', label: $t('enable'), type: 'w-checkbox', defaultValue: true },
          { name: 'description', label: $t('description'), colSpan: 3, type: 'w-textarea', rows: 3 },
          {
            name: 'source',
            label: $t('erm.kpi.indicator.grid.entity.source'),
            type: 'w-select',
            clearable: true,
            options: Options.dictionary(DICTIONARY_MAP.INDICATOR_SOURCE),
          },
          {
            name: 'category',
            label: $t('erm.kpi.indicator.grid.entity.category'),
            type: 'w-select',
            requiredIf: true,
            options: Options.dictionary(DICTIONARY_MAP.INDICATOR_CATEGORY),
          },
          {
            name: 'categoryCal',
            label: $t('erm.kpi.indicator.grid.entity.categoryCal'),
            type: 'w-select',
            clearable: true,
            options: Options.dictionary(DICTIONARY_MAP.INDICATOR_CATEGORY_CAL),
          },
          {
            name: 'categoryRisk',
            label: $t('erm.kpi.indicator.grid.entity.categoryRisk'),
            type: 'w-select',
            clearable: true,
            options: Options.dictionary(DICTIONARY_MAP.INDICATOR_CATEGORY_RISK),
          },
          {
            name: 'categoryBusiness',
            label: $t('erm.kpi.indicator.grid.entity.categoryBusiness'),
            type: 'w-select',
            clearable: true,
            options: Options.dictionary(DICTIONARY_MAP.INDICATOR_CATEGORY_BUSINESS),
          },
          {
            name: 'unit',
            label: $t('erm.kpi.indicator.grid.entity.unit'),
            type: 'w-select',
            options: Options.dictionary(DICTIONARY_MAP.INDICATOR_UNIT),
          },
          {
            name: 'frequency',
            label: $t('erm.kpi.indicator.grid.entity.frequency'),
            type: 'w-select',
            options: Options.dictionary(DICTIONARY_MAP.INDICATOR_FREQUENCY),
          },
          { name: 'formula', label: $t('erm.kpi.indicator.grid.entity.formula'), type: 'w-code-mirror', colSpan: 3, rows: 3 },
          { name: 'sql', label: $t('erm.kpi.indicator.grid.entity.sql'), type: 'w-code-mirror', colSpan: 3, rows: 3 },
          {
            name: 'superviseSource',
            label: $t('erm.kpi.indicator.grid.entity.superviseSource'),
            type: 'w-text',
          },
          {
            name: 'superviseCondition',
            label: $t('erm.kpi.indicator.grid.entity.superviseCondition'),
            type: 'w-select',
            options: CONDITIONS,
          },
          {
            name: 'superviseValue',
            label: $t('erm.kpi.indicator.grid.entity.superviseValue'),
            type: 'w-number',
          },
        ],
      },
    }"
    :viewer="{
      panel: {
        columnNum: 1,
        fields: [
          { name: 'id', label: $t('id') },
          { name: 'code', label: $t('code') },
          { name: 'name', label: $t('name') },
          { name: 'description', label: $t('description') },
          { name: 'enable', label: $t('enable'), format: Formater.none() },
          { name: 'category', label: $t('erm.kpi.indicator.grid.entity.category'), format: Formater.none() },
          { name: 'categoryRisk', label: $t('erm.kpi.indicator.grid.entity.categoryRisk'), format: Formater.none() },
          { name: 'categoryBusiness', label: $t('erm.kpi.indicator.grid.entity.categoryBusiness'), format: Formater.none() },
          { name: 'categoryCal', label: $t('erm.kpi.indicator.grid.entity.categoryCal'), format: Formater.none() },
          { name: 'unit', label: $t('erm.kpi.indicator.grid.entity.unit'), format: Formater.none() },
          { name: 'frequency', label: $t('erm.kpi.indicator.grid.entity.frequency'), format: Formater.none() },
          { name: 'source', label: $t('erm.kpi.indicator.grid.entity.source'), format: Formater.none() },
          { name: 'formula', label: $t('erm.kpi.indicator.grid.entity.formula') },
          { name: 'sql', label: $t('erm.kpi.indicator.grid.entity.sql') },
          { name: 'superviseSource', label: $t('erm.kpi.indicator.grid.entity.superviseSource') },
          { name: 'superviseCondition', label: $t('erm.kpi.indicator.grid.entity.superviseCondition') },
          { name: 'superviseValue', label: $t('erm.kpi.indicator.grid.entity.superviseValue') },

          { name: 'dataComeFrom', label: $t('dataComeFrom') },
          { name: 'creator', label: $t('creator') },
          { name: 'createDate', label: $t('createDate') },
          { name: 'lastModifier', label: $t('lastModifier') },
          { name: 'lastModifyDate', label: $t('lastModifyDate'), format: Formater.none() },
          { name: 'corporationCode', label: $t('corporationCode') },
        ],
      },
    }"
    @row-click="(args) => {}"
  ></w-grid>
</template>
<script setup lang="ts">
import 'tailwindcss/utilities.css';
import { ref } from 'vue';
import { Environment, DictionaryTools, Formater, Options, Tools } from 'platform-core';
import IndicatorStatus from './IndicatorStatus';

const gridRef = ref();

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