代码整理后的冲突解决，有点问题，待修改

.env.development

@@ -1,4 +1,5 @@
 # 接口地址
+# 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/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 - 必填

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/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/serivceCascader.js

@@ -0,0 +1,150 @@
+
+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 || !(hasFICCService||hasQYService)){
+      typeValue=3
+    }else if(hasFICCService){
+      typeValue=1
+    }else{
+      typeValue=2
+    }
+    // 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,1143 @@
+<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'
+
+  const contractSourceArray=['非CRM合同导入','CRM合同导入']
+  // 合同状态数组
+  const contractStatusArray=[{id:1,label:"已审批"},{id:2,label:"单章寄出"},{id:3,label:"已签回"},{id:4,label:"已终止"},{id:5,label:"邮件备案"}]
+  // 合同类型数组
+  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 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:'',
+      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'},
+      actual_pay_companies:{required:true,message:'代付方不能为空',trigger:'blur'}
+    },
+    // 有效期
+    contractValidityDate:[],
+    // 合同类型选中
+    contractTypeCheck:[]
+  })
+
+  // --------------套餐信息
+  const serviceData=reactive({
+    // showServiceFicc:false,
+    // showServiceQy:false,
+    // 选中的套餐 - 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.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(()=>compliance.form.contract_amount,(newVal)=>{
+  //   if(serviceData.showServiceFicc && serviceData.showServiceQy){
+  //     return 
+  //   }else if(!serviceData.showServiceFicc){
+  //     compliance.form.services_Qy_amount = newVal
+  //   }else{
+  //     compliance.form.services_amount = newVal
+  //   }
+  // })
+
+  watch(()=>props.supplementaryInfo.supplement,(value)=>{
+    if(value){
+      setSupplementaryData()
+    }
+  }) 
+
+  watch(()=>props.detailInfo.contract_register_id,(value)=>{
+    if(value){
+      setComplianceDetail()
+    }
+  }) 
+  
+// --------------------------------------------------------方法
+
+  // 合同类型改变
+  const contractTypeChange=(value)=>{
+    if(!value) return 
+    compliance.form.has_payment = value[0]
+    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(',')
+      // 根据销售选择是否显示套餐
+      // if(ficcSeller && qySeller){
+      //   // 都有
+      //   serviceData.showServiceFicc=true
+      //   serviceData.showServiceQy=true
+      //   if(!compliance.form.contract_register_id){
+      //     // 新增的情况才置空
+      //     compliance.form.services_amount = compliance.form.services_Qy_amount = ''
+      //   }
+      // }else if(!ficcSeller){
+      //   // 没有ficc销售
+      //   serviceData.showServiceFicc=false
+      //   serviceData.showServiceQy=true
+      //   compliance.form.services_Qy_amount = compliance.form.contract_amount
+      //   compliance.form.services_amount =''
+      // }else{
+      //   // 没有权益销售
+      //   serviceData.showServiceFicc=true
+      //   serviceData.showServiceQy=false
+      //   compliance.form.services_amount = compliance.form.contract_amount
+      //   compliance.form.services_Qy_amount =''
+      // }
+    }else{
+      if(compliance.form.contract_register_id){
+        // 编辑的情况下
+        ElMessage.warning('合规套餐类型已定，不允许修改销售数量')
+        cascaderSelectSeller.value = compliance.form.seller_ids.split(',').map(item => +item)
+        return 
+      }
+      // serviceData.showServiceFicc = serviceData.showServiceQy=true
+      // compliance.form.services_amount = compliance.form.services_Qy_amount = ''
+      cascaderSelectSeller.value=[]
+    }
+  }
+  // 合同编号选中
+  const selectContractNo=(value)=>{
+    let selectItem=contractNoInfo.contractNoArray.find(item=>item.contract_code == value)
+    // 获取套餐详情
+    getServiceDetail({contract_id:selectItem.contract_id}).then(res=>{
+      let servivesTemp = res.data?res.data.Service||[]:[]
+      if(selectItem.product_id==1){
+        // 清空权益套餐
+        contractInfo.serviceVarietyShowQy = false
+        contractInfo.serviceTypeQy = 0
+        contractInfo.checkedServiceQy=[]
+        contractInfo.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套餐
+        contractInfo.serviceVarietyShow = false
+        contractInfo.serviceType = 0
+        contractInfo.checkedService=[]
+        contractInfo.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.company_name=selectItem.company_name
+    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.has_payment=selectItem.contract_business_type_int-1
+    compliance.form.actual_pay_companies=selectItem.actual_pay_companies
+    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_code=compliance.form.has_payment?selectItem.relate_contract_code:''
+    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'
+    ])
+    if(sellerArray.value.findIndex(item => item.seller_id == selectItem.seller_id)==-1){
+      // 为-1表示原本的销售已离职
+      contractInfo.form.seller_id = selectItem.seller_name
+      isLeave=true
+    }
+    // serviceData.showServiceFicc = selectItem.product_id == 1
+    // serviceData.showServiceQy = selectItem.product_id == 2
+
+  }
+
+  // 合规登记-提交
+  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(allSellerArray.ficc_list.findIndex(item => item.seller_id == cascaderSelectSeller.value[0])==-1||
+            allSellerArray.rai_list.findIndex(item => item.seller_id == cascaderSelectSeller.value[1])==-1){
+              ElMessage.error('选择的销售不存在或已离职')
+              return 
+            }
+          }else{
+            if(!Number(contractInfo.form.seller_id)){
+              ElMessage.error('选择的销售不存在或已离职')
+              return 
+            }
+          }
+        }
+        compliance.form.services=[]
+        compliance.form.service_amount=[]
+        if(contractInfo.checkedServiceQy.length==0 && contractInfo.checkedService.length==0){
+          ElMessage.warning('请选择套餐')
+          return 
+        }
+        let hasFICCservice=false
+        let hasQYservice=false
+        // FICC
+        if(contractInfo.checkedService.length>0){
+          // if(serviceData.checkedService.length==0){
+          //   ElMessage.warning('请选择FICC套餐')
+          //   return 
+          // }
+          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})
+          contractInfo.form.services_amount = +parseFloat(contractInfo.form.services_amount).toFixed(2) || 0
+        }
+        
+        // 权益
+        if(contractInfo.checkedServiceQy.length>0){
+          // if(serviceData.checkedServiceQy.length==0){
+          //   ElMessage.warning('请选择权益套餐')
+          //   return 
+          // }
+          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})
+          contractInfo.form.services_Qy_amount = +parseFloat(contractInfo.form.services_Qy_amount).toFixed(2) || 0
+        }
+        let servicesAll=0
+        if(hasFICCservice&&hasQYservice){
+          servicesAll = Math.round((contractInfo.form.services_Qy_amount+contractInfo.form.services_amount)*100)/100
+        }else if(hasFICCservice){
+          servicesAll = contractInfo.form.services_amount
+          contractInfo.form.services_Qy_amount=''
+        }else{
+          servicesAll = contractInfo.form.services_Qy_amount
+          contractInfo.form.services_amount=''
+        }
+        compliance.form.contract_amount = +parseFloat(compliance.form.contract_amount).toFixed(2)
+        // compliance.form.services_amount = +parseFloat(compliance.form.services_amount).toFixed(2) || 0
+        // compliance.form.services_Qy_amount = +parseFloat(compliance.form.services_Qy_amount).toFixed(2) || 0
+        // let servicesAll = Math.round((compliance.form.services_Qy_amount+compliance.form.services_amount)*100)/100
+        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.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}).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})=>{
+    if(seller_id && rai_seller_id){
+      // contractInfo.showServiceFicc = contractInfo.showServiceQy=true
+      sellerArray.value = allSellerArray.all_list
+      cascaderSelectSeller.value = seller_ids.split(',').map(item => +item) 
+      if(allSellerArray.ficc_list.findIndex(item => item.seller_id == seller_id)==-1){
+        sellerArray.value.push({
+          seller_id:seller_id,
+          seller_name:seller_name+'-已离职',
+          disabled:true,
+          child:null
+        })
+        isLeave=true
+      }
+      if(allSellerArray.rai_list.findIndex(item => item.seller_id == rai_seller_id)==-1){
+        sellerArray.value.push({
+          seller_id:rai_seller_id,
+          seller_name:rai_seller_name+'-已离职',
+          disabled:true,
+          child:null
+        })
+        isLeave=true
+      }
+    }else if(!seller_id){
+      sellerArray.value=allSellerArray.rai_list
+      if(sellerArray.value.findIndex(item => item.seller_id == rai_seller_id)==-1){
+        // 为-1表示原本的销售已离职
+        contractInfo.form.seller_id = rai_seller_name
+        isLeave=true
+      }
+      // contractInfo.showServiceQy=true
+    }else{
+      sellerArray.value=allSellerArray.ficc_list
+      if(sellerArray.value.findIndex(item => item.seller_id == seller_id)==-1){
+        // 为-1表示原本的销售已离职
+        contractInfo.form.seller_id = seller_name
+        isLeave=true
+      }
+      // contractInfo.showServiceFicc=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
+    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.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]
+    // 销售
+    if(allSellerArray.all_list){
+      // 拿到销售列表后才去做处理
+      sellerOperation(res.data)
+    }else{
+      // 轮询等拿到销售列表后才去做处理，并清除轮询定时器
+      const timer = setInterval(()=>{
+        if(allSellerArray.all_list){
+          sellerOperation(res.data)
+          clearInterval(timer)
+        }
+      },10)
+    }
+    // 销售显示
+    sellerListType.value=props.detailInfo.sellerListType
+    if(sellerListType.value == 3){
+      // serviceData.showServiceFicc = serviceData.showServiceQy=true
+      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" 
+              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)" />
+              <scrollableSelect :loadMoreMethod="loadContractNoMore" v-model="compliance.form.contract_code" placeholder="请搜索合同编号" v-else
+              :searchMethod="contractNoSearch" @change="selectContractNo" useLoading :isLoading="contractNoInfo.contractNoLoading" 
+              >
+                <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" id="contractInfo-companyName">
+              <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 :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">
+              <el-cascader :options="contractTypeArray" placeholder="请选择合同类型" @change="contractTypeChange"
+              v-model="compliance.contractTypeCheck" :clearable="false" key="contractType" >
+              </el-cascader>
+            </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" 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="关联合同" prop="relate_contract_code" v-if="compliance.form.has_payment">
+              <el-input v-model="compliance.form.relate_contract_code" 
+              placeholder="请输入关联合同" />
+            </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-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-companyName,#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;
+      }
+    }
+  }
+  #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,613 @@
+<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:0,
+        seller_name:''
+      }
+    ]
+  })
+  //开票-到款展开和收起
+  const isIandPExpand=reactive({
+    haveInvoice:false,
+    waitInvoice:false
+  })
+  // 货币汇率
+  const rmbRate=ref(1)
+
+  const sellerListType=ref(3)
+  // 开票到款类型 1-单Ficc 2-单权益 3-ficc和权益
+  const InvoiceAndPaymentType=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,type,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:0,seller_name:'',amountDomType:'text',remarkDomType:'text'})
+  }
+
+  // 开票销售更改
+  const invoiceSellerChange=(row,value)=>{
+    if(row.service_product_id==1){
+      row.seller_name = contractInfo.sellerInvoiceListF.find(seller => seller.seller_id==value)?.seller_name
+    }else{
+      row.seller_name = contractInfo.sellerInvoiceListQ.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=='invoice' && !row.seller_id){
+      return '请填写完整信息' 
+    }
+    return 1
+  }
+
+  // 表格添加行
+  const addRow=(row,index)=>{
+    const flag = canAddorEdit(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:0,seller_name:'',amountDomType:'text',remarkDomType:'text'})
+    }else{
+      ElMessage.error(flag)
+    }
+    // if(!(row.amount && row.invoice_date && row.service_product_id)){
+    //   ElMessage.error('请填写完整信息')
+    //   return
+    // }
+    // if(props.type=='开票'){
+    //   if(!row.seller_id){
+    //     ElMessage.error('请填写完整信息')
+    //     return
+    //   }
+    // }
+
+  }
+
+  // 表格编辑行
+  const editRow=(type,row)=>{
+    if(!row.isEdit){
+      // 编辑 -> 确定
+      row.isEdit=true
+      return
+    }
+    const flag = canAddorEdit(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))
+        });
+        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
+    // 开票到款时的展示方式
+    let hasFICC = res.data.service_amount_list.some(item => item.product_id==1)
+    let hasQY = res.data.service_amount_list.some(item => item.product_id==2)
+    if(hasFICC && hasQY){
+      InvoiceAndPaymentType.value = 3
+    }else if(!hasFICC){
+      InvoiceAndPaymentType.value = 2
+    }else{
+      InvoiceAndPaymentType.value = 1
+    }
+    // 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:InvoiceAndPaymentType.value == 3?'':InvoiceAndPaymentType.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.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.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">
+                      <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">
+                      <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('invoice',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

@@ -251,13 +251,13 @@ const statusArray=[{id:1,label:"进行中"},{id:2,label:"已完成"}]
                   <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/财务列表-导入模版（新）.xlsx" download>
+                      <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>
+                      <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>
+                      <a href="https://hzchart.oss-cn-shanghai.aliyuncs.com/static/fms/excel/财务列表权益.xlsx" download>
                         <el-dropdown-item>权益</el-dropdown-item>
                       </a>
                     </el-dropdown-menu>

src/views/financialManagement/registrationPre.vue

@@ -5,6 +5,9 @@ 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()
 
@@ -18,7 +21,6 @@ const router = useRouter()
     tableData:[],
     total:0,
   })
-  
   // -----------------弹窗
   const registrationPreForm=ref(null)
 
@@ -40,7 +42,6 @@ const router = useRouter()
           currency_unit:'CNY',
           register_date:'',
           seller_id:'',
-          seller_name:'',
           remark:''
         }
       ],
@@ -77,14 +78,70 @@ const serviceTypePre=ref(3)
 // 获取套餐列表
 const getServicesListFun=()=>{
   getServiceList().then(res=>{
-    servicesList.value=res.data||[]
+    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=[]
+  cascaderRef.getCheckedNodes().map(node=>{
+    let nodeData = node.data
+    if(!nodeData.service_template_id) return
+    if(nodeData.product_id==2){
+      // 权益 - 直接push每一个级别的对象
+      servicesParam.push({service_template_id:nodeData.service_template_id,title:nodeData.title})
+    }else{
+      // 90000往上都是FICC小套餐品种的Id，特殊处理
+      if(nodeData.service_template_id>=90000){
+        // 真正拿取的是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,chart_permission_ids:''})
+        }else{
+          servicesParam.push({service_template_id:nodeData.service_template_id,title:nodeData.title,value:nodeData.value})
+        }
+      }
+    }
   })
+  for (let i = 0; i < servicesParam.length; i++) {
+    const element = servicesParam[i];
+    if(element.service_template_id==2){
+      element.chart_permission_ids=FICCSmallServiceIds.join(',')
+      break;
+    }
+  }
+  return servicesParam
 }
 
 // 套餐类型更改
 const productIdChange=(value,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)=>{
   if(newVal==1 || newVal==2){
@@ -108,15 +165,15 @@ watch(serviceTypePre,(newVal)=>{
 // -----------------------------------------套餐部分 - 结束
 // -----------------------------------------销售部分 - 开始
 //FICC的销售列表
-const sellerInvoiceListF=ref(null)
+let sellerInvoiceListF=[]
 //权益的销售列表
-const sellerInvoiceListQ=ref(null)
+let sellerInvoiceListQ=[]
 
 //获取销售列表
 const getSellerListFun=()=>{
   getSellerList().then(res=>{
-    sellerInvoiceListF.value = res.data.ficc_list || []
-    sellerInvoiceListQ.value = res.data.rai_list || []
+    sellerInvoiceListF = res.data.ficc_list || []
+    sellerInvoiceListQ = res.data.rai_list || []
   })
 }
 
@@ -165,7 +222,6 @@ const addRegistrationPreRow=()=>{
     currency_unit:'CNY',
     register_date:'',
     seller_id:'',
-    seller_name:'',
     remark:''
   })
 }
@@ -194,11 +250,17 @@ const editRegistrationPre=(row)=>{
     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 =>{
+      if(item.service_product_id==0){
+        // 不能为零，否则回显
+        item.service_product_id=''
+      }
+    })
     dialog.registrationType=row.invoice_type==3?'开票':'到款'
     dialog.title=`编辑${dialog.registrationType}预登记`
     dialog.registrationPreShow=true
     nextTick(()=>{
-      servicesChange(dialog.selectServices,1)
+      serviceType.value=serviceComposition.servicesChange(servicesList.value,dialog.selectServices,selectServicesRef.value).typeValue
     })
   })
 }
@@ -206,6 +268,8 @@ const editRegistrationPre=(row)=>{
 //弹窗关闭动画 回调
 const dialogClosed=()=>{
   dialog.registrationPreForm.company_name=''
+  dialog.registrationPreForm.contract_register_id=''
+  dialog.registrationPreForm.pre_register_id=''
   dialog.registrationPreForm.services=[]
   dialog.registrationPreForm.IorPInfo=[
     {
@@ -214,13 +278,12 @@ const dialogClosed=()=>{
       currency_unit:'CNY',
       register_date:'',
       seller_id:'',
-      seller_name:'',
       remark:''
     }
   ]
   dialog.validityDate=[]
   dialog.selectServices=[]
-  resetDisable(servicesList.value)
+  serviceComposition.resetDisable(servicesList.value)
   setTimeout(()=>{
     registrationPreForm.value.clearValidate()
   },0)
@@ -228,38 +291,7 @@ const dialogClosed=()=>{
 
 // 提交
 const submitForm=()=>{
-  // 处理选中套餐的数据格式
-  let servicesParam=[]
-  let FICCSmallServiceIds=[]
-  selectServicesRef.value.getCheckedNodes().map(node=>{
-    let nodeData = node.data
-    if(!nodeData.service_template_id) return
-    if(nodeData.product_id==2){
-      // 权益
-      servicesParam.push({service_template_id:nodeData.service_template_id,title:nodeData.title})
-    }else{
-      // 90000往上都是FICC小套餐品种的Id，特殊处理
-      if(nodeData.service_template_id>=90000){
-        // 真正拿取的是chart_permission_id
-        if(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,chart_permission_ids:''})
-        }else{
-          servicesParam.push({service_template_id:nodeData.service_template_id,title:nodeData.title,value:nodeData.value})
-        }
-      }
-    }
-  })
-  for (let i = 0; i < servicesParam.length; i++) {
-    const element = servicesParam[i];
-    if(element.service_template_id==2){
-      element.chart_permission_ids=FICCSmallServiceIds.join(',')
-      break;
-    }
-  }
+  const serviceData=serivcesDataHandler(selectServicesRef.value)
   let params={
     contract_register_id:dialog.registrationPreForm.contract_register_id||0,
     pre_register_id:dialog.registrationPreForm.pre_register_id||0,
@@ -268,8 +300,9 @@ const submitForm=()=>{
     start_date:dialog.registrationPreForm.start_date,
     end_date:dialog.registrationPreForm.end_date,
     list:dialog.registrationPreForm.IorPInfo,
-    services:servicesParam,
+    services:serviceData,
   }
+  // 化''为0
   params.list.forEach(item =>{
     item.amount = parseFloat(item.amount)
     item.seller_id=item.seller_id||0
@@ -362,8 +395,27 @@ const preIorP=(row)=>{
     preDialog.selectServices = [...res.data.services.map(item => item.service_template_id),...res.data.serviceTemplateIds]
     preDialog.title=row.invoice_type==3?'预到款':'预开票'
     preDialog.show=true
+    
     nextTick(()=>{
-      servicesChange(preDialog.selectServices,2)
+      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 || !(hasFICCService||hasQYService)){
+          serviceTypePre.value=3
+        }else if(hasFICCService){
+          serviceTypePre.value=1
+        }else{
+          serviceTypePre.value=2
+        }
+      }
     })
   })
 }
@@ -371,38 +423,13 @@ const preIorP=(row)=>{
 const submitPreForm=()=>{
     preFormRef.value.validate((valid)=>{
     if(valid){
-      // console.log(preDialog.preForm);
-          // 处理选中套餐的数据格式
-      let servicesParam=[]
-      let FICCSmallServiceIds=[]
-      selectServicesPreRef.value.getCheckedNodes().map(node=>{
-        let nodeData = node.data
-        if(!nodeData.service_template_id) return
-        if(nodeData.product_id==2){
-          // 权益
-          servicesParam.push({service_template_id:nodeData.service_template_id,title:nodeData.title})
-        }else{
-          // 90000往上都是FICC小套餐品种的Id，特殊处理
-          if(nodeData.service_template_id>=90000){
-            // 真正拿取的是chart_permission_id
-            if(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,chart_permission_ids:''})
-            }else{
-              servicesParam.push({service_template_id:nodeData.service_template_id,title:nodeData.title,value:nodeData.value})
-            }
-          }
-        }
-      })
-      for (let i = 0; i < servicesParam.length; i++) {
-        const element = servicesParam[i];
-        if(element.service_template_id==2){
-          element.chart_permission_ids=FICCSmallServiceIds.join(',')
-          break;
-        }
+      let serviceData;
+      if(preDialog.title=='预开票'){
+        // 预开票可能会修改套餐，需要重组套餐数据
+        serviceData=serivcesDataHandler(selectServicesPreRef.value)
+      }else{
+        // 预到款不需要重组套餐数据
+        serviceData=preDialog.preForm.services
       }
       preDialog.preForm.amount = parseFloat(preDialog.preForm.amount)
       let params={
@@ -421,7 +448,7 @@ const submitPreForm=()=>{
           seller_id:preDialog.preForm.seller_id||0,
           service_product_id:preDialog.preForm.service_product_id,
         }],
-        services:servicesParam||[]
+        services:serviceData
       }
       preRegistrationSave(params).then(res=>{
         preDialog.show=false
@@ -445,7 +472,7 @@ const preDialogClosed=()=>{
   },
   preDialog.validityDate=[]
   preDialog.selectServices=[]
-  resetDisable(servicesList.value)
+  serviceComposition.resetDisable(servicesList.value)
   setTimeout(()=>{
     preFormRef.value.clearValidate()
   },0)
@@ -478,163 +505,6 @@ const currencyUnitChange=(value)=>{
 }
 
 
-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]
-
-// 套餐选择更改
-const servicesChange=(value,type)=>{
-  // console.log(value,type);
-  // type---> 1-预登记弹窗 2-预开票/预到款弹窗
-
-  // 权益大套餐/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
-    }
-  }
-  // FICC大套餐
-  if(value.includes(1)){
-    value=value.filter(it => !FICCSmallServiceId.includes(it))
-  }if(value.includes(2)){
-    // FICC小套餐
-    value=value.filter(it => it!=1)
-  }
-// console.log(value);
-  // 行业套餐
-  hasQySmall=false
-  if(value.some(it => [19,20,21,22,23,24,25,26,27].includes(it))){
-    hasQySmall=true
-  }
-
-  // FICC大套餐
-  hasFiccBig=false
-  // FICC小套餐
-  hasFiccSmall=false
-  if(value.some(it => FICCSmallServiceId.includes(it))){
-    hasFiccSmall=true
-  }
-  if(value.includes(1)){
-    hasFiccBig=true
-  }
-  let checkedNodes;
-  if(type==1){
-    checkedNodes= selectServicesRef.value.getCheckedNodes()
-  }else{
-    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 || !(hasFICCService||hasQYService)){
-    type==1?serviceType.value=3:serviceTypePre.value=3
-  }else if(hasFICCService){
-    type==1?serviceType.value=1:serviceTypePre.value=1
-  }else{
-    type==1?serviceType.value=2:serviceTypePre.value=2
-  }
-  // console.log(checkedNodes);
-  
-  setDisable(servicesList.value)
-  if(type==1){
-    dialog.registrationPreForm.services= dialog.selectServices= value
-  }else{
-    preDialog.preForm.services=preDialog.selectServices=value
-  }
-  
-}
-// 套餐禁用处理
-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 => {
-    if(!element.service_template_id){
-      resetDisable(element.children)
-      return 
-    }
-    element.disabled=false
-    if(element.service_template_id==10){
-      resetDisable(element.children)
-    }
-  });
-}
-
 // 切换每页的数量
 const changePageSize=(pageSize)=>{
   placemenetPre.searchParams.page_size = pageSize
@@ -730,7 +600,7 @@ placementPreList()
         </el-table-column>
         <el-table-column label="约定有效期" width="210" prop="start_date">
           <template #default="{row}">
-            {{(row.start_date+' 至 '+row.end_date)}}
+            {{row.start_date?(row.start_date+' 至 '+row.end_date):''}}
           </template>
         </el-table-column>
         <el-table-column label="套餐" prop="services" show-overflow-tooltip></el-table-column>
@@ -894,7 +764,8 @@ placementPreList()
             </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)"
+          <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;">

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;
+    }
+  }
+}