global-web/src/views/publicComponents/SelectShipSModal.vue

<template>
    <a-modal
      title="选择船(select ship)"
      width="95%"
      :visible="visible"
      :maskClosable="false"
      :destroyOnClose="true"
      switchFullscreen
      @ok = "handleOk"
      @cancel="handleCancel">
      <div>
            <!--引用表格-->
        <BasicTable @register="registerTable" :rowSelection="rowSelection" size="small"></BasicTable>
        </div>
      </a-modal>
</template>
<script lang="ts" name="baseCode-baseShipArchive" setup>
  import {ref, reactive } from 'vue';
  import {BasicTable, useTable, TableAction} from '/@/components/Table';
  import { useListPage } from '/@/hooks/system/useListPage'
  import {columns, searchFormSchema} from './components/BaseShipArchive.data';
  import {list} from './components/BaseShipArchive.api';
  import { useMessage } from '/@/hooks/web/useMessage';
  const queryParam = reactive<any>({});
  var visible = ref(false);
  const emit = defineEmits([ 'select']); //定义emit
  //注册model
  const { createMessage} = useMessage();
  //注册table数据
  const { tableContext} = useListPage({
      tableProps:{
           api:list,
           columns,
           canResize:false,
           formConfig: {
              schemas: searchFormSchema,
              autoSubmitOnEnter:true,
              showAdvancedButton:true,
              fieldMapToNumber: [
              ],
              fieldMapToTime: [
                 ['shipDate', ['shipDate_begin', 'shipDate_end'], 'YYYY-MM-DD HH:mm:ss'],
              ],
            },
           showTableSetting:false,
           showActionColumn:false,
           actionColumn: {
               width: 200,
               fixed:'right'
            },
            beforeFetch: (params) => {
              return Object.assign(params, queryParam);
            },
      }
  })

  const [registerTable, {reload},{ rowSelection, selectedRowKeys }] = tableContext
  
  function handleCancel() {
    visible.value = false;
    selectedRowKeys.value = []
  }
    function handleOk() {
        if(selectedRowKeys.value.length==0){
            createMessage('请选择数据')
        }else{
            emit('select',rowSelection.selectedRows)
            handleCancel()
        }  
    }
   function getTable(){
    visible.value = true
   }
   defineExpose({
    getTable
  });


</script>

<style lang="less" scoped>
  :deep(.ant-picker),:deep(.ant-input-number){
    width: 100%;
  }
</style>