platform/io.sc.standard.frontend/src/views/standard/FinancialReportingSubject.vue

<template>
  <q-splitter :model-value="50" unit="px" separator-style="height: 1px;" horizontal class="w-full" style="height: 100%" disable>
    <template #before>
      <w-form
        v-model="modelValue"
        :cols-num="10"
        :fields="[
          {
            colSpan: 3,
            type: 'w-empty',
          },
          {
            colSpan: 2,
            name: 'standard',
            label: $t('standard.financialReportingSubject.grid.entity.standard'),
            type: 'w-select',
            options: Options.enum(Enums.FinancialReportingStandard),
            defaultValue: modelValue.standard,
            onUpdateValue: (args: any) => {
              standardChanged(args.value);
            },
          },
          {
            colSpan: 2,
            name: 'type',
            label: $t('standard.financialReportingSubject.grid.entity.type'),
            type: 'w-select',
            options: Options.enum(Enums.FinancialReportingType),
            defaultValue: modelValue.type,
            onUpdateValue: (args: any) => {
              typeChanged(args.value);
            },
          },
          {
            colSpan: 3,
            name: 'category',
            label: $t('standard.financialReportingSubject.grid.entity.category'),
            type: 'w-select',
            options: categoryOptionsRef,
            defaultValue: modelValue.category,
            onUpdateValue: (args: any) => {
              categoryChanged(args.value);
            },
          },
        ]"
      >
      </w-form>
    </template>
    <template #after>
      <w-grid
        ref="gridRef"
        :title="$t('io.sc.standard.api.enums.FinancialReportingSubjectCategory.' + modelValue.category)"
        :hide-bottom="false"
        :config-button="true"
        selection="multiple"
        :checkbox-selection="true"
        db-click-operation="edit"
        dnd-mode="server"
        dnd-order-by="row"
        :tree="false"
        dense
        :fetch-data-url="
          Environment.apiContextPath(
            '/api/standard/FinancialReportingSubject?standard=' + modelValue.standard + '&type=' + modelValue.type + '&category=' + modelValue.category,
          )
        "
        :data-url="Environment.apiContextPath('/api/standard/FinancialReportingSubject')"
        :pageable="false"
        :sort-by="['row']"
        :toolbar-configure="{ noIcon: false }"
        :toolbar-actions="[
          'query',
          'refresh',
          'separator',
          {
            extend: 'add',
            afterClick: (args: any) => {
              args.grid.getEditorForm().setFieldValue('standard', modelValue.standard);
              args.grid.getEditorForm().setFieldValue('type', modelValue.type);
              args.grid.getEditorForm().setFieldValue('category', modelValue.category);
            },
          },
          'edit',
          'remove',
          'separator',
          'view',
          'separator',
          'export',
        ]"
        :query-form-cols-num="4"
        :query-form-fields="[
          { name: 'code', label: $t('standard.entity.code'), type: 'w-text', clearable: true },
          { name: 'name', label: $t('standard.entity.name'), type: 'w-text', clearable: true },
          { name: 'mappingCode', label: $t('standard.entity.mappingCode'), type: 'w-text', clearable: true },
          { name: 'mappingName', label: $t('standard.entity.mappingName'), type: 'w-text', clearable: true },
        ]"
        :columns="[
          {
            name: 'target',
            label: $t('standard.entity.target'),
            columns: [
              {
                width: 200,
                name: 'name',
                label: $t('name'),
                title: (value: any, row: any) => {
                  return value;
                },
                html: true,
                format: (value: any, row: any) => {
                  if (value) {
                    if (!Tools.isNill(row.tab)) {
                      return '<span style=\'padding-left:' + row.tab * 20 + 'px;\'>' + value + '</span>';
                    }
                  }
                  return value;
                },
              },
              { width: 150, name: 'code', label: $t('code') },
            ],
          },
          {
            name: 'source',
            label: $t('standard.entity.source'),
            columns: [
              {
                width: 200,
                name: 'mappingName',
                label: $t('name'),
                title: (value: any, row: any) => {
                  return value;
                },
                html: true,
                format: (value: any, row: any) => {
                  if (value) {
                    if (!Tools.isNill(row.tab)) {
                      return '<span style=\'padding-left:' + row.tab * 20 + 'px;\'>' + value + '</span>';
                    }
                  }
                  return value;
                },
              },
              { width: 150, name: 'mappingCode', label: $t('code') },
            ],
          },
        ]"
        :editor="{
          dialog: {
            width: '800px',
          },
          form: {
            colsNum: 1,
            fields: [
              { name: 'standard', label: $t('standard'), type: 'w-text', showIf: false },
              { name: 'type', label: $t('type'), type: 'w-text', showIf: false },
              { name: 'category', label: $t('category'), type: 'w-text', showIf: false },
              { name: 'row', label: $t('rowNumber'), type: 'w-integer', requiredIf: true },
              { name: 'tab', label: $t('tab'), type: 'w-integer', requiredIf: true },
              { name: 'hasValue', label: $t('standard.financialReportingSubject.grid.entity.hasValue'), type: 'w-checkbox', defaultValue: true },
              { name: 'code', label: $t('standard.entity.code'), type: 'w-text', requiredIf: true },
              { name: 'name', label: $t('standard.entity.name'), type: 'w-text', requiredIf: true },
              { name: 'ename', label: $t('standard.entity.ename'), type: 'w-text' },
              { name: 'description', label: $t('standard.entity.description'), type: 'w-textarea', rows: 5 },

              { name: 'mappingCode', label: $t('standard.entity.mappingCode'), type: 'w-text' },
              { name: 'mappingName', label: $t('standard.entity.mappingName'), type: 'w-text' },
              { name: 'mappingDescription', label: $t('standard.entity.mappingDescription'), type: 'w-textarea', rows: 5 },
            ],
          },
        }"
        :viewer="{
          panel: {
            columnNum: 1,
            fields: [
              { name: 'id', label: $t('id') },
              { name: 'category', label: $t('category') },
              { name: 'row', label: $t('row') },
              { name: 'code', label: $t('standard.entity.code') },
              { name: 'name', label: $t('standard.entity.name') },
              { name: 'ename', label: $t('standard.entity.ename') },
              { name: 'description', label: $t('standard.entity.description') },
              { name: 'mappingCode', label: $t('standard.entity.mappingCode') },
              { name: 'mappingName', label: $t('standard.entity.mappingName') },
              { name: 'mappingDescription', label: $t('standard.entity.mappingDescription') },

              { 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() },
            ],
          },
        }"
      ></w-grid>
    </template>
  </q-splitter>
</template>
<script setup lang="ts">
import 'tailwindcss/utilities.css';
import { ref, reactive } from 'vue';
import { $t, Environment, Tools, Formater, EnumTools, Options } from 'platform-core';

const modelValue = reactive({
  standard: 'NEW',
  type: 'COMPANY',
  category: 'COMPANY_ASSETS',
});

const gridRef = ref();
const categoryOptionsRef = ref<any[]>([]);
const companyCategoryOptionsRef = ref<any[]>([]);
const institutionCategoryOptionsRef = ref<any[]>([]);

const standardChanged = (standard: string) => {
  gridRef.value?.refresh();
};

const typeChanged = (type: string) => {
  if (type === 'COMPANY') {
    categoryOptionsRef.value = companyCategoryOptionsRef.value;
  } else if (type === 'INSTITUTION') {
    categoryOptionsRef.value = institutionCategoryOptionsRef.value;
  }
  modelValue.category = categoryOptionsRef.value[0].value;
  gridRef.value?.refresh();
};

const categoryChanged = (category: string) => {
  gridRef.value?.refresh();
};

const Enums = await EnumTools.fetch([
  'io.sc.standard.api.enums.FinancialReportingStandard',
  'io.sc.standard.api.enums.FinancialReportingType',
  'io.sc.standard.api.enums.FinancialReportingSubjectCategory',
]);

for (const item of Enums.FinancialReportingSubjectCategory.items) {
  if (item.value.startsWith('COMPANY')) {
    companyCategoryOptionsRef.value.push({ value: item.value, label: $t(item.label) });
  } else if (item.value.startsWith('INSTITUTION')) {
    institutionCategoryOptionsRef.value.push({ value: item.value, label: $t(item.label) });
  }
}

typeChanged('COMPANY');
</script>