<style> .page_CompanyAccDetail .query-box li label{display: inline-block;min-width: 80px;text-align: right;font-style: normal;margin: 0 20px 0 0;} .page_CompanyAccDetail .query-box{ padding-bottom: 0; margin-top: 20px; } .page_CompanyAccDetail .query-box li:last-child{top: 34px;} ._shoufu_date input.el-input__inner{padding: 0px 0 0 27px;} .page_CompanyAccDetail .el-date-editor .el-range-separator{width: 9% !important;} .page_CompanyAccDetail .el-date-editor--daterange.el-input__inner{width: auto !important;} ._bg__{ border-radius: 4px; cursor: pointer; text-decoration: underline; } ._bg__ ._bg_red:hover{ color: rgb(230, 97, 97); } ._bg__ ._bg_green:hover{ color:rgb(66, 182, 132); } ._bg_red{color: #E95252;} ._bg_green{color: #2BB87C} ._addChuNa_tit{color: gray;margin-bottom: 10px;} ._addChuNa_tit span{ color:#333333} </style> <template> <div class='flexOne page_CompanyAccDetail'> <div class='query-box'> <el-form class="_info_box clearfix" label-width="110px"> <el-row> <el-col :span="4" :gutter="35"> <el-form-item label="账户类型"> <el-select filterable v-model='accType' @change="bankaccount_post_GetList"> <el-option v-for='item in AccList' :label='item.Name' :value='item.ID' :key='item.ID'> </el-option> </el-select> </el-form-item> </el-col> <el-col :span="4" :gutter="35"> <el-form-item label="资金池账户"> <el-select filterable v-model='AccountId' @change="accountListChange"> <el-option v-for='item in accountList' :label='item.Alias' :value='item.ID' :key='item.ID'> </el-option> </el-select> </el-form-item> </el-col> <el-col :span="4" :gutter="35"> <el-form-item label="出纳审核"> <el-select filterable v-model='msg.Is_Cashier' > <el-option label='全部' :value='-1'></el-option> <el-option label='已审核' :value='1'></el-option> <el-option label='未审核' :value='0'></el-option> </el-select> </el-form-item> </el-col> <el-col :span="4" :gutter="35"> <el-form-item label="付款对象"> <el-select filterable v-model='msg.ClientID' > <el-option v-for='item in ClientAccountList' :label='item.AccountAlias' :value='item.ID' :key='item.ID'> </el-option> </el-select> </el-form-item> </el-col> <el-col :span="8" :gutter="35"> <el-form-item label="汇款/付款日期"> <el-date-picker class="h34" @change="timeAdd" v-model="productionDate" type="daterange" value-format="yyyy-MM-dd" range-separator="至"> </el-date-picker> </el-form-item> </el-col> </el-row> </el-form> <ul> <li> <input type="button" class="hollowFixedBtn" value="合并单据" @click="addChuNaFun"/> <input type="button" class="hollowFixedBtn" value="查询" @click="getList()"/> <input type="button" class="normalBtn" value="导出" @click=""/></li> </ul> </div> <div class="cm_content"> <table class="po_content singeRowTable" style="border:1px solid #E6E6E6;" cellspacing="0" cellpadding="0" v-loading="loading"> <tr> <th rowspan="2"></th> <th rowspan="2">所属公司</th> <th rowspan="2">单号</th> <th rowspan="2">摘要</th> <th rowspan="2">汇款人/付款对象</th> <th rowspan="2">汇款时间/付款时间</th> <th>交易流水号</th> <th colspan="3">外币({{TypeName}})</th> <th rowspan="2">兑换率</th> <th colspan="3">人民币</th> </tr> <tr> <th width="">收入</th> <th width="">支出</th> <th width="">余额</th> <th width="">收入</th> <th width="">支出</th> <th width="">余额</th> </tr> <tr> <td :colspan="6">期初余额:</td> <td></td> <td></td> <td> {{ moneyFormat(RStartMoney) }} </td> <td></td> <td></td> <td></td> <td> {{ moneyFormat(StartMoney) }} </td> </tr> <tr v-for=" ( item , index ) in DataList "> <td> {{ item.BName }} </td> <td> <span class="cursorpointer" :class=" item.Type == 1 ? '_bg_green' : '_bg_red'" @click="goUrl('FinancialDocumentsDetail',item.FinanceId)">{{ item.FinanceId }}</span> </td> <td> <p> {{ item.CostTypeName }} </p> <p v-for=" ( son , sIndex ) in item.TCIDAndTCNUMList"> <span>{{ son.TCNUM }} ( <span> {{ son.TCID }} </span> )</span> </p> </td> <td> <span v-if=" item.Type == 1">汇款人:{{ item.RemitterName }}</span> <span v-if=" item.Type == 2">{{ item.ClientTypeName }}:{{ item.RemitterName }}</span> </td> <td> <span v-if=" item.Type == 1">汇款时间:{{ item.TradeDate }}</span> <span v-if=" item.Type == 2">付款时间:{{ item.TradeDate }}</span> </td> <td> {{ item.AccountNumber }} </td> <td> {{ item.Type == 1 ? moneyFormat(item.OriginalMoney) : '' }} </td> <td> {{ item.Type == 2 ? moneyFormat(item.OriginalMoney) : '' }} </td> <td> {{ moneyFormat(item.enRSMoney) }} </td> <td> {{item.Rate}} </td> <td> {{ item.Type == 1 ? moneyFormat(item.Money) : '' }} </td> <td> {{ item.Type == 2 ? moneyFormat(item.Money) : '' }} </td> <td> {{ moneyFormat(item.enSMoney) }} </td> </tr> <tr> <td :colspan="6">合计(共 {{ DataList.length }} 条)</td> <td></td> <td></td> <td> {{ moneyFormat(endRStartMoney) }} </td> <td></td> <td></td> <td></td> <td> {{ moneyFormat(endStartMoney) }} </td> </tr> </table> </div> <el-dialog custom-class='w750' title="合并单据" :visible.sync="addChuNa" center :before-close="initAddChuNa" v-loading="allLoading"> <p class="_addChuNa_tit"><span>{{count}}</span>条合并为1条,外币总金额 <span>{{ moneyFormat(allWPrice) }}</span> ,本位币总金额 <span>{{ moneyFormat(allBPrice) }}</span> </p> <table border="1" bordercolor="#D2D2D2" style="border-collapse:collapse;text-align: center; width: 100%;"> <template> <tr > <th height="34px">账户分类</th> <th height="34px">付款方式</th> <th height="34px">账户</th> <!-- <th width="100px">账户余额</th> --> <th height="34px">金额</th> <th height="34px" width="70">币种</th> <th height="34px" width="50px">汇率</th> <!-- <th>手续费</th> --> <th height="34px" width="100px">总金额</th> <!-- <th>操作</th> --> </tr> <template v-for="(item,index) in payMsgList"> <tr v-if="!item.show" @click="payMsgList[index].show=true"> <td height="34px">{{item.AccName}}</td> <td height="34px">{{item.Name}}</td> <td height="34px">{{item.Account}}</td> <!-- <td>{{item.balance}}</td> --> <td height="34px">{{moneyFormat(item.OriginalMoney)}}</td> <td height="34px">{{item.CurrenName}}</td> <td height="34px">{{item.Rate}}</td> <!-- <td>{{item.Fee}}</td> --> <td height="34px">{{moneyFormat(item.allMoney)}}</td> <!-- <td></td> --> </tr> <tr v-else class="_show_class"> <td> <el-select filterable v-model='item.AccName' @change="clearAccBank()" class=" _border_b_1"> <el-option v-for='i in AccListT' :label='i.Name' :value='i.Name' :key='i.ID'> </el-option> </el-select> </td> <td> <el-select filterable v-model='item.Type' @change="getAccountList(item.Type)" class=" _border_b_1"> <el-option v-for='i in GetAccountType' :label='i.Name' :value='i.ID' :key='i.ID'> </el-option> </el-select> </td> <td> <el-select filterable v-model='item.AccountId' placeholder="请选择账户" @change="setAccountName(item.AccountId,1,index)" class=" _border_b_1"> <el-option v-for='i in accountList' :label='i.allName' :value='i.ID' :key='i.ID'> </el-option> </el-select> </td> <td> <el-input v-model="item.OriginalMoney" @change="Calculation(1,index)" @blur="item.show=false,CalculationMoney" placeholder="请输入金额" type="number" class=" _border_b_1"></el-input> </td> <td> <p>{{item.CurrenName}}</p> </td> <td> <el-input v-model="item.Rate" @blur="item.show=false,CalculationMoney" @change="Calculation(1,index)" type="number" class=" _border_b_1"></el-input> </td> <td>{{moneyFormat(item.allMoney)}} <i @click="deleteRow(item,index),CalculationMoney" class="_delete_row iconfont icon-img_delete_small"></i></td> </tr> </template> <tr> <td> <el-select filterable v-model='payMsg.AccName' @change="clearAccBank()" class=" _border_b_1"> <el-option v-for='i in AccListT' :label='i.Name' :value='i.Name' :key='i.ID'> </el-option> </el-select> </td> <td> <el-select filterable v-model='payMsg.Type' @change="getAccountList(payMsg.Type)" class=" _border_b_1"> <el-option v-for='i in GetAccountType' :label='i.Name' :value='i.ID' :key='i.ID'> </el-option> </el-select> </td> <td> <el-select filterable v-model='payMsg.AccountId' placeholder="请选择账户" @change="setAccountName(payMsg.AccountId,2)" class=" _border_b_1"> <el-option v-for='i in accountList' :label='i.allName' :value='i.ID' :key='i.ID'> </el-option> </el-select> </td> <td> <el-input v-model="payMsg.OriginalMoney" @change="Calculation(2)" @blur="addList()" placeholder="请输入金额" type="number" class=" _border_b_1"></el-input> </td> <td> <p>{{payMsg.CurrenName}}</p> </td> <td> <el-input v-model="payMsg.Rate" @blur="addList()" @change="Calculation(2)" type="number" class=" _border_b_1"></el-input> </td> <td>{{moneyFormat(payMsg.allMoney)}}</td> </tr> </template> <tr> <td height="34px">总金额</td> <td height="34px" colspan="7"> <el-input v-model="listAllMoney" type="number" placeholder="请输入总金额" class=" _border_b_1"></el-input> <!--{{moneyFormat(listAllMoney)}}--> </td> </tr> <tr v-if="BillType===2"> <td>交易日期</td> <td colspan="7"> <el-date-picker class="width100b" v-model="addMsg.TradeDate" type="date" :default-value="TradeDate" value-format="yyyy-MM-dd" placeholder="选择日期"> </el-date-picker> </td> </tr> <tr v-if="BillType===1"> <td>汇款人</td> <td colspan="2"> <el-input v-model="addMsg.RemitterName" type="text" class=" _border_b_1"></el-input> </td> <td>交易日期</td> <td colspan="3"> <el-date-picker class="width100b" v-model="addMsg.TradeDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"> </el-date-picker> </td> </tr> </table> <div slot="footer" class="dialog-footer"> <button class="normalBtn" type="primary" @click="submitAddChuNa">{{$t('pub.saveBtn')}}</button> <button class="hollowFixedBtn" @click="initAddChuNa">{{$t('pub.cancelBtn')}}</button> </div> </el-dialog> </div> </template> <script> export default { data(){ return{ msg:{ pageIndex:1, pageSize:5, ClientID:'', sTradeDate:'', eTradeDate:'', BankList:[], Is_Cashier:-1, }, Type:4, AccountId:'', DataList:[], StartMoney:0, RStartMoney:0, endRStartMoney:0, endStartMoney:0, AccountTypeList:[], AccList:[], GetAccountType:[], accountList:[], productionDate:[], ClientAccountList:[], RB_Branch_Id:null, loading:false, date:'', accType:'', allMoney:0, TypeName:'', BillType:1, //1 收 2 支 , addChuNa:false, allLoading: false, payMsgList:[], payMsg: { ID:0, FinanceId:'', Type:'', AccountId:'', OriginalMoney:0, CurrencyId:'', Rate:0, Fee:0, Name:'', CurrenName:'', Account:'', balance:'', allMoney:0, show:false, }, addMsg:{ FrIDs:'', RemitterName:'', TradeDate:'', BankList:[], }, AccListT:[], accountListT:[], listAllMoney:0, checkList:[], count:0, allBPrice:0, allWPrice:0, } },created(){ if(this.$route.query.TypeId){ this.msg.Is_Cashier = parseInt(this.$route.query.Is_Cashier); this.accType = parseInt(this.$route.query.TypeId); this.msg.sTradeDate = this.$route.query.sTradeDate; this.msg.eTradeDate = this.$route.query.eTradeDate; this.productionDate = [this.msg.sTradeDate, this.msg.eTradeDate]; this.getList(); this.BankAccount_post_GetCashPoolList("query"); } },methods:{ goUrl(path,id){ this.$router.push({ name: path,query:{"id":id,blank:'y'} }) }, accountListChange(){ this.msg.BankList = []; this.accountList.forEach(x=>{ if( x.ID == this.AccountId ){ this.TypeName = x.Alias; } }) this.msg.BankList.push( { Type:this.Type, AccountId:this.AccountId } ) }, financeinfo_post_GetClientAccountList(){ //获取付款对象 let msg = { ID:0, Type:0, ObjID:0, CardNum:'' } this.apipost('financeinfo_post_GetClientAccountList',msg, res => { let data = res.data.data; this.ClientAccountList = data; }, err => {}) }, timeAdd(){ // 日期格式 if(!this.productionDate){ this.msg.sTradeDate = ''; this.msg.eTradeDate = ''; return } this.msg.sTradeDate = this.productionDate[0]; this.msg.eTradeDate = this.productionDate[1]; }, bankaccount_post_GetList(){ // 获取银行账户 this.AccountId = ''; let msg = { TypeId:this.accType, BranchId:-1, Alias:'', } this.apipost('BankAccount_post_GetCashAccountList',msg, res => { if(res.data.resultCode == 1) { let data = res.data.data; this.accountList = data; } }, err => {}) }, BankAccount_post_GetAccountType(){ //获取账户类型列表 this.apipost('BankAccount_post_GetAccountType',{}, res => { if(res.data.resultCode == 1) { this.GetAccountType = res.data.data; } }, err => {}) }, AccountType_post_GetList(){ //获取账户类型下拉 this.apipost('AccountType_post_GetList',this.queryAccMsg,res=>{ if(res.data.resultCode==1){ this.AccList = res.data.data; this.AccListT = res.data.data; }else{ this.$message.error(res.data.message); } },err=>{}) }, getAccountTypeList() { //获取账户类型 this.apipost('AccountType_post_GetList',{}, res => { if(res.data.resultCode == 1) { this.AccountTypeList = res.data.data; } }, err => {}) }, getList(){ //获取列表 this.loading = true if( this.msg.ClientID == '' ){ this.msg.ClientID = 0; } this.endStartMoney = ''; this.endRStartMoney =''; this.apipost('Financial_post_GetAccountDetailList',this.msg,res=>{ if(res.data.resultCode==1){ let data = res.data.data; if(data.length){ this.StartMoney = data[0].StartMoney?data[0].StartMoney:0; // 外币 this.RStartMoney = data[0].StartMoney?data[0].StartMoney:0; // 本位币 let endStartMoney = 0, endRStartMoney = 0; data.forEach( ( x , i ) => { if(x.Type==1){ endRStartMoney = endStartMoney + x.OriginalMoney; endStartMoney = endStartMoney + x.Money; x.enRSMoney = endRStartMoney; x.enSMoney = endRStartMoney; }else if(x.Type==2){ endRStartMoney = endStartMoney - x.OriginalMoney; endStartMoney = endStartMoney - x.Money; x.enRSMoney = endRStartMoney; x.enSMoney = endRStartMoney; } }); this.endStartMoney = endStartMoney; this.endRStartMoney = endRStartMoney; } this.DataList = data this.loading = false; if( this.msg.ClientID == 0 ){ this.msg.ClientID = ''; } }else{ this.$message.error(res.data.message) this.loading = false; if( this.msg.ClientID == 0 ){ this.msg.ClientID = ''; } } },err=>{}) }, initAddChuNa(){ this.payMsgList = []; this.listAllMoney = 0; this.huikuanren = ''; this.TradeDate = ''; this.addChuNa = false; this.payMsg = { ID:0, FinanceId:'', Type:'', AccountId:'', OriginalMoney:0, CurrencyId:'', Rate:0, Fee:0, Name:'', CurrenName:'', Account:'', balance:'', allMoney:0, show:false, }; this.addMsg = { FrIDs:'', RemitterName:'', TradeDate:'', BankList:[], } }, Calculation(i,index){ // 计算价格 if(i===1){ this.payMsgList[index].Fee = isNaN(parseFloat(this.payMsgList[index].Fee))?0:parseFloat(this.payMsgList[index].Fee); this.payMsgList[index].Rate = isNaN(parseFloat(this.payMsgList[index].Rate))?0:parseFloat(this.payMsgList[index].Rate); this.payMsgList[index].OriginalMoney = isNaN(parseFloat(this.payMsgList[index].OriginalMoney))?0:parseFloat(this.payMsgList[index].OriginalMoney); let fee = this.payMsgList[index].Fee, Rate = this.payMsgList[index].Rate===0?1:this.payMsgList[index].Rate, Money = this.payMsgList[index].OriginalMoney; this.payMsgList[index].allMoney = (Money*Rate)+fee; }else{ this.payMsg.Fee = isNaN(parseFloat(this.payMsg.Fee))?0:parseFloat(this.payMsg.Fee); this.payMsg.Rate = isNaN(parseFloat(this.payMsg.Rate))?0:parseFloat(this.payMsg.Rate); this.payMsg.OriginalMoney = isNaN(parseFloat(this.payMsg.OriginalMoney))?0:parseFloat(this.payMsg.OriginalMoney); let fee = this.payMsg.Fee, Rate = this.payMsg.Rate===0?1:this.payMsg.Rate, Money = this.payMsg.OriginalMoney; this.payMsg.allMoney = (Money*Rate)+fee; } }, deleteRow(obj,index){ obj.show = false; this.payMsgList.splice(index,1); this.$forceUpdate(); }, setAccountName(i,type,index){ if(type===2){ this.accountList.forEach(x=>{ if(x.ID===i){ this.payMsg.Account = x.allName; this.payMsg.CurrenName =x.CurrencyName; this.payMsg.Rate = x.CurrencyRate?x.CurrencyRate:x.CurrentRate; this.payMsg.CurrencyId = x.CurrencyId; this.payMsg.balance = x.Initialbalance; } }) this.addList() }else{ this.accountList.forEach(x=>{ if(x.ID===i){ this.payMsgList[index].Account = x.allName; this.payMsgList[index].CurrenName =x.CurrencyName; this.payMsgList[index].Rate = x.CurrencyRate?x.CurrencyRate:x.CurrentRate; this.payMsgList[index].CurrencyId = x.CurrencyId; this.payMsgList[index].balance = x.Initialbalance; } }) this.addList() } }, getAccountList(i){ this.payMsg.AccountId = ''; this.GetAccountType.forEach(x=>{ if(x.ID===i){ this.payMsg.Name = x.Name; } }); if(i===1){ this.bankaccount_post_GetListS() } if(i===2){ this.BankAccount_post_GetPlatformList() } if(i===3){ this.BankAccount_post_GetCashAccountList() } if(i===4){ this.BankAccount_post_GetCashPoolList() } }, BankAccount_post_GetPlatformList(){ //获取平台账户 let msg = { BackId:0, TypeId:0, BranchId:-1, Alias:'' }; this.apipost('BankAccount_post_GetPlatformList',msg, res => { if(res.data.resultCode === 1) { let data = res.data.data; data.forEach(x=>{ x.allName = x.Alias+' '+x.PlatformNo; }); this.accountList = data; } }, err => {}) }, BankAccount_post_GetCashAccountList(){ // 获取现金账户 let msg = { TypeId:0, BranchId:-1, Alias:'' }; this.apipost('BankAccount_post_GetCashAccountList',msg, res => { if(res.data.resultCode === 1) { let data = res.data.data; data.forEach(x=>{ x.allName = x.Alias; }); this.accountList = data; } }, err => {}) }, bankaccount_post_GetListS(){ // 获取银行账户 this.apipost('bankaccount_post_GetList',{}, res => { if(res.data.resultCode === 1) { let data = res.data.data; data.forEach(x=>{ x.allName = x.Alias+' '+x.BackNo; }); this.accountList = data; } }, err => {}) }, BankAccount_post_GetCashPoolList(query){ // 获取资金池账 this.apipost('BankAccount_post_GetCashPoolList',{TypeId:2,BranchId:-1,Alias:''}, res => { if(res.data.resultCode === 1) { let data = res.data.data; data.forEach(x=>{ x.allName = x.Alias; }); this.accountList = data; if (query) { this.AccountId = parseInt(this.$route.query.BankID); } } }, err => {}) }, clearAccBank(){ // 选择账户类型清空数据 this.payMsg.Type = ''; this.payMsg.AccountId = ''; }, submitAddChuNa(){ // if(this.payMsgList.length===0) return this.$message.error('请选择交易方式!'); if(this.addMsg.TradeDate==='') return this.$message.error('请选择交易日期!'); if(this.BillType===1&&this.addMsg.RemitterName==='') return this.$message.error('请填写汇款人!') ; let str = ''; this.checkList.forEach(x=>{ if(x.FinanceId){ str = str+x.FinanceId+',' } }); this.addMsg.FrIDs = str.substring(0,str.length-1); this.addMsg.BankList = this.payMsgList; this.addMsg.Money = this.listAllMoney; this.allLoading = true this.apipost('Financial_post_MergeFinance',this.addMsg,r=>{ if(r.data.resultCode === 1) { console.log(r) this.addChuNa = false this.getList() }else{ this.$message.error(r.data.message) } this.allLoading = false },null) }, addCheckbox(obj,index){ // if(obj.Is_Cashier===1){ // obj.check = false; // return this.$message.error('请选择未审核的单据') // } this.DataList.forEach((x)=>{ // 循环改变check disabled 状态 if(x.FinanceId===obj.FinanceId){ x.disabled=false }else if(x.Type===obj.Type&&x.ClientID===obj.ClientID&&x.ClientType===obj.ClientType){ x.disabled=false }else{ x.disabled=true } }); if(obj.check){ this.checkList[index] = { FinanceId:obj.FinanceId, Type:obj.Type, ClientID:obj.ClientID, ClientType:obj.ClientType, OriginalMoney:obj.OriginalMoney, Money:obj.Money, } this.BillType = obj.Type; }else{ this.checkList[index] = { FinanceId:null, Type:null, ClientID:null, ClientType:null, OriginalMoney:0, Money:0, } } let count = false; this.checkList.forEach(x=>{ if(x.FinanceId){ return count = true; } }); if(!count){ this.DataList.forEach((x,i)=>{ x.disabled=false }) } }, addChuNaFun(){ // 添加出纳按钮点击事件 let count = 0; let allBPrice = 0; let allWPrice = 0; this.checkList.forEach(x=>{ if(x.FinanceId){ count++; allBPrice = allBPrice + x.Money; allWPrice = allWPrice + x.OriginalMoney; this.addMsg.FrIDs = this.addMsg.FrIDs + x.FinanceId; } }); if(this.addMsg.FrIDs){ let s = this.addMsg.FrIDs; s = s.substring(0,s.length - 1); this.count = count; this.allWPrice = allWPrice; this.allBPrice = allBPrice; this.payMsg.OriginalMoney = allBPrice; this.payMsg.Rate = 1; this.payMsg.allMoney = allBPrice * 1; this.addMsg.FrIDs = s; this.addChuNa = true; }else{ this.$message.error('请选择单据') } }, addList(){ if(this.payMsg.AccountId==='')return; if(this.payMsg.OriginalMoney===0||this.payMsg.OriginalMoney==='')return; if(this.payMsg.AccountId==='')return; this.payMsgList.push(this.payMsg); this.payMsg = { ID:0, FinanceId:'', Type:'', AccountId:'', OriginalMoney:0, CurrencyId:'', Rate:0, Fee:0, Name:'', CurrenName:'', Account:'', balance:'', allMoney:0, show:false, }; this.CalculationMoney(); }, CalculationMoney(){ // this.listAllMoney = 0; // this.payMsgList.forEach(x=>{ // this.listAllMoney = this.listAllMoney + x.allMoney // }) }, },mounted(){ let userInfo=this.getLocalStorage(); this.getAccountTypeList(); this.AccountType_post_GetList(); this.BankAccount_post_GetAccountType(); this.financeinfo_post_GetClientAccountList(); } } </script>