|
|
@@ -1,13 +1,13 @@
|
|
|
<script setup>
|
|
|
import { Search } from '@element-plus/icons-vue'
|
|
|
-import dropdownText from '@/components/dropdown-text/index.vue'
|
|
|
+// import dropdownText from '@/components/dropdown-text/index.vue'
|
|
|
import {getInvoicePaymentList,updatePayType,setServiceAmount} from '@/api/financialStatistics'
|
|
|
import {getSellerGroupList} from '@/api/crm'
|
|
|
import {getServiceList} from '@/api/financialMana'
|
|
|
import {downloadByFlow} from '@/utils/common-methods'
|
|
|
|
|
|
-
|
|
|
- const dateTypeList=[{id:1,type:'开票时间'},{id:2,type:'到款时间'}]
|
|
|
+const moment = inject('$moment')
|
|
|
+ const dateButtonData=[{text:'近1月',tabId:1},{text:'近2月',tabId:2},{text:'近3月',tabId:3}]
|
|
|
|
|
|
const groupList=ref([])
|
|
|
const serviceList=ref([])
|
|
|
@@ -21,14 +21,19 @@ import {downloadByFlow} from '@/utils/common-methods'
|
|
|
start_date:'',
|
|
|
end_date:'',
|
|
|
// 1-开票时间 2-到款时间
|
|
|
- time_type:1,
|
|
|
+ // time_type:1,
|
|
|
// 1-已开票
|
|
|
- has_invoice:0,
|
|
|
+ has_invoice:'',
|
|
|
// 1-已到款
|
|
|
- has_payment:0,
|
|
|
+ has_payment:'',
|
|
|
+ sort_type:'',
|
|
|
+ sort_param:'',
|
|
|
is_export:0
|
|
|
})
|
|
|
const searchDate=ref(null)
|
|
|
+ const currentDateTab=ref(0)
|
|
|
+
|
|
|
+
|
|
|
watch(searchDate,(newVal)=>{
|
|
|
if(newVal){
|
|
|
searchParams.start_date=newVal[0]
|
|
|
@@ -43,7 +48,6 @@ import {downloadByFlow} from '@/utils/common-methods'
|
|
|
const commodityPData=reactive({
|
|
|
tableData:[],
|
|
|
total:25,
|
|
|
- rowMergeArray:[],
|
|
|
invoiceAmountTotal:0,
|
|
|
invoiceAmountList:[],
|
|
|
placementAmountTotal:0,
|
|
|
@@ -76,19 +80,15 @@ import {downloadByFlow} from '@/utils/common-methods'
|
|
|
getInvoicePaymentList(searchParams).then(res=>{
|
|
|
// console.log(res);
|
|
|
commodityPData.tableData=[]
|
|
|
- commodityPData.rowMergeArray=[]
|
|
|
let tempData = res.data.list.data_list || []
|
|
|
commodityPData.total = res.data.page.total
|
|
|
commodityPData.invoiceAmountTotal=res.data.list.invoice_total
|
|
|
commodityPData.invoiceAmountList = res.data.list.invoice_currency_total || []
|
|
|
commodityPData.placementAmountTotal=res.data.list.payment_total
|
|
|
commodityPData.placementAmountList = res.data.list.payment_currency_total || []
|
|
|
+ // console.log(tempData);
|
|
|
tempData.map((item,index) =>{
|
|
|
- commodityPData.rowMergeArray.push(item.invoice_payment_list.length)
|
|
|
item.invoice_payment_list.map((it,ind) =>{
|
|
|
- if(ind-1>=0){
|
|
|
- commodityPData.rowMergeArray.push(0)
|
|
|
- }
|
|
|
commodityPData.tableData.push({
|
|
|
serialNumber:searchParams.page_size*(searchParams.current-1)+index+1,
|
|
|
...item,date:item.start_date+'至'+item.end_date,...it
|
|
|
@@ -104,11 +104,19 @@ import {downloadByFlow} from '@/utils/common-methods'
|
|
|
commodityPList()
|
|
|
}
|
|
|
|
|
|
- const dateTypeCommand=(id)=>{
|
|
|
- if(id == searchParams.time_type) return
|
|
|
- searchParams.time_type=id
|
|
|
+ const sortChange=({order,prop})=>{
|
|
|
+ console.log(order,prop);
|
|
|
+ searchParams.sort_type=order=='descending'?'desc':order=='ascending'?'asc':''
|
|
|
+ searchParams.sort_param=order?prop:''
|
|
|
searchCommodityP()
|
|
|
- // console.log(id);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 切换日期 近1月、近2月、近3月 从今天开始往后推
|
|
|
+ const changeDateType=(tabId)=>{
|
|
|
+ if(currentDateTab.value==tabId) return
|
|
|
+ currentDateTab.value=tabId
|
|
|
+ searchDate.value=[moment(new Date()).subtract(tabId, 'months').format('YYYY-MM-DD'),
|
|
|
+ moment(new Date()).format('YYYY-MM-DD')]
|
|
|
}
|
|
|
|
|
|
// 切换每页的数量
|
|
|
@@ -126,24 +134,8 @@ import {downloadByFlow} from '@/utils/common-methods'
|
|
|
downloadByFlow(res,'xlsx',`商品到款统计列表`)
|
|
|
})
|
|
|
}
|
|
|
- // 是否已开票或已到款 改变
|
|
|
- const haveIAndPChange=(value,prop)=>{
|
|
|
- searchParams[prop]=value?1:0
|
|
|
- searchCommodityP()
|
|
|
- }
|
|
|
|
|
|
|
|
|
- // 单元格合并
|
|
|
- const cellMerge=({ row,column,rowIndex,columnIndex})=>{
|
|
|
- // console.log({ row,column,rowIndex,columnIndex});
|
|
|
- if([0,1,2,3].includes(columnIndex)){
|
|
|
- const _row = commodityPData.rowMergeArray[rowIndex];
|
|
|
- return {
|
|
|
- rowspan: _row,
|
|
|
- colspan: 1
|
|
|
- };
|
|
|
- }
|
|
|
- }
|
|
|
// 自定义表格行的类名
|
|
|
const tableRowClassName=({ row, rowIndex })=>{
|
|
|
if (row.serialNumber%2 === 1) {
|
|
|
@@ -153,6 +145,9 @@ import {downloadByFlow} from '@/utils/common-methods'
|
|
|
}
|
|
|
// 开票到款金额展开收起
|
|
|
const foldOrUnfold=(type)=>{
|
|
|
+ if(!(commodityPData.tableData?.length>0)){
|
|
|
+ return
|
|
|
+ }
|
|
|
// type: 0-开票 1-到款
|
|
|
if(type){
|
|
|
placementIsFold.value = !placementIsFold.value
|
|
|
@@ -255,54 +250,73 @@ import {downloadByFlow} from '@/utils/common-methods'
|
|
|
// --------------------------------设置套餐信息
|
|
|
// -----------------------------------------------------弹窗
|
|
|
|
|
|
-
|
|
|
+ // 初始化 开始日期和结束日期的查询条件
|
|
|
+ try {
|
|
|
+ searchDate.value = [moment().startOf('year').format('YYYY-MM-DD'),moment(new Date()).format('YYYY-MM-DD')]
|
|
|
+ } catch (error) {
|
|
|
+ console.error(error.message);
|
|
|
+ commodityPList()
|
|
|
+ }
|
|
|
+
|
|
|
// created
|
|
|
getSellerGroupListFun()
|
|
|
getServiceListFun()
|
|
|
- commodityPList()
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
<div id="commodity-payment-container" class="commodity-payment-container">
|
|
|
<div class="search-zone">
|
|
|
- <el-input v-model="searchParams.keyword" placeholder="请输入客户名称/销售" clearable
|
|
|
- @input="searchCommodityP" :prefix-icon="Search" style="width: 286px;margin: 0 30px 10px 0;" ></el-input>
|
|
|
- <el-select v-model="searchParams.sell_group_id" placeholder="请选择销售组别" clearable style="width: 240px;margin: 0 30px 10px 0;"
|
|
|
- @change="searchCommodityP">
|
|
|
+ <el-input v-model="searchParams.keyword" placeholder="请输入客户名称/销售" clearable class="search-zone-item"
|
|
|
+ @input="searchCommodityP" :prefix-icon="Search" ></el-input>
|
|
|
+ <el-select v-model="searchParams.sell_group_id" placeholder="请选择销售组别" clearable style="width: 200px;"
|
|
|
+ @change="searchCommodityP" class="search-zone-item">
|
|
|
<el-option :label="item.group_name" :value="item.group_id" v-for="item in groupList"></el-option>
|
|
|
</el-select>
|
|
|
- <el-select v-model="searchParams.service_type" placeholder="请选择套餐信息" clearable style="width: 240px;margin: 0 30px 10px 0;"
|
|
|
- @change="searchCommodityP">
|
|
|
+ <el-select v-model="searchParams.service_type" placeholder="请选择套餐信息" clearable style="width: 200px;"
|
|
|
+ @change="searchCommodityP" class="search-zone-item">
|
|
|
<el-option :label="item.title" :value="item.service_template_id" v-for="item in serviceList"></el-option>
|
|
|
</el-select>
|
|
|
- <el-date-picker v-model="searchDate" type="daterange" style="max-width: 240px;margin: 0 20px 10px 0;"
|
|
|
- value-format="YYYY-MM-DD" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
|
|
|
- <el-dropdown size="large" trigger="click" style="margin:0 60px 10px 0;" @command="dateTypeCommand">
|
|
|
- <dropdownText>
|
|
|
- {{dateTypeList.find(it => it.id==searchParams.time_type).type}}
|
|
|
- </dropdownText>
|
|
|
- <template #dropdown>
|
|
|
- <el-dropdown-menu>
|
|
|
- <el-dropdown-item :command="item.id" v-for="item in dateTypeList" :key="item.id">{{ item.type }}</el-dropdown-item>
|
|
|
- </el-dropdown-menu>
|
|
|
- </template>
|
|
|
- </el-dropdown>
|
|
|
- <div class="search-checkbox" >
|
|
|
- <el-checkbox label="已开票" @change="(value)=>haveIAndPChange(value,'has_invoice')"></el-checkbox>
|
|
|
- <el-checkbox el-checkbox label="已到款" @change="(value)=>haveIAndPChange(value,'has_payment')"></el-checkbox>
|
|
|
+ <div class="date-box">
|
|
|
+ <el-date-picker v-model="searchDate" type="daterange" @change="currentDateTab=0" style="max-width: 240px;margin-right: 20px;"
|
|
|
+ value-format="YYYY-MM-DD" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
|
|
|
+ <div class="composition-button-tabs">
|
|
|
+ <el-button size="large" v-for="(item,index) in dateButtonData" :key="item.tabId"
|
|
|
+ class="date-button"
|
|
|
+ :class="[index==0?'first-button':index==(dateButtonData.length-1)?'last-button':'inner-button',currentDateTab==item.tabId?'selectTab':'']"
|
|
|
+ @click="changeDateType(item.tabId)">{{ item.text }}</el-button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <el-select v-model="searchParams.has_invoice" placeholder="请选择开票状态" clearable
|
|
|
+ style="width: 200px;" class="search-zone-item" @change="searchCommodityP">
|
|
|
+ <el-option label="未开票" :value="0"></el-option>
|
|
|
+ <el-option label="已开票" :value="1"></el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-select v-model="searchParams.has_payment" placeholder="请选择到款状态" clearable
|
|
|
+ style="width: 200px;margin-bottom: 10px;" @change="searchCommodityP">
|
|
|
+ <el-option label="未到款" :value="0"></el-option>
|
|
|
+ <el-option label="已到款" :value="1"></el-option>
|
|
|
+ </el-select>
|
|
|
</div>
|
|
|
<div class="operation-zone">
|
|
|
<div class="amount-show-zone">
|
|
|
<div class="amount-show-item">
|
|
|
- <div class="amount-item-head" @click="foldOrUnfold(0)">
|
|
|
- <div class="amount-item-head-title">
|
|
|
+ <div class="amount-item-head" @click="foldOrUnfold(0)"
|
|
|
+ :style="{cursor:commodityPData.tableData?.length>0?'pointer':'',padding:invoiceIsFold?'8px 20px 8px 20px':'20px'}">
|
|
|
+ <div class="amount-item-head-title" >
|
|
|
已开票合计金额（换算后）：{{ commodityPData.invoiceAmountTotal }}（CNY）
|
|
|
</div>
|
|
|
- <span class="amount-item-head-icon">
|
|
|
+ <div class="fold-expand-row" v-show="commodityPData.tableData?.length>0">
|
|
|
+ <span class="amount-item-head-icon">
|
|
|
{{ invoiceIsFold?'展开':'收起' }}
|
|
|
- </span>
|
|
|
+ </span>
|
|
|
+ <el-icon color="var(--themeColor)" :style="!invoiceIsFold && 'transform: rotate(180deg)'">
|
|
|
+ <svg-Icon name="svgIcon-common-arrow_down"></svg-Icon>
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="amount-item-body-package" :style="{height:invoiceIsFold?'0':'66px'}">
|
|
|
<div class="amount-item-body">
|
|
|
@@ -317,13 +331,19 @@ import {downloadByFlow} from '@/utils/common-methods'
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="amount-show-item">
|
|
|
- <div class="amount-item-head" @click="foldOrUnfold(1)">
|
|
|
- <div class="amount-item-head-title">
|
|
|
+ <div class="amount-item-head" @click="foldOrUnfold(1)"
|
|
|
+ :style="{cursor:commodityPData.tableData?.length>0?'pointer':'',padding:placementIsFold?'8px 20px 8px 20px':'20px'}">
|
|
|
+ <div class="amount-item-head-title" >
|
|
|
已到款合计金额（换算后）：{{ commodityPData.placementAmountTotal }}（CNY）
|
|
|
</div>
|
|
|
- <span class="amount-item-head-icon">
|
|
|
+ <div class="fold-expand-row" v-show="commodityPData.tableData?.length>0">
|
|
|
+ <span class="amount-item-head-icon">
|
|
|
{{ placementIsFold?'展开':'收起' }}
|
|
|
- </span>
|
|
|
+ </span>
|
|
|
+ <el-icon color="var(--themeColor)" :style="!placementIsFold && 'transform: rotate(180deg)'">
|
|
|
+ <svg-Icon name="svgIcon-common-arrow_down"></svg-Icon>
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="amount-item-body-package" :style="{height:placementIsFold?'0':'66px'}">
|
|
|
<div class="amount-item-body">
|
|
|
@@ -342,7 +362,7 @@ import {downloadByFlow} from '@/utils/common-methods'
|
|
|
</div>
|
|
|
<div class="table-zone">
|
|
|
<el-table :data="commodityPData.tableData" border ref="tableRef"
|
|
|
- max-height="600" :row-class-name="tableRowClassName" :span-method="cellMerge">
|
|
|
+ max-height="600" :row-class-name="tableRowClassName" @sort-change="sortChange" >
|
|
|
<el-table-column label="序号" align="center" prop="serialNumber" >
|
|
|
</el-table-column>
|
|
|
<el-table-column label="客户名称" prop="company_name" align="center" show-overflow-tooltip ></el-table-column>
|
|
|
@@ -352,9 +372,9 @@ import {downloadByFlow} from '@/utils/common-methods'
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="合同有效期" prop="date" align="center" show-overflow-tooltip ></el-table-column>
|
|
|
- <el-table-column label="开票日" show-overflow-tooltip prop="invoice_time" align="center" id="spc-column"></el-table-column>
|
|
|
+ <el-table-column label="开票日" show-overflow-tooltip sortable="custom" prop="invoice_time" align="center" id="spc-column"></el-table-column>
|
|
|
<el-table-column label="开票金额" prop="invoice_amount" align="center"></el-table-column>
|
|
|
- <el-table-column label="到款日" show-overflow-tooltip prop="payment_date" align="center"></el-table-column>
|
|
|
+ <el-table-column label="到款日" show-overflow-tooltip sortable="custom" prop="payment_date" align="center"></el-table-column>
|
|
|
<el-table-column label="到款金额" prop="payment_amount" align="center"></el-table-column>
|
|
|
<el-table-column label="付款方式" prop="pay_type" align="center">
|
|
|
<template #default="{row,$index}">
|
|
|
@@ -362,8 +382,8 @@ import {downloadByFlow} from '@/utils/common-methods'
|
|
|
<span v-else @click="editPayType(row,$index)"
|
|
|
style="cursor: pointer;display: flex;align-items: center;justify-content: center;">
|
|
|
<span style="color: var(--dangerColor);">{{ payTypeArray[row.pay_type].type }}</span>
|
|
|
- <svg-Icon name="svgIcon-common-edit" size="13"
|
|
|
- style="position: absolute;right: 4px;top: 50%;transform: translateX(-50%) translateY(-50%);" ></svg-Icon>
|
|
|
+ <svg-Icon name="svgIcon-common-edit" size="16"
|
|
|
+ style="color: var(--dangerColor);margin-left: 8px;" ></svg-Icon>
|
|
|
</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
@@ -447,12 +467,44 @@ import {downloadByFlow} from '@/utils/common-methods'
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
flex-wrap: wrap;
|
|
|
- .search-checkbox{
|
|
|
- // margin-left: 60px;
|
|
|
- margin-bottom: 10px;
|
|
|
- height: 40px;
|
|
|
+ .search-zone-item{
|
|
|
+ width: 240px;
|
|
|
+ margin: 0 30px 10px 0;
|
|
|
+ }
|
|
|
+ .date-box{
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+ margin: 0 40px 8px 0;
|
|
|
+ .composition-button-tabs{
|
|
|
+
|
|
|
+ .date-button{
|
|
|
+ height: 40px;
|
|
|
+ color: $hitTextColorTwo;
|
|
|
+ // border: 1px solid $auxiliaryColor;
|
|
|
+ margin: 0;
|
|
|
+ width: 58px;
|
|
|
+ }
|
|
|
+ .first-button{
|
|
|
+ border-color: $auxiliaryColor;
|
|
|
+ border-style: solid;
|
|
|
+ border-width: 1px 0 1px 1px;
|
|
|
+ border-radius: 4px 0 0 4px;
|
|
|
+ }
|
|
|
+ .inner-button{
|
|
|
+ border: 1px solid $auxiliaryColor;
|
|
|
+ border-radius: 0;
|
|
|
+ }
|
|
|
+ .last-button{
|
|
|
+ border-color: $auxiliaryColor;
|
|
|
+ border-style: solid;
|
|
|
+ border-width: 1px 1px 1px 0;
|
|
|
+ border-radius:0 4px 4px 0 ;
|
|
|
+ }
|
|
|
+ .selectTab{
|
|
|
+ color:white;
|
|
|
+ background-color: $themeColor;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.operation-zone{
|
|
|
@@ -478,21 +530,28 @@ import {downloadByFlow} from '@/utils/common-methods'
|
|
|
box-sizing: border-box;
|
|
|
// padding-bottom: 16px;
|
|
|
.amount-item-head{
|
|
|
- padding: 20px 20px 20px 20px;
|
|
|
+ // padding: 20px 20px 20px 20px;
|
|
|
+ transition: all 0.1s ease;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
- cursor: pointer;
|
|
|
+ // cursor: pointer;
|
|
|
.amount-item-head-title{
|
|
|
- font-weight: 400;
|
|
|
+ font-weight: 600;
|
|
|
font-size: 18px;
|
|
|
color: #000000;
|
|
|
}
|
|
|
- .amount-item-head-icon{
|
|
|
- font-weight: 400;
|
|
|
- font-size: 14px;
|
|
|
- color: $themeColor;
|
|
|
+ .fold-expand-row{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .amount-item-head-icon{
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: $themeColor;
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
.amount-item-body-package{
|
|
|
overflow: hidden;
|
hbchen
