ant-vue-admin/src/views/general/config/customComponents/ChooseModal.vue

<template>
  <BasicModal
    width="800px"
    title="选择图片"
    v-bind="$attrs"
    @register="register"
    cancelText="关闭"
    @ok="handleSumbit"
  >
    <BasicTable
      ref="tableRef"
      rowKey="id"
      @register="registerTable"
      :rowSelection="{ type: type === 'images' || type === 'files' ? 'checkbox' : 'radio' }"
    >
      <template #action="{ record, column }">
        <TableAction :actions="createActions(record, column)" />
      </template>
    </BasicTable>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, onUpdated, ref, toRefs, unref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicTable, useTable, TableAction, TableActionType } from '/@/components/Table';
  import { columns } from '../../attachment/data';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { getAttachmentList } from '/@/api/sys/general';

  const props = {
    value: { type: String, default: '' },
    type: { type: String, default: '' },
  };

  export default defineComponent({
    components: { BasicModal, BasicTable, TableAction },
    props,
    emits: ['checked'],
    setup(props, { emit }) {
      const { createMessage } = useMessage();
      const { error } = createMessage;
      const tableRef = ref<Nullable<TableActionType>>(null);
      const [register, { closeModal }] = useModalInner();

      const [registerTable] = useTable({
        columns: columns,
        api: getAttachmentList,
        showIndexColumn: false,
        bordered: true,
        maxHeight: 300,
      });
      function getTableAction() {
        // 获取组件
        const tableAction = unref(tableRef);
        if (!tableAction) {
          throw new Error('tableAction is null');
        }
        return tableAction;
      }

      async function handleSumbit() {
        const rows = await getTableAction().getSelectRows();
        if (rows.length) {
          emit('checked', rows);
          closeModal();
          getTableAction().clearSelectedRowKeys();
        } else {
          error('请先选择文件!');
        }
      }
      onUpdated(() => {
        document.onkeydown = function (e) {
          if (e.key === 'Enter') {
            handleSumbit();
          }
        };
      });

      return {
        register,
        tableRef,
        registerTable,
        handleSumbit,
        getTableAction,
        ...toRefs(props),
      };
    },
  });
</script>
<style lang="less">
  .check-btn {
    margin-left: 5px !important;
  }
</style>