托书-详情/新增/编辑-增加字表合计行

src/views/book/addBookDrawer.vue

@@ -280,6 +280,13 @@
                 </a-popconfirm>
               </span>
             </a-table>
+            <div class="amount">
+               <span class="all">总数量：{{ allMount.toFixed(2) }}</span>
+               <span class="all">总箱数：{{ allBox.toFixed(2) }}</span>
+               <span class="all">总毛重：{{ allGross.toFixed(2) }}</span>
+               <span class="all">总净重：{{ allNet.toFixed(2) }}</span>
+               <span class="all">总金额：{{ allMount.toFixed(2) }}</span>
+             </div>
           </a-form-model>
 
           <!-- 人民币、美金 -->
@@ -684,6 +691,11 @@ export default {
       confirmLoading: false,
       visible: false,
       dateFormat: 'YYYY-MM-DD',
+      allMount:0,
+      allGross:0,
+      allNet:0,
+      allMoney:0,
+      allBox:0,
       itemIds:[],//参照面料选中的ID集合
       validatorRules: {
           shippingOrderDate:[{required: true, message: '托书日期不能为空!'}],
@@ -1258,6 +1270,24 @@ export default {
 
   // 出现滚动条，合计栏跟随 table 滚动
   watch: {
+    addBookData:{
+      deep: true,
+      handler(val) {
+        this.allGross = 0
+      this.allMoney = 0
+      this.allMount = 0
+      this.allNet = 0
+      this.allBox = 0
+        val.map(item=>{
+          this.allGross+=Number(item.grossWeight)
+          this.allMoney+=Number(item.totalPrice)
+          this.allMount+=Number(item.number)
+          this.allNet+=Number(item.netWeight)
+          this.allBox += Number(item.boxNumber)
+        })
+      }
+      
+      }
     // dataSource(val) {
     //   console.log(val)
     //   // 同步表与footer滚动
@@ -1323,4 +1353,15 @@ export default {
       padding-top: 8px !important;
     padding-bottom: 8px !important;
 }
+// /deep/.ant-form{
+//   position: relative;
+// }
+.amount{
+  // position:absolute;
+  // bottom: -21%;
+  width: 50%;
+}
+.all{
+  margin-right: 4%;
+}
 </style>

src/views/book/book-list.vue

@@ -324,7 +324,9 @@ export default {
     getBookList(){
       this.$nextTick(() => {
         // this.queryParam.pageSize = 50
+        this.loading = true
         bookList(this.queryParam).then(res => {
+          this.loading = false
           if (res.success) {
            this.bookListData = res.result.records
            this.selectedRowKeys = []

src/views/book/detailsBookDrawer.vue

@@ -163,13 +163,20 @@
               :columns="addBookColumns"
               :data-source="addBookData"
               :loading="loading"
-              :pagination="ipagination"
+              :pagination="false"
               :scroll="{ x: 1500,y: 350 }"
               @change="handleTableChange"
             >
             </a-table>
+            <div class="amount">
+               <span class="all">总数量：{{ allMount.toFixed(2) }}</span>
+               <span class="all">总箱数：{{ allBox.toFixed(2) }}</span>
+               <span class="all">总毛重：{{ allGross.toFixed(2) }}</span>
+               <span class="all">总净重：{{ allNet.toFixed(2) }}</span>
+               <span class="all">总金额：{{ allMount.toFixed(2) }}</span>
+             </div>
           </a-form-model>
-
+          
           <!-- 人民币、美金 -->
           <a-row style="margin:60px 0;">
             <div class="purchase-order-table" style="width:48%;marginRight:4%;float:left;">
@@ -453,6 +460,11 @@ export default {
       confirmLoading: false,
       visible: false,
       dateFormat: 'YYYY-MM-DD',
+      allMount:0,
+      allGross:0,
+      allNet:0,
+      allMoney:0,
+      allBox:0,
       validatorRules: {
           shippingOrderDate:[{required: true, message: '托书日期不能为空!'}],
           consignee:[{required: true, message: '收货人不能为空!'}],
@@ -461,6 +473,22 @@ export default {
     }
   },
   created() {},
+  watch: {
+    addBookData(val) {
+      this.allGross = 0
+      this.allMoney = 0
+      this.allMount = 0
+      this.allNet = 0
+      this.allBox = 0
+        val.map(item=>{
+          this.allGross+=Number(item.grossWeight)
+          this.allMoney+=Number(item.totalPrice)
+          this.allMount+=Number(item.number)
+          this.allNet+=Number(item.netWeight)
+          this.allBox += Number(item.boxNumber)
+        })
+      }
+    },
    filters: {
                 //文字数超出时，超出部分使用...
                 ellipsis(value) {
@@ -553,4 +581,15 @@ export default {
   border: none;
   padding: 0;
 }
+// /deep/.ant-form{
+//   position: relative;
+// }
+.amount{
+  // position:absolute;
+  // bottom: 2%;
+  width: 50%;
+}
+.all{
+  margin-right: 4%;
+}
 </style>