infsea.vue 12.4 KB
<template>
  <div class="eibs-tab">
    <c-col :span="24">
      <c-col :span="12">
        <el-form-item label="Party" prop="extkey" :rules="[{ required: true, message: '必输项'}]">
          <c-input v-model="model.extkey" @change="onSearchPtyNam" placeholder="" />
        </el-form-item>
        <el-form-item label="Limit" prop="lgbtyp">
          <c-select v-model="model.lgbtyp" placeholder="请输入二级福费廷" dbCode="lgbtyp" :filterKey="['FFT']" />
        </el-form-item>
        <c-col :span="24">
          <c-col :span="12">
            <el-form-item label="额度到期日" style="width: 100%">
              <el-date-picker
                    v-model="model.expdatsta"
                    type="date"
                    value-format="yyyy-MM-dd"
                    format="yyyy-MM-dd"
                    :picker-options="expdatstaPicker"
                    placeholder="请选择开始时间">
              </el-date-picker>
            </el-form-item>
          </c-col>
          <c-col :span="12">
            <el-form-item label="至" style="width: 100%">
              <el-date-picker
                    v-model="model.expdatend"
                    type="date"
                    value-format="yyyy-MM-dd"
                    format="yyyy-MM-dd"
                    :picker-options="expdatendPicker"
                    placeholder="请选择结束时间">
              </el-date-picker>
            </el-form-item>
          </c-col>
        </c-col>
      </c-col>
      <c-col :span="12">
        <el-form-item label="Party name" prop="nam">
          <c-input v-model="bchnam" disabled placeholder="" />
        </el-form-item>
        <el-form-item label="Status" prop="lgbsta">
          <c-select v-model="model.lgbsta" placeholder="请输入额度状态" dbCode="lgbsta" :filterKey="['N','B','E']" style="width:100%" />
        </el-form-item>
      </c-col>
    </c-col>

    <c-col :span="24">
      <span style="float: left">
        <el-button type="primary" size="small" @click="lgbAdd">新增</el-button>
      </span>
      <span style="float: right">
        <el-button size="small" @click="handleReset">重置</el-button>
        <el-button type="primary" icon="el-icon-search" size="small" @click="onSearch()" :loading="loadingPtyStatus">查询
        </el-button>
      </span>
    </c-col>

    <c-col :span="24" style="padding-top: 20px">
      <span>额度列表</span>
      <el-table id='lgbstm' v-loading="load" ref="gidBt" :data="tableData" style="width:100%" size="small" height="calc(100vh - 480px)" :highlight-current-row="true">
        <el-table-column label="Limit Type" prop="lgbtyp" align="left" min-width="150" sortable>
          <template slot-scope="scope">
            <span> {{getCodelabel(scope.row.lgbtyp,'lgbtyp') }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="Status" prop="lgbsta" align="left" min-width="150" :show-overflow-tooltip="true" sortable>
          <template slot-scope="scope">
            <span> {{getCodelabel(scope.row.lgbsta,'lgbsta') }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="Cur" prop="lgbcur" align="left" min-width="150" :show-overflow-tooltip="true" sortable>
        </el-table-column>
        <el-table-column label="Limit Amount" prop="lgbamt" align="left" min-width="120" :show-overflow-tooltip="true" sortable>
        </el-table-column>
        <el-table-column label="Used Amount" prop="lgauseamt" align="left" min-width="120" :show-overflow-tooltip="true" sortable>
        </el-table-column>
        <el-table-column label="Pending Amt." prop="lganacamt" align="left" min-width="150" :show-overflow-tooltip="true" sortable>
        </el-table-column>
        <el-table-column label="Maturity" prop="lgbexpdat" align="left" min-width="150" :show-overflow-tooltip="true" sortable>
        </el-table-column>
        <el-table-column fixed="right" prop="op" label="操作" width="240px">
          <template slot-scope="scoped">
            <c-button @click="toDbelgb(scoped.row)" style="margin-left: 5px" size="small" type="primary">编辑</c-button>
            <c-button @click="toDbdlgb(scoped.row)" style="margin-left: 5px" size="small" type="danger">删除</c-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :page-sizes="[10, 20, 50, 100, 500]" :total="pagination1.total" :page-size="pagination1.pageSize" :current-page="pagination1.pageNum" @current-change="handleCurrentChange1"  @size-change="handleSizeChange1" layout="total, sizes, prev, pager, next, jumper" >
      </el-pagination>
    </c-col>

    <c-col :span="24" style="padding-top: 20px">
      <span>额度明细</span>
      <el-table id='detstm' v-loading="load" ref="gidBt" :data="detstmList" style="width:100%" size="small" height="calc(100vh - 480px)" :highlight-current-row="true">
        <el-table-column label="Reference" prop="ownref" align="left" min-width="150" sortable>
        </el-table-column>
        <el-table-column label="Bus." prop="objtyp" align="left" min-width="150" :show-overflow-tooltip="true" sortable>
        </el-table-column>
        <el-table-column label="Bus. no." prop="objinr" align="left" min-width="150" :show-overflow-tooltip="true" sortable>
        </el-table-column>
        <el-table-column label="Cur" prop="cur" align="left" min-width="120" :show-overflow-tooltip="true" sortable>
        </el-table-column>
        <el-table-column label="Balance" prop="amt" align="left" min-width="120" :show-overflow-tooltip="true" sortable>
        </el-table-column>
        <el-table-column label="Limit cur" prop="xrfcur" align="left" min-width="150" :show-overflow-tooltip="true" sortable>
        </el-table-column>
        <el-table-column label="Limit amt" prop="xrfamt" align="left" min-width="150" :show-overflow-tooltip="true" sortable>
        </el-table-column>
        <el-table-column label="Rate" prop="rate" align="left" min-width="150" :show-overflow-tooltip="true" sortable>
        </el-table-column>
        <el-table-column :formatter="formatStatus" label="Status" prop="status" align="left" min-width="150" :show-overflow-tooltip="true" sortable>
        </el-table-column>
      </el-table>
      <el-pagination :page-sizes="[10, 20, 50, 100, 500]" :total="pagination2.total" :page-size="pagination2.pageSize" :current-page="pagination2.pageNum" @current-change="handleCurrentChange2"  @size-change="handleSizeChange2" layout="total, sizes, prev, pager, next, jumper" >
      </el-pagination>
    </c-col>
  </div>
</template>

<script>
import Api from "~/service/Api";
import codes from "~/config/CodeTable";
import { queryLgbStm,queryPtyNam,queryLgoByIdLgbInr } from "~/service/manage/lgb.js";

export default {
  props: ["model", "codes"],
  inject: ["root"],
  data() {
    return {
      tableData: [],
      detstmList: [],
      pagination1: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      pagination2: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        lgbinr: ''
      },
      dbCodes: {
        lgbtyp: [],
        lgbsta: []
      },
      loadingPtyStatus: false,
      editable: false,
      load: false,
      bchnam: '',
      changeFlg: false,
      expdatstaPicker: this.beginDate(),
      expdatendPicker: this.processDate()
    };
  },
  methods: {
    onSearchPtyNam() {
      this.bchnam = '';
      this.changeFlg = true;
      queryPtyNam(this.model).then(res => {
        if (res.respCode == "AAAAAA") {
          if (res.data && this.model.extkey) {
            this.bchnam = res.data.nam;
          }
        }
      });
    },
    lgbAdd() {
      this.$router.push({ name: "Dbalgb" });
    },
    toDbelgb(row) {
      this.$router.push({ name: "Dbelgb", query: { inr: row.lgbinr } });
    },
    toDbdlgb(row) {
      this.$router.push({ name: "Dbdlgb", query: { inr: row.lgbinr } });
    },
    onSearch() {
      if(!this.model.extkey) {
        this.$notify.error("请填写Party");
        this.handleReset();
        return;
      } 
      this.loadingPtyStatus = true;
      this.model.pageNum = 1;
      this.model.pageSize = this.pagination1.pageSize;
      this.onDbilgbSearch();
    },
    onDbilgbSearch() {
      queryLgbStm(this.model).then(res => {
        if (res.code == "AAAAAA") {
          this.loadingPtyStatus = false;
          this.tableData = res.list;
          this.pagination1.total = res.total;
          this.pagination1.pageNum = res.pageNumber;
          this.pagination1.pageSize = res.pageSize;
          if (res.list && res.list.length > 0) {
            this.model.lgbinr = res.list[0].lgbinr;
            if (this.changeFlg) {
              this.queryLgoBy();
            }
          }
        } else {
          this.loadingPtyStatus = false;
          this.tableData = [];
          this.$message.info(res.messsage);
        }
      });
    },
    queryLgoBy() {
      if (this.changeFlg) {
        this.changeFlg = false;
      }
      this.pagination2.lgbinr = this.model.lgbinr;
      queryLgoByIdLgbInr(this.pagination2).then(res => {
        if (res.code == "AAAAAA") {
          this.detstmList = res.list;
          this.pagination2.total = res.total;
          this.pagination2.pageNum = res.pageNumber;
          this.pagination2.pageSize = res.pageSize;
        } else {
          this.detstmList = [];
          this.$message.info(res.messsage);
        }
      });
    },
    handleReset() {
      this.model.extkey = null;
      this.model.lgbtyp = null;
      this.bchnam = null;
      this.model.lgbsta = null;
      this.model.expdatsta = null;
      this.model.expdatend = null;
      this.tableData = [];
      this.detstmList = [];
      this.pagination1.total = 0;
      this.pagination1.pageNum = 1;
      this.pagination1.pageSize = 10;
      this.pagination2.total = 0;
      this.pagination2.pageNum = 1;
      this.pagination2.pageSize = 10;
    },
    async getdbCode(codeType, uil, codeNam) {
      let params = {
        codeType: codeType,
        uil: uil ? uil : "EN"
      };
      let rtnmsg = await Api.post("/manager/dic/listDicInfo", params);
      if (rtnmsg.respCode === SUCCESS) {
        let curList = rtnmsg.data.map(item => ({
          value: item.codeValue,
          label: item.codeName
        }));
        this.dbCodes[codeNam] = curList;
      }
    },
    getCodelabel(value, codenam) {
      const codeobj = this.dbCodes[codenam].find(obj => obj.value === value);
      return codeobj ? codeobj.label : value;
    },
    beginDate(){
      const self = this
      return {
        disabledDate(time){
          if (self.model.expdatend) {  //如果结束时间不为空,则小于结束时间
            return time.getTime() > new Date(self.model.expdatend).getTime();
          } else {
            // return time.getTime() > Date.now()//开始时间不选时,结束时间最大值小于等于当天
          }
        }
      }
    },
    processDate() {
      const  self = this
      return {
        disabledDate(time) {
          if (self.model.expdatsta) {  //如果开始时间不为空,则结束时间大于开始时间
            return time.getTime() < new Date(self.model.expdatsta).getTime() - 86400000;  
        } else {
            // return time.getTime() > Date.now()//开始时间不选时,结束时间最大值小于等于当天
          }
        }
      }
    },
    formatStatus(row, column, cellValue) {
        if (cellValue === "A") {
          return "Accepted";
        } else if (cellValue === "R") {
          return "Rejected";
        } else if (cellValue === "N") {
          return "Pending";
        } else if (cellValue === "W") {
          return "Warning";
        } else {
          return "Open";
        }
    },
    // pageSize改变
    handleSizeChange1(val) {
      this.pagination1.pageNum = 1;
      this.pagination1.pageSize = val;
      this.onSearch();
    },
    // 页码改变
    handleCurrentChange1(val) {
      this.pagination1.pageNum = val;
      this.onSearch();
    },
    handleSizeChange2(val) {
      this.pagination2.pageNum = 1;
      this.pagination2.pageSize = val;
      this.queryLgoBy();
    },
    handleCurrentChange2(val) {
      this.pagination2.pageNum = val;
      this.queryLgoBy();
    }
  },
  mounted() {
    this.getdbCode("lgbtyp", "CN", "lgbtyp");
    this.getdbCode("lgbsta", "CN", "lgbsta");
  }
};
</script>

<style scoped>
.table-button-item-list {
  padding: 0;
  margin: 0;
}
.table-button-item-list li {
  list-style: none;
  padding: 5px 0;
  text-align: center;
  color: #606266;
  cursor: pointer;
}
</style>