收款单-增加选择发票页面

src/views/saleCode/receiptOrder/components/SelectInvoiceModal.vue

@@ -0,0 +1,296 @@
+<template>
+    <a-modal
+      title="选择发票(Select invoce)"
+      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="6" :sm="8">
+                        <a-form-item label="发票编号(bill code)">
+                            <a-input placeholder="请输入" v-model:value="queryParams.billCode"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :md="6" :sm="8">
+                        <a-form-item label="发票日期(bill date)">
+                            <a-range-picker value-format="YYYY-MM-DD"  v-model:value="billDate"  @change="changeBillDate" class="query-group-cust"/>
+                        </a-form-item>
+                    </a-col> 
+                    <template v-if="toggleSearchStatus">
+                        <a-col :md="6" :sm="8">
+                            <a-form-item label="项目(project)">
+                                <ApiSelect
+                                    :api="projectListList"
+                                    showSearch
+                                    v-model:value="queryParams.project"
+                                    optionFilterProp="label"
+                                    resultField="records"
+                                    labelField="name"
+                                    valueField="id"
+                                    />
+                            </a-form-item>
+                        </a-col>
+                        <a-col :md="6" :sm="8">
+                            <a-form-item label="购方(buyer)" >
+                                <ApiSelect
+                                    :api="buyerListList"
+                                    showSearch
+                                    v-model:value="queryParams.buyer"
+                                    optionFilterProp="label"
+                                    resultField="records"
+                                    labelField="name"
+                                    valueField="id"
+                                />
+                            </a-form-item>
+                        </a-col>              
+                    </template>
+                    <a-col :md="6" :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  :body-style="{ padding: '10px' }" :bordered="false" style="margin: 10px;">
+            <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.childId"
+                :data-source="dataSource"
+                bordered
+                size="small"
+                @change="handleTableChange"
+                :pagination="pagination"
+                :scroll="{ x: 1800, y: 300 }"
+                :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+            >
+            </a-table>
+        </a-card>
+      </div>
+    </a-modal>
+</template>
+<script lang="ts" setup>
+    import {ref } from 'vue';
+    import { defHttp} from '/@/utils/http/axios';
+    import { message } from 'ant-design-vue';
+    import { filterObj, } from '/@/utils/common/compUtils';
+    import {  ApiSelect, } from '/@/components/Form/index';
+    const emit = defineEmits([ 'selectInvoice']); //定义emit
+    var visible = ref(false)
+    const columns = [
+        {
+            title: '发票编号(bill code)',
+            dataIndex: 'billCode',
+            key: 'billCode',
+            align:"center",
+            width:250,
+            
+        },
+        {
+            title: '发票日期(bill date)',
+            dataIndex: 'billDate',
+            key: 'billDate',
+            align:"center"
+        },
+        {
+            title: '项目(project)',
+            dataIndex: 'projectName',
+            key: 'projectName',
+            align:"center",
+            width:250,
+            ellipsis: true,
+        },
+        {
+            title: '购方(buyer)',
+            dataIndex: 'buyer',
+            key: 'buyer',
+            align:"center",
+            ellipsis: true,
+        },
+        {
+            title: '购方税号(buyer tax number)',
+            dataIndex: 'priority_dictText',
+            key: 'priority_dictText',
+            align:"center",
+            width:250,
+        },
+        {
+            title: '价税合计(tax money)',
+            dataIndex: 'taxMoney',
+            key: 'taxMoney',
+            align:"center",
+        },
+    ];
+    const labelCol = ref({
+    xs: { span: 24 },
+    sm: { span: 9 },
+    });
+    const wrapperCol = ref({
+        xs: { span: 24 },
+        sm: { span: 15 },
+    });
+    const labelCol1 = ref({
+    xs: { span: 24 },
+    sm: { span: 12 },
+    });
+    const wrapperCol1 = ref({
+        xs: { span: 24 },
+        sm: { span: 12 },
+    });
+    const dataSource =ref([]);
+    let selectedRowKeys = ref([]);
+    let selectedRows = ref([]);
+    const toggleSearchStatus = ref(false);
+    var billDate = ref([])
+    const queryParams = ref({
+        billCode:'',
+        project:'',
+        projectName:'',
+        buyer:'',
+        billDate_begin :'',
+        billDate_end :''
+    });
+    let pagination = ref({
+      current: 1,
+      pageSize: 10,
+      total: '', // 假设总共有100条数据
+      showSizeChanger: true,
+      showQuickJumper: true,
+      showTotal: (total, range) => {
+          return range[0] + "-" + range[1] + " 共" + total + "条"
+      },
+      size:'small'
+    });
+    function loadData(){
+        // let params = getQueryParams();
+        // defHttp.get({ url: '/saleCode/saleOrder/selectSaleOrderDetailAlert',params}, { isTransformResponse: false })
+        // .then((res) => {
+        //     if (res.success) {
+        //         dataSource.value = res.result.records;
+        //         pagination.value.total = res.result.total;
+        //         pagination.value.current = res.result.current;
+        //         pagination.value.pageSize = res.result.size;                
+        //     } else {
+        //         message.error(res.message);
+        //     }
+        // })
+        // .finally(() => {
+        //     // loading.value = false;
+        // });
+    }
+    function getQueryParams(){
+        let params = Object.assign(queryParams.value);
+        params.pageNo = pagination.value.current;
+        params.pageSize = pagination.value.pageSize;
+        return filterObj(params);
+    }
+    function handleTableChange(paginations, filters, sorter){
+        pagination.value.total = paginations.total;
+        pagination.value.current = paginations.current;
+        pagination.value.pageSize = paginations.pageSize;
+        loadData()
+    };
+    function searchQuery(){
+        loadData();
+    }
+    function searchReset(){
+        billDate.value = []
+        queryParams.value = {
+            billCode:'',
+            project:'',
+            projectName:'',
+            buyer:'',
+            billDate_begin :'',
+            billDate_end :''
+        }
+        pagination.value.current =1;
+        pagination.value.pageSize = 10; 
+        loadData();
+    }
+    function handleToggleSearch(){
+        toggleSearchStatus.value = !toggleSearchStatus.value;
+    }
+    function onSelectChange(keys,rows){
+        selectedRowKeys.value = keys
+        selectedRows.value = rows
+    }
+    function handleOk(){
+            emit('selectInvoice', selectedRows.value)
+            handleCancel()
+    }
+    function handleCancel(){
+        visible.value = false
+        selectedRowKeys.value = []
+        selectedRows.value=[]
+        billDate.value = []
+        queryParams.value = {
+            billCode:'',
+            project:'',
+            projectName:'',
+            buyer:'',
+            billDate_begin :'',
+            billDate_end :''
+        }
+    }
+    function getTable(){
+        visible.value = true
+        loadData()
+    }
+    function changeBillDate(prop){
+       if(prop){
+            billDate.value = prop
+            queryParams.value.billDate_begin = prop[0]
+            queryParams.value.billDate_end = prop[1]
+       }else{
+            billDate.value = []
+            queryParams.value.billDate_begin = ''
+            queryParams.value.billDate_end = ''
+       }
+       
+    }
+    function projectListList(){
+        let params = {pageSize:-1}
+        return defHttp.get({url:'/baseCode/baseProjectArchive/list',params});
+    }
+    function buyerListList(){
+        let params = {pageSize:-1}
+        return defHttp.get({url:'/cuspCode/cuspCustomerProfile/list',params});
+    }
+    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>

src/views/saleCode/receiptOrder/components/receiptOrderForm.vue

@@ -16,7 +16,7 @@
 						</a-col>
             <a-col :span="24">
 							<a-form-item label="发票(invoice)" v-bind="validateInfos.invoice" id="saleInvoiceForm-invoice" name="invoice">
-								<a-input-search v-model:value="formData.invoice" placeholder="请输入"  allow-clear enter-button="Search"></a-input-search>
+								<a-input-search v-model:value="formData.invoice" placeholder="请输入"  allow-clear enter-button="Search" @search="onSearchInvoice"></a-input-search>
 							</a-form-item>
 						</a-col>
 						<a-col :span="24">
@@ -59,6 +59,7 @@
       </template>
     </JFormContainer>
     <SelectProjectModal ref="SelectProjectModalRef" @selectProject="addProject"></SelectProjectModal>
+    <SelectInvoiceModal ref="SelectInvoiceModalRef"></SelectInvoiceModal>
   </a-spin>
 </template>
 
@@ -68,6 +69,7 @@
   import {queryDataById, saveOrUpdate } from '../receiptOrderForm.api';
   import { JVxeTable } from '/@/components/jeecg/JVxeTable';
   import SelectProjectModal from '../../../publicComponents/SelectProjectModal.vue';
+  import SelectInvoiceModal from './SelectInvoiceModal.vue';
   import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
   import JUpload from '/@/components/Form/src/jeecg/components/JUpload/JUpload.vue';
   import { JDictSelectTag,JSelectMultiple} from '/@/components/Form';
@@ -87,6 +89,7 @@
       JDictSelectTag,
       JSelectInput,
       JSelectMultiple,
+      SelectInvoiceModal
     },
     props:{
       formDisabled:{
@@ -101,6 +104,7 @@
       const loading = ref(false);
       const formRef = ref();
       var SelectProjectModalRef = ref()
+      const SelectInvoiceModalRef = ref()
       var customerOption =ref([]);
       const formData = reactive<Record<string, any>>({
         id: '',
@@ -246,6 +250,9 @@
       function onSearchProject(){
         SelectProjectModalRef.value.getTable()
       }
+      function onSearchInvoice(){
+        SelectInvoiceModalRef.value.getTable()
+      }
       return {
         validatorRules,
         validateInfos,
@@ -265,6 +272,8 @@
         addProject,
         getCustomerOptions,
         customerOption,
+        onSearchInvoice,
+        SelectInvoiceModalRef
       }
     }
   });