yos_web/src/views/salesData/components/financialCollectionDetail.vue

<template>
  <div style=" display: inline-block !important;">
    <el-button size="mini" type="text" @click="visibleShow" :disabled="isFull">明细</el-button>
    <el-drawer
        :title="data.erpagentnum+ ' ' + data.enterprisename + '_' + unwriteoffamounttype + '未回款明细'"
        :visible.sync="visible"
        size="90%"
        direction="rtl"
        append-to-body
        @close="onClose"
    >
      <div class="drawer__panel_new">
        <div style="margin-bottom: 50px">
          <div style="float: left">
            <span class="search__label">搜索:</span>
            <el-input style="width:300px;" placeholder="订单号、部门、业务员、客户、产品、品号" :suffix-icon="param.content.where.condition?param.content.where.condition.length > 0?'':'':'el-icon-search'" v-model="param.content.where.condition" @keyup.native.enter="listData(param.content.pageNumber = 1)" @clear="listData(param.content.pageNumber = 1)" size="small" class="input-with-select inline-16 layout_search__panel" clearable>
            </el-input>
            <exportFile :param="param" :columns="tablecols" :fileName="data.erpagentnum+ ' ' + data.enterprisename + '_' + unwriteoffamounttype + '未回款明细'" :dataid="dataid"></exportFile>
          </div>
          <div style="float: right">
            <span class="search__label">分析日期:</span>
            <span style="font-size: 14px">{{nowDate}}</span>
          </div>
        </div>
        <div style="height: calc(100vh - 255px)">
          <tableTemplate ref="table" :layout="tablecols" :data="list" :opwidth="200" :custom="true" height="calc(100vh - 170px)">
            <template v-slot:customcol="scope">
              <p v-if="scope.column.columnname === 'price'">
                <span v-if="scope.column.data[scope.column.columnname]">
                  ¥{{tool.formatAmount(scope.column.data[scope.column.columnname],2)}}
                </span>
                <span v-else>--</span>
              </p>
              <p v-else-if="scope.column.columnname === 'amount'">
                <span v-if="scope.column.data[scope.column.columnname]">
                  ¥{{tool.formatAmount(scope.column.data[scope.column.columnname],2)}}
                </span>
                <span v-else>--</span>
              </p>
              <p v-else-if="scope.column.columnname === 'outOrderamount'">
                <span v-if="scope.column.data[scope.column.columnname]">
                  ¥{{tool.formatAmount(scope.column.data[scope.column.columnname],2)}}
                </span>
                <span v-else>--</span>
              </p>
              <p v-else-if="scope.column.columnname === 'invoiceamount'">
                <span v-if="scope.column.data[scope.column.columnname]">
                  ¥{{tool.formatAmount(scope.column.data[scope.column.columnname],2)}}
                </span>
                <span v-else>--</span>
              </p>
              <p v-else-if="scope.column.columnname === 'unwriteoffamount'">
               <span v-if="scope.column.data[scope.column.columnname]">
                  ¥{{tool.formatAmount(scope.column.data[scope.column.columnname],2)}}
                </span>
                <span v-else>--</span>
              </p>
              <p v-else>{{scope.column.data[scope.column.columnname]?scope.column.data[scope.column.columnname]:'--'}}</p>
            </template>
          </tableTemplate>
          <div style="margin: 10px 0 10px 0">
            <div style="float: left">
              <span style="color: #333333;font-size: 16px">订单数：</span><span style="color:red;font-size: 16px;margin-right: 10px">{{orderqty}}</span>
              <span style="color: #333333;font-size: 16px">订单行数：</span><span style="color:red;font-size: 16px;margin-right: 10px">{{orderitemsqty}}</span>
              <span style="color: #333333;font-size: 16px">订单总金额：</span><span style="color:red;font-size: 16px;margin-right: 10px">¥{{tool.formatAmount(totalamount,2)}}</span>
              <span style="color: #333333;font-size: 16px">出货总金额：</span><span style="color:red;font-size: 16px;margin-right: 10px">¥{{tool.formatAmount(totaloutOrderamount,2)}}</span>
              <span style="color: #333333;font-size: 16px">开票总金额：</span><span style="color:red;font-size: 16px;margin-right: 10px">¥{{tool.formatAmount(totalinvoiceamount,2)}}</span>
              <span style="color: #333333;font-size: 16px">未核销总金额：</span><span style="color:red;font-size: 16px;margin-right: 10px">¥{{tool.formatAmount(totalunwriteoffamount,2)}}</span>
            </div>
            <div  style="text-align:right;float: right;">
              <el-pagination
                  background
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :pager-count="5"
                  :page-sizes="[100, 50,100, 200]"
                  :page-size="100"
                  layout="total,sizes, prev, pager, next, jumper"
                  :total="total">
              </el-pagination>
            </div>
          </div>

        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import tableTemplate from '@/views/salesData/components/table';
import exportFile from '@/components/export_file/index'
export default {
  name: "financialCollectionDetail",
  components:{tableTemplate,exportFile},
  props:["type","dataid","sys_enterpriseid","data","unwriteoffamounttype","isFull"],
  data(){
    return {
      visible:false,
      list:[],
      tablecols:[],
      currentPage:0,
      total:0,
      param:{
        "id": 20231017110204,
        "content": {
          "type": '',
          "dataid": '',
          "unwriteoffamounttype": "",
          "sys_enterpriseid": '',
          "pageSize":100,
          "pageNumber":1,
          "where": {
            "condition": ""
          }
        },
      },
      nowDate:new Date().getFullYear() + '-' +  (new Date().getMonth() + 1) + '-' + new Date().getDate(),
      "orderqty": 0,//订单数量
      "orderitemsqty": 0,//订单行数量
      "totalamount": 0,//总金额
      "totaloutOrderamount": 0,//总出货金额
      "totalinvoiceamount": 0,//总开票金额
      "totalunwriteoffamount": 0,//总未核销金额
    }
  },
  methods:{
    visibleShow(){
      this.visible = true
      this.param.content.pageNumber = 1
      this.listData()
    },
    async listData(){
      this.param.content.type = this.type
      this.param.content.dataid = this.dataid
      this.param.content.sys_enterpriseid = this.sys_enterpriseid
      this.param.content.unwriteoffamounttype = this.unwriteoffamounttype
      const res = await this.$api.requested(this.param)
      this.list = res.data
      this.total = res.total
      this.currentPage = res.data.pageNumber
      this.orderqty = res.data[0].orderqty
      this.orderitemsqty = res.data[0].orderitemsqty
      this.totalamount = res.data[0].totalamount
      this.totaloutOrderamount = res.data[0].totaloutOrderamount
      this.totalinvoiceamount = res.data[0].totalinvoiceamount
      this.totalunwriteoffamount = res.data[0].totalunwriteoffamount
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.param.content.pageSize = val
      this.listData()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.param.content.pageNumber = val
      this.listData()
    },
    onClose(){}
  },
  created() {
    this.tablecols = this.tool.tabelCol(this.$route.name).financialCollectioDetailTable.tablecols
  }
}
</script>

<style scoped>

</style>