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

<script setup>
  import '../style/contractRegistration.scss'
  import {ElMessage} from 'element-plus'
  import {registerInvoice,registerPayment} from '@/api/financialMana'
  import {intervalDataRequest} from '@/utils/common-methods'
  import {moneyFormatter} from '@/utils/common-methods'

  const props=defineProps({
    // 权限类型
    operationtype:{
      type:String,
      default:'compliance'
    },
    // 货币数据
    currencyList:{
      type:Array,
      default:()=>[]
    },
    // 类型 '开票' '到款 '
    type:{
      type:String,
      default:'开票'
    },
    // 销售数据
    sellerData:{
      type:Object,
      default:()=>{}
    },
    // 详情数据
    IPDetailInfo:{
      type:Object,
      default:()=>{}
    }
  })
  const emits=defineEmits(['submitSuccess'])

  // 开票/到款记录表单
  const iandPFormRef=ref(null)
  // 货币单位
  const IandP=reactive({
    currencyUnit:'',
    moneyData:{
      // 金额
      haveMoney:0,
      waitMoney:0,
      // FICC金额
      haveMoneyFICC:0,
      waitMoneyFICC:0,
      allMoneyFICC:0,
      // 权益金额
      haveMoneyQY:0,
      waitMoneyQY:0,
      allMoneyQY:0,
    }
  })
  // ---------------开票/到款金额信息
  const amountForm=reactive({
    amountData:[
      // {
      //   service_product_id:'',
      //   origin_amount:'',
      //   amount:'',
      //   invoice_date:'',
      //   remark:'',
      //   // dom的类型
      //   amountDomType:'text',
      //   remarkDomType:'text',
      //   seller_id:'',
      //   seller_name:'',
        // hasRelativeSeller // 是否有对应 开票/到款 的记录销售
      // }
    ],
    // 已经登记的开票/到款 开票登记的时候是到款，到款登记的时候是开票
    submittedAmountData:[]
  })
  // 销售离职验证
  // const sellerValidator=(row,callback)=>{
  //   // console.log(row);
  //   console.log(row);
  //   if(row.seller_name.indexOf('已离职')!=-1){
  //     ElMessage.error(row.seller_name)
  //     return 
  //   }else{
  //     callback()
  //   }
  // }

  //开票-到款展开和收起
  const isIandPExpand=reactive({
    haveInvoice:false,
    waitInvoice:false
  })
  

  // 货币汇率
  const rmbRate=ref(1)

  const sellerListType=ref(3)
  // 选择销售的联级选择器的ref，主要为了获取ID的同时获取名字
  const sellerCascaderRefs=ref([])
  // ------------------计算
  // 只有权益销售的数据
  const onlyQYSellerData=computed(()=>{
    return props.sellerData.all_list.filter(item => item.seller_id==5)[0].child
  })


  // -----------------------------监听
  // 金额-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
  })
// ------------------------------------------方法
  // 切换套餐类型
  const productIdChange=(value,row)=>{
    // 清空销售
    if(props.type=='开票'){
      row.seller_id=''
      row.seller_name=''
    }
    if(!row.origin_amount) return
      // 开票
    if(value==1){
      //切换成FICC套餐类型
      IandP.moneyData.haveMoneyFICC += row.origin_amount
      IandP.moneyData.haveMoneyQY -= row.origin_amount
    }else{
      //切换成QY套餐类型
      IandP.moneyData.haveMoneyFICC -= row.origin_amount
      IandP.moneyData.haveMoneyQY += row.origin_amount
    }
    IandP.moneyData.haveMoneyFICC = Math.round(IandP.moneyData.haveMoneyFICC*100)/100
    IandP.moneyData.haveMoneyQY = Math.round(IandP.moneyData.haveMoneyQY*100)/100
  }

  // 销售更改
  const sellerChange=(row,index)=>{
    // if(row.service_product_id==1){
    //   row.seller_name = [...props.sellerData.ficc_list,...props.sellerData.rai_list].find(seller => seller.seller_id==value)?.seller_name
    // }else{
    //   row.seller_name = props.sellerData.rai_list.find(seller => seller.seller_id==value)?.seller_name
    // }
    row.seller_name=sellerCascaderRefs.value[index]?.inputValue
  }

  // 判断表格当前行的信息是否填写完整
  const canAddorEdit=(type,row)=>{
    if(!(row.amount && row.invoice_date && row.service_product_id)){
      return '请填写完整信息'
    }
    if(type=='开票' && !row.seller_id){
      return '请填写完整信息' 
    }
    return 1
  }

  const setRowData=()=>{
    /**
     * 添加数据 根据 开票/到款记录的套餐类型和序号对应
     * 对应的上，套餐类型和销售 跟对应的开票/到款记录一样，没有为空
     * 主要是 需要添加的数据 是对应的哪一条记录
     */
    let serviceProductId=sellerListType.value == 3?'':sellerListType.value
    let sellerId,sellerName='';
    // 已经找到对应记录的 次数 FICC,权益
    let hasFindCount=[0,0]
    // 存在的记录条数 FICC，权益
    let allCount=[amountForm.amountData.filter(item => item.service_product_id==1).length,
    amountForm.amountData.filter(item => item.service_product_id==2).length]
    // 可编辑情况下
    if(props.operationtype=='invoice'&&props.type=='开票' || props.operationtype=='placement'&&props.type=='到款'){
      for (let i = 0; i < amountForm.submittedAmountData.length; i++) {
        const element = amountForm.submittedAmountData[i];
        // 符合条件，继续找
        if(amountForm.amountData.some(it => it.service_product_id == element.service_product_id) &&
         hasFindCount[element.service_product_id-1]<allCount[element.service_product_id-1]){
          hasFindCount[element.service_product_id-1]++
          continue
        } 
        // 不符合条件，那需要添加的数据就 对应这一条
        serviceProductId=element.service_product_id
        sellerId=element.seller_id || ''
        sellerName=element.seller_name || ''
        // 找到第一条就break掉
        break
      }
    }
    // 判断销售是否离职
    // if(sellerId){
    //   if(serviceProductId==1){
    //     // FICC销售和权益销售都要判断，并且页面呈现为级联选择器
    //     if([...props.sellerData.ficc_list,...props.sellerData.rai_list]
    //     .findIndex(seller => seller.seller_id==sellerId)==-1){
    //       props.sellerData.all_list.push({
    //         seller_id:sellerId,
    //         seller_name:sellerName+'-已离职',
    //         disabled:true,
    //         child:null
    //       })
    //       sellerName=sellerName+'-已离职'
    //     }
    //     // console.log(sellerId);
    //   }else{
    //     if(props.sellerData.rai_list.findIndex(seller => seller.seller_id==sellerId)==-1){
    //       sellerId = sellerName+'-已离职'
    //       sellerName=sellerName+'-已离职'
    //     }
    //   }
    // }
    amountForm.amountData.push({
      service_product_id:serviceProductId,              
      origin_amount:'',
      amount:'',
      is_pre_pay:0,
      invoice_date:'',
      remark:'',
      seller_id:sellerId,
      seller_name:sellerName,
      // 到款有对应的销售需要禁用
      hasRelativeSeller:!!sellerId,
      amountDomType:'text',
      remarkDomType:'text'
    })
  }

  // 表格添加行
  const addRow=(row,index)=>{
    const flag = canAddorEdit(props.type,row)
    if(flag==1){
      setRowData()
      // amountForm.amountData.push({service_product_id:sellerListType.value == 3?'':sellerListType.value,origin_amount:'',
      // amount:'',invoice_date:'',remark:'',seller_id:'',seller_name:'',amountDomType:'text',remarkDomType:'text'})
    }else{
      ElMessage.error(flag)
    }
  }

  // 表格编辑行
  const editRow=(row)=>{
    if(!row.isEdit){
      // 编辑 -> 确定
      row.isEdit=true
      if(row.service_product_id==0){
        row.service_product_id=''
      }
      return
    }
    const flag = canAddorEdit(props.type,row)
    if(flag==1){
      // 确定 -> 编辑
      row.isEdit=false
    }else{
      ElMessage.error(flag)
    }
  }
  // 表格删除行
  const deleteRow=(row,index)=>{
    let haveSalesman=false
    if(props.type=='开票'){
      if(amountForm.amountData[index].seller_id) haveSalesman=true
    }else{
      if(row.is_pre_pay==1){
        // 预到款登记
        ElMessage.error('该笔到款是预到款，不允许删除！')
        return 
      }
    }
    if(amountForm.amountData[index].origin_amount=='' && amountForm.amountData[index].amount=='' 
    && (amountForm.amountData[index].service_product_id=='' || sellerListType.value != 3)
    && amountForm.amountData[index].invoice_date=='' && !haveSalesman){
      // 没有内容 直接删除
      amountForm.amountData.splice(index,1)
    }else{
      ElMessageBox.confirm(`是否删除该条${props.type}记录？`,
      '提示',    
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(res=>{
        // 有金额才进行删除后的运算
        if(amountForm.amountData[index].origin_amount!=''){
          amountForm.amountData.splice(index,1)
          let money=0                                           
          amountForm.amountData.map(item =>{
            if(item.service_product_id == row.service_product_id){
              money+=parseFloat(item.origin_amount) || 0
            }
            // console.log(money);
          })
          // 保留两位小数、防止计算时精度丢失
          money=Math.round(money*100)/100
          if(row.service_product_id==1){
            IandP.moneyData.haveMoneyFICC=money
          }else{
            IandP.moneyData.haveMoneyQY=money
          }
        }else{
          amountForm.amountData.splice(index,1)
        }
      }).catch(()=>{})
    }
  }
  // 金额改变
  const moneyChange=(value,index,row)=>{ 
    // console.log(value);
    let numerValue=parseFloat(value)

    if(!numerValue&&numerValue!=0&&value){
      amountForm.amountData[index].origin_amount=''
      ElMessage.error('请输入数字')
      return
    }
    // 如果输入不是 以.结尾&&只有一个. 或者 不是零结尾的话，就赋值为转为成数字后的值
    // 考虑到类似12.02的情况
    if(!((value.endsWith('.') && value.indexOf('.')==(value.length-1)) || 
    (value.endsWith('0') && value.indexOf('.')==(value.length-2)))&&numerValue){
      amountForm.amountData[index].origin_amount=numerValue
    }
    amountForm.amountData[index].amount=amountForm.amountData[index].origin_amount/rmbRate.value

    let money=0
    amountForm.amountData.map(item =>{
      if(item.service_product_id == row.service_product_id){
        money+=Math.round(item.origin_amount*100)/100 || 0
      }
    })
    // 保留两位小数、防止计算时精度丢失
    money=Math.round(money*100)/100
    
    if(row.service_product_id==1){
      IandP.moneyData.haveMoneyFICC=money
    }else{
      IandP.moneyData.haveMoneyQY=money
    }
  }
  // 点击输入框后 文本切换成输入框
  const iandPInput=(row,prop)=>{
    row[prop]='input'
  }
  // 金额输入框失去焦点
  const iandPAmountBlur=(row)=>{
    if(row.origin_amount){
      row.origin_amount= Math.round(parseFloat(row.origin_amount)*100)/100
    }
    row.amountDomType ='text'
  }
  
  let elMessageDom=null

  const selectVisible=(value)=>{
    if(value){
      if(!elMessageDom){
        elMessageDom=ElMessage.warning('请选择套餐类型')
        setTimeout(()=>{
          elMessageDom=null
        },1000)
      }
    }
  }

  // 开票/到款登记保存
  const iandPSubmit=()=>{
    iandPFormRef.value.validate(valid=>{
      if(valid){
        // 转化
        amountForm.amountData.forEach(element => {
          element.origin_amount = parseFloat(element.origin_amount)
          element.amount = parseFloat(element.amount.toFixed(2))
          element.seller_id = element.seller_id || 0
          element.service_product_id = element.service_product_id || 0
        });
        let invoice_type = props.type=='开票'?1:2
        let registerprop = props.type=='开票'?registerInvoice:registerPayment
        let param={
          contract_register_id:props.IPDetailInfo.contract_register_id,
          invoice_type,
          amount_list:amountForm.amountData,
        }
        registerprop(param).then(res=>{
          let messageHint=ElMessage.success(props.type+'登记成功')
          setTimeout(()=>{
            messageHint.close()
            emits('submitSuccess')
          },1000)
        })
      }
    })
  }

  const setIandPDetail=()=>{
    sellerListType.value = props.IPDetailInfo.sellerListType
    rmbRate.value=props.IPDetailInfo.rmb_rate
    // amountForm.amountData[0].service_product_id = sellerListType.value == 3?'':sellerListType.value

    // FICC套餐总金额 = FICC套餐剩余开篇金额
    IandP.moneyData.waitMoneyFICC= IandP.moneyData.allMoneyFICC =
    props.IPDetailInfo.service_amount_list.find(item => item.product_id==1)?props.IPDetailInfo.service_amount_list.find(item => item.product_id==1).service_amount:0
    // 权益套餐总金额 = 权益套餐剩余开篇金额
    IandP.moneyData.waitMoneyQY= IandP.moneyData.allMoneyQY =
    props.IPDetailInfo.service_amount_list.find(item => item.product_id==2)?props.IPDetailInfo.service_amount_list.find(item => item.product_id==2).service_amount:0
    let amoutList = []

    // 分理处已登记的开票/到款
    if(props.type=='开票'){
      amoutList=props.IPDetailInfo.invoice_list
      amountForm.submittedAmountData = props.IPDetailInfo.payment_list
    }else{
      amountForm.submittedAmountData =  props.IPDetailInfo.invoice_list
      amoutList= 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
      })
    })
    setRowData()
    // }
    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)
  }
  watch(()=>props.IPDetailInfo.contract_register_id,(value)=>{
    if(value){
      setIandPDetail()
    }
  },{ immediate: true }) 

  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;display: flex;align-items: center;" 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 style="display: flex;align-items: center;">剩余{{ 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="setRowData" 
            v-if="amountForm.amountData.length==0">添加{{ type }}信息</el-button>
          </div>
          <el-form ref="iandPFormRef" :model="amountForm" 
          :disabled="operationtype!='invoice'&&type=='开票' || operationtype!='placement'&&type=='到款'">
            <el-table :data="amountForm.amountData" border v-if="amountForm.amountData.length>0" style="width: 100%;"> 
              <el-table-column label="序号" width="80" align="center">
                <template #default="{row,$index}">
                  {{$index+1}}
                </template>
              </el-table-column>
              <el-table-column label="套餐类型" width="160" align="center" prop="service_product_id" v-if="sellerListType==3">
                <template #header>
                  <span style="color: var(--dangerColor);">*</span>套餐类型
                </template>
                <template #default="{row,$index}">
                  <el-form-item :prop="`amountData.${$index}.service_product_id`" :show-message="false" v-show="!row.invoice_id || row.isEdit"
                  :rules="{required:true,message:()=>{ ElMessage.error('套餐类型不能为空')},trigger:'change'}">
                    <el-select v-model="row.service_product_id" style="width: 124px;" @change="value=> productIdChange(value,row)"
                    placeholder="请选择套餐" filterable>
                      <el-option label="FICC套餐" :value="1"></el-option>
                      <el-option label="权益套餐" :value="2"></el-option>
                    </el-select>
                  </el-form-item>
                  <span v-show="row.invoice_id && !row.isEdit">{{ row.service_product_id?row.service_product_id==1?'FICC套餐':'权益套餐' : '--' }}</span>
                </template>
              </el-table-column>
              <el-table-column :label="type+'金额'" width="160" show-overflow-tooltip  align="center" prop="origin_amount">
                <template #header>
                  <span style="color: var(--dangerColor);">*</span>{{ type }}金额
                </template>
                <template #default="{row,$index}">
                  <el-form-item :prop="`amountData.${$index}.origin_amount`" :show-message="false" v-show="!row.invoice_id || row.isEdit"
                  :rules="{required:true,message:()=>{ ElMessage.error(type+'金额不能为空')},trigger:'blur'}">
                    <label :for="(type=='开票'?'invoice':'payment')+$index+'origin_amount'" style="cursor: pointer;" 
                    :style="{color:row.origin_amount?'var(--secondaryTextColor)':'var(--hitTextColorOne)'}"
                    v-show="row.amountDomType=='text'" @click="iandPInput(row,'amountDomType')">
                      {{ row.origin_amount ? parseFloat(row.origin_amount).toFixed(2): '单击此处输入金额'}}
                    </label>
                    <el-input v-model.trim="row.origin_amount" :id="(type=='开票'?'invoice':'payment')+$index+'origin_amount'" style="width: 124px;" 
                    v-show="row.amountDomType=='input'" @blur="iandPAmountBlur(row)"
                      placeholder="请输入金额" @input="(e)=>moneyChange(e,$index,row)"></el-input>
                  </el-form-item>
                  <span  v-show="row.invoice_id && !row.isEdit">
                    {{ row.origin_amount?parseFloat(row.origin_amount).toFixed(2):'--' }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="换算金额（元）" show-overflow-tooltip width="160" align="center" prop="amount">
                <template #default="{row,$index}">
                  <span v-if="row.amount">{{ row.amount.toFixed(2)}}</span>
                  <span v-else style="color: var(--hitTextColorOne);">{{type}}金额为空</span>
                </template>
              </el-table-column>
              <el-table-column :label="type+'日'" width="140" 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: 120px;"
                    placeholder="请选择日期" value-format="YYYY-MM-DD" :clearable="false" ></el-date-picker>
                  </el-form-item>
                  <span v-show="row.invoice_id && !row.isEdit">{{ row.invoice_date || '--' }}</span>
                </template>
              </el-table-column >
              <el-table-column label="销售" width="160" align="center" prop="seller_id">
                <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" :disabled="type=='到款'&& row.hasRelativeSeller" 
                    style="width: 143px;" 
                     filterable  >
                      <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-cascader v-if="row.service_product_id"
                    :options="row.service_product_id==1?sellerData.all_list:onlyQYSellerData" v-model="row.seller_id"
                    :ref="el => sellerCascaderRefs[$index]=el" placeholder="请选择销售" @change="()=> sellerChange(row,$index)"
                    :props="{label:'seller_name',value:'seller_id',children:'child',emitPath:false}" 
                    :show-all-levels="false" filterable class="seller-cascader" :disabled="type=='到款'&& row.hasRelativeSeller"></el-cascader>
                    <!-- <el-select v-model="row.seller_id" style="width: 143px;"
                    :ref='`amountData-service_product_id${$index}`' :disabled="type=='到款'&& row.hasRelativeSeller"
                    placeholder="请选择权益销售" filterable  v-else-if="row.service_product_id==2" @change="(value)=> sellerChange(row,value)">
                      <el-option :label="item.seller_name" :value="item.seller_id" 
                      v-for="item in sellerData.rai_list" :key="item.seller_id">
                      </el-option>
                    </el-select> -->
                    <el-select v-model="row.seller_id" style="width: 143px;" :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="(type=='开票'?'invoice':'payment')+$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="(type=='开票'?'invoice':'payment')+$index+'remark'" style="width: 124px;" placeholder="请输入备注" 
                    v-show="row.remarkDomType=='input'" @blur="row.remarkDomType='text'"/>
                  </el-form-item>
                  <span v-show="row.invoice_id && !row.isEdit">{{row.remark || '--'}}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="120" align="center" 
              v-if="operationtype=='invoice'&&type=='开票' || operationtype=='placement'&&type=='到款'">
                <template #default="{row,$index}">
                  <span class="table-operation-button" v-show="$index==amountForm.amountData.length-1" 
                  @click="addRow(row,$index)" style="margin-right: 10px;">添加</span>
                  <!-- <span class="table-operation-button" style="margin-right: 6px;" v-show="row.invoice_id" 
                  @click="editRow(row)">{{ row.isEdit?'确定':'编辑' }}</span> -->
                  <span class="table-operation-button" style="color: var(--dangerColor);" 
                  @click="deleteRow(row,$index)">删除</span>
                </template>
              </el-table-column>
            </el-table>
          </el-form>
        </div>
      </div>
    </div>
</template>
  
<style lang="scss" scoped>
  
</style>
<style lang="scss">
#contractProgress-InvoiceAndPayment{
  .el-table{
    .cell{
      padding: 0 10px;
    }
  }
  .el-input__wrapper{
    width: 120px;
  }
  .seller-cascader{
    .el-input__wrapper{
      width: 140px;
    }
  }
  .el-form-item{
    margin-bottom: 0;
    .el-form-item__content{
      justify-content: center;
    }
  }
}
</style>