platform/io.sc.platform.system.frontend/src/views/parameter/Parameter.vue

<template>
  <w-grid
    ref="treeGridRef"
    :title="$t('system.parameter.grid.title')"
    :config-button="true"
    selection="multiple"
    :checkbox-selection="false"
    :tree="true"
    :tree-icon="
      (row) => {
        return { name: 'folder', color: 'amber' };
      }
    "
    default-expand-all
    db-click-operation="edit"
    :data-url="Environment.apiContextPath('/api/system/parameter')"
    :pageable="false"
    :toolbar-configure="{ noIcon: false }"
    :toolbar-actions="[
      'refresh',
      'separator',
      'expand',
      {
        extend: 'edit',
        enableIf: (arg) => {
          if (arg.selected) {
            return !Tools.isUndefinedOrNull(arg.selected.value);
          }
          return false;
        },
      },
      'separator',
      {
        extend: 'view',
        enableIf: (arg) => {
          if (arg.selected) {
            return !Tools.isUndefinedOrNull(arg.selected.value);
          }
          return false;
        },
      },
      'separator',
      'export',
    ]"
    :columns="[
      {
        width: 300,
        name: 'name',
        label: $t('name'),
        sortable: false,
        format: (value, row) => {
          return $t(row.code);
        },
      },
      { width: 300, name: 'code', label: $t('code') },
      { width: '100%', name: 'value', label: $t('value') },
    ]"
    :editor="{
      dialog: {
        width: '600px',
        buttons: [
          {
            name: 'resetDefaultValues',
            label: $t('resetDefaultValues'),
            noCaps: true,
            click: () => {
              const row = treeGridRef.getSelectedRow();
              if (row) {
                if (isExistsOptions()) {
                  treeGridRef.getEditorForm().setFieldValue('valueSelect', row.defaultValue);
                } else {
                  treeGridRef.getEditorForm().setFieldValue('valueInput', row.defaultValue);
                }
              }
            },
          },
        ],
      },
      form: {
        colsNum: 1,
        fields: [
          {
            name: 'title',
            label: $t('name'),
            type: 'w-text',
            readOnlyIf: () => {
              return true;
            },
          },
          {
            name: 'code',
            label: $t('code'),
            type: 'w-text',
            readOnlyIf: () => {
              return true;
            },
          },
          {
            name: 'valueInput',
            label: $t('value'),
            type: 'w-text',
            showIf: (arg) => {
              return !isExistsOptions();
            },
          },
          {
            name: 'valueSelect',
            label: $t('value'),
            type: 'w-select',
            showIf: (arg) => {
              return isExistsOptions();
            },
            options: optionsRef,
            useInput: true,
            fillInput: true,
            hideSelected: true,
            inputDebounce: 0,
            onInputValue: (value) => {
              treeGridRef.getEditorForm().setFieldValue('valueSelect', value);
            },
          },
        ],
      },
    }"
    :viewer="{
      panel: {
        columnNum: 1,
        fields: [
          { name: 'id', label: $t('id') },
          { name: 'code', label: $t('code') },
          { name: 'value', label: $t('value') },
          { name: 'order', label: $t('order') },
          { name: 'parent', label: $t('parent') },
          { 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) => {
        changeOptions();
      }
    "
    @after-editor-open="
      (args) => {
        treeGridRef.getEditorForm().setFieldValue('title', t(args.data.code));
        if (isExistsOptions()) {
          treeGridRef.getEditorForm().setFieldValue('valueSelect', args.data.value);
        } else {
          treeGridRef.getEditorForm().setFieldValue('valueInput', args.data.value);
        }
      }
    "
    @before-editor-data-submit="
      (args) => {
        if (isExistsOptions()) {
          args.data.value = treeGridRef.getEditorForm().getFieldValue('valueSelect');
        } else {
          args.data.value = treeGridRef.getEditorForm().getFieldValue('valueInput');
        }
        args.callback(args.data);
      }
    "
  ></w-grid>
</template>
<script setup lang="ts">
import 'tailwindcss/utilities.css';
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { Environment, Tools, Formater } from 'platform-core';

const { t } = useI18n();
const treeGridRef = ref();
const optionsRef = ref([]);

const changeOptions = () => {
  optionsRef.value.splice(0, optionsRef.value.length);
  const row = treeGridRef.value.getSelectedRow();
  if (row) {
    for (const key in row.options) {
      optionsRef.value.push({ label: t(row.options[key]), value: key });
    }
  }
};

const isExistsOptions = () => {
  const row = treeGridRef.value.getSelectedRow();
  if (row) {
    return row.options && Object.keys(row.options).length > 0;
  }
  return false;
};
</script>