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

<template>
  <w-grid
    ref="gridRef"
    :title="$t('system.shared.selectRole.grid.title')"
    :config-button="false"
    selection="multiple"
    :checkbox-selection="true"
    :fetch-data-url="fetchDataUrl + '?' + foreignKey + '=' + foreignValue"
    :auto-fetch-data="false"
    :toolbar-configure="{ noIcon: true }"
    :toolbar-actions="[
      'refresh',
      'separator',
      {
        name: 'addRoles',
        label: $t('system.shared.selectRole.grid.toolbar.add'),
        enableIf: () => {
          return foreignValue ? true : false;
        },
        click: () => {
          dialogRef.open(foreignValue);
        },
      },
      {
        name: 'removeRoles',
        label: $t('system.shared.selectRole.grid.toolbar.remove'),
        enableIf: () => {
          return foreignValue && gridRef?.getSelectedRows()?.length > 0;
        },
        click: (selecteds) => {
          const ids = Tools.extractProperties(selecteds, 'id');
          DialogManager.confirm($t('system.shared.selectRole.grid.toolbar.remove.tip'), () => {
            emit('remove', ids, gridRef);
          });
        },
      },
      'separator',
      {
        name: 'addAllRoles',
        label: $t('system.shared.selectRole.grid.toolbar.addAll'),
        enableIf: () => {
          return foreignValue ? true : false;
        },
        click: () => {
          DialogManager.confirm($t('system.shared.selectRole.grid.toolbar.addAll.tip'), () => {
            emit('addAll', gridRef);
          });
        },
      },
      {
        name: 'removeAllRoles',
        label: $t('system.shared.selectRole.grid.toolbar.removeAll'),
        enableIf: () => {
          return foreignValue && gridRef?.getRows()?.length > 0;
        },
        click: () => {
          DialogManager.confirm($t('system.shared.selectRole.grid.toolbar.removeAll.tip'), () => {
            emit('removeAll', gridRef);
          });
        },
      },
      'separator',
      'view',
    ]"
    :columns="[
      { width: 100, name: 'code', label: $t('code') },
      { width: 100, name: 'name', label: $t('name') },
      {
        width: 60,
        name: 'enable',
        label: $t('status'),
        format: Formater.enableTag(),
      },
    ]"
    :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.yesNo() },
          { name: 'dataComeFrom', label: $t('dataComeFrom'), format: Formater.enum(DataComeFromEnum) },
          { 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>
  <SelectRoleDialog
    ref="dialogRef"
    :opener="gridRef"
    :fetch-data-url="fetchOtherDataUrl"
    :foreign-key="foreignKey"
    :foreign-value="foreignValue"
    @after-selected="
      (ids: string[]) => {
        emit('add', ids, gridRef, dialogRef);
      }
    "
  ></SelectRoleDialog>
</template>
<script setup lang="ts">
import { ref, nextTick } from 'vue';
import { useI18n } from 'vue-i18n';
import { Environment, axios, EnumTools, NotifyManager, DialogManager, Formater, Options, Tools, OperatorTypeEnum } from 'platform-core';
import SelectRoleDialog from './SelectRoleDialog.vue';

const props = defineProps({
  fetchDataUrl: { type: String, default: '' },
  fetchOtherDataUrl: { type: String, default: '' },
  foreignKey: { type: String, default: '' },
  foreignValue: { type: String, default: '' },
});

const emit = defineEmits<{
  (e: 'add', ids: string[], gridComponent: any, dialogComponent: any): void;
  (e: 'remove', ids: string[], gridComponent: any): void;
  (e: 'addAll', gridComponent: any): void;
  (e: 'removeAll', gridComponent: any): void;
}>();

const gridRef = ref();
const dialogRef = ref();

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

defineExpose({
  refresh,
});

const DataComeFromEnum = await EnumTools.fetch('io.sc.platform.orm.api.enums.DataComeFrom');
</script>