2022.8.25

src/views/contract/components/contractPaymentRegistration.vue

@@ -2,6 +2,9 @@
   <div>
     <xy-dialog :is-show.sync="isShow" title="付款计划" @on-ok="isShow = false">
       <template v-slot:normalContent>
+        <template v-if="isSign">
+          <el-button size="small" type="primary" icon="el-icon-plus" style="margin-bottom: 10px;" @click="isShowAddPlan = true">新增付款计划</el-button>
+        </template>
         <xy-table :height="300" :list="list" :table-item="table">
           <template v-slot:btns>
             <div></div>
@@ -9,15 +12,65 @@
         </xy-table>
       </template>
     </xy-dialog>
+
+    <!--    新增计划-->
+    <xy-dialog :is-show.sync="isShowAddPlan" type="form" title="新增计划" :form="planForm" :rules="planRules" :width="48" @submit="submit">
+      <template v-slot:date>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">
+            <span style="color: red;">*</span>
+            <span>日期</span>
+          </div>
+          <div class="xy-table-item-content">
+            <el-datePicker style="width: 300px" v-model="planForm.date" type="date" placeholder="请选择日期"></el-datePicker>
+          </div>
+        </div>
+      </template>
+      <template v-slot:content>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">
+            <span style="color: red;">*</span>
+            <span>内容</span>
+          </div>
+          <div class="xy-table-item-content">
+            <el-input style="width: 300px" type="textarea" v-model="planForm.content" placeholder="请输入内容"/>
+          </div>
+        </div>
+      </template>
+      <template v-slot:money>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">
+            <span style="color: red;">*</span>
+            <span>金额</span>
+          </div>
+          <div class="xy-table-item-content xy-table-item-price">
+            <el-input style="width: 300px" v-model="planForm.money" placeholder="请输入金额"/>
+          </div>
+        </div>
+      </template>
+      <template v-slot:remark>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">
+            <span>备注</span>
+          </div>
+          <div class="xy-table-item-content">
+            <el-input style="width: 300px" type="textarea" v-model="planForm.remark" placeholder="请输入备注"/>
+          </div>
+        </div>
+      </template>
+    </xy-dialog>
   </div>
 </template>
 
 <script>
-import {getContractSign} from "@/api/contractSign/contractSign"
+import {addContractSign, getContractSign} from "@/api/contractSign/contractSign"
 import {parseTime,moneyFormatter} from "@/utils";
+import {Message} from "element-ui";
 export default {
   data() {
     return {
+      id:'',
+      isSign:false,
       isShow:false,
       list:[],
       table:[
@@ -45,7 +98,7 @@ export default {
           label:'创建信息',
           width: 200,
           formatter:(v1,v2,value)=>{
-            return parseTime(new Date(value))
+            return parseTime(new Date(value),'{y}-{m}-{d}')
           }
         },
         {
@@ -59,7 +112,7 @@ export default {
           label:'合同签订日期',
           width: 200,
           formatter:(v1,v2,value)=>{
-            return parseTime(new Date(value))
+            return parseTime(new Date(value),'{y}-{m}-{d}')
           }
         },
         {
@@ -77,19 +130,102 @@ export default {
           label:'经办科室',
           width: 200
         }
-      ]
+      ],
+
+      isShowAddPlan:false,
+      planForm:{
+        date:'',
+        money:'',
+        content:'',
+        remark:''
+      },
+      planRules:{
+        date:[
+          {required:true,message:"必填"}
+        ],
+        content:[
+          {required:true,message:"必填"}
+        ],
+        money:[
+          {required:true,message:"必填"},
+          {pattern:/^\d+(\.\d+)?$/, message: '必须为数字'}
+        ]
+      }
     }
   },
   methods: {
     async getSignPlan(contractId){
+      this.id = contractId
       const res = await getContractSign({contract_id:contractId})
       this.list = res.data
       console.log(res)
-    }
+    },
+
+    submit(){
+      console.log(this.planForm)
+      addContractSign({
+        contract_id:this.id,
+        date:`${new Date(this.planForm.date).getFullYear()}-${new Date(this.planForm.date).getMonth()+1}-${new Date(this.planForm.date).getDate()}`,
+        content:this.planForm.content,
+        money:this.planForm.money,
+        remark:this.planForm.remark
+      }).then(res=>{
+        this.isShowAddPlan = false
+        this.getSignPlan(this.id)
+        console.log(res)
+        Message({
+          type:'success',
+          message:'操作成功'
+        })
+      })
+    },
   },
 
 }
 </script>
 
 <style scoped lang="scss">
+.add-plan{
+  display: flex;
+  align-items: center;
+}
+
+.xy-table-item-label{
+  width: 140px;
+}
+.xy-table-item-price{
+  position: relative;
+  &::after{
+    position: absolute;
+    right: 0;
+    top: 0;
+    content:'（元）'
+  }
+}
+.xy-table-item-price-wan{
+  position: relative;
+  &::after{
+    position: absolute;
+    right: 0;
+    top: 0;
+    content:'（万元）'
+  }
+  ::v-deep .el-input__clear{
+    position: relative;
+    right: 46px;
+    z-index: 2;
+  }
+}
+.xy-table-item-year{
+  position: relative;
+  &::after{
+    position: absolute;
+    right: 4%;
+    top: 0;
+    content:'年'
+  }
+}
+::v-deep .el-input__inner{
+  text-align: left;
+}
 </style>

src/views/contract/contractList.vue

@@ -797,10 +797,10 @@ export default {
 
     //点击付款计划查看
     showPaymentPlan(row, column, cell){
-      //console.log(column)
       if(column.property === 'sign_plan_count'){
         this.$refs['contractPaymentRegistration'].getSignPlan(row.id)
         this.$refs['contractPaymentRegistration'].isShow = true
+        row.id === 2 ? this.$refs['contractPaymentRegistration'].isSign = true : this.$refs['contractPaymentRegistration'].isSign = false
       }
       if(column.property === 'fund_log_total'){
         this.$router.push(`/contract/paymentRegistrationList?contractId=${row.id}`)