费用汇总模板

src/views/ecw/order/components/FeeDetail.vue

+<template>
+  <el-dialog visible width="1000px" title="NG23022222L费用汇总" :before-close="close">
+    <el-card>
+      <span slot="header" class="header-title">订单收费汇总</span>
+      <!--应收运费，应收清关费，应收额外费用，应收总金额
+      实收运费，实收清关费，实收额外费用，实收总额
+      运费优惠金额，清关费优惠金额，额外费用优惠金额，订单优惠金额
+      已核销总金额，已核销比例-->
+      <el-descriptions :column="4">
+        <el-descriptions-item :label="$t('应收运费')"></el-descriptions-item>
+        <el-descriptions-item :label="$t('应收清关费')"></el-descriptions-item>
+        <el-descriptions-item :label="$t('应收额外费用')"></el-descriptions-item>
+        <el-descriptions-item :label="$t('应收总金额')"></el-descriptions-item>
+        <el-descriptions-item :label="$t('实收运费')"></el-descriptions-item>
+        <el-descriptions-item :label="$t('实收清关费')"></el-descriptions-item>
+        <el-descriptions-item :label="$t('实收额外费用')"></el-descriptions-item>
+        <el-descriptions-item :label="$t('实收总额')"></el-descriptions-item>
+        <el-descriptions-item :label="$t('运费优惠金额')"></el-descriptions-item>
+        <el-descriptions-item :label="$t('清关费优惠金额')"></el-descriptions-item>
+        <el-descriptions-item :label="$t('额外费用优惠金额')"></el-descriptions-item>
+        <el-descriptions-item :label="$t('订单优惠金额')"></el-descriptions-item>
+        <el-descriptions-item :label="$t('已核销总金额')"></el-descriptions-item>
+        <el-descriptions-item :label="$t('已核销比例')"></el-descriptions-item>
+      </el-descriptions>
+    </el-card>
+    <el-card class="mt-10">
+      <span slot="header">入仓信息</span>
+      <!--仓库实测，是否重货，原重货标准，原收费数据
+      优惠重货标准，实际收费数据，货值-->
+      <el-descriptions :column="4">
+        <el-descriptions-item :label="$t('仓库实测')"></el-descriptions-item>
+        <el-descriptions-item :label="$t('是否重货')"></el-descriptions-item>
+        <el-descriptions-item :label="$t('原重货标准')"></el-descriptions-item>
+        <el-descriptions-item :label="$t('原收费数据')"></el-descriptions-item>
+        <el-descriptions-item :label="$t('优惠重货标准')"></el-descriptions-item>
+        <el-descriptions-item :label="$t('实际收费数据')"></el-descriptions-item>
+        <el-descriptions-item :label="$t('货值')"></el-descriptions-item>
+      </el-descriptions>
+    </el-card>
+    <el-card class="mt-10">
+      <span slot="header">运费&清关费</span>
+      <!--序号，中文品名，英文品名，品牌，入仓数据，是否重货，入仓数据，实收数据，应收单价，优惠单价金额，成交单价，应收运费&清关费，收款单优惠金额，总优惠金额，实收运费&清关费-->
+      <el-table :data="[]">
+        <el-table-column :label="$t('序号')" width="80">
+          <template slot-scope="scope">{{scope.$index+1}}</template>
+        </el-table-column>
+        <el-table-column :label="$t('中文品名')" width="120" prop="titleZh"></el-table-column>
+        <el-table-column :label="$t('英文品名')" width="120" prop="titleEn"></el-table-column>
+        <el-table-column :label="$t('品牌')" width="120" prop="brand"></el-table-column>
+        <el-table-column :label="$t('入仓数据')" width="120" prop="inData"></el-table-column>
+        <el-table-column :label="$t('是否重货')" width="120" prop="isHeavy"></el-table-column>
+        <el-table-column :label="$t('入仓数据')" width="120" prop="inData"></el-table-column>
+        <el-table-column :label="$t('实收数据')" width="120" prop="realData"></el-table-column>
+        <el-table-column :label="$t('应收单价')" width="120" prop="price"></el-table-column>
+        <el-table-column :label="$t('优惠单价金额')" width="120" prop="discountPrice"></el-table-column>
+        <el-table-column :label="$t('成交单价')" width="120" prop="dealPrice"></el-table-column>
+        <el-table-column :label="$t('应收运费&清关费')" width="120" prop="fee"></el-table-column>
+        <el-table-column :label="$t('收款单优惠金额')" width="120" prop="discountFee"></el-table-column>
+        <el-table-column :label="$t('总优惠金额')" width="120" prop="totalDiscountFee"></el-table-column>
+        <el-table-column :label="$t('实收运费&清关费')" width="120" prop="realFee"></el-table-column>
+      </el-table>
+    </el-card>
+    <el-card class="mt-10">
+      <span slot="header">保费</span>
+      <div>
+        订单总金额：，保费费率：应收保费：，收款优惠金额：，实收保费：
+      </div>
+    </el-card>
+    <el-card class="mt-10">
+      <span slot="header">特需</span>
+      <!--特需类型，金额，付款类型，备注，应收金额，收款优惠金额，实收美元金额，确认收款，申请人，申请时间-->
+      <el-table :data="[]" show-summary :summary-method="getSpecialSummaries">
+        <el-table-column :label="$t('特需类型')" width="120" prop="type"></el-table-column>
+        <el-table-column :label="$t('金额')" width="120" prop="fee"></el-table-column>
+        <el-table-column :label="$t('付款类型')" width="120" prop="payType"></el-table-column>
+        <el-table-column :label="$t('备注')" width="120" prop="remark"></el-table-column>
+        <el-table-column :label="$t('应收金额')" width="120" prop="shouldFee"></el-table-column>
+        <el-table-column :label="$t('收款优惠金额')" width="120" prop="discountFee"></el-table-column>
+        <el-table-column :label="$t('实收美元金额')" width="120" prop="realFee"></el-table-column>
+        <el-table-column :label="$t('确认收款')" width="120" prop="confirm"></el-table-column>
+        <el-table-column :label="$t('申请人')" width="120" prop="applyUser"></el-table-column>
+        <el-table-column :label="$t('申请时间')" width="120" prop="applyTime"></el-table-column>
+      </el-table>
+    </el-card>
+    <el-card class="mt-10">
+      <span slot="header">费用申请</span>
+      <el-table :data="[]" show-summary :summary-method="getSpecialSummaries">
+        <el-table-column :label="$t('费用类型')" width="120" prop="type"></el-table-column>
+        <el-table-column :label="$t('金额')" width="120" prop="fee"></el-table-column>
+        <el-table-column :label="$t('付款类型')" width="120" prop="payType"></el-table-column>
+        <el-table-column :label="$t('备注')" width="120" prop="remark"></el-table-column>
+        <el-table-column :label="$t('应收金额')" width="120" prop="shouldFee"></el-table-column>
+        <el-table-column :label="$t('收款优惠金额')" width="120" prop="discountFee"></el-table-column>
+        <el-table-column :label="$t('实收金额')" width="120" prop="realFee"></el-table-column>
+        <el-table-column :label="$t('确认收款')" width="120" prop="confirm"></el-table-column>
+        <el-table-column :label="$t('申请人')" width="120" prop="applyUser"></el-table-column>
+        <el-table-column :label="$t('申请时间')" width="120" prop="applyTime"></el-table-column>
+      </el-table>
+    </el-card>
+    <el-card class="mt-10">
+      <span slot="header">{{$t('优惠活动')}}</span>
+      <el-table :data="[]">
+        <el-table-column :label="$t('优惠ID')" width="120" prop="id"></el-table-column>
+        <el-table-column :label="$t('优惠名称')" width="120" prop="name"></el-table-column>
+        <el-table-column :label="$t('类型')" width="120" prop="type"></el-table-column>
+        <el-table-column :label="$t('运费优惠')" width="120" prop="fee"></el-table-column>
+        <el-table-column :label="$t('清关费优惠')" width="120" prop="clearFee"></el-table-column>
+      </el-table>
+    </el-card>
+    <el-card class="mt-10">
+      <span slot="header">{{$t('特价折扣')}}</span>
+      <el-table :data="[]">
+        <el-table-column :label="$t('商品类型')" width="120" prop="type"></el-table-column>
+        <el-table-column :label="$t('商品名称')" width="120" prop="name"></el-table-column>
+        <el-table-column :label="$t('英文名称')" width="120" prop="enName"></el-table-column>
+        <el-table-column :label="$t('线路')" width="120" prop="line"></el-table-column>
+        <el-table-column :label="$t('是否预付')" width="120" prop="isPrepay"></el-table-column>
+        <el-table-column :label="$t('旧运费')" width="120" prop="oldFee"></el-table-column>
+        <el-table-column :label="$t('新运费')" width="120" prop="newFee"></el-table-column>
+        <el-table-column :label="$t('旧清关费')" width="120" prop="oldClearFee"></el-table-column>
+        <el-table-column :label="$t('新清关费')" width="120" prop="newClearFee"></el-table-column>
+        <el-table-column :label="$t('申请人')" width="120" prop="applyUser"></el-table-column>
+        <el-table-column :label="$t('申请时间')" width="120" prop="applyTime"></el-table-column>
+      </el-table>
+    </el-card>
+  </el-dialog>
+</template>
+<script>
+export default  {
+  data(){
+    return {
+
+    }
+  },
+  methods:{
+    getSpecialSummaries(){
+      return [
+        1,2,3,4,5,5,6,7,8,9
+      ]
+    },
+    close(){
+      this.$emit('close')
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+
+</style>

src/views/ecw/order/detail.vue

@@ -253,6 +253,7 @@
           <el-button v-hasPermi="['ecw:order:show_customs']"  type="text" @click="showDeclaration=true">{{$t('查看报关资料')}}</el-button>
         </el-tab-pane>
         <el-tab-pane :label="$t('费用明细')" name="four">
+          <el-button type="primary" @click="showFeeDetail=true">{{$t('费用汇总')}}</el-button>
           <el-table :data="feeList">
             <el-table-column :label="$t('订单号')" prop="orderNo">
               <template slot-scope="{row}">
@@ -422,6 +423,8 @@
     <operate-log-detail v-if="showLogDetailId" :log-id="showLogDetailId" @close="showLogDetailId=null"></operate-log-detail>
     <!-- 报关资料 -->
     <declaration-documents v-if="showDeclaration" :order-id="order.orderId" :order-no="order.orderNo" @close="showDeclaration=false" />
+    <!--费用汇总-->
+    <fee-detail v-if="showFeeDetail" :order-id="order.orderId" @close="showFeeDetail=false" />
   </div>
 
 </template>
@@ -444,12 +447,14 @@ import {checkPermi} from '@/utils/permission'
 import OperateLogDetail from "@/views/ecw/order/components/OprateLogDetail";
 import DeclarationDocuments from './components/DeclarationDocuments';
 import ImageDisplay from "@/views/ecw/order/components/imageDisplay.vue";
+import FeeDetail from "@/views/ecw/order/components/FeeDetail.vue";
 export default {
   name: "detail",
   components: {
     ImageDisplay,
     OperateLogDetail,
-    PrintWarehouseReceipt, PrintLadingBill, WarehouseDetail, WarehouseAreaSelect,DeclarationDocuments
+    PrintWarehouseReceipt, PrintLadingBill, WarehouseDetail, WarehouseAreaSelect,DeclarationDocuments,
+    FeeDetail
   },
   filters: {
     customsTypeFilter(e, customsTypeList) {
@@ -494,7 +499,8 @@ export default {
       showMore:false,
       consigneeText:this.$t('更多'),
       showLogDetailId: null, // 显示日志详情的ID,
-      showDeclaration:false //显示报关资料
+      showDeclaration:false, //显示报关资料
+      showFeeDetail: false // 是否显示费用汇总
     }
   },
   computed:{