ant-vue-admin/src/views/general/attachment/index.vue

<template>
  <CollapseContainer
    class="attachment-container"
    title="附件管理"
    :canExpan="false"
    helpMessage="主要用于管理上传到服务器或第三方存储的数据"
  >
    <a-button type="default" class="mr-2"> 全部 </a-button>
    <a-button type="default" class="mr-2"> 图片 </a-button>
    <a-button type="default" class="mr-2"> 音频 </a-button>
    <a-button type="default" class="mr-2"> 视频 </a-button>
    <a-button type="default" class="mr-2"> 文档 </a-button>
    <a-button type="default" class="mr-2"> 应用 </a-button>
    <a-button type="default" class="mr-2"> 压缩包 </a-button>
    <BasicTable ref="tableRef" :canResize="true" @register="registerTable" showTableSetting>
      <template #action="{ record, column }">
        <TableAction :actions="createActions(record, column)" stopButtonPropagation />
      </template>
      <template #toolbar>
        <div class="tool-btn-wrap">
          <a-upload
            :showUploadList="false"
            :multiple="false"
            :before-upload="beforeUpload"
            @change="handleChange"
          >
            <a-button type="primary" :disabled="disabled">
              {{ t('component.upload.upload') }}
            </a-button>
          </a-upload>
          <a-button color="error" @click="deleteBatches">
            {{ t('common.delText') }}
          </a-button>
        </div>
      </template>
    </BasicTable>
  </CollapseContainer>
</template>
<script lang="ts">
  import { useMessage } from '/@/hooks/web/useMessage';
  import { defineComponent, nextTick, reactive, ref, toRefs, unref } from 'vue';
  // import Upload from '/@/components/customComponents/upload.vue';
  import { Upload, Progress, Modal } from 'ant-design-vue';
  import { CollapseContainer } from '/@/components/Container/index';
  import { adapt } from '/@/utils/adapt';
  import { useI18n } from '/@/hooks/web/useI18n';
  import {
    BasicTable,
    useTable,
    TableAction,
    ActionItem,
    EditRecordRow,
    TableActionType,
  } from '/@/components/Table';
  import { columns } from './data';
  import { getAttachmentList } from '/@/api/sys/general';
  import { uploadApi } from '/@/api/sys/upload';

  export default defineComponent({
    name: 'Attchment',
    components: {
      CollapseContainer,
      BasicTable,
      TableAction,
      [Upload.name]: Upload,
      [Modal.name]: Modal,
      [Progress.name]: Progress,
    },
    setup() {
      const { t } = useI18n();
      const { createMessage } = useMessage();
      const { success, error } = createMessage;
      const tableHeight = adapt().tableHeight;
      const state = reactive({
        groupList: [] as object[],
        group: 'basic',
        disabled: false,
      });
      const tableRef = ref<Nullable<TableActionType>>(null);
      const [registerTable] = useTable({
        columns: columns,
        maxHeight: tableHeight,
        afterFetch: afterFetch,
        api: getAttachmentList,
        actionColumn: {
          width: 160,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
          fixed: undefined,
        },
        showIndexColumn: false,
        pagination: true,
      });
      function afterFetch(res) {
        console.log(`res`, res);
      }
      function beforeUpload(file) {
        uploadApi({ file })
          .then((res) => {
            console.log(`res`, res);
            success('文件上传成功');
            getTableAction().reload();
          })
          .catch((err) => {
            error('文件上传失败');
            console.log(`err`, err);
          });
        return false;
      }

      function getTableAction() {
        // 获取组件
        const tableAction = unref(tableRef);
        if (!tableAction) {
          throw new Error('tableAction is null');
        }
        return tableAction;
      }

      function handleChange(info) {
        console.log(`info`, info);
      }

      async function handleGroupBtn(group) {
        await nextTick();
        getTableAction().reload();
        state.group = group.toLowerCase();
      }

      function handleTableReset() {
        getTableAction().reload();
      }

      async function handleEdit(record: Recordable) {
        console.log(`record`, record);
        console.log('=====编辑');
      }
      async function handleDelete(record: Recordable) {
        console.log(`record`, record);
        console.log('删除=====');
      }

      function createActions(record: EditRecordRow): ActionItem[] {
        return [
          {
            label: '编辑',
            icon: 'ant-design:edit-outlined',
            color: 'warning',
            onClick: handleEdit.bind(null, record),
          },
          {
            label: '删除',
            color: 'error',
            icon: 'ic:outline-delete-outline',
            popConfirm: {
              title: '是否确认删除',
              confirm: handleDelete.bind(null, record),
            },
          },
        ];
      }
      return {
        t,
        createActions,
        tableRef,
        registerTable,
        beforeUpload,
        handleChange,
        handleGroupBtn,
        handleTableReset,
        ...toRefs(state),
      };
    },
  });
</script>
<style scoped>
  .attachment-container {
    position: relative;
  }

  .vben-collapse-container__body > .mr-2 {
    margin-top: 5px;
    font-weight: 550 !important;
  }

  /* .upload-progress {
    padding: 20px 30px;
  } */
  .vben-basic-table-header__toolbar {
    justify-content: space-between;
  }

  .tool-btn-wrap {
    flex: 1;
  }

  .tool-btn-wrap button {
    margin-right: 5px;
  }
</style>