global-web/src/views/saleCode/saleInquiryForm/components/SelecSaleInquiryModal.vue

<!-- //复制子表功能 -->
<template>
  <a-modal
    title="选择销售询价单(select sale inquiry)"
    width="95%"
    :visible="visible"
    :maskClosable="false"
    switchFullscreen
    @ok = "handleOk"
    @cancel="handleCancel">
      <div>
        <!-- <a-card  :body-style="{ padding: '10px' }" :bordered="false" style="margin: 10px;">
          <div class="table-page-search-wrapper">
              <a-form :model="queryParams" :label-col="labelCol" :wrapper-col="wrapperCol" @keyup.enter.native="searchQuery">

                </a-form>
            </div>
        </a-card> -->

      <a-card  >
          <a-alert type="info" show-icon class="alert" style="margin-bottom: 8px">
          <template #message>
              <template v-if="selectedRowKeys.length > 0">
              <span>已选中 {{ selectedRowKeys.length }} 条记录</span>
              <a-divider type="vertical" />
              <a @click="selectedRowKeys = []">清空</a>
              </template>
              <template v-else>
              <span>未选中任何数据</span>
              </template>
          </template>
          </a-alert>
          <a-table
              :columns="columns"
              :row-key="record => record.id"
              :data-source="dataSource"
              bordered
              size="small"
              @change="handleTableChange"
              :pagination="false"
              :scroll="{ x: 3500, y: 400 }"
              :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          >
          </a-table>
      </a-card>
    </div>
  </a-modal>
</template>
<script lang="ts" setup>
  import {ref, reactive } from 'vue';
  import { defHttp } from '/@/utils/http/axios';
  import { message } from 'ant-design-vue';
  import { filterObj, getFileAccessHttpUrl } from '/@/utils/common/compUtils';
  const emit = defineEmits([ 'copyProduct']); //定义emit
  var visible = ref(false)
  const columns = [
      {
          title: '产品英文名(english name)',
          dataIndex: 'englishName',
          key: 'englishName',
          align:"center",
          ellipsis:true
      },
      {
          title: '备件号(partno)',
          dataIndex: 'partno',
          key: 'productClass',
          align:"center"
      },
      {
          title: '产品中文名(chinese name)',
          key: 'chineseName',
          dataIndex: 'chineseName',
          align:"center"
      },
      {
          title: '产品编码(product code)',
          dataIndex: 'productCode',
          key: 'productCode',
          align:"center",
      },
      {
          title: '订货号(orderno)',
          key: 'orderno',
          dataIndex: 'orderno',
          align:"center"
      },
      {
          title: '图号(drawingno',
          key: 'drawingno',
          dataIndex: 'drawingno',
          align:"center",
          width:250
      },
      {
          title: '质量等级(quality grade)',
          key: 'qualityGrade',
          dataIndex: 'qualityGrade',
          align:"center",
      },
      {
          title: '数量(quantity)',
          key: 'quantity',
          dataIndex: 'quantity',
          align:"center",
      },
      {
          title: '单位(unit)',
          key: 'unit',
          dataIndex: 'unit',
          align:"center",
      },
      {
          title: '需要船检证书(need Ship inspection c',
          key: 'needShip',
          dataIndex: 'needShip',
          align:"center",
      },
      {
          title: '船检证书(ship Inspection certificate)',
          key: 'shipInspection',
          dataIndex: 'shipInspection',
          align:"center",
      },
      {
          title: '备注(note)',
          key: 'note',
          dataIndex: 'note',
          align:"center",
      },
      {
          title: '型号(model)',
          key: 'model',
          dataIndex: 'model',
          align:"center",
      },
  ];
  const labelCol = ref({
      xs: { span: 24 },
      sm: { span: 9 },
  });
  const wrapperCol = ref({
      xs: { span: 24 },
      sm: { span: 15 },
  });
  const dataSource =ref([]);
  let selectedRowKeys = ref([]);
  let selectedRows = ref([]);
  const toggleSearchStatus = ref(false);
  var mainId = ref('')
  const queryParams = ref({
      productionClass:'',
      productClass:'',
      englishName:'',
      productCode:'',
      chineseName:'',
      id:'',
      pageSize:''
  });
  function loadData(){
      let params = getQueryParams();
      defHttp
      .get({ url: '/saleCode/saleInquiryForm/querySaleInquiryFormProductByMainId',params}, { isTransformResponse: false })
      .then((res) => {
          if (res.success) {
              dataSource.value = res.result              
          } else {
              message.error(res.message);
          }
      })
      .finally(() => {
          // loading.value = false;
      });
  }
  function getQueryParams(){
      let params = Object.assign(queryParams.value);
      params.id = mainId.value
      params.pageSize = '-1'
      return filterObj(params);
  }
  function handleTableChange(paginations, filters, sorter){
      loadData()
  };
  function searchQuery(){
      loadData();
  }
  function searchReset(){
      queryParams.value = {
        productionClass:'',
        productClass:'',
        englishName:'',
        productCode:'',
        chineseName:'',
        id:'',
        pageSize:''
      }
      loadData();
  }
  function handleToggleSearch(){
      toggleSearchStatus.value = !toggleSearchStatus.value;
  }
  function onSelectChange(keys,rows){
      selectedRowKeys.value = keys
      selectedRows.value = rows
  }
  function handleOk(){
    if(selectedRowKeys.value.length==0){
      message.error('请选择数据')
    }else{
      emit('copyProduct',selectedRows.value,mainId)
      handleCancel()
    }
  }
  function handleCancel(){
    visible.value = false
    selectedRowKeys.value = []
    selectedRows.value=[]
  }
  function getTable(record){
      mainId.value = record.id
      visible.value = true
      loadData()
  }
  defineExpose({
    getTable
  });
</script>
<style scoped lang="less">
// /deep/.ant-form-item{
//   margin-bottom: 8px !important;
// }
// /deep/.ant-table-wrapper .ant-table-thead > tr > th, .ant-table-wrapper .ant-table-thead > tr > td{
//     padding: 8px !important;
// }

</style>