佣金预付款-页面修改

src/views/purchase/commissionAdvancePay/commissionAdvancePayForm.data.ts

@@ -25,6 +25,7 @@ export const columns: BasicColumn[] = [
     title: '预付款日期(expect payment date)',
     align:"center",
     ellipsis:true,
+    width:250,
     dataIndex: 'expectPaymentDate'
    },
    {
@@ -45,11 +46,12 @@ export const columns: BasicColumn[] = [
     align:"center",
     dataIndex: 'approveMoney',
     ellipsis:true,
+    width:250,
+
    },
    {
     title: '币种(curreny)',
     align:"center",
-    width:250,
     ellipsis:true,
     dataIndex: 'curreny'
    },
@@ -69,3 +71,107 @@ export const columns: BasicColumn[] = [
     dataIndex: 'payment',
    },
 ];
+
+export const paymentDetailsColumns: JVxeColumn[] = [
+  {
+    title: '付款申请号(billCode)',
+    key: 'billCode',
+    type: JVxeTypes.normal,
+    placeholder: '请输入${title}',
+    defaultValue:'',
+  },
+  {
+    title: '申请日期(bill date)',
+    key: 'billDate',
+    type: JVxeTypes.normal,
+    placeholder: '请输入${title}',
+    defaultValue:'',
+  },
+  {
+    title: '申请金额(approve money)',
+    key: 'approveMoney',
+    type: JVxeTypes.normal,
+    placeholder: '请输入${title}',
+    defaultValue:'',
+  },
+  {
+    title: '币种(currency)',
+    key: 'currency',
+    type: JVxeTypes.normal,
+    placeholder: '请输入${title}',
+    defaultValue:'',
+  },
+  {
+    title: '付款编号(billCode)',
+    key: 'billCode',
+    type: JVxeTypes.normal,
+    placeholder: '请输入${title}',
+    defaultValue:'',
+  },
+  {
+    title: '付款日期(billDate)',
+    key: 'billDate',
+    type: JVxeTypes.normal,
+    placeholder: '请输入${title}',
+    defaultValue:'',
+  },
+  {
+    title: '付款金额(payment)',
+    key: 'payment',
+    type: JVxeTypes.normal,
+    placeholder: '请输入${title}',
+    defaultValue:'',
+  },
+  {
+    title: '币种(currency)',
+    key: 'currency',
+    type: JVxeTypes.normal,
+    placeholder: '请输入${title}',
+    defaultValue:'',
+  },
+]
+
+export const commissionDetailsColumns: JVxeColumn[] = [
+  {
+    title: '订单编号(billCode)',
+    key: 'billCode',
+    type: JVxeTypes.normal,
+    placeholder: '请输入${title}',
+    defaultValue:'',
+  },
+  {
+    title: '单据日期(bill date)',
+    key: 'billDate',
+    type: JVxeTypes.normal,
+    placeholder: '请输入${title}',
+    defaultValue:'',
+  },
+  {
+    title: '订单金额(order money)',
+    key: 'orderMoney',
+    type: JVxeTypes.normal,
+    placeholder: '请输入${title}',
+    defaultValue:'',
+  },
+  {
+    title: '收款金额(collected money)',
+    key: 'collectedMoney',
+    type: JVxeTypes.normal,
+    placeholder: '请输入${title}',
+    defaultValue:'',
+  },
+  {
+    title: '佣金率(commission rate)',
+    key: 'commissionRate',
+    type: JVxeTypes.normal,
+    placeholder: '请输入${title}',
+    defaultValue:'',
+  },
+  {
+    title: '佣金(commission)',
+    key: 'commission',
+    type: JVxeTypes.normal,
+    placeholder: '请输入${title}',
+    defaultValue:'',
+  },
+]

src/views/purchase/commissionAdvancePay/commissionAdvancePayList.vue

@@ -93,7 +93,7 @@
   </template>
   
   <script lang="ts" name="saleCode-saleInquiryForm" setup>
-    import {ref, reactive, computed, unref,onMounted} from 'vue';
+    import {ref, reactive} from 'vue';
     import {BasicTable, useTable, TableAction} from '/@/components/Table';
     import { useListPage } from '/@/hooks/system/useListPage'
     import {useModal} from '/@/components/Modal';
@@ -103,9 +103,6 @@
     import { defHttp } from '/@/utils/http/axios';
     import { JDictSelectTag} from '/@/components/Form';
     import commissionAdvancePayFormModal from './components/commissionAdvancePayFormModal.vue';
-    import JSelectInput from '/@/components/Form/src/jeecg/components/JSelectInput.vue';
-    import JSelectUser from '/@/components/Form/src/jeecg/components/JSelectUser.vue';
-    import JSelectDept from '/@/components/Form/src/jeecg/components/JSelectDept.vue';
     import { message } from 'ant-design-vue';
     const formRef = ref();
     const queryParam = reactive<any>({});
@@ -261,14 +258,6 @@
       xs: 24,
       sm: 16,
     });
-    const labelCol1 = reactive({
-      xs:24,
-      sm:12,
-    });
-    const wrapperCol1 = reactive({
-      xs: 24,
-      sm: 12,
-    });
     /**
      * 重置
      */

src/views/purchase/commissionAdvancePay/components/commissionAdvancePayForm.vue

@@ -21,8 +21,8 @@
 						</a-col>
 						<a-col :span="12">
 							<a-form-item label="收款人(payee)" v-bind="validateInfos.payee" id="saleInvoiceForm-payee" name="payee" >
-                <JSelectInput   v-model:value="formData.payee"  placeholder="请选择" :options="payeeOption" style="width: 50%;"></JSelectInput>
-                 <a-button type="primary" style="width: 30%;"> 查看详情(view detail)</a-button>
+                <JSelectInput   v-model:value="formData.payee"  placeholder="请选择" :options="payeeOption" style="width: 50%;margin-right: 1%;"></JSelectInput>
+                 <a-button type="primary" style="width: 35%;" @click="viewDetailFormPayee"> 查看详情(view detail)</a-button>
 							</a-form-item>
 						</a-col>
 						<a-col :span="12">
@@ -44,7 +44,12 @@
 							<a-form-item label="银行账户(bank account)" v-bind="validateInfos.bankAccount" id="saleInvoiceForm-bankAccount" name="bankAccount">
                 <a-input v-model:value="formData.bankAccount" placeholder="请输入"  allow-clear ></a-input>
 							</a-form-item>
-						</a-col>						
+						</a-col>	
+            <a-col :span="12">
+							<a-form-item label="银行代码(swiftCode)" v-bind="validateInfos.swiftCode" id="saleInvoiceForm-swiftCode" name="swiftCode">
+                <a-input v-model:value="formData.swiftCode" placeholder="请输入"  allow-clear ></a-input>
+							</a-form-item>
+						</a-col>				
             <a-col :span="12">
 							<a-form-item label="备注(notes)" v-bind="validateInfos.quotationNotes" id="saleInvoiceForm-notes" name="notes" >
 								<a-input v-model:value="formData.notes" placeholder="请输入报价备注(quotation notes)"  allow-clear AutoComplete="off"></a-input>
@@ -59,6 +64,7 @@
         </a-form>
       </template>
     </JFormContainer>
+    <viewDeatilModal ref="viewDeatilModalRef"></viewDeatilModal>
   </a-spin>
 </template>
 
@@ -69,12 +75,11 @@
   import { JVxeTable } from '/@/components/jeecg/JVxeTable';
   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';
+  import { JDictSelectTag} from '/@/components/Form';
   import JSelectInput from '/@/components/Form/src/jeecg/components/JSelectInput.vue';
+  import viewDeatilModal from './viewDeatilModal.vue';
   import { Form,message } from 'ant-design-vue';
-  import { useUserStore } from '/@/store/modules/user';
   import moment from 'moment';
-  const userStore = useUserStore();
   const useForm = Form.useForm;
   export default defineComponent({
     name: "commissionAdvancePayForm",
@@ -83,8 +88,8 @@
 			JFormContainer,
       JUpload,
       JDictSelectTag,
-      JSelectInput,
-      JSelectMultiple,
+      JSelectInput,,
+      viewDeatilModal
     },
     props:{
       formDisabled:{
@@ -98,6 +103,7 @@
     setup(props, {emit}) {
       const loading = ref(false);
       const formRef = ref();
+      const viewDeatilModalRef = ref()
       var payeeOption =ref([]);
       const formData = reactive<Record<string, any>>({
         id: '',
@@ -105,15 +111,15 @@
         delFlag: undefined,
         billDate: moment(new Date()).format('YYYY-MM-DD'),   
         billCode: '',   
-        project: '',   
-        projectName: '',   
-        customer: '',   
-        customerName: '',   
-        advancePaymentAmount: '',   
-        orderAmount: '',   
-        advancePaymentRatio: '',   
-        fnumber: '',   
-        notes: '',           
+        commission: '',   
+        payee: '',   
+        expectedPaymentDate: '',   
+        currency: '',   
+        openingBank: '',   
+        bankAccount: '',   
+        invoice: '',   
+        notes: '',   
+        swiftCode:''        
       });
 
       //表单验证
@@ -145,8 +151,6 @@
       function add() {
         resetFields();
         getPayeeOptions()
-        formData.salesman=userStore.getUserInfo.username;
-        formData.saleDepartment = userStore.getUserInfo.orgCode
       }
       //编辑方法
       async function edit(row) {
@@ -225,8 +229,8 @@
             }
           })
       }
-      //选择项目  
-      function onSearchProject(){
+      function viewDetailFormPayee(){
+        viewDeatilModalRef.value.getDetail(formData.payee)
       }
       return {
         validatorRules,
@@ -242,8 +246,9 @@
         add,
         edit,
         formRef,
-        onSearchProject,
-        payeeOption
+        payeeOption,
+        viewDeatilModalRef,
+        viewDetailFormPayee
       }
     }
   });

src/views/purchase/commissionAdvancePay/components/viewDeatilModal.vue

@@ -0,0 +1,142 @@
+<template>
+    <a-modal
+      title="佣金详情(commission details)"
+      width="95%"
+      :visible="visible"
+      :maskClosable="false"
+      switchFullscreen
+      @cancel="handleCancel">
+       <!--页脚-->
+       <template #footer>
+            <a-button @click="handleCancel">关闭</a-button>
+        </template>
+        <div>
+          <a-card  :body-style="{ padding: '10px' }" :bordered="false" style="margin: 10px;">
+            <div class="table-page-search-wrapper">
+                <a-form :model="formData" :label-col="labelCol" :wrapper-col="wrapperCol" >
+                <a-row :gutter="24">
+                    <a-col :md="12" :sm="12">
+                        <a-form-item label="收款人(payee)">
+                            <a-input placeholder="请输入" v-model:value="formData.payee" disabled></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :md="12" :sm="12">
+                        <a-form-item label="充值余额(recharge balance)">
+                            <a-input placeholder="请输入" v-model:value="formData.rechargeBalance" disabled></a-input>
+                        </a-form-item>
+                    </a-col>
+                    
+                </a-row>
+            </a-form>
+           </div>
+        </a-card>
+
+        <a-card  :body-style="{ padding: '10px' }" :bordered="false" style="margin: 10px;">
+           <!-- 子表单区域 -->
+            <a-tabs v-model:activeKey="activeKey" animated >
+              <a-tab-pane tab="付款明细(payment details)" key="paymentDetails" :forceRender="true">
+                <j-vxe-table
+                  :keep-source="true"
+                  resizable
+                  ref="paymentDetailsTableRef"
+                  :loading="paymentDetailsTable.loading"
+                  :columns="paymentDetailsTable.columns"
+                  :dataSource="paymentDetailsTable.dataSource"
+                  :height="340"
+                  :rowNumber="true"
+                  :rowSelection="true"
+                  asyncRemove
+                  >
+                  </j-vxe-table>
+              </a-tab-pane>
+              <a-tab-pane tab="返佣明细(commission details)" key="commissionDetails" :forceRender="true">
+                <j-vxe-table
+                  :keep-source="true"
+                  resizable
+                  ref="commissionDetailsTableRef"
+                  :loading="commissionDetailsTable.loading"
+                  :columns="commissionDetailsTable.columns"
+                  :dataSource="commissionDetailsTable.dataSource"
+                  :height="340"
+                  :rowNumber="true"
+                  :rowSelection="true"
+                  >
+                  </j-vxe-table>
+              </a-tab-pane>
+            
+            </a-tabs>
+        </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 } from '/@/utils/common/compUtils'
+    import {paymentDetailsColumns,commissionDetailsColumns} from '../commissionAdvancePayForm.data';
+    
+    var visible = ref(false)
+    const labelCol = ref({
+    xs: { span: 24 },
+    sm: { span: 5 },
+    });
+    const wrapperCol = ref({
+        xs: { span: 24 },
+        sm: { span: 15 },
+    });
+    const formData = ref({
+        payee:'',
+        rechargeBalance:'',
+    });
+    const paymentDetailsTableRef = ref();
+    const paymentDetailsTable = reactive<Record<string, any>>({
+        loading: false,
+        columns: paymentDetailsColumns,
+        dataSource: []
+    });
+    const commissionDetailsTableRef = ref();
+    const commissionDetailsTable = reactive<Record<string, any>>({
+        loading: false,
+        columns: commissionDetailsColumns,
+        dataSource: []
+    });
+    const activeKey = ref('paymentDetails');
+    function loadData(){
+        // let params = getQueryParams();
+        // defHttp
+        // .get({ url: '/purCode/purInquiryForm/alertPurInquiryList',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 handleCancel(){
+      visible.value = false
+      
+    }
+    function getDetail(){
+      visible.value = true
+    }
+    defineExpose({
+      getDetail
+    });
+</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>