Setp.vue

<template>
  <c-row>
    <c-row>
      <!-- ====================左边======================= -->
      <c-col :span="11">
        <c-col :span="24">
          <c-col :span="22">
            <el-form-item
              label="Reference"
              prop="bodgrp.rec.ownref"
              style="width: 100%"
            >
              <c-input
                v-model="model.bodgrp.rec.ownref"
                maxlength="16"
                placeholder="请输入Reference"
                style="width: 95%"
                disabled
              ></c-input>
            </el-form-item>
          </c-col>
          <c-col :span="2">
            <c-button
              style="margin: 0 10px 0 0; padding: 0 10px"
              size="small"
              type="primary"
              icon="el-icon-search"
            ></c-button>
          </c-col>
        </c-col>

        <c-col :span="12">
          <el-form-item label="Document Amount" prop="bodgrp.cbs.max.cur">
            <c-select
              disabled
              v-model="model.bodgrp.cbs.max.cur"
              style="width: 100%"
              placeholder="请选择Currency"
            >
              <el-option
                v-for="item in codes.cur"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </c-select>
          </el-form-item>
        </c-col>
        <c-col :span="12">
          <el-form-item
            style="text-align: left"
            label-width="5px"
            prop="bodgrp.cbs.max.amt"
          >
            <c-input-currency
              disabled
              v-model="model.bodgrp.cbs.max.amt"
              style="text-align: left; width: 100%"
              placeholder="请输入Document Amount"
              @keyup.enter.native="
                defaultFunction('bodgrp.cbs.max.amt', model.bodgrp.cbs.max.amt)
              "
            ></c-input-currency>
          </el-form-item>
        </c-col>
        <c-col :span="12">
          <el-form-item label="Open Amount" prop="bodgrp.cbs.opn1.cur">
            <c-select
              disabled
              v-model="model.bodgrp.cbs.opn1.cur"
              style="width: 100%"
              placeholder="请选择Currency"
            >
              <el-option
                v-for="item in codes.cur"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </c-select>
          </el-form-item>
        </c-col>
        <c-col :span="12">
          <el-form-item
            style="text-align: left"
            label-width="5px"
            prop="bodgrp.cbs.opn1.amt"
          >
            <c-input-currency
              disabled
              v-model="model.bodgrp.cbs.opn1.amt"
              style="text-align: left; width: 100%"
              placeholder="请输入Warehouse/Insurance"
              @keyup.enter.native="
                defaultFunction(
                  'bodgrp.cbs.opn1.amt',
                  model.bodgrp.cbs.opn1.amt
                )
              "
            ></c-input-currency>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item
            label="Collection Condition"
            prop="bodgrp.rec.doctypcod"
          >
            <c-select
              disabled
              v-model="model.bodgrp.rec.doctypcod"
              style="width: 100%"
              placeholder="请选择Collection Condition"
            >
              <el-option
                v-for="item in codes.doctypcod"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </c-select>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item label="Document Set Status" prop="bodgrp.rec.docsta">
            <c-select
              disabled
              v-model="model.bodgrp.rec.docsta"
              style="width: 100%"
              placeholder="请输入Document Set Status"
              :code="codes.docstabot"
            ></c-select>
          </el-form-item>
        </c-col>
        <c-col :span="18">
          <el-form-item label="Tenor Specification" prop="bodgrp.rec.matdat">
            <c-date-picker
              type="date"
              disabled
              v-model="model.bodgrp.rec.matdat"
              style="width: 100%"
              placeholder="请选择Maturity Date"
            ></c-date-picker>
          </el-form-item>
        </c-col>
        <c-col :span="5">
          <el-form-item label="" label-width="5px">
            <c-input
              disabled
              v-model="model.bodgrp.rec.matpercnt"
              placeholder="请输入Tenor Specification"
            ></c-input>
          </el-form-item>
        </c-col>
        <c-col :span="1">
          <el-form-item label="Days" label-width="5px"> </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item label="  " prop="bodgrp.rec.matperbeg">
            <c-select
              disabled
              v-model="model.bodgrp.rec.matperbeg"
              style="width: 100%"
              placeholder="请选择Start of Maturity Period MATBEG"
            >
              <el-option
                v-for="item in codes.matperbeg"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </c-select>
          </el-form-item>
        </c-col>
        <c-col :span="12">
          <el-form-item label="Order Date" prop="bodgrp.rec.rcvdat">
            <c-date-picker
              type="date"
              disabled
              v-model="model.bodgrp.rec.rcvdat"
              style="width: 100%"
              placeholder="请选择Order Date"
            ></c-date-picker>
          </el-form-item>
        </c-col>
        <c-col :span="12">
          <el-form-item label="Presentation Date" prop="bodgrp.rec.predat">
            <c-date-picker
              type="date"
              disabled
              v-model="model.bodgrp.rec.predat"
              style="width: 100%"
              placeholder="请选择Presentation Date"
            ></c-date-picker>
          </el-form-item>
        </c-col>
      </c-col>
      <!-- ====================右边======================= -->
      <c-col :span="11" :offset="1">
        <c-col :span="24">
          <el-form-item label="Name" prop="bodgrp.rec.nam">
            <c-input
              align="middle"
              v-model="model.bodgrp.rec.nam"
              maxlength="40"
              disabled
              placeholder="请输入Externally Displayed Name to Identify the Contract"
            ></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item label="Drawer Ref" prop="bodgrp.drr.pts.ref">
            <c-input
              disabled
              v-model="model.bodgrp.drr.pts.ref"
              maxlength="16"
              placeholder="请输入Drawer"
            ></c-input>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item label="" prop="bodgrp.drr.pts.nam">
            <c-input
              disabled
              v-model="model.bodgrp.drr.pts.nam"
              maxlength="40"
              placeholder="请输入Name of Party"
            ></c-input>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item label="Collecting Bank Ref" prop="bodgrp.col.pts.ref">
            <c-input
              disabled
              v-model="model.bodgrp.col.pts.ref"
              maxlength="16"
              placeholder="请输入Collecting Bank"
            ></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item label="" prop="bodgrp.col.pts.nam">
            <c-input
              disabled
              v-model="model.bodgrp.col.pts.nam"
              maxlength="40"
              placeholder="请输入Name of Party"
            ></c-input>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item label="Drawee Ref" prop="bodgrp.dre.pts.ref">
            <c-input
              disabled
              v-model="model.bodgrp.dre.pts.ref"
              maxlength="16"
              placeholder="请输入Drawee"
            ></c-input>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item label="" prop="bodgrp.dre.pts.nam">
            <c-input
              disabled
              v-model="model.bodgrp.dre.pts.nam"
              maxlength="40"
              placeholder="请输入Name of Party"
            ></c-input>
          </el-form-item>
        </c-col>
      </c-col>
    </c-row>

    <div class="line" />
    <hr />

    <!-- next part -->
    <c-col :span="24" style="margin-bottom: 35px">
      <c-istream-table
        ref="table"
        :list="model.liaall.tenstm.rows || []"
        :columns="stmData.columns"
        :showSelection="true"
        v-on:multipleSelect="multipleSelect"
        prop="liaall.tenstm"
      >
      </c-istream-table>
    </c-col>

    <c-col :span="12">
      <c-col :span="24">
        <el-form-item label="" prop="bodgrp.rec.focflg">
        <c-checkbox v-model="model.bodgrp.rec.focflg" 
          >Free of Payment</c-checkbox>
        </el-form-item>
      </c-col>
      <c-col :span="12">
        <el-form-item label="Reduction Amt." prop="setmod.doccur">
          <c-select
            disabled
            v-model="model.setmod.doccur"
            style="width: 100%"
            placeholder="请选择Currency"
          >
            <el-option
              v-for="item in codes.cur"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </c-select>
        </el-form-item>
      </c-col>
      <c-col :span="12">
        <el-form-item
          style="text-align: left"
          label-width="5px"
          prop="setmod.redamt"
        >
          <c-input-currency
            :disabled="model.bodgrp.rec.focflg == 'X'"
            v-model="model.setmod.redamt"
            style="text-align: left; width: 100%"
            placeholder="请输入Reduction Amt"
            @keyup.enter.native="defaultFunction('setmod.redamt', model.setmod.redamt)"
          ></c-input-currency>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label="" prop="mtabut.clsflg">
        <c-checkbox
          :disabled="this.flag1"
          v-model="model.mtabut.clsflg"
          >Close Contract</c-checkbox>
        </el-form-item>
      </c-col>

      <c-col :span="12">
        <el-form-item label="Settle Amt." prop="setmod.doccur">
          <c-select
            disabled
            v-model="model.setmod.doccur"
            style="width: 100%"
            placeholder="请选择Currency"
          >
            <el-option
              v-for="item in codes.cur"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </c-select>
        </el-form-item>
      </c-col>
      <c-col :span="12">
        <el-form-item
          style="text-align: left"
          label-width="5px"
          prop="setmod.docamt"
        >
          <c-input-currency
            v-model="model.setmod.docamt"
            style="text-align: left; width: 100%"
            placeholder="请输入Settle Amt."
            @change="change1"
            @keyup.enter.native="defaultFunction('setmod.docamt', model.setmod.docamt)"
          ></c-input-currency>
        </el-form-item>
      </c-col>
    </c-col>

    <c-col :span="24" style="height: 24px; margin-top: 20px">
      <el-form-item label="Bills to Pay Back" class="messageLabel">
      </el-form-item>
    </c-col>
    <c-col :span="24" style="height: 0px; margin-top: 5px">
      <el-divider></el-divider>
    </c-col>
    <c-col :span="24">
      <c-table :data="model.bptbck.bptbckg" style="width: 100%">
        <el-table-column prop="ownref" label="Reference" width="389px">
        </el-table-column>
        <el-table-column prop="opncur" label="Cur" width="389px">
        </el-table-column>
        <el-table-column prop="opnamt" label="Open Amount" width="389px">
        </el-table-column>
        <el-table-column prop="bckamt" label="Amount Paid" width="389px">
        </el-table-column>
      </c-table>
    </c-col>
  </c-row>
</template>
<script>
import Api from "~/service/Api";
import commonProcess from "~/mixin/commonProcess";
import CodeTable from "~/config/CodeTable";
import Event from "~/model/Botset/Event";

export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [commonProcess],
  data() {
    return {
      flag1: true,
      stmData: {
        columns: [
          '1 1 "Type" 250',
          '2 2 "Dbt" 250',
          '3 3 "Cdt" 250',
          '4 4 "Cur" 250',
          '5 5 "Amt" 250 2 8 1 4',
          //'6 6 "Mat.Dat." 250 4 7 1',
          {
            index: 6,
            position: 6,
            width: 250,
            render: (item, scope) => {
              return scope.row[item.prop] === "null"
                ? ""
                : scope.row[item.prop];
            },
            label: "Mat.Dat.",
          },
        ],
        data: [],
      },
    };
  },
  computed: {
    clsflg: {
      get() {
        return this.model.mtabut.clsflg === "O";
      },
      set(val) {
        this.model.mtabut.clsflg = val ? "C" : "O";
      },
    },
    
    flag() {
      return this.model.mtabut.coninf.usr.extkey == "";
    },
  },
  mounted() {
    this.$nextTick(() => {});
  },

  methods: {
    ...Event,
    async change1(){
      if(this.model.bodgrp.cbs.opn1.amt<=this.model.setmod.docamt){
            this.flag1=false;
  //          this.model.mtabut.clsflg = "C";
          }
      else if(this.model.bodgrp.cbs.opn1.amt>this.model.setmod.docamt){
            this.flag1=true;
   //         this.model.mtabut.clsflg = "O";
    }},
    // async change() {
    //   if (this.model.bodgrp.rec.focflg === "X") {
    //     this.model.setmod.redamt = this.model.setmod.docamt;
    //   } else {
    //     this.model.setmod.redamt = "0.00";
    //   }
    // },
    async multipleSelect(selection) {
            if (selection.length > 1) {
                this.$notify({
                    title: "error",
                    message: "You cannot select more than one tenor",
                    type: "error",
                });
            } else {
                let chkIds;
                if (selection.length === 0) {
                    chkIds = [];
                    this.model.liaall.tensetstm.rows = [];
                    this.flag1=true;
                } else {
                    chkIds = [selection[0] + 1];
                }
                //
                console.log(this.model.liaall.tensetstm);
                let params = { chkDst: "liaall.tenstm", chkIds };
                console.log(params);
                const rtnmsg = await this.executeRule("liaall.tenstm", params);
                console.log(rtnmsg);
                if (rtnmsg.respCode == SUCCESS) {
                    this.updateModel(rtnmsg.data);
                } else {
                    this.$notify.error({ title: "错误", message: "服务请求失败！" });
                }
            }
        },
  },

  created: function () {},
};
</script>
<style>
</style>