Infsea.vue

<template>
  <div class="eibs-tab">
    <c-list-search @form-reset="handleReset" @form-search="handleSearch">
      <!-- 持续展示区 -->
      <template v-slot="searchSlot">
        <el-form class="m-table-search-form" ref="paramsForm" label-position="right" label-width="110px" size="small" :model="model">
          <el-row>
            <c-col :span="8">
              <el-form-item label="索赔编号" style="width: 100%">
                <c-input v-model="model.seaownref" maxlength="16" placeholder="请输入索赔编号"></c-input>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="索赔日期" style="width: 100%">
                <c-col :span="11">
                  <c-date-picker type="date" v-model="model.opndatfrom" style="width: 100%" placeholder="起始日期" value-format="yyyy-MM-dd"></c-date-picker>
                </c-col>
                <c-col :span="2" style="text-align: center">
                  <label style="display: inline-block; width: 100%">-</label>
                </c-col>
                <c-col :span="11">
                  <c-date-picker type="date" v-model="model.opndatto" style="width: 100%" placeholder="结束日期" value-format="yyyy-MM-dd"></c-date-picker>
                </c-col>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="开立类别" style="width: 100%">
                <c-select collapse-tags multiple v-model="model.gidopentyps" :filterKey="['GNBH','GJBH']" style="width: 100%" placeholder="请选择开立类别" :clearable="true" dbCode="trntyp">
                </c-select>
              </el-form-item>
            </c-col>
            <!-- <c-col :span="8">
							<el-form-item label="进口/出口保函" style="width: 100%">
								<c-select v-model="model.isGuarantee" style="width: 100%" placeholder="请选择进口/出口保函" dbCode="isguar" :clearable="true">
								</c-select>
							</el-form-item>
						</c-col> -->
          </el-row>

          <!-- 可控展示区 -->
          <el-row v-show="searchSlot.searchToggle">
            
            <c-col :span="8">
              <el-form-item label="客户号" style="width: 100%" prop="ptyExtkey">
                <c-input v-model="model.ptyExtkey" maxlength="24" placeholder="请输入客户号" :disabled="seaptyNotEmpty" @change="ptyExtkeyChange"></c-input>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="当事人BIC编号" style="width: 100%" prop="seapty">
                <c-input v-model="model.seapty" maxlength="24" placeholder="请输入当事人BIC编号" :disabled="ptyExtkeyNotEmpty" @change="seaptyChange"></c-input>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="当事人参考号" style="width: 100%">
                <c-input v-model="model.searef" maxlength="16" placeholder="请输入当事人参考号"></c-input>
              </el-form-item>
            </c-col>

            <c-col :span="8">
              <el-form-item label="保函品种" style="width: 100%">
                <c-select v-model="model.seagtyp" style="width: 100%" placeholder="请选择保函品种"  sort="SRT" dbCode="TYPGAR" uil="CN"	:filterKey="['1','2','3','4','5','6','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','O','P','Q','R','S','T','U','V','W','X','Y','Z']" :clearable="true">
                </c-select>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="金额" style="width: 100%">
                <c-col :span="8">
                  <c-select v-model="model.seacur" style="width: 100%" clearable placeholder="请选择币种" dbCode="curtxt">
                  </c-select>
                </c-col>
                <c-col :span="1" style="text-align: center">
                  <label style="display: inline-block; width: 100%"></label>
                </c-col>
                <c-col :span="15">
                  <c-input-currency v-model="model.seaamt" style="width: 100%" :maxlength="18" placeholder="请输入金额" :currency="model.seacur"></c-input-currency>
                </c-col>
              </el-form-item>
            </c-col>
            <!-- <c-col :span="8">
              <el-form-item label="角色" style="width: 100%" prop="searol">
                <c-select v-model="model.searol" style="width: 100%" placeholder="请选择角色" dbCode="rolall" :clearable="true">
                </c-select>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="业务简略信息" style="width: 100%">
                <c-input v-model="model.nam" maxlength="40" placeholder="请输入业务简略信息"></c-input>
              </el-form-item>
            </c-col> -->
            <c-col :span="8">
              <el-form-item label="业务状态" style="width: 100%">
                <c-select v-model="model.seasta" style="width: 100%" placeholder="请选择状态" :clearable="true">
                     <el-option v-for="item in seastas" :key="item.value" :value ="item.value" :label="item.label">
                  </el-option>
                </c-select>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="分离式保函"  style="width: 100%">
                <c-select v-model="model.fenlishi" style="width: 100%"  clearable placeholder="请选择分离式保函类型" >
                  <el-option v-for="item in fenlsh" :key="item.value" :value ="item.value" :label="item.label">
                    </el-option>
                </c-select>
              </el-form-item>
					</c-col>
            <c-col :span="24">
              <c-col :span="4">
                <el-form-item style="text-align: right;" class="checkbox-left">
                  <c-checkbox v-model="model.cmtflg" true-label='X' false-label=''>跨境人民币保函</c-checkbox>
                </el-form-item>
              </c-col>
              <c-col :span="4">
                <el-form-item style="text-align: right;margin-right: 5px;" class="checkbox-left">
                  <c-checkbox v-model="model.fingua" true-label='Y' false-label='' >对外担保</c-checkbox>
                </el-form-item>
              </c-col>
            </c-col>
<!-- 
            <c-col :span="8">
              <el-form-item label="是否已授权" style="width: 100%">
                <c-select v-model="model.seaauthorized" style="width: 100%" placeholder="请选择是否已授权" dbCode="cxmflg" :clearable="true">

                </c-select>
              </el-form-item>
            </c-col> -->


          </el-row>
        </el-form>
      </template>
    </c-list-search>
    <el-row style="margin-bottom: 10px;">
      <el-col :span="24" style="margin-top: 10px;margin-bottom: 10px;">
        <c-button class="medium_bcs" style="margin-left: 20" size="medium" type="success" @click="exportExcel">导出Excel</c-button>
      </el-col>
    </el-row>
    <el-col :span="24" style="margin-top: 10px">
      <div style="height: 90%">
        <c-col :span="24">
          <el-table id='infgidBSTableRef' ref="infgidBSTableRef" v-loading="load" :data="tableData"  @sort-change="sortChange" style="width:100%" height="calc(100vh - 400px)" size="small" :border="true" :highlight-current-row="true">
            <el-table-column v-for="(item,key) in columns" :key="key" :label="item.label" :prop="item.prop" sortable="custom"  :fixed="item.fixed" :show-overflow-tooltip="true" :min-width="item.width">
              <template slot-scope="scope">
                <div v-if="item.prop ==='gcdfromflg'">{{fromflg[scope.row[item.prop]]}}</div>
                <div v-else-if="item.prop ==='gcdgartyp'">{{gartyp[scope.row[item.prop]]}}</div>
                <div v-else-if="item.prop ==='gcdhndtyp'">{{hndtyp[scope.row[item.prop]]}}</div>
                <div style="text-align: right" v-else-if="item.prop.indexOf('amt') > 0">{{moneyFormat(scope.row[item.prop])}}</div>
                <div v-else>{{scope.row[item.prop]}}</div>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="150px">
              <template slot="header">
                <c-col :span="11" style="text-align: center">
                  <span>操作</span>
                </c-col>
                <c-button icon="el-icon-s-tools" @click="columnSetting(tableColumns)"></c-button>
              </template>
              <template slot-scope="scope">
                <c-button style="margin-left: 0" type='primary' size="small" @click="toDetail(scope.row)" slot="reference">详情
                </c-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" :page-size="pagination.pageSize" :current-page="pagination.pageNum"  @size-change="handleSizeChange" @current-change="currentChange">
          </el-pagination>
        </c-col>
        <!-- 自定义列属性弹框 -->
        <el-dialog v-dialogDrag class="showColumnDialog" v-if="showDig" :visible.sync="showDig" :title="'自定义列属性'" appenD-to-body style="padding:20px">
          <el-form-item label-width="0" style="display: flex;align-items: center">
            <el-checkbox-group v-model="columnGroup" @change="handleColumnChange">
              <el-checkbox class="selectColumnClass checkbox-left" style="margin-right:55px;width:150px" v-for="item in digColumns" :key="item.prop" :label="item.label">
                {{ item.label }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <span slot="footer" style="text-align:center">
            <el-checkbox class="selectAllClass checkbox-left" :indeterminate="
						columnGroup.length > 0 &&
						columnGroup.length < digColumns.length
					" v-model="selectAll" @change="setAll">全选</el-checkbox>
            <el-button type="primary" @click="saveColumnEvent()" style="margin-left:10px;">保存</el-button>
          </span>
        </el-dialog>
      </div>
    </el-col>
  </div>
</template>
<script>
import BusNavbar from "~/components/business/BusNavbar";
import event from "../event";
import Default from "../model/default";

export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [event, Default],
  components: { "m-busbtn": BusNavbar },
  data() {
    return {
      seaptyNotEmpty: false,
      ptyExtkeyNotEmpty: false,
      ownref: "",
      dialogTableVisible: false,
      dialogFlag: true,
      isGuarantee: "",
      seastas:[
        {value:'C',label:'已结清'},
        {value:'O',label:'未结清'},
      ],
       fenlsh:[
        // {value:'0',label:'非分离式'},
        {value:'1',label:'融资类'},
        {value:'2',label:'非融资类'},
      ],
      tableColumns: [
        {
          prop: "gcdownref",
          label: "索赔编号",
          width: 170,
          isShow: true
        },
        {
          prop: "gcdmaxcur",
          label: "币种",
          width: 80,
          isShow: true
        },
        {
          prop: "gcdmaxamt",
          label: "金额",
          width: 150,
          isShow: true
        },
        {
          prop: "gcdopncur",
          label: "余额币种",
          isShow: false,
          width: 70
        },
        {
          prop: "gcdopnamt",
          label: "余额",
          isShow: true,
          width: 150
        },
        {
          prop: "gcdopndat",
          label: "索赔日期",
          isShow: true,
          width: 110
        },
        {
          prop: "gcdclsdat",
          label: "闭卷日期",
          isShow: true,
          width: 110
        },
        {
          prop: "gcdaplextkey",
          label: "客户号",
          isShow: true,
          width: 150
        },
        {
          prop: "gcdaplnam",
          label: "申请人名称",
          isShow: true,
          width: 200
        },
        {
          prop: "gcdbenextkey",
          label: "受益人编号",
          isShow: false,
          width: 150
        },
        {
          prop: "gcdbennam",
          label: "受益人名称",
          isShow: true,
          width: 200
        },

        {
          prop: "gcdownusr",
          label: "经办",
          width: 120,
          isShow: true
        }
      ],
      load: false,
      selectAll: [], // 是否全选
      digColumns: [], // 弹框的所有列
      columnGroup: [], // 弹框选中的列
      showDig: false, // 弹框的展示/隐藏
      tableData: [],
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
    };
  },
  mounted() {
    this.formSubmit();
  },
  computed: {
    columns() {
      return this.tableColumns.filter(item => item.isShow);
    }
  },
  methods: {
    formSubmit() {
      this.model.column = ''
      this.model.order = ''
      this.handleSearch();
    },
    	// pageSize改变
		handleSizeChange(val) {
			this.pagination.pageNum = 1;
			this.pagination.pageSize = val;
			this.handleSearch();
		},
    async currentChange(num) {
      this.pagination.pageNum = num;
      this.handleSearch();
    },
    async onChoose(code, prePageId) {
      //跳转交易
      this.routerPush({
        name: code.charAt(0).toUpperCase() + code.substring(1),
        params: { prePageId }
      });
      this.$refs.childs.initdialog = false;
    },

    closeTrn(refId) {
      this.$refs[refId].doClose();
    },

    toDetail(row) {
      if (row.opentyp == "GCBH") {
        this.routerPush({
          path: "/business/gcdinf",
          query: { row: row }
        });
      } else {
        this.routerPush({
          path: "/business/ncdinf",
          query: { row: row }
        });
      }
    }
  },
  created: function() {},
  watch: {
    "model.gidgrp.rec.ownref": function() {}
  }
};
</script>
<style scoped>
</style>