财务管理系统1.1 待联调

src/directives/modules/buttonPermisson.js

@@ -1,18 +1,53 @@
 // 权限指令
+/**
+ * 接受参数类型 - 字符串-单个权限
+ *             - 数组-多个权限 
+ * 数组最后一个参数为类型：or-只要一个满足 and-全部都满足
+ * 最后一个参数类型不为or或者and，类型默认为or，且会取全部的数组
+ * 
+ */
 import store from "@/store"
 
 export const permission={
   mounted(el,binding) {
     let {value} = binding
+    // 拿出所有按钮的code
+    let buttonCodes = store.getters.permissionButtons.map(item => item.button_code)
     if(value && typeof(value)=='string'){
-      // 拿出所有按钮的code
-      let buttonCodes = store.getters.permissionButtons.map(item => item.button_code)
+      // 字符类型
       if(!buttonCodes.includes(value)){
         // 没有权限，删除dom
         el.parentNode && el.parentNode.removeChild(el)
       }
+    }else if(Array.isArray(value)){
+      // 数组类型
+      /**
+       * 权限类型 type
+       * or-只要一个满足 and-全部都满足
+       */
+      let type;
+      let hasType=['or','and'].includes(value[value.length-1].toLocaleLowerCase())
+      if(hasType){
+        //参数中有标明type
+        type=value[value.length-1].toLocaleLowerCase()
+        // 去掉最后一个权限类型参数
+        value.pop()
+        // console.log(value,true);
+        let operation = type=='or'?'some':'every'
+        if(!value[operation](item => buttonCodes.includes(item))){
+          // 没有权限，删除dom
+          el.parentNode && el.parentNode.removeChild(el)
+        }
+      }else{
+        type='or'
+        // console.log(value,false);
+        if(!value.some(item => buttonCodes.includes(item))){
+          // 没有权限，删除dom
+          el.parentNode && el.parentNode.removeChild(el)
+        }
+      }
     }else{
-      throw new Error('permission指令只接受字符串类型')
+      throw new Error('permission指令参数类型错误')
     }
 
   },

src/views/financialManagement/components/permissionDia.vue

@@ -0,0 +1,127 @@
+<script setup>
+
+import {getPermissionList} from '@/api/crm'
+  const props=defineProps({
+    visible:{
+      type:Boolean,
+      default:false
+    },
+    hasCheckedPermission:{
+      type:Array,
+      default:()=>[]
+    },
+    // view - 查看 edit - 编辑
+    type:{
+      type:String,
+      default:'view'
+    }
+  })
+
+  const emits=defineEmits(['update:visible','selectFinish'])
+
+  const permissionDia=reactive({
+    permissionList:[],
+    permissionChecked:[]
+  })
+
+  watch(()=>props.visible,(newVal)=>{
+    console.log(newVal);
+    if(newVal){
+      permissionDia.permissionChecked=[...props.hasCheckedPermission]
+    }
+  })
+
+  // -------method
+  const getPermissionData=()=>{
+    // 获得所有的权限
+    getPermissionList().then(res=>{
+      let arr = res.data.List || []
+      arr.forEach((item) => {
+        item.check_list = [];
+        item.checked = false;
+        item.indeterminate = false;
+      });
+      permissionDia.permissionList=arr
+    })
+  }
+  const permissionCheckedChange=(e)=>{
+    console.log(e);
+    e.checked = e.check_list.length == e.items.length
+    e.indeterminate = e.check_list.length>0 && e.check_list.length < e.items.length
+  }
+  const permissionAllChecked=(e)=>{
+    console.log(e);
+    let arr = e.items.map((item) => {
+      return item.chart_permission_id;
+    });
+    e.check_list = e.checked ? arr : [];
+    e.indeterminate = false;
+  }
+
+  const submit=()=>{
+    
+    emits('selectFinish',permissionDia.permissionChecked)
+    closeDia()
+  }
+
+  const closeDia=()=>{
+    emits('update:visible',false)
+  }
+
+  // --------------created
+  getPermissionData()
+</script>
+
+
+<template>
+    <div id="permission-container">
+      <el-dialog title="选择品种" :model-value="props.visible"
+       :close-on-click-modal="false" width="940" >
+       <div class="variety-box" >
+        <div v-for="item in permissionDia.permissionList" class="variety-item" :key="item.classify_name" >
+            <el-checkbox v-model="item.checked" :indeterminate="item.check_list.length>0 && item.check_list.length < item.items.length" 
+              @change="permissionAllChecked(item)" :disabled="props.type=='view'">
+            {{item.classify_name}}：</el-checkbox>
+            <el-checkbox-group v-model="item.check_list" @change="permissionCheckedChange(item)" :disabled="props.type=='view'">
+              <el-checkbox :label="it.chart_permission_id" v-for="it in item.items" :key="it.chart_permission_id">{{it.permission_name}}</el-checkbox>
+            </el-checkbox-group>
+          </div>
+        </div>
+        <template #footer>
+          <div class="permission-buttons-zone">
+            <el-button type="primary" @click="submit" style="color: white;">保存</el-button>
+            <el-button @click="closeDia">取消</el-button>
+          </div>
+        </template> 
+      </el-dialog>
+    </div>
+</template>
+  
+<style lang="scss" scoped>
+  #permission-container{
+    .variety-box{
+      padding: 10px 45px 0 45px;
+      .variety-item{
+        display: flex;
+        margin-bottom: 30px;
+        &:last-child{
+          margin-bottom: 0;
+        }
+      }
+    }
+    .permission-buttons-zone{
+      padding-bottom: 20px;
+    }
+  }
+</style>
+<style lang="scss">
+  #permission-container{
+    .el-checkbox-group{
+      margin-left:-16px ;
+      .el-checkbox{
+        margin-right: 0;
+        margin-left: 16px;
+      }
+    }
+  }
+</style>

src/views/financialManagement/contractProgress.vue

@@ -1,6 +1,7 @@
 
 <script setup>
-  import serviceVarietyDia from './components/serviceVarietyDia.vue'
+  // import serviceVarietyDia from './components/serviceVarietyDia.vue'
+  import permissionDia from './components/permissionDia.vue'
   import {useRouter,useRoute} from 'vue-router'
   import {useStore} from 'vuex'
   import {ElMessage} from 'element-plus'
@@ -20,7 +21,7 @@
 
   const contractSourceArray=['非CRM合同导入','CRM合同导入']
   const contractStatusArray=[{id:1,label:"已审批"},{id:2,label:"单章寄回"},{id:3,label:"已签回"}]
-  const contractTypeArray=[{id:1,label:"新签"},{id:2,label:"续约"}]
+  const contractTypeArray=[{id:1,label:"新签"},{id:2,label:"续约"},{id:3,label:"代付"},{id:4,label:"补充协议"}]
   const operationType=[{op_type:1,label:"合规登记"},{op_type:2,label:"开票登记"},{op_type:3,label:"到款登记"},
   {op_type:4,label:"修改合同状态"},{op_type:5,label:"删除合同登记"},{op_type:6,label:"合规编辑"}]
 
@@ -52,10 +53,13 @@
       end_date:'',
       contract_amount:'',
       contract_type:'',
+      daifufang:'',
+      guanlianhetong:'',
       sign_date:'',
       agreed_pay_time:'',
       services:[],
       register_status:'',
+      serviceRemark:'',
       remark:""
     },
     rules:{
@@ -77,8 +81,10 @@
         trigger:'blur'
       }],
       contract_type:{required:true,message:'合同类型不能为空',trigger:'change'},
-      sign_date:{required:true,message:'签订日不能为空',trigger:'change'},
-      agreed_pay_time:{required:true,message:'约定付款时间不能为空',trigger:'blur'}
+      // sign_date:{required:true,message:'签订日不能为空',trigger:'change'},
+      // agreed_pay_time:{required:true,message:'约定付款时间不能为空',trigger:'blur'}
+      daifufang:{required:true,message:'代付方不能为空',trigger:'blur'},
+      guanlianhetong:{required:true,message:'关联合同不能为空',trigger:'blur'}
 
     },
     moneyData:{
@@ -107,13 +113,12 @@
     contractNoTotal:0,
     contractNoLoading:false,
     // --------------套餐信息
-    // 选中的套餐
+    // // 选中的套餐
     checkedService:[],
-    //套餐列表
+    // //套餐列表
     serviceArray:[],
-    // 当前小套餐选中的品种
-    currentSmallService:{},
-    // checkedServiceDetail:{},
+    // 小套餐选中的品种
+    checkedPermission:[],
     // 查看套餐弹窗
     serviceShow:false,
     // 显示选择品种 - FICC小套餐
@@ -122,6 +127,7 @@
     serviceType:0,
     // 品种选择
     varietyDiaShow:false,
+    varietyDiaType:'view',
     // -----------------登记进度
     progressList:[],
   })
@@ -130,20 +136,20 @@
     invoiceData:[
       {
         amount:'',
-        invoice_date:''
+        invoice_date:'',
+        remark:''
       }
-    ],
-    rowErrorShow:''
+    ]
   })
   // ---------------到款信息
   const placementForm=reactive({
     placementData:[
       {
         amount:'',
-        invoice_date:''
+        invoice_date:'',
+        remark:''
       }
-    ],
-    rowErrorShow:''
+    ]
   })
   // 查看套餐报价单 图片
   const previewImage=ref('')
@@ -231,34 +237,57 @@
       end_date:'',
       contract_amount:'',
       contract_type:'',
+      daifufang:'',
+      guanlianhetong:'',
       sign_date:'',
       agreed_pay_time:'',
+      services:[],
+      serviceRemark:'',
       remark:""
     }
+    contractInfo.checkedService=[]
+    // 小套餐选中的品种
+    contractInfo.checkedPermission=[]
+    // 1-大套餐  2-小套餐
+    contractInfo.serviceType=0,
+    // 品种选择
+    contractInfo.serviceVarietyShow=false
     contractInfo.contractValidityDate=[]
     setTimeout(()=>{
       // 去除错误信息
       contractInfoForm.value && contractInfoForm.value.clearValidate()
     },0)
   }
+  // 合同类型改变
+  const contractTypeChange=(value)=>{
+    console.log(value);
+    if(value!=3){
+      contractInfo.form.daifufang=''
+    }
+    if(value!=4 && value!=3){
+      contractInfo.form.guanlianhetong=''
+    }
+  }
+
   // 服务改变
   const serciveChange=(value,type,openDia=true)=>{
     // console.log(value,type);
     if(type==2){
       contractInfo.serviceVarietyShow=value
+      contractInfo.varietyDiaType='edit'
       contractInfo.varietyDiaShow=openDia&&value
     }
     contractInfo.serviceType = value?type:0
   }
-  const getVarieties=(item)=>{
-    contractInfo.currentSmallService= { 
-      service_template_id: item.service_template_id,
-      Value: item.Value,
-      tableData: item.tableData, 
-      chart_permission_ids:item.chart_permission_ids,
-      tableHeadData: item.tableHeadData 
-    }
-    // console.log(item);
+  // 选择品种
+  const selectVariety=()=>{
+    contractInfo.varietyDiaType='edit'
+    contractInfo.varietyDiaShow=true
+  }
+
+  const getPermissionChecked=(list)=>{
+    console.log(list);
+    contractInfo.checkedPermission=list
   }
   // 合同编号远程搜索
   const contractNoSearch=(value)=>{
@@ -296,10 +325,12 @@
     contractInfo.form.seller_name=selectItem.seller_name
     contractInfo.form.seller_id=selectItem.seller_id
     contractInfo.form.contract_type=selectItem.contract_type_key
+    contractInfo.form.daifufang=selectItem.daifufang
+    contractInfo.form.guanlianhetong=selectItem.guanlianhetong
     contractInfoForm.value && 
     contractInfoForm.value.validateField([
       'contract_code','company_name','contract_type','seller_id',
-      'start_date','contract_amount','contract_type'
+      'start_date','contract_amount','daifufang','guanlianhetong'
     ])
   }
   // 销售选中
@@ -320,9 +351,9 @@
   // 表格添加行
   const addRow=(type,index)=>{
     if(type=='invoice'){
-      invoiceForm.invoiceData.splice((index+1),0,{amount:'',invoice_date:''})
+      invoiceForm.invoiceData.splice((index+1),0,{amount:'',invoice_date:'',remark:''})
     }else{
-      placementForm.placementData.splice((index+1),0,{amount:'',invoice_date:''})
+      placementForm.placementData.splice((index+1),0,{amount:'',invoice_date:'',remark:''})
     }
   }
   // 表格删除行
@@ -414,14 +445,15 @@
   }
   // 合规登记-提交
   const complianceSubmit=()=>{
-    console.log(contractInfo.checkedService);
+    // console.log(contractInfo.checkedService);
     contractInfoForm.value.validate(valid=>{
       if(valid){
         if(contractInfo.checkedService.length==0){
           ElMessage.warning('请选择套餐')
           return 
         }
-        if(!contractInfo.currentSmallService.Value && contractInfo.checkedService.some(serviceId =>serviceId==2)){
+        if((!contractInfo.checkedPermission || contractInfo.checkedPermission.length==0) 
+        && contractInfo.checkedService.some(serviceId =>serviceId==2)){
           ElMessage.warning('请保存FICC小套餐品种')
           return 
         }
@@ -431,11 +463,12 @@
           // 小套餐
           if(serviceId==2){
             contractInfo.form.services.push({
-              service_template_id:contractInfo.currentSmallService.service_template_id,
-              value:contractInfo.currentSmallService.Value,
-              chart_permission_ids:contractInfo.currentSmallService.chart_permission_ids,
-              detail:[contractInfo.currentSmallService.tableHeadData,...contractInfo.currentSmallService.tableData],
-              chart_permission_id:serviceItem.chart_permission_id,
+              // service_template_id:contractInfo.currentSmallService.service_template_id,
+              // value:contractInfo.currentSmallService.Value,
+              // chart_permission_ids:contractInfo.currentSmallService.chart_permission_ids,
+              // detail:[contractInfo.currentSmallService.tableHeadData,...contractInfo.currentSmallService.tableData],
+              // chart_permission_id:serviceItem.chart_permission_id,
+              check_list:contractInfo.checkedPermission,
               title:serviceItem.title
             })
           }else{
@@ -443,25 +476,26 @@
           }
         })
         contractInfo.form.contract_amount = parseFloat(contractInfo.form.contract_amount)
-        if(contractInfo.form.contract_register_id){
-          // 编辑
-          registerEdit(contractInfo.form).then(res=>{
-            let messageHint=ElMessage.success('合规登记编辑成功')
-            setTimeout(()=>{
-              messageHint.close()
-              router.back()
-            },1000)
-          })
-        }else{
-          // 新增
-          registerAdd(contractInfo.form).then(res=>{
-            let messageHint=ElMessage.success('合规登记成功')
-            setTimeout(()=>{
-              messageHint.close()
-              router.back()
-            },1000)
-          })
-        }
+        console.log(contractInfo.form);
+        // if(contractInfo.form.contract_register_id){
+        //   // 编辑
+        //   registerEdit(contractInfo.form).then(res=>{
+        //     let messageHint=ElMessage.success('合规登记编辑成功')
+        //     setTimeout(()=>{
+        //       messageHint.close()
+        //       router.back()
+        //     },1000)
+        //   })
+        // }else{
+        //   // 新增
+        //   registerAdd(contractInfo.form).then(res=>{
+        //     let messageHint=ElMessage.success('合规登记成功')
+        //     setTimeout(()=>{
+        //       messageHint.close()
+        //       router.back()
+        //     },1000)
+        //   })
+        // }
       }
     })
   }
@@ -470,13 +504,6 @@
   const invoiceSubmit=()=>{
     invoiceFormRef.value.validate(valid=>{
       if(valid){
-        invoiceForm.rowErrorShow=''
-        if(contractInfo.moneyData.waitInvoiceMoney<0){
-          ElMessage.error('总开票金额大于合同金额，请检查')
-          // 让金额这一列标红
-          invoiceForm.rowErrorShow='true'
-          return
-        }
         // 转化
         invoiceForm.invoiceData.forEach(element => {
           element.amount = parseFloat(element.amount)
@@ -484,7 +511,7 @@
         let param={
           contract_register_id:contractInfo.form.contract_register_id,
           invoice_type:1,
-          amount_list:invoiceForm.invoiceData
+          amount_list:invoiceForm.invoiceData,
         }
         registerInvoice(param).then(res=>{
           let messageHint=ElMessage.success('开票登记成功')
@@ -498,15 +525,8 @@
   }
   // 到款登记保存
   const placementSubmit=()=>{
-    placementForm.rowErrorShow=''
     placementFormRef.value.validate(valid=>{
       if(valid){
-        if(contractInfo.moneyData.waitPlacementMoney<0){
-          ElMessage.error('总开票金额大于合同金额，请检查')
-          // 让金额这一列标红
-          placementForm.rowErrorShow='true'
-          return
-        }
         // 转化
         placementForm.placementData.forEach(element => {
           element.amount = parseFloat(element.amount)
@@ -536,6 +556,11 @@
   // 查看套餐
   const viewService=(serviceTemplateId)=>{
     if(!canServiceShow(serviceTemplateId)) return 
+    if(serviceTemplateId==2){
+      contractInfo.varietyDiaShow=true
+      contractInfo.varietyDiaType='view'
+      return 
+    }
     let viewItem=contractInfo.form.services.find(item => item.service_template_id == serviceTemplateId)
     previewImageTitle.value = viewItem.title
     previewImage.value=viewItem.value
@@ -567,8 +592,11 @@
         end_date:res.data.end_date,
         contract_amount:res.data.contract_amount,
         contract_type:res.data.contract_type,
+        daifufang:res.data.daifufang,
+        guanlianhetong:res.data.guanlianhetong,
         sign_date:res.data.sign_date,
         agreed_pay_time:res.data.agreed_pay_time,
+        serviceRemark:res.serviceRemark,
         remark:res.data.remark,
         register_status:res.data.register_status,
         contract_source:res.data.contract_source,
@@ -589,58 +617,76 @@
         invoiceForm.invoiceData=[]
         res.data.invoice_list.map(item=>{
           invoiceForm.invoiceData.push({
-            invoice_id:item.invoice_id,
+            invoice_id:item.contract_invoice_id,
             amount:item.amount,
-            invoice_date:item.invoice_time
+            invoice_date:item.invoice_time,
+            remark:item.remark
           })
         })
+        // 添加一行空的
+        if(contractInfo.operationtype=='invoice'){
+          invoiceForm.invoiceData.push({
+            amount:'',
+            invoice_date:'',
+            remark:''
+          })
+        }
       }
       // 到款
       if(res.data.payment_list.length>0){
         placementForm.placementData=[]
         res.data.payment_list.map(item=>{
           placementForm.placementData.push({
-            invoice_id:item.invoice_id,
+            invoice_id:item.contract_invoice_id,
             amount:item.amount,
-            invoice_date:item.invoice_time
+            invoice_date:item.invoice_time,
+            remark:item.remark
           })
         })
-      }
-      let samllService=contractInfo.form.services.find(item => item.service_template_id==2)
-      if(contractInfo.operationtype=='compliance' && samllService){
-        // 合规编辑
-        /**
-         * 有可能服务模板的接口数据还没返回
-         * 这时更改contractInfo.currentSmallService会触发子组件的监听函数，导致空指针错误
-         * 创建一个 setInterval 询问contractInfo.serviceArray数据是否返回，已返回就更新contractInfo.currentSmallService
-         */
-         let temarr = samllService.detail.map((rowItem) => {
-          let rowArr = [];
-          for (let key in rowItem) {
-              if (key.substr(0, 3) === "col" && rowItem[key] !== "") {
-                rowArr.push(JSON.parse(rowItem[key]));
-              }
-            }
-            return rowArr;
-          });
-          let paramsTemp={
-            tableHeadData:temarr[0],
-            tableData:temarr.slice(1),
-            service_template_id:samllService.service_template_id,
-            Value:samllService.value,
-            chart_permission_ids:samllService.chart_permission_ids
-          }
-        if(contractInfo.serviceArray.length==0){
-          let timer=setInterval(()=>{
-            if(contractInfo.serviceArray.length>0){
-              contractInfo.currentSmallService=paramsTemp
-              clearInterval(timer)
-            }
-          },100)
-        }else{
-          contractInfo.currentSmallService=paramsTemp
+        // 添加一行空的
+        if(contractInfo.operationtype=='placement'){
+          placementForm.placementData.push({
+            amount:'',
+            invoice_date:'',
+            remark:''
+          })
         }
       }
+      // let samllService=contractInfo.form.services.find(item => item.service_template_id==2)
+      // if(contractInfo.operationtype=='compliance' && samllService){
+      //   // 合规编辑
+      //   /**
+      //    * 有可能服务模板的接口数据还没返回
+      //    * 这时更改contractInfo.currentSmallService会触发子组件的监听函数，导致空指针错误
+      //    * 创建一个 setInterval 询问contractInfo.serviceArray数据是否返回，已返回就更新contractInfo.currentSmallService
+      //    */
+      //    let temarr = samllService.detail.map((rowItem) => {
+      //     let rowArr = [];
+      //     for (let key in rowItem) {
+      //         if (key.substr(0, 3) === "col" && rowItem[key] !== "") {
+      //           rowArr.push(JSON.parse(rowItem[key]));
+      //         }
+      //       }
+      //       return rowArr;
+      //     });
+      //     let paramsTemp={
+      //       tableHeadData:temarr[0],
+      //       tableData:temarr.slice(1),
+      //       service_template_id:samllService.service_template_id,
+      //       Value:samllService.value,
+      //       chart_permission_ids:samllService.chart_permission_ids
+      //     }
+      //   if(contractInfo.serviceArray.length==0){
+      //     let timer=setInterval(()=>{
+      //       if(contractInfo.serviceArray.length>0){
+      //         contractInfo.currentSmallService=paramsTemp
+      //         clearInterval(timer)
+      //       }
+      //     },10)
+      //   }else{
+      //     contractInfo.currentSmallService=paramsTemp
+      //   }
+      // }
     })
   }
 </script>
@@ -681,11 +727,10 @@
                       <el-option :label="item.real_name" :value="item.admin_id" v-for="item in contractInfo.sellerList" :key="item.admin_id"></el-option>
                     </el-select>
                   </el-form-item>
-                  <el-form-item label="合同状态" prop="contract_status">
-                    <el-select v-model="contractInfo.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 label="合同金额"
+                  prop="contract_amount">
+                    <el-input v-model.trim="contractInfo.form.contract_amount"
+                    placeholder="请输入合同金额" />
                   </el-form-item>
                   <el-form-item label="合同有效期" 
                   prop="start_date">
@@ -695,17 +740,26 @@
                     :clearable="false">
                     </el-date-picker>
                   </el-form-item>
-                  <el-form-item label="合同金额"
-                  prop="contract_amount">
-                    <el-input v-model.trim="contractInfo.form.contract_amount"
-                    placeholder="请输入合同金额" />
-                  </el-form-item>
                   <el-form-item label="合同类型" prop="contract_type">
                     <el-select v-model="contractInfo.form.contract_type"
-                    placeholder="请选择合同类型" >
+                    placeholder="请选择合同类型" @change="contractTypeChange">
                       <el-option :label="item.label" :value="item.id" v-for="item in contractTypeArray" :key="item.id"></el-option>
                     </el-select>
                   </el-form-item>
+                  <el-form-item label="代付方" prop="daifufang" v-if="contractInfo.form.contract_type==3">
+                    <el-input v-model="contractInfo.form.daifufang"
+                    placeholder="请输入代付方" />
+                  </el-form-item>
+                  <el-form-item label="关联合同" prop="guanlianhetong" v-if="contractInfo.form.contract_type==3 || contractInfo.form.contract_type==4">
+                    <el-input v-model="contractInfo.form.guanlianhetong"
+                    placeholder="请输入关联合同" />
+                  </el-form-item>
+                  <el-form-item label="合同状态" prop="contract_status">
+                    <el-select v-model="contractInfo.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="contractInfo.form.sign_date"
                     placeholder="请选择签订日" value-format="YYYY-MM-DD"
@@ -737,7 +791,7 @@
                     {{contractInfo.serviceArray[1]?.title}}
                   </el-checkbox>
                   <span v-if="(contractInfo.serviceVarietyShow&&contractInfo.operationtype=='compliance')" 
-                  @click="contractInfo.varietyDiaShow=true">选择品种</span>
+                  @click="selectVariety">选择品种</span>
                 </div>
                 <!-- 市场策略 -->
                 <el-checkbox :label="contractInfo.serviceArray[2]?.service_template_id" style="margin-right: 0;" 
@@ -750,14 +804,19 @@
                   {{contractInfo.serviceArray[3]?.title}}
                 </el-checkbox>
               </el-checkbox-group>
+              <div class="info-service-remark">
+                <span style="white-space: nowrap;font-size: 14px;margin-right: 20px;">套餐备注</span>
+                <el-input style="flex-grow: 1;" :disabled="contractInfo.operationtype!='compliance'"
+                    v-model="contractInfo.form.serviceRemark" 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="contractInfo.operationtype!='compliance'"
-                    v-model="contractInfo.form.remark"
-                    placeholder="请输入备注"
+                    v-model="contractInfo.form.remark" placeholder="请输入备注"
                   />
                 </div>
             </div>
@@ -767,7 +826,8 @@
             </div>
           </div>
           <!-- 开票登记 -->
-          <div class="info-box" v-if="contractInfo.operationtype!='compliance'" style="margin-top:20px ;" id="info-invoice-box">
+          <div class="info-box" v-if="contractInfo.operationtype!='compliance'" 
+          style="margin-top:20px ;" id="info-invoice-box" v-permission="['financial:list:invoice','financial:list:placement','financial:list:viewIandP','or']">
             <div class="info-box-head">开票登记{{contractInfo.moneyData.waitInvoiceMoney==0?'':'（待开票）'}}</div>
             <div class="info-row" >
               <div class="info-row-title">开票信息</div>
@@ -789,9 +849,8 @@
                       </template>
                       <template #default="{row,$index}">
                         <el-form-item :prop="`invoiceData.${$index}.amount`" :show-message="false" 
-                        :error="invoiceForm.rowErrorShow"
                         :rules="{required:true,message:()=>{ ElMessage.error('开票金额不能为空')},trigger:'blur'}">
-                          <el-input v-model.trim="row.amount" style="width: 124px;" 
+                          <el-input v-model.trim="row.amount" style="width: 124px;" :disabled="row.invoice_id?true:false"
                           placeholder="请输入金额" @input="(e)=>moneyChange('invoice',e,$index)"></el-input>
                         </el-form-item>
                       </template>
@@ -800,13 +859,21 @@
                       <template #header>
                         <span style="color: #FF3400;">*</span>开票日期
                       </template>
-                      <template #default="{row,$index}">
+                      <template #default="{row,$index}" >
                         <el-form-item :prop="`invoiceData.${$index}.invoice_date`" :show-message="false"
                         :rules="{required:true,message:()=>{ ElMessage.error('请选择开票日期')},trigger:'change'}">             
-                          <el-date-picker v-model="row.invoice_date" style="width: 124px;"
+                          <el-date-picker v-model="row.invoice_date" style="width: 124px;" :disabled="row.invoice_id?true:false"
                           placeholder="请选择日期" value-format="YYYY-MM-DD" :clearable="false" ></el-date-picker>
                         </el-form-item>
                       </template>
+                    </el-table-column >
+                    <el-table-column label="备注" width="180" align="center" prop="remark" show-overflow-tooltip >
+                      <template #default="{row}">
+                        <el-form-item  v-if="row.invoice_id?false:true">             
+                          <el-input v-model="row.remark" style="width: 124px;" placeholder="请输入备注" />
+                        </el-form-item>
+                        <span v-else>{{row.remark || '--'}}</span>
+                      </template>
                     </el-table-column>
                     <el-table-column label="操作" width="180" align="center" v-if="contractInfo.operationtype=='invoice'">
                       <template #default="{row,$index}" >
@@ -821,7 +888,8 @@
             </div>
           </div>
           <!-- 到款登记 -->
-          <div class="info-box" v-if="contractInfo.operationtype!='compliance'" style="margin-top:20px ;" id="info-invoice-box">
+          <div class="info-box" v-if="contractInfo.operationtype!='compliance'" v-permission="['financial:list:invoice','financial:list:placement','financial:list:viewIandP','or']"
+          style="margin-top:20px ;" id="info-invoice-box">
             <div class="info-box-head">到款登记{{contractInfo.moneyData.waitPlacementMoney==0?'':'（待到款）'}}</div>
             <div class="info-row" >
               <div class="info-row-title">到款信息</div>
@@ -843,9 +911,8 @@
                       </template>
                       <template #default="{row,$index}">
                         <el-form-item :prop="`placementData.${$index}.amount`" :show-message="false" 
-                        :error="placementForm.rowErrorShow"
                         :rules="{required:true,message:()=>{ ElMessage.error('到款金额不能为空')},trigger:'blur'}">
-                          <el-input v-model="row.amount" style="width: 124px;" 
+                          <el-input v-model="row.amount" style="width: 124px;" :disabled="row.invoice_id?true:false"
                           placeholder="请输入金额" @input="(e)=>moneyChange('placement',e,$index)"></el-input>
                         </el-form-item>
                       </template>
@@ -857,11 +924,20 @@
                       <template #default="{row,$index}">
                         <el-form-item :prop="`placementData.${$index}.invoice_date`" :show-message="false"
                         :rules="{required:true,message:()=>{ ElMessage.error('请选择到款日期')},trigger:'change'}">             
-                          <el-date-picker v-model="row.invoice_date" style="width: 124px;" :clearable="false"
+                          <el-date-picker v-model="row.invoice_date" style="width: 124px;" :clearable="false" 
+                          :disabled="row.invoice_id?true:false"
                           placeholder="请选择日期" value-format="YYYY-MM-DD" format="YYYY-MM-DD"></el-date-picker>
                         </el-form-item>
                       </template>
                     </el-table-column>
+                    <el-table-column label="备注" width="180" align="center" prop="remark" show-overflow-tooltip >
+                      <template #default="{row}">
+                        <el-form-item  v-if="row.invoice_id?false:true">             
+                          <el-input v-model="row.remark" style="width: 124px;" placeholder="请输入备注"/>
+                        </el-form-item>
+                        <span v-else>{{row.remark || '--'}}</span>
+                      </template>
+                    </el-table-column>
                     <el-table-column label="操作" width="180" align="center" v-if="contractInfo.operationtype=='placement'">
                       <template #default="{row,$index}">
                         <span class="table-operation-button" @click="deleteRow('placement',$index)"
@@ -904,8 +980,10 @@
         </el-scrollbar>
       </div>
       <!-- 小套餐选择品种弹窗 -->
-      <service-variety-dia v-model:visible="contractInfo.varietyDiaShow" @selectFinish="getVarieties" 
-      :service="contractInfo.serviceArray.find(item=>item.service_template_id==2)" :currentService="contractInfo.currentSmallService" ></service-variety-dia>
+      <permission-dia v-model:visible="contractInfo.varietyDiaShow" :type="contractInfo.varietyDiaType"
+      @selectFinish="getPermissionChecked" :hasCheckedPermission="contractInfo.checkedPermission"></permission-dia>
+      <!-- <service-variety-dia v-model:visible="contractInfo.varietyDiaShow" @selectFinish="getVarieties" 
+      :service="contractInfo.serviceArray.find(item=>item.service_template_id==2)" :currentService="contractInfo.currentSmallService" ></service-variety-dia> -->
       <!-- 查看套餐弹窗 -->
       <el-dialog v-model="contractInfo.serviceShow" style="min-width: 800px;" title="" width="70vw" top="5vh">
         <template #header>
@@ -991,6 +1069,12 @@
                 }
               }
             }
+            .info-service-remark{
+              display: flex;
+              padding-left: 50px;
+              align-items: center;
+              margin-top: 20px;
+            }
             // 备注
             .info-row-remark{
               display: flex;

src/views/financialManagement/financialList.vue

@@ -8,7 +8,7 @@ import {downloadByFlow} from '@/utils/common-methods'
 const router = useRouter()
 const route = useRoute()
 const changeStatusForm=ref(null)
-const contractTypeArray=[{id:1,label:"新签"},{id:2,label:"续约"}]
+const contractTypeArray=[{id:1,label:"新签"},{id:2,label:"续约"},{id:3,label:"代付"},{id:4,label:"补充协议"}]
 const contractStatusArray=[{id:1,label:"已审批"},{id:2,label:"单章寄回"},{id:3,label:"已签回"}]
 const statusArray=[{id:1,label:"进行中"},{id:2,label:"已完成"}]
 
@@ -178,7 +178,7 @@ const statusArray=[{id:1,label:"进行中"},{id:2,label:"已完成"}]
         <div class="financial-list-container" id="financial-list-container" > 
           <!-- 搜索区域 -->
           <div class="financial-search-zone">
-            <el-input v-model="financial.searchParams.keyword" placeholder="合同编号/客户姓名/销售" :prefix-icon="Search"
+            <el-input v-model="financial.searchParams.keyword" placeholder="合同编号/客户姓名/销售/代付方" :prefix-icon="Search"
             style="width: 286px;margin-bottom: 8px;" @input="searchFinancial" clearable />
             <el-date-picker v-model="financial.createtime" start-placeholder="登记日期-开始"
             end-placeholder="登记日期-结束" style="margin-right: 30px;max-width: 286px;margin-bottom: 8px;"
@@ -234,12 +234,14 @@ const statusArray=[{id:1,label:"进行中"},{id:2,label:"已完成"}]
                   {{contractStatusArray[row.contract_status-1].label}}
                 </template>
               </el-table-column>
-              <el-table-column label="已开票金额" align="center" prop="invoiced_amount" width="100">
+              <el-table-column label="已开票金额" align="center" prop="invoiced_amount" width="100"
+              v-permission="['financial:list:invoice','financial:list:placement','financial:list:viewIandP','or']">
                 <template #default="{row}">
                   <span style="color: var(--themeColor);cursor: pointer;" @click="invoiceDetail(row)">{{row.invoiced_amount}}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="已到款金额" align="center" prop="payment_amount" width="100">
+              <el-table-column label="已到款金额" align="center" prop="payment_amount" width="100"
+              v-permission="['financial:list:invoice','financial:list:placement','financial:list:viewIandP','or']">
                 <template #default="{row}">
                   <span style="color: var(--themeColor);cursor: pointer;" @click="refundDetail(row)">{{row.payment_amount}}</span>
                 </template>
@@ -290,11 +292,11 @@ const statusArray=[{id:1,label:"进行中"},{id:2,label:"已完成"}]
                         删除
                       </span>
                       <span class="table-option-buttons" v-permission="'financial:list:invoice'"
-                      @click="registration('invoice',row.contract_register_id)">
+                      @click="registration('invoice',row.contract_register_id)" v-if="row.contract_type!==3">
                         开票登记
                       </span>
                       <span class="table-option-buttons" v-permission="'financial:list:placement'"
-                      @click="registration('placement',row.contract_register_id)">
+                      @click="registration('placement',row.contract_register_id)" v-if="row.contract_type!==3">
                         到款登记
                       </span>
                       <span class="table-option-buttons" @click="changeContractStatus(row)">

src/views/financialManagement/invoice/invoiceList.vue

@@ -0,0 +1,191 @@
+<script setup>
+import {useRouter} from 'vue-router'
+  
+const router = useRouter()
+
+  const invoice=reactive({
+    searchParams:{
+      current:1,
+      page_size:10,
+      contract_code:'',
+      dateStart:'',
+      dateEnd:'',
+      moneyStart:'',
+      moneyEnd:''
+    },
+    dateRange:[],
+    tableData:[{contract_code:'f4f5sdFDsf4',invoiceMoney:3000,invoiceDate:'2022-12-12'},{contract_code:'f4f5sdFDsf4',invoiceMoney:3000,invoiceDate:'2022-12-12'},
+    {contract_code:'f4f5sdFDsf4',invoiceMoney:3000,invoiceDate:'2022-12-12'},{contract_code:'f4f5sdFDsf4',invoiceMoney:3000,invoiceDate:'2022-12-12'},
+    {contract_code:'f4f5sdFDsf4',invoiceMoney:3000,invoiceDate:'2022-12-12'},{contract_code:'f4f5sdFDsf4',invoiceMoney:3000,invoiceDate:'2022-12-12'},
+    {contract_code:'f4f5sdFDsf4',invoiceMoney:3000,invoiceDate:'2022-12-12'},{contract_code:'f4f5sdFDsf4',invoiceMoney:3000,invoiceDate:'2022-12-12'},
+    {contract_code:'f4f5sdFDsf4',invoiceMoney:3000,invoiceDate:'2022-12-12'},{contract_code:'f4f5sdFDsf4',invoiceMoney:3000,invoiceDate:'2022-12-12'},
+    {contract_code:'f4f5sdFDsf4',invoiceMoney:3000,invoiceDate:'2022-12-12'},{contract_code:'f4f5sdFDsf4',invoiceMoney:3000,invoiceDate:'2022-12-12'},
+    {contract_code:'f4f5sdFDsf4',invoiceMoney:3000,invoiceDate:'2022-12-12'},{contract_code:'f4f5sdFDsf4',invoiceMoney:3000,invoiceDate:'2022-12-12'},
+    {contract_code:'f4f5sdFDsf4',invoiceMoney:3000,invoiceDate:'2022-12-12'},{contract_code:'f4f5sdFDsf4',invoiceMoney:3000,invoiceDate:'2022-12-12'},
+    {contract_code:'f4f5sdFDsf4',invoiceMoney:3000,invoiceDate:'2022-12-12'},{contract_code:'f4f5sdFDsf4',invoiceMoney:3000,invoiceDate:'2022-12-12'}],
+    total:30
+  })
+
+  watch(()=>invoice.dateRange,(newVal)=>{
+    // console.log(newVal);
+    if(newVal && newVal.length>0){
+      invoice.searchParams.dateStart=newVal[0]
+      invoice.searchParams.dateEnd=newVal[1]
+    }else{
+      invoice.searchParams.dateStart=invoice.searchParams.dateEnd=''
+    }
+    searchInvoice()
+  })
+
+// ---------------method
+
+const invoiceList=()=>{
+  console.log(invoice.searchParams)
+}
+
+const searchInvoice=()=>{
+  console.log('search');
+  invoice.searchParams.current = 1
+  invoiceList()
+}
+// 搜索项-开始金额和结束金额改变
+const moneyChange=(value,prop)=>{
+  // console.log(value);
+  let trimValue = value.trim()
+  let numerValue=parseFloat(trimValue)
+  if((!numerValue)&&trimValue){
+    setTimeout(()=>{
+      invoice.searchParams[prop]=''
+    },500)
+    ElMessage.warning('金额必须是数字')
+    return
+  }
+  if(numerValue<0){
+    setTimeout(()=>{
+      invoice.searchParams[prop]=''
+    },500)
+    ElMessage.warning('金额必须大于等于零')
+    return
+  }
+  // 开始金额大于结束金额 就不查询
+  if(invoice.searchParams.moneyEnd &&
+    invoice.searchParams.moneyStart &&
+    parseFloat(invoice.searchParams.moneyStart) > invoice.searchParams.moneyEnd){
+    return 
+  }
+  searchInvoice()
+}
+// 搜索项-判断开始金额是否大于结束金额
+const checkMoney=()=>{
+  if(invoice.searchParams.moneyEnd &&
+  invoice.searchParams.moneyStart &&
+  parseFloat(invoice.searchParams.moneyStart) > invoice.searchParams.moneyEnd){
+    ElMessage.warning('开始金额不能大于结束金额')
+  }
+}
+
+// 切换每页的数量
+const changePageSize=(pageSize)=>{
+  invoice.searchParams.page_size = pageSize
+  invoiceList()
+}
+const changePageNo = (pageNo)=>{
+  invoice.searchParams.current = pageNo
+  invoiceList()
+}
+
+const invoiceDetail=(row)=>{
+  router.push({path:'/financial/list/contractProgress',query:{type:'invoice',complianceId:row.contract_register_id}})
+}
+const invoiceExport=()=>{
+  console.log("导出");
+}
+
+// --------created
+invoiceList()
+
+</script>
+
+<template>
+    <div id="invoice-list-container">
+      <div class="invoice-search-zone">
+        <div class="invoice-search-box">
+          <el-input v-model="invoice.searchParams.contract_code" placeholder="请输入合同编号"
+          style="width: 309px;margin-left: 40px;margin-bottom: 8px;" clearable @input="searchInvoice" ></el-input>
+          <el-date-picker v-model="invoice.dateRange" start-placeholder="起始日期"
+            end-placeholder="结束日期" style="margin-left: 40px;max-width: 321px;margin-bottom: 8px;"
+            value-format="YYYY-MM-DD" type="daterange" ></el-date-picker>
+          <div style="margin-left: 40px;margin-bottom: 8px;">
+            开票金额
+            <el-input v-model.trim="invoice.searchParams.moneyStart" @blur="checkMoney"
+            @input="(value)=>moneyChange(value,'moneyStart')" style="width: 104px;margin:0 8px" clearable></el-input>
+            至
+            <el-input v-model.trim="invoice.searchParams.moneyEnd" @blur="checkMoney"
+            @input="(value)=>moneyChange(value,'moneyEnd')"
+            style="width: 104px;margin:0 8px" clearable></el-input>
+          </div>
+        </div>
+      </div>
+      <div class="invoice-table-container">
+        <div class="invoice-table-top">
+          <span style="font-size:14px">已开票金额：2222元</span>
+          <el-button type="primary" style="width: 80px;" size="large" @click="invoiceExport">导出</el-button>
+        </div>
+        <!-- 表格 -->
+        <el-table :data="invoice.tableData" border max-height="560px" size="default" style="position: sticky;"> 
+          <el-table-column label="合同编号" align="center" prop="contract_code" show-overflow-tooltip></el-table-column>
+          <el-table-column label="开票金额" align="center" prop="invoiceMoney" show-overflow-tooltip></el-table-column>
+          <el-table-column label="开票日期" align="center" prop="invoiceDate" show-overflow-tooltip></el-table-column>
+          <el-table-column label="操作" width="120" align="center">
+            <template #default="{row}">
+              <div class="table-options" style="justify-content: center;">
+                <span class="table-option-buttons" style="margin-right: 0;"
+                @click="invoiceDetail(row)">
+                  详情
+                </span>
+              </div>
+            </template>
+          </el-table-column>
+          <template #empty>
+            <div class="table-no-data">
+              <img src="@/assets/img/icon/empty-data.png" />
+              <span>暂无数据</span>
+            </div>
+          </template>
+        </el-table>
+      </div>
+      <!-- 分页 -->
+      <m-page :pageSize="invoice.searchParams.page_size" :page_no="invoice.searchParams.current" 
+      style="display: flex;justify-content: flex-end;margin-top: 20px;" 
+      :total="invoice.total" @handleCurrentChange="changePageNo" @handleSizeChange="changePageSize"/>
+    </div>
+</template>
+  
+<style lang="scss" scoped>
+  #invoice-list-container{
+    min-height: 100%;
+    .invoice-search-zone{
+      border: 1px solid #ECECEC;
+      background-color: white;
+      padding: 18px 30px 12px;
+      box-sizing: border-box;
+      .invoice-search-box{
+        margin-left: -40px;
+        display: flex;
+        flex-wrap: wrap;
+      }
+    }
+    .invoice-table-container{
+      border: 1px solid #ECECEC;
+      background-color: white;
+      margin-top: 18px;
+      padding: 18px 30px 26px;
+      .invoice-table-top{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 18px;
+      }
+    }
+  }
+</style>

src/views/financialManagement/placement/placementList.vue

@@ -0,0 +1,191 @@
+<script setup>
+import {useRouter} from 'vue-router'
+  
+const router = useRouter()
+
+  const placement=reactive({
+    searchParams:{
+      current:1,
+      page_size:10,
+      contract_code:'',
+      dateStart:'',
+      dateEnd:'',
+      moneyStart:'',
+      moneyEnd:''
+    },
+    dateRange:[],
+    tableData:[{contract_code:'f4f5sdFDsf4',placementMoney:3000,placementDate:'2022-12-12'},{contract_code:'f4f5sdFDsf4',placementMoney:3000,placementDate:'2022-12-12'},
+    {contract_code:'f4f5sdFDsf4',placementMoney:3000,placementDate:'2022-12-12'},{contract_code:'f4f5sdFDsf4',placementMoney:3000,placementDate:'2022-12-12'},
+    {contract_code:'f4f5sdFDsf4',placementMoney:3000,placementDate:'2022-12-12'},{contract_code:'f4f5sdFDsf4',placementMoney:3000,placementDate:'2022-12-12'},
+    {contract_code:'f4f5sdFDsf4',placementMoney:3000,placementDate:'2022-12-12'},{contract_code:'f4f5sdFDsf4',placementMoney:3000,placementDate:'2022-12-12'},
+    {contract_code:'f4f5sdFDsf4',placementMoney:3000,placementDate:'2022-12-12'},{contract_code:'f4f5sdFDsf4',placementMoney:3000,placementDate:'2022-12-12'},
+    {contract_code:'f4f5sdFDsf4',placementMoney:3000,placementDate:'2022-12-12'},{contract_code:'f4f5sdFDsf4',placementMoney:3000,placementDate:'2022-12-12'},
+    {contract_code:'f4f5sdFDsf4',placementMoney:3000,placementDate:'2022-12-12'},{contract_code:'f4f5sdFDsf4',placementMoney:3000,placementDate:'2022-12-12'},
+    {contract_code:'f4f5sdFDsf4',placementMoney:3000,placementDate:'2022-12-12'},{contract_code:'f4f5sdFDsf4',placementMoney:3000,placementDate:'2022-12-12'},
+    {contract_code:'f4f5sdFDsf4',placementMoney:3000,placementDate:'2022-12-12'},{contract_code:'f4f5sdFDsf4',placementMoney:3000,placementDate:'2022-12-12'}],
+    total:30
+  })
+
+  watch(()=>placement.dateRange,(newVal)=>{
+    // console.log(newVal);
+    if(newVal && newVal.length>0){
+      placement.searchParams.dateStart=newVal[0]
+      placement.searchParams.dateEnd=newVal[1]
+    }else{
+      placement.searchParams.dateStart=placement.searchParams.dateEnd=''
+    }
+    searchPlacement()
+  })
+
+// ---------------method
+
+const placementList=()=>{
+  console.log(placement.searchParams)
+}
+
+const searchPlacement=()=>{
+  console.log('search');
+  placement.searchParams.current = 1
+  placementList()
+}
+// 搜索项-开始金额和结束金额改变
+const moneyChange=(value,prop)=>{
+  // console.log(value);
+  let trimValue = value.trim()
+  let numerValue=parseFloat(trimValue)
+  if((!numerValue)&&trimValue){
+    setTimeout(()=>{
+      placement.searchParams[prop]=''
+    },500)
+    ElMessage.warning('金额必须是数字')
+    return
+  }
+  if(numerValue<0){
+    setTimeout(()=>{
+      placement.searchParams[prop]=''
+    },500)
+    ElMessage.warning('金额必须大于等于零')
+    return
+  }
+  // 开始金额大于结束金额 就不查询
+  if(placement.searchParams.moneyEnd &&
+  placement.searchParams.moneyStart &&
+    parseFloat(placement.searchParams.moneyStart) > placement.searchParams.moneyEnd){
+    return 
+  }
+  searchPlacement()
+}
+// 搜索项-判断开始金额是否大于结束金额
+const checkMoney=()=>{
+  if(placement.searchParams.moneyEnd &&
+  placement.searchParams.moneyStart &&
+  parseFloat(placement.searchParams.moneyStart) > placement.searchParams.moneyEnd){
+    ElMessage.warning('开始金额不能大于结束金额')
+  }
+}
+
+// 切换每页的数量
+const changePageSize=(pageSize)=>{
+  placement.searchParams.page_size = pageSize
+  placementList()
+}
+const changePageNo = (pageNo)=>{
+  placement.searchParams.current = pageNo
+  placementList()
+}
+
+const placementDetail=(row)=>{
+  router.push({path:'/financial/list/contractProgress',query:{type:'placement',complianceId:row.contract_register_id}})
+}
+const placementExport=()=>{
+  console.log("导出");
+}
+
+// --------created
+placementList()
+
+</script>
+
+<template>
+    <div id="placement-list-container">
+      <div class="placement-search-zone">
+        <div class="placement-search-box">
+          <el-input v-model="placement.searchParams.contract_code" placeholder="请输入合同编号"
+          style="width: 309px;margin-left: 40px;margin-bottom: 8px;" clearable @input="searchPlacement" ></el-input>
+          <el-date-picker v-model="placement.dateRange" start-placeholder="起始日期"
+            end-placeholder="结束日期" style="margin-left: 40px;max-width: 321px;margin-bottom: 8px;"
+            value-format="YYYY-MM-DD" type="daterange" ></el-date-picker>
+          <div style="margin-left: 40px;margin-bottom: 8px;">
+            到款金额
+            <el-input v-model.trim="placement.searchParams.moneyStart" @blur="checkMoney"
+            @input="(value)=>moneyChange(value,'moneyStart')" style="width: 104px;margin:0 8px" clearable></el-input>
+            至
+            <el-input v-model.trim="placement.searchParams.moneyEnd" @blur="checkMoney"
+            @input="(value)=>moneyChange(value,'moneyEnd')"
+            style="width: 104px;margin:0 8px" clearable></el-input>
+          </div>
+        </div>
+      </div>
+      <div class="placement-table-container">
+        <div class="placement-table-top">
+          <span style="font-size:14px">已到款金额：2222元</span>
+          <el-button type="primary" style="width: 80px;" size="large" @click="placementExport">导出</el-button>
+        </div>
+        <!-- 表格 -->
+        <el-table :data="placement.tableData" border max-height="560px" size="default" style="position: sticky;"> 
+          <el-table-column label="合同编号" align="center" prop="contract_code" show-overflow-tooltip></el-table-column>
+          <el-table-column label="到款金额" align="center" prop="placementMoney" show-overflow-tooltip></el-table-column>
+          <el-table-column label="到款日期" align="center" prop="placementDate" show-overflow-tooltip></el-table-column>
+          <el-table-column label="操作" width="120" align="center">
+            <template #default="{row}">
+              <div class="table-options" style="justify-content: center;">
+                <span class="table-option-buttons" style="margin-right: 0;"
+                @click="placementDetail(row)">
+                  详情
+                </span>
+              </div>
+            </template>
+          </el-table-column>
+          <template #empty>
+            <div class="table-no-data">
+              <img src="@/assets/img/icon/empty-data.png" />
+              <span>暂无数据</span>
+            </div>
+          </template>
+        </el-table>
+      </div>
+      <!-- 分页 -->
+      <m-page :pageSize="placement.searchParams.page_size" :page_no="placement.searchParams.current" 
+      style="display: flex;justify-content: flex-end;margin-top: 20px;" 
+      :total="placement.total" @handleCurrentChange="changePageNo" @handleSizeChange="changePageSize"/>
+    </div>
+</template>
+  
+<style lang="scss" scoped>
+  #placement-list-container{
+    min-height: 100%;
+    .placement-search-zone{
+      border: 1px solid #ECECEC;
+      background-color: white;
+      padding: 18px 30px 12px;
+      box-sizing: border-box;
+      .placement-search-box{
+        margin-left: -40px;
+        display: flex;
+        flex-wrap: wrap;
+      }
+    }
+    .placement-table-container{
+      border: 1px solid #ECECEC;
+      background-color: white;
+      margin-top: 18px;
+      padding: 18px 30px 26px;
+      .placement-table-top{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 18px;
+      }
+    }
+  }
+</style>