需求池 - 财务系统，财务列表合规登记时，若合同类型时新签、续约、补充协议时，有代付合同时，显示代付方信息 待联调

src/directives/index.js

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

src/directives/modules/overflow-tooltip.js

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

src/views/financialManagement/contractProgress.vue

@@ -56,6 +56,7 @@
       contract_amount:'',
       contract_type:'',
       has_payment:'',
+      payment_companys:'',
       relate_contract_code:'',
       actual_company_name:'',
       sign_date:'',
@@ -86,6 +87,7 @@
       }],
       contract_type:{required:true,message:'合同类型不能为空',trigger:'change'},
       has_payment:{required:true,message:'请选择是否是代付',trigger:'change'},
+      // payment_companys:,
       actual_company_name:{required:true,message:'实际使用方不能为空',trigger:'blur'}
     },
     moneyData:{
@@ -295,6 +297,7 @@
       contract_amount:'',
       contract_type:'',
       has_payment:'',
+      payment_companys:'',
       relate_contract_code:'',
       actual_company_name:'',
       sign_date:'',
@@ -318,13 +321,16 @@
   }
   // 合同类型改变
   const contractTypeChange=(value)=>{
-    // console.log(value);
     if(value!=3){
+      // 非代付合同
       contractInfo.form.relate_contract_code=''
     }else{
+      // 代付合同
       contractInfo.form.has_payment=''
+      contractInfo.form.payment_companys=''
     }
     if(value!=4 && value!=3){
+      // 新签、续约
       contractInfo.form.actual_company_name=''
     }
   }
@@ -399,6 +405,8 @@
     contractInfo.form.contract_amount=selectItem.price
     contractInfo.form.seller_name=selectItem.seller_name
     contractInfo.form.seller_id=selectItem.seller_id
+    contractInfo.form.has_payment=selectItem.has_payment
+    contractInfo.form.payment_companys=selectItem.payment_companys
     contractInfo.form.contract_type=selectItem.contract_type_key
     contractInfo.form.relate_contract_code=selectItem.relate_contract_code
     contractInfo.form.actual_company_name=selectItem.actual_company_name
@@ -408,6 +416,14 @@
       'start_date','contract_amount','relate_contract_code','actual_company_name'
     ])
   }
+
+  // 有无代付改变
+  const hasPaymentChange=(value)=>{
+    if(!value){
+      contractInfo.form.payment_companys=""
+    }
+  }
+
   // 销售选中
   const selectSeller=(value)=>{
     contractInfo.form.seller_name=contractInfo.sellerList.find(item => item.admin_id==value).real_name
@@ -768,6 +784,7 @@
         contract_amount:res.data.contract_amount,
         contract_type:res.data.contract_type,
         has_payment:res.data.has_payment,
+        payment_companys:res.data.payment_companys,
         relate_contract_code:res.data.relate_contract_code,
         actual_company_name:res.data.actual_company_name,
         sign_date:res.data.sign_date,
@@ -943,11 +960,21 @@
                         </el-select>
                       </el-form-item>
                       <el-form-item label="是否代付" prop="has_payment" v-if="[1,2,4].includes(contractInfo.form.contract_type)">
-                        <el-radio-group v-model="contractInfo.form.has_payment" style="min-width:286px;width: 15vw;">
+                        <el-radio-group v-model="contractInfo.form.has_payment" @change="hasPaymentChange"
+                        style="min-width:286px;width: 15vw;" :disabled="contractInfo.form.contract_source==0?false:true">
                           <el-radio :label="1">是</el-radio>
                           <el-radio :label="0">否</el-radio>
                         </el-radio-group>
                       </el-form-item>
+                      <el-form-item label="代付方" prop="payment_companys" v-if="contractInfo.form.has_payment==1"
+                      :rules="contractInfo.form.contract_source==0?{required:true,message:'代付方信息不能为空',trigger:'blur'}:{}">
+                        <div v-overflowTooltip="'#overflow-input'">
+                          <el-tooltip placement="top" :content="contractInfo.form.payment_companys" :trigger-keys="['Enter']" >
+                            <el-input v-model="contractInfo.form.payment_companys" :disabled="contractInfo.form.contract_source==0?false:true"
+                            placeholder="请输入代付方信息" id="overflow-input" />
+                          </el-tooltip>
+                        </div>
+                      </el-form-item>
                       <el-form-item label="实际使用方" prop="actual_company_name" v-if="contractInfo.form.contract_type==3">
                         <el-input v-model="contractInfo.form.actual_company_name"
                         placeholder="请输入实际使用方" />