Infsea.vue

<template>
  <div class="eibs-tab">
    <c-list-search @form-reset="handleReset" @form-search="formSubmit">
      <template v-slot:extendsRight>
        <el-button type="primary" icon="el-icon-download" size="small" @click="exportExcel">导出</el-button>
      </template>
      <template v-slot="searchSlot">
        <el-form class="m-table-search-form" ref="paramsForm" label-position="right" label-width="110px" size="small">
          <el-row>
            <c-col :span="8">
              <el-form-item label="业务编号" prop="infcon.seaownref" style="width: 100%">
                <c-input v-model="model.infcon.seaownref" maxlength="16" placeholder="请输入业务编号"></c-input>
              </el-form-item>
            </c-col>

            <c-col :span="8">
              <el-form-item label="日期" prop="infcon.opndatfrom" style="width: 100%">
                <c-col :span="11">
                  <c-date-picker type="date" v-model="model.infcon.opndatfrom" placeholder="请选择起始日期" value-format="yyyy-MM-dd" style="width: 100%"></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.infcon.opndatto" placeholder="请选择截至日期" style="width: 100%" value-format="yyyy-MM-dd"></c-date-picker>
                </c-col>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="汇款类型" prop="infcon.seapaytyp" style="width: 100%">
                <c-select v-model="model.infcon.seapaytyp" :code="cpdtyp" style="width: 100%" placeholder="请选择汇款类型"></c-select>
              </el-form-item>
            </c-col>

          </el-row>

          <el-row v-show="searchSlot.searchToggle">
            <c-col :span="8">
              <el-form-item label="客户号" prop="infcon.ptyExtkey" style="width: 100%">
                <c-input v-model="model.infcon.ptyExtkey" maxlength="24" placeholder="请输入客户号"></c-input>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="当事人参考号" prop="infcon.searef" style="width: 100%">
                <c-input v-model="model.infcon.searef" maxlength="16" placeholder="请输入当事人参考号"></c-input>
              </el-form-item>
            </c-col>

            <c-col :span="8">
              <el-form-item label="当事人BIC/名称" prop="infcon.seapty" style="width: 100%">
                <c-input v-model="model.infcon.seapty" maxlength="24" placeholder="当事人BIC编码"></c-input>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="币种" prop="infcon.seacur" style="width: 100%">
                <c-select-cur v-model="model.infcon.seacur" style="width: 100%" placeholder="请选择币种"
                  :isShowKeyAndLabel="true" dbCode="CURTXT" sort="SRT">
                </c-select-cur>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="金额区间" prop="infcon.seaamtfr" style="width: 100%">
                <c-col :span="11">
                  <c-input-currency v-model="model.infcon.seaamtfr" placeholder="请输入金额下限"
                    style="width: 100%"></c-input-currency>
                </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-input-currency v-model="model.infcon.seaamtto" placeholder="请输入金额上限"
                    style="width: 100%"></c-input-currency>
                </c-col>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item class="labelbr" :label="labelName" prop="infcon.countcode">
                <c-business-cty customModifykey="ctycod" v-model="model.infcon.countcode"
                  placeholder="请选择国家/地区代码"></c-business-cty>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="清算路径" prop="infcon.route">
                <c-select v-model="model.infcon.route" style="width:100%" placeholder="请选择清算路径" @change="changeRoute"
                  dbCode="CPTROU" uil="CN" sort="SRT">
                </c-select>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="报文类型" prop="infcon.msgtyp" style="width: 100%">
                <c-select v-model="model.infcon.msgtyp" :disabled="isMsgtyp" style="width: 100%" dbCode="RMTMSG"
                  :filterKey="msgtypFilter" placeholder="请选择报文类型">
                </c-select>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="前端渠道" prop="infcon.channel" style="width: 100%">
                <c-select v-model="model.infcon.channel" style="width: 100%" :code="channels" placeholder="请选择前端渠道">
                </c-select>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item style="text-align: right;" class="checkbox-left">
                <c-checkbox v-model="model.infcon.tsnflg" true-label='X' false-label=''>同名划转标志</c-checkbox>
              </el-form-item>
            </c-col>
          </el-row>
        </el-form>
      </template>
    </c-list-search>
    <div>
      <c-col :span="24">
        <el-table v-loading="load" ref="configTable" :data="stmData.data" :showButtonFlg="true"
          height="calc(100vh - 260px)" size="small" :border="true" :highlight-current-row="true" @sort-change="sortChange"
          @row-dblclick="TableDblRow">
          <el-table-column v-for="(item, key) in columns" :key="key + Math.random()" :label="item.label" :prop="item.prop"
            :min-width="item.width" sortable="custom">
            <template slot-scope="scope">
              <div v-if="item.prop === 'stagod'">{{ getCodelabel(scope.row[item.prop], 'stagod') }}</div>
              <div style="text-align: right" v-else-if="item.prop.indexOf('nom1amt') >= 0">
                {{ moneyFormat(scope.row[item.prop], scope.row.nom1cur) }}</div>
              <div style="text-align: right" v-else-if="item.prop.indexOf('nomxrfamt') >= 0">
                {{ moneyFormat(scope.row[item.prop], 'CNY') }}</div>
              <div v-else-if="item.prop == 'channel'">{{ getLabel(channels, scope.row[item.prop]) }}</div>
              <div style="text-align: center" v-else-if="item.prop.indexOf('cptrou') >= 0">
                {{ getCodelabel(scope.row[item.prop], 'cptrou') }}</div>
              <div v-else>{{ scope.row[item.prop] }}</div>
            </template>
          </el-table-column>
          <el-table-column fixed="right" prop="op" label="操作" width="140px">
            <template slot="header">
              <c-col :span="11" style="text-align: center">
                <span>操作</span>
              </c-col>
              <c-button icon="el-icon-s-tools" @click="columnSetting(stmData.columns)"></c-button>
            </template>
            <template slot-scope="scope">
              <c-button style="margin-left: 0" type='primary' size="small" @click="toDetail(scope.row)"
                slot="reference">Info
              </c-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-box">
          <el-pagination style="margin-right: 30px;" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page.sync="pagination.pageIndex" :page-sizes="[10, 20, 50, 100, 500]"
            :page-size="pagination.pageSize" layout="total,sizes, prev, pager, next" :total="pagination.total">
          </el-pagination>
        </div>
      </c-col>
    </div>
    <!-- 自定义列属性弹框 -->
    <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>
</template>
<script>
import event from '../event'

export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [event],
  components: {},
  data() {
    return {
      load: false,
      column: '',//排序字段
      order: '',//正序倒序
      selectAll: [], // 是否全选
      digColumns: [], // 弹框的所有列
      columnGroup: [], // 弹框选中的列
      showDig: false, // 弹框的展示/隐藏
      isMsgtyp: false, //报文类型栏位灰显
      labelName: '交易对手\n国家代码',
      cpdtyp: [
        { label: '汇出汇款', value: 'O' },
        { label: '汇入汇款', value: 'I' },
      ],
      msgtyp: [
        { label: 'MT103', value: '103' },
        { label: 'MT202', value: '202' },
        { label: 'MT910', value: '910' },
        { label: 'CMT100', value: 'CMT' },
        { label: '境内外币清算', value: '100' },
        { label: 'Other', value: 'OTH' },
      ],
      channels: [
        { value: "YPT", label: "云平台" },
        { value: "ZT", label: "中间业务平台" },
        { value: "EJS", label: "阳光E结算" },
      ],
      // 表格相关
      stmData: {
        columns: [
          {
            label: '业务编号',
            prop: 'ownref',
            width: '150px',
            isShow: true
          },
          {
            label: '币种',
            prop: 'nom1cur',
            width: '80px',
            isShow: true
          },

          {
            label: '金额',
            prop: 'nom1amt',
            width: '150px',
            isShow: true

          },
          {
            label: '金额折人民币',
            prop: 'nomxrfamt',
            width: '150px',
            isShow: true

          },
          {
            label: '创建日期',
            prop: 'credat',
            width: '150px',
            isShow: true
          },
          {
            label: '到期日',
            prop: 'valdat',
            width: '150px',
            isShow: true
          },
          {
            label: '清算路径',
            prop: 'cptrou',
            width: '150px',
            isShow: true
          },
          {
            label: '收款人',
            prop: 'pyeExtkey',
            width: '180px',
            isShow: true

          },
          {
            label: '收款人名称',
            prop: 'pyeName',
            width: '300px',
            isShow: true
          },
          {
            label: '汇款人',
            prop: 'orcExtkey',
            width: '180px',
            isShow: true
          },
          {
            label: '汇款人名称',
            prop: 'orcName',
            width: '180px',
            isShow: true
          },
          {
            label: '汇款机构',
            prop: 'oriExtkey',
            width: '180px',
            isShow: true
          },
          {
            label: '汇款机构名称',
            prop: 'oriName',
            width: '180px',
            isShow: true
          },
          {
            label: '付款行',
            prop: 'pybExtkey',
            width: '180px',
            isShow: true
          },
          {
            label: '付款行名称',
            prop: 'pybName',
            width: '180px',
            isShow: true
          },
          {
            label: '渠道业务编号',
            prop: 'chnref',
            width: '180px',
            isShow: true
          },
          {
            label: '前端渠道',
            prop: 'channel',
            width: '150px',
            isShow: true
          },

          {
            label: '收款人常驻国家代码',
            prop: 'pyectycod',
            width: '180px',
            isShow: true
          },
          {
            label: '付款人常驻国家代码',
            prop: 'orcctycod',
            width: '180px',
            isShow: true
          },
          {
            label: '分行名称',
            prop: 'bchName',
            width: '250px',
            isShow: true
          },
          {
            label: '经办柜员',
            prop: 'usrNam',
            width: '150px',
            isShow: true
          },
        ],
        data: [],
      },
      pagination: {
        pageIndex: 1,
        pageSize: 10,
        total: 0
      },

      // 处理
      initdialog: false,
      handlerDataList: [],
      currentHandleRow: {}
    };
  },
  methods: {},
  created: function () {
  },
  mounted() {
    this.formSubmit();
    this.getdbCode('cptrou', '', 'cptrou');
  },
  computed: {
    columns() {
      return this.stmData.columns.filter(item => item.isShow);
    },
    msgtypFilter() {
      let filterKey = []
      if (this.model.infcon.route) {
        // if(this.model.infcon.route == 'HNHZ'){
        //  this.isMsgtyp = true
        // }else{
        this.isMsgtyp = false
        // }
      } else {
        this.isMsgtyp = true
      }
      if (this.model.infcon.route == 'SWIFT' || this.model.infcon.route == '') {
        filterKey = ['103', '200', '202', 'OTH']
      } else if (this.model.infcon.route == 'CIPS') {
        filterKey = ['CIU', 'CIV']
      } else if (this.model.infcon.route == 'JNWB') {
        filterKey = ['111', '112']
      } else if (this.model.infcon.route == 'HNHZ') {
        filterKey = ['']
      } else if (this.model.infcon.route == 'OTHER') {
        filterKey = ['BEP', 'BEQ', 'BES', 'HVP', 'HVQ', 'HVR']
      }
      return filterKey
    },
  },
};
</script>
<style scope>
.m-table-search {
  padding: 20px 0px 10px 0px;
}

.labelbr {
  white-space: pre-line
}

.pagination-box {
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 10px;
  background: #fff;
  margin-top: 5px;
}

.el-dialog__body {
  padding: 10px 5px 50px;
}

.m-table-search {
  padding: 20px 0px 10px 0px;
}

.btn-group-wrap {
  max-height: 200px;
  width: 100%;
  overflow-y: auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.btn-item {
  margin-bottom: 10px;
  margin-right: 10px;
}
</style>