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

<template>
  <BasicModal
    width="800px"
    :title="t('component.upload.choose')"
    v-bind="$attrs"
    @register="register"
    :showOkBtn="false"
    cancelText="关闭"
  >
    <a-button type="primary" preIcon="mdi:reload" iconSize="20" @click="reload" />
    <a-button
      v-if="type === 'images'"
      class="check-btn"
      :disabled="disable_btn"
      type="success"
      preIcon="fa-solid:check"
      @click="checkedBatches"
      >{{ t('component.upload.choose') }}</a-button
    >
    <BasicTable
      ref="tableRef"
      @register="registerTable"
      @selectionChange="selectionChange"
      @rowClick="selectionChange"
      rowKey="id"
    >
      <template #action="{ record, column }">
        <TableAction :actions="createActions(record, column)" />
      </template>
    </BasicTable>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, reactive, ref, toRefs, unref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { adapt } from '/@/utils/adapt';
  import { useI18n } from '/@/hooks/web/useI18n';
  import {
    BasicTable,
    useTable,
    TableAction,
    ActionItem,
    EditRecordRow,
    TableActionType,
  } from '/@/components/Table';
  import { columns } from './chooseModalData';
  interface Btn {
    disable_btn: boolean;
  }
  const fakeData = [
    {
      id: 1,
      imgUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      imagewidth: 120,
      imageheight: 120,
      createtime: '2020-10-20 21:22:22',
    },
    {
      id: 2,
      imgUrl: 'http://jetbill.cn/uploads/20210713/a05d360766d30868cdb878b4c0aac77d.jpg',
      imagewidth: 120,
      imageheight: 120,
    },
    {
      id: 3,
      imgUrl: 'http://jetbill.cn/uploads/20210712/51ae92cdb0bb22a88d6e73e62bcb1cad.jpg',
      imagewidth: 120,
      imageheight: 120,
    },
  ];
  const props = {
    value: { type: String, default: '' },
    type: { type: String, default: '' },
  };

  export default defineComponent({
    components: { BasicModal, BasicTable, TableAction },
    props,
    emits: ['checked', 'checkedBatches'],
    setup(props, { emit }) {
      const { t } = useI18n();
      const tableRef = ref<Nullable<TableActionType>>(null);
      const adaptWidth = adapt();
      const [register, { closeModal }] = useModalInner();
      const btn = reactive<Btn>({
        disable_btn: true,
      });
      const [registerTable] = useTable({
        // title: '管理员日志',
        // titleHelpMessage: '',
        rowSelection: { type: 'checkbox' },
        columns: columns,
        // clickToRowSelect: false, // 点击行不勾选
        // api: getUserList,
        dataSource: fakeData,
        actionColumn: {
          width: 80,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
          fixed: undefined,
        },
        showIndexColumn: false,
        bordered: true,
      });
      function getTableAction() {
        // 获取组件
        const tableAction = unref(tableRef);
        if (!tableAction) {
          throw new Error('tableAction is null');
        }
        return tableAction;
      }
      function reload() {
        console.log('========reload======');
      }

      function selectionChange() {
        const keys = getTableAction().getSelectRowKeys();
        if (keys.length) {
          btn.disable_btn = false;
        } else {
          btn.disable_btn = true;
        }
      }

      function handleChecked(record) {
        console.log(`record`, record);
        emit('checked', record.id, closeModal);
      }
      async function checkedBatches() {
        const keys = await getTableAction().getSelectRowKeys();
        emit('checkedBatches', keys, closeModal);
      }

      function createActions(record: EditRecordRow): ActionItem[] {
        return [
          {
            label: '选择',
            icon: 'fa-solid:check',
            color: 'success',
            onClick: handleChecked.bind(null, record),
          },
        ];
      }

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