platform/erm.frontend/src/views/appetite/spread/Spread.vue

<template>
  <div style="height: 100%">
    <w-grid
      ref="gridRef"
      :title="$t('erm.appetite.spread.grid.title')"
      :config-button="true"
      selection="multiple"
      :checkbox-selection="true"
      :data-url="Environment.apiContextPath('/api/erm/appetite/spread')"
      :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: 'year', label: $t('year'), type: 'w-text' },
      ]"
      :pagination="{
        sortBy: 'lastModifyDate',
        descending: true,
      }"
      :toolbar-configure="{ noIcon: false }"
      :toolbar-actions="[
        'query',
        'refresh',
        'separator',
        'add',
        'clone',
        'edit',
        'remove',
        'separator',
        {
          name: 'detail',
          label: $t('detail'),
          icon: 'bi-chat-square-text',
          enableIf: (arg) => {
            return arg.selected;
          },
          click: (arg) => {
            spreadDialogRef.open(arg.selected.id);
          },
        },
        'separator',
        'view',
        'separator',
        'export',
      ]"
      :columns="[
        { width: 150, name: 'code', label: $t('code') },
        { width: 200, name: 'name', label: $t('name') },
        { width: '100%', name: 'description', label: $t('description') },
        { width: 100, name: 'year', label: $t('year') },
        { width: 150, name: 'crossValidateCode', label: $t('erm.appetite.spread.grid.entity.crossValidateCode') },
        { width: 150, name: 'crossValidateName', label: $t('erm.appetite.spread.grid.entity.crossValidateName') },
        { width: 100, name: 'lastModifier', label: $t('lastModifier') },
        { width: 110, name: 'lastModifyDate', label: $t('lastModifyDate'), format: Formater.dateOnly() },
      ]"
      :editor="{
        dialog: {
          width: '600px',
        },
        form: {
          colsNum: 1,
          fields: [
            { name: 'code', label: $t('code'), type: 'w-text', requiredIf: true },
            { name: 'name', label: $t('name'), type: 'w-text', requiredIf: true },
            { name: 'description', label: $t('description'), colSpan: 3, type: 'w-textarea', rows: 3 },
            {
              name: 'year',
              label: $t('year'),
              type: 'w-date',
              defaultView: 'Years',
            },
            { name: 'crossValidate', label: $t('erm.appetite.spread.grid.entity.crossValidate'), type: 'w-select', options: crossValidateOptionsRef },
          ],
        },
      }"
      :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: 'year', label: $t('year') },
            { name: 'crossValidateId', label: $t('erm.appetite.spread.grid.entity.crossValidateId') },
            { name: 'crossValidateCode', label: $t('erm.appetite.spread.grid.entity.crossValidateCode') },
            { name: 'crossValidateName', label: $t('erm.appetite.spread.grid.entity.crossValidateName') },
            { 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') },
          ],
        },
      }"
    ></w-grid>
    <SpreadDialog ref="spreadDialogRef"></SpreadDialog>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { axios, Environment, Formater } from 'platform-core';
import SpreadDialog from './SpreadDialog.vue';

const gridRef = ref();
const spreadDialogRef = ref();
const crossValidateOptionsRef = ref([]);

axios.get(Environment.apiContextPath('/api/erm/appetite/crossValidate?pageable=false')).then((response) => {
  const items = response?.data?.content;
  const crossValidateOptions = [];
  if (items) {
    for (const item of items) {
      crossValidateOptions.push({
        value: item.id,
        label: item.name + '(' + item.code + ')',
      });
    }
  }
  crossValidateOptionsRef.value = crossValidateOptions;
});
</script>