hongze_fsms_web/src/views/financialStatistics/waitPayment.vue

<script setup>
import { getSellerTeamList } from '@/api/crm'
import {getWaitPaymentList} from '@/api/financialStatistics'

import currencyAmountBox from './components/currencyAmountBox.vue'
import {downloadByFlow} from '@/utils/common-methods'

const searchParams = reactive({
    keyword: '',
    list_param: '',
    seller_ids: '',
    current: 1,
    page_size: 10,
    sort_type: '',
    is_export:0
})

const tableData = reactive({
    list: [],
    total: 0,
    currencyList: [],
    currencyTotal: 0,
})
// ---------------------------------销售模块 
const sellerArray = ref([])
const sellerChange = (value) => {
    searchParams.seller_ids = value.join(',')
    searchList()
}
// 获取销售列表
const getSellerListFun=()=>{
    getSellerTeamList().then(res=>{
      sellerArray.value = res.data?.all_list || []
    })
}

const searchList = () => {
    searchParams.current=1
    getList()
}

const sortChange = ({ prop, order }) => {
    searchParams.sort_type = order == 'descending' ? 'desc' : order == 'ascending' ? 'asc' : ''
    getList()
}

const getList = () => {
    getWaitPaymentList(searchParams).then(res=>{
      tableData.total = res.data.page?.total || 0
      let dataTemp=res.data?.list?.data_list||[]
      tableData.list=[]
      dataTemp.map((item,index) =>{
        tableData.list.push({
        serial_number:searchParams.page_size*(searchParams.current-1)+index+1,
        ...item,...(item.invoice_payment_list?item.invoice_payment_list[0]:{})
        })
      })
      tableData.currencyList = res.data?.list?.not_payment_currency_total || []
      tableData.currencyTotal = res.data?.list?.not_payment_total||0 
    })
}
const changePageSize = (pageSize) => {
    searchParams.page_size = pageSize
    getList()
}
const changePageNo = (pageNo) => {
    searchParams.current = pageNo
    getList()
}

// 导出
const watiPlacementExport = () => {
    getWaitPaymentList({...searchParams,is_export:1}).then(res=>{
      downloadByFlow(res,'xlsx',`开票未到款统计表`)
    })
}

// --------------------------------
getSellerListFun()
getList()
</script>

<template>
    <div class="wait-placement-container" id="wait-placement-container">
        <div class="wait-placement-searchZone">
            <el-input v-model="searchParams.keyword" placeholder="请输入客户名称/合同编号" clearable @input="searchList"
                class="statistics-search-item" style="width: 308px;"></el-input>
            <el-cascader :options="sellerArray" style="margin-left: 30px;margin-bottom: 8px;z-index: 100;width: 308px;" filterable collapse-tags-tooltip
            @change="sellerChange" placeholder="请选择销售" clearable collapse-tags :show-all-levels="false"
            :props="{ multiple: true, label: 'seller_name', value: 'seller_id', children: 'child', emitPath: false }" key="seller">
            </el-cascader>
            <el-select v-model="searchParams.list_param" placeholder="请选择套餐类型" @change="searchList"
                class="statistics-search-item" clearable style="width: 308px;">
                <el-option label="FICC套餐" :value="1"></el-option>
                <el-option label="权益套餐" :value="2"></el-option>
            </el-select>
        </div>
        <div class="iandP-table-top">
            <currencyAmountBox :currnecyData="{currencyList:tableData.currencyList,currencyTotal:tableData.currencyTotal}">
                开票未到款统计（换算后）
            </currencyAmountBox>
            <el-button class="element-common-button" style="margin-bottom: 10px;" size="large"
                @click="watiPlacementExport">导出</el-button>
        </div>
        <el-table :data="tableData.list" border max-height="579px" @sort-change="sortChange">
            <el-table-column label="序号" prop="serial_number" width="70px" align="center"></el-table-column>
            <el-table-column label="客户名称" align="center" prop="company_name" show-overflow-tooltip></el-table-column>
            <el-table-column label="合同编号" align="center" prop="contract_code" show-overflow-tooltip></el-table-column>
            <el-table-column label="合同起始日期" align="center" prop="start_date"></el-table-column>
            <el-table-column label="合同结束日期" align="center" prop="end_date"></el-table-column>
            <el-table-column label="套餐类型" align="center" prop="service_type">
                <template #header>
                    <el-tooltip content="开票套餐类型" placement="top">
                        <span style="display: inline-flex;align-items: center;">套餐类型
                            <svg-Icon name="svgIcon-financial-info" size="18" style="margin-left: 5px;color: white;" />
                        </span>
                    </el-tooltip>
                </template>
                <template #default="{row}">
                    {{ row.service_product_id==1?'FICC套餐':row.service_product_id==2?'权益套餐':'--' }}
                </template>
            </el-table-column>
            <el-table-column label="开票金额" align="center" prop="not_payment_origin_amount">
                <template #header>
                    <el-tooltip content="开票未到款金额" placement="top">
                        <span style="display: inline-flex;align-items: center;">开票金额
                            <svg-Icon name="svgIcon-financial-info" size="18" style="margin-left: 5px;color: white;" />
                        </span>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column label="金额单位" align="center" prop="unit_name"></el-table-column>
            <el-table-column label="开票换算金额（元）" align="center" prop="not_payment_amount"></el-table-column>
            <el-table-column label="开票日" align="center" prop="invoice_time" sortable="custom"></el-table-column>
            <el-table-column label="开票销售" align="center" prop="seller_name"></el-table-column>
            <el-table-column label="销售组别" align="center" prop="seller_group_name"></el-table-column>
            <el-table-column label="销售类型" align="center" prop="seller_type">
                <template #default="{row}">
                    {{ row.seller_type==1?'FICC销售':row.seller_type==2?'权益销售':'--' }}
                </template>
            </el-table-column>
            <template #empty>
                <div class="table-no-data">
                    <img src="@/assets/img/icon/empty-data.png" />
                    <span>暂无数据</span>
                </div>
            </template>
        </el-table>
        <!-- 分页 -->
        <m-page :pageSize="searchParams.page_size" :page_no="searchParams.current"
            style="display: flex;justify-content: flex-end;margin-top: 20px;" :total="tableData.total"
            @handleCurrentChange="changePageNo" @handleSizeChange="changePageSize" />
    </div>
</template>
  
<style lang="scss" scoped>.wait-placement-container {
    min-height: 100%;

    .wait-placement-searchZone {
        display: flex;
        flex-wrap: wrap;
        margin-left: -30px;
        margin-bottom: 20px;

        .statistics-search-item {
            margin-bottom: 8px;
            margin-left: 30px;
        }
    }

    .iandP-table-top {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        margin-bottom: 20px;
    }
}</style>