财务2.0 暂存

src/assets/svg-icons/menu/financialStatistics.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.1026 15.144C20.0379 15.286 19.9194 15.3964 19.7732 15.451C19.6271 15.5056 19.4652 15.4999 19.3232 15.4352C19.1812 15.3704 19.0708 15.252 19.0162 15.1058C18.9616 14.9596 18.9673 14.7977 19.032 14.6558C19.925 12.6944 20.0693 10.4741 19.4376 8.41365C18.806 6.35323 17.4421 4.59521 15.6033 3.47127C13.7646 2.34734 11.578 1.9352 9.45629 2.31263C7.33454 2.69006 5.42427 3.83095 4.08589 5.52005C2.74752 7.20915 2.07359 9.32966 2.19125 11.4815C2.30891 13.6334 3.21002 15.6677 4.72458 17.2009C6.23914 18.734 8.26241 19.6598 10.4127 19.8036C12.5629 19.9474 14.6915 19.2994 16.3968 17.9817C16.5205 17.8929 16.6738 17.8556 16.8244 17.8775C16.9751 17.8995 17.1114 17.979 17.2046 18.0994C17.2979 18.2197 17.3408 18.3716 17.3244 18.523C17.3081 18.6743 17.2336 18.8135 17.1168 18.9111C15.1845 20.4051 12.7722 21.1403 10.3351 20.9779C7.89802 20.8155 5.60463 19.7667 3.88766 18.0295C2.1707 16.2924 1.14889 13.9868 1.01504 11.548C0.881185 9.10919 1.64455 6.7057 3.16109 4.79105C4.67763 2.87639 6.84247 1.58298 9.24716 1.15485C11.6518 0.726715 14.1301 1.19348 16.2142 2.46706C18.2984 3.74064 19.8444 5.73297 20.5605 8.06813C21.2766 10.4033 21.1133 12.9198 20.1014 15.1428L20.1026 15.144ZM9.49088 14.344L7.73089 11.2181L5.58971 14.1546C5.54414 14.217 5.48671 14.2698 5.42072 14.3101C5.35473 14.3503 5.28146 14.3771 5.2051 14.389C5.12873 14.4009 5.05077 14.3977 4.97567 14.3795C4.90056 14.3613 4.82978 14.3284 4.76736 14.2828C4.70494 14.2373 4.65212 14.1798 4.61189 14.1138C4.57167 14.0479 4.54484 13.9746 4.53293 13.8982C4.52102 13.8219 4.52427 13.7439 4.54249 13.6688C4.56071 13.5937 4.59355 13.5229 4.63913 13.4605L7.85912 9.04638L9.62971 12.1923L12.2356 8.7005L14.5062 11.637L17.0862 7.17815C17.1666 7.04779 17.2947 6.95394 17.4432 6.91656C17.5918 6.87918 17.7491 6.90122 17.8816 6.978C18.0141 7.05477 18.1115 7.18021 18.153 7.32766C18.1945 7.47511 18.1769 7.63293 18.1038 7.76756L14.6473 13.7428L12.2521 10.6452L9.49206 14.344H9.49088Z" stroke="#AB9523" stroke-width="0.3"/>
+</svg>

src/components/dropdown-text/index.vue

@@ -0,0 +1,42 @@
+<script setup>
+  
+</script>
+
+<template>
+  <div class="dropdown-text-box">
+    <!-- <el-button type="primary" 
+    > -->
+      <div class="dropdown-text">
+        <slot></slot>
+      </div>
+      <el-icon style="margin-left: 13px;"><arrow-down /></el-icon>
+    <!-- </el-button> -->
+  </div>
+</template>
+  
+<style lang="scss">
+  .dropdown-text-box{
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    background-color: var(--themeColor);
+    border-radius: 4px;
+    color: white;
+    cursor: pointer;
+    height: 40px; 
+    padding: 9px 13px 9px 20px;
+    box-sizing: border-box;
+    .dropdown-text{
+      display: flex;
+      align-items: center;
+      height: 100%;
+      border-right: solid 1px white;
+      padding-right: 20px;
+      flex-grow: 1;
+    }
+    &:hover{
+      background-color: #c4b565;
+      border-color: #c4b565;
+    }
+  }
+</style>

src/styles/element.scss

@@ -1,9 +1,20 @@
 
+
 // 重新定义element-plus主题
 @forward 'element-plus/theme-chalk/src/common/var.scss' with (
   $colors: (
     'primary': (
       'base': #AB9523,
     ),
+    'danger': (
+      'base': #C54322,
+    ),
+    'error': (
+      'base': #C54322,
+    ),
+  ),
+  $text-color: (
+    'placeholder': #999999,
+    'regular':#333333
   ),
 );

src/styles/main.scss

@@ -9,6 +9,9 @@ body,div,p,span,input,textarea,h1,h2,h3,h4,h5,h6,select,option,ul,ol,li,table,th
 html{
   // css 变量
   --themeColor:#{$themeColor};
+  --dangerColor:#{$dangerColor};
+  --auxiliaryColor:#{$auxiliaryColor};
+  font-family: $regularFont;
 }
 
 
@@ -69,6 +72,18 @@ div::-webkit-scrollbar-corner {
     white-space: nowrap;
   }
 }
+// 表格 斑马纹背景样式
+.back-color-row{
+  background-color: #FCFBF7!important;
+}
+
+// 普通按钮
+.element-common-button{
+  color: $themeColor;
+  border: 1px solid $themeColor;
+  font-size: 16px;
+  width: 130px;
+}
 
 // 表格没有数据的插槽样式
 .table-no-data{
@@ -109,10 +124,18 @@ div::-webkit-scrollbar-corner {
 // 表格头部
 .el-table__header{
   .cell{
-    font-weight: bold;
-    color: #000000;
+    font-weight: 400;
+    color: #333333;
   }
 }
+.el-table{
+  td.el-table__cell{
+    div{
+      color: #666666;
+    }
+  }
+}
+
 
 // 弹窗头部
 .el-dialog__header{

src/styles/theme.scss

@@ -1,2 +1,31 @@
-// 主题颜色
-$themeColor:#AB9523;
+// 主基调
+// 品牌色 - 关键按钮和选中状态
+$themeColor:#AB9523;
+// 警示色 - 警告按钮以及重要提示
+$dangerColor:#C54322;
+// 辅助色 - 输入框/选择器描边
+$auxiliaryColor:#DCDFE6;
+// 背景色 - 关键按钮和选中状态
+$backColor:#F2F6FA;
+
+// 文字颜色
+// 标题、表头、已输入状态文字等
+$mainTextColor:#333333;
+// 列表文字、单选多选、侧边导航栏未选中状态等
+$secondaryTextColor:#666666;
+// 筛选正文，提示性文字等
+$hitTextColorOne:#C0C4CC;
+// 警告性提示，警示按钮
+$dangerTextColor:#C54322;
+// 提示性文字
+$hitTextColorTwo:#999999;
+// 按钮文字、链接文字、内容图标等
+$linkTextColor:#AB9523;
+
+// 字体
+// 苹方常规体文字样例展示
+$regularFont:'PingFangSC-Regular,sans-serif';
+// 按钮文字、链接文字、内容图标等
+$mediumFont:'PingFangSC-Medium,sans-serif';
+// 苹方常规体文字样例展示
+$boldFont:'PingFangSC-Bold,sans-serif';

src/views/Login.vue

@@ -219,6 +219,7 @@ if (userAccount) {
 			img{
 				height: 100vh;
 				min-width: 300px;
+				vertical-align: bottom;
 			}
 		}
 	}

src/views/financialManagement/contractProgress.vue

@@ -45,6 +45,7 @@
       contract_source:0,
       contract_code:'',
       company_name:'',
+      isNew:'',
       seller_id:'',
       seller_name:'',
       contract_status:'',
@@ -137,7 +138,8 @@
       {
         amount:'',
         invoice_date:'',
-        remark:''
+        remark:'',
+        salesman:''
       }
     ]
   })
@@ -230,6 +232,7 @@
       crm_contract_id:0,
       contract_code:'',
       company_name:'',
+      isNew:'',
       seller_id:'',
       seller_name:'',
       contract_status:'',
@@ -369,7 +372,7 @@
   // 添加行
   const addTableRow=(type)=>{
     if(type=='invoice'){
-      invoiceForm.invoiceData.push({amount:'',invoice_date:'',remark:''})
+      invoiceForm.invoiceData.push({amount:'',invoice_date:'',remark:'',salesman:''})
     }else{
       placementForm.placementData.push({amount:'',invoice_date:'',remark:''})
     }
@@ -378,7 +381,7 @@
   // 表格添加行
   const addRow=(type,index)=>{
     if(type=='invoice'){
-      invoiceForm.invoiceData.splice((index+1),0,{amount:'',invoice_date:'',remark:''})
+      invoiceForm.invoiceData.splice((index+1),0,{amount:'',invoice_date:'',remark:'',salesman:''})
     }else{
       placementForm.placementData.splice((index+1),0,{amount:'',invoice_date:'',remark:''})
     }
@@ -387,14 +390,16 @@
   const deleteRow=(type,index)=>{
     let tempArr=[]
     let word='开票'
+    let haveSalesman=false
     if(type=='invoice'){
       tempArr=invoiceForm.invoiceData
+      if(tempArr[index].salesman) haveSalesman=true
       word='开票'
     }else{
       tempArr=placementForm.placementData
       word='到款'
     }
-    if(tempArr[index].amount=='' && tempArr[index].invoice_date==''){
+    if(tempArr[index].amount=='' && tempArr[index].invoice_date=='' && !haveSalesman){
       // 没有内容 直接删除
       tempArr.splice(index,1)
     }else{
@@ -596,6 +601,10 @@
     contractInfo.serviceShow=true
   }
 
+  const isNewChange=()=>{
+    console.log(contractInfo.form);
+  }
+
 // ----------------------created
   contractInfo.form.contract_register_id = parseInt(route.query.complianceId) || ''
   // complianceId没有，认为是合规登记
@@ -605,7 +614,6 @@
     getSellerListFun()
     getServiceListFun()
   }
-
   if(contractInfo.form.contract_register_id){
     //请求详情接口
     registerDetail({contract_register_id:contractInfo.form.contract_register_id}).then(res=>{
@@ -614,6 +622,7 @@
         crm_contract_id:res.data.crm_contract_id,
         contract_code:res.data.contract_code,
         company_name:res.data.company_name,
+        isNew:res.data.isNew,
         seller_id:res.data.seller_id,
         seller_name:res.data.seller_name,
         contract_status:res.data.contract_status,
@@ -645,7 +654,7 @@
             contractInfo.form.services.push(item)
           }
       })
-      console.log(contractInfo.form.services);
+      // console.log(contractInfo.form.services);
       contractInfo.contractValidityDate=[res.data.start_date,res.data.end_date]
       contractInfo.checkedService=res.data.service_list.map(item => {
         let serviceId=item.service_template_id
@@ -664,7 +673,8 @@
             invoice_id:item.contract_invoice_id,
             amount:item.amount,
             invoice_date:item.invoice_time,
-            remark:item.remark
+            remark:item.remark,
+            salesman:item.salesman
           })
         })
         // 添加一行空的
@@ -672,7 +682,8 @@
           invoiceForm.invoiceData.push({
             amount:'',
             invoice_date:'',
-            remark:''
+            remark:'',
+            salesman:''
           })
         }
       }
@@ -727,9 +738,11 @@
                       <el-option :label="item.contract_code" :value="item.contract_code" v-for="item in contractInfo.contractNoArray" :key="item.contract_id"></el-option>
                     </scrollableSelect>
                   </el-form-item>
-                  <el-form-item label="客户名称" prop="company_name">
+                  <el-form-item label="客户名称" prop="company_name" id="contractInfo-companyName">
                     <el-input v-model="contractInfo.form.company_name"
-                    placeholder="请输入客户名称"  />
+                    placeholder="请输入客户名称" />
+                    <el-checkbox v-model="contractInfo.form.isNew" label="新客户" style="margin-left: 20px;"
+                    size="large" @change="isNewChange" />
                   </el-form-item>
                   <el-form-item label="销售" prop="seller_id">
                     <el-select v-model="contractInfo.form.seller_id" placeholder="请选择销售" filterable @change="selectSeller">
@@ -789,18 +802,19 @@
               </div>
             </div>
             <div class="info-row">
-              <div class="info-row-title">套餐信息</div>
+              <div class="info-row-title" >套餐信息</div>
               <el-checkbox-group :disabled="contractInfo.operationtype!='compliance'"
-              v-model="contractInfo.checkedService" class="info-service-box">
+              v-model="contractInfo.checkedService" class="info-service-box" id="service-information">
                 <!-- 大套餐 -->
                 <el-checkbox :label="contractInfo.serviceArray[0]?.service_template_id" @change="(e) => serciveChange(e,1)" 
                   :class="{'viewService':canServiceShow(contractInfo.serviceArray[0]?.service_template_id)}"
-                :disabled="contractInfo.serviceType==2" style="margin-right: 0;" @click="viewService(contractInfo.serviceArray[0]?.service_template_id)">
+                :disabled="contractInfo.serviceType==2" @click="viewService(contractInfo.serviceArray[0]?.service_template_id)">
                   {{contractInfo.serviceArray[0]?.title}}
                 </el-checkbox>
                 <!-- 小套餐 -->
                 <div class="service-small">
-                  <el-checkbox :label="contractInfo.serviceArray[1]?.service_template_id" @change="(e) => serciveChange(e,2)" 
+                  <el-checkbox :label="contractInfo.serviceArray[1]?.service_template_id" style="margin-right: 0;"
+                  @change="(e) => serciveChange(e,2)" 
                     :class="{'viewService':canServiceShow(contractInfo.serviceArray[1]?.service_template_id)}"
                     :disabled="contractInfo.serviceType==1" @click="viewService(contractInfo.serviceArray[1]?.service_template_id)">
                     {{contractInfo.serviceArray[1]?.title}}
@@ -809,14 +823,34 @@
                   @click="selectVariety">选择品种</span>
                 </div>
                 <!-- 市场策略 -->
-                <el-checkbox :label="contractInfo.serviceArray[2]?.service_template_id" style="margin-right: 0;" 
+                <el-checkbox :label="contractInfo.serviceArray[2]?.service_template_id"
                 @click="viewService(contractInfo.serviceArray[2]?.service_template_id)"
                  :class="{'viewService':canServiceShow(contractInfo.serviceArray[2]?.service_template_id)}">
                  {{contractInfo.serviceArray[2]?.title}}
                 </el-checkbox>
                 <!-- 财富管理 -->
-                <el-checkbox :label="contractInfo.serviceArray[3]?.service_template_id">
-                  {{contractInfo.serviceArray[3]?.title}}
+                <el-checkbox v-for="item in contractInfo.serviceArray.slice(3)" :label="item.service_template_id">
+                  {{item.title}}
+                </el-checkbox>
+                <!-- 财富管理 -->
+                <el-checkbox v-for="item in contractInfo.serviceArray.slice(3)" :label="item.service_template_id">
+                  {{item.title}}
+                </el-checkbox>
+                <!-- 财富管理 -->
+                <el-checkbox v-for="item in contractInfo.serviceArray.slice(3)" :label="item.service_template_id">
+                  {{item.title}}
+                </el-checkbox>
+                <!-- 财富管理 -->
+                <el-checkbox v-for="item in contractInfo.serviceArray.slice(3)" :label="item.service_template_id">
+                  {{item.title}}
+                </el-checkbox>
+                <!-- 财富管理 -->
+                <el-checkbox v-for="item in contractInfo.serviceArray.slice(3)" :label="item.service_template_id">
+                  {{item.title}}
+                </el-checkbox>
+                <!-- 财富管理 -->
+                <el-checkbox v-for="item in contractInfo.serviceArray.slice(3)" :label="item.service_template_id">
+                  {{item.title}}
                 </el-checkbox>
               </el-checkbox-group>
               <div class="info-service-remark">
@@ -835,10 +869,10 @@
                   />
                 </div>
             </div>
-            <div class="contract-operation" v-if="contractInfo.operationtype=='compliance'" >
+            <!-- <div class="contract-operation" v-if="contractInfo.operationtype=='compliance'" >
               <el-button class="operation-button" style="margin-right: 30px;" @click="registrationCancel">取消</el-button>
               <el-button type="primary" @click="submit" class="operation-button">保存</el-button>
-            </div>
+            </div> -->
           </div>
           <!-- 开票登记 -->
           <div class="info-box" v-show="contractInfo.operationtype!='compliance' && contractInfo.form.has_payment!=1" 
@@ -854,7 +888,7 @@
                   v-if="contractInfo.operationtype=='invoice'&&invoiceForm.invoiceData.length==0">添加开票信息</el-button>
                 </div>
                 <el-form ref="invoiceFormRef" :model="invoiceForm" :disabled="contractInfo.operationtype!='invoice'">
-                  <el-table :data="invoiceForm.invoiceData" border v-if="invoiceForm.invoiceData.length>0"> 
+                  <el-table :data="invoiceForm.invoiceData" border v-if="invoiceForm.invoiceData.length>0" style="width: 100%;"> 
                     <el-table-column label="序号" width="80" align="center">
                       <template #default="{row,$index}">
                         {{$index+1}}
@@ -862,7 +896,7 @@
                     </el-table-column>
                     <el-table-column label="开票金额" width="180" align="center" prop="amount">
                       <template #header>
-                        <span style="color: #FF3400;">*</span>开票金额
+                        <span style="color: var(--dangerColor);">*</span>开票金额
                       </template>
                       <template #default="{row,$index}">
                         <el-form-item :prop="`invoiceData.${$index}.amount`" :show-message="false" 
@@ -874,7 +908,7 @@
                     </el-table-column>
                     <el-table-column label="开票日期" width="180" align="center" prop="invoice_date">
                       <template #header>
-                        <span style="color: #FF3400;">*</span>开票日期
+                        <span style="color: var(--dangerColor);">*</span>开票日期
                       </template>
                       <template #default="{row,$index}" >
                         <el-form-item :prop="`invoiceData.${$index}.invoice_date`" :show-message="false"
@@ -892,9 +926,26 @@
                         <span v-else>{{row.remark || '--'}}</span>
                       </template>
                     </el-table-column>
+                    <el-table-column label="销售" width="180" align="center" prop="salesman">
+                      <template #header>
+                        <span style="color: var(--dangerColor);">*</span>销售
+                      </template>
+                      <template #default="{row,$index}">
+                        <el-form-item :prop="`invoiceData.${$index}.salesman`" :show-message="false" 
+                        :rules="{required:true,message:()=>{ ElMessage.error('销售不能为空')},trigger:'change'}">
+                          <el-select v-model="row.salesman" style="width: 124px;" :disabled="row.invoice_id?true:false"
+                          placeholder="请选择销售" filterable>
+                            <el-option :label="item.real_name" :value="item.admin_id" 
+                            v-for="item in contractInfo.sellerList" :key="item.admin_id">
+
+                            </el-option>
+                          </el-select>
+                        </el-form-item>
+                      </template>
+                    </el-table-column>
                     <el-table-column label="操作" width="180" align="center" v-if="contractInfo.operationtype=='invoice'">
                       <template #default="{row,$index}" >
-                        <span class="table-operation-button" style="color: #FF3400;margin-right: 16px;" 
+                        <span class="table-operation-button" style="color: var(--dangerColor);margin-right: 16px;" 
                         @click="deleteRow('invoice',$index)">删除</span>
                         <span class="table-operation-button" @click="addRow('invoice',$index)">添加</span>
                       </template>
@@ -903,10 +954,6 @@
                 </el-form>
               </div>
             </div>
-            <!-- <div class="contract-operation" v-if="contractInfo.operationtype=='invoice'">
-              <el-button class="operation-button" style="margin-right: 30px;" @click="registrationCancel">取消</el-button>
-              <el-button type="primary" @click="submit" class="operation-button">保存</el-button>
-            </div> -->
           </div>
           <!-- 到款登记 -->
           <div class="info-box" v-show="contractInfo.operationtype!='compliance' && contractInfo.form.has_payment!=1" 
@@ -931,7 +978,7 @@
                     </el-table-column>
                     <el-table-column label="到款金额" width="180" align="center" prop="amount">
                       <template #header>
-                        <span style="color: #FF3400;">*</span>到款金额
+                        <span style="color: var(--dangerColor);">*</span>到款金额
                       </template>
                       <template #default="{row,$index}">
                         <el-form-item :prop="`placementData.${$index}.amount`" :show-message="false" 
@@ -943,7 +990,7 @@
                     </el-table-column>
                     <el-table-column label="到款月" width="180" align="center" prop="invoice_date">
                       <template #header>
-                        <span style="color: #FF3400;">*</span>到款日
+                        <span style="color: var(--dangerColor);">*</span>到款日
                       </template>
                       <template #default="{row,$index}">
                         <el-form-item :prop="`placementData.${$index}.invoice_date`" :show-message="false"
@@ -965,7 +1012,7 @@
                     <el-table-column label="操作" width="180" align="center" v-if="contractInfo.operationtype=='placement'">
                       <template #default="{row,$index}">
                         <span class="table-operation-button" @click="deleteRow('placement',$index)"
-                        style="color: #FF3400;margin-right: 16px;">删除</span>
+                        style="color: var(--dangerColor);margin-right: 16px;">删除</span>
                         <span class="table-operation-button" @click="addRow('placement',$index)">添加</span>
                       </template>
                     </el-table-column>
@@ -973,40 +1020,49 @@
                 </el-form>
               </div>
             </div>
-            <div class="contract-operation" v-if="contractInfo.operationtype=='placement' || contractInfo.operationtype=='invoice'">
+            <!-- <div class="contract-operation" v-if="contractInfo.operationtype=='placement' || contractInfo.operationtype=='invoice'">
               <el-button class="operation-button" style="margin-right: 30px;" @click="registrationCancel">取消</el-button>
               <el-button type="primary" @click="submit" class="operation-button">保存</el-button>
-            </div>
+            </div> -->
           </div>
         </div>
         <div class="contract-progress-aside"></div>
       </div>
       <!-- 登记流程 -->
       <div class="contract-progress-detail">
-        <p class="progress-aside-title">登记流程</p>
-        <el-scrollbar style="height: calc(100% - 110px);">
-          <div class="progress-box">
-              <el-timeline>
-                <el-timeline-item color="var(--themeColor)" v-for="item in contractInfo.progressList" 
-                :key="item.name" size="large" placement="top" hide-timestamp>
-                  <template #dot>
-                    <div class="customize-circle-outside">
-                      <div class="customize-circle-inside"></div>
+        <div class="contract-operation-zone" 
+        v-if="contractInfo.operationtype=='placement' || contractInfo.operationtype=='invoice' || contractInfo.operationtype=='compliance'">
+          <el-button class="element-common-button" size="large" style="margin-right: 30px;" @click="registrationCancel">取消</el-button>
+          <el-button type="primary" @click="submit" class="operation-button">保存</el-button>
+        </div>
+        <div class="contract-progress-zone" 
+        :style="{height:(contractInfo.operationtype=='placement' || 
+        contractInfo.operationtype=='invoice' || contractInfo.operationtype=='compliance')?'calc(100% - 70px)':'100%'}">
+          <p class="progress-aside-title">登记流程</p>
+          <el-scrollbar style="height: calc(100% - 110px);">
+            <div class="progress-box">
+                <el-timeline>
+                  <el-timeline-item color="var(--themeColor)" v-for="item in contractInfo.progressList" 
+                  :key="item.name" size="large" placement="top" hide-timestamp>
+                    <template #dot>
+                      <div class="customize-circle-outside">
+                        <div class="customize-circle-inside"></div>
+                      </div>
+                    </template>
+                    <div class="progress-item-title">{{operationType[item.op_type-1]?.label}}</div>
+                    <div class="progress-item-info">
+                      <span>{{item.admin_name}}</span>
+                      <span style="margin-left: 6px;" v-permission="['financial:list:invoice','financial:list:placement','financial:list:viewIandP','or']">
+                        {{item.amount_remark}}
+                      </span>
                     </div>
-                  </template>
-                  <div class="progress-item-title">{{operationType[item.op_type-1]?.label}}</div>
-                  <div class="progress-item-info">
-                    <span>{{item.admin_name}}</span>
-                    <span style="margin-left: 6px;" v-permission="['financial:list:invoice','financial:list:placement','financial:list:viewIandP','or']">
-                      {{item.amount_remark}}
-                    </span>
-                  </div>
-                  <div class="progress-item-info">{{item.create_time}}</div>
-                  <div class="progress-item-info" v-show="item.remark">备注：{{item.remark}}</div>
-                </el-timeline-item>
-              </el-timeline>
-          </div>
-        </el-scrollbar>
+                    <div class="progress-item-info">{{item.create_time}}</div>
+                    <div class="progress-item-info" v-show="item.remark">备注：{{item.remark}}</div>
+                  </el-timeline-item>
+                </el-timeline>
+            </div>
+          </el-scrollbar>
+        </div>
       </div>
       <!-- 小套餐选择品种弹窗 -->
       <permission-dia v-model:visible="contractInfo.varietyDiaShow" :type="contractInfo.varietyDiaType"
@@ -1071,22 +1127,25 @@
               justify-content: space-between;
             }
             @media screen and (max-width:1680px) { 
-              .contractInfo-form{
-                justify-content: center;
-              }
+              // .contractInfo-form{
+              //   justify-content: center;
+              // }
             } 
             // 套餐信息
             .info-service-box{
               min-width: 560px;
-              width: 560px;
+              // width: 560px;
               padding-left: 80px;
               margin-top: 20px;
+              margin-right: -40px;
               display: flex;
               align-items: center;
-              justify-content: space-between;
+              // justify-content: space-between;
+              flex-wrap: wrap;
               .service-small{
                 display: inline-flex;
                 align-items: center;
+                margin-right: 30px;
                 span{
                   font-size: 14px;
                   cursor: pointer;
@@ -1098,7 +1157,7 @@
             }
             .info-service-remark{
               display: flex;
-              padding-left: 50px;
+              padding-left: 80px;
               align-items: center;
               margin-top: 20px;
             }
@@ -1125,7 +1184,7 @@
                 .invoice-payment-money{
                   font-weight: 600;
                   font-size: 14px;
-                  color: #FF3400;
+                  color: var(--dangerColor);
                 }
               }
               .table-operation-button{
@@ -1143,73 +1202,74 @@
       }
     }
     .contract-progress-detail{
-      background-color: white;
       width: 26vw;
       position: fixed;
       right: 30px;
       top: 90px;
       min-width: 300px;
-      border: 1px solid #E8E8E8;
       height: calc(100vh - 120px);
       z-index: 2;
-      .progress-aside-title{
-        font-size: 18px;
-        font-weight: bold;
-        margin: 30px 30px 20px;
-      }
-      .progress-box{
-        margin-top: 10px;
-        padding:0 20px 20px 70px;
-        .customize-circle-outside{
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          background-color: rgba($color: $themeColor, $alpha: 0.4);
-          width: 14px;
-          left: -2px;
-          top: -4px;
-          height: 14px;
-          border-radius: 50%;
-          position: absolute;
-          .customize-circle-inside{
-            background-color:$themeColor;
-            width: 6px;
-            height: 6px;
-            border-radius: 50%;
-          }
+      .contract-operation-zone{
+        margin-bottom: 30px;
+        .operation-button{
+          height: 40px;
+          width: 130px;
         }
-        .progress-item-title{
+      }
+      .contract-progress-zone{
+        background-color: white;
+        border: 1px solid #E8E8E8;
+        .progress-aside-title{
+          font-size: 18px;
           font-weight: bold;
-          font-size: 16px;
-          color: #333;
-          margin-bottom: 8px;
+          margin: 30px 30px 20px;
         }
-        .progress-item-info{
-          font-size: 14px;
-          color:#666;
-          margin-bottom: 8px;
-          &:last-child{
-            margin-bottom: 0;
+        .progress-box{
+          margin-top: 10px;
+          padding:0 20px 20px 70px;
+          .customize-circle-outside{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background-color: rgba($color: $themeColor, $alpha: 0.4);
+            width: 14px;
+            left: -2px;
+            top: -4px;
+            height: 14px;
+            border-radius: 50%;
+            position: absolute;
+            .customize-circle-inside{
+              background-color:$themeColor;
+              width: 6px;
+              height: 6px;
+              border-radius: 50%;
+            }
+          }
+          .progress-item-title{
+            font-weight: bold;
+            font-size: 16px;
+            color: #333;
+            margin-bottom: 8px;
+          }
+          .progress-item-info{
+            font-size: 14px;
+            color:#666;
+            margin-bottom: 8px;
+            &:last-child{
+              margin-bottom: 0;
+            }
           }
         }
       }
-    }
-    @media screen and (max-width:1023px) {
-      .contract-progress-aside{
-        display: none;
-      }
-      .contract-progress-detail{
-        position: sticky;
-      }
     } 
-    .contract-operation{
-      text-align: center;
-      padding: 100px 30px 30px;
-      .operation-button{
-        height: 40px;
-        width: 130px;
-      }
-    }
+    // .contract-operation{
+    //   text-align: center;
+    //   padding: 100px 30px 30px;
+    //   .operation-button{
+    //     height: 40px;
+    //     width: 130px;
+    //   }
+    // }
   }
 </style>
 <style lang="scss">
@@ -1222,6 +1282,24 @@
         min-width: 286px;
         width: 15vw;
       }
+      .el-form-item{
+        .el-form-item__content{
+          min-width: 286px;
+          width: 15vw;
+          flex-wrap: nowrap;
+        }
+      }
+    }
+    #contractInfo-companyName{
+      .el-input__wrapper,.el-input{
+        min-width: 200px;
+        flex-grow: 1;
+      }
+    }
+    #service-information{
+      .el-checkbox{
+        margin-right: 40px;
+      }
     }
     #info-invoice-box{
       .el-input__wrapper{

src/views/financialManagement/financialList.vue

@@ -226,7 +226,7 @@ const statusArray=[{id:1,label:"进行中"},{id:2,label:"已完成"}]
           <div class="financial-top-option-zone">
               <el-button type="primary" size="large" style="width: 130px;margin-right: 30px;" v-permission="'financial:list:complianceAdd'"
               @click="registration('compliance')">合规登记</el-button>
-              <el-button @click="exportData" size="large" style="width: 130px;margin: 0 30px 0 0;" >导出</el-button>
+              <el-button @click="exportData" size="large" style="margin: 0 30px 0 0;" class="element-common-button" >导出</el-button>
               <el-upload
                 class="upload-demo"
                 accept=".xlsx"
@@ -235,7 +235,7 @@ const statusArray=[{id:1,label:"进行中"},{id:2,label:"已完成"}]
                 v-permission="'financial:list:complianceImport'"
               >
                 <el-button size="large" :loading="financial.importLoading"
-                style="width: 130px;margin-left: 0;"  >导入</el-button>
+                style="margin-left: 0;" class="element-common-button" >导入</el-button>
               </el-upload>
               
           </div>
@@ -324,7 +324,7 @@ const statusArray=[{id:1,label:"进行中"},{id:2,label:"已完成"}]
                         编辑
                       </span>
                       <span class="table-option-buttons"  v-permission="'financial:list:delete'"
-                      @click="delteRecord(row)" style="color:#FF3400;">
+                      @click="delteRecord(row)" style="color:var(--dangerColor);">
                         删除
                       </span>
                       <span class="table-option-buttons" v-permission="'financial:list:invoice'"

src/views/financialStatistics/commodityPayment.vue

@@ -0,0 +1,495 @@
+<script setup>
+import { Search } from '@element-plus/icons-vue'
+import dropdownText from '@/components/dropdown-text/index.vue'  
+
+  const groupList=[{id:1,group:'家人组'},{id:2,group:'联合组'},{id:3,group:'摆烂组'}]
+  const serviceList=[{id:1,service:'大套餐'},{id:2,service:'小套餐'},{id:3,service:'策略'}]
+  const dateTypeList=[{id:1,type:'开票时间'},{id:2,type:'到款时间'}]
+
+  const searchParams=reactive({
+    current:1,
+    page_size:10,
+    keyWord:'',
+    group:'',
+    service:'',
+    start_date:'',
+    end_date:'',
+    dateType:1,
+    invoice:'',
+    placement:''
+  })
+  const searchDate=ref(null)
+  watch(searchDate,(newVal)=>{
+    if(newVal){
+      searchParams.start_date=newVal[0]
+      searchParams.end_date=newVal[1]
+    }else{
+      searchParams.start_date=''
+      searchParams.end_date=''
+    }
+    searchCommodityP()
+  })
+
+  const commodityPData=reactive({
+    tableData:[],
+    total:25,
+    rowMergeArray:[]
+  })
+
+  // method
+  const commodityPList=()=>{
+    console.log(searchParams);
+  }
+
+  const searchCommodityP=()=>{
+    searchParams.current=1
+    commodityPList()
+  }
+
+  const dateTypeCommand=(id)=>{
+    if(id == searchParams.dateType) return 
+    searchParams.dateType=id
+    searchCommodityP()
+    // console.log(id);
+  }
+
+  // 切换每页的数量
+  const changePageSize=(pageSize)=>{
+    searchParams.page_size = pageSize
+    commodityPList()
+  }
+  const changePageNo = (pageNo)=>{
+    searchParams.current = pageNo
+    commodityPList()
+  }
+  // 时间类型改变
+  const dateTypeChange=()=>{
+    if(!searchDate.value) return
+    searchCommodityP()
+  }
+
+  const dataExport=()=>{
+    console.log('导出');
+  }
+
+  const getRowMergeArray=()=>{
+    commodityPData.rowMergeArray=[]
+    let flag=0
+    commodityPData.tableData.map((item,index) =>{
+      if(index==0){
+        commodityPData.rowMergeArray.push(1)
+      }else{
+        if(item.companyName === commodityPData.tableData[index - 1].companyName){
+          commodityPData.rowMergeArray[flag] ++; //项目名称相同，合并到同一个数组中
+          commodityPData.rowMergeArray.push(0);
+        }else {
+          commodityPData.rowMergeArray.push(1);
+          flag = index;
+        }
+      }
+    })
+  }
+
+  // 单元格合并
+  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) {
+      return 'back-color-row'
+    }
+    return ''
+  }
+
+  //  -----------------------------------------------------弹窗
+  // ---------------------------------编辑付款方式
+  const payTypeArray=[{id:1,type:'年付'},{id:2,type:'半年付'},{id:3,type:'季付'},{id:4,type:'次付'}]
+  const editPayTypeRef=ref(null)
+  const editPayTypeDia=reactive({
+    diaShow:false,
+    form:{
+      payType:''
+    }
+  })
+
+  const editPayType=(row)=>{
+    editPayTypeDia.diaShow=true
+    editPayTypeDia.form.payType=''
+    setTimeout(()=>{
+      editPayTypeRef.value && editPayTypeRef.value.clearValidate()
+    },0)
+  }
+  // 提交
+  const editPayTypeSubmit=()=>{
+    console.log(editPayTypeDia.form);
+    editPayTypeRef.value.validate((valid)=>{
+      if(valid){
+        ElMessage.success('编辑成功')
+        editPayTypeDia.diaShow=false
+      }
+    })
+  }
+  // ---------------------------------编辑付款方式
+  // --------------------------------设置套餐信息
+  const setServiceInfoDia=reactive({
+    diaShow:false,
+    dataFormList:[
+      {serviceId:1,serviceTitle:'大套餐',amount:0},
+      {serviceId:1,serviceTitle:'小套餐',amount:0},
+      {serviceId:1,serviceTitle:'海外报告',amount:0},
+      {serviceId:1,serviceTitle:'策略报告',amount:0},
+      {serviceId:1,serviceTitle:'财富管理',amount:0},
+      {serviceId:1,serviceTitle:'会展',amount:0},
+      {serviceId:1,serviceTitle:'赞助',amount:0},
+      {serviceId:1,serviceTitle:'调研门票',amount:0},
+      {serviceId:1,serviceTitle:'其他',amount:0}
+    ]
+  })
+
+
+  const setServiceInfo=(row)=>{
+    setServiceInfoDia.diaShow=true
+    // setServiceInfoDia.form.payType=''
+  }
+
+  const serviceAmountChange=(item)=>{
+    // console.log(item);
+    if(!item.amount.trim()){
+      item.amount=0
+      return 
+    }
+    let value = item.amount
+    if(!((value.endsWith('.') && value.indexOf('.')==(value.length-1)) || 
+    (value.endsWith('0') && value.indexOf('.')==(value.length-2)))){
+      item.amount = parseFloat(item.amount)
+    }
+  }
+
+  const setServiceInfoSubmit=()=>{
+    console.log(setServiceInfoDia.dataFormList);
+    let totalAmout=0
+    setServiceInfoDia.dataFormList.map(item =>{
+      totalAmout= Math.round(item.amount*100 + totalAmout*100)/100
+    })
+    // console.log(totalAmout,'totalAmout');
+    ElMessage.success('设置套餐信息成功')
+    setServiceInfoDia.diaShow=false
+  }
+
+  // --------------------------------设置套餐信息
+  //  -----------------------------------------------------弹窗
+
+
+  // created
+  commodityPList()
+  // getRowMergeArray()
+  const data=[{id:1,companyName:'哈哈',isNew:'是',date:'2022-01-01至2022-12-31',recordList:[
+    {invoiceDate:'12月29日',invoiceAmount:'10000.00',placementDate:'12月30日',
+    placementAmount:'3000.00',payType:'季付',seller:'张三',group:'销售组1',serviceInfo:'大套餐、小套餐、海外报告'},
+    {invoiceDate:'12月29日',invoiceAmount:'10000.00',placementDate:'',
+    placementAmount:'0',payType:'异常',seller:'张三',group:'销售组1',serviceInfo:'大套餐、小套餐、海外报告'}
+  ]},
+  {id:2,companyName:'哈哈',isNew:'是',date:'2022-01-01至2022-12-31',recordList:[
+    {invoiceDate:'12月29日',invoiceAmount:'10000.00',placementDate:'12月30日',
+    placementAmount:'3000.00',payType:'季付',seller:'张三',group:'销售组1',serviceInfo:'大套餐、小套餐、海外报告'},
+    {invoiceDate:'12月29日',invoiceAmount:'10000.00',placementDate:'12月30日',
+    placementAmount:'3000.00',payType:'季付',seller:'张三',group:'销售组1',serviceInfo:'大套餐、小套餐、海外报告'}
+  ]},
+  {id:3,companyName:'哈哈',isNew:'是',date:'2022-01-01至2022-12-31',recordList:[
+    {invoiceDate:'12月29日',invoiceAmount:'10000.00',placementDate:'12月30日',
+    placementAmount:'3000.00',payType:'季付',seller:'张三',group:'销售组1',serviceInfo:'大套餐、小套餐、海外报告'},
+    {invoiceDate:'12月29日',invoiceAmount:'10000.00',placementDate:'12月30日',
+    placementAmount:'3000.00',payType:'季付',seller:'张三',group:'销售组1',serviceInfo:'大套餐、小套餐、海外报告'}
+  ]},
+  {id:4,companyName:'哈哈',isNew:'是',date:'2022-01-01至2022-12-31',recordList:[
+    {invoiceDate:'12月29日',invoiceAmount:'10000.00',placementDate:'12月30日',
+    placementAmount:'3000.00',payType:'季付',seller:'张三',group:'销售组1',serviceInfo:'大套餐、小套餐、海外报告'},
+    {invoiceDate:'12月29日',invoiceAmount:'10000.00',placementDate:'12月30日',
+    placementAmount:'3000.00',payType:'季付',seller:'张三',group:'销售组1',serviceInfo:'大套餐、小套餐、海外报告'}
+  ]},
+  {id:5,companyName:'哈哈',isNew:'是',date:'2022-01-01至2022-12-31',recordList:[
+    {invoiceDate:'12月29日',invoiceAmount:'10000.00',placementDate:'12月30日',
+    placementAmount:'3000.00',payType:'季付',seller:'张三',group:'销售组1',serviceInfo:'大套餐、小套餐、海外报告'},
+    {invoiceDate:'12月29日',invoiceAmount:'10000.00',placementDate:'12月30日',
+    placementAmount:'3000.00',payType:'季付',seller:'张三',group:'销售组1',serviceInfo:'大套餐、小套餐、海外报告'}
+  ]},
+  {id:6,companyName:'哈哈',isNew:'是',date:'2022-01-01至2022-12-31',recordList:[
+    {invoiceDate:'12月29日',invoiceAmount:'10000.00',placementDate:'12月30日',
+    placementAmount:'3000.00',payType:'季付',seller:'张三',group:'销售组1',serviceInfo:'大套餐、小套餐、海外报告'}
+  ]},
+  {id:7,companyName:'哈哈',isNew:'是',date:'2022-01-01至2022-12-31',recordList:[
+    {invoiceDate:'12月29日',invoiceAmount:'10000.00',placementDate:'12月30日',
+    placementAmount:'3000.00',payType:'季付',seller:'张三',group:'销售组1',serviceInfo:'大套餐、小套餐、海外报告'},
+    {invoiceDate:'12月29日',invoiceAmount:'10000.00',placementDate:'',
+    placementAmount:'0',payType:'异常',seller:'张三',group:'销售组1',serviceInfo:'大套餐、小套餐、海外报告'},
+    {invoiceDate:'12月29日',invoiceAmount:'10000.00',placementDate:'12月30日',
+    placementAmount:'3000.00',payType:'季付',seller:'张三',group:'销售组1',serviceInfo:'大套餐、小套餐、海外报告'}
+  ]},
+  {id:8,companyName:'哈哈',isNew:'是',date:'2022-01-01至2022-12-31',recordList:[
+    {invoiceDate:'12月29日',invoiceAmount:'10000.00',placementDate:'12月30日',
+    placementAmount:'3000.00',payType:'季付',seller:'张三',group:'销售组1',serviceInfo:'大套餐、小套餐、海外报告'},
+    {invoiceDate:'12月29日',invoiceAmount:'10000.00',placementDate:'12月30日',
+    placementAmount:'3000.00',payType:'季付',seller:'张三',group:'销售组1',serviceInfo:'大套餐、小套餐、海外报告'}
+  ]},
+  {id:9,companyName:'哈哈',isNew:'是',date:'2022-01-01至2022-12-31',recordList:[
+    {invoiceDate:'12月29日',invoiceAmount:'10000.00',placementDate:'12月30日',
+    placementAmount:'3000.00',payType:'季付',seller:'张三',group:'销售组1',serviceInfo:'大套餐、小套餐、海外报告'},
+    {invoiceDate:'12月29日',invoiceAmount:'10000.00',placementDate:'12月30日',
+    placementAmount:'3000.00',payType:'季付',seller:'张三',group:'销售组1',serviceInfo:'大套餐、小套餐、海外报告'}
+  ]},
+  {id:10,companyName:'哈哈',isNew:'是',date:'2022-01-01至2022-12-31',recordList:[
+    {invoiceDate:'12月29日',invoiceAmount:'10000.00',placementDate:'12月30日',
+    placementAmount:'3000.00',payType:'季付',seller:'张三',group:'销售组1',serviceInfo:'大套餐、小套餐、海外报告'},
+    {invoiceDate:'12月29日',invoiceAmount:'10000.00',placementDate:'12月30日',
+    placementAmount:'3000.00',payType:'季付',seller:'张三',group:'销售组1',serviceInfo:'大套餐、小套餐、海外报告'}
+  ]},
+  {id:11,companyName:'哈哈',isNew:'是',date:'2022-01-01至2022-12-31',recordList:[
+    {invoiceDate:'12月29日',invoiceAmount:'10000.00',placementDate:'12月30日',
+    placementAmount:'3000.00',payType:'季付',seller:'张三',group:'销售组1',serviceInfo:'大套餐、小套餐、海外报告'},
+    {invoiceDate:'12月29日',invoiceAmount:'10000.00',placementDate:'12月30日',
+    placementAmount:'3000.00',payType:'季付',seller:'张三',group:'销售组1',serviceInfo:'大套餐、小套餐、海外报告'}
+  ]}]
+
+  data.map((item,index) =>{
+    commodityPData.rowMergeArray.push(item.recordList.length)
+    item.recordList.map((it,ind) =>{
+      if(ind-1>=0){
+        commodityPData.rowMergeArray.push(0)
+      }
+      commodityPData.tableData.push({
+        serialNumber:searchParams.page_size*(searchParams.current-1)+index+1,
+        id:item.id,companyName:item.companyName,isNew:item.isNew,date:item.date,
+        invoiceDate:it.invoiceDate,invoiceAmount:it.invoiceAmount,placementDate:it.placementDate,
+        placementAmount:it.placementAmount,payType:it.payType,seller:it.seller,
+        group:it.group,serviceInfo:it.serviceInfo
+      })
+    })
+  })
+</script>
+
+<template>
+    <div id="commodity-payment-container" class="commodity-payment-container">
+      <div class="search-zone">
+        <el-input v-model="searchParams.keyWord" placeholder="请输入客户名称/销售"
+        @input="searchCommodityP" :prefix-icon="Search" style="width: 286px;margin: 0 30px 10px 0;" ></el-input>
+        <el-select v-model="searchParams.group" placeholder="请选择销售组别" clearable style="width: 240px;margin: 0 30px 10px 0;"
+        @change="searchCommodityP">
+          <el-option :label="item.group" :value="item.id" v-for="item in groupList"></el-option>
+        </el-select>
+        <el-select v-model="searchParams.service" placeholder="请选择套餐信息" clearable style="width: 240px;margin: 0 30px 10px 0;"
+        @change="searchCommodityP">
+          <el-option :label="item.service" :value="item.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-select v-model="searchParams.dateType" placeholder="请选择日期类型" @change="dateTypeChange">
+          <el-option :label="item.type" :value="item.id" v-for="item in dateTypeList"></el-option>
+        </el-select> -->
+        <el-dropdown size="large" trigger="click" style="margin:0 60px 10px 0;" @command="dateTypeCommand">
+          <dropdownText>
+            {{dateTypeList.find(it => it.id==searchParams.dateType).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="已开票" v-model="searchParams.invoice" @change="searchCommodityP"></el-checkbox>
+          <el-checkbox el-checkbox label="已到款" v-model="searchParams.placement" @change="searchCommodityP"></el-checkbox>
+        </div>
+      </div>
+      <div class="operation-zone">
+        <div class="amount-show-zone">
+          <div class="amount-show-item" style="margin-right: 30px;">
+            开票合计金额：
+            <span>80000.00</span>
+          </div>
+          <div class="amount-show-item">
+            到款合计金额：
+            <span>80000.00</span>
+          </div>
+        </div>
+        <el-button @click="dataExport" size="large" class="element-common-button">导出</el-button>
+      </div>
+      <div class="table-zone">
+        <el-table :data="commodityPData.tableData" border ref="tableRef"
+        max-height="600" :row-class-name="tableRowClassName" :span-method="cellMerge">
+          <el-table-column label="序号" align="center" prop="serialNumber" >
+          </el-table-column>
+          <el-table-column label="客户名称" prop="companyName" align="center" show-overflow-tooltip ></el-table-column>
+          <el-table-column label="是否新客户" prop="isNew" align="center"></el-table-column>
+          <el-table-column label="合同有效期" prop="date" align="center" show-overflow-tooltip ></el-table-column>
+          <el-table-column label="开票日" prop="invoiceDate" align="center" id="spc-column"></el-table-column>
+          <el-table-column label="开票金额" prop="invoiceAmount" align="center"></el-table-column>
+          <el-table-column label="到款日" prop="placementDate" align="center"></el-table-column>
+          <el-table-column label="到款金额" prop="placementAmount" align="center"></el-table-column>
+          <el-table-column label="付款方式" prop="payType" align="center">
+            <template #default="{row}">
+              <span v-if="row.payType!='异常'">{{ row.payType }}</span>
+              <span v-else @click="editPayType(row)"
+              style="cursor: pointer;display: flex;align-items: center;justify-content: center;">
+                <span style="color: var(--dangerColor);">{{ row.payType }}</span>
+                <el-icon :size="20" 
+                style="position: absolute;right: 0;top: 50%;transform: translateX(-50%) translateY(-50%);"><Edit /></el-icon>
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column label="销售" prop="seller" align="center"></el-table-column>
+          <el-table-column label="组别" prop="group" align="center"></el-table-column>
+          <el-table-column label="套餐信息" prop="serviceInfo" align="center">
+            <template #default="{row}">
+              <span v-if="row.placementAmount&&row.placementAmount!=0" @click="setServiceInfo"
+              style="cursor: pointer;color: var(--themeColor);">{{ row.serviceInfo }}</span>
+              <span v-else style="color: #666;">{{ row.serviceInfo }}</span>
+            </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="commodityPData.total" @handleCurrentChange="changePageNo" @handleSizeChange="changePageSize"/>
+      </div>
+      <!-- 编辑付款方式弹窗 -->
+      <el-dialog title="编辑付款方式" v-model="editPayTypeDia.diaShow" width="492"
+       :close-on-click-modal="false">
+        <el-form :model="editPayTypeDia.form" ref="editPayTypeRef" style="display: flex;justify-self: center">
+          <el-form-item label="付款方式" prop="payType" :rules="{required:true,message:'请选择付款方式',trigger:'change'}">
+            <el-select v-model="editPayTypeDia.form.payType" placeholder="请选择付款方式" style="width: 286px;">
+              <el-option :label="item.type" :value="item.id" v-for="item in payTypeArray" :key="item.id"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+        <template #footer>
+          <div style="padding: 10px 0;">
+            <el-button @click="editPayTypeDia.diaShow = false">取消</el-button>
+            <el-button type="primary" @click="editPayTypeSubmit">
+              确定
+            </el-button>
+          </div>
+        </template>
+      </el-dialog>
+
+      <!-- 设置套餐信息弹窗 -->
+      <el-dialog title="套餐信息" v-model="setServiceInfoDia.diaShow" width="774"
+      :close-on-click-modal="false">
+        <div class="serviceInf-table" :style="{'height':Math.ceil(setServiceInfoDia.dataFormList.length/2)*50+'px'}">
+          <div class="serviceInf-table-item" v-for="item in setServiceInfoDia.dataFormList" :key="item.serviceId">
+            <div class="serviceInfo-label">{{ item.serviceTitle }}</div>
+            <div class=" serviceInfo-label serviceInfo-input" id="serviceInfo-input">
+              <el-input v-model="item.amount" placeholder="请输入金额" style="width: 124px;height: 28px;" @input="serviceAmountChange(item)"></el-input>
+            </div>
+          </div>
+          <div class="serviceInf-table-item" v-show="setServiceInfoDia.dataFormList.length%2!=0">
+            <div class="serviceInfo-label"></div>
+            <div class=" serviceInfo-label serviceInfo-input" id="serviceInfo-input">
+            </div>
+          </div>
+        </div>
+        <template #footer>
+          <div style="padding: 10px 0;">
+            <el-button @click="setServiceInfoDia.diaShow = false">取消</el-button>
+            <el-button type="primary" @click="setServiceInfoSubmit">
+              确定
+            </el-button>
+          </div>
+        </template>
+      </el-dialog>
+    </div>
+</template>
+  
+  
+<style lang="scss" scoped>
+  #commodity-payment-container{
+    min-height: 100%;
+    .search-zone{
+      margin-bottom: 20px;
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      .search-checkbox{
+        // margin-left: 60px;
+        margin-bottom: 10px;
+        height: 40px;
+        display: flex;
+        align-items: center;
+      }
+    }
+    .operation-zone{
+      margin-bottom: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .amount-show-zone{
+        display: flex;
+        align-items: center;
+        padding-left: 20px;
+        .amount-show-item{
+          span{
+            color: $dangerColor;
+          }
+        }
+      }
+    }
+    .serviceInf-table{
+      margin: 0 auto;
+      width: 644px;
+      // height: 200px;
+      display: flex;
+      flex-direction: column;
+      flex-wrap: wrap;
+      border-top: solid 1px $auxiliaryColor ;
+      border-left: solid 1px $auxiliaryColor ;
+      .serviceInf-table-item{
+        display: flex;
+        align-items: center;
+        .serviceInfo-label{
+          width: 140px;
+          height: 50px;
+          border-right: solid 1px $auxiliaryColor ;
+          border-bottom: solid 1px $auxiliaryColor ;
+          box-sizing: border-box;
+          padding: 10px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .serviceInfo-input{
+          width: 182px;
+        }
+      }
+    }
+  }
+</style>
+<style lang="scss">
+#commodity-payment-container{
+  #serviceInfo-input{
+    .el-input__wrapper{
+      height: 28px;
+    }
+  }
+}
+
+// .dropdown-text{
+//   &:hover{
+//     background-color: #c4b565;
+//     border-color: #c4b565;
+//   }
+// }
+
+</style>

src/views/financialStatistics/salesStatistics.vue

@@ -0,0 +1,169 @@
+<script setup>
+  
+
+
+  const groupList=[{id:1,group:'家人组'},{id:2,group:'联合组'},{id:3,group:'摆烂组'}]
+
+  const tabType=ref(1)
+  const tableRef = ref(null)
+  const statisticsData=reactive({
+    tableData:[{saller:'张三',group:1,invoiceAmount:3000,groupPercent:"50%",wholePercent:'21%'},
+    {saller:'张三',group:1,invoiceAmount:3000,groupPercent:"50%",wholePercent:'21%'},{saller:'张三',group:1,invoiceAmount:3000,groupPercent:"50%",wholePercent:'21%'},
+    {saller:'张三',group:1,invoiceAmount:3000,groupPercent:"50%",wholePercent:'21%'},{saller:'张三',group:1,invoiceAmount:3000,groupPercent:"50%",wholePercent:'21%'},
+    {saller:'张三',group:1,invoiceAmount:3000,groupPercent:"50%",wholePercent:'21%'},{saller:'张三',group:1,invoiceAmount:3000,groupPercent:"50%",wholePercent:'21%'},
+    {saller:'张三',group:1,invoiceAmount:3000,groupPercent:"50%",wholePercent:'21%'},{saller:'张三',group:1,invoiceAmount:3000,groupPercent:"50%",wholePercent:'21%'},
+    {saller:'张三',group:1,invoiceAmount:3000,groupPercent:"50%",wholePercent:'21%'},{saller:'张三',group:1,invoiceAmount:3000,groupPercent:"50%",wholePercent:'21%'},
+    {saller:'张三',group:1,invoiceAmount:3000,groupPercent:"50%",wholePercent:'21%'},{saller:'张三',group:1,invoiceAmount:3000,groupPercent:"50%",wholePercent:'21%'},
+    {saller:'张三',group:1,invoiceAmount:3000,groupPercent:"50%",wholePercent:'21%'},{saller:'张三',group:1,invoiceAmount:3000,groupPercent:"50%",wholePercent:'21%'},
+    {saller:'张三',group:1,invoiceAmount:3000,groupPercent:"50%",wholePercent:'21%'},{saller:'张三',group:1,invoiceAmount:3000,groupPercent:"50%",wholePercent:'21%'},
+    {saller:'张三',group:1,invoiceAmount:3000,groupPercent:"50%",wholePercent:'21%'},{saller:'张三',group:1,invoiceAmount:3000,groupPercent:"50%",wholePercent:'21%'},
+    {saller:'张三',group:1,invoiceAmount:3000,groupPercent:"50%",wholePercent:'21%'},{saller:'张三',group:1,invoiceAmount:3000,groupPercent:"50%",wholePercent:'21%'},
+    {saller:'张三',group:1,invoiceAmount:3000,groupPercent:"50%",wholePercent:'21%'},{saller:'张三',group:1,invoiceAmount:3000,groupPercent:"50%",wholePercent:'21%'},
+    {saller:'张三',group:1,invoiceAmount:3000,groupPercent:"50%",wholePercent:'21%'},{saller:'张三',group:1,invoiceAmount:3000,groupPercent:"50%",wholePercent:'21%'},],
+    total:25
+  })
+  // 搜索参数
+  const searchParams=reactive({
+    current:1,
+    page_size:10,
+    group:'',
+    start_date:'',
+    end_date:''
+  })
+  // 搜索参数-创建时间数组
+  const createtime=ref(null)
+
+  watch(createtime,(newVal)=>{
+    if(newVal){
+      searchParams.start_date=newVal[0]
+      searchParams.end_date=newVal[1]
+    }else{
+      searchParams.start_date=''
+      searchParams.end_date=''
+    }
+    searchStatistics()
+  })
+
+  // method
+
+  const changeTab=(tab)=>{
+    if(tabType.value==tab) return 
+    tableRef.value.clearSort()
+    tabType.value=tab
+    searchParams.current=1
+    searchParams.group=''
+    createtime.value=null
+  }
+
+  const statisticsList=()=>{
+    console.log(searchParams);
+  }
+
+  const searchStatistics=()=>{
+    searchParams.current = 1
+    statisticsList()
+  }
+  // 切换每页的数量
+  const changePageSize=(pageSize)=>{
+    searchParams.page_size = pageSize
+    statisticsList()
+  }
+  const changePageNo = (pageNo)=>{
+    searchParams.current = pageNo
+    statisticsList()
+  }
+  // 列表排序发生改变
+  const sortChange=({order,prop})=>{
+    console.log(order,prop);
+  }
+
+  const statisticeExport=()=>{
+    console.log("导出");
+  }
+
+  // created
+  statisticsList()
+
+</script>
+
+<template>
+    <div id="sales-statistics-container" class="sales-statistics-container">
+      <div class="statistics-tabs-zone">
+        <el-button size="large" class="tab-button element-common-button" :class="tabType==1?'actice-tab':''"
+        style="border-radius: 4px 0 0 4px;" @click="changeTab(1)">销售组排名</el-button>
+        <el-button size="large" class="tab-button element-common-button" :class="tabType==2?'actice-tab':''"
+        style="border-radius: 0 4px 4px 0;margin-left: 0;" @click="changeTab(2)">销售排名</el-button>
+      </div>
+      <div class="statistics-top-zone">
+        <div class="statistics-search-zone">
+          <el-select v-model="searchParams.group" placeholder="请选择销售组别" style="width: 300px;margin-right: 30px;"
+          @change="searchStatistics" v-show="tabType==2" clearable >
+            <el-option :label="item.group" :value="item.id" v-for="item in groupList"></el-option>
+          </el-select>
+          <el-date-picker v-model="createtime" type="daterange" 
+          value-format="YYYY-MM-DD" style="width:300px"
+          start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
+        </div>
+        <div class="statistice-buttons-zone">
+          <el-button @click="statisticeExport" class="element-common-button" size="large">导出</el-button>
+        </div>
+      </div>
+      <div class="statistics-table-zone" >
+        <el-table :data="statisticsData.tableData" border ref="tableRef"
+        max-height="600" @sort-change="sortChange" size='large'>
+          <el-table-column label="排名" align="center">
+            <template #default="{$index}">
+              {{ searchParams.page_size*(searchParams.current-1)+$index+1}}
+            </template>
+          </el-table-column>
+          <el-table-column label="销售员" prop="saller" align="center" v-if="tabType==2"></el-table-column>
+          <el-table-column label="销售组别" prop="group" align="center">
+            <template #default="{row}">
+              {{ groupList.find(item => row.group==item.id).group  }}
+            </template>
+          </el-table-column>
+          <el-table-column label="开票金额" prop="invoiceAmount" align="center" sortable ></el-table-column>
+          <el-table-column label="小组占比" prop="groupPercent" align="center" sortable></el-table-column>
+          <el-table-column label="全员占比" prop="wholePercent" align="center" sortable v-if="tabType==2"></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="statisticsData.total" @handleCurrentChange="changePageNo" @handleSizeChange="changePageSize"/>
+      </div>
+    </div>
+</template>
+  
+<style lang="scss" scoped>
+  #sales-statistics-container{
+    min-height: 100%;
+    .statistics-tabs-zone{
+      margin-bottom: 26px;
+      .tab-button{
+        color: $themeColor;
+        border: 1px solid $themeColor;
+        width: 130px;
+      }
+      .actice-tab{
+        color: white;
+        background-color: $themeColor;
+      }
+    }
+    .statistics-top-zone{
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 26px;
+      .statistics-search-zone{
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+</style>