给对账单的欠款界面增加历史收付款页面

jshERP-web/src/views/report/modules/DebtAccountList.vue

@@ -20,21 +20,22 @@
         <!-- 搜索区域 -->
         <a-form layout="inline" @keyup.enter.native="searchQuery">
           <a-row :gutter="24">
-            <a-col :md="6" :sm="8">
+            <a-col :md="6" :sm="24">
               <a-form-item label="单据编号" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
                 <a-input placeholder="请输入单据编号查询" v-model="queryParam.number"></a-input>
               </a-form-item>
             </a-col>
-            <a-col :md="6" :sm="8">
+            <a-col :md="6" :sm="24">
               <a-form-item label="商品信息" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
                 <a-input placeholder="请输入名称、规格、型号" v-model="queryParam.materialParam"></a-input>
               </a-form-item>
             </a-col>
             <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
-              <a-col :md="6" :sm="24">
+              <a-col :md="12" :sm="24">
                 <a-button type="primary" @click="searchQuery">查询</a-button>
                 <a-button style="margin-left: 8px" v-print="'#debtAccountPrint'" icon="printer">打印</a-button>
                 <a-button style="margin-left: 8px" @click="exportExcel" icon="download">导出</a-button>
+                <a-button style="margin-left: 8px" @click="handleHistoryFinancial" icon="history">{{historyText}}</a-button>
               </a-col>
             </span>
           </a-row>
@@ -55,23 +56,19 @@
           <span slot="numberCustomRender" slot-scope="text, record">
             <a @click="myHandleDetail(record)">{{record.number}}</a>
           </span>
-          <span slot="customTitle">
-            实际欠款
-            <a-tooltip title="实际欠款=本单欠款-退货单欠款（主要针对存在退货的情况）">
-              <a-icon type="question-circle" />
-            </a-tooltip>
-          </span>
         </a-table>
       </section>
       <!-- table区域-end -->
       <!-- 表单区域 -->
       <bill-detail ref="modalDetail"></bill-detail>
+      <history-financial-list ref="historyFinancial"></history-financial-list>
     </a-modal>
   </div>
 </template>
 
 <script>
   import BillDetail from '../../bill/dialog/BillDetail'
+  import HistoryFinancialList from './HistoryFinancialList'
   import { JeecgListMixin } from '@/mixins/JeecgListMixin'
   import { openDownloadDialog, sheet2blob} from "@/utils/util"
   import {mixinDevice} from '@/utils/mixin'
@@ -81,7 +78,8 @@
     name: 'DebtAccountList',
     mixins:[JeecgListMixin, mixinDevice],
     components: {
-      BillDetail
+      BillDetail,
+      HistoryFinancialList
     },
     data () {
       return {
@@ -97,6 +95,8 @@
           roleType: Vue.ls.get('roleType'),
           status: ""
         },
+        historyText: '',
+        financialType: '',
         ipagination:{
           pageSize: 10001
         },
@@ -158,9 +158,13 @@
         if(type === '入库') {
           this.columns[7].title = '已付欠款'
           this.columns[8].title = '待付欠款'
+          this.historyText = '历史付款'
+          this.financialType = '付款'
         } else if(type === '出库') {
           this.columns[7].title = '已收欠款'
           this.columns[8].title = '待收欠款'
+          this.historyText = '历史收款'
+          this.financialType = '收款'
         }
         this.model = Object.assign({}, {});
         this.visible = true;
@@ -194,6 +198,15 @@
           aoa.push(item)
         }
         openDownloadDialog(sheet2blob(aoa), '欠款详情')
+      },
+      handleHistoryFinancial() {
+        this.$refs.historyFinancial.visible = true
+        this.$refs.historyFinancial.title = this.historyText
+        this.$refs.historyFinancial.queryParam.organId = this.queryParam.organId
+        this.$refs.historyFinancial.queryParam.beginTime = this.queryParam.beginTime
+        this.$refs.historyFinancial.queryParam.endTime = this.queryParam.endTime
+        this.$refs.historyFinancial.queryParam.type = this.financialType
+        this.$refs.historyFinancial.show()
       }
     }
   }

jshERP-web/src/views/report/modules/HistoryFinancialList.vue

@@ -0,0 +1,228 @@
+<!-- by 7527 18920 -->
+<template>
+  <div ref="container">
+    <a-modal
+      :title="title"
+      :width="1600"
+      :visible="visible"
+      :getContainer="() => $refs.container"
+      :maskStyle="{'top':'93px','left':'154px'}"
+      :wrapClassName="wrapClassNameInfo()"
+      :mask="isDesktop()"
+      :maskClosable="false"
+      @cancel="handleCancel"
+      cancelText="关闭"
+      style="top:20px;height: 95%;">
+      <template slot="footer">
+        <a-button key="back" @click="handleCancel">取消</a-button>
+      </template>
+      <!-- 查询区域 -->
+      <div class="table-page-search-wrapper">
+        <!-- 搜索区域 -->
+        <a-form layout="inline" @keyup.enter.native="searchQuery">
+          <a-row :gutter="24">
+            <a-col :md="6" :sm="24">
+              <a-form-item label="单据编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input placeholder="请输入单据编号" v-model="queryParam.billNo"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="24">
+              <a-form-item label="操作员" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-select placeholder="选择操作员" showSearch optionFilterProp="children" v-model="queryParam.creator">
+                  <a-select-option v-for="(item,index) in userList" :key="index" :value="item.id">
+                    {{ item.userName }}
+                  </a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="24">
+              <a-form-item label="单据状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-select placeholder="选择单据状态" v-model="queryParam.status">
+                  <a-select-option value="0">未审核</a-select-option>
+                  <a-select-option value="1">已审核</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+              <a-col :md="6" :sm="24">
+                <a-button type="primary" @click="searchQuery">查询</a-button>
+                <a-button style="margin-left: 8px" @click="searchReset">重置</a-button>
+                <a @click="handleToggleSearch" style="margin-left: 8px">
+                  {{ toggleSearchStatus ? '收起' : '展开' }}
+                  <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
+                </a>
+              </a-col>
+            </span>
+            <template v-if="toggleSearchStatus">
+              <a-col :md="6" :sm="24">
+                <a-form-item label="财务人员" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                  <a-select placeholder="选择财务人员" showSearch optionFilterProp="children" v-model="queryParam.handsPersonId">
+                    <a-select-option v-for="(item,index) in personList" :key="index" :value="item.id">
+                      {{ item.name }}
+                    </a-select-option>
+                  </a-select>
+                </a-form-item>
+              </a-col>
+              <a-col :md="6" :sm="24">
+                <a-form-item label="收款账户" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                  <a-select placeholder="选择收款账户" showSearch optionFilterProp="children" v-model="queryParam.accountId">
+                    <a-select-option v-for="(item,index) in accountList" :key="index" :value="item.id">
+                      {{ item.name }}
+                    </a-select-option>
+                  </a-select>
+                </a-form-item>
+              </a-col>
+              <a-col :md="6" :sm="24">
+                <a-form-item label="单据备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                  <a-input placeholder="请输入单据备注" v-model="queryParam.remark"></a-input>
+                </a-form-item>
+              </a-col>
+              <a-col :md="6" :sm="24">
+                <a-form-item label="销售单号" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                  <a-input placeholder="请输入销售单号" v-model="queryParam.number"></a-input>
+                </a-form-item>
+              </a-col>
+            </template>
+          </a-row>
+        </a-form>
+      </div>
+      <!-- table区域-begin -->
+      <a-table
+        ref="table"
+        size="middle"
+        bordered
+        rowKey="id"
+        :columns="columns"
+        :dataSource="dataSource"
+        :components="handleDrag(columns)"
+        :pagination="ipagination"
+        :scroll="scroll"
+        :loading="loading"
+        @change="handleTableChange">
+        <span slot="billNoCustomRender" slot-scope="text, record">
+          <a @click="myHandleDetail(record, '收款', prefixNo)">{{text}}</a>
+        </span>
+        <template slot="customRenderStatus" slot-scope="status">
+          <a-tag v-if="status == '0'" color="red">未审核</a-tag>
+          <a-tag v-if="status == '1'" color="green">已审核</a-tag>
+          <a-tag v-if="status == '9'" color="orange">审核中</a-tag>
+        </template>
+      </a-table>
+      <!-- table区域-end -->
+      <!-- 表单区域 -->
+      <financial-detail ref="modalDetail" @ok="modalFormOk" @close="modalFormClose"></financial-detail>
+    </a-modal>
+  </div>
+</template>
+<script>
+  import FinancialDetail from '../../financial/dialog/FinancialDetail'
+  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+  import { FinancialListMixin } from '../../financial/mixins/FinancialListMixin'
+  import JDate from '@/components/jeecg/JDate'
+  import Vue from 'vue'
+  export default {
+    name: "HistoryFinancialList",
+    mixins:[JeecgListMixin, FinancialListMixin],
+    components: {
+      FinancialDetail,
+      JDate
+    },
+    data () {
+      return {
+        title:"",
+        visible: false,
+        labelCol: {
+          span: 5
+        },
+        wrapperCol: {
+          span: 18,
+          offset: 1
+        },
+        // 查询条件
+        queryParam: {
+          billNo: "",
+          beginTime: "",
+          endTime: "",
+          searchMaterial: "",
+          type: "",
+          organId: "",
+          creator: "",
+          handsPersonId: "",
+          accountId: "",
+          status: "",
+          remark: "",
+          number: "",
+          roleType: Vue.ls.get('roleType')
+        },
+        prefixNo: 'SK',
+        disableMixinCreated: true,
+        // 表头
+        columns: [
+          {
+            title: '#',
+            dataIndex: '',
+            key:'rowIndex',
+            width:40,
+            align:"center",
+            customRender:function (t,r,index) {
+              return parseInt(index)+1;
+            }
+          },
+          {
+            title: '单据编号', dataIndex: 'billNo', width: 120, scopedSlots: { customRender: 'billNoCustomRender' },
+          },
+          { title: '客户', dataIndex: 'organName',width:140, ellipsis:true},
+          { title: '单据日期 ', dataIndex: 'billTimeStr',width:140},
+          { title: '操作员', dataIndex: 'userName',width:100, ellipsis:true},
+          { title: '财务人员', dataIndex: 'handsPersonName',width:100},
+          { title: '合计收款', dataIndex: 'totalPrice',width:80},
+          { title: '优惠金额', dataIndex: 'discountMoney',width:80},
+          { title: '实际收款', dataIndex: 'changeAmount',width:80},
+          { title: '备注', dataIndex: 'remark',width:160},
+          { title: '状态', dataIndex: 'status', width: 80, align: "center",
+            scopedSlots: { customRender: 'customRenderStatus' }
+          }
+        ],
+        url: {
+          list: "/accountHead/list"
+        }
+      }
+    },
+    computed: {
+    },
+    created () {
+      this.initSystemConfig()
+      this.initUser()
+      this.initPerson()
+      this.initAccount()
+    },
+    mounted () {
+      this.scroll.x = 1520
+    },
+    methods: {
+      show() {
+        this.loadData(1)
+      },
+      close () {
+        this.$emit('close');
+        this.visible = false;
+      },
+      handleCancel () {
+        this.close()
+      },
+      searchReset() {
+        this.queryParam = {
+          organId: this.queryParam.organId,
+          beginTime: this.queryParam.beginTime,
+          endTime: this.queryParam.endTime,
+          type: this.queryParam.type,
+          roleType: Vue.ls.get('roleType')
+        }
+        this.loadData(1);
+      }
+    }
+  }
+</script>
+<style scoped>
+  @import '~@assets/less/common.less'
+</style>