platform/io.sc.engine.rule.frontend/src/views/resources/AttachmentDialog.vue

<template>
  <w-dialog ref="dialogRef" :title="$t('re.resources.dialog.attachment.title')" width="900px" :can-maximize="false">
    <div class="px-2">
      <w-grid
        ref="gridRef"
        :height="300"
        :title="$t('re.resources.dialog.attachment.grid.title')"
        selection="multiple"
        :full-screen-button="false"
        :toolbar-configure="{ noIcon: false }"
        :toolbar-actions="[
          'refresh',
          'add',
          'remove',
          {
            name: 'download',
            label: $t('download'),
          },
        ]"
        :query-form-fields="[]"
        :auto-fetch-data="false"
        :fetch-data-url="fetchDataUrl + '?' + foreignKey + '=' + foreignValue"
        :data-url="dataUrl"
        :columns="[
          { width: 120, name: 'id', label: $t('id'), hidden: true },
          { width: 200, name: 'name', label: $t('name') },
          { width: '100%', name: 'description', label: $t('description') },
          { width: 100, name: 'lastModifier', label: $t('lastModifier') },
          { width: 120, name: 'lastModifyDate', label: $t('lastModifyDate'), format: Formater.dateOnly() },
        ]"
        :editor="{
          dialog: {
            width: '600px',
            height: '300px',
          },
          form: {
            colsNum: 1,
            fields: [
              { name: 'bussinessKey', label: $t('bussinessKey'), type: 'text', defaultValue: foreignValue, hidden: true },
              { name: 'name', label: $t('re.resources.grid.entity.name'), type: 'text', required: true },
              { name: 'description', label: $t('re.resources.grid.entity.description'), type: 'text' },
              { name: 'file', label: $t('re.resources.dialog.attachment.grid.entity.file'), type: 'file' },
            ],
          },
        }"
      ></w-grid>
    </div>
  </w-dialog>
</template>
<script setup lang="ts">
import { ref, nextTick } from 'vue';
import { useI18n } from 'vue-i18n';
import { Environment, Tools, EnumTools, Options, Formater } from 'platform-core';

const props = defineProps({
  opener: { type: Object, default: undefined },
  fetchDataUrl: { type: String, default: '' },
  dataUrl: { type: String, default: '' },
  foreignKey: { type: String, default: '' },
  foreignValue: { type: String, default: '' },
});

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

const open = (foreignKey: string) => {
  foreignKeyRef.value = foreignKey;
  dialogRef.value.show();

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

const close = () => {
  dialogRef.value.hide();
};

defineExpose({
  open,
  close,
});
</script>