platform/io.sc.platform.system.frontend/src/views/shared/SelectMenuTreeGrid.vue

<template>
  <w-grid
    ref="treeGridRef"
    :title="$t('system.shared.selectMenu.grid.title')"
    hide-bottom
    :config-button="false"
    :tree="true"
    selection="multiple"
    :checkbox-selection="true"
    tree-tick-strategy="strict"
    :tree-icon="
      (row) => {
        if (row.type === 'SEPARATOR') {
          return { name: 'bi-dash-lg' };
        } else if (row.type === 'ROUTE_ACTION') {
          return { name: 'sym_o_crop_16_9' };
        } else {
          return { name: row.icon };
        }
      }
    "
    :fetch-data-url="fetchDataUrl + '?' + foreignKey + '=' + foreignValue"
    :auto-fetch-data="false"
    :pageable="false"
    :toolbar-configure="{ noIcon: false }"
    :toolbar-actions="[
      'refresh',
      'separator',
      {
        extend: 'expand',
        enableIf: () => {
          return foreignValue && treeGridRef?.getRows()?.length > 0;
        },
      },
      {
        name: 'save',
        label: $t('save'),
        icon: 'bi-floppy',
        enableIf: () => {
          return foreignValue && treeGridRef?.getRows()?.length > 0;
        },
        click: (arg) => {
          DialogManager.confirm($t('system.shared.selectMenu.grid.toolbar.save.tip'), () => {
            const ids = Tools.extractProperties(treeGridRef.getTickedRows(true), 'id');
            emit('update', ids, treeGridRef);
          });
        },
      },
      'separator',
      'view',
    ]"
    :columns="[
      {
        width: '100%',
        name: 'titleI18nKey',
        label: $t('name'),
        sortable: false,
        format: (value, row) => {
          if (row.type === 'SEPARATOR') {
            return `<hr style='width:100px'/>`;
          } else if (row.type === 'ROUTE_ACTION') {
            return $t(row.i18nKey);
          } else {
            return $t(value);
          }
        },
      },
      { width: 100, name: 'enable', label: $t('status'), format: Formater.enableTag(), sortable: false },
    ]"
    :viewer="{
      panel: {
        columnNum: 1,
        fields: [
          { name: 'id', label: $t('id') },
          { name: 'type', label: $t('type') },
          { name: 'name', label: $t('name') },
          { name: 'titleI18nKey', label: $t('titleI18nKey') },
          { name: 'icon', label: $t('icon') },
          { name: 'enable', label: $t('enable') },
          { name: 'order', label: $t('order') },
          { name: 'javaScript', label: $t('javaScript') },
          { name: 'url', label: $t('url') },
          { name: 'urlOpenType', label: $t('urlOpenType') },
          { name: 'routeName', label: $t('routeName') },
          { name: 'routeQuery', label: $t('routeQuery') },
          { 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') },
          { name: 'corporationCode', label: $t('corporationCode') },
        ],
      },
    }"
  ></w-grid>
</template>
<script setup lang="ts">
import { ref, onMounted, onUpdated } from 'vue';
import { DialogManager, Formater, Tools } from 'platform-core';

defineProps({
  fetchDataUrl: { type: String, default: '' },
  foreignKey: { type: String, default: '' },
  foreignValue: { type: String, default: '' },
});

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

const treeGridRef = ref();

const refresh = () => {
  treeGridRef.value.refresh();
};

defineExpose({
  refresh,
});
</script>