Payp.vue 9.78 KB
<template>
  <div class="eibs-tab">
    <c-col :span="24">
      <!-- ==================左边================ -->
      <c-col :span="12" style="padding-right: 20px">
        <c-col :span="24">
          <el-form-item label="Reference" prop="fidgrp.rec.ownref">
            <c-input v-model="model.fidgrp.rec.ownref" maxlength="16"></c-input>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item label="Total Amount Paid" prop="totpad">
            <c-input v-model="model.totpad"></c-input>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item label="Charges and Deducts" prop="totamtbak">
            <c-input v-model="model.totamtbak"></c-input>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item label="Total amount Cleared" prop="totclr">
            <c-input v-model="model.totclr"></c-input>
          </el-form-item>
        </c-col>
      </c-col>
      <!-- ============右边================= -->
      <c-col :span="12" style="padding-left: 20px">
        <c-col :span="24">
          <el-form-item label="Name" prop="fidgrp.rec.nam">
            <c-input v-model="model.fidgrp.rec.nam" maxlength="40"></c-input>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <c-ptap :model="model" :isAdrblk="false" :isAdrVisible="false"
            :argadr="{ title: 'Buyer', grp: 'lrdgrp', rol: 'buy' }"></c-ptap>
        </c-col>
        <c-col :span="24">
          <c-ptap :model="model" :isAdrblk="false" :isAdrVisible="false"
            :argadr="{ title: 'Ex-factor', grp: 'lrdgrp', rol: 'exf' }"></c-ptap>
        </c-col>
      </c-col>
      <c-col :span="24">
        <c-table max-height="300px" style="text-align: center;margin-bottom: 10px" stripe :list="model.cddList || []"
          :paginationShow="false" :border="true">
          <el-table-column label="Document Details">
            <el-table-column label="Doc.Ref." width="120" prop="ref">
              <template slot-scope="scope">
                <c-input v-model="scope.row.ref" maxlength="12"> </c-input>
              </template>
            </el-table-column>
            <el-table-column label="Doc.Type" width="120" prop="doctyp">
              <template slot-scope="scope">
                <c-select v-model="scope.row.doctyp" dbCode="doctp1" style="width: 100%">
                </c-select>
              </template>
            </el-table-column>
            <el-table-column label="Open Date" width="160" prop="opndat">
              <template slot-scope="scope">
                <c-date-picker type="date" v-model="scope.row.opndat" style="width: 100%"></c-date-picker>
              </template>
            </el-table-column>
            <el-table-column label="Cur" width="100" prop="cur">
              <template slot-scope="scope">
                <c-select v-model="scope.row.cur" dbCode="curtxt" style="width: 100%">
                </c-select>
              </template>
            </el-table-column>
            <el-table-column label="Doc.Amt" width="200" prop="amt">
              <template slot-scope="scope">
                <el-form-item label-width="0">
                  <c-input-currency v-model="scope.row.amt" :currency="scope.row.cur"></c-input-currency>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="Doc.Paid" width="160" prop="docpad">
              <template slot-scope="scope">
                <c-input v-model="scope.row.docpad" maxlength="12"> </c-input>
              </template>
            </el-table-column>

            <el-table-column label="Pay/Reass Amt" width="200" prop="payamt">
              <template slot-scope="scope">
                <el-form-item label-width="0" >
                  <c-input-currency v-model="scope.row.payamt" :currency="scope.row.cur"></c-input-currency>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="Bank Charge" width="200" prop="bnkchg">
              <template slot-scope="scope">
                <el-form-item label-width="0" >
                  <c-input-currency v-model="scope.row.bnkchg" :currency="scope.row.cur"></c-input-currency>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="Deduction Amt" width="200" prop="dedamt">
              <template slot-scope="scope">
                <el-form-item label-width="0">
                  <c-input-currency v-model="scope.row.dedamt" :currency="scope.row.cur"></c-input-currency>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column label="Payment Type" width="300" prop="paytyp">
              <template slot-scope="scope">
                <el-form-item label-width="0">
                  <c-select v-model="scope.row.paytyp" dbCode="edipay" style="width: 100%">
                  </c-select>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column label="Payment Date" width="160" prop="paydat">
              <template slot-scope="scope">
                <el-form-item label-width="0">
                  <c-date-picker type="date" v-model="scope.row.paydat" style="width: 100%"></c-date-picker>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column label="Payment Value Date" width="160" prop="payvaldat">
              <template slot-scope="scope">
                <el-form-item label-width="0" >
                  <c-date-picker type="date" v-model="scope.row.payvaldat" style="width: 100%"></c-date-picker>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="Reverse" width="80" prop="revflg">
              <template slot-scope="scope">
                <c-checkbox v-model="scope.row.revflg"></c-checkbox>
              </template>
            </el-table-column>
            <el-table-column label="Reass Reason " width="300" prop="rearem">
              <template slot-scope="scope">
                <el-form-item label-width="0" >
                  <c-select v-model="scope.row.rearem" dbCode="rearem" style="width: 100%">
                  </c-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="" prop="docnam" width="auto">
              <template slot="header" slot-scope="scope">
                <c-row>
                  <c-col :span="12">
                    <div style="float: right">
                      <span class="add_del_button add_button" @click="addTableValue">+</span>
                      <span class="add_del_button" @click="deleteTable">-</span>
                    </div>
                  </c-col>
                </c-row>
              </template>
            </el-table-column>
          </el-table-column>
        </c-table>
      </c-col>
      <!-- ==================左边================ -->
      <c-col :span="12" style="padding-right: 20px">
        <c-col :span="24">
          <el-form-item label="Payment Batch Nbr" prop="fidgrp.rec.paybatnum">
            <c-input v-model="model.fidgrp.rec.paybatnum" maxlength="35"></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item label="" prop="fidgrp.rec.dirflg" class="checkbox-left">
            <c-checkbox v-model="model.fidgrp.rec.dirflg" true-label="X" false-label="">
              Indirect Payment</c-checkbox>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item label="" prop="unpflg" class="checkbox-left">
            <c-checkbox v-model="model.unpflg" true-label="X" false-label="">
              Unpaid by buyer</c-checkbox>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item label="Payment Method" prop="paymtd">
            <c-select v-model="model.paymtd" style="width: 100%" dbCode="paymtd"></c-select>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item label="Payment Channel" prop="paychg">
            <c-select v-model="model.paychg" style="width: 100%" dbCode="paychg"></c-select>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item label="RemitNumber" prop="rmtnum">
            <c-input v-model="model.rmtnum" maxlength="35"></c-input>
          </el-form-item>
        </c-col>
      </c-col>
      <!-- ============右边================= -->
      <c-col :span="12" style="padding-left: 20px">
        <c-col :span="24">
          <el-form-item label="Outgoing Type" prop="fitp.outype.comflg">
            <c-select v-model="model.fitp.outype.comflg" style="width: 100%" dbCode="comflg"></c-select>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item label="Message Text" prop="inf">
            <c-input type="textarea" v-model="model.inf" maxlength="35" show-word-limit></c-input>
          </el-form-item>
        </c-col>
      </c-col>
    </c-col>
  </div>
</template>
<script>
import Api from "~/service/Api";
import commonProcess from "~/mixin/commonProcess";
import CodeTable from "~/config/CodeTable";
import Event from "../event";
import Utils from "~/utils";

export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [commonProcess, Event],
  data() {
    return {

    };
  },
  methods: {
    addTableValue(index) {
      var newTableValue = Object.assign({}, this.newValue);
      const serial = Utils.generateUUID();
      newTableValue.serialNum = serial;
      this.model.cddList.splice(index - 1, 0, newTableValue);
    },
    deleteTable(index) {
      this.model.cddList.splice(index, 1);
    },
  },
  created: function () { },
};
</script>
<style></style>