Merge branch 'debug'

.env.development

@@ -1,4 +1,5 @@
 # 接口地址
-VITE_APP_API_URL="http://8.136.199.33:8619/api"
+VITE_APP_API_URL="http://192.168.77.4:8619/api"
+# VITE_APP_API_URL="http://8.136.199.33:8619/api"
 # crm系统地址
 VITE_CRM_SYSTEM_URL="https://rddptest.hzinsights.com/login"

src/api/crm.js

@@ -28,6 +28,19 @@ export function getSellerList() {
       method:'get'
   })
 }
+// 获取销售列表 - 无分组
+ /**
+  * @param {
+ * } data 
+ * @returns 
+ */
+export function getSellerListNoG() {
+ return request({
+     url:'/crm/company_seller/all_list',
+     method:'get'
+ })
+}
+
 // 根据合同编号搜索合同列表
  /**
   * 

src/api/financialMana.js

@@ -12,7 +12,6 @@ export function getSimpleServiceList() {
  })
 }
 
-
  // 获取套餐列表
  /**
   * 
@@ -61,7 +60,7 @@ export function registerListExport(data) {
 }
 
  /**
-  * 合同名称或者合同有效期查询校验
+  * 客户名称或者合同有效期查询校验
   * @param {
  * company_name - 客户名称 - 必填
  * start_date - 开始日期：格式2022-11-22 - 必填
@@ -310,4 +309,113 @@ export function prePlacementDelete(data) {
      method:'post',
      data
  })
-}
+}
+// -----------------预登记
+// 获取预登记列表
+ /**
+  * 
+  * @param data.page_size - 每页数据量 - 必填
+  * @param data.current - 页码 - 必填
+  * @param data.keyword - 关键词-客户姓名 - 非必填
+ * @returns 
+ */
+export function getPreRegistrationList(data) {
+  return request({
+      url:'/contract/pre_register/list',
+      method:'get',
+      params:data
+  })
+}
+ // 新增预登记
+ /**
+  * 
+  * @param {
+ * contract_register_id - 到登记ID
+ * company_name - 客户名称
+ * register_type - 预登记类型 3-开票预登记 4-到款预登记 
+ * start_date - 约定开始日期
+ * end_date - 约定结束日期
+ * lists - 开票/到款列表 
+ * services - 套餐列表
+ * } data 
+ * @returns 
+ */
+export function preRegistrationAdd(data) {
+ return request({
+     url:'/contract/pre_register/add',
+     method:'post',
+     data
+ })
+}
+ // 预登记详情
+ /**
+  * 
+  * @param {
+ * invoice_id contract_register_id
+ * } data 
+ * @returns 
+ */
+export function preRegistrationDetail(data) {
+ return request({
+     url:'/contract/pre_register/detail',
+     method:'post',
+     data
+ })
+}
+ // 编辑预登记
+ /**
+  * 
+  * @param {
+ * contract_register_id - 到登记ID
+ * company_name - 客户名称
+ * register_type - 预登记类型 3-开票预登记 4-到款预登记 
+ * start_date - 约定开始日期
+ * end_date - 约定结束日期
+ * lists - 开票/到款列表 
+ * services - 套餐列表
+ * } data 
+ * @returns 
+ */
+export function preRegistrationEdit(data) {
+ return request({
+     url:'/contract/pre_register/edit',
+     method:'post',
+     data
+ })
+}
+ // 预开票/预到款保存
+ /**
+  * 
+  * @param {
+ * contract_register_id - 到登记ID
+ * company_name - 客户名称
+ * register_type - 预登记类型 3-开票预登记 4-到款预登记 
+ * start_date - 约定开始日期
+ * end_date - 约定结束日期
+ * lists - 开票/到款列表 
+ * services - 套餐列表
+ * } data 
+ * @returns 
+ */
+export function preRegistrationSave(data) {
+ return request({
+     url:'/contract/pre_register/save',
+     method:'post',
+     data
+ })
+}
+ // 删除预登记
+ /**
+  * 
+  * @param {
+ * invoice_id contract_register_id arrive_id pre_register_id
+ * } data 
+ * @returns 
+ */
+export function preRegistrationDelete(data) {
+ return request({
+     url:'/contract/pre_register/del',
+     method:'post',
+     data
+ })
+}

src/assets/svg-icons/common/add.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.5 11V8.5H5V7.5H7.5V5H8.5V7.5H11V8.5H8.5V11H7.5Z" fill="currentColor"/>
+<path d="M3 14C2.44772 14 2 13.5523 2 13V3C2 2.44771 2.44772 2 3 2H13C13.5523 2 14 2.44772 14 3L14 13C14 13.5523 13.5523 14 13 14L3 14ZM3 13L13 13L13 3L3 3L3 13Z" fill="currentColor"/>
+</svg>

src/components/scrollable-select/index.vue

@@ -33,6 +33,9 @@
 <template>
   <el-select v-optionsLoadMore="loadMoreMethod" filterable remote :remote-method="searchMethod"
   :placeholder="props.placeholder" :teleported="false" @change="selectMethod">
+    <template #prefix>
+      <slot name="prefix"></slot>
+    </template>
     <slot name="default"></slot>
     <div v-loading="props.isLoading" class="load-item" v-if="props.useLoading"></div>
   </el-select>

src/directives/index.js

@@ -1,2 +1,3 @@
 export * from './modules/buttonPermisson'
-export * from './modules/select-scroll'
+export * from './modules/select-scroll'
+export * from './modules/overflow-tooltip'

src/directives/modules/overflow-tooltip.js

@@ -0,0 +1,46 @@
+// 长度溢出显示ToolTip 请绑定的标签元素包裹住 element-plus的el-tooltip。
+/**
+ * binding.value 为长度溢出的元素的css选择器，没有请设置
+ */
+import { ElMessage } from 'element-plus'
+
+let mainElement 
+let tooltipNode
+export const overflowTooltip={
+  created(el,binding,vnode) {
+    try {
+      let {value} = binding
+      tooltipNode = vnode.children.find((childrenCmpt) => childrenCmpt.component?.type.name == 'ElTooltip')
+      setTimeout(()=>{
+        mainElement = el.querySelector(value)
+        if(!mainElement){
+          throw new Error('找不到指定css选择器的元素')
+        }
+        if(mainElement?.scrollWidth > mainElement?.clientWidth){
+          // 超出
+          tooltipNode.component.props.disabled=false
+        }else{
+          tooltipNode.component.props.disabled=true
+        }
+      },0)
+      if(!value){
+        throw new Error('请设置长度溢出的元素的css选择器')
+      }
+      console.log(tooltipNode);
+      if(!tooltipNode){
+        throw new Error('找不到el-tooltip组件')
+      }
+    } catch (error) {
+      ElMessage.error(error.message)
+      // console.log(error.message);
+    }
+  },
+  updated() {
+    if(mainElement?.scrollWidth > mainElement?.clientWidth){
+      // 超出
+      tooltipNode.component.props.disabled=false
+    }else{
+      tooltipNode.component.props.disabled=true
+    }
+  },
+}

src/styles/main.scss

@@ -86,7 +86,72 @@ div::-webkit-scrollbar-corner {
   font-size: 16px;
   width: 130px;
 }
-
+// 主题按钮 - 大
+.main-button-large{
+  font-size: 14px;
+  min-width: 118px;
+  height: 40px;
+  border-radius: 4px;
+}
+// 主题按钮 - 中
+.main-button-medium{
+  font-size: 14px;
+  min-width: 120px;
+  height: 36px;
+  border-radius: 4px;
+}
+// 主题按钮 - 小
+.main-button-small{
+  font-size: 14px;
+  min-width: 80px;
+  height: 36px;
+  border-radius: 4px;
+}
+// 普通按钮 - 大
+.common-button-large{
+  font-size: 14px;
+  min-width: 118px;
+  height: 40px;
+  border-radius: 4px;
+  border: none;
+  background-color: #F5F7FA;
+  color: #333333;
+  &:hover{
+    background-color: #E9EBED;
+    color: unset;
+    border-color: unset;
+  }
+}
+// 普通按钮 - 中
+.common-button-medium{
+  font-size: 14px;
+  min-width: 120px;
+  height: 36px;
+  border-radius: 4px;
+  border: none;
+  background-color: #F5F7FA;
+  color: #333333;
+  &:hover{
+    background-color: #E9EBED;
+    color: unset;
+    border-color: unset;
+  }
+}
+// 普通按钮 - 小
+.common-button-small{
+  font-size: 14px;
+  min-width: 80px;
+  height: 36px;
+  border-radius: 4px;
+  border: none;
+  background-color: #F5F7FA;
+  color: #333333;
+  &:hover{
+    background-color: #E9EBED;
+    color: unset;
+    border-color: unset;
+  }
+}
 // 表格没有数据的插槽样式
 .table-no-data{
   display: flex;
@@ -205,10 +270,10 @@ div::-webkit-scrollbar-corner {
     font-size: 16px;
     // font-family: PingFang SC-Medium, PingFang SC;
     font-weight: 500;
-    &:first-child{
-      border: 1px solid $themeColor;
-      color: $themeColor;
-    }
+    // &:first-child{
+    //   border: 1px solid $themeColor;
+    //   color: $themeColor;
+    // }
   }
   .el-button + .el-button{
     margin-left: 20px;

src/utils/common-methods.js

@@ -34,4 +34,48 @@ export function downloadByFlow(data,type,fileName) {
   link.click()
   document.body.removeChild(link) //下载完成移除元素
   window.URL.revokeObjectURL(blob) //释放掉 blob 对象
+}
+
+/**
+ * 定时器轮询数据请求
+ * @param {*} flag 调用callback标志，建议传入返回Boolean值的函数
+ * @param {*} callback 回调函数
+ * @param {*} timeout 轮询间隔
+ */
+export function intervalDataRequest(flag,callback,timeout){
+  if(flag()){
+    // 拿到货币列表后才去取单位
+    callback()
+  }else{
+    // 轮询等拿到货币列表后去取单位，并清除轮询定时器
+    const timer = setInterval(()=>{
+      if(flag()){
+        callback()
+        clearInterval(timer)
+      }
+    },timeout)
+  }
+}
+
+/**
+ * 金额格式化，保留小数
+ * @param {*} money 金额
+ * @param {*} digit 保留几位小数- int
+ * @returns momey-string
+ */
+export const moneyFormatter=(money,digit=2)=>{
+  let digitD = parseInt(digit)
+  let result=money+''
+  if(!digitD && digitD!=0){
+    console.error('参数错误，digit必须为整数');
+    return result
+  }
+  if(result.indexOf('.')==-1){
+    // 没有小数
+    return digitD==0?result:result+'.'+'0'.padEnd(digitD,'0')
+  }else{
+    let digitZeno = Math.round(money)+''
+    let arr = result.split('.')
+    return digitD==0?digitZeno:arr[0]+'.'+arr[1].padEnd(2,'0')
+  }
 }

src/views/Login.vue

@@ -41,9 +41,10 @@
 					is_remember:login.checked
 				}
 				authLogin(params).then(async ({data})=>{
-					let {admin_name,change_pwd,real_name,token} = data
+					let {admin_id,admin_name,change_pwd,real_name,token} = data
 					localStorage.setItem('fsms_token',token)
 					localStorage.setItem('userInfo',JSON.stringify({
+						admin_id:admin_id,
 						admin_name:admin_name,
 						change_pwd:change_pwd,
 						real_name:real_name,

src/views/financialManagement/components/permissionQyDia.vue

@@ -71,10 +71,12 @@
 
   // -------method
   const permissionCheckedChange=(e)=>{
+    console.log(e);
     e.checked = e.check_list.length == e.children.length
     e.indeterminate = e.check_list.length>0 && e.check_list.length < e.children.length
   }
   const permissionAllChecked=(e)=>{
+    console.log(e);
     let arr = e.children.map((item) => {
       return item.service_template_id;
     });

src/views/financialManagement/composition/IandPList.js

@@ -14,7 +14,7 @@ export default function getIandPListCom(type) {
     searchParams:{
       current:1,
       page_size:10,
-      contract_code:'',
+      keyword:'',
       start_date:'',
       end_date:'',
       min_amount:'',

src/views/financialManagement/composition/common.js

@@ -0,0 +1,15 @@
+
+export default function financialCommon() {
+  // 合同类型
+  const contractTypeArray=[{value:0,label:"自付合同",
+  children:[{value:1,label:"新签",children:null},{value:2,label:"续约",children:null},{value:4,label:"补充协议",children:null}]},
+  {value:1,label:"代付合同",
+  children:[{value:1,label:"新签",children:null},{value:2,label:"续约",children:null},{value:4,label:"补充协议",children:null}]}]
+  // 合同状态
+  const contractStatusArray=[{id:1,label:"已审批"},{id:2,label:"单章寄出"},{id:3,label:"已签回"},{id:4,label:"已终止"},{id:5,label:"邮件备案"}]
+
+  return {
+    contractTypeArray,
+    contractStatusArray
+  }
+}

src/views/financialManagement/composition/serivceCascader.js

@@ -0,0 +1,152 @@
+
+export default function serviceCascader() {
+
+  let hasQyBigOne=false
+  let hasQyBigTwo=false
+  let hasQySmall=false
+  let hasFiccSmall=false
+  let hasFiccBig=false
+  // 小品种的service_template_id
+  const FICCSmallServiceId=[90001,90016,90103,90138,90142,90109,90110,90114,90107,90111,90108,
+    90118,90239,90205,90212,90224,90224,90226,90302,90317,90325,90340]
+
+  // 套餐选择更改
+  // servicesList套餐列表 value-选中的套餐Id cascaderRef - el-cascaser的ref值
+  const servicesChange=(servicesList,value,cascaderRef)=>{
+    // console.log(servicesList);
+    // 权益大套餐/45万
+    hasQyBigOne=false
+    // 权益大套餐/70万
+    hasQyBigTwo=false
+    // 11-权益大套餐/45万 12-权益大套餐/70万 单选
+    if(value.includes(11) || value.includes(12)){
+      value=value.filter(it => ![19,20,21,22,23,24,25,26,27].includes(it))
+      if(value.includes(11)){
+        value= value.filter(it => it!=12)
+        hasQyBigOne=true
+      }else if(value.includes(12)){
+        hasQyBigTwo=true
+      }
+    }
+    // 行业套餐
+    hasQySmall=false
+    if(value.some(it => [19,20,21,22,23,24,25,26,27].includes(it))){
+      hasQySmall=true
+    }
+
+    hasFiccBig=false
+    hasFiccSmall=false
+    
+    if(value.includes(1)){
+      // FICC大套餐
+      value=value.filter(it => !FICCSmallServiceId.includes(it))
+      hasFiccBig=true
+    }else if(value.some(it => FICCSmallServiceId.includes(it))){
+      // FICC小套餐
+      value=value.filter(it => it!=1)
+      hasFiccSmall=true
+    }
+
+    let checkedNodes=cascaderRef.getCheckedNodes()
+
+    // 套餐类型
+    let hasFICCService = checkedNodes.some(Node => Node.data.product_id == 1)
+    let hasQYService = checkedNodes.some(Node => Node.data.product_id == 2)
+    // 套餐类型
+    let typeValue
+    if(hasFICCService&&hasQYService){
+      typeValue=3
+    }else if(hasFICCService){
+      typeValue=1
+    }else if(hasQYService){
+      typeValue=2
+    }else{
+      typeValue=0
+    }
+    // console.log(checkedNodes);
+    
+    setDisable(servicesList)
+    // 返回选中的套餐Id 和套餐类型值
+    return {backValue:value,typeValue}
+  }
+  // 套餐禁用处理
+  const setDisable=(List)=>{
+    List.forEach(element => {
+      // if(!element.service_template_id){
+      //   setDisable(element.children)
+      //   return 
+      // }
+      if(hasQyBigOne||hasQyBigTwo){
+        // 权益大套餐选中了,禁用行业套餐
+        if(element.service_template_id==13){
+          element.disabled=true
+        }
+        if(hasQyBigOne){
+          // 权益大套餐-45万选中了，禁用70万
+          if(element.service_template_id==12){
+            element.disabled=true
+          }
+        }else{
+          // 权益大套餐-70万选中了，禁用45万
+          if(element.service_template_id==11){
+            element.disabled=true
+          }
+        }
+      }else{
+        // 权益大套餐没选中
+        if([11,12,13].includes(element.service_template_id)){
+          element.disabled=false
+        }
+      }
+      // 行业套餐选中了,禁用权益大套餐
+      if(hasQySmall){
+        if(element.service_template_id==10){
+          element.disabled=true
+        }
+      }else{
+        if(element.service_template_id==10){
+          element.disabled=false
+        }
+      }
+      // FICC大套餐选中了,禁用FICC小套餐
+      if(hasFiccBig){
+        if(element.service_template_id==2){
+          element.disabled=true
+        }
+      }else{
+        if(element.service_template_id==2){
+          element.disabled=false
+        }
+      }
+      // FICC小套餐选中了,禁用FICC大套餐
+      if(hasFiccSmall){
+        if(element.service_template_id==1){
+          element.disabled=true
+        }
+      }else{
+        if(element.service_template_id==1){
+          element.disabled=false
+        }
+      }
+      if(element.children){
+        setDisable(element.children)
+      }
+    });
+  }
+
+  // 重置套餐禁用状态
+  const resetDisable=(List)=>{
+    List.forEach(element => {
+      element.disabled=false
+      if(element.children && element.children.length>0){
+        resetDisable(element.children)
+      }
+    });
+  }
+
+  return {
+    FICCSmallServiceId,
+    servicesChange,
+    resetDisable
+  }
+}

src/views/financialManagement/contractProgress-component/Compliance.vue

@@ -0,0 +1,1145 @@
+<script setup>
+  import '../style/contractRegistration.scss'
+  import scrollableSelect from '@/components/scrollable-select/index.vue'
+  import permissionDia from '../components/permissionDia.vue'
+  import permissionQyDia from '../components/permissionQyDia.vue'
+  import {getContractSearchList,getServiceDetail} from '@/api/crm'
+  import {registerAdd,registerEdit,contractRegisterCheck} from '@/api/financialMana'
+  import {intervalDataRequest} from '@/utils/common-methods'
+  import financialCommon from '../composition/common'
+
+  const contractSourceArray=['非CRM合同导入','CRM合同导入']
+  // 合同状态数组
+  const contractStatusArray=financialCommon().contractStatusArray
+  // 合同类型数组
+  const contractTypeArray=financialCommon().contractTypeArray
+
+
+  const props=defineProps({
+    // 权限类型
+    operationtype:{
+      type:String,
+      default:'compliance'
+    },
+    // 货币数据
+    currencyList:{
+      type:Array,
+      default:()=>[]
+    },
+    // 套餐数据
+    serviceItem:{
+      type:Object,
+      default:()=>{}
+    },
+    // 销售数据
+    sellerData:{
+      type:Object,
+      default:()=>{}
+    },
+    // 预登记数据
+    supplementaryInfo:{
+      type:Object,
+      default:()=>{}
+    },
+    // 详情数据
+    detailInfo:{
+      type:Object,
+      default:()=>{}
+    }
+  })
+
+  const emits=defineEmits(['submitSuccess'])
+
+  const contractInfoForm=ref(null)
+  // 表单相关
+  const compliance=reactive({
+    // 合规登记表单
+    form:{
+      product_ids:'1,2',
+      supplement:0, // 是否是补录合同
+      contract_register_id:0,
+      crm_contract_id:0,
+      contract_source:0,
+      contract_code:'',
+      company_name:'',
+      currency_unit:'CNY',
+      new_company:0,
+      seller_ids:'',
+      seller_id:0,
+      contract_status:'',
+      start_date:'',
+      end_date:'',
+      contract_amount:'',
+      contract_type:'',
+      has_payment:'',
+      has_invoice:'',
+      actual_pay_companies:'',
+      relate_contract_code:'',
+      relate_contract_main_code:'',
+      sign_date:'',
+      agreed_pay_time:'',
+      // 套餐金额
+      service_amount:[],
+      services:[],
+      services_amount:'',
+      services_Qy_amount:'',
+      service_remark:'',
+      remark:""
+    },
+    rules:{
+      contract_source:{required:true,message:'合同来源不能为空',trigger:'change'},
+      contract_code:{required:true,message:'合同编号不能为空',trigger:'blur'},
+      company_name:{required:true,message:'客户名称不能为空',trigger:'blur'},
+      seller_ids:{required:true,message:'销售姓名不能为空',trigger:['blur','change']},
+      contract_status:{required:true,message:'合同状态不能为空',trigger:'change'},
+      start_date:{required:true,message:'合同有效期不能为空',trigger:'change'},
+      contract_amount:[{required:true,message:'合同金额不能为空',trigger:'blur'},
+      {
+        validator:(rule,value,callback)=>{
+          if(!parseFloat(value)){
+            callback(new Error('合同金额格式错误'))
+          }else{
+            callback()
+          }
+        },
+        trigger:'blur'
+      }],
+      contract_type:{required:true,message:'合同类型不能为空',trigger:'change'}
+    },
+    // 有效期
+    contractValidityDate:[],
+    // 合同类型选中
+    contractTypeCheck:[]
+  })
+
+  // --------------套餐信息
+  const serviceData=reactive({
+    // 选中的套餐 - ficc
+    checkedService:[],
+    // 选中的套餐 - 权益
+    checkedServiceQy:[],
+    // 小套餐选中的品种
+    checkedPermission:[],
+    // 权益大套餐选中的品种
+    checkedPermissionQyBig:[],
+    // 行业套餐选中的品种
+    checkedPermissionQySmall:[],
+    // 显示选择品种 - FICC小套餐
+    serviceVarietyShow:false,
+    serviceVarietyShowQy:false,
+    // 1-大套餐  2-小套餐
+    serviceType:0,
+    // 权益套餐 1、权益大套餐 2、行业套餐
+    serviceTypeQy:0,
+    // 品种选择 - Ficc
+    varietyDiaShow:false,
+    //品种选择 - Qy
+    varietyDiaShowQy:false,
+    varietyDiaType:'view',
+    // 1 - 权益大套餐 2-行业套餐 
+    qYDiaType:1,
+    // 查看套餐弹窗
+    serviceShow:false,
+  })
+
+  // 销售列表类型1-单Ficc 2-单权益 3-ficc和权益
+  const sellerListType=ref(3)
+  // 选中的销售数组
+  const cascaderSelectSeller=ref([])
+  // 查看套餐报价单 图片
+  const previewImage=ref('')
+  // 查看套餐报价单 标题
+  const previewImageTitle=ref('')
+
+  // 合同编号列表请求参数
+  const contractNoQuery=reactive({
+    page_size:20,
+    current:1,
+    keyword:''
+  })
+  const contractNoInfo=reactive({
+    contractNoTotal:0,
+    contractNoLoading:false,
+    contractNoArray:[]
+  })
+
+  // --------------------------------------方法
+  // 合同来源改变
+  const contractSourceChange=(value)=>{
+    // 切换来源，清空数据
+    compliance.form.product_ids=value==0?'1,2':'',
+    compliance.form.crm_contract_id=0,
+    compliance.form.contract_code='',
+    compliance.form.company_name='',
+    compliance.form.currency_unit='CNY',
+    compliance.form.new_company=0,
+    compliance.form.seller_ids='',
+    compliance.form.seller_id='',
+    compliance.form.contract_status='',
+    compliance.form.start_date='',
+    compliance.form.end_date='',
+    compliance.form.contract_amount='',
+    compliance.form.contract_type='',
+    compliance.form.has_payment='',
+    compliance.form.has_invoice='',
+    compliance.form.actual_pay_companies='',
+    compliance.form.relate_contract_code='',
+    compliance.form.relate_contract_main_code='',
+    compliance.form.sign_date='',
+    compliance.form.agreed_pay_time='',
+    compliance.form.services=[],
+    compliance.form.services_amount='',
+    compliance.form.services_Qy_amount='',
+    compliance.form.service_remark='',
+    compliance.form.remark=""
+    
+    serviceData.checkedService=[]
+    serviceData.checkedServiceQy=[]
+    serviceData.checkedPermission=[]
+    serviceData.checkedPermissionQyBig=[]
+    serviceData.checkedPermissionQySmall=[]
+    sellerListType.value = value==0?3:''
+    // 1-大套餐  2-小套餐
+    serviceData.serviceType=0
+    serviceData.serviceTypeQy=0
+    // 品种选择 - Ficc
+    serviceData.serviceVarietyShow=false
+    // 品种选择 - Qy
+    serviceData.serviceVarietyShowQy=false
+    compliance.contractTypeCheck=[]
+    compliance.contractValidityDate=[]
+    setTimeout(()=>{
+      // 去除错误信息
+      contractInfoForm.value && contractInfoForm.value.clearValidate()
+    },0)
+  }
+
+// ------------------------------------------------监听
+  watch(()=>props.supplementaryInfo.supplement,(value)=>{
+    if(value){
+      setSupplementaryData()
+    }
+  }) 
+
+  watch(()=>props.detailInfo.contract_register_id,(value)=>{
+    if(value){
+      setComplianceDetail()
+    }
+  }) 
+
+  watch(()=>compliance.form.has_invoice,(value)=>{
+    console.log(value);
+  }) 
+  
+// --------------------------------------------------------方法
+
+  // 合同类型改变
+  const contractTypeChange=(value)=>{
+    if(!value) return 
+    compliance.form.has_payment = value[0]
+    if(compliance.form.has_payment==0){
+      compliance.form.has_invoice=true
+    }
+    compliance.form.contract_type = value[1]
+    if(compliance.form.contract_type==1){
+      // 新签 -- 新客户
+      compliance.form.new_company = 1
+    }else{
+      // 续约、补充 -- 老客户
+      compliance.form.new_company = 0
+    }
+    if(compliance.form.contract_type!=4){
+      // 新签、续约
+      compliance.form.relate_contract_main_code=''
+    }
+    if(!compliance.form.has_payment){
+      compliance.form.relate_contract_code=''
+      compliance.form.actual_pay_companies=''
+    }
+  }
+
+  // 标识合规原本的销售是否已离职
+  let isLeave=false
+
+  // 销售修改
+  const sellerChange=(value)=>{
+    let ficcSeller,qySeller
+    let isLeaveSeller=false
+    if(value?.length>0){
+      for (let i = 0; i < value.length; i++) {
+        const element = value[i];
+        if(element[0]==2){
+          // ficc
+          ficcSeller = element[element.length-1]
+        }else if(element[0]==5){
+          //权益
+          qySeller = element[element.length-1]
+        }else{
+          // 离职的销售
+          isLeaveSeller=true
+        }
+      }
+      // 编辑，不允许修改销售数量
+      if(compliance.form.contract_register_id){
+        if(cascaderSelectSeller.value.length<2 && !isLeaveSeller || !(qySeller||ficcSeller)){
+          ElMessage.warning('合规套餐类型已定，不允许修改销售数量')
+          cascaderSelectSeller.value = compliance.form.seller_ids.split(',').map(item => +item)
+          return 
+        }
+      }
+      cascaderSelectSeller.value=[ficcSeller,qySeller]
+      compliance.form.seller_ids= cascaderSelectSeller.value.join(',')
+    }else{
+      if(compliance.form.contract_register_id){
+        // 编辑的情况下
+        ElMessage.warning('合规套餐类型已定，不允许修改销售数量')
+        cascaderSelectSeller.value = compliance.form.seller_ids.split(',').map(item => +item)
+        return 
+      }
+      cascaderSelectSeller.value=[]
+    }
+  }
+  // 合同编号选中
+  const selectContractNo=(value)=>{
+    let selectItem=contractNoInfo.contractNoArray.find(item=>item.contract_code == value)
+    if(selectItem.contract_business_type_int==2){
+      // 代付合同
+      compliance.form.has_payment=1
+      compliance.form.has_invoice=true
+      compliance.form.company_name=selectItem.actual_company_name
+      compliance.form.relate_contract_code=selectItem.relate_contract_code
+      compliance.form.actual_pay_companies=selectItem.company_name
+    }else{
+      //自付合同 也可能是非标代付
+      compliance.form.has_payment=0
+      compliance.form.has_invoice=true
+      compliance.form.company_name=selectItem.company_name
+      compliance.form.relate_contract_code=''
+      compliance.form.actual_pay_companies=''
+    }
+    // 获取套餐详情
+    getServiceDetail({contract_id:selectItem.contract_id}).then(res=>{
+
+      //非标代付合同
+      if(res.data.RelationContractDetailList && res.data.RelationContractDetailList.length>0 && selectItem.contract_business_type_int==1){
+        compliance.form.has_payment=1
+        compliance.form.has_invoice=false
+        compliance.form.relate_contract_code = res.data.RelationContractDetailList.map(it => it.ContractCode).join(',')
+        compliance.form.company_name=selectItem.company_name
+        compliance.form.actual_pay_companies=res.data.RelationContractDetailList.map(it => it.CompanyName).join(',')
+      }
+      compliance.contractTypeCheck = [compliance.form.has_payment,compliance.form.contract_type]
+
+      let servivesTemp = res.data?res.data.Service||[]:[]
+      if(selectItem.product_id==1){
+        // 清空权益套餐
+        serviceData.serviceVarietyShowQy = false
+        serviceData.serviceTypeQy = 0
+        serviceData.checkedServiceQy=[]
+        compliance.form.services_Qy_amount = ''
+        // FICC套餐
+        // 小套餐
+        let smallService = servivesTemp.find(item => item.ServiceTemplateId==2)
+        // 是否有大套餐
+        let hasBigService = servivesTemp.some(item => item.ServiceTemplateId==1)
+        serviceData.serviceVarietyShow=!!smallService
+        serviceData.serviceType = !!smallService?2:hasBigService?1:0
+        serviceData.checkedService=servivesTemp.map(item => item.ServiceTemplateId)
+        serviceData.checkedPermission=smallService?smallService.ChartPermissionIds||[]:[]
+        compliance.form.services_Qy_amount = ''
+      }else{
+        // 清空FICC套餐
+        serviceData.serviceVarietyShow = false
+        serviceData.serviceType = 0
+        serviceData.checkedService=[]
+        compliance.form.services_amount = ''
+        //权益
+        // 权益大套餐
+        let bigServiceQY = servivesTemp.find(item => item.FMSServiceTemplateId==11 || item.FMSServiceTemplateId==12)
+        // 行业套餐 - 医药/消费/科技/智造/策略
+        let smallServiceQY = servivesTemp.filter(item => [14,15,16,17,18].includes(item.FMSServiceTemplatePId))
+
+        serviceData.serviceVarietyShowQy = (!!bigServiceQY) || (!!smallServiceQY)
+        serviceData.serviceTypeQy = serviceData.qYDiaType =  !!bigServiceQY?1:!!smallServiceQY?2:0
+        serviceData.checkedServiceQy=[!!bigServiceQY?10:13]
+        if(!!bigServiceQY){
+          //权益大套餐
+          serviceData.checkedPermissionQyBig = [bigServiceQY.FMSServiceTemplateId]
+          serviceData.checkedPermissionQySmall = []
+        }else{
+          //行业套餐
+          serviceData.checkedPermissionQyBig = []
+          serviceData.checkedPermissionQySmall = smallServiceQY.map(item => item.FMSServiceTemplateId)
+        }
+        compliance.form.services_amount = ''
+      }
+      serviceData.varietyDiaType='edit'
+    })
+    compliance.form.product_ids = selectItem.product_id.toString()
+    sellerListType.value = selectItem.product_id
+    compliance.form.crm_contract_id=selectItem.contract_id
+    compliance.form.start_date=selectItem.start_date
+    compliance.form.end_date=selectItem.end_date
+    compliance.contractValidityDate=[selectItem.start_date,selectItem.end_date]
+    compliance.form.contract_amount=selectItem.price
+    compliance.form.seller_id=selectItem.seller_id
+    compliance.form.seller_ids=selectItem.seller_id+''
+    // selectItem.contract_type_int 1-新签 2-续约 3-补充
+    // compliance.form.contract_type 1-新签 2-续约 4-补充
+    compliance.form.contract_type=selectItem.contract_type_int==3?4:selectItem.contract_type_int
+    compliance.form.relate_contract_main_code=!compliance.form.has_payment?selectItem.relate_contract_main_code:''
+    // compliance.contractTypeCheck = [compliance.form.has_payment,compliance.form.contract_type]
+    contractInfoForm.value && 
+    contractInfoForm.value.validateField([
+      'contract_code','company_name','contract_type','seller_ids',
+      'start_date','contract_amount','relate_contract_code','actual_pay_companies'
+    ])
+    let sellerArray = sellerListType.value==1?props.sellerData.ficc_list:props.sellerData.rai_list
+    if(sellerArray.findIndex(item => item.seller_id == selectItem.seller_id)==-1){
+      // 为-1表示原本的销售已离职
+      compliance.form.seller_id = selectItem.seller_name
+      isLeave=true
+    }
+  }
+
+  // 合规登记-提交
+  const complianceSubmit=()=>{
+    contractInfoForm.value.validate(valid=>{
+      if(valid){
+        if(isLeave){
+          // 判断原本销售已离职
+          if(sellerListType.value==3){
+            if(!cascaderSelectSeller.value[0]){
+              ElMessage.error('请选择FICC销售')
+              return 
+            }
+            if(!cascaderSelectSeller.value[1]){
+              ElMessage.error('请选择权益销售')
+              return 
+            }
+            if(props.sellerData.ficc_list.findIndex(item => item.seller_id == cascaderSelectSeller.value[0])==-1||
+            props.sellerData.rai_list.findIndex(item => item.seller_id == cascaderSelectSeller.value[1])==-1){
+              ElMessage.error('选择的销售不存在或已离职')
+              return 
+            }
+          }else{
+            if(!Number(compliance.form.seller_id)){
+              ElMessage.error('选择的销售不存在或已离职')
+              return 
+            }
+          }
+        }
+        compliance.form.services=[]
+        compliance.form.service_amount=[]
+        if(serviceData.checkedServiceQy.length==0 && serviceData.checkedService.length==0){
+          ElMessage.warning('请选择套餐')
+          return 
+        }
+        let hasFICCservice=false
+        let hasQYservice=false
+        // FICC
+        if(serviceData.checkedService.length>0){
+          hasFICCservice=true
+          if((!serviceData.checkedPermission || serviceData.checkedPermission.length==0) 
+          && serviceData.checkedService.some(serviceId =>serviceId==2)){
+            ElMessage.warning('请保存FICC小套餐品种')
+            return 
+          }
+          serviceData.checkedService.map(serviceId=>{
+            let serviceSelectItem = props.serviceItem.serviceArray.find(it=> it.service_template_id==serviceId) || {}
+            // 小套餐
+            if(serviceId==2){
+              compliance.form.services.push({
+                service_template_id:serviceSelectItem.service_template_id,
+                value:'',
+                chart_permission_ids:serviceData.checkedPermission?serviceData.checkedPermission.join(','):'',
+                chart_permission_id:serviceSelectItem.chart_permission_id,
+                title:serviceSelectItem.title
+              })
+            }
+            else if(serviceId==3){
+              compliance.form.services.push(serviceSelectItem)
+            }
+            else{
+              compliance.form.services.push({service_template_id:serviceSelectItem.service_template_id,title:serviceSelectItem.title})
+            }
+          })
+          // 套餐金额
+          
+          if(!compliance.form.services_amount){
+            ElMessage.error('请填写FICC套餐金额')
+            return 
+          }
+          if(!parseFloat(compliance.form.services_amount)){
+            ElMessage.error('FICC套餐金额格式错误')
+            return 
+          }
+          compliance.form.service_amount.push({product_id:1,service_amount:+compliance.form.services_amount})
+          compliance.form.services_amount = +parseFloat(compliance.form.services_amount).toFixed(2) || 0
+        }
+        
+        // 权益
+        if(serviceData.checkedServiceQy.length>0){
+          hasQYservice=true
+          // 权益大套餐
+          if((!serviceData.checkedPermissionQyBig || serviceData.checkedPermissionQyBig.length==0) 
+          && serviceData.checkedServiceQy.some(serviceId =>serviceId==10)){
+            ElMessage.warning('请保存权益大套餐类型')
+            return 
+          }
+
+          // 行业套餐
+          if((!serviceData.checkedPermissionQySmall || serviceData.checkedPermissionQySmall.length==0) 
+          && serviceData.checkedServiceQy.some(serviceId =>serviceId==13)){
+            ElMessage.warning('请保存行业套餐品种')
+            return 
+          }
+          serviceData.checkedServiceQy.map(serviceId=>{
+            let serviceSelectItem = props.serviceItem.serviceArrayQy.find(it=> it.service_template_id==serviceId)
+            if(serviceSelectItem)
+            compliance.form.services.push({service_template_id:serviceSelectItem.service_template_id,title:serviceSelectItem.title})
+            // 权益大套餐
+            if(serviceId==10){
+              let subServiceItem = serviceSelectItem.children.find(it=> it.service_template_id==serviceData.checkedPermissionQyBig[0])
+              compliance.form.services.push({service_template_id:subServiceItem.service_template_id,title:subServiceItem.title})
+            }else if(serviceId==13){
+              // 行业套餐 - 每一层都要push
+              // 是否有子层被选中
+              const hasSubList=[0,0,0,0,0]
+              serviceData.checkedPermissionQySmall.map(serviceTemplateId=>{
+                for (let i = 0; i < serviceSelectItem.children.length; i++) {
+                  const element = serviceSelectItem.children[i];
+                  // 最后一层 - 主客观
+                  let subItem=element.children.find(it =>it.service_template_id == serviceTemplateId)
+                  if(subItem){
+                    compliance.form.services.push({service_template_id:subItem.service_template_id,title:subItem.title})
+                    hasSubList[i]=element.service_template_id
+                    break;
+                  }
+                }
+              })
+              // 中间层 - 医药、消费、科技、智造、策略
+              hasSubList.map((serviceTemplateId,ind) =>{
+                if(serviceTemplateId){
+                  let tempItem = serviceSelectItem.children[ind]
+                  compliance.form.services.push({service_template_id:tempItem.service_template_id,title:tempItem.title})
+                }
+              })
+            }
+          })
+          // 套餐金额
+          if(!compliance.form.services_Qy_amount){
+            ElMessage.error('请填写权益套餐金额')
+            return 
+          }
+          if(!parseFloat(compliance.form.services_Qy_amount)){
+            ElMessage.error('权益套餐金额格式错误')
+            return 
+          }
+          compliance.form.service_amount.push({product_id:2,service_amount:+compliance.form.services_Qy_amount})
+          compliance.form.services_Qy_amount = +parseFloat(compliance.form.services_Qy_amount).toFixed(2) || 0
+        }
+        let servicesAll=0
+        if(hasFICCservice&&hasQYservice){
+          servicesAll = Math.round((compliance.form.services_Qy_amount+compliance.form.services_amount)*100)/100
+        }else if(hasFICCservice){
+          servicesAll = compliance.form.services_amount
+          compliance.form.services_Qy_amount=''
+        }else{
+          servicesAll = compliance.form.services_Qy_amount
+          compliance.form.services_amount=''
+        }
+        compliance.form.contract_amount = +parseFloat(compliance.form.contract_amount).toFixed(2)
+        if(servicesAll!=compliance.form.contract_amount){
+          ElMessage.error('套餐总金额不等于合同金额')
+          return 
+        }
+
+        if(!compliance.form.has_payment){
+          compliance.form.has_payment=0
+          compliance.form.actual_pay_companies=''
+        }
+
+        if(compliance.form.has_invoice){
+          compliance.form.has_invoice=1
+        }else{
+          compliance.form.has_invoice=0
+        }
+        // 检验合同名称或者合同有效期是否重复
+        if(compliance.form.contract_register_id){
+          // 编辑
+          registerEdit(compliance.form).then(res=>{
+            let messageHint=ElMessage.success('合规登记编辑成功')
+            setTimeout(()=>{
+              messageHint.close()
+              emits('submitSuccess')
+            },1000)
+          })
+        }else{
+          let params=compliance.form
+          if(props.supplementaryInfo.id){
+            // 预登记过来的
+            params={...params,contract_register_id:props.supplementaryInfo.id}
+          }
+          // 新增
+          contractRegisterCheck({company_name:compliance.form.company_name,
+            start_date:compliance.form.start_date,end_date:compliance.form.end_date,seller_ids:compliance.form.seller_ids}).then(res=>{
+            if(res.data?.exist){
+              // 存在给提示
+              ElMessageBox.confirm('已登记过相同的合同，是否继续操作？',
+              '操作提示',{
+                type:'warning',
+                confirmButtonText: '确定',
+                cancelButtonText: '取消'
+              }).then(resp=>{
+                registerAdd(params).then(res=>{
+                  let messageHint=ElMessage.success('合规登记成功')
+                  setTimeout(()=>{
+                    messageHint.close()
+                    emits('submitSuccess')
+                  },1000)
+                })
+              }).catch(()=>{})
+            }else{
+              registerAdd(params).then(res=>{
+                let messageHint=ElMessage.success('合规登记成功')
+                setTimeout(()=>{
+                  messageHint.close()
+                  emits('submitSuccess')
+                },1000)
+              })
+            }
+          })
+        }
+      }
+    })
+  }
+  const canServiceShow=(serviceTemplateId)=>{
+    return compliance.form.services.find(item => item.service_template_id == serviceTemplateId) && props.operationtype!='compliance'
+  }
+  // 查看套餐 - ficc
+  const viewService=(serviceTemplateId)=>{
+    if(!canServiceShow(serviceTemplateId)) return 
+    if(serviceTemplateId==2){
+      serviceData.varietyDiaShow=true
+      serviceData.varietyDiaType='view'
+      return 
+    }
+    let viewItem=compliance.form.services.find(item => item.service_template_id == serviceTemplateId)
+    previewImageTitle.value = viewItem.title
+    previewImage.value=viewItem.value
+    serviceData.serviceShow=true
+  }
+
+  // 查看套餐 - 权益
+  const viewServiceQy=(serviceTemplateId,diaType)=>{
+    if(!canServiceShow(serviceTemplateId)) return 
+    serviceData.varietyDiaShowQy=true
+    serviceData.qYDiaType = diaType
+    serviceData.varietyDiaType='view'
+  }
+  // 合同编号远程搜索
+  const contractNoSearch=(value)=>{
+    if(!value.trim()) return 
+    contractNoQuery.keyword=value
+    contractNoQuery.current=1
+    contractNoInfo.contractNoArray=[]
+    getContractSearchListFun()
+  }
+  const loadContractNoMore=()=>{
+    if(contractNoInfo.contractNoArray.length >=contractNoInfo.contractNoTotal) return 
+    contractNoQuery.current++
+    getContractSearchListFun()
+  }
+  const getContractSearchListFun=()=>{
+    contractNoInfo.contractNoLoading=true 
+    getContractSearchList(contractNoQuery).then(res=>{
+      contractNoInfo.contractNoArray=contractNoInfo.contractNoArray.concat(res.data.list || [])
+      contractNoInfo.contractNoTotal=res.data.page.total
+    }).finally(()=>{
+      contractNoInfo.contractNoLoading=false
+    })
+  }
+
+
+  // 销售选中
+  const selectSeller=(value)=>{
+    compliance.form.seller_ids=value+''
+  }
+
+  // 对于销售的处理
+  const sellerOperation=({seller_id,rai_seller_id,seller_ids,seller_name,rai_seller_name})=>{
+    console.log({seller_id,rai_seller_id,seller_ids,seller_name,rai_seller_name});
+    if(seller_id && rai_seller_id){
+      cascaderSelectSeller.value = seller_ids.split(',').map(item => +item) 
+      if(props.sellerData.ficc_list.findIndex(item => item.seller_id == seller_id)==-1){
+        props.sellerData.all_list.push({
+          seller_id:seller_id,
+          seller_name:seller_name+'-已离职',
+          disabled:true,
+          child:null
+        })
+        isLeave=true
+      }
+      if(props.sellerData.rai_list.findIndex(item => item.seller_id == rai_seller_id)==-1){
+        props.sellerData.all_list.push({
+          seller_id:rai_seller_id,
+          seller_name:rai_seller_name+'-已离职',
+          disabled:true,
+          child:null
+        })
+        isLeave=true
+      }
+    }else if(!seller_id){
+      if(props.sellerData.rai_list.findIndex(item => item.seller_id == rai_seller_id)==-1){
+        // 为-1表示原本的销售已离职
+        compliance.form.seller_id = rai_seller_name
+        isLeave=true
+      }
+    }else{
+      if(props.sellerData.ficc_list.findIndex(item => item.seller_id == seller_id)==-1){
+        // 为-1表示原本的销售已离职
+        compliance.form.seller_id = seller_name
+        isLeave=true
+      }
+    }
+  }
+
+  // 选择品种 - ficc
+  const selectVariety=()=>{
+    serviceData.varietyDiaType='edit'
+    serviceData.varietyDiaShow=true
+  }
+  // 选择品种 - 权益
+  const selectVarietyQy=(diaType)=>{
+    serviceData.varietyDiaType='edit'
+    serviceData.varietyDiaShowQy=true
+    serviceData.qYDiaType = diaType
+  }
+
+  const getPermissionChecked=(list)=>{
+    serviceData.checkedPermission=list
+  }
+
+  const getPermissionQYChecked=(list)=>{
+    if(serviceData.qYDiaType==1) serviceData.checkedPermissionQyBig=list
+    else if(serviceData.qYDiaType==2) serviceData.checkedPermissionQySmall=list
+  }
+
+  // 有效期变更触发函数
+  const contractValidityDateChane=(value)=>{
+    if(value){
+      compliance.form.start_date=value[0]
+      compliance.form.end_date=value[1]
+    }else{
+      compliance.form.start_date=compliance.form.end_date=''
+    }
+  }
+
+
+  // 服务改变
+  const serciveChange=(value,type,serviceType='ficc',openDia=true)=>{
+    if(serviceType=='ficc'){
+      if(type==2){
+        serviceData.serviceVarietyShow=value
+        serviceData.varietyDiaType='edit'
+        serviceData.varietyDiaShow=openDia&&value
+      }
+      serviceData.serviceType = value?type:0
+    }else{
+      serviceData.serviceVarietyShowQy=value
+      serviceData.varietyDiaType='edit'
+      serviceData.varietyDiaShowQy=openDia&&value
+      serviceData.serviceTypeQy = serviceData.qYDiaType =  value?type:0
+    }
+  }
+
+  const setSupplementaryData=()=>{
+    compliance.form.supplement =1
+    compliance.form.company_name = props.supplementaryInfo.company_name
+    compliance.form.currency_unit = props.supplementaryInfo.currency_unit
+    compliance.form.new_company = parseInt(props.supplementaryInfo.new_company)
+    compliance.form.start_date = props.supplementaryInfo.start_date
+    compliance.form.end_date = props.supplementaryInfo.end_date
+    compliance.contractValidityDate = [compliance.form.start_date,compliance.form.end_date]
+    serviceDataHandle(props.supplementaryInfo.services)
+  }
+
+  const setComplianceDetail=()=>{
+    compliance.form.product_ids=props.detailInfo.product_ids
+    compliance.form.contract_register_id=props.detailInfo.contract_register_id
+    compliance.form.crm_contract_id=props.detailInfo.crm_contract_id
+    compliance.form.contract_code=props.detailInfo.contract_code
+    compliance.form.company_name=props.detailInfo.company_name
+    compliance.form.currency_unit=props.detailInfo.currency_unit
+    compliance.form.new_company=props.detailInfo.new_company
+    compliance.form.seller_ids=props.detailInfo.seller_ids
+    compliance.form.seller_id=props.detailInfo.seller_id || props.detailInfo.rai_seller_id
+    compliance.form.contract_status=props.detailInfo.contract_status
+    compliance.form.start_date=props.detailInfo.start_date
+    compliance.form.end_date=props.detailInfo.end_date
+    compliance.form.contract_amount=props.detailInfo.contract_amount
+    compliance.form.contract_type=props.detailInfo.contract_type
+    compliance.form.has_payment=props.detailInfo.has_payment
+    compliance.form.has_invoice=props.detailInfo.has_invoice
+    compliance.form.actual_pay_companies=props.detailInfo.actual_pay_companies
+    compliance.form.relate_contract_code=props.detailInfo.relate_contract_code
+    compliance.form.relate_contract_main_code=props.detailInfo.relate_contract_main_code
+    compliance.form.sign_date=props.detailInfo.sign_date
+    compliance.form.agreed_pay_time=props.detailInfo.agreed_pay_time
+    compliance.form.service_remark=props.detailInfo.service_remark
+    compliance.form.remark=props.detailInfo.remark
+    compliance.form.contract_source=props.detailInfo.contract_source
+    // 有效期回显 
+    compliance.contractValidityDate=[compliance.form.start_date,compliance.form.end_date]
+    // 合同类型回显
+    compliance.contractTypeCheck = [compliance.form.has_payment,compliance.form.contract_type]
+    // 销售
+    let para={
+      seller_id:props.detailInfo.seller_id,
+      rai_seller_id:props.detailInfo.rai_seller_id,
+      seller_ids:props.detailInfo.seller_ids,
+      seller_name:props.detailInfo.seller_name,
+      rai_seller_name:props.detailInfo.rai_seller_name
+    }
+    // 拿到销售列表后才去做处理
+    intervalDataRequest(()=> props.sellerData.all_list>0 ,sellerOperation(para),1)
+    // 销售显示
+    sellerListType.value=props.detailInfo.sellerListType
+    if(sellerListType.value == 3){
+      cascaderSelectSeller.value = compliance.form.seller_ids.split(',').map(item => +item) 
+    }
+    // 套餐金额
+    compliance.form.services_amount = props.detailInfo.service_amount_list.find(it => it.product_id==1)?
+    props.detailInfo.service_amount_list.find(it => it.product_id==1).service_amount:0
+    compliance.form.services_Qy_amount = props.detailInfo.service_amount_list.find(it => it.product_id==2)?
+    props.detailInfo.service_amount_list.find(it => it.product_id==2).service_amount:0
+    serviceDataHandle(props.detailInfo.services)
+  }
+  // 回显套餐数据
+  const serviceDataHandle=(services)=>{
+    services.map(item =>{
+      if(item.service_template_id==2){
+        // ficc小套餐
+        compliance.form.services.push({
+          service_template_id:item.service_template_id,
+          value:item.value,
+          chart_permission_ids:item.chart_permission_ids,
+          chart_permission_id:item.chart_permission_id,
+          title:item.title
+        })
+        serviceData.checkedPermission=item.chart_permission_ids.split(',')
+      }else if(item.service_template_id==11 || item.service_template_id==12){
+        // 权益大套餐
+        serviceData.checkedPermissionQyBig = [item.service_template_id]
+        compliance.form.services.push(item)
+      }else if([19,20,21,22,23,24,25,26,27].includes(item.service_template_id)){
+        // 行业套餐
+        serviceData.checkedPermissionQySmall.push(item.service_template_id)
+        compliance.form.services.push(item)
+      }else{
+        compliance.form.services.push(item)
+      }
+    })
+    serviceData.checkedService=services.map(item => {
+      if(item.product_id==1){
+        let serviceId=item.service_template_id
+        // 大套餐或者小套餐
+        if(serviceId==1 || serviceId==2) serciveChange(true,serviceId,'ficc',false)
+        return serviceId
+      }
+    }).filter(Boolean)
+    serviceData.checkedServiceQy=services.map(item => {
+      if(item.product_id==2){
+        let serviceId=item.service_template_id
+        // 权益大套餐或者行业套餐
+        if(serviceId==10 || serviceId==13) serciveChange(true,serviceId==10?1:2,'qy',false)
+        return serviceId
+      }
+    }).filter(Boolean)
+  }
+
+  // --------------------------------------开始
+  defineExpose({
+    complianceSubmit
+  })
+</script>
+
+<template>
+    <div id="contractProgress-compliance">
+      <div class="info-row" id="contract-info-container">
+        <div class="info-row-title">合同信息</div>
+        <div style="margin: 0px 42px 0 62px;">
+          <el-form :model="compliance.form" inline ref="contractInfoForm" label-width="130" 
+          :disabled="operationtype!='compliance'"
+          :rules="compliance.rules" class="contractInfo-form">
+            <el-form-item label="合同来源" prop="contract_source" >
+              <el-select v-model="compliance.form.contract_source" :disabled="compliance.form.supplement!=0"
+              placeholder="请选择合同来源" @change="contractSourceChange">
+                <el-option :label="item" :value="index" 
+                v-for="(item,index) in contractSourceArray" :key="item"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="合同编号" prop="contract_code" id="selectContract">
+              <el-input v-model="compliance.form.contract_code" placeholder="请输入合同编号"
+              v-if="compliance.form.contract_source==0" >
+                <template #prefix v-if="compliance.form.has_payment==1">
+                  <span>{{ compliance.form.has_invoice?'代付方':'实际使用方' }}</span>
+                </template>
+              </el-input>
+              <scrollableSelect :loadMoreMethod="loadContractNoMore" v-model="compliance.form.contract_code" placeholder="请搜索合同编号" v-else
+              :searchMethod="contractNoSearch" @change="selectContractNo" useLoading :isLoading="contractNoInfo.contractNoLoading" 
+              >
+                <template #prefix v-if="compliance.form.has_payment==1">
+                  <span>{{ compliance.form.has_invoice?'代付方':'实际使用方' }}</span>
+                </template>
+                <el-option :label="item.contract_code" :value="item.contract_code" v-for="item in contractNoInfo.contractNoArray" :key="item.contract_id"></el-option>
+              </scrollableSelect>
+            </el-form-item>
+            <el-form-item label="客户名称" prop="company_name">
+              <el-input v-model="compliance.form.company_name" 
+              placeholder="请输入客户名称（实际使用方）"  />
+            </el-form-item>
+            <el-form-item label="销售" prop="seller_ids">
+              <el-cascader v-if="sellerListType==3" filterable style="min-width: 320px;width: 15vw;"
+              :options="sellerData.all_list" placeholder="请选择销售" @change="sellerChange"
+                :show-all-levels="false" v-model="cascaderSelectSeller" :clearable="false" 
+                :props="{multiple:true,label:'seller_name',value:'seller_id',children:'child'}"
+                key="seller" >
+              </el-cascader>
+              <el-select v-else-if="!sellerListType" placeholder="请选择销售" filterable  >
+                <el-option :label="item" :value="item" v-for="item in []" :key="item"></el-option>
+              </el-select>
+              <el-select v-else v-model="compliance.form.seller_id" placeholder="请选择销售" 
+              filterable @change="selectSeller" >
+                <el-option :label="item.seller_name" :value="item.seller_id" 
+                v-for="item in sellerListType==1?sellerData.ficc_list:sellerData.rai_list" :key="item.admin_id"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="合同金额" id="contractInfo-contractAmount"
+            prop="contract_amount">
+              <el-input v-model.trim="compliance.form.contract_amount"
+              placeholder="请输入合同金额"  />
+              <el-select v-model="compliance.form.currency_unit" placeholder="请选择货币类型" 
+              style="margin-left: 20px;" :disabled="compliance.form.supplement!=0">
+                <el-option v-for="item in currencyList" :key="item.code" :label="item.name" :value="item.code">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="合同有效期" 
+            prop="start_date">
+              <el-date-picker type="daterange" 
+              v-model="compliance.contractValidityDate" @change="contractValidityDateChane"
+              start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD"
+              :clearable="false">
+              </el-date-picker>
+            </el-form-item>
+            <el-form-item label="合同类型" prop="contract_type" id="contractInfo-contractType">
+              <el-cascader :options="contractTypeArray" placeholder="请选择合同类型" @change="contractTypeChange"
+              v-model="compliance.contractTypeCheck" :clearable="false" key="contractType">
+              </el-cascader>
+              <el-checkbox v-model="compliance.form.has_invoice" style="margin-left: 20px;"
+              v-show="compliance.form.has_payment==1">（开票、到款）</el-checkbox>
+            </el-form-item>
+            <el-form-item label="关联主合同" prop="relate_contract_main_code" 
+            v-if="compliance.form.contract_type==4">
+              <el-input v-model="compliance.form.relate_contract_main_code" 
+              placeholder="请输入关联主合同" />
+            </el-form-item>
+            <el-form-item label="代付方" prop="actual_pay_companies" class="actual_pay_companies"
+            :rules="compliance.form.contract_source==0?{required:true,message:'代付方不能为空',trigger:'blur'}:{required:false}"
+            v-if="compliance.form.has_payment==1">
+              <div v-overflowTooltip="'#overflow-input'">
+                <el-tooltip placement="top" :content="compliance.form.actual_pay_companies" >
+                  <el-input v-model="compliance.form.actual_pay_companies"
+                  placeholder="请输入代付方信息" id="overflow-input" />
+                </el-tooltip>
+              </div>
+            </el-form-item>
+            <el-form-item :label="compliance.form.has_invoice?'关联客户合同':'关联代付合同'" prop="relate_contract_code" v-if="compliance.form.has_payment">
+              <el-input v-model="compliance.form.relate_contract_code" 
+              :placeholder="compliance.form.has_invoice?'请输入实际使用方合同编号':'请输入代付合同编号'" />
+            </el-form-item>
+            <el-form-item label="合同状态" prop="contract_status">
+              <el-select v-model="compliance.form.contract_status" 
+              placeholder="请选择合同状态" >
+                <el-option :label="item.label" :value="item.id" v-for="item in contractStatusArray" :key="item.id"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="签订日" prop="sign_date" >
+              <el-date-picker v-model="compliance.form.sign_date" 
+              placeholder="请选择签订日" value-format="YYYY-MM-DD"
+              :clearable="false">
+              </el-date-picker>
+            </el-form-item>
+            <el-form-item label="约定付款时间" prop="agreed_pay_time">
+              <el-input v-model="compliance.form.agreed_pay_time" 
+              placeholder="请输入约定付款时间" />
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+      <div class="info-row">
+        <div class="info-row-title" >套餐信息</div>
+        <div class="info-row-services">
+          <div class="info-row-services-header" id="info-row-services-header">
+            <span>FICC套餐</span>
+            <el-input v-model="compliance.form.services_amount" :disabled="operationtype!='compliance'"
+            placeholder="请输入套餐金额" style="width: 200px;" />
+          </div>
+            <el-checkbox-group :disabled="operationtype!='compliance'"
+          v-model="serviceData.checkedService" class="info-service-box" id="service-information">
+            <!-- 大套餐 -->
+            <el-checkbox :label="serviceItem.serviceArray[0]?.service_template_id" @change="(e) => serciveChange(e,1)" 
+              :class="{'viewService':canServiceShow(serviceItem.serviceArray[0]?.service_template_id)}"
+            :disabled="serviceData.serviceType==2" @click="viewService(serviceItem.serviceArray[0]?.service_template_id)">
+              {{serviceItem.serviceArray[0]?.title}}
+            </el-checkbox>
+            <!-- 小套餐 -->
+            <div class="service-small">
+              <el-checkbox :label="serviceItem.serviceArray[1]?.service_template_id" style="margin-right: 0;"
+              @change="(e) => serciveChange(e,2)" 
+                :class="{'viewService':canServiceShow(serviceItem.serviceArray[1]?.service_template_id)}"
+                :disabled="serviceData.serviceType==1" @click="viewService(serviceItem.serviceArray[1]?.service_template_id)">
+                {{serviceItem.serviceArray[1]?.title}}
+              </el-checkbox>
+              <span v-if="(serviceData.serviceVarietyShow&&operationtype=='compliance')" 
+              @click="selectVariety" class="select-variety">选择品种</span>
+            </div>
+            <!-- 市场策略 -->
+            <el-checkbox :label="serviceItem.serviceArray[2]?.service_template_id"
+            @click="viewService(serviceItem.serviceArray[2]?.service_template_id)"
+            :class="{'viewService':canServiceShow(serviceItem.serviceArray[2]?.service_template_id)}">
+            {{serviceItem.serviceArray[2]?.title}}
+            </el-checkbox>
+            <!-- 财富管理类似没有详情的套餐 -->
+            <el-checkbox v-for="item in serviceItem.serviceArray.slice(3)" :label="item.service_template_id">
+              {{item.title}}
+            </el-checkbox>
+          </el-checkbox-group>
+        </div>
+        <div class="info-row-services">
+          <div class="info-row-services-header" id="info-row-services-header">
+            <span>权益套餐</span>
+            <el-input v-model="compliance.form.services_Qy_amount" :disabled="operationtype!='compliance'"
+            placeholder="请输入套餐金额" style="width: 200px;" />
+          </div>
+            <el-checkbox-group :disabled="operationtype!='compliance'"
+          v-model="serviceData.checkedServiceQy" class="info-service-box" id="service-information">
+            <!-- 权益大套餐、行业套餐 -->
+            <div class="service-small" v-for="(item,index) in [1,2]" :key="item">
+              <el-checkbox :label="serviceItem.serviceArrayQy[index]?.service_template_id" style="margin-right: 0;"
+              @change="(e) => serciveChange(e,item,'qy')" 
+                :class="{'viewService':canServiceShow(serviceItem.serviceArrayQy[index]?.service_template_id)}"
+                :disabled="serviceData.serviceTypeQy!=0 && serviceData.serviceTypeQy != item" 
+                @click="viewServiceQy(serviceItem.serviceArrayQy[index]?.service_template_id,item)">
+                {{serviceItem.serviceArrayQy[index]?.title}}
+              </el-checkbox>
+              <span v-if="(serviceData.serviceVarietyShowQy&&serviceData.qYDiaType==item&&operationtype=='compliance')" 
+              @click="selectVarietyQy(item)" class="select-variety">选择品种</span>
+            </div>
+            <!-- 非行业套餐 -->
+            <el-checkbox v-for="item in serviceItem.serviceArrayQy.slice(2)" :label="item.service_template_id">
+              {{item.title}}
+            </el-checkbox>
+          </el-checkbox-group>
+        </div>
+        <div class="remark info-service-remark">
+          <span style="white-space: nowrap;font-size: 14px;margin-right: 20px;">套餐备注</span>
+          <el-input style="flex-grow: 1;" :disabled="operationtype!='compliance'"
+              v-model="compliance.form.service_remark" placeholder="请输入备注"
+            />
+        </div>
+      </div>
+      <div class="info-row">
+        <div class="info-row-title">备注</div>
+        <div class="info-row-remark">
+          <span style="white-space: nowrap;font-size: 14px;margin-right: 20px;">备注</span>
+          <el-input style="flex-grow: 1;" :disabled="operationtype!='compliance'"
+            v-model="compliance.form.remark" placeholder="请输入备注"
+          />
+        </div>
+      </div>
+      <!-- 小套餐选择品种弹窗 -->
+      <permission-dia v-model:visible="serviceData.varietyDiaShow" :type="serviceData.varietyDiaType"
+      @selectFinish="getPermissionChecked" :hasCheckedPermission="serviceData.checkedPermission"></permission-dia>
+      <!-- 权益大套餐、行业套餐选择品种弹窗 -->
+      <permission-qy-dia v-model:visible="serviceData.varietyDiaShowQy" :type="serviceData.varietyDiaType" 
+      @selectFinish="getPermissionQYChecked" :serviceType="serviceData.qYDiaType"
+      :permissionData="serviceData.qYDiaType==1?serviceItem.serviceArrayQy[0]?.children:serviceItem.serviceArrayQy[1]?.children"
+      :hasCheckedPermission="serviceData.qYDiaType==1?serviceData.checkedPermissionQyBig:serviceData.checkedPermissionQySmall"></permission-qy-dia>
+      <!-- 查看套餐弹窗 -->
+      <el-dialog v-model="serviceData.serviceShow" style="min-width: 800px;" title="" width="70vw" top="5vh">
+        <template #header>
+          <div style="text-align: center;">{{previewImageTitle}}</div>
+        </template>
+        <img style="width: 100%; display: block; margin: 0 auto 20px auto" 
+        :src="previewImage" />
+        <div style="text-align: center; margin: 30px 0 10px">
+          <el-button type="primary" @click="serviceData.serviceShow=false">知道了</el-button>
+        </div>
+      </el-dialog>
+    </div>
+</template>
+  
+<style lang="scss" scoped>
+
+</style>
+<style lang="scss">
+#contractProgress-compliance{
+  #contract-info-container{
+    .el-select,.el-date-editor,.actual_pay_companies{
+      .el-input__wrapper,.el-input{
+        min-width: 320px;
+        width: 15vw;
+      }
+    }
+    .el-form-item{
+      .el-form-item__content{
+        min-width: 320px;
+        width: 15vw;
+        flex-wrap: nowrap;
+      }
+    }
+  }
+  #contractInfo-contractAmount{
+    .el-input__wrapper,.el-input{
+      min-width: 200px;
+      flex-grow: 1;
+    }
+    .el-select{
+      .el-input__wrapper,.el-input{
+        min-width: 100px;
+        width: 100px;
+      }
+    }
+  }
+  #contractInfo-contractType{
+    display: flex;
+    .el-cascader{
+      min-width: 180px;
+      flex-grow: 1;
+    }
+    .el-checkbox{
+      min-width: 120px;
+      width: 120px;
+    }
+  }
+  #info-row-services-header{
+    .el-input__wrapper{
+      height: 30px;
+    }
+  }
+  #service-information{
+    .el-checkbox{
+      margin-right: 40px;
+    }
+  }
+  .viewService{
+    .el-checkbox__label{
+      cursor: pointer;
+      color: $themeColor;
+    }
+  }
+}
+</style>

src/views/financialManagement/contractProgress-component/InvoiceAndPayment.vue

@@ -0,0 +1,599 @@
+<script setup>
+  import '../style/contractRegistration.scss'
+  import {ElMessage} from 'element-plus'
+  import {registerInvoice,registerPayment} from '@/api/financialMana'
+  import {intervalDataRequest} from '@/utils/common-methods'
+  import {moneyFormatter} from '@/utils/common-methods'
+
+  const props=defineProps({
+    // 权限类型
+    operationtype:{
+      type:String,
+      default:'compliance'
+    },
+    // 货币数据
+    currencyList:{
+      type:Array,
+      default:()=>[]
+    },
+    // 类型 '开票' '到款 '
+    type:{
+      type:String,
+      default:'开票'
+    },
+    // 销售数据
+    sellerData:{
+      type:Object,
+      default:()=>{}
+    },
+    // 详情数据
+    IPDetailInfo:{
+      type:Object,
+      default:()=>{}
+    }
+  })
+  const emits=defineEmits(['submitSuccess'])
+
+  // 开票/到款记录表单
+  const iandPFormRef=ref(null)
+  // 货币单位
+  const IandP=reactive({
+    currencyUnit:'',
+    moneyData:{
+      // 金额
+      haveMoney:0,
+      waitMoney:0,
+      // FICC金额
+      haveMoneyFICC:0,
+      waitMoneyFICC:0,
+      allMoneyFICC:0,
+      // 权益金额
+      haveMoneyQY:0,
+      waitMoneyQY:0,
+      allMoneyQY:0,
+    }
+  })
+  // ---------------开票/到款金额信息
+  const amountForm=reactive({
+    amountData:[
+      {
+        service_product_id:'',
+        origin_amount:'',
+        amount:'',
+        invoice_date:'',
+        remark:'',
+        // dom的类型
+        amountDomType:'text',
+        remarkDomType:'text',
+        seller_id:'',
+        seller_name:''
+      }
+    ]
+  })
+  //开票-到款展开和收起
+  const isIandPExpand=reactive({
+    haveInvoice:false,
+    waitInvoice:false
+  })
+  // 货币汇率
+  const rmbRate=ref(1)
+
+  const sellerListType=ref(3)
+
+  // -----------------------------监听
+  // 金额-FICC
+  watch(()=> IandP.moneyData.haveMoneyFICC ,(newValue)=>{
+    IandP.moneyData.waitMoneyFICC = IandP.moneyData.allMoneyFICC-newValue
+    IandP.moneyData.waitMoneyFICC=Math.round(IandP.moneyData.waitMoneyFICC*100)/100
+    IandP.moneyData.waitMoney = 
+    Math.round((IandP.moneyData.waitMoneyFICC+IandP.moneyData.waitMoneyQY)*100)/100
+    
+    IandP.moneyData.haveMoney = 
+    Math.round((IandP.moneyData.haveMoneyFICC+IandP.moneyData.haveMoneyQY)*100)/100
+  })
+  // 金额-QY
+  watch(()=> IandP.moneyData.haveMoneyQY ,(newValue)=>{
+    IandP.moneyData.waitMoneyQY = IandP.moneyData.allMoneyQY-newValue
+    IandP.moneyData.waitMoneyQY=Math.round(IandP.moneyData.waitMoneyQY*100)/100
+    IandP.moneyData.waitMoney = 
+    Math.round((IandP.moneyData.waitMoneyFICC+IandP.moneyData.waitMoneyQY)*100)/100
+    
+    IandP.moneyData.haveMoney = 
+    Math.round((IandP.moneyData.haveMoneyFICC+IandP.moneyData.haveMoneyQY)*100)/100
+  })
+  watch(()=>props.IPDetailInfo.contract_register_id,(value)=>{
+    if(value){
+      setIandPDetail()
+    }
+  }) 
+// ------------------------------------------方法
+  // 切换套餐类型
+  const productIdChange=(value,row)=>{
+    // 清空销售
+    if(props.type=='开票'){
+      row.seller_id=''
+      row.seller_name=''
+    }
+    if(!row.origin_amount) return
+      // 开票
+    if(value==1){
+      //切换成FICC套餐类型
+      IandP.moneyData.haveMoneyFICC += row.origin_amount
+      IandP.moneyData.haveMoneyQY -= row.origin_amount
+    }else{
+      //切换成QY套餐类型
+      IandP.moneyData.haveMoneyFICC -= row.origin_amount
+      IandP.moneyData.haveMoneyQY += row.origin_amount
+    }
+    IandP.moneyData.haveMoneyFICC = Math.round(IandP.moneyData.haveMoneyFICC*100)/100
+    IandP.moneyData.haveMoneyQY = Math.round(IandP.moneyData.haveMoneyQY*100)/100
+  }
+  // 添加行
+  const addTableRow=()=>{
+    amountForm.amountData.push({
+      service_product_id:sellerListType.value == 3?'':sellerListType.value,origin_amount:'',amount:'',invoice_date:'',remark:'',
+    seller_id:'',seller_name:'',amountDomType:'text',remarkDomType:'text'})
+  }
+
+  // 开票销售更改
+  const invoiceSellerChange=(row,value)=>{
+    if(row.service_product_id==1){
+      row.seller_name = props.sellerData.ficc_list.find(seller => seller.seller_id==value)?.seller_name
+    }else{
+      row.seller_name = props.sellerData.rai_list.find(seller => seller.seller_id==value)?.seller_name
+    }
+  }
+  // 判断表格当前行的信息是否填写完整
+  const canAddorEdit=(type,row)=>{
+    if(!(row.amount && row.invoice_date && row.service_product_id)){
+      return '请填写完整信息'
+    }
+    if(type=='开票' && !row.seller_id){
+      return '请填写完整信息' 
+    }
+    return 1
+  }
+
+  // 表格添加行
+  const addRow=(row,index)=>{
+    const flag = canAddorEdit(props.type,row)
+    if(flag==1){
+      amountForm.amountData.splice((index+1),0,
+      {service_product_id:sellerListType.value == 3?'':sellerListType.value,origin_amount:'',
+      amount:'',invoice_date:'',remark:'',seller_id:'',seller_name:'',amountDomType:'text',remarkDomType:'text'})
+    }else{
+      ElMessage.error(flag)
+    }
+  }
+
+  // 表格编辑行
+  const editRow=(row)=>{
+    if(!row.isEdit){
+      // 编辑 -> 确定
+      row.isEdit=true
+      if(row.service_product_id==0){
+        row.service_product_id=''
+      }
+      return
+    }
+    const flag = canAddorEdit(props.type,row)
+    if(flag==1){
+      // 确定 -> 编辑
+      row.isEdit=false
+    }else{
+      ElMessage.error(flag)
+    }
+  }
+  // 表格删除行
+  const deleteRow=(row,index)=>{
+    let haveSalesman=false
+    if(props.type=='开票'){
+      if(amountForm.amountData[index].seller_id) haveSalesman=true
+    }else{
+      if(row.is_pre_pay==1){
+        // 预到款登记
+        ElMessage.error('该笔到款是预到款，不允许删除！')
+        return 
+      }
+    }
+    if(amountForm.amountData[index].origin_amount=='' && amountForm.amountData[index].amount=='' 
+    && (amountForm.amountData[index].service_product_id=='' || sellerListType.value != 3)
+    && amountForm.amountData[index].invoice_date=='' && !haveSalesman){
+      // 没有内容 直接删除
+      amountForm.amountData.splice(index,1)
+    }else{
+      ElMessageBox.confirm(`是否删除该条${props.type}记录？`,
+      '提示',    
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }).then(res=>{
+        // 有金额才进行删除后的运算
+        if(amountForm.amountData[index].origin_amount!=''){
+          amountForm.amountData.splice(index,1)
+          let money=0                                           
+          amountForm.amountData.map(item =>{
+            if(item.service_product_id == row.service_product_id){
+              money+=parseFloat(item.origin_amount) || 0
+            }
+            // console.log(money);
+          })
+          // 保留两位小数、防止计算时精度丢失
+          money=Math.round(money*100)/100
+          if(row.service_product_id==1){
+            IandP.moneyData.haveMoneyFICC=money
+          }else{
+            IandP.moneyData.haveMoneyQY=money
+          }
+        }else{
+          amountForm.amountData.splice(index,1)
+        }
+      }).catch(()=>{})
+    }
+  }
+  // 金额改变
+  const moneyChange=(value,index,row)=>{ 
+    // console.log(value);
+    let numerValue=parseFloat(value)
+
+    if(!numerValue&&numerValue!=0&&value){
+      amountForm.amountData[index].origin_amount=''
+      ElMessage.error('请输入数字')
+      return
+    }
+    // 如果输入不是 以.结尾&&只有一个. 或者 不是零结尾的话，就赋值为转为成数字后的值
+    // 考虑到类似12.02的情况
+    if(!((value.endsWith('.') && value.indexOf('.')==(value.length-1)) || 
+    (value.endsWith('0') && value.indexOf('.')==(value.length-2)))&&numerValue){
+      amountForm.amountData[index].origin_amount=numerValue
+    }
+    amountForm.amountData[index].amount=amountForm.amountData[index].origin_amount/rmbRate.value
+
+    let money=0
+    amountForm.amountData.map(item =>{
+      if(item.service_product_id == row.service_product_id){
+        money+=Math.round(item.origin_amount*100)/100 || 0
+      }
+    })
+    // 保留两位小数、防止计算时精度丢失
+    money=Math.round(money*100)/100
+    
+    if(row.service_product_id==1){
+      IandP.moneyData.haveMoneyFICC=money
+    }else{
+      IandP.moneyData.haveMoneyQY=money
+    }
+  }
+  // 点击输入框后 文本切换成输入框
+  const iandPInput=(row,prop)=>{
+    row[prop]='input'
+  }
+  // 金额输入框失去焦点
+  const iandPAmountBlur=(row)=>{
+    if(row.origin_amount){
+      row.origin_amount= Math.round(parseFloat(row.origin_amount)*100)/100
+    }
+    row.amountDomType ='text'
+  }
+  
+  let elMessageDom=null
+
+  const selectVisible=(value)=>{
+    if(value){
+      if(!elMessageDom){
+        elMessageDom=ElMessage.warning('请选择套餐类型')
+        setTimeout(()=>{
+          elMessageDom=null
+        },1000)
+      }
+    }
+  }
+
+  // 开票/到款登记保存
+  const iandPSubmit=()=>{
+    iandPFormRef.value.validate(valid=>{
+      if(valid){
+        // 转化
+        amountForm.amountData.forEach(element => {
+          element.origin_amount = parseFloat(element.origin_amount)
+          element.amount = parseFloat(element.amount.toFixed(2))
+          element.seller_id = element.seller_id || 0
+          element.service_product_id = element.service_product_id || 0
+        });
+        let invoice_type = props.type=='开票'?1:2
+        let registerprop = props.type=='开票'?registerInvoice:registerPayment
+        let param={
+          contract_register_id:props.IPDetailInfo.contract_register_id,
+          invoice_type,
+          amount_list:amountForm.amountData,
+        }
+        registerprop(param).then(res=>{
+          let messageHint=ElMessage.success(props.type+'登记成功')
+          setTimeout(()=>{
+            messageHint.close()
+            emits('submitSuccess')
+          },1000)
+        })
+      }
+    })
+  }
+
+  const setIandPDetail=()=>{
+    sellerListType.value = props.IPDetailInfo.sellerListType
+    rmbRate.value=props.IPDetailInfo.rmb_rate
+    amountForm.amountData[0].service_product_id = sellerListType.value == 3?'':sellerListType.value
+
+    // FICC套餐总金额 = FICC套餐剩余开篇金额
+    IandP.moneyData.waitMoneyFICC= IandP.moneyData.allMoneyFICC =
+    props.IPDetailInfo.service_amount_list.find(item => item.product_id==1)?props.IPDetailInfo.service_amount_list.find(item => item.product_id==1).service_amount:0
+    // 权益套餐总金额 = 权益套餐剩余开篇金额
+    IandP.moneyData.waitMoneyQY= IandP.moneyData.allMoneyQY =
+    props.IPDetailInfo.service_amount_list.find(item => item.product_id==2)?props.IPDetailInfo.service_amount_list.find(item => item.product_id==2).service_amount:0
+    let amoutList = props.type=='开票'?props.IPDetailInfo.invoice_list:props.IPDetailInfo.payment_list
+    if(amoutList.length>0){
+      amountForm.amountData=[]
+      amoutList.map(item=>{
+        if(item.service_product_id==1){
+          // FICC
+          IandP.moneyData.haveMoneyFICC+=item.origin_amount
+        }else{
+          // 权益
+          IandP.moneyData.haveMoneyQY+=item.origin_amount
+        }
+        amountForm.amountData.push({
+          invoice_id:item.contract_invoice_id,
+          service_product_id:item.service_product_id,
+          origin_amount:item.origin_amount,
+          amount:item.amount,
+          is_pre_pay:item.is_pre_pay,
+          invoice_date:item.invoice_time,
+          remark:item.remark,
+          seller_id:item.seller_id,
+          seller_name:item.seller_name,
+          amountDomType:'text',
+          remarkDomType:'text',
+          isEdit:false
+        })
+      })
+      // 添加一行空的
+      amountForm.amountData.push({
+        service_product_id:sellerListType.value == 3?'':sellerListType.value,              
+        origin_amount:'',
+        amount:'',
+        is_pre_pay:0,
+        invoice_date:'',
+        remark:'',
+        seller_id:'',
+        seller_name:'',
+        amountDomType:'text',
+        remarkDomType:'text'
+      })
+    }
+    IandP.moneyData.haveMoney=
+    IandP.moneyData.haveMoneyFICC+IandP.moneyData.haveMoneyQY
+
+    IandP.moneyData.waitMoney = IandP.moneyData.waitMoneyFICC+IandP.moneyData.waitMoneyQY
+    IandP.moneyData.allInvoiceMoney = IandP.moneyData.allPlacementMoney=
+    IandP.moneyData.allMoneyFICC+IandP.moneyData.allMoneyQY
+    // 拿取货币单位
+    const intervalCallback=()=>{
+      IandP.currencyUnit=props.currencyList.find(item => item.code==props.IPDetailInfo.currency_unit)?.unit_name
+    }
+    intervalDataRequest(()=> props.currencyList.length>0 ,intervalCallback,1)
+  }
+
+  defineExpose({hasRegisteFinish:()=>IandP.moneyData.waitMoney==0,iandPSubmit})
+
+  
+</script>
+
+<template>
+    <div id="contractProgress-InvoiceAndPayment">
+      <div class="info-row" >
+        <div class="info-row-title">{{ type }}信息</div>
+        <div class="info-row-invoice-payment">
+          <div class="invoice-payment-title">
+            <div v-if="sellerListType==3" style="margin-right: 30px;margin-bottom: 20px;">
+              <div class="invoice-payment-money-multiple" :style="{height:isIandPExpand.haveInvoice?'135px':'59px'}">
+                <div class="invoice-payment-money-multiple-head" @click="isIandPExpand.haveInvoice=!isIandPExpand.haveInvoice">
+                  <span style="margin-right: 20px;">已{{ type }}金额</span>
+                  <span>
+                    <span class="invoice-payment-money">{{moneyFormatter(IandP.moneyData.haveMoney)}}</span>
+                  （{{ IandP.currencyUnit }}）
+                  </span>
+                  <el-icon size="16px">
+                    <svg-Icon name="svgIcon-common-arrow_right" style="transition: all 0.1s ease;"
+                    :style="{transform:isIandPExpand.haveInvoice?'rotate(90deg)':''}"></svg-Icon>
+                  </el-icon>
+                </div>
+                <div class="invoice-payment-money-multiple-body">
+                  <div style="margin-bottom: 16px;">
+                    <span style="margin-right: 20px;">FICC套餐</span>
+                    <span class="invoice-payment-money">{{ moneyFormatter(IandP.moneyData?.haveMoneyFICC) }}</span>（{{ IandP.currencyUnit }}）
+                  </div>
+                  <div>
+                    <span style="margin-right: 20px;">权益套餐</span>
+                    <span class="invoice-payment-money">{{ moneyFormatter(IandP.moneyData?.haveMoneyQY) }}</span>（{{ IandP.currencyUnit }}）
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div style="margin-right: 30px;" v-else>已{{ type }}金额：
+              <span class="invoice-payment-money">{{moneyFormatter(IandP.moneyData?.haveMoney)}}</span>
+              （{{ IandP.currencyUnit }}）
+            </div>
+            <div v-if="sellerListType==3" style="margin-bottom: 20px;">
+              <div class="invoice-payment-money-multiple" :style="{height:isIandPExpand.waitInvoice?'135px':'59px'}">
+                <div class="invoice-payment-money-multiple-head" @click="isIandPExpand.waitInvoice=!isIandPExpand.waitInvoice">
+                  <span style="margin-right: 20px;">剩余{{ type }}金额</span>
+                  <span>
+                    <span class="invoice-payment-money">{{moneyFormatter(IandP.moneyData?.waitMoney)}}</span>
+                  （{{ IandP.currencyUnit }}）
+                  </span>
+                  <el-icon size="16px">
+                    <svg-Icon name="svgIcon-common-arrow_right" style="transition: all 0.1s ease;"
+                    :style="{transform:isIandPExpand.waitInvoice?'rotate(90deg)':''}"></svg-Icon>
+                  </el-icon>
+                </div>
+                <div class="invoice-payment-money-multiple-body">
+                  <div style="margin-bottom: 16px;">
+                    <span style="margin-right: 20px;">FICC套餐</span>
+                    <span class="invoice-payment-money">{{ moneyFormatter(IandP.moneyData?.waitMoneyFICC) }}</span>（{{ IandP.currencyUnit }}）
+                  </div>
+                  <div>
+                    <span style="margin-right: 20px;">权益套餐</span>
+                    <span class="invoice-payment-money">{{ moneyFormatter(IandP.moneyData?.waitMoneyQY) }}</span>（{{ IandP.currencyUnit }}）
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div v-else>剩余{{ type }}金额：
+              <span class="invoice-payment-money">{{moneyFormatter(IandP.moneyData?.waitMoney)}}</span>
+              （{{ IandP.currencyUnit }}）
+            </div>
+            <el-button type="primary" style="margin: 0 0 0 20px;" @click="addTableRow" 
+            v-if="amountForm.amountData.length==0">添加{{ type }}信息</el-button>
+          </div>
+          <el-form ref="iandPFormRef" :model="amountForm" 
+          :disabled="operationtype!='invoice'&&type=='开票' || operationtype!='placement'&&type=='到款'">
+            <el-table :data="amountForm.amountData" border v-if="amountForm.amountData.length>0" style="width: 100%;"> 
+              <el-table-column label="序号" width="80" align="center">
+                <template #default="{row,$index}">
+                  {{$index+1}}
+                </template>
+              </el-table-column>
+              <el-table-column label="套餐类型" width="160" align="center" prop="service_product_id" v-if="sellerListType==3">
+                <template #header>
+                  <span style="color: var(--dangerColor);">*</span>套餐类型
+                </template>
+                <template #default="{row,$index}">
+                  <el-form-item :prop="`amountData.${$index}.service_product_id`" :show-message="false" v-show="!row.invoice_id || row.isEdit"
+                  :rules="{required:true,message:()=>{ ElMessage.error('套餐类型不能为空')},trigger:'change'}">
+                    <el-select v-model="row.service_product_id" style="width: 124px;" @change="value=> productIdChange(value,row)"
+                    placeholder="请选择套餐" filterable>
+                      <el-option label="FICC套餐" :value="1"></el-option>
+                      <el-option label="权益套餐" :value="2"></el-option>
+                    </el-select>
+                  </el-form-item>
+                  <span v-show="row.invoice_id && !row.isEdit">{{ row.service_product_id?row.service_product_id==1?'FICC套餐':'权益套餐' : '--' }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column :label="type+'金额'" width="160" show-overflow-tooltip  align="center" prop="origin_amount">
+                <template #header>
+                  <span style="color: var(--dangerColor);">*</span>{{ type }}金额
+                </template>
+                <template #default="{row,$index}">
+                  <el-form-item :prop="`amountData.${$index}.origin_amount`" :show-message="false" v-show="!row.invoice_id || row.isEdit"
+                  :rules="{required:true,message:()=>{ ElMessage.error(type+'金额不能为空')},trigger:'blur'}">
+                    <label :for="type=='开票'?'invoice':'payment'+$index+'origin_amount'" style="cursor: pointer;" 
+                    :style="{color:row.origin_amount?'var(--secondaryTextColor)':'var(--hitTextColorOne)'}"
+                    v-show="row.amountDomType=='text'" @click="iandPInput(row,'amountDomType')">
+                      {{ row.origin_amount ? parseFloat(row.origin_amount).toFixed(2): '单击此处输入金额'}}
+                    </label>
+                    <el-input v-model.trim="row.origin_amount" :id="type=='开票'?'invoice':'payment'+$index+'origin_amount'" style="width: 124px;" 
+                    v-show="row.amountDomType=='input'" @blur="iandPAmountBlur(row)"
+                      placeholder="请输入金额" @input="(e)=>moneyChange(e,$index,row)"></el-input>
+                  </el-form-item>
+                  <span  v-show="row.invoice_id && !row.isEdit">
+                    {{ row.origin_amount?parseFloat(row.origin_amount).toFixed(2):'--' }}
+                  </span>
+                </template>
+              </el-table-column>
+              <el-table-column label="换算金额（元）" show-overflow-tooltip width="160" align="center" prop="amount">
+                <template #default="{row,$index}">
+                  <span v-if="row.amount">{{ row.amount.toFixed(2)}}</span>
+                  <span v-else style="color: var(--hitTextColorOne);">{{type}}金额为空</span>
+                </template>
+              </el-table-column>
+              <el-table-column :label="type+'日'" width="120" align="center" prop="invoice_date">
+                <template #header>
+                  <span style="color: var(--dangerColor);">*</span>{{type}}日
+                </template>
+                <template #default="{row,$index}" >
+                  <el-form-item :prop="`amountData.${$index}.invoice_date`" :show-message="false" v-show="!row.invoice_id || row.isEdit"
+                  :rules="{required:true,message:()=>{ ElMessage.error(`请选择${type}日`)},trigger:'change'}">       
+                    <el-date-picker v-model="row.invoice_date" style="width: 124px;"
+                    placeholder="请选择日期" value-format="YYYY-MM-DD" :clearable="false" ></el-date-picker>
+                  </el-form-item>
+                  <span v-show="row.invoice_id && !row.isEdit">{{ row.invoice_date || '--' }}</span>
+                </template>
+              </el-table-column >
+              <el-table-column label="销售" width="120" align="center" prop="seller_id" v-if="type=='开票'">
+                <template #header>
+                  <span style="color: var(--dangerColor);">*</span>销售
+                </template>
+                <template #default="{row,$index}">
+                  <el-form-item :prop="`amountData.${$index}.seller_id`" :show-message="false" v-show="!row.invoice_id || row.isEdit"
+                  :rules="{required:true,message:()=>{ ElMessage.error('销售不能为空')},trigger:'change'}">
+                    <el-select v-model="row.seller_id" style="width: 124px;" :ref='`amountData-service_product_id${$index}`'
+                    placeholder="请选择销售" filterable v-if="row.service_product_id==1" @change="(value)=> invoiceSellerChange(row,value)">
+                      <el-option :label="item.seller_name" :value="item.seller_id" 
+                      v-for="item in sellerData.ficc_list" :key="item.seller_id">
+                      </el-option>
+                    </el-select>
+                    <el-select v-model="row.seller_id" style="width: 124px;" :ref='`amountData-service_product_id${$index}`'
+                    placeholder="请选择销售" filterable v-else-if="row.service_product_id==2" @change="(value)=> invoiceSellerChange(row,value)">
+                      <el-option :label="item.seller_name" :value="item.seller_id" 
+                      v-for="item in sellerData.rai_list" :key="item.seller_id">
+                      </el-option>
+                    </el-select>
+                    <el-select v-model="row.seller_id" style="width: 124px;" :ref='`amountData-service_product_id${$index}`'
+                    placeholder="请选择销售" v-else
+                      @visible-change="selectVisible">
+                    </el-select>
+                  </el-form-item>
+                  <span v-show="row.invoice_id && !row.isEdit">{{ row.seller_name || '--' }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="备注" width="160" align="center" prop="remark" show-overflow-tooltip >
+                <template #default="{row,$index}">
+                  <el-form-item  v-show="!row.invoice_id || row.isEdit">             
+                    <label :for="'invoice'+$index+'remark'" style="cursor: pointer;" v-show="row.remarkDomType=='text'" 
+                    :style="{color:row.remark?'var(--secondaryTextColor)':'var(--hitTextColorOne)'}"
+                    @click="iandPInput(row,'remarkDomType')">{{ row.remark || '单击此处输入备注'}}</label>
+                    <el-input v-model="row.remark" :id="'invoice'+$index+'remark'" style="width: 124px;" placeholder="请输入备注" 
+                    v-show="row.remarkDomType=='input'" @blur="row.remarkDomType='text'"/>
+                  </el-form-item>
+                  <span v-show="row.invoice_id && !row.isEdit">{{row.remark || '--'}}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" width="120" align="center" 
+              v-if="operationtype=='invoice'&&type=='开票' || operationtype=='placement'&&type=='到款'">
+                <template #default="{row,$index}">
+                  <span class="table-operation-button" v-show="$index==amountForm.amountData.length-1" 
+                  @click="addRow(row,$index)" style="margin-right: 10px;">添加</span>
+                  <span class="table-operation-button" style="margin-right: 6px;" v-show="row.invoice_id" 
+                  @click="editRow(row)">{{ row.isEdit?'确定':'编辑' }}</span>
+                  <span class="table-operation-button" style="color: var(--dangerColor);" 
+                  @click="deleteRow(row,$index)">删除</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-form>
+        </div>
+      </div>
+    </div>
+</template>
+  
+<style lang="scss" scoped>
+  
+</style>
+<style lang="scss">
+#contractProgress-InvoiceAndPayment{
+  .el-table{
+    .cell{
+      padding: 0 10px;
+    }
+  }
+  .el-input__wrapper{
+    width: 100px;
+  }
+  .el-form-item{
+    margin-bottom: 0;
+    .el-form-item__content{
+      justify-content: center;
+    }
+  }
+}
+</style>

src/views/financialManagement/financialList.vue

@@ -4,12 +4,13 @@ import {useRouter,useRoute} from 'vue-router'
 import {getSimpleServiceList,getRegisterList,updateRegisterStatus,
   registerDelete,registerListExport,importDataApi} from '@/api/financialMana'
 import {downloadByFlow} from '@/utils/common-methods'
+import financialCommon from './composition/common'
 
 const router = useRouter()
 const route = useRoute()
 const changeStatusForm=ref(null)
-const contractTypeArray=[{id:1,label:"新签合同"},{id:2,label:"续约合同"},{id:3,label:"代付合同"},{id:4,label:"补充协议"}]
-const contractStatusArray=[{id:1,label:"已审批"},{id:2,label:"单章寄出"},{id:3,label:"已签回"},{id:4,label:"已终止"},{id:5,label:"邮件备案"}]
+const contractTypeArray=financialCommon().contractTypeArray
+const contractStatusArray=financialCommon().contractStatusArray
 const statusArray=[{id:1,label:"进行中"},{id:2,label:"已完成"}]
 
   const financial=reactive({
@@ -89,6 +90,16 @@ const statusArray=[{id:1,label:"进行中"},{id:2,label:"已完成"}]
     financial.searchParams.current = pageNo
     financialList()
   }
+  // 合同类型筛选项
+  const contractTypeChange=(value)=>{
+    if(!value) financial.searchParams.contract_type=''
+    let contractTypeParam=[]
+    value.map(item => {
+      contractTypeParam.push(item.join(''))
+    })
+    financial.searchParams.contract_type=contractTypeParam.join(',')
+    searchFinancial()
+  }
 
   const serviceTypeChange=(value)=>{
     financial.searchParams.service_types=value.join(',')
@@ -116,9 +127,9 @@ const statusArray=[{id:1,label:"进行中"},{id:2,label:"已完成"}]
     router.push({path:'/financial/list/contractProgress',query:{type,complianceId:id}})
   }
   // 导出数据
-  const exportData=()=>{
-    registerListExport(financial.searchParams).then(res=>{
-      downloadByFlow(res,'xlsx','财务列表')
+  const exportData=({value,text})=>{
+    registerListExport({...financial.searchParams,list_param:value}).then(res=>{
+      downloadByFlow(res,'xlsx',`财务列表-${text}`)
     })
   }
 
@@ -218,20 +229,19 @@ const statusArray=[{id:1,label:"进行中"},{id:2,label:"已完成"}]
             <el-date-picker v-model="financial.createtime" start-placeholder="登记日期-开始"
             end-placeholder="登记日期-结束" style="margin-right: 30px;max-width: 240px;margin-bottom: 8px;"
             value-format="YYYY-MM-DD" type="daterange"></el-date-picker>
-            <!-- <el-select v-model="financial.searchParams.service_type" placeholder="请选择套餐类型" clearable
-            @change="searchFinancial" style="width: 286px;margin-bottom: 8px;">
-              <el-option v-for="item in financial.serviceTypeArray" :key="item.service_template_id"
-              :label="item.title" :value="item.service_template_id"></el-option>
-            </el-select> -->
             <el-cascader :options="financial.serviceTypeArray" style="width: 240px;margin-bottom: 8px;margin-right: 30px;"
               @change="serviceTypeChange"
              placeholder="请选择套餐" clearable collapse-tags :show-all-levels="false"
             :props="{multiple:true,label:'title',value:'service_template_id',children:'children',emitPath:false}">
             </el-cascader>
-            <el-select v-model="financial.searchParams.contract_type" placeholder="请选择合同类型" clearable
+            <!-- <el-select v-model="financial.searchParams.contract_type" placeholder="请选择合同类型" clearable
             @change="searchFinancial" style="width: 240px;margin-bottom: 8px;">
               <el-option :label="item.label" :value="item.id" v-for="item in contractTypeArray" :key="item.id"></el-option>
-            </el-select>
+            </el-select> -->
+            <el-cascader :options="contractTypeArray" style="width: 240px;margin-bottom: 8px;margin-right: 30px;z-index: 100;"
+              @change="contractTypeChange" placeholder="请选择合同类型" clearable collapse-tags collapse-tags-tooltip
+               :props="{multiple:true}">
+            </el-cascader>
             <el-select v-model="financial.searchParams.register_status" placeholder="请选择登记状态" clearable
             @change="searchFinancial" style="width: 240px;margin-bottom: 8px;">
               <el-option :label="item.label" :value="item.id" v-for="item in statusArray" :key="item.id"></el-option>
@@ -246,26 +256,49 @@ const statusArray=[{id:1,label:"进行中"},{id:2,label:"已完成"}]
                 @click="router.push('/financial/placementPre')" class="element-common-button">到款预登记</el-button> -->
               </div>
               <div class="financial-top-option-zone-right">
-                <a href="https://hzchart.oss-cn-shanghai.aliyuncs.com/static/fms/excel/财务列表-导入模版（新）.xlsx" download>
-                  <el-button class="element-common-button" size="large"
-                  v-permission="'financial:list:complianceImport'">下载导入模版</el-button>
-                </a>
+                <el-dropdown v-permission="'financial:list:complianceImport'" trigger="click" popper-class="classifyFandQ"
+                size="large">
+                  <el-button class="element-common-button" size="large">下载导入模版</el-button>
+                  <template #dropdown>
+                    <el-dropdown-menu>
+                      <a href="https://hzchart.oss-cn-shanghai.aliyuncs.com/static/fms/excel/财务列表FICC&权益.xlsx" download>
+                        <el-dropdown-item>FICC&权益</el-dropdown-item>
+                      </a>
+                      <a href="https://hzchart.oss-cn-shanghai.aliyuncs.com/static/fms/excel/财务列表FICC.xlsx" download>
+                        <el-dropdown-item>FICC</el-dropdown-item>
+                      </a>
+                      <a href="https://hzchart.oss-cn-shanghai.aliyuncs.com/static/fms/excel/财务列表权益.xlsx" download>
+                        <el-dropdown-item>权益</el-dropdown-item>
+                      </a>
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
                 <el-upload
                   class="upload-demo"
                   accept=".xlsx"
                   :show-file-list="false"
                   :http-request="importData"
                   v-permission="'financial:list:complianceImport'"
+                  style="margin-right: 30px;"
                 >
                   <el-button size="large" :loading="financial.importLoading"
-                  class="element-common-button" >导入</el-button>
+                  class="element-common-button" style="margin: 0;" >导入</el-button>
                 </el-upload>
-                <el-button @click="exportData" size="large" class="element-common-button" style="margin-right: 0;" >导出</el-button>
+                <el-dropdown trigger="click" popper-class="classifyFandQ" size="large"  @command="exportData">
+                  <el-button size="large" class="element-common-button" style="margin-right: 0;" >导出</el-button>
+                  <template #dropdown>
+                    <el-dropdown-menu>
+                      <el-dropdown-item :command="{value:0,text:'FICC&权益'}">FICC&权益</el-dropdown-item>
+                      <el-dropdown-item :command="{value:1,text:'FICC'}">FICC</el-dropdown-item>
+                      <el-dropdown-item :command="{value:2,text:'权益'}">权益</el-dropdown-item>
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
               </div>              
           </div>
           <div class="financial-table-zone">
             <!-- 表格 -->
-            <el-table :data="financial.tableData" border max-height="640px" size="default" style="position: sticky;"> 
+            <el-table :data="financial.tableData" border max-height="640px" size="default"> 
               <el-table-column label="合同编号" align="center" show-overflow-tooltip 
               prop="contract_code" fixed="left" min-width="150"></el-table-column>
               <el-table-column label="客户名称" align="center" prop="company_name"
@@ -275,11 +308,8 @@ const statusArray=[{id:1,label:"进行中"},{id:2,label:"已完成"}]
                   {{ row.seller_name+(row.seller_name&&row.rai_seller_name?`、`:'')+row.rai_seller_name }}
                 </template>
               </el-table-column>
-              <el-table-column label="合同类型" align="center" width="90" prop="contract_type"
+              <el-table-column label="合同类型" align="center" width="90" prop="contract_type_string"
               v-if="financial.tabelColumnShowArr.includes('contract_type')">
-                <template #default="{row}">
-                  {{contractTypeArray[row.contract_type-1].label}}
-                </template>
               </el-table-column>
               <el-table-column label="套餐信息" align="center" prop="services" min-width="120"></el-table-column>
               <el-table-column label="合同有效期" align="center" prop="contractDate" width="210" 
@@ -314,7 +344,7 @@ const statusArray=[{id:1,label:"进行中"},{id:2,label:"已完成"}]
               v-if="financial.tabelColumnShowArr.includes('remark')"></el-table-column>
               <el-table-column label="登记状态" align="center" prop="register_status" width="90">
                 <template #default="{row}">
-                  {{statusArray[row.register_status-1].label}}
+                  {{statusArray[row.register_status-1]?.label}}
                 </template>
               </el-table-column>
               <el-table-column label="登记时间" v-if="financial.tabelColumnShowArr.includes('create_time')"
@@ -356,11 +386,11 @@ const statusArray=[{id:1,label:"进行中"},{id:2,label:"已完成"}]
                         删除
                       </span>
                       <span class="table-option-buttons" v-permission="'financial:list:invoice'"
-                      @click="registration('invoice',row.contract_register_id)" v-if="row.has_payment!=1 && row.contract_status!=4">
+                      @click="registration('invoice',row.contract_register_id)" v-if="row.has_invoice==1 && row.contract_status!=4">
                         开票登记
                       </span>
                       <span class="table-option-buttons" v-permission="'financial:list:placement'"
-                      @click="registration('placement',row.contract_register_id)" v-if="row.has_payment!=1 && row.contract_status!=4">
+                      @click="registration('placement',row.contract_register_id)" v-if="row.has_invoice==1 && row.contract_status!=4">
                         到款登记
                       </span>
                       <span class="table-option-buttons" @click="changeContractStatus(row)">
@@ -466,5 +496,9 @@ const statusArray=[{id:1,label:"进行中"},{id:2,label:"已完成"}]
       }
     }
   }
-
+  .classifyFandQ{
+    .el-dropdown-menu__item{
+      justify-content: center;
+    }
+  }
 </style>

src/views/financialManagement/invoice/invoiceList.vue

@@ -31,7 +31,7 @@ invoice.placementList()
     <div id="iandP-list-container">
       <div class="iandP-search-zone">
         <div class="iandP-search-box">
-          <el-input v-model="data.searchParams.contract_code" placeholder="请输入合同编号"
+          <el-input v-model="data.searchParams.keyword" placeholder="请输入合同编号/客户名称"
           class="iandP-search-item" clearable @input="invoice.searchPlacement" ></el-input>
           <el-cascader :options="sellerArray" class="iandP-search-item" filterable 
              @change="sellerChange" placeholder="请选择销售" clearable collapse-tags :show-all-levels="false"
@@ -81,7 +81,8 @@ invoice.placementList()
           <el-button class="element-common-button" style="margin-bottom: 10px;" size="large" @click="invoice.placementExport">导出</el-button>
         </div>
         <!-- 表格 -->
-        <el-table :data="data.tableData" border max-height="560px" size="default" style="position: sticky;"> 
+        <el-table :data="data.tableData" border max-height="560px" size="default"> 
+          <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="service_product_id">
             <template #default="{row}">

src/views/financialManagement/placement/placementList.vue

@@ -17,7 +17,7 @@ placement.placementList()
     <div id="iandP-list-container">
       <div class="iandP-search-zone">
         <div class="iandP-search-box">
-          <el-input v-model="data.searchParams.contract_code" placeholder="请输入合同编号" class="iandP-search-item"
+          <el-input v-model="data.searchParams.keyword" placeholder="请输入合同编号/客户名称" class="iandP-search-item"
           clearable @input="placement.searchPlacement" ></el-input>
           <el-select v-model="data.searchParams.service_product_id" placeholder="请选择套餐类型" clearable
           @change="placement.searchPlacement" class="iandP-search-item">
@@ -64,7 +64,8 @@ placement.placementList()
           <el-button class="element-common-button" style="margin-bottom: 10px;" size="large" @click="placement.placementExport">导出</el-button>
         </div>
         <!-- 表格 -->
-        <el-table :data="data.tableData" border max-height="560px" size="default" style="position: sticky;"> 
+        <el-table :data="data.tableData" border max-height="560px" size="default"> 
+          <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="service_product_id">
             <template #default="{row}">

src/views/financialManagement/placementPre.vue

@@ -1,3 +1,5 @@
+<!-- 1、到款预登记，之后的版本改为预登记 - registrationPre.vue
+      2、此文件仅作备份，保留至2023-4-7 -->
 <script setup>
 import { Search } from '@element-plus/icons-vue'
 import {useRouter} from 'vue-router'

src/views/financialManagement/registrationPre.vue

@@ -0,0 +1,935 @@
+<script setup>
+import { Search } from '@element-plus/icons-vue'
+import {useRouter} from 'vue-router'
+import {useStore} from 'vuex'
+import {getSellerList} from '@/api/crm'
+import {getCurrencyList} from '@/api/common'
+import {getServiceList,getPreRegistrationList,preRegistrationAdd,
+  preRegistrationDetail,preRegistrationEdit,preRegistrationDelete,preRegistrationSave} from '@/api/financialMana'
+import serviceCascader from './composition/serivceCascader.js'
+// 套餐的composition
+const serviceComposition = serviceCascader()
+
+const router = useRouter()
+const store = useStore()
+
+  // const adminId = localStorage.getItem('userInfo')?JSON.parse(localStorage.getItem('userInfo')).admin_id || 0:0
+  const placemenetPre=reactive({
+    searchParams:{
+      keyword:'',
+      page_size:10,
+      current:1,
+    },
+    tableData:[],
+    total:0,
+  })
+  // -----------------弹窗
+  const registrationPreForm=ref(null)
+
+  // 新增/编辑 开票/到款 预登记弹窗
+  const dialog=reactive({
+    registrationPreShow:false,
+    // 登记类型
+    registrationType:'开票',
+    title:'',
+    registrationPreForm:{
+      company_name:'',
+      start_date:'',
+      end_date:'',
+      services:[],
+      IorPInfo:[
+        {
+          service_product_id:'',
+          amount:'',
+          currency_unit:'CNY',
+          register_date:'',
+          seller_id:'',
+          remark:''
+        }
+      ],
+    },
+    //选中的套餐ID - 级联选择器绑定值
+    selectServices:[],
+    validityDate:[]
+  })
+  // 开票/到款预登记删除的id
+  let hasDeleteContractInvoiceIds=[]
+  let hasDeletePreRegisterIds=[]
+  // 监听
+
+  watch(()=>dialog.validityDate,(newVal)=>{
+    // console.log(newVal);
+    if(!newVal){
+      dialog.registrationPreForm.start_date=''
+      dialog.registrationPreForm.end_date=''
+    }else{
+      dialog.registrationPreForm.start_date = newVal[0]
+      dialog.registrationPreForm.end_date = newVal[1]
+    }
+  })
+
+// -----------------------------------------套餐部分 - 开始
+// 套餐列表
+const servicesList=ref([])
+const selectServicesRef=ref(null)
+
+// 套餐类型 1-FICC 2-权益 3-FICC&权益
+const serviceType=ref(0)
+
+// 预开票/预到款套餐类型 1-FICC 2-权益 3-FICC&权益
+const serviceTypePre=ref(0)
+
+// 获取套餐列表
+const getServicesListFun=()=>{
+  getServiceList().then(res=>{
+    let tempData = res.data||[]
+    // 给最外成添加service_template_id，防止级联选择器乱跳
+    servicesList.value=tempData.map((item,index) =>{
+      if(item.service_template_id) 
+      return item
+      item.service_template_id=999999+index
+      return item
+    })
+  })
+}
+// 提交表单之前的套餐数据处理
+const serivcesDataHandler=(cascaderRef)=>{
+  // 处理选中套餐的数据格式
+  let servicesParam=[]
+  let FICCSmallServiceIds=[]
+  // 储存权益套餐的service_template_id
+  let servicesParamId=[]
+  // 储存权益套餐service_template_id的对应title
+  let servicesParamLabel={}
+  // 小套餐是否选中
+  let hasFICCSmallChecked=false
+  cascaderRef.getCheckedNodes(true).map(node=>{
+    let nodeData = node.data
+    if(!nodeData.service_template_id) return
+    if(nodeData.product_id==2){
+      node.pathValues.map((pathValue,pathIndex) =>{
+        servicesParamId.push(pathValue)
+        servicesParamLabel[pathValue] = node.pathLabels[pathIndex]
+      })
+      // 权益 - 直接push每一个级别的对象
+    }else{
+      // 90000往上都是FICC小套餐品种的Id，特殊处理
+      if(nodeData.service_template_id>=90000){
+        // 小套餐肯定选中了
+        hasFICCSmallChecked=true
+        // 真正拿取的是chart_permission_id
+        if(serviceComposition.FICCSmallServiceId.includes(nodeData.service_template_id)) FICCSmallServiceIds.push(nodeData.chart_permission_id)
+      }else if(nodeData.service_template_id!=2){
+        servicesParam.push({service_template_id:nodeData.service_template_id,title:nodeData.title,value:nodeData.value})
+      }
+    }
+  })
+  // 做去重->循环
+  Array.from(new Set(servicesParamId)).map(it =>{
+    if(it>10000) return 
+    servicesParam.push({service_template_id:it,title:servicesParamLabel[it]})
+  })
+  if(hasFICCSmallChecked){
+    // 将小套餐以及品种push进入
+    servicesParam.push({service_template_id:2,
+    title:'FICC小套餐',value:'',chart_permission_ids:FICCSmallServiceIds.join(',')})
+  }
+  return servicesParam
+}
+
+// 套餐类型更改
+const productIdChange=(item)=>{
+  item.seller_id=''
+}
+// 级联选择器套餐改变
+const servicesChange=(value,type)=>{
+  let cascaderRef = type==1?selectServicesRef.value:selectServicesPreRef.value
+  let returnItem=serviceComposition.servicesChange(servicesList.value,value,cascaderRef)
+  if(type == 1){
+    serviceType.value = returnItem.typeValue
+    dialog.registrationPreForm.services= dialog.selectServices=returnItem.backValue
+  }else{
+    serviceTypePre.value = returnItem.typeValue
+    preDialog.preForm.services=preDialog.selectServices=returnItem.backValue
+  }
+  console.log(value,returnItem.backValue);
+}
+
+watch(serviceType,(newVal)=>{
+  console.log(newVal);
+  if(newVal==1 || newVal==2){
+    dialog.registrationPreForm.IorPInfo.map(item =>{
+      if(item.service_product_id!=newVal){
+        productIdChange(item)
+      }
+      item.service_product_id=newVal
+    })
+  }else if(newVal==0){
+    dialog.registrationPreForm.IorPInfo.map(item =>{
+      productIdChange(item)
+      item.service_product_id=''
+    })
+  }
+})
+
+watch(serviceTypePre,(newVal)=>{
+  if(newVal==1 || newVal==2){
+    if(preDialog.preForm.service_product_id!=newVal){
+      productIdChange(preDialog.preForm)
+    }
+    preDialog.preForm.service_product_id=newVal
+  }else if(newVal==0){
+    productIdChange(preDialog.preForm)
+    preDialog.preForm.service_product_id=''
+  }
+})
+// -----------------------------------------套餐部分 - 结束
+// -----------------------------------------销售部分 - 开始
+//FICC的销售列表
+let sellerInvoiceListF=[]
+//权益的销售列表
+let sellerInvoiceListQ=[]
+
+//获取销售列表
+const getSellerListFun=()=>{
+  getSellerList().then(res=>{
+    sellerInvoiceListF = res.data.ficc_list || []
+    sellerInvoiceListQ = res.data.rai_list || []
+  })
+}
+
+let elMessageDom=null
+const selectVisible=(value)=>{
+  if(value){
+    if(!elMessageDom){
+      elMessageDom=ElMessage.warning('请选择套餐类型')
+      setTimeout(()=>{
+        elMessageDom=null
+      },1000)
+    }
+  }
+}
+
+// -----------------------------------------销售部分 - 结束
+// 预登记列表
+const placementPreList=()=>{
+  getPreRegistrationList(placemenetPre.searchParams).then(res=>{
+    placemenetPre.tableData=res.data.list || []
+    placemenetPre.total=res.data.page?.total || 0
+    // console.log(res);
+  })
+}
+//新增预登记
+const addRegistrationPre=(type)=>{
+  dialog.registrationType = type
+  dialog.title=`新增${type}预登记`
+  dialog.registrationPreShow=true
+}
+
+//新增预登记的行
+const addRegistrationPreRow=()=>{
+  let lastItem=dialog.registrationPreForm.IorPInfo[dialog.registrationPreForm.IorPInfo.length-1]
+  if(!(lastItem.amount&&lastItem.currency_unit&&lastItem.register_date)){
+    ElMessage.error('请填写完整！')
+    return 
+  }
+  if(dialog.registrationType=='开票' && !(lastItem.service_product_id&&lastItem.seller_id)){
+    ElMessage.error('请填写完整！')
+    return 
+  }
+  dialog.registrationPreForm.IorPInfo.push({
+    service_product_id:serviceType.value==3?'':serviceType.value,
+    amount:'',
+    currency_unit:lastItem.currency_unit || 'CNY',
+    register_date:'',
+    seller_id:'',
+    remark:''
+  })
+}
+//删除预登记的行
+const deleteRegistrationPreRow=(index,row)=>{
+  ElMessageBox.confirm(`是否删除该条${dialog.registrationType}记录？`,
+    '提示',    
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }).then(res=>{
+      row.contract_invoice_id && hasDeleteContractInvoiceIds.push(row.contract_invoice_id)
+      row.pre_register_id && hasDeletePreRegisterIds.push(row.pre_register_id)
+      dialog.registrationPreForm.IorPInfo.splice(index,1)
+    }).catch(()=>{}) 
+}
+//编辑预登记
+const editRegistrationPre=(row)=>{
+  preRegistrationDetail({contract_register_id:row.contract_register_id,
+  invoice_type:row.invoice_type}).then(res=>{
+    if(!res.data) return
+    dialog.registrationPreForm.contract_register_id = res.data.contract_register_id
+    dialog.registrationPreForm.company_name = res.data.company_name
+    dialog.registrationPreForm.invoice_type = row.invoice_type
+    dialog.registrationPreForm.IorPInfo=res.data.list
+    dialog.registrationPreForm.services=res.data.services || []
+    dialog.validityDate=[res.data.start_date,res.data.end_date]
+    dialog.selectServices = [...res.data.services.map(item => item.service_template_id),...res.data.serviceTemplateIds]
+    dialog.registrationPreForm.IorPInfo.forEach(item =>{
+      // 不能为零，为零会回显
+      item.service_product_id=item.service_product_id==0?'':item.service_product_id
+    })
+    dialog.registrationType=row.invoice_type==3?'开票':'到款'
+    dialog.title=`编辑${dialog.registrationType}预登记`
+    dialog.registrationPreShow=true
+    nextTick(()=>{
+      serviceType.value=serviceComposition.servicesChange(servicesList.value,dialog.selectServices,selectServicesRef.value).typeValue
+    })
+  })
+}
+
+//弹窗关闭动画 回调
+const dialogClosed=()=>{
+  hasDeleteContractInvoiceIds=[]
+  hasDeletePreRegisterIds=[]
+  dialog.registrationPreForm.company_name=''
+  dialog.registrationPreForm.contract_register_id=''
+  dialog.registrationPreForm.services=[]
+  dialog.registrationPreForm.IorPInfo=[
+    {
+      service_product_id:'',
+      amount:'',
+      currency_unit:'CNY',
+      register_date:'',
+      seller_id:'',
+      remark:''
+    }
+  ]
+  dialog.validityDate=[]
+  dialog.selectServices=[]
+  serviceComposition.resetDisable(servicesList.value)
+  setTimeout(()=>{
+    registrationPreForm.value.clearValidate()
+  },0)
+}
+
+// 提交
+const submitForm=()=>{
+  registrationPreForm.value.validate((valid)=>{
+    if(valid){
+      const serviceData=serivcesDataHandler(selectServicesRef.value)
+      let params={
+        contract_register_id:dialog.registrationPreForm.contract_register_id||0,
+        company_name:dialog.registrationPreForm.company_name,
+        register_type:dialog.registrationType=='开票'?3:4,
+        start_date:dialog.registrationPreForm.start_date,
+        end_date:dialog.registrationPreForm.end_date,
+        list:dialog.registrationPreForm.IorPInfo,
+        services:serviceData,
+        del_invoice_ids:hasDeleteContractInvoiceIds,
+        del_pre_register_ids:hasDeletePreRegisterIds
+      }
+      // 化''为0
+      params.list.forEach(item =>{
+        item.amount = parseFloat(item.amount)
+        item.seller_id=item.seller_id||0
+        item.service_product_id=item.service_product_id||0
+      })
+      console.log(params);
+      let prePlacementProp=preRegistrationAdd
+      if(params.contract_register_id){
+        // 编辑
+        prePlacementProp=preRegistrationEdit
+      }
+      prePlacementProp(params).then(res=>{
+        dialog.registrationPreShow=false
+        ElMessage.success(`${dialog.title}成功`)
+        placementPreList()
+      })
+    }
+  })
+}
+// ------------------------------------------------预开票/到款 弹窗
+const preDialog=reactive({
+  show:false,
+  title:'',
+  preForm:{
+    company_name:'',
+    service_product_id:'',
+    start_date:'',
+    end_date:'',
+    services:[],
+    amount:'',
+    currency_unit:'CNY',
+    seller_id:'',
+    invoice_type:'',
+    register_date:'',
+    remark:''
+  },
+  validityDate:[],
+  selectService:[],
+  rules:{
+    end_date:{required:true,message:"约定有效期不能为空",trigger:'change'},
+    services:{required:true,message:'套餐不能为空',trigger:'change'},
+    amount:[{required:true,message:'金额不能为空',trigger:'blur'},
+    {validator:(rule,value,callback)=>{
+      if(!parseFloat(value)){
+        callback(new Error('金额无效'))
+      }
+      if(!preDialog.preForm.currency_unit){
+        callback(new Error('货币单位不能为空'))
+      }else{
+        callback()
+      }
+    },trigger:'blur'}],
+    seller_id:{required:true,message:'销售不能为空',trigger:'change'},
+    register_date:{required:true,message:'开票日不能为空',trigger:'change'}
+  }
+})
+const preFormRef=ref(null)
+const selectServicesPreRef=ref(null)
+watch(()=>preDialog.validityDate,(newVal)=>{
+  if(!newVal){
+    preDialog.preForm.start_date=''
+    preDialog.preForm.end_date=''
+  }else{
+    preDialog.preForm.start_date = newVal[0]
+    preDialog.preForm.end_date = newVal[1]
+  }
+})
+// 预开票/到款
+const preIorP=(row)=>{
+  preRegistrationDetail({contract_register_id:row.contract_register_id,
+  invoice_type:row.invoice_type==3?4:3,pre_register_id:row.pre_register_id,arrive_id:row.arrive_id,
+  invoice_id:row.invoice_id}).then(res=>{
+    if(!res.data) return
+    preDialog.preForm.contract_register_id = res.data.contract_register_id
+    preDialog.preForm.company_name = res.data.company_name
+    preDialog.preForm.invoice_type = row.invoice_type==3?4:3
+    preDialog.preForm.service_product_id=row.service_product_id==0?'':row.service_product_id
+    preDialog.preForm.pre_register_id = row.pre_register_id || 0
+    if(res.data.list.length>0){
+      preDialog.preForm.contract_invoice_id = res.data.list[0].contract_invoice_id || 0
+      preDialog.preForm.amount=res.data.list[0].amount
+      preDialog.preForm.currency_unit=res.data.list[0].currency_unit
+      preDialog.preForm.seller_id=res.data.list[0].seller_id
+      preDialog.preForm.invoice_type=res.data.list[0].invoice_type
+      preDialog.preForm.register_date=res.data.list[0].register_date
+      preDialog.preForm.remark=res.data.list[0].remark
+    }
+    preDialog.preForm.services=res.data.services || []
+    preDialog.validityDate=[res.data.start_date,res.data.end_date]
+    preDialog.selectServices = [...res.data.services.map(item => item.service_template_id),...res.data.serviceTemplateIds]
+    preDialog.title=row.invoice_type==3?'预到款':'预开票'
+    preDialog.show=true
+    
+    nextTick(()=>{
+      if(preDialog.title=='预开票'){
+        // 预开票需要回显套餐信息
+        serviceTypePre.value=serviceComposition.servicesChange(servicesList.value,preDialog.selectServices,selectServicesPreRef.value).typeValue
+      }else{
+        // 预到款不用回显套餐信息
+        let checkedNodes=selectServicesPreRef.value.getCheckedNodes()
+
+        // 套餐类型
+        let hasFICCService = checkedNodes.some(Node => Node.data.product_id == 1)
+        let hasQYService = checkedNodes.some(Node => Node.data.product_id == 2)
+        if(hasFICCService&&hasQYService){
+          serviceTypePre.value=3
+        }else if(hasFICCService){
+          serviceTypePre.value=1
+        }else{
+          serviceTypePre.value=2
+        }
+      }
+    })
+  })
+}
+
+const submitPreForm=()=>{
+    preFormRef.value.validate((valid)=>{
+    if(valid){
+      let serviceData;
+      if(preDialog.title=='预开票'){
+        // 预开票可能会修改套餐，需要重组套餐数据
+        serviceData=serivcesDataHandler(selectServicesPreRef.value)
+      }else{
+        // 预到款不需要重组套餐数据
+        serviceData=preDialog.preForm.services
+      }
+      preDialog.preForm.amount = parseFloat(preDialog.preForm.amount)
+      let params={
+        contract_register_id:preDialog.preForm.contract_register_id,
+        company_name:preDialog.preForm.company_name,
+        register_type:preDialog.preForm.invoice_type,
+        start_date:preDialog.preForm.start_date,
+        end_date:preDialog.preForm.end_date,
+        list:[{
+          contract_invoice_id:preDialog.preForm.contract_invoice_id||0,
+          amount:preDialog.preForm.amount,
+          currency_unit:preDialog.preForm.currency_unit,
+          pre_register_id:preDialog.preForm.pre_register_id,
+          remark:preDialog.preForm.remark,
+          register_date:preDialog.preForm.register_date,
+          seller_id:preDialog.preForm.seller_id||0,
+          service_product_id:preDialog.preForm.service_product_id,
+        }],
+        services:serviceData
+      }
+      console.log(params);
+      preRegistrationSave(params).then(res=>{
+        preDialog.show=false
+        ElMessage.success(`${preDialog.title}成功`)
+        placementPreList()
+      })
+    }
+  })
+}
+
+const preDialogClosed=()=>{
+  preDialog.preForm={
+    service_product_id:'',
+    start_date:'',
+    end_date:'',
+    services:[],
+    amount:'',
+    currency_unit:'CNY',
+    seller_id:'',
+    register_date:''
+  },
+  preDialog.validityDate=[]
+  preDialog.selectServices=[]
+  serviceComposition.resetDisable(servicesList.value)
+  setTimeout(()=>{
+    preFormRef.value.clearValidate()
+  },0)
+}
+
+// -------------------------------货币列表
+const currencyList=ref([])
+// 获取货币列表
+const getCurrencyListFun=()=>{
+  getCurrencyList().then(res=>{
+    currencyList.value=res.data || []
+  })
+}
+// 以防currenvy_unitw为空
+const currencyValidator=(item,callback)=>{
+  if(!parseFloat(item.amount)){
+    callback(new Error('金额无效'))
+  }
+  if(!item.currency_unit){
+    callback(new Error('货币单位不能为空'))
+  }else{
+    callback()
+  }
+}
+// 新增或编辑预登记 币种修改
+const currencyUnitChange=(value)=>{
+  dialog.registrationPreForm.IorPInfo.map(item =>{
+    item.currency_unit = value
+  })
+}
+
+
+// 切换每页的数量
+const changePageSize=(pageSize)=>{
+  placemenetPre.searchParams.page_size = pageSize
+  placementPreList()
+}
+const changePageNo = (pageNo)=>{
+  placemenetPre.searchParams.current = pageNo
+  placementPreList()
+}
+const searchPlacementPre=()=>{
+  placemenetPre.searchParams.current = 1
+  placementPreList()
+}
+
+// 补录合同
+const supplementaryContract=(row)=>{  
+  // console.log(id);
+  router.push({path:'/financial/list/contractProgress',query:{
+    supplementaryId:row.contract_register_id,
+    invoice_type:row.invoice_type
+  }})
+}
+// 查看备注
+const remarkView=(type,row)=>{
+  let remarkTitle=type+'备注'
+  let text = ''
+  if(type=='开票'){
+    text=row.remark
+  }else{
+    text=row.arrive_remark
+  }
+  ElMessageBox.alert(text,remarkTitle,{
+    confirmButtonText:'知道了',
+    confirmButtonClass:'message-box-remark'
+  })
+}
+
+
+// 删除
+const delteRecord=(row)=>{
+  ElMessageBox.confirm('未补录合同，删除后不可恢复，是否确认删除？','操作提示',    
+  {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(res=>{
+    preRegistrationDelete({
+      arrive_id:row.arrive_id,contract_register_id:row.contract_register_id,
+      invoice_id:row.invoice_id,pre_register_id:row.pre_register_id,}).then(res=>{
+      ElMessage.success('删除成功')
+      placementPreList()
+    })
+  }).catch(()=>{})
+}
+
+//  ---------------------created
+getSellerListFun()
+getServicesListFun()
+getCurrencyListFun()
+placementPreList()
+</script>
+
+<template>
+  <div class="placemenetPre-list-container" id="placemenetPre-list-container" > 
+    <!-- 顶部区域 -->
+    <div class="placemenetPre-top-zone">
+      <div class="placemenetPre-top-search-zone">
+        <el-input v-model="placemenetPre.searchParams.keyword" placeholder="客户姓名" :prefix-icon="Search"
+        style="width: 240px;" @input="searchPlacementPre" clearable />
+      </div>
+      <!-- 按钮区域 -->
+      <div class="placemenetPre-top-option-zone">
+        <el-button type="primary" @click="addRegistrationPre('开票')" class="main-button-large" 
+        style="margin-left: 30px;" v-permission="'financial:registrationPre:AEDInvoice'">开票预登记</el-button>         
+        <el-button type="primary" @click="addRegistrationPre('到款')" class="main-button-large" style="margin-left: 30px;"
+        v-permission="'financial:registrationPre:AEDPayment'">到款预登记</el-button>         
+      </div>
+    </div>
+    <div class="placemenetPre-table-zone">
+      <!-- 表格 -->
+      <el-table :data="placemenetPre.tableData" border max-height="695px"
+      size="default"> 
+        <el-table-column label="客户名称" prop="company_name"
+        show-overflow-tooltip min-width="120"></el-table-column>
+        <el-table-column label="约定有效期" width="210" prop="start_date">
+          <template #default="{row}">
+            {{row.start_date&&row.start_date!='0001-01-01'?(row.start_date+' 至 '+row.end_date):''}}
+          </template>
+        </el-table-column>
+        <el-table-column label="套餐" prop="services" show-overflow-tooltip></el-table-column>
+        <el-table-column label="开票日" prop="invoice_time" width="110">
+        </el-table-column>
+        <el-table-column label="开票金额" prop="origin_amount" width="120">
+        </el-table-column>
+        <el-table-column label="开票销售" width="100" prop="seller_name"></el-table-column>
+        <el-table-column label="到款日" prop="arrive_time" width="110">
+        </el-table-column>
+        <el-table-column label="到款金额" prop="arrive_origin_amount" width="120">
+        </el-table-column>
+        <el-table-column label="操作" fixed="right" min-width="100">
+          <template #default="{row}">
+            <div class="table-options" style="padding-right: 20px;">
+              <span class="table-option-buttons" v-permission="'financial:registrationPre:supplementary'"
+              @click="supplementaryContract(row)">
+                补录合同
+              </span>
+              <span class="table-option-buttons" v-permission="'financial:registrationPre:preInvoice'"
+              @click="preIorP(row)" v-if="row.invoice_type==4">
+                预开票
+              </span>
+              <span class="table-option-buttons" v-permission="'financial:registrationPre:prePayment'"
+              @click="preIorP(row)"  v-if="row.invoice_type==3">
+                预到款
+              </span>
+              <!-- 开票预登记编辑 -->
+              <span class="table-option-buttons" v-permission="'financial:registrationPre:AEDInvoice'"
+              @click="editRegistrationPre(row)" v-if="row.invoice_type==3" >
+                编辑
+              </span>          
+              <!-- 到款预登记编辑 -->
+              <span class="table-option-buttons" v-permission="'financial:registrationPre:AEDPayment'"
+              @click="editRegistrationPre(row)" v-if="row.invoice_type==4">
+                编辑
+              </span>
+              <!-- 开票预登记删除 -->
+              <span class="table-option-buttons" v-permission="'financial:registrationPre:AEDInvoice'"
+              @click="delteRecord(row)" style="color:var(--dangerColor);" v-if="row.invoice_type==3">
+                删除
+              </span>
+              <!-- 到款预登记删除 -->
+              <span class="table-option-buttons" v-permission="'financial:registrationPre:AEDPayment'"
+              @click="delteRecord(row)" style="color:var(--dangerColor);" v-if="row.invoice_type==4">
+                删除
+              </span>
+              <el-dropdown popper-class="classifyFandQ" size="large" style="position: absolute;right: 12px;top: calc(50% - 8px);"
+              v-permission="['financial:registrationPre:invoiceRemark','financial:registrationPre:paymentRemark','or']"
+               @command="(type)=>remarkView(type,row)">
+                <el-icon style="cursor: pointer;font-size: 16px;"><MoreFilled /></el-icon>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item command="开票" 
+                    v-if="store.getters.permissionButtons.some(item => item.button_code=='financial:registrationPre:invoiceRemark')">
+                      开票备注
+                    </el-dropdown-item>
+                    <el-dropdown-item command="到款"
+                    v-if="store.getters.permissionButtons.some(item => item.button_code=='financial:registrationPre:paymentRemark')">
+                      到款备注
+                    </el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </div>
+          </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="placemenetPre.searchParams.page_size" :page_no="placemenetPre.searchParams.current" 
+      style="display: flex;justify-content: flex-end;margin-top: 20px;" 
+      :total="placemenetPre.total" @handleCurrentChange="changePageNo" @handleSizeChange="changePageSize"/>
+    </div>
+    <!-- 新增/编辑弹窗 -->
+    <el-dialog v-model="dialog.registrationPreShow" :title="dialog.title" top="5vh"
+     width="942px" @closed="dialogClosed"
+     :close-on-click-modal="false">
+      <el-form :model="dialog.registrationPreForm" inline ref="registrationPreForm" style="margin:0 10px;"> 
+        <el-form-item label="客户名称" prop="company_name" label-width="90" style="margin-right: 30px;"
+        :rules="{required:true,message:'客户名称不能为空',trigger:'blur'}"> 
+          <el-input v-model="dialog.registrationPreForm.company_name"
+          placeholder="请输入客户名称" style="width:320px" />
+        </el-form-item>
+        <el-form-item label="约定有效期" prop="end_date" label-width="102" style="margin-right: 20px;"
+        :rules="dialog.registrationType=='开票'?{required:true,message:'约定有效期不能为空',trigger:'change'}:{required:false}">
+          <el-date-picker type="daterange" 
+            v-model="dialog.validityDate" style="max-width: 320px;"
+            start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD"
+            :clearable="false">
+            </el-date-picker>
+        </el-form-item>
+        <el-form-item label="套餐" prop="services" label-width="90" style="margin-right: 20px;"
+        :rules="dialog.registrationType=='开票'?{required:true,message:'套餐不能为空',trigger:'change'}:{required:false}">
+          <el-cascader filterable :options="servicesList" placeholder="请选择套餐" @change="(value)=>servicesChange(value,1)"
+            :show-all-levels="true" v-model="dialog.selectServices" :clearable="false" ref="selectServicesRef"
+            :props="{multiple:true,label:'title',value:'service_template_id',emitPath:false}" collapse-tags collapse-tags-tooltip
+            key="seriveces" style="min-width: 775px;z-index: 100;">
+          </el-cascader>
+        </el-form-item>
+        <el-scrollbar max-height="470px" noresize style="margin: 0 -10px;padding: 0 10px;" >
+          <div class="invoice-payment-row" v-for="(item,index) in dialog.registrationPreForm.IorPInfo" :key="index">
+            <el-form-item label="套餐类型" :prop="`IorPInfo.${index}.service_product_id`" v-if="serviceType==3"
+            label-width="90" style="margin-right: 20px;"
+            :rules="dialog.registrationType=='开票'?{required:true,message:'套餐类型不能为空',trigger:'change'}:{required:false}">
+              <el-select v-model="item.service_product_id" style="width: 176px;" @change="productIdChange(item)"
+              placeholder="请选择套餐">
+                <el-option label="FICC套餐" :value="1"></el-option>
+                <el-option label="权益套餐" :value="2"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item :label="dialog.registrationType+'金额'" :prop="`IorPInfo.${index}.amount`" label-width="90"  style="margin-right: 20px;"
+            :rules="[{required:true,message:'金额不能为空',trigger:'blur'},
+              {validator:(rule,value,callback)=>currencyValidator(item,callback),trigger:'blur'}]">
+              <el-input v-model.trim="item.amount" 
+              :placeholder="`请输入${dialog.registrationType}金额`" style="width: 131px;margin-right: 15px;" />
+              <el-select v-model="item.currency_unit" placeholder="请选择货币类型" style="width: 91px;" @change="currencyUnitChange">
+                <el-option v-for="currency in currencyList" :key="currency.code" :label="currency.name" :value="currency.code">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item :label="dialog.registrationType+'日'" :prop="`IorPInfo.${index}.register_date`" label-width="73" 
+            :style="{marginRight:serviceType==3?'0':'20px'}"
+            :rules="{required:true,message:dialog.registrationType+'日不能为空',trigger:'change'}">
+              <el-date-picker v-model="item.register_date" style="max-width: 156px!important;"
+                :placeholder="`请选择${dialog.registrationType}日`" value-format="YYYY-MM-DD" :clearable="false">
+              </el-date-picker>
+            </el-form-item>
+            <el-form-item label="开票销售" :prop="`IorPInfo.${index}.seller_id`" label-width="90" style="margin-right: 0;"
+            :rules="{required:true,message:'销售不能为空',trigger:'change'}" v-if="dialog.registrationType=='开票'">
+              <el-select v-model="item.seller_id" style="width: 176px;"
+              placeholder="请选择销售" filterable v-if="item.service_product_id==1">
+                <el-option :label="seller.seller_name" :value="seller.seller_id" 
+                v-for="seller in sellerInvoiceListF" :key="seller.seller_id">
+                </el-option>
+              </el-select>
+              <el-select v-model="item.seller_id" style="width: 176px;"
+              placeholder="请选择销售" filterable v-else-if="item.service_product_id==2">
+                <el-option :label="seller.seller_name" :value="seller.seller_id" 
+                v-for="seller in sellerInvoiceListQ" :key="seller.seller_id">
+                </el-option>
+              </el-select>
+              <el-select v-model="item.seller_id" style="width: 176px;" 
+              placeholder="请选择销售" v-else
+                @visible-change="selectVisible">
+              </el-select>
+            </el-form-item>
+            <el-form-item label="备注" :prop="`IorPInfo.${index}.remark`" label-width="90" 
+            style="margin-right: 0;" :style="{marginLeft:serviceType==3 && dialog.registrationType=='开票'?'20px':'0'}"> 
+              <el-input v-model="item.remark" placeholder="请输入备注" :style="{width:serviceType==3&&dialog.registrationType=='开票'?'486px':'772px'}" />
+            </el-form-item>
+            <el-icon color="#D0D2D5" class="deleteIcon" size="16px" @click="deleteRegistrationPreRow(index,item)"
+            v-show="dialog.registrationPreForm.IorPInfo.length>1"><CircleCloseFilled /></el-icon>
+          </div>
+        </el-scrollbar>
+      </el-form>
+      <div class="add-invoice-payment" @click="addRegistrationPreRow">
+        <el-icon size="16px" color="var(--themeColor)">
+          <svg-icon name="svgIcon-common-add"></svg-icon>
+        </el-icon>
+        <span>添加{{ dialog.registrationType}}信息</span>
+      </div>
+      <template #footer>
+        <div>
+          <el-button @click="dialog.registrationPreShow=false" class="common-button-medium">取消</el-button>
+          <el-button type="primary" @click="submitForm" style="margin-left: 30px;">确定</el-button>
+        </div>
+      </template> 
+    </el-dialog>
+    <!--预开票/到款 弹窗 -->
+    <el-dialog v-model="preDialog.show" :title="preDialog.title"
+     width="450px" @closed="preDialogClosed"
+     :close-on-click-modal="false">
+      <el-form :model="preDialog.preForm" :rules="preDialog.rules" id="preFormRef"
+      ref="preFormRef" style="margin-left:10px;" label-width="101px"> 
+        <el-form-item label="约定有效期" prop="end_date" v-if="preDialog.title=='预开票'">
+          <el-date-picker type="daterange" key="pre"
+            v-model="preDialog.validityDate" style="max-width: 286px;"
+            start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD"
+            :clearable="false">
+            </el-date-picker>
+        </el-form-item>
+        <el-form-item label="套餐" prop="services" v-show="preDialog.title=='预开票'">
+          <el-cascader filterable :options="servicesList" placeholder="请选择套餐" 
+          @change="(value)=>servicesChange(value,2)"
+            :show-all-levels="true" v-model="preDialog.selectServices" :clearable="false" ref="selectServicesPreRef"
+            :props="{multiple:true,label:'title',value:'service_template_id',emitPath:false}" collapse-tags collapse-tags-tooltip
+            key="preSeriveces" style="min-width: 286px;z-index: 100;">
+          </el-cascader>
+        </el-form-item>
+        <el-form-item label="套餐类型" prop="service_product_id" v-if="serviceTypePre==3" 
+        :rules="preDialog.title=='预开票'?{required:true,message:'套餐类型不能为空',trigger:'change'}:{required:false}">
+          <el-select v-model="preDialog.preForm.service_product_id"
+          style="width: 286px;" @change="productIdChange(preDialog.preForm)"
+          placeholder="请选择套餐">
+            <el-option label="FICC套餐" :value="1"></el-option>
+            <el-option label="权益套餐" :value="2"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="preDialog.title=='预开票'?'开票金额':'到款金额'" prop="amount">
+          <el-input v-model.trim="preDialog.preForm.amount" style="width: 185px;margin-right: 10px;"
+          :placeholder="preDialog.title=='预开票'?'请输入开票金额':'请输入到款金额'"  />
+          <el-select v-model="preDialog.preForm.currency_unit" placeholder="请选择货币类型" style="width: 91px;" >
+            <el-option v-for="currency in currencyList" :key="currency.code" :label="currency.name" :value="currency.code">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="开票销售" prop="seller_id" v-if="preDialog.title=='预开票'">
+          <el-select v-model="preDialog.preForm.seller_id" style="width: 286px;"
+          placeholder="请选择销售" filterable v-if="preDialog.preForm.service_product_id==1">
+            <el-option :label="seller.seller_name" :value="seller.seller_id" 
+            v-for="seller in sellerInvoiceListF" :key="seller.seller_id">
+            </el-option>
+          </el-select>
+          <el-select v-model="preDialog.preForm.seller_id" style="width: 286px;"
+          placeholder="请选择销售" filterable v-else-if="preDialog.preForm.service_product_id==2">
+            <el-option :label="seller.seller_name" :value="seller.seller_id" 
+            v-for="seller in sellerInvoiceListQ" :key="seller.seller_id">
+            </el-option>
+          </el-select>
+          <el-select v-model="preDialog.preForm.seller_id" style="width: 286px;" 
+          placeholder="请选择销售" v-else
+            @visible-change="selectVisible">
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="preDialog.title=='预开票'?'开票日':'到款日'" prop="register_date">
+          <el-date-picker v-model="preDialog.preForm.register_date"
+          :placeholder="preDialog.title=='预开票'?'请选择开票日':'请选择到款日'" value-format="YYYY-MM-DD" :clearable="false">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark"> 
+          <el-input v-model="preDialog.preForm.remark" type="textarea" :rows="2"
+          placeholder="请输入备注" style="width:286px" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div>
+          <el-button @click="preDialog.show=false" class="common-button-medium">取消</el-button>
+          <el-button type="primary" @click="submitPreForm" style="margin-left: 30px;">确定</el-button>
+        </div>
+      </template> 
+    </el-dialog>
+
+  </div>
+</template>
+  
+<style lang="scss" scoped>
+  .placemenetPre-list-container{
+    min-height: 100%;
+    .placemenetPre-top-zone{
+      display: flex;
+      flex-wrap: wrap;
+      align-items: flex-start;
+      justify-content: space-between;
+      margin-bottom: 20px;
+      .placemenetPre-top-search-zone{
+        display: flex;
+        align-items: center;
+        margin-bottom: 8px;
+      }
+    }
+    .placemenetPre-table-zone{
+      margin-top: 20px;
+    }
+    .invoice-payment-row{
+      padding: 20px 10px 0;
+      background-color: #FBF9F4;
+      margin-bottom: 20px;
+      position: relative;
+      &:last-child{
+        margin-bottom: 0;
+      }
+      .deleteIcon{
+        cursor: pointer;
+        position: absolute;
+        top:0;
+        right: 0;
+        z-index: 3;
+      }
+    }
+    .add-invoice-payment{
+      display: inline-flex;
+      align-items: center;
+      margin-top: 20px;
+      padding: 0 10px;
+      cursor: pointer;
+      span{
+        color: $themeColor;
+        font-size: 14px;
+        margin-left: 6px;
+      }
+    }
+  }
+</style>
+<style lang="scss">
+  #placemenetPre-list-container{
+    .el-dialog__footer{
+      padding-top: 0!important;
+      padding: 0 0 36px 0;
+    }
+    #preFormRef{
+      .el-date-editor{
+        .el-input__wrapper{
+          width: 286px;
+        }
+      }
+    }
+  }
+  .message-box-remark{
+    color: white!important;
+  }
+</style>

src/views/financialManagement/style/contractRegistration.scss

@@ -0,0 +1,123 @@
+.info-row{
+  padding: 48px 2vw 30px 0;
+  .info-row-title{
+    font-weight: 500;
+    font-size: 14px;
+    color: #333333;
+    font-weight: bold;
+    padding-left: 16px;
+    position: relative;
+    &::after{
+      content: '';
+      height: 22px;
+      width: 4px;
+      background-color: $themeColor;
+      position: absolute;
+      top: -1.5px;
+      left: 0;
+    }
+  }
+  .info-row-services{
+    min-width: 560px;
+    padding-left: 80px;
+    margin-top: 30px;
+    .info-row-services-header{
+      display: flex;
+      align-items: center;
+      margin-bottom: 20px;
+      span{
+        white-space: nowrap;
+        font-weight: bold;
+        font-size: 14px;
+        color: $mainTextColor;
+        margin-right: 20px;
+      }
+    }
+  }
+
+  .contractInfo-form{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+  // 套餐信息
+  .info-service-box{
+    margin-right: -40px;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    .service-small{
+      display: inline-flex;
+      align-items: center;
+      margin-right: 30px;
+      .select-variety{
+        font-size: 14px;
+        cursor: pointer;
+        color: $themeColor;
+        margin-left: 12px;
+        line-height: 14px;
+      }
+    }
+  }
+  .info-service-remark{
+    display: flex;
+    padding-left: 80px;
+    align-items: center;
+    margin-top: 20px;
+  }
+  .remark{
+    span{
+      font-weight: 400;
+      font-size: 14px;
+      color: #333333;
+      margin-right: 20px;
+      white-space: nowrap;
+    }
+  }
+  // 备注
+  .info-row-remark{
+    display: flex;
+    padding-left: 80px;
+    align-items: center;
+  }
+  // 开票信息
+  .info-row-invoice-payment{
+    padding-left: 80px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    .invoice-payment-title{
+      min-width: 560px;
+      font-size: 14px;
+      color: #333333;
+      display: flex;
+      margin: 26px 0 20px;
+      .invoice-payment-money-multiple{
+        border: 1px solid #DCDFE6;
+        border-radius: 4px;
+        overflow: hidden;
+        padding: 0 20px;
+        transition: all 0.1s ease-in;
+        .invoice-payment-money-multiple-head{
+          display: flex;
+          align-items: center;
+          padding: 20px 0;
+          cursor: pointer;
+        }
+        .invoice-payment-money-multiple-body{
+          box-sizing: border-box;
+          padding-bottom: 20px ;
+        }
+      }
+      .invoice-payment-money{
+        font-weight: 600;
+        font-size: 14px;
+        color: var(--dangerColor);
+      }
+    }
+    .table-operation-button{
+      cursor: pointer;
+      color: $themeColor;
+    }
+  }
+}

src/views/financialStatistics/commodityPayment.vue

@@ -127,9 +127,9 @@ const moment = inject('$moment')
     commodityPList()
   }
 
-  const dataExport=()=>{
-    getInvoicePaymentList({...searchParams,is_export:1}).then(res=>{
-      downloadByFlow(res,'xlsx',`商品到款统计列表`)
+  const dataExport=({value,text})=>{
+    getInvoicePaymentList({...searchParams,is_export:1,list_param:value}).then(res=>{
+      downloadByFlow(res,'xlsx',`商品到款统计列表-`+text)
     })
   }
 
@@ -389,7 +389,17 @@ const moment = inject('$moment')
             </div>
           </div>
         </div>
-        <el-button @click="dataExport" style="margin-bottom: 10px;" size="large" class="element-common-button">导出</el-button>
+        <el-dropdown trigger="click" popper-class="classifyFandQ" size="large"  @command="dataExport">
+          <el-button style="margin-bottom: 10px;" size="large" class="element-common-button">导出</el-button>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item :command="{value:0,text:'FICC&权益'}">FICC&权益</el-dropdown-item>
+              <el-dropdown-item :command="{value:1,text:'FICC'}">FICC</el-dropdown-item>
+              <el-dropdown-item :command="{value:2,text:'权益'}">权益</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+        
       </div>
       <div class="table-zone">
         <el-table :data="commodityPData.tableData" border ref="tableRef"