修改组件

src/components/commonPage/commonShouSun.vue

 <style>
-    .SnotSet{
+    .SnotSet,.TotalShouSun{
         color:#E95252;
     }
+    .totalShouSan{
+        position: absolute;
+        right:60px;
+        font-size:14px;
+        top:15px;
+    }
 </style>
 
 <template>
     <div>
         <table width="100%" border="0" cellspacing="0" cellpadding="0" class="singeRowTable">
-            <tr>
-                <td colspan="4">
-                    收损金额
-                </td>
-            </tr>
             <tr>
                 <td colspan="4">
                     op收损设置人数：
                     <template v-if="Type==1">
-                        <el-input class="w180" placeholder="请输入" v-model="dataList.OpSetLossPeople" type="text" ></el-input>
+                        <el-input class="w180" placeholder="请输入" @keyup.native="checkInteger(dataList,'OpSetLossPeople')" v-model="dataList.OpSetLossPeople" type="text" ></el-input>
                     </template>
                     <template v-else>{{dataList.OpSetLossPeople}}</template>
                 </td>
             </tr>
             <tr>
-                <td>
-                    op设置金额
-                </td>
                 <td>
                     票务收损金额
                 </td>
@@ -34,17 +32,14 @@
                 <td>
                     地接收损金额
                 </td>
-            </tr>
-            <tr>
                 <td>
-                    <template v-if="Type==1">
-                        <el-input class="w135" v-model="dataList.LossOPMoney" placeholder="请输入" type="text" ></el-input>
-                    </template>
-                    <template v-else>{{dataList.LossOPMoney}}</template>
+                    op补充金额
                 </td>
+            </tr>
+            <tr>
                 <td>
                     <template v-if="Type==2">
-                        <el-input class="w135" v-model="dataList.LossTicketMoney" placeholder="请输入" type="text" ></el-input>
+                        <el-input class="w135" v-model="dataList.LossTicketMoney" @keyup.native="checkPrice(dataList,'LossTicketMoney'),getTotalSun(dataList)" placeholder="请输入" type="text" ></el-input>
                     </template>
                     <template v-else>
                         <span v-if="dataList.TicketIsSet==1">{{dataList.LossTicketMoney}}</span>
@@ -53,7 +48,7 @@
                 </td>
                 <td>
                     <template v-if="Type==3">
-                        <el-input class="w135" v-model="dataList.LossVisaMoney" placeholder="请输入" type="text" ></el-input>
+                        <el-input class="w135" v-model="dataList.LossVisaMoney" @keyup.native="checkPrice(dataList,'LossVisaMoney'),getTotalSun(dataList)" placeholder="请输入" type="text" ></el-input>
                     </template>
                     <template v-else>
                         <span v-if="dataList.VisaIsSet==1">{{dataList.LossVisaMoney}}</span>
@@ -62,19 +57,31 @@
                 </td>
                 <td>
                     <template v-if="Type==4">
-                        <el-input class="w135" v-model="dataList.LossDiJieMoney" placeholder="请输入" type="text" ></el-input>
+                        <el-input class="w135" v-model="dataList.LossDiJieMoney" @keyup.native="checkPrice(dataList,'LossDiJieMoney'),getTotalSun(dataList)" placeholder="请输入" type="text" ></el-input>
                     </template>
                     <template v-else>
                         <span v-if="dataList.DiJieIsSet==1">{{dataList.LossDiJieMoney}}</span>
                         <span class="SnotSet" v-else>未设置</span>
                     </template>
                 </td>
+                <td>
+                    <template v-if="Type==1">
+                        <el-input class="w135" v-model="dataList.LossOPMoney" @keyup.native="checkPrice(dataList,'LossOPMoney'),getTotalSun(dataList)" placeholder="请输入" type="text" ></el-input>
+                    </template>
+                    <template v-else>
+                        <span v-if="dataList.OPIsSet==1">{{dataList.LossOPMoney}}</span>
+                        <span class="SnotSet" v-else>未设置</span>
+                    </template>
+                </td>
             </tr>
             <tfoot>
                 <tr>
-                    <td style="padding:10px 0" colspan="4">
+                    <td style="padding:10px 0;position:relative;" colspan="4">
                         <input type="button" class="normalBtn" @click="closeDialog()" value="取消" />
                         <input type="button" class="normalBtn" @click="setShouSun()" value="保存" />
+                        <span class="totalShouSan">
+                            收损总额：<span class="TotalShouSun">{{totalSun}}</span>
+                        </span>
                     </td>
                 </tr>
             </tfoot>
@@ -88,6 +95,7 @@
       return {
           dataList:[],
           OrderId:0,
+          totalSun:0
       };
     },
     methods: {
@@ -98,8 +106,8 @@
         }
         this.apipost("sellorder_post_GetTravelSetLossMoneyInfo",msg,res => {
             if (res.data.resultCode == 1) {
-                console.log(res,'resssss');
                 this.dataList = res.data.data;
+                this.getTotalSun(this.dataList);
             } else {
                 this.Error(res.data.message);
             }
@@ -107,6 +115,13 @@
         err => {}
         );
       },
+      //计算收损总额
+      getTotalSun(dataList){
+          if(dataList!=undefined){
+            this.totalSun = parseFloat(dataList.LossOPMoney)+parseFloat(dataList.LossTicketMoney)
+            +parseFloat(dataList.LossVisaMoney)+parseFloat(dataList.LossDiJieMoney);
+          }
+      },
       //关闭窗口
       closeDialog() {
         this.$emit("closeShouSun");
@@ -146,6 +161,7 @@
       }
     },
     mounted() {
+        
     }
   };
 </script>