Chkpnl.vue

<template>
  <div class="eibs-tab">
    <c-col :span="12">
      <!-- S0000005 : 发送接收标识 -->
      <c-col :span="24">
        <el-form-item label="发送接收标识" prop="comchk.sndrcv">
          <c-select v-model="model.comchk.sndrcv" style="width:100%" placeholder="请选择发送接收标识" dbCode="ELC034">
          </c-select>
        </el-form-item>
      </c-col>
      <!-- S0000010 : 报文类型 -->
      <c-col :span="24">
        <el-form-item label="报文类型" prop="comchk.msgtyp">
          <c-select v-model="model.comchk.msgtyp" style="width:100%" :isShowKeyAndLabel="true" dbCode="ELC038" uil="CN">
          </c-select>
        </el-form-item>
      </c-col>
    </c-col>
    <c-col :span="12">
      <!-- S0000010 : 业务日期 -->
      <c-col :span="24">
        <el-form-item label="业务日期" prop="comchk.chkdat">
          <c-date-picker type="date" v-model="model.comchk.chkdat" style="width:100%" placeholder="请选择对账日期"></c-date-picker>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <c-col :span="6">
          <el-form-item>
            <c-button size="small" type="primary" @click="selectElcAndMsg">
              查询
            </c-button>
          </el-form-item>
        </c-col>
        <c-col :span="6">
          <el-form-item>
            <c-button size="small" type="primary" @click="duizhang">
              对账
            </c-button>
          </el-form-item>
        </c-col>
        <c-col :span="6">
          <el-form-item>
            <c-button size="small" type="primary" @click="duizhangDownlaod">
              导出
            </c-button>
          </el-form-item>
        </c-col>
      </c-col>
    </c-col>

    <c-col :span="24" style="height: 10px; margin-bottom: 40px">
			<el-divider></el-divider>
		</c-col>

    <c-col :span="24">
      <div style="font-weight:bold;">人行电证报文信息：</div>
    </c-col>
    <c-col :span="24">
      <el-form-item label-width="0px">
        <el-table border style="width: 100%" :data="model.comchk.elcreclist" height="500">
          <el-table-column type="index" width="100" label="是否匹配">
            <template slot-scope="scope">
              <c-checkbox :value="scope.row['checked']" @click.stop></c-checkbox>
            </template>
          </el-table-column>
          <c-table-column v-for="(item, key) in rhdzData.columns" :key="key" :prop="item.prop" :label="item.label" sortable>
            <template v-slot="{ scope }">
              <span :class="scope.row['flg']=='R'?'redfont':'blackfont'">{{ scope.row[item.prop] }}</span>
            </template>
          </c-table-column>
        </el-table>
      </el-form-item>
    </c-col>
    <c-col :span="24">
      <div style="font-weight:bold;">我行电证报文信息：</div>
    </c-col>
    <c-col :span="24">
      <el-form-item label-width="0px">
        <el-table border style="width: 100%" :data="model.comchk.msglist" height="500">
          <el-table-column type="index" width="100" label="是否匹配">
            <template slot-scope="scope">
              <c-checkbox :value="scope.row['checked']" @click.stop></c-checkbox>
            </template>
          </el-table-column>
          <c-table-column  v-for="(item, key) in whdzData.columns" :key="key" :prop="item.prop" :label="item.label" sortable>
            <template v-slot="{ scope }">
              <span :class="scope.row['flg']=='R'?'redfont':'blackfont'">{{ scope.row[item.prop] }}</span>
            </template>
          </c-table-column>
        </el-table>
      </el-form-item>
    </c-col>

    <c-col :span="24">
      <div class="redfont"> {{model.comchk.chklab}} </div>
    </c-col>
  </div>
</template>
<script>
import event from "../event";

export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [event],
  data() {
    return {
      rhdzData: {
        columns: [
          {
            label: "对账日期",
            prop: "chkdat"
          },
          {
            label: "对账直接参与机构",
            prop: "bnkcod"
          },
          {
            label: "报文标识号",
            prop: "msgid"
          },
          {
            label: "发起接收标识",
            prop: "sndrcv"
          },
          {
            label: "发起直接参与机构",
            prop: "insagt"
          },
          {
            label: "报文类型",
            prop: "msgtyp"
          },
          {
            label: "报文处理状态",
            prop: "prcsta"
          }
        ],
        data: []
      },
      whdzData: {
        columns: [
          {
            label: "发送时间",
            prop: "credattim"
          },
          {
            label: "发送方",
            prop: "sender"
          },
          {
            label: "报文标识号",
            prop: "msgid"
          },
          {
            label: "发送方向",
            prop: "dir"
          },
          {
            label: "接收方",
            prop: "recver"
          },
          {
            label: "报文名称",
            prop: "msgtyp"
          }
        ],
        data: []
      }
    };
  },
  methods: {},
  created: function() {}
};
</script>
<style>
.redfont{
  color:red;
}
.blackfont{
  color:black;
}
</style>