订单管理居间费明细

src/HDrpManagement/orderManage/details/tabs/rebatesettlement.vue

@@ -1,94 +1,54 @@
 <template>
   <div>
-    <el-descriptions class="margin-top mt-10" title="居间明细" :column="2" size="small" border>
-      <el-descriptions-item :labelStyle="{width:'120px'}" label="订单金额比例">{{rebHeadData.orderratio}}</el-descriptions-item>
-      <el-descriptions-item :labelStyle="{width:'120px'}" label="订单金额">{{rebHeadData.amount?tool.formatAmount(rebHeadData.amount,2):''}}</el-descriptions-item>
-      <el-descriptions-item :labelStyle="{width:'120px'}" label="居间产品折扣">{{rebHeadData.productdiscount}}</el-descriptions-item>
-      <el-descriptions-item :labelStyle="{width:'120px'}" label="居间费">{{rebHeadData.rebate}}</el-descriptions-item>
-      <el-descriptions-item :labelStyle="{width:'120px'}" label="结算经销商">{{rebHeadData.enterprisename}}</el-descriptions-item>
-    </el-descriptions>
-    <el-table
-      :data="tableData"
-      border
-      size="small"
-      style="width: 100%">
-      <el-table-column
-        prop="itemname"
-        label="产品"
-        width="itemname">
-      </el-table-column>
-      <el-table-column
-        prop="qty"
-        label="数量"
-        width="90">
-      </el-table-column>
-      <el-table-column
-        prop="marketprice"
-        label="牌价"
-        width="90">
-      </el-table-column>
-      <el-table-column
-        prop="discountrate"
-        label="折扣"
-        width="90">
-      </el-table-column>
-      <el-table-column
-        prop="price"
-        label="单价"
-        width="90">
-        <template slot-scope="scope">
-          {{tool.formatAmount(scope.row.price,2)}}
-        </template>
-      </el-table-column>
-      <el-table-column
-        prop="amount"
-        label="金额"
-        width="100">
-        <template slot-scope="scope">
-          {{tool.formatAmount(scope.row.amount,2)}}
-        </template>
-      </el-table-column>
-      <el-table-column
-        prop="rebate_discountrate"
-        label="居间产品折扣"
-        width="150">
-      </el-table-column>
-      <el-table-column
-        prop="rebate_price"
-        label="居间产品单价"
-        width="150">
-         <template slot-scope="scope">
-          {{tool.formatAmount(scope.row.rebate_price,2)}}
-        </template>
-      </el-table-column>
-      <el-table-column
-        prop="rebate_unit_price"
-        label="居间单价"
-        width="120">
-         <template slot-scope="scope">
-          {{tool.formatAmount(scope.row.rebate_unit_price,2)}}
-        </template>
-      </el-table-column>
-      <el-table-column
-        prop="rebate"
-        label="居间费"
-        width="120">
-        <template slot-scope="scope">
-          {{tool.formatAmount(scope.row.rebate,2)}}
-        </template>
-      </el-table-column>
-    </el-table>
-    <div class="container normal-panel" style="text-align:right">
-      <el-pagination
-        background
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        :current-page="currentPage"
-        :page-sizes="[20, 50, 100, 200]"
-        layout="total,sizes, prev, pager, next, jumper"
-        :total="total">
-      </el-pagination>
-    </div>
+    <el-tabs v-if="rebHeadData.length > 0" v-model="activeName" type="border-card" @tab-click="handleClick">
+      <el-tab-pane v-for="item in rebHeadData" :key="item.index" :label="item.title" :name="item.title">
+        <el-descriptions class="margin-top mt-10" title="居间明细" :column="2" size="small" border>
+          <el-descriptions-item :labelStyle="{width:'120px'}" label="订单金额比例">{{item.orderratio}}</el-descriptions-item>
+          <el-descriptions-item :labelStyle="{width:'120px'}" label="订单金额">{{item.amount?tool.formatAmount(item.amount,2):''}}</el-descriptions-item>
+          <el-descriptions-item :labelStyle="{width:'120px'}" label="居间产品折扣">{{Math.round((item.productdiscount * 100)*100)/100 + '%'}}</el-descriptions-item>
+          <el-descriptions-item :labelStyle="{width:'120px'}" label="居间费">{{item.rebate}}</el-descriptions-item>
+          <el-descriptions-item :labelStyle="{width:'120px'}" label="结算经销商">{{item.enterprisename?item.enterprisename:'--'}}</el-descriptions-item>
+        </el-descriptions>
+        <table-new-layout :layout="tablecols" :data="tableData" :custom="true" :width="true" height="calc(100vh - 750px)">
+          <template v-slot:customcol="scope">
+            <div v-if="scope.column.columnname === 'price'">
+              {{tool.formatAmount(scope.column.data[scope.column.columnname],2)}}
+            </div>
+            <div v-else-if="scope.column.columnname === 'amount'">
+              {{tool.formatAmount(scope.column.data[scope.column.columnname],2)}}
+            </div>
+            <div v-else-if="scope.column.columnname === 'rebate_price'">
+              {{tool.formatAmount(scope.column.data[scope.column.columnname],2)}}
+            </div>
+            <div v-else-if="scope.column.columnname === 'rebate_unit_price'">
+              {{tool.formatAmount(scope.column.data[scope.column.columnname],2)}}
+            </div>
+            <div v-else-if="scope.column.columnname === 'rebate'">
+              {{tool.formatAmount(scope.column.data[scope.column.columnname],2)}}
+            </div>
+            <div v-else-if="scope.column.columnname === 'discountrate'">
+              {{Math.round((scope.column.data[scope.column.columnname] * 100)*100)/100 + '%'}}
+            </div>
+            <div v-else-if="scope.column.columnname === 'rebate_discountrate'">
+              {{Math.round((scope.column.data[scope.column.columnname] * 100)*100)/100 + '%'}}
+            </div>
+            <p v-else>{{scope.column.data[scope.column.columnname]}}</p>
+          </template>
+        </table-new-layout>
+        <div class="container normal-panel" style="text-align:right;padding-bottom: 0">
+          <el-pagination
+              background
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="currentPage"
+              :page-sizes="[20, 50, 100, 200]"
+              layout="total,sizes, prev, pager, next, jumper"
+              :total="total">
+          </el-pagination>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+    <el-empty v-else description="暂无数据"></el-empty>
   </div>
 </template>
 
@@ -96,14 +56,17 @@
 export default {
   data () {
     return {
-      rebHeadData:{},
+      rebHeadData:[],
       tableData:[],
       param:{
         "pageNumber": 1,
         "pageSize": 20,
       },
       total:0,
-      currentPage:0
+      currentPage:0,
+      activeName:'',
+      tablecols:[],
+      sa_rebatesettlementid:''
     }
   },
   methods:{
@@ -115,13 +78,15 @@ export default {
         },
       })
       this.rebHeadData = res.data
-      this.rebHeadData.sa_rebatesettlementid?this.listData():''
+      this.activeName = res.data?res.data[0].title:''
+      this.sa_rebatesettlementid = res.data[0].sa_rebatesettlementid
+      this.sa_rebatesettlementid?this.listData():''
     },
     async listData () {
       const res = await this.$api.requested({
         "id": "20230105194902",
         "content": {
-          "sa_rebatesettlementid": this.rebHeadData.sa_rebatesettlementid,
+          "sa_rebatesettlementid": this.sa_rebatesettlementid,
           "pageNumber": this.param.pageNumber,
           "pageSize": this.param.pageSize,
           "where": {
@@ -141,9 +106,17 @@ export default {
       this.param.pageNumber = val
       this.listData()
     },
+    handleClick(tab){
+      console.log(tab.index)
+      this.sa_rebatesettlementid = this.rebHeadData[tab.index].sa_rebatesettlementid
+      this.listData(this.param.pageNumber = 1)
+    }
   },
   mounted () {
     this.headData()
+  },
+  created() {
+    this.tablecols = this.tool.tabelCol(this.$route.name).intermediaryFeeTable.tablecols
   }
 }
 

src/HDrpManagement/orderManage/details/tabs/rebatesettlementCopy.vue

@@ -0,0 +1,152 @@
+<template>
+  <div>
+    <el-descriptions class="margin-top mt-10" title="居间明细" :column="2" size="small" border>
+      <el-descriptions-item :labelStyle="{width:'120px'}" label="订单金额比例">{{rebHeadData.orderratio}}</el-descriptions-item>
+      <el-descriptions-item :labelStyle="{width:'120px'}" label="订单金额">{{rebHeadData.amount?tool.formatAmount(rebHeadData.amount,2):''}}</el-descriptions-item>
+      <el-descriptions-item :labelStyle="{width:'120px'}" label="居间产品折扣">{{rebHeadData.productdiscount}}</el-descriptions-item>
+      <el-descriptions-item :labelStyle="{width:'120px'}" label="居间费">{{rebHeadData.rebate}}</el-descriptions-item>
+      <el-descriptions-item :labelStyle="{width:'120px'}" label="结算经销商">{{rebHeadData.enterprisename}}</el-descriptions-item>
+    </el-descriptions>
+    <el-table
+      :data="tableData"
+      border
+      size="small"
+      style="width: 100%">
+      <el-table-column
+        prop="itemname"
+        label="产品"
+        width="itemname">
+      </el-table-column>
+      <el-table-column
+        prop="qty"
+        label="数量"
+        width="90">
+      </el-table-column>
+      <el-table-column
+        prop="marketprice"
+        label="牌价"
+        width="90">
+      </el-table-column>
+      <el-table-column
+        prop="discountrate"
+        label="折扣"
+        width="90">
+      </el-table-column>
+      <el-table-column
+        prop="price"
+        label="单价"
+        width="90">
+        <template slot-scope="scope">
+          {{tool.formatAmount(scope.row.price,2)}}
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="amount"
+        label="金额"
+        width="100">
+        <template slot-scope="scope">
+          {{tool.formatAmount(scope.row.amount,2)}}
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="rebate_discountrate"
+        label="居间产品折扣"
+        width="150">
+      </el-table-column>
+      <el-table-column
+        prop="rebate_price"
+        label="居间产品单价"
+        width="150">
+         <template slot-scope="scope">
+          {{tool.formatAmount(scope.row.rebate_price,2)}}
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="rebate_unit_price"
+        label="居间单价"
+        width="120">
+         <template slot-scope="scope">
+          {{tool.formatAmount(scope.row.rebate_unit_price,2)}}
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="rebate"
+        label="居间费"
+        width="120">
+        <template slot-scope="scope">
+          {{tool.formatAmount(scope.row.rebate,2)}}
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="container normal-panel" style="text-align:right">
+      <el-pagination
+        background
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage"
+        :page-sizes="[20, 50, 100, 200]"
+        layout="total,sizes, prev, pager, next, jumper"
+        :total="total">
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      rebHeadData:{},
+      tableData:[],
+      param:{
+        "pageNumber": 1,
+        "pageSize": 20,
+      },
+      total:0,
+      currentPage:0
+    }
+  },
+  methods:{
+    async headData () {
+      const res = await this.$api.requested({
+        "id": "20230105194402",
+        "content": {
+          "sa_orderid": this.$route.query.id
+        },
+      })
+      this.rebHeadData = res.data
+      this.rebHeadData.sa_rebatesettlementid?this.listData():''
+    },
+    async listData () {
+      const res = await this.$api.requested({
+        "id": "20230105194902",
+        "content": {
+          "sa_rebatesettlementid": this.rebHeadData.sa_rebatesettlementid,
+          "pageNumber": this.param.pageNumber,
+          "pageSize": this.param.pageSize,
+          "where": {
+            "condition": ""
+          }
+        },
+      })
+      this.tableData = res.data
+      this.total = res.total
+      this.currentPage = res.pageNumber
+    },
+    handleSizeChange(val) {
+      this.param.pageSize = val
+      this.listData()
+    },
+    handleCurrentChange(val) {
+      this.param.pageNumber = val
+      this.listData()
+    },
+  },
+  mounted () {
+    this.headData()
+  }
+}
+
+</script>
+<style>
+</style>