global-web/src/views/purchase/purchaseOrder/components/SelectPurOrderModal.vue

<!-- 复制子表 -->
<template>
  <a-modal
    title="选择采购订单(select purchase order)"
    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-row :gutter="24">
                      <a-col :md="8" :sm="8">
                          <a-form-item label="产品分类(production class)">
                              <a-input placeholder="请输入" v-model:value="queryParams.productionClass"></a-input>
                          </a-form-item>
                      </a-col>
                     
                      <a-col :md="8" :sm="8">
                          <a-form-item label="产品英文名(english name)" >
                              <a-input v-model:value="queryParams.englishName" placeholder="请选择" />
                          </a-form-item>
                      </a-col>
                  <template v-if="toggleSearchStatus">                     
                      <a-col :md="8" :sm="8">
                          <a-form-item label="产品编码(product code)" >
                              <a-input v-model:value="queryParams.productCode" placeholder="请选择" />
                          </a-form-item>
                      </a-col>
                      <a-col :md="8" :sm="8">
                          <a-form-item label="产品中文名(chinese name)" >
                              <a-input v-model:value="queryParams.chineseName" placeholder="请选择" />
                          </a-form-item>
                      </a-col>
                  </template>
                  <a-col :md="8" :sm="8">
                      <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                          <a-button type="primary" @click="searchQuery" >查询(search)</a-button>
                          <a-button type="primary" @click="searchReset"  style="margin-left: 8px">重置(reset)</a-button>
                          <a @click="handleToggleSearch" style="margin-left: 8px">
                          {{ toggleSearchStatus ? '收起' : '展开' }}
                          <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
                          </a>
                      </span>
                  </a-col>
              </a-row>
          </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: 4500, y: 300 }"
              :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: '交期(delivery time)',
          dataIndex: 'deliveryTime',
          key: 'deliveryTime',
          align:"center"
      },
      {
          title: '最早发货日期(earline delivery date)',
          dataIndex: 'earliestDeliveryDate',
          key: 'earliestDeliveryDate',
          align:"center"
      },
      {
          title: '最晚发货日期(latest delivery date)',
          dataIndex: 'latestDeliveryDate',
          key: 'latestDeliveryDate',
          align:"center",
      },
      {
          title: '产品中文名(chinese name)',
          key: 'chineseName',
          dataIndex: 'chineseName',
          align:"center"
      },
      {
          title: '产品英文名(english name)',
          key: 'englishName',
          dataIndex: 'englishName',
          align:"center",
          ellipsis:true
      },
      {
          title: '型号(model)',
          key: 'model',
          dataIndex: 'model',
          align:"center"
      },
      {
          title: '备件号(partno)',
          key: 'partno',
          dataIndex: 'partno',
          align:"center",
          width:250
      },
      {
          title: '订货号(orderno)',
          key: 'orderno',
          dataIndex: 'orderno',
          align:"center",
      },
      {
          title: '图号(drawingno)',
          key: 'drawingno',
          dataIndex: 'drawingno',
          align:"center",
      },
      {
          title: '厂家(factory)',
          key: 'factory',
          dataIndex: 'factory',
          align:"center",
      },
      {
          title: '质量等级(quality grade)',
          key: 'qualityGrade',
          dataIndex: 'qualityGrade',
          align:"center",
      },
      {
          title: '需要船检证书(need Ship inspection certificate)',
          key: 'needShip',
          dataIndex: 'needShip',
          align:"center",
      },
      {
          title: '船检证书(ship Inspection certificate)',
          key: 'shipInspection',
          dataIndex: 'shipInspection',
          align:"center",
      },
      {
          title: '数量(quantity)',
          key: 'quantity',
          dataIndex: 'quantity',
          align:"center",
      },
      {
          title: '单价(price)',
          key: 'taxPrice',
          dataIndex: 'taxPrice',
          align:"center",
      },
      {
          title: '金额(money)',
          key: 'taxAmount',
          dataIndex: 'taxAmount',
          align:"center",
      },
      {
          title: '备注(note)',
          key: 'notes',
          dataIndex: 'notes',
          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:'',
      englishName:'',
      productCode:'',
      chineseName:'',
      id:'',
      pageSize:''
  });
  function loadData(){
      let params = getQueryParams();
      defHttp
      .get({ url: '/purCode/purOrder/queryPurOrderProductByMainId',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:'',
        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>