<style scoped> .currentManage .addCompany {width: 440px;} /* 币种管理 */ .cm_content{padding:0;overflow-x: auto;} .cmc_item{float: left;width:212px;height: 195px;background:rgba(255,255,255,1);border-radius:4px;overflow: hidden;margin-right: 12px;margin-bottom: 15px;border: 1px solid #ebebeb} .cmci_top{background-color: #3AD892;padding: 14px 20px;font-size: 14px;color: #009251} .cmci_top p span:nth-child(2){display: inline-block;padding: 2px 5px;font-size: 12px;color: #FFFFFF;background-color: #02AE62;border-radius:4px;margin-left: 5px;vertical-align:top;} .cmci_cen{padding: 14px 20px;color: #666666;font-size: 12px} .cmci_cen p{padding: 4px 0;} .cmci_cen p .fr{font-weight: bold;font-family: "PingFangSC-fine";color: #333333} .cmci_cen p .icon-shuaxin{background-color: #E7E7E7;color: #999999;display: inline-block;margin-left: 5px;border-radius: 50%;font-size: 12px;transform: rotate(60deg);cursor: pointer;transition: all linear 0.2s;width: 12px;height: 12px;line-height: 12px;} .cmci_cen p .icon-shuaxin:hover{background-color: #E95252;color: white;} .fc_green{color: #47BF8C !important} .fc_red{color: #E95252 !important} .cmci_bot{padding:0 20px 20px 20px;font-size: 12px !important;text-align: center} .cmci_bot .el-button-group .el-button{padding: 4px;} .cmci_bot .el-button{font-size: 12px !important} .cmc_item:hover{box-shadow:0px 0px 20px rgba(191,191,191,1);transition: all linear 0.5s;} ._benwei{background-color: #2AAEF2!important;color: #0877B0!important} ._benweiA{background-color: #0F80BA!important} ._underline{text-decoration: underline;cursor: pointer;} .currentManage ._vMG_edit{overflow: auto;display: none;position:absolute;font-family: 'PingFangSc-Fine';bottom:0;left: 0;border-top:1px solid #d1d1d1;background-color:#FFFFFF;padding: 10px;width: 100%;} .currentManage ._vMG_edit ._tit{padding-left: 10px;border-left: 3px solid #E95252; font-size: 16px;color: #000000} .currentManage ._vMG_edit ._tit span{color: #666666;font-size: 14px;} ._edHeight{height:400px;} .edHeight{display: block !important;height: 230px;} ._scrollbar::-webkit-scrollbar{width: 4px;height: 8px;} ._scrollbar::-webkit-scrollbar-thumb{border-radius: 4px;box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);background: #c9c9c9;} ._scrollbar::-webkit-scrollbar-track{box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);border-radius: 4px;background: #EDEDED;} .currentManage ._info_box ul{margin-top: 15px} .currentManage ._info_box ul li{float: left; width: 250px;} ._max_width{max-width: 100px; overflow:hidden;text-overflow: ellipsis;white-space: nowrap;display: inline-block;vertical-align:top;} ._yingkui{height: 40px;line-height: 40px;font-size: 12px;color: #666666} ._tips{font-size: 12px;color: #666666;padding: 15px 0} .currentManage .po_content{ border-collapse: collapse; } .currentManage .po_content{ width: 100%; } .currentManage .po_content tr:first-child{ font-size: 12px; color: #666666; background-color: #DCDCDC; } .currentManage .po_content tr th,.currentManage .po_content tr td{ padding: 10px 20px; text-align: left; } .currentManage .po_content tr td{ color: #333333; font-size: 14px; border:1px solid #E6E6E6; } .currentManage .po_content tr td .iconfont{ font-size: 14px; padding: 4px; } .currentManage .query-box .iconfont{ cursor: pointer; background-color: #E95252; color: white; width: 30px; height: 30px; display: inline-block; text-align: center; line-height: 30px; border-radius: 50%; margin-left: 10px; } .currentManage ._yuan{ width:12px; height:12px; background:rgba(233,82,82,1); border-radius:50%; display: inline-block; } .currentManage ._yuan._yuan_red{ background:#47BF8C; } ._flex_rete{ cursor: pointer; } .display_none{ opacity: 0; } ._flex_rete .icon-qiehuan{ background-color: #E5E5E5; color: white; height: 20px; width: 20px; border-radius: 50%; text-align: center; font-size: 12px; padding: 0 !important; line-height: 20px; float: right; } ._flex_rete .icon-qiehuan:hover{ background-color: rgba(233,82,82,1); color: white; } </style> <template> <div class="flexOne currentManage"> <div class="query-box"> <ul> <li> <span> <em>{{$t('system.table_currencyName')}}</em> <el-input placeholder="" class="w210" v-model="msg.Name"></el-input> </span> </li> <li> <span> <em>{{$t('system.table_currencyCode')}}</em> <el-input placeholder="" class="w210" v-model="msg.Code"></el-input> </span> </li> <li> <button class="hollowFixedBtn" @click="resetPageIndex(),initTableInfo()">{{$t('pub.searchBtn')}}</button> <button class="normalBtn" @click="addShow=true,addCuren=true" >{{$t('system.btn_addCoin')}}</button> <el-tooltip class="item" effect="dark" :content="$t('fnc.qhpaiban')" placement="top-end"> <i v-if="transitionShow" class="iconfont icon-biaoge" @click="switchMethod(1)"></i> <i v-if="transitionShow2" class="iconfont icon-icon-ssan" @click="switchMethod(2)"></i> </el-tooltip> </li> </ul> </div> <div class="cm_content _scrollbar" :class="addShow==true?'_edHeight':''"> <p class="_tips">{{$t('tips.sxhuilv')}}</p> <div class="clearfix" v-if="transitionShow" v-loading="loading2"> <div class="cmc_item" v-for="(item,index) in tableInfo"> <div class="cmci_top" :class="item.IsStandardCurrency==1?'':'_benwei'"> <p> <el-tooltip class="item" effect="dark" :content="item.Name+item.Code" placement="top-start"> <span class="_max_width">{{item.Name}}{{item.Code}}</span> </el-tooltip> <span :class="item.IsStandardCurrency==1?'':'_benweiA'">{{item.StandardCurrency}}</span> </p> </div> <div class="cmci_cen"> <p class="clearfix"><span class="fl">{{$t('fnc.benqihuilv')}}</span><span class="fr">{{item.Rate}}</span></p> <p class="clearfix"><span class="fl">{{$t('fnc.danqgianhuilv')}} <i class="iconfont icon-shuaxin" v-if="item.IsStandardCurrency!=1" @click="getCurrentRate(item.ID,index)"></i></span><span class="fr fc_green">{{item.CurrentRate}}</span></p> <p class="clearfix"><span class="fl">{{$t('fnc.zjinyue')}}</span><span class="fr _underline" @click="goUrl('FineBalance',item.ID,item.Name)">{{item.Money}}</span></p> </div> <div class="cmci_bot"> <el-button-group> <el-button type="primary" @click="editCurency(item.ID)">{{$t('pub.updateMsg')}}</el-button> <el-button type="danger" @click="financeinfoRemove(item.ID,item.Name)">{{$t('system.table_delete')}}</el-button> <el-button type="warning" v-if="item.IsStandardCurrency!=1" @click="setStandardTips(item.ID,item.Name)">{{$t('fnc.benwei')}}</el-button> </el-button-group> </div> </div> </div> <table class="po_content singeRowTable" style="border:1px solid #E6E6E6;" cellspacing="0" cellpadding="0" v-if="transitionShow2" v-loading="loading2"> <tr> <th>{{$t('system.table_currencyName')}}</th> <th>{{$t('system.table_currencyCode')}}</th> <th>{{$t('fnc.sfbenweibi')}}</th> <th>{{$t('fnc.chushihuilv')}}</th> <th>{{$t('fnc.benqihuilv')}}</th> <th>{{$t('objFill.xianchaomaicj')}}</th> <!-- <th>现汇买入价</th> --> <th>{{$t('objFill.xianchaomarj')}}</th> <!-- <th>现汇卖出价</th> --> <th>{{$t('objFill.shangtiaohl')}}</th> <th>{{$t('fnc.zjjiner')}}</th> <th>{{$t('system.table_operation')}}</th> </tr> <tr v-for="(item,index) in tableInfo" :key="index"> <td>{{item.Name}}</td> <td>{{item.Code}}</td> <td> <span class="_yuan" :class="item.IsStandardCurrency==1?'':'_yuan_red'" v-if="item.Type!=1"></span> </td> <td > {{item.Rate}} </td> <td>{{item.CurrentRate}}</td> <td class="_flex_rete"> <span>{{item.CurrentRate}}</span> <span :class="item.IsStandardCurrency!=1?'':'display_none'" @click="getCurrentRate(item.ID,index)" class="iconfont icon-qiehuan"></span> </td> <!-- <td>{{item.InCashRate}}</td> --> <td>{{item.OutCashRate}}</td> <!-- <td>{{item.OutRemitRate}}</td> --> <td>{{item.ExchangeRates}}</td> <td><span class="_underline" @click="goUrl('FineBalance',item.ID,item.Name)">{{item.Money}}</span></td> <td> <el-button-group size='mini'> <el-tooltip class="item" effect="dark" :content="$t('system.table_edit')" placement="top-start"> <el-button type="primary" class="iconfont icon-bianji-smal" @click="editCurency(item.ID),text=$t('system.table_edit')"></el-button> </el-tooltip> <el-tooltip class="item" effect="dark" :content="$t('system.table_delete')" placement="top-start"> <el-button type="danger" class="iconfont icon-img_delete_small" @click="financeinfoRemove(item.ID,item.Name)"></el-button> </el-tooltip> <el-tooltip class="item" effect="dark" :content="$t('fnc.szbweibi')" placement="top-start"> <el-button type="warning" class="iconfont" v-if="item.IsStandardCurrency!=1" @click="setStandardTips(item.ID,item.Name)">{{$t('Airticket.Air_ben')}}</el-button> </el-tooltip> <el-tooltip class="item" effect="dark" :content="$t('objFill.lishihl')" placement="top-start"> <el-button type="warning" class="iconfont" @click="GoUrlHis('HistoryRateQuery',item)">{{$t('objFill.li')}}</el-button> </el-tooltip> </el-button-group> </td> </tr> </table> <div class="noData" v-show="noData"> {{$t('system.content_noData')}} </div> <div> <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" layout="total,prev, pager, next, jumper" :page-size=msg.pageSize :total=total> </el-pagination> </div> </div> <div class="_vMG_edit" :class="addShow==true?'edHeight':''"> <p class="_tit">{{$t('fnc.xzengbizhong')}}</p> <el-form class="_info_box clearfix" :model="addMsg" ref="addMsg" :rules="rules" label-width="100px"> <ul class="clearfix" > <li> <el-form-item :label="$t('fnc.b_hbmingcheng')" prop="Name"> <el-input v-model="addMsg.Name" class="w135"></el-input> </el-form-item> </li> <li> <el-form-item :label="$t('fnc.b_hbdaima')" prop="Code"> <el-input v-model="addMsg.Code" class="w135"></el-input> </el-form-item> </li> <li v-if="ed==false"> <el-form-item :label="$t('fnc.b_cshuilv')" prop="Rate"> <el-input v-model="addMsg.Rate" class="w135"></el-input> </el-form-item> </li> <li v-else> <el-form-item :label="$t('fnc.b_cshuilv')" prop="Rate"> <el-input v-model="addMsg.Rate" disabled class="w135"></el-input> </el-form-item> </li> <li> <el-form-item :label="$t('objFill.shangtiaohl')" prop="ExchangeRates"> <el-input v-model="addMsg.ExchangeRates" class="w135"></el-input> </el-form-item> </li> <li> <el-form-item :label="$t('fnc.sfbenweibi')+ ':'"> <el-switch v-model="addMsg.IsStandardCurrency" active-value='1' inactive-value='0' active-color="#4BCA81" size=mini></el-switch> </el-form-item> </li> </ul> </el-form> <div> <ul class="clearfix" style="text-align: right;"> <li class="_add_saveBtn" style="float: initial;" > <button type="button" class="normalBtn" @click="submitForm('addMsg',1)">{{$t('pub.saveBtn')}}</button> <button class="hollowFixedBtn" type="button" @click="cancelEdit(),resetForm('addMsg')">{{$t('pub.cancelBtn')}}</button> </li> </ul> </div> </div> <div class="_vMG_edit" :class="addCuren==false?'edHeight':''"> <p class="_tit">{{$t('fnc.qmtiaohui')}}</p> <el-form class="_info_box clearfix" :model="SetProfitLossMsg" ref="SetProfitLossMsg" :rules="rules" label-width="100px"> <ul class="clearfix"> <li> <el-form-item :label="$t('fnc.b_qchuilv')"> <el-input v-model="SetProfitLossMsg.initRate" disabled="" class="w135"></el-input> </el-form-item> </li> <li> <el-form-item :label="$t('fnc.qmhuilv')" prop="EndRate"> <el-input v-model="SetProfitLossMsg.EndRate" @change="Calculation()" class="w135"></el-input> </el-form-item> </li> <li> <el-form-item :label="$t('fnc.xzqishu')" prop="TermNum"> <el-date-picker class="w135" :picker-options="pickerOptions1" v-model="SetProfitLossMsg.TermNum" value-format="yyyy-MM-dd" type="month" :laceholder="$t('admin.admin_choDate')"> </el-date-picker> </el-form-item> </li> <li class="_yingkui"> <p v-if="moneyDate.ProfitLoss<0">{{$t('fnc.yingkui')}}<span class="fc_red">{{moneyDate.ProfitLoss}}</span></p> <p v-if="moneyDate.ProfitLoss>0">{{$t('fnc.yingli')}}<span class="fc_green">{{moneyDate.ProfitLoss}}</span></p> <p v-if="moneyDate.ProfitLoss==0">{{$t('fnc.yingkui')}}<span class="fc_green">0</span></p> </li> </ul> </el-form> <div> <ul class="clearfix" style="text-align: right;"> <li class="_add_saveBtn" style="float: initial;" > <button type="button" class="normalBtn" @click="submitForm('SetProfitLossMsg',2)">{{$t('fnc.qrtijiao')}}</button> <button class="hollowFixedBtn" type="button" @click="cancelEdit(),resetForm('SetProfitLossMsg')">{{$t('pub.cancelBtn')}}</button> </li> </ul> </div> </div> </div> </template> <script> export default { data() { return { msg:{ pageIndex:1, pageSize:14, Name:'', Code:'' }, addMsg:{ ID:0, Name:'', IsStandardCurrency:'0', Code:'', Rate:'', ExchangeRates:'' }, SetProfitLossMsg:{ ID:0, AccountID:0, EndRate:'', TermNum:'', CurrencyId:'', initRate:'', Money:'', ProfitLoss:0, }, moneyDate:{ Money : 0, LastR : 0, currentR : 0, LastM : 0, currentM : 0, ProfitLoss : 0 }, total:0, currentPage: 1, loading2:true, airlineList:'', tableInfo:'', addShow:false, addCuren:true, ed:false, noData:false, dialogTitle: '', deleteID:'', ProfitLossList:[], pickerOptions1:{ disabledDate(time) { // return time.getTime()==time.getTime(); } }, rules: {//表单必填验证 Name: [ { required: true, message: this.$t('rule.qtxhbmingcheng'), trigger: 'blur' } ], Code: [ { required: true, message: this.$t('rule.qtxhbdaima'), trigger: 'blur' } ], Rate:[ { required: true, message: this.$t('rule.qsrhuilv'), trigger: 'blur' } ], TermNum:[ { required: true, message: this.$t('rule.qxzqishu'), trigger: 'blur' } ], EndRate:[ { required: true, message: this.$t('rule.qtxqmhuilv'), trigger: 'blur' } ] }, transitionShow:false, transitionShow2:true, contenWidth:0, contenHeight:0, tableSize:0, blockSize:0, } },created(){ let allH,allW,cH,cW; allH = document.documentElement.clientHeight; allW = document.documentElement.clientWidth; cW = allW-90; cH = allH-260; // = 50 40 75 46 49 this.contenWidth = cW; this.contenHeight = cH; this.tableSize = this.msg.pageSize = parseInt(cH/45); }, methods: { GoUrlHis(path,item){ this.$router.push({ name: path, query: { blank: "y", CurrencyId: item.ID } }); }, switchMethod(t){ this.msg.pageIndex = 1; if(t===1){ this.transitionShow = false; this.transitionShow2 = true; this.msg.pageSize = this.tableSize; this.initTableInfo(); }else if(t===2){ this.transitionShow = true; this.transitionShow2 = false; // 宽 220 高 153 let cont = parseInt(this.contenWidth/220) * parseInt(this.contenHeight/153); this.msg.pageSize = cont-1; this.initTableInfo(); } }, getProfitLossList(id){// 获取禁用时间 this.apipost('FinanceInfo_post_GetProfitLossList',{CurrencyId:id}, res => { if(res.data.resultCode == 1) { this.ProfitLossList = res.data.data // new Date(this.ProfitLossList[0].TermNum).getTime() } else { this.tips(res.data.message,'error'); } }, err => {}) }, regNum(n,t){ // 判断数字 n 值 t 类型 let reg = /^\d+(\.\d{0,6})?$/ if(!n)return 0 if(t==2){ if(reg.test(n)){ return Number(n) } return 0; }else if(t==1){ if(reg.test(n)){ return Number(n) } return 0 } }, Calculation(){ // 计算盈亏 this.moneyDate.Money = this.regNum(this.SetProfitLossMsg.Money,1), this.moneyDate.LastR = this.regNum(this.SetProfitLossMsg.initRate,1), this.moneyDate.currentR = this.regNum(this.SetProfitLossMsg.EndRate,2), this.moneyDate.LastM = 0, this.moneyDate.currentM = 0, this.moneyDate.ProfitLoss = ((this.moneyDate.currentR-this.moneyDate.LastR)*this.moneyDate.Money).toFixed(2); }, financeinfoRemove(id,text){ // 删除货币 this.$confirm(this.$t('tips.qrsc')+text+this.$t('tips.huobi'), this.$t('tips.tips'), { confirmButtonText: this.$t('pub.sureBtn'), cancelButtonText: this.$t('pub.cancelBtn'), type: 'warning' }).then(() => { this.apipost('financeinfo_post_Remove',{ID:id}, res => { if(res.data.resultCode == 1) { this.initTableInfo() this.tips(res.data.message,'success'); } else { this.tips(res.data.message,'error'); } }, err => {}) }).catch(() => { this.$message({ type: 'info', message: this.$t('hotel.hotel_HasBeenCancelled') }); }); }, editCurency(id){ // 修改货币信息 this.apipost('financeinfo_post_Get',{ID:id}, res => { if(res.data.resultCode == 1) { this.addMsg = res.data.data this.addMsg.IsStandardCurrency = this.addMsg.IsStandardCurrency.toString() this.addShow = true this.ed = true } else { this.tips(res.data.message,'error'); } }, err => {}) }, cancelEdit(t){ // 取消修改、新增 this.addMsg = { ID:0, Name:'', IsStandardCurrency:0, Code:'', Rate:'' } this.SetProfitLossMsg={ ID:0, EndRate:'', TermNum:'', CurrencyId:'', initRate:'', Money:'' } if(!t){ this.addShow=false this.ed = false this.addCuren = true } }, setStandardTips(id,text){ // 设置本位币提示 this.$confirm(this.$t('tips.qrszwbwbb')+text, this.$t('tips.tips'), { confirmButtonText: this.$t('pub.sureBtn'), cancelButtonText: this.$t('pub.cancelBtn'), type: 'warning' }).then(() => { this.setStandard(id) }).catch(() => { this.$message({ type: 'info', message: this.$t('hotel.hotel_HasBeenCancelled') }); }); }, setStandard(id){ //设置本位币 this.apipost('financeinfo_post_SetStandard',{ID:id}, res => { if(res.data.resultCode == 1) { this.tips(res.data.message,'success'); this.initTableInfo(); } else { this.tips(res.data.message,'error'); } }, err => {}) }, getCurrentRate(id,index){// 更新汇率 this.apipost('financeinfo_post_GetCurrentRate',{ID:id}, res => { if(res.data.resultCode == 1) { this.tips(res.data.message,'success'); this.initTableInfo() } else { this.tips(res.data.message,'error'); } }, err => {}) }, initTableInfo(){ this.tableInfo = []; this.loading2 = true; this.apipost('financeinfo_post_GetPageList',this.msg, res => { if(res.data.resultCode == 1) { let data = res.data.data.pageData; this.total = res.data.data.count; this.loading2 = false; if(this.total>0){ this.noData =false; }else{ this.noData =true; } data.forEach(x=>{ x.YMoney = x.Money x.Money = this.$commonUtils.addCommas(x.Money.toFixed(2)) if(x.ProfitLossMoney>0) x.ProfitLossMoneyS = this.$commonUtils.addCommas(x.ProfitLossMoney.toFixed(2)) }) this.tableInfo = data } else { this.tips(res.data.message,'error'); } }, err => {this.loading2 = false;}) }, handleCurrentChange(val) { this.msg.pageIndex = val; this.initTableInfo(); }, resetPageIndex(){ this.msg.pageIndex=1; this.currentPage = 1 }, SetProfitLoss(){ //币种调汇 this.apipost('FinanceInfo_post_SetProfitLoss',this.SetProfitLossMsg, res => { if(res.data.resultCode == 1) { this.tips(res.data.message,'success'); this.initTableInfo(); this.addShow =false this.addCuren = true this.ed =0 } else { this.tips(res.data.message,'error'); } }, err => {}) }, addFlightmodule(){ //添加币种 this.apipost('financeinfo_post_Set',this.addMsg, res => { if(res.data.resultCode == 1) { this.tips(res.data.message,'success'); this.initTableInfo(); this.addShow =false this.ed =false this.cancelEdit() } else { this.tips(res.data.message,'error'); } }, err => {}) }, updateInfo(ID){ //修改模板信息 let msg = { ID:ID } this.apipost('currency_get_Get', msg, res => { if(res.data.resultCode == 1) { this.addMsg = res.data.data; } else { } }, err => {}) }, isdelete(ID){ this.deleteID = ID; this.$confirm(this.$t('tips.shifoushanchu'), this.$t('tips.tips'), { confirmButtonText: this.$t('pub.sureBtn'), cancelButtonText: this.$t('pub.cancelBtn'), type: 'warning' }).then(() => { this.$message({ type: 'success', message: this.$t('tips.shanchuchenggong') }); this.delInfo(); }).catch(() => { this.$message({ type: 'info', message: this.$t('hotel.hotel_HasBeenCancelled') }); }); }, delInfo(){ let msg = { ID:this.deleteID } this.apipost('currency_post_Remove', msg, res => { if(res.data.resultCode == 1) { this.tips(this.$t('tips.shanchuchenggong'),'success'); this.innerVisible = false; this.initTableInfo(); } else { this.tips(this.$t('tips.shanchushibai'),'success'); } }, err => {}) }, submitForm(addMsg,type) {//提交创建、修改表单 let that = this; that.$refs[addMsg].validate((valid) => { if (valid) { if(type==1){ that.addFlightmodule() }else{ that.SetProfitLoss() } } else { return false; } }); }, resetForm(formName) {//弹出框取消 初始化谈框内表单 this.$refs[formName].resetFields(); }, tips(msg,type) { this.$message({ message: msg, duration:2000, type: type }); }, goUrl (path,id,name) { this.$router.push({ name: path,query:{"id":id,'name':name} }) } }, mounted(){ this.initTableInfo(); } } </script>