1

src/components/FinancialModule/HelpBranch/components/bindListData.vue

+
+  <template>
+    <div>
+      <el-dialog :title="`已选数据${dataList.length}条`"
+      :visible.sync="showDialog" center @close="close"
+      width="1000px">
+      <div >
+        <el-form class="_info_box clearfix"  label-width="110px">
+              <el-row >
+                  <el-col :span="6">
+                      <el-form-item label="单号：">
+                          <el-input placeholder="" class="" v-model="bindMsg.FrID"  maxlength="8"  
+                          @keyup.enter.native="checkInteger(bindMsg,'FrID'),clicksubmit()"></el-input>
+                      </el-form-item>
+                  </el-col>
+                </el-row>
+              </el-form>
+      </div>
+
+      <div style="max-height: 400px;overflow: auto;">
+        <el-table
+        :data="dataList"
+        tooltip-effect="dark"
+        style="width: 100%;"
+      >
+        <el-table-column
+          label="单号"
+          width="120">
+          <template slot-scope="scope">
+            <span>{{ scope.row.FrID }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="单据类型"
+          width="120">
+          <template slot-scope="scope">
+            <span v-if="scope.row.Type==2" style="display: inline-block;
+              padding: 2px 8px;
+              color: white;
+              background-color: #E95252;
+              line-height: 16px;
+              border-radius: 4px;">
+              支出
+          </span>
+          <span v-if="scope.row.Type==1" style="display: inline-block;
+              padding: 2px 8px;
+              color: white;
+              background-color: #2BB87C;
+              line-height: 16px;
+              border-radius: 4px;">
+              收入
+          </span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop=""
+          label="原币金额"
+          show-overflow-tooltip width="150">
+          <template slot-scope="scope">
+            {{scope.row.WBMoney?scope.row.WBMoney+'/'+scope.row.CurrencyName:''}}
+          </template>
+          </el-table-column>
+          <el-table-column
+          prop=""
+          label="本位币金额"
+          show-overflow-tooltip width="150">
+          <template slot-scope="scope">
+            {{scope.row.Money}}
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop=""
+          label="明细"
+          show-overflow-tooltip>
+          <template slot-scope="scope">
+            <div v-for="(x,index) in scope.row.DetailList" class="DetailList-box">
+              <p><span>费用:</span>{{x.CostTypeName}} &nbsp;</p>
+              <p><span>原币:</span>{{x.OriginalMoney}}&nbsp;</p>
+              <p><span>汇率:</span>{{x.Rate}} &nbsp;</p>
+              <p><span>本位币:</span>{{x.Money}}</p>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      </div>
+        <div class="totalMoney-box" v-if="OriginalMoneyThe!=0">
+          <div>
+            <span style="display: inline-block;
+              padding: 2px 8px;
+              color: white;
+              background-color: #E95252;
+              line-height: 16px;
+              border-radius: 4px;">
+              支出
+          </span>
+          </div>
+          <div>
+            <span>原币合计：</span>
+            <span style="color: red;">{{OriginalMoneyThe}}</span>
+          </div>
+          <template v-if="isHandlingChargeThe">
+            <div v-if="HandlingChargeMoneyThe">
+              <span>手续费合计：</span>
+              <span style="color: red;">{{HandlingChargeMoneyThe}}</span>
+            </div>
+          </template>
+        </div>
+        <div class="totalMoney-box" v-if="OriginalMoneyClosed!=0" :style="{padding: OriginalMoneyThe!=0&&isHandlingChargeThe?'0':'10px 0'}">
+          <div>
+            <span style="display: inline-block;
+              padding: 2px 8px;
+              color: white;
+              background-color: #2BB87C;
+              line-height: 16px;
+              border-radius: 4px;">
+              收入
+          </span>
+          </div>
+          <div>
+            <span>原币合计：</span>
+            <span style="color: red;">{{OriginalMoneyClosed}}</span>
+          </div>
+          <template v-if="isHandlingChargeClosed">
+            <div v-if="HandlingChargeMoneyClosed">
+              <span>手续费合计：</span>
+              <span style="color: red;">{{HandlingChargeMoneyClosed}}</span>
+            </div>
+          </template>
+        </div>
+        <div class="totalMoney-box" v-if="isHandlingChargeThe">
+          <div>
+            <span>手续费差额：</span>
+            <div>
+              <el-input v-model="balanceMoney" type="Number" placeholder="请输入手续费差额"></el-input>
+            </div>
+          </div>
+        </div>
+        <div slot="footer" class="dialog-footer">
+          <el-button class="hollowFixedBtn" @click="close">{{$t('pub.cancelBtn')}}</el-button>
+          <input type="button" class="normalBtn" value="确认关联" @click="goAddurl('addCapitalAllocation',1)"/>
+          <!-- <el-button class="normalBtn" type="primary" @click="clicksubmit">{{$t('pub.sureBtn')}}生成</el-button> -->
+        </div>
+      </el-dialog>
+    </div>
+  </template>
+  <script>
+  export default {
+    name:'bindListData',
+    props: ['multipleSelection'],
+    data() {
+      return {
+        showDialog: true,
+        dataList: [],
+        frIds:'',
+        OriginalMoney: 0,//原币合计
+        OriginalMoneyThe: 0,//原币合计支
+        OriginalMoneyClosed: 0,//原币合计付
+        balanceMoney: null,//差额
+        isHandlingCharge: false,//是否有手续费
+        isHandlingChargeThe: false,//是否有手续费支
+        isHandlingChargeClosed: false,//是否有手续费付
+        HandlingChargeMoney: null,//手续费
+        HandlingChargeMoneyThe: null,//手续费支
+        HandlingChargeMoneyClosed: null,//手续费付
+        bindMsg:{
+          FrID:0,
+                }
+      };
+    },
+    watch: {
+      multipleSelection:{
+        handler(val, oldval) {
+          this.dataList = JSON.parse(JSON.stringify(val))
+          this.OriginalMoney = 0
+          let OriginalMoney = 0
+          let HandlingChargeMoney = 0
+
+          this.OriginalMoneyThe = 0
+          let OriginalMoneyThe = 0
+          let HandlingChargeMoneyThe = 0
+
+          this.OriginalMoneyClosed = 0
+          let OriginalMoneyClosed = 0
+          let HandlingChargeMoneyClosed = 0
+          this.frIds= this.dataList.map(row => row.FrID).join(',')
+          console.log("  this.frIds",this.frIds);
+          this.dataList.forEach(x=>{
+           
+            if(x.Type==2){
+              x.DetailList.forEach(y=>{
+                if(y.CostTypeId==114){
+                  this.isHandlingChargeThe = true
+                  HandlingChargeMoneyThe += (y.OriginalMoney*100)
+                }if(y.CostTypeId!=114){
+                  OriginalMoneyThe += (y.OriginalMoney*100)
+                }
+              })
+            }
+            if(x.Type==1){
+              x.DetailList.forEach(y=>{
+                if(y.CostTypeId==114){
+                  this.isHandlingChargeClosed = true
+                  HandlingChargeMoneyClosed += (y.OriginalMoney*100)
+                }if(y.CostTypeId!=114){
+                  OriginalMoneyClosed += (y.OriginalMoney*100)
+                }
+              })
+            }
+          })
+          this.OriginalMoney = (OriginalMoneyThe-OriginalMoneyClosed)/100
+          this.HandlingChargeMoney = (HandlingChargeMoneyThe-HandlingChargeMoneyClosed)/100
+          //支出
+          this.OriginalMoneyThe = OriginalMoneyThe/100
+          this.HandlingChargeMoneyThe = HandlingChargeMoneyThe/100
+          // 收入
+          this.OriginalMoneyClosed = OriginalMoneyClosed/100
+          this.HandlingChargeMoneyClosed = HandlingChargeMoneyClosed/100
+        },
+        deep: true,
+        immediate: true
+      }
+    },
+    methods: {
+
+      goAddurl(url,type){
+        this.isCapitalAllocation = false
+        if(type==1){
+          this.$router.push({ name: url,query:{fengs: 1,blank: 'y', frIds:this.frIds,tab: '新增资金调拨'}})
+        }else{
+          this.$router.push({ name: url,query:{fengs: 2,blank: 'y', frIds:this.frIds,tab: '新增资金调拨'}})
+        }
+    },
+    goURL: function (url, edit, id) {
+       this.isCapitalAllocation = false
+       this.$router.push({ name: url,query:{edit: edit, id: id, blank: 'y',frIds:this.frIds, tab: '新增资金调拨'}})
+    },
+      clicksubmit(){
+       
+       console.log("我进来啦，没刷新页面");
+      },
+      close(){
+        this.$emit('close')
+      },
+    },
+    mounted() {
+
+    }
+  };
+  </script>
+
+  <style scoped>
+.DetailList-box{
+  display: flex;
+}
+.DetailList-box p{
+  color: black;
+  margin-right: 20px;
+}
+.DetailList-box p:last-child{
+  margin-right: 0;
+}
+.DetailList-box p span{
+  margin-right: 3px;
+  color: #666666;
+}
+.totalMoney-box{
+  display: flex;
+  justify-content: end;
+  align-items: center;
+  padding: 10px 0;
+}
+.totalMoney-box>div{
+  display: flex;
+  align-items: center;
+  margin-left: 20px;
+}
+.totalMoney-box>div>span{
+  flex-shrink: 0;
+}
+  </style>