财务2.6 待联调

src/assets/svg-icons/financial/info.svg

@@ -1,5 +1,5 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9 16.5C13.1421 16.5 16.5 13.1421 16.5 9C16.5 4.85786 13.1421 1.5 9 1.5C4.85786 1.5 1.5 4.85786 1.5 9C1.5 13.1421 4.85786 16.5 9 16.5Z" fill="#C0C4CC"/>
+<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 16.5C13.1421 16.5 16.5 13.1421 16.5 9C16.5 4.85786 13.1421 1.5 9 1.5C4.85786 1.5 1.5 4.85786 1.5 9C1.5 13.1421 4.85786 16.5 9 16.5Z"/>
 <path d="M9 12V9" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M9 6H9.0075" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

src/styles/main.scss

@@ -85,6 +85,7 @@ div::-webkit-scrollbar-corner {
   border: 1px solid $themeColor;
   font-size: 16px;
   width: 130px;
+  box-sizing: border-box;
 }
 // 主题按钮 - 大
 .main-button-large{

src/views/financialManagement/invoice/invoiceList.vue

@@ -1,5 +1,6 @@
 <script setup>
 import {getSellerList} from '@/api/crm'
+import currencyAmountBox from '@/views/financialStatistics/components/currencyAmountBox.vue';
 import getCom from '../composition/IandPList'
 import '../style/iandPList.scss'
 
@@ -62,22 +63,9 @@ invoice.placementList()
       </div>
       <div class="iandP-table-container">
         <div class="iandP-table-top">
-          <div class="iandP-top-amout">
-            <div class="iandP-amout-box">
-              <div class="iandP-amout-box-text">
-                <span>已开票合计金额（换算后）</span>
-                <span>{{ data.amountTotal }}（CNY）</span>
-              </div>
-              <svg-Icon name="svgIcon-financial-calculation" size="40" style="min-width: 40px;" />
-            </div>
-            <div class="iandP-amout-box" v-for="item in data.countryAmountList" :key="item.code">
-              <div class="iandP-amout-box-text">
-                <span>{{ item.name }}（{{ item.code }}）</span>
-                <span>{{ item.amount }}</span>
-              </div>
-              <img :src="item.flag_img" style="height: 40px;width: 40px;" />
-            </div>
-          </div>
+          <currencyAmountBox :currnecyData="{currencyList:data.countryAmountList,currencyTotal:data.amountTotal}">
+            已开票合计金额（换算后）
+          </currencyAmountBox>
           <el-button class="element-common-button" style="margin-bottom: 10px;" size="large" @click="invoice.placementExport">导出</el-button>
         </div>
         <!-- 表格 -->

src/views/financialManagement/placement/placementList.vue

@@ -1,5 +1,5 @@
 <script setup>
-
+import currencyAmountBox from '@/views/financialStatistics/components/currencyAmountBox.vue';
 import getCom from '../composition/IandPList'
 import '../style/iandPList.scss'
 
@@ -44,23 +44,9 @@ placement.placementList()
       </div>
       <div class="iandP-table-container">
         <div class="iandP-table-top">
-          <div class="iandP-top-amout">
-            <div class="iandP-amout-box">
-              <div class="iandP-amout-box-text">
-                <span>已到款合计金额（换算后）</span>
-                <span>{{ data.amountTotal }}（CNY）</span>
-              </div>
-              <svg-Icon name="svgIcon-financial-calculation" style="min-width: 40px;"
-              size="40" />
-            </div>
-            <div class="iandP-amout-box" v-for="item in data.countryAmountList" :key="item.code">
-              <div class="iandP-amout-box-text">
-                <span>{{ item.name }}（{{ item.code }}）</span>
-                <span>{{ item.amount }}</span>
-              </div>
-              <img :src="item.flag_img" style="height: 40px;width: 40px;" />
-            </div>
-          </div>
+          <currencyAmountBox :currnecyData="{currencyList:data.countryAmountList,currencyTotal:data.amountTotal}">
+            已到款合计金额（换算后）
+          </currencyAmountBox>
           <el-button class="element-common-button" style="margin-bottom: 10px;" size="large" @click="placement.placementExport">导出</el-button>
         </div>
         <!-- 表格 -->

src/views/financialManagement/style/iandPList.scss

@@ -34,39 +34,6 @@
       align-items: flex-end;
       justify-content: space-between;
       margin-bottom: 20px;
-      .iandP-top-amout{
-        display: flex;
-        flex-wrap: wrap;
-        .iandP-amout-box{
-          display: flex;
-          justify-content: space-between;
-          height: 88px;
-          width: 274px;
-          background: #FFFFFF;
-          border: 1px solid #DCDFE6;
-          box-shadow: 0px 4px 12px rgba(153, 153, 153, 0.08);
-          border-radius: 8px;
-          padding: 14px 20px 20px;
-          box-sizing: border-box;
-          margin-right: 30px;
-          margin-bottom: 10px;
-          .iandP-amout-box-text{
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-            span{
-              font-size: 18px;
-              font-weight: 700;
-              color: $mainTextColor;
-              &:first-child{
-                font-size: 14px;
-                font-weight: 400;
-                color: $secondaryTextColor;
-              }
-            }
-          }
-        }
-      }
     }
   }
 }

src/views/financialStatistics/components/currencyAmountBox.vue

@@ -0,0 +1,64 @@
+<script setup>
+  const props=defineProps({
+    currnecyData:{
+      type:Object,
+      required:true,
+      default:null
+    }
+  })
+</script>
+
+<template>
+    <div class="iandP-top-amout" v-if="currnecyData">
+      <div class="iandP-amout-box">
+        <div class="iandP-amout-box-text">
+          <span><slot></slot></span>
+          <span>{{ currnecyData.currencyTotal }}（CNY）</span>
+        </div>
+        <svg-Icon name="svgIcon-financial-calculation" size="40" style="min-width: 40px;" />
+      </div>
+      <div class="iandP-amout-box" v-for="item in currnecyData.currencyList" :key="item.code">
+        <div class="iandP-amout-box-text">
+          <span>{{ item.name }}（{{ item.code }}）</span>
+          <span>{{ item.amount }}</span>
+        </div>
+        <img :src="item.flag_img" style="height: 40px;width: 40px;" />
+      </div>
+    </div>
+</template>
+  
+<style lang="scss" scoped>
+.iandP-top-amout{
+  display: flex;
+  flex-wrap: wrap;
+  .iandP-amout-box{
+    display: flex;
+    justify-content: space-between;
+    height: 88px;
+    width: 274px;
+    background: #FFFFFF;
+    border: 1px solid #DCDFE6;
+    box-shadow: 0px 4px 12px rgba(153, 153, 153, 0.08);
+    border-radius: 8px;
+    padding: 14px 20px 20px;
+    box-sizing: border-box;
+    margin-right: 30px;
+    margin-bottom: 10px;
+    .iandP-amout-box-text{
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      span{
+        font-size: 18px;
+        font-weight: 700;
+        color: $mainTextColor;
+        &:first-child{
+          font-size: 14px;
+          font-weight: 400;
+          color: $secondaryTextColor;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/financialStatistics/salesStatistics.vue

@@ -182,7 +182,7 @@
             <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;" />
+                  <svg-Icon name="svgIcon-financial-info" size="18" color="#C0C4CC" style="margin-left: 5px;color: white;" />
                 </span>
               </el-tooltip>
             </template>

src/views/financialStatistics/waitInvoice.vue

@@ -0,0 +1,204 @@
+<script setup>
+  import {getSellerList} from '@/api/crm'
+  import currencyAmountBox from './components/currencyAmountBox.vue';
+
+  const searchParams=reactive({
+    keyword:'',
+    service_type:'',
+    seller_ids:'',
+    currentIndex:1,
+    pageSize:10,
+    sortParam:'',
+    sortType:''
+  })
+  
+  const tableData=reactive({
+    list:[],
+    total:0,
+    rowMergeArray:[],
+    currencyList:[{amount: 9100,code:"CNY",flag_img:"https://hzstatic.hzinsights.com/static/fms/imgs/China.svg",name: "人民币",unit_name: "元"},
+    {amount: 100,code:"USD",flag_img:"https://hzstatic.hzinsights.com/static/fms/imgs/America.svg",name: "美元",unit_name: "美元"},
+    {amount: 0,code:"SGD",flag_img:"https://hzstatic.hzinsights.com/static/fms/imgs/Singapore.svg",name: "新加坡元",unit_name: "新元"}],
+    currencyTotal:569787.76,
+  })
+  // ---------------------------------销售模块 
+  const sellerArray=ref([])
+  const sellerChange=(value)=>{
+    searchParams.seller_ids = value.join(',')
+    searchList()
+  }
+  // 获取销售列表
+  const getSellerListFun=()=>{
+    getSellerList().then(res=>{
+      sellerArray.value = res.data?.all_list || []
+    })
+  }
+
+  const searchList=()=>{
+    console.log(searchParams);
+    // TODO 请求列表的方法
+    getList()
+  }
+
+  const sortChange=({prop,order})=>{
+    // console.log({prop,order});
+    searchParams.sortParam = order?prop:''
+    searchParams.sortType=order=='descending'?'desc':order=='ascending'?'asc':''
+    getList()
+  }
+
+  const getList=()=>{
+    tableData.rowMergeArray=[]
+    // TODO 请求列表接口对接
+    let dataTemp=[{id:1,company_name:'集诚实业',contract_code:'001',start_date:'2021-02-01',end_date:'2023-01-31',origin_amount:45000,
+    unit_name:'元',wait_invoice_amount:50000,service_type:'FICC套餐',invoiceList:[{seller_name:'张三',seller_group:'无',seller_type:'FICC销售'},
+    {seller_name:'张三',seller_group:'无',seller_type:'FICC销售'},{seller_name:'张三',seller_group:'无',seller_type:'FICC销售'}]},
+    {id:1,company_name:'集诚实业',contract_code:'001',start_date:'2021-02-01',end_date:'2023-01-31',origin_amount:45000,
+    unit_name:'元',wait_invoice_amount:50000,service_type:'FICC套餐',invoiceList:[{seller_name:'张三',seller_group:'无',seller_type:'FICC销售'},
+    {seller_name:'张三',seller_group:'无',seller_type:'FICC销售'},{seller_name:'张三',seller_group:'无',seller_type:'FICC销售'}]},
+    {id:1,company_name:'集诚实业',contract_code:'001',start_date:'2021-02-01',end_date:'2023-01-31',origin_amount:45000,
+    unit_name:'元',wait_invoice_amount:50000,service_type:'FICC套餐',invoiceList:[{seller_name:'张三',seller_group:'无',seller_type:'FICC销售'},
+    {seller_name:'张三',seller_group:'无',seller_type:'FICC销售'},{seller_name:'张三',seller_group:'无',seller_type:'FICC销售'}]},
+    {id:1,company_name:'集诚实业',contract_code:'001',start_date:'2021-02-01',end_date:'2023-01-31',origin_amount:45000,
+    unit_name:'元',wait_invoice_amount:50000,service_type:'FICC套餐',invoiceList:[{seller_name:'张三',seller_group:'无',seller_type:'FICC销售'},
+    {seller_name:'张三',seller_group:'无',seller_type:'FICC销售'},{seller_name:'张三',seller_group:'无',seller_type:'FICC销售'}]},
+    {id:1,company_name:'集诚实业',contract_code:'001',start_date:'2021-02-01',end_date:'2023-01-31',origin_amount:45000,
+    unit_name:'元',wait_invoice_amount:50000,service_type:'FICC套餐',invoiceList:[{seller_name:'张三',seller_group:'无',seller_type:'FICC销售'},
+    {seller_name:'张三',seller_group:'无',seller_type:'FICC销售'},{seller_name:'张三',seller_group:'无',seller_type:'FICC销售'}]},
+    {id:1,company_name:'集诚实业',contract_code:'001',start_date:'2021-02-01',end_date:'2023-01-31',origin_amount:45000,
+    unit_name:'元',wait_invoice_amount:50000,service_type:'FICC套餐',invoiceList:[{seller_name:'张三',seller_group:'无',seller_type:'FICC销售'},
+    {seller_name:'张三',seller_group:'无',seller_type:'FICC销售'},{seller_name:'张三',seller_group:'无',seller_type:'FICC销售'}]},
+    {id:1,company_name:'集诚实业',contract_code:'001',start_date:'2021-02-01',end_date:'2023-01-31',origin_amount:45000,
+    unit_name:'元',wait_invoice_amount:50000,service_type:'FICC套餐',invoiceList:[{seller_name:'张三',seller_group:'无',seller_type:'FICC销售'},
+    {seller_name:'张三',seller_group:'无',seller_type:'FICC销售'},{seller_name:'张三',seller_group:'无',seller_type:'FICC销售'}]}]
+
+    // console.log(dataTemp);
+    dataTemp.map((item,index) =>{
+      tableData.rowMergeArray.push(item.invoiceList.length)
+      item.invoiceList.map((it,ind) =>{
+        if(ind>0){
+          tableData.rowMergeArray.push(0)
+        }
+        tableData.list.push({
+          serial_number:searchParams.pageSize*(searchParams.currentIndex-1)+index+1,
+          ...item,...it
+        })
+      })
+    })
+    tableData.total=dataTemp.length
+  }
+  const changePageSize=(pageSize)=>{
+    searchParams.pageSize = pageSize
+    getList()
+  }
+  const changePageNo = (pageNo)=>{
+    searchParams.currentIndex = pageNo
+    getList()
+  }
+  // 合并单元格
+  const cellMerge=({ row,column,rowIndex,columnIndex})=>{
+    if([0,1,2,3,4,5,6,7,8].includes(columnIndex)){
+      const _row = tableData.rowMergeArray[rowIndex];
+      return {
+        rowspan: _row,
+        colspan: 1
+      };
+    }
+  }
+
+  // 导出
+  const watiInvoiceExport=()=>{
+    console.log('导出');
+    //TODO 导出接口对接
+  }
+
+// --------------------------------created
+  getSellerListFun()
+  getList()
+</script>
+
+<template>
+    <div class="wait-invoice-container" id="wait-invoice-container">
+      <div class="wait-invoice-searchZone">
+        <el-input v-model="searchParams.keyword" placeholder="请输入客户名称/合同编号" 
+        clearable  @input="searchList" class="statistics-search-item" style="width: 323px;"></el-input>
+        <el-select v-model="searchParams.service_type" placeholder="请选择销售类型" style="width: 308px;"
+          @change="searchList" class="statistics-search-item" clearable >
+          <el-option label="FICC销售" :value="1"></el-option>
+          <el-option label="权益销售" :value="2"></el-option>
+        </el-select>
+        <el-cascader :options="sellerArray" style="margin-left: 30px;margin-bottom: 8px;z-index: 100;min-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>
+      </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;width: 118px;" size="large" @click="watiInvoiceExport">导出</el-button>
+      </div>
+      <el-table :data="tableData.list" border max-height="579px" @sort-change="sortChange" :span-method="cellMerge">
+        <el-table-column label="序号" prop="serial_number" width="70px"></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" sortable="custom"></el-table-column>
+        <el-table-column label="合同结束时间" align="center" prop="end_date" sortable="custom"></el-table-column>
+        <el-table-column label="合同金额" align="center" prop="origin_amount"></el-table-column>
+        <el-table-column label="金额单位" align="center" prop="unit_name"></el-table-column>
+        <el-table-column label="未开票金额" align="center" prop="wait_invoice_amount"></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>
+        </el-table-column>
+        <el-table-column label="销售" align="center" prop="seller_name" >
+          <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="seller_group" ></el-table-column>
+        <el-table-column label="销售类型" align="center" prop="seller_type" ></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.pageSize" :page_no="searchParams.currentIndex" 
+      style="display: flex;justify-content: flex-end;margin-top: 20px;" 
+      :total="tableData.total" @handleCurrentChange="changePageNo" @handleSizeChange="changePageSize"/>
+    </div>
+</template>
+  
+<style lang="scss" scoped>
+  .wait-invoice-container{
+    min-height: 100%;
+    .wait-invoice-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>

src/views/financialStatistics/waitPayment.vue

@@ -0,0 +1,205 @@
+<script setup>
+import { getSellerList } from '@/api/crm'
+import currencyAmountBox from './components/currencyAmountBox.vue'
+const searchParams = reactive({
+    keyword: '',
+    service_type: '',
+    seller_ids: '',
+    currentIndex: 1,
+    pageSize: 10,
+    sortParam: '',
+    sortType: ''
+})
+
+const tableData = reactive({
+    list: [],
+    total: 0,
+    currencyList: [{ amount: 9100, code: "CNY", flag_img: "https://hzstatic.hzinsights.com/static/fms/imgs/China.svg", name: "人民币", unit_name: "元" },
+    { amount: 100, code: "USD", flag_img: "https://hzstatic.hzinsights.com/static/fms/imgs/America.svg", name: "美元", unit_name: "美元" },
+    { amount: 0, code: "SGD", flag_img: "https://hzstatic.hzinsights.com/static/fms/imgs/Singapore.svg", name: "新加坡元", unit_name: "新元" }],
+    currencyTotal: 569787.76,
+})
+// ---------------------------------销售模块 
+const sellerArray = ref([])
+const sellerChange = (value) => {
+    searchParams.seller_ids = value.join(',')
+    searchList()
+}
+// 获取销售列表
+const getSellerListFun = () => {
+    getSellerList().then(res => {
+        sellerArray.value = res.data?.all_list || []
+    })
+}
+
+const searchList = () => {
+    console.log(searchParams);
+    // TODO 请求列表的方法
+    getList()
+}
+
+const sortChange = ({ prop, order }) => {
+    // console.log({prop,order});
+    searchParams.sortParam = order ? prop : ''
+    searchParams.sortType = order == 'descending' ? 'desc' : order == 'ascending' ? 'asc' : ''
+    getList()
+}
+
+const getList = () => {
+    // TODO 请求列表接口对接
+    let dataTemp = [{
+        id: 1, company_name: '集诚实业', contract_code: '001', start_date: '2021-02-01', end_date: '2023-01-31', origin_amount: 45000,
+        unit_name: '元', wait_placement_amount: 50000, service_type: 'FICC套餐', seller_name: '张三', seller_group: '无', seller_type: 'FICC销售'
+    },
+    {
+        id: 1, company_name: '集诚实业', contract_code: '001', start_date: '2021-02-01', end_date: '2023-01-31', origin_amount: 45000,
+        unit_name: '元', wait_placement_amount: 50000, service_type: 'FICC套餐', seller_name: '张三', seller_group: '无', seller_type: 'FICC销售'
+    },
+    {
+        id: 1, company_name: '集诚实业', contract_code: '001', start_date: '2021-02-01', end_date: '2023-01-31', origin_amount: 45000,
+        unit_name: '元', wait_placement_amount: 50000, service_type: 'FICC套餐', seller_name: '张三', seller_group: '无', seller_type: 'FICC销售'
+    },
+    {
+        id: 1, company_name: '集诚实业', contract_code: '001', start_date: '2021-02-01', end_date: '2023-01-31', origin_amount: 45000,
+        unit_name: '元', wait_placement_amount: 50000, service_type: 'FICC套餐', seller_name: '张三', seller_group: '无', seller_type: 'FICC销售'
+    },
+    {
+        id: 1, company_name: '集诚实业', contract_code: '001', start_date: '2021-02-01', end_date: '2023-01-31', origin_amount: 45000,
+        unit_name: '元', wait_placement_amount: 50000, service_type: 'FICC套餐', seller_name: '张三', seller_group: '无', seller_type: 'FICC销售'
+    },
+    {
+        id: 1, company_name: '集诚实业', contract_code: '001', start_date: '2021-02-01', end_date: '2023-01-31', origin_amount: 45000,
+        unit_name: '元', wait_placement_amount: 50000, service_type: 'FICC套餐', seller_name: '张三', seller_group: '无', seller_type: 'FICC销售'
+    },
+    {
+        id: 1, company_name: '集诚实业', contract_code: '001', start_date: '2021-02-01', end_date: '2023-01-31', origin_amount: 45000,
+        unit_name: '元', wait_placement_amount: 50000, service_type: 'FICC套餐', seller_name: '张三', seller_group: '无', seller_type: 'FICC销售'
+    },
+    {
+        id: 1, company_name: '集诚实业', contract_code: '001', start_date: '2021-02-01', end_date: '2023-01-31', origin_amount: 45000,
+        unit_name: '元', wait_placement_amount: 50000, service_type: 'FICC套餐', seller_name: '张三', seller_group: '无', seller_type: 'FICC销售'
+    },
+    {
+        id: 1, company_name: '集诚实业', contract_code: '001', start_date: '2021-02-01', end_date: '2023-01-31', origin_amount: 45000,
+        unit_name: '元', wait_placement_amount: 50000, service_type: 'FICC套餐', seller_name: '张三', seller_group: '无', seller_type: 'FICC销售'
+    },
+    {
+        id: 1, company_name: '集诚实业', contract_code: '001', start_date: '2021-02-01', end_date: '2023-01-31', origin_amount: 45000,
+        unit_name: '元', wait_placement_amount: 50000, service_type: 'FICC套餐', seller_name: '张三', seller_group: '无', seller_type: 'FICC销售'
+    },
+    {
+        id: 1, company_name: '集诚实业', contract_code: '001', start_date: '2021-02-01', end_date: '2023-01-31', origin_amount: 45000,
+        unit_name: '元', wait_placement_amount: 50000, service_type: 'FICC套餐', seller_name: '张三', seller_group: '无', seller_type: 'FICC销售'
+    },]
+
+    // console.log(dataTemp);
+    dataTemp.map((item, index) => {
+        tableData.list.push({
+            serial_number: searchParams.pageSize * (searchParams.currentIndex - 1) + index + 1,
+            ...item
+        })
+    })
+    tableData.total = dataTemp.length
+}
+const changePageSize = (pageSize) => {
+    searchParams.pageSize = pageSize
+    getList()
+}
+const changePageNo = (pageNo) => {
+    searchParams.currentIndex = pageNo
+    getList()
+}
+
+// 导出
+const watiPlacementExport = () => {
+    console.log('导出');
+    //TODO 导出接口对接
+}
+
+// --------------------------------created
+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: 323px;"></el-input>
+            <el-select v-model="searchParams.service_type" 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>
+            <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>
+        </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">
+                <template #default="{ row }">
+                    {{ (row.start_date + ' 至 ' + row.end_date) }}
+                </template>
+            </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>
+            </el-table-column>
+            <el-table-column label="开票金额" align="center" prop="origin_amount"></el-table-column>
+            <el-table-column label="金额单位" align="center" prop="unit_name"></el-table-column>
+            <el-table-column label="开票日" align="center" prop="end_date" 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"></el-table-column>
+            <el-table-column label="销售类型" align="center" prop="seller_type"></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.pageSize" :page_no="searchParams.currentIndex"
+            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>