<style> .page_addCapitalAllocation{ width: 800px; /* position: absolute; */ padding: 15px; background-color: white; color: #c94052; margin: 0 auto; } .page_addCapitalAllocation ._top{ text-align: center } .page_addCapitalAllocation ._top p{ font-size: 20px; padding: 5px 0; } .page_addCapitalAllocation ._top p:last-child{ font-size: 18px; padding:0 0 10px 0 } .page_addCapitalAllocation ._top p:last-child span{ display: inline-block; border-bottom: 2px solid #c94052; padding: 0 20px; } .page_addCapitalAllocation ._border_b_1{border-bottom: 1px solid #666666 !important;color: #666666} .page_addCapitalAllocation input { border: none !important; background-color: transparent !important; padding: 0 2px !important; } .page_addCapitalAllocation ._conten ._lable{ display: inline-block; width: 90px; text-align: right; } .page_addCapitalAllocation ._conten ul li{ margin-bottom: 15px; } .page_addCapitalAllocation ._conten ul li._inList{ border: 1px solid #c94052; padding: 10px 0; position: relative; } .page_addCapitalAllocation ._conten ul li._outList{ border: 1px solid #106BAF; padding: 10px 0; position: relative; } .page_addCapitalAllocation ._conten ul li._inList>p{ border-bottom: 1px dotted #c94052; padding-bottom: 10px; margin-bottom: 10px; padding-left: 10px; font-size: 18px; } .page_addCapitalAllocation ._conten ul li._outList>p{ border-bottom: 1px dotted #106BAF; padding-bottom: 10px; margin-bottom: 10px; padding-left: 10px; font-size: 18px; } .page_addCapitalAllocation ._conten ul li._outList span,.page_addCapitalAllocation ._conten ul li._outList p{ color: #106BAF } .page_addCapitalAllocation ._conten ul li._inList>div,.page_addCapitalAllocation ._conten ul li._outList>div{ padding: 5px 0; } .page_addCapitalAllocation ._conten ul li._inList ._add_btn,.page_addCapitalAllocation ._conten ul li._outList ._add_btn{ text-align: right; height: 35px; line-height: 35px; position: absolute; right: 22px; bottom: 10px; } .page_addCapitalAllocation ._conten ul li._inList ._add_btn span,.page_addCapitalAllocation ._conten ul li._outList ._add_btn span{ cursor: pointer; } .page_addCapitalAllocation ._conten ul li._inList textarea,.page_addCapitalAllocation ._conten ul li._outList textarea{ border: none; /* border-bottom: 1px solid #666666; */ min-height: 300px; } .page_addCapitalAllocation ._conten ul li._inList ._uoload,.page_addCapitalAllocation ._conten ul li._outList ._uoload{ padding-left: 10px; } .page_addCapitalAllocation ._addUpload_box{ display: block; margin: 15px; } .page_addCapitalAllocation ._addUpload_box img{ width: 100%; } .page_addCapitalAllocation ._addUpload_box>div{ float: left; width:138px; height:92px; border:1px dashed rgba(210,210,210,1); border-radius:2px; cursor: pointer; margin-bottom: 10px; padding: 5px; margin-right: 10px; position: relative; } .page_addCapitalAllocation ._addUpload_box>div:hover{ background-color: #f5f5f5; } .page_addCapitalAllocation ._addFile_name{ padding-left: 15px; max-width: 450px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .page_addCapitalAllocation ._addUpload_box .icon-guanbi1 { font-size: 12px; color: white; display: inline-block; margin-left: 15px; position: absolute; right: -6px; top: -9px; background-color: #f56c6c; border-radius: 50%; height: 20px; width: 20px; text-align: center; line-height: 20px; } .page_addCapitalAllocation ._addUpload_box .icon-guanbi1:hover { font-size: 12px; color: #c94052; } .page_addCapitalAllocation ._addUpload_box .icon-excel,.page_addCapitalAllocation ._addUpload_box .icon-pdf { text-align: center; font-size: 38px; color: green; line-height: 75px; } .page_addCapitalAllocation ._pic_upload .el-upload-dragger { font-size: 28px; color: #8c939d; width: 126px; height: 80px; line-height: 41px; text-align: center; } .page_addCapitalAllocation ._submit{ text-align: right } </style> <template> <div class="page_addCapitalAllocation" v-loading="loading"> <div class="_top"> <p>{{BillName}}</p> <p> <template v-if="msg.TemplateId==145"> <span>甲鹤资金调拨单</span> </template> <template v-else> <span>{{msg.TemplateId==34?$t('fnc.zongbu'):$t('fnc.fgongsi')}}{{$t('fnc.zjdbodan')}}</span> </template> </p> </div> <div class="_conten"> <ul v-if="inList.length"> <li v-for="(item, index) in inList" class="_inList"> <p>{{$t('fnc.skduixiang')}}</p> <div> <span class="_lable">{{$t('fnc.skfangshi')}}:</span> <el-select filterable v-model='item.Type' @change="FinancialInstitutions_post_GetAccountList(1, index, item.Type, item.mode),item.AccountId=''" class="w100 _border_b_1"> <el-option v-for='item in AccList' :label='item.Name' :value='item.ID' :key='item.ID'> </el-option> </el-select> <span class="_lable">{{$t('fnc.zhanghuleixing')}}:</span> <el-select filterable v-model='item.mode' @change="FinancialInstitutions_post_GetAccountList(1, index, item.Type, item.mode),item.AccountId=''" class="w100 _border_b_1"> <el-option v-for='item in shouAccList' :label='item.Name' :value='item.ID' :key='item.ID'> </el-option> </el-select> <span class="_lable">{{$t('fnc.dkzhanghu')}}:</span> <el-select filterable v-model='item.AccountId' @change="getAccInfo(1, index, item.AccountId)" class="w250 _border_b_1"> <el-option v-for='sItem in item.shouAccNumList' :label='sItem.allName' :value='sItem.ID' :key='sItem.ID'> </el-option> </el-select> </div> <div> <span class="_lable">{{$t('fnc.skjine')}}:</span> <el-input v-model='item.OriginalMoney' @input="Calculation(1, index)" class="w100 _border_b_1"></el-input> <span class="_lable">{{$t('hotel.hotel_Currency')}}:</span> <el-input disabled="disabled" v-model='item.CurrencyName' class="w80 _border_b_1"></el-input> <span class="_lable">{{$t('hotel.hotel_CurrentRate')}}:</span> <el-input v-model='item.Rate' class="w60 _border_b_1" :disabled="true"></el-input> <span class="_lable">{{$t('fnc.bwyue')}}:</span> <el-input v-model='item.Money' class="w100 _border_b_1"></el-input> </div> <div> <span class="_lable">{{$t('fnc.dbriqi')}}:</span> <el-date-picker clearable class="w100 _border_b_1" v-model="item.AllotDate" prefix-icon='1' type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"> </el-date-picker> <span class="_lable">{{$t('hotel.hotel_remark')}}:</span> <el-input v-model="item.Description" type="textarea" class="w250 _border_b_1"></el-input> <span class="_lable">汇兑收益:</span> <el-select v-model='item.IsExChange' class="w100 _border_b_1"> <el-option label='是' :value='1' :key='1'></el-option> <el-option label='否' :value='0' :key='0'></el-option> </el-select> <div class="_add_btn"> <span @click="initMsg(1)">{{$t('fnc.tianjia')}}</span> <span @click="deleteItem(1, index)">{{$t('system.table_delete')}}</span> <span @click="clearItem(1, index)">{{$t('fnc.qingkong')}}</span> </div> </div> <div class="_uoload"> <p>{{$t('fnc.scfujian')}}<span class="_addUpload_tips">{{$t('tips.wjdxbncgsz')}}</span></p> <div class="_addUpload_box clearfix" > <template v-for="(file,fIndex) in item.vorcherInos"> <div v-if="file.Type==3"> <div style="width:100%;height:100%;overflow: hidden;"> <img :src="file.Url?file.Url:file.Content" @click="showUpLoadFile(file)"> </div> <span class="iconfont icon-guanbi1" @click="deleteUploadFile(1, index, fIndex)"></span> </div> <div v-if="file.Type==1"> <div class="iconfont " :class="file.Content.substring(file.Content.lastIndexOf('.')+1, file.Content.length).toUpperCase()=='PDF'? 'icon-pdf' : 'icon-excel'" @click="showUpLoadFile(file)"> </div> <span class="iconfont icon-guanbi1" @click="deleteUploadFile(1, index, fIndex)"></span> </div> <div v-if="file.Type==2"> <div class="iconfont icon-excel" @click="showUpLoadFile(file)"> </div> <span class="iconfont icon-guanbi1" @click="deleteUploadFile(1, index, fIndex)"></span> </div> </template> <div class="_pic_upload" @click="inUploadIndex = index,inUploadTrue = true"> <el-upload drag :http-request="uploadFileBtn" :multiple="true" :show-file-list="false" action=""> <i class="el-icon-plus avatar-uploader-icon"></i> <div class="el-upload__text">{{$t('active.ld_djscwj')}}</div> </el-upload> </div> </div> </div> </li> </ul> <ul v-if="outList.length"> <li v-for="(item, index) in outList" class="_outList"> <p>{{$t('fnc.fkfangshi')}}</p> <div> <span class="_lable">{{$t('fnc.fkfangshi')}}:</span> <el-select filterable v-model='item.Type' @change="FinancialInstitutions_post_GetAccountList(2, index, item.Type, item.mode),item.AccountId=''" class="w100 _border_b_1"> <el-option v-for='item in AccList' :label='item.Name' :value='item.ID' :key='item.ID'> </el-option> </el-select> <span class="_lable">{{$t('fnc.zhleixing')}}:</span> <el-select filterable v-model='item.mode' @change="FinancialInstitutions_post_GetAccountList(2, index, item.Type, item.mode),item.AccountId=''" class="w100 _border_b_1"> <el-option v-for='item in shouAccList' :label='item.Name' :value='item.ID' :key='item.ID'> </el-option> </el-select> <span class="_lable">{{$t('fnc.fkzhanghu')}}:</span> <el-select filterable v-model='item.AccountId' @change="getAccInfo(2, index, item.AccountId)" class="w250 _border_b_1"> <el-option v-for='sItem in item.shouAccNumList' :label='sItem.allName' :value='sItem.ID' :key='sItem.ID'> </el-option> </el-select> </div> <div> <span class="_lable">{{$t('fnc.fkjine')}}:</span> <el-input v-model='item.OriginalMoney' @input="Calculation(2, index)" class="w100 _border_b_1"></el-input> <span class="_lable">{{$t('hotel.hotel_Currency')}}:</span> <el-input disabled="disabled" v-model='item.CurrencyName' class="w80 _border_b_1"></el-input> <span class="_lable">{{$t('hotel.hotel_CurrentRate')}}:</span> <el-input v-model='item.Rate' class="w60 _border_b_1" :disabled="true"></el-input> <span class="_lable">{{$t('fnc.bwyue')}}:</span> <el-input v-model='item.Money' class="w100 _border_b_1"></el-input> </div> <div> <span class="_lable">{{$t('fnc.dbriqi')}}:</span> <el-date-picker clearable class="w100 _border_b_1" v-model="item.AllotDate" prefix-icon='1' type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"> </el-date-picker> <span class="_lable">{{$t('hotel.hotel_remark')}}:</span> <el-input v-model="item.Description" type="textarea" class="w250 _border_b_1"></el-input> <span class="_lable">汇兑损失:</span> <el-select v-model='item.IsExChange' class="w100 _border_b_1"> <el-option label='是' :value='1' :key='1'></el-option> <el-option label='否' :value='0' :key='0'></el-option> </el-select> <div class="_add_btn"> <span @click="initMsg(2)">{{$t('fnc.tianjia')}}</span> <span @click="deleteItem(2, index)">{{$t('system.table_delete')}}</span> <span @click="clearItem(2, index)">{{$t('fnc.qingkong')}}</span> </div> </div> <div class="_uoload"> <p>{{$t('fnc.scfujian')}}<span class="_addUpload_tips">{{$t('tips.wjdxbncgsz')}}</span></p> <div class="_addUpload_box clearfix" > <template v-for="(file,fIndex) in item.vorcherInos"> <div v-if="file.Type==3"> <div style="width:100%;height:100%;overflow: hidden;"> <img :src="file.Url?file.Url:file.Content" @click="showUpLoadFile(file)"> </div> <span class="iconfont icon-guanbi1" @click="deleteUploadFile(1, index, fIndex)"></span> </div> <div v-if="file.Type==1"> <div class="iconfont " :class="file.Content.substring(file.Content.lastIndexOf('.')+1, file.Content.length).toUpperCase()=='PDF'? 'icon-pdf' : 'icon-excel'" @click="showUpLoadFile(file)"> </div> <span class="iconfont icon-guanbi1" @click="deleteUploadFile(1, index, fIndex)"></span> </div> <div v-if="file.Type==2"> <div class="iconfont icon-excel" @click="showUpLoadFile(file)"> </div> <span class="iconfont icon-guanbi1" @click="deleteUploadFile(1, index, fIndex)"></span> </div> </template> <div class="_pic_upload" @click="inUploadIndex = index,inUploadTrue = false"> <el-upload drag :http-request="uploadFileBtn" :multiple="true" :show-file-list="false" action=""> <i class="el-icon-plus avatar-uploader-icon"></i> <div class="el-upload__text">{{$t('active.ld_djscwj')}}</div> </el-upload> </div> </div> </div> </li> </ul> </div> <div class="_submit"> <button class="normalBtn" @click="AddFinancial()">{{$t('fnc.tijiao')}}</button> </div> <viewer :images="images" :options='imageOptions' @inited="inited" class="viewer" ref="viewer"> <img v-for="src in images" :src="src" :key="src"> </viewer> </div> </template> <script> export default { data(){ return { msg: { FrID: 0, TemplateId: 0, Status: 1, IsPublic: 0, RB_Depart_Id: 0, RB_Branch_Id: 0, Description: '', IsHave: 1, emList: [], BankList: [] }, queryAccMsg: { pageIndex: 1, pageSize: 999, ID: 0, BackId: 0, TypeId: 0, BankType: 0, Alias: '', StandCurrBranchId: 0 }, AccList: [], accountList: [], shouAccList: [], shouAccNumList: [], loading: false, bankType: '', inList: [], outList: [], inUploadIndex: 0, inUploadTrue: false, imageOptions:{ navbar:false, title:false }, BillName: '', images: [], } }, created(){ if (this.$route.query.edit) { let id = this.$route.query.id this.getData(id) } else { this.initMsg() let userInfo = this.getLocalStorage(); this.msg.RB_Depart_Id = userInfo.RB_Department_Id; this.msg.RB_Branch_Id = userInfo.RB_Branch_id; // fengs: 1日本调拨 2台湾调拨 if(this.$route.query.fengs){ if(this.$route.query.fengs==1){ this.msg.RB_Branch_Id = 1218; } if(this.$route.query.fengs==2){ this.msg.RB_Branch_Id = 1220; } } if(this.msg.RB_Branch_Id==1218||this.msg.RB_Branch_Id==1220){ this.queryAccMsg.StandCurrBranchId = this.msg.RB_Branch_Id; } this.BillName = userInfo.GroupName; if(userInfo.RB_Group_id==96){ this.msg.TemplateId = 145; }else{ if(this.msg.RB_Branch_Id===0 || this.msg.RB_Branch_Id===45 || this.msg.RB_Branch_Id===49){ this.msg.TemplateId=34; }else{ this.msg.TemplateId=35; } } } }, methods:{ getData: function(id){ this.loading = true this.apipost('Financial_get_GetFundTransfer', {ID: id}, res=>{ if(res.data.resultCode==1){ let data = res.data.data; this.inList = data.SBankList; this.outList = data.FBankList; this.msg.FrID = data.FrID this.msg.TemplateId = data.TemplateId this.msg.Status = data.Status this.msg.IsPublic = 0 this.msg.RB_Depart_Id = this.getLocalStorage().RB_Department_Id this.msg.RB_Branch_Id = data.RB_Branch_Id this.msg.Description = '' this.msg.IsHave = 1 this.msg.emList = [] this.inList.forEach((x, index)=>{ x.mode = x.AccountTypeId this.FinancialInstitutions_post_GetAccountList(1, index, x.Type, x.mode) }) this.outList.forEach((x, index)=>{ x.mode = x.AccountTypeId this.FinancialInstitutions_post_GetAccountList(2, index, x.Type, x.mode) }) }else{ this.$message.error(res.data.message); } this.loading = false }, null) }, AddFinancial: function () { this.loading = true let c = this.inList.concat(this.outList); this.msg.BankList=c; this.msg.BankList.forEach(x=>{ delete x.shouAccNumList }) // return; this.apipost('Financial_post_SetFundTransfer', this.msg, res=>{ if(res.data.resultCode==1){ this.$message.success(res.data.message); this.$router.push({ name:'CapitalAllocation', query:{ blank:'y' } }); }else{ this.$message.error(res.data.message); } this.loading = false }, null) }, Calculation: function (type, index) { if (type===1) { let OriginalMoney = (this.inList[index].OriginalMoney && !isNaN(this.inList[index].OriginalMoney)) ? parseFloat(this.inList[index].OriginalMoney) : 0 let Rate = (this.inList[index].Rate && !isNaN(this.inList[index].Rate)) ? parseFloat(this.inList[index].Rate) : 0 this.inList[index].Money =Math.round(OriginalMoney*Rate*100)/100; } else { let OriginalMoney = (this.outList[index].OriginalMoney && !isNaN(this.outList[index].OriginalMoney)) ? parseFloat(this.outList[index].OriginalMoney) : 0 let Rate = (this.outList[index].Rate && !isNaN(this.outList[index].Rate)) ? parseFloat(this.outList[index].Rate) : 0 // this.outList[index].Money = OriginalMoney*Rate this.outList[index].Money =Math.round(OriginalMoney*Rate*100)/100; } }, clearItem: function (type, index) { if (type===1) { this.inList[index].ID = 0 this.inList[index].Type = '' this.inList[index].mode = '' this.inList[index].AccountId = '' this.inList[index].OriginalMoney = 0 this.inList[index].Rate = 0 this.inList[index].Money = 0 this.inList[index].CurrencyId = '' this.inList[index].Description = '' this.inList[index].CurrencyName = '' this.inList[index].AllotDate = '' this.inList[index].AllotType = 1 this.inList[index].Sort = '' this.inList[index].allName = '' this.inList[index].vorcherInos = [] }else if(type===2) { this.outList[index].ID = 0 this.outList[index].Type = '' this.outList[index].mode = '' this.outList[index].AccountId = '' this.outList[index].OriginalMoney = 0 this.outList[index].Rate = 0 this.outList[index].Money = 0 this.outList[index].CurrencyId = '' this.outList[index].Description = '' this.outList[index].CurrencyName = '' this.outList[index].AllotDate = '' this.outList[index].AllotType = 2 this.outList[index].Sort = '' this.outList[index].allName = '' this.outList[index].vorcherInos = [] } this.$forceUpdate() }, deleteItem: function (type, index) { if (type===1) { if (this.inList.length===1) { return this.$message.error(this.$t('fnc.bnshanchu')); } else { this.inList.splice(index, 1) } } else if (type===2){ if (this.outList.length===1) { return this.$message.error(this.$t('fnc.bnshanchu')); } else { this.outList.splice(index, 1) } } this.$forceUpdate() }, initInList: function () { this.inList.push({ ID: 0, Type: '', mode: '', AccountId: '', OriginalMoney: 0, Rate: 0, Money: 0, CurrencyId: '', Description: '', AllotDate: '', AllotType: 1, Sort: '', allName: '', vorcherInos: [], IsExChange:0, }) }, initOnList: function () { this.outList.push({ ID: 0, Type: '', mode: '', AccountId: '', OriginalMoney: 0, Rate: 0, Money: 0, CurrencyId: '', Description: '', AllotDate: '', AllotType: 2, Sort: '', allName: '', vorcherInos: [], IsExChange:0, }) }, initMsg: function (t) { if(!t){ this.initInList() this.initOnList() } else if (t===1) { this.initInList() } else if (t===2) { this.initOnList() } this.$forceUpdate() }, GetBranchAccountList: function () { //收款方式 this.apipost('Financial_post_GetBranchAccountList', {}, res=>{ if(res.data.resultCode==1){ let List = res.data.data; this.AccList = List; }else{ this.$message.error(res.data.message); } },err=>{}) }, AccountType_post_GetList: function (){ //获取收款方式类型下拉 this.apipost('AccountType_post_GetList', {}, res=>{ if(res.data.resultCode==1){ let List = res.data.data; this.shouAccList = List; }else{ this.$message.error(res.data.message); } },err=>{}) }, FinancialInstitutions_post_GetAccountList: function (out, index, Type, id) { if (!id) return this.queryAccMsg.TypeId = id this.queryAccMsg.BankType = Type this.apipost('FinancialInstitutions_post_GetALLAccountList', this.queryAccMsg, res=>{ if(res.data.resultCode==1){ let List = res.data.data; List.forEach(x => { x.allName = x.BackNo+"("+x.Alias+")"; }); if (out===1) { this.inList[index].shouAccNumList = List } else { this.outList[index].shouAccNumList = List } this.$forceUpdate() }else{ this.$message.error(res.data.message); } },err=>{}) }, getAccInfo: function (type, i, id) { if (type===1) { this.inList[i].shouAccNumList.forEach(x=>{ if (x.ID === id) { this.inList[i].Rate = x.Rate this.inList[i].AccountId = x.ID this.inList[i].CurrencyId = x.CurrencyId this.inList[i].CurrencyName = x.CurrencyName } }) } else { this.outList[i].shouAccNumList.forEach(x=>{ if (x.ID === id) { this.outList[i].Rate = x.Rate this.outList[i].AccountId = x.ID this.outList[i].CurrencyId = x.CurrencyId this.outList[i].CurrencyName = x.CurrencyName } }) } }, uploadFileBtn: function (file) { //上传 if(file.file.size > 1024 * 1024 * 10) { this.$message.warning(this.$t('tips.wjdxbncgsz')) return } // 1 文档 2 数据 3 图片 let typeArr=[ {stringArr:'GIF|JPG|JPEG|PNG|BMP',type:3}, {stringArr:'DOCX|DOC|XLSX|XLS|PPT|PPTX|PDF',type:1}, ] let ft=file.file.name.substring(file.file.name.lastIndexOf('.')+1,file.file.name.length).toUpperCase(); let fileTypeNumber = 2; let typeOk = false; typeArr.forEach(x=>{ if(x.stringArr.indexOf(ft)!='-1') { fileTypeNumber=x.type typeOk = true; } }) if (!typeOk) return this.$message.error(this.$t('tips.qscWEfile')); let newArr = []; newArr.push(file.file) let path = "/Upload/Temporary/" this.$message.info(this.$t('tips.shangchuanzhong')) this.UploadSelfFileT(path, newArr, x => { let fileSize = file.file.size<1024? file.file.size:(file.file.size / 1024).toFixed(0); if (this.inUploadTrue) { this.inList[this.inUploadIndex].vorcherInos.push({ Content: x.data.FilePath, ID:0, Type:fileTypeNumber, Url:this.domainManager().ViittoFileUrl + x.data.FilePath, }) } else { this.outList[this.inUploadIndex].vorcherInos.push({ Content: x.data.FilePath, ID:0, Type:fileTypeNumber, Url:this.domainManager().ViittoFileUrl + x.data.FilePath, }) } this.$message.success(thi.$t('fnc.scchenggong')); }); }, deleteUploadFile: function (type, i , ind) { // 删除上传文件 if (type===1) { this.inList[i].vorcherInos.splice(ind, 1) } else { this.outList[i].vorcherInos.splice(ind, 1) } }, showUpLoadFile(i){ // 预览上传文件 if(i.Type==3){ this.picIsShow= true; let isExsit=false this.images.forEach(x=>{ if(x==i.Url) isExsit=true }) if(!isExsit) { this.images.push(i.Url) } else { this.$viewer.view(this.images.indexOf(i.Url)) } this.$viewer.show() }else{ if(i.Content.substring(i.Content.lastIndexOf('.')+1,i.Content.length).toUpperCase()=='PDF'){ this.previewPDF(i.Url) }else{ window.open("https://view.officeapps.live.com/op/view.aspx?src="+i.Url) } } }, inited (viewer){ this.$viewer = viewer }, }, mounted(){ this.GetBranchAccountList() this.AccountType_post_GetList() } } </script>