ovwp.vue

<template>
	<div class="eibs-tab">
		<c-col :span="24" class="col-left">
      	<c-col :span="8">
			    <el-form-item label="查询日期" style="width: 100%">
						<c-date-picker type="date" v-model="model.recpan.date" style="width: 100%" value-format="yyyy-MM-dd"></c-date-picker>
          </el-form-item>
			  </c-col>
      	<c-col :span="8">
          <el-form-item label="币种" prop="recpan.cur">
            <c-select v-model="model.recpan.cur" placeholder="请选择币种" style="width:100%" dbCode="CURTXT" />
          </el-form-item>
        </c-col>
			<c-col :span="8">
				<el-form-item label="分行" prop="recpan.branch">
					<c-select v-model="model.recpan.branch" placeholder="请选择分行" style="width:100%" >
            <el-option v-for="item in bchlst" :key="item.inr" :value ="item.branch" :label="item.branch + '-' + item.bchname">
                  </el-option>
          </c-select>
				</el-form-item>
			</c-col>
		</c-col>

		<c-col :span="24" style="margin-bottom: 15px;">
			<c-col :span="12" style="text-align: left">
				<el-button type="success" size="medium" @click="exportExcel" :disabled="stmData.data.length == 0" style="margin-left: 20px">导出excel</el-button>
			</c-col>
			<c-col :span="12" style="text-align: right">
				<el-button type="primary" icon="el-icon-search" style="margin-right: 20px" size="small" @click="formSerach()">查询</el-button>
			</c-col>

		</c-col>
		<c-col :span="24">
			<el-table
						ref="configTable"
            :data="stmData.data"
            :showButtonFlg="true"
						height="calc(100vh - 400px)"
						size="small" 
            :border="true"
						:highlight-current-row="true"
            @sort-change="sortChange"
        >
          <el-table-column
              v-for="(item, key) in stmData.columns"
              :key="key + Math.random()"
              :label="item.label"
              :prop="item.prop"
              :min-width="item.width"
              show-overflow-tooltip
               sortable="custom"
          >
          <template  slot-scope="scope">
             <div style="text-align: right" v-if="item.prop.indexOf('jio1JE') >= 0 ">{{moneyFormat(scope.row[item.prop])}}</div>
              <div style="text-align: right" v-else-if="item.prop.indexOf('zhhuye') >= 0">{{moneyFormat(scope.row[item.prop])}}</div>
             <div style="text-align: center" v-else-if="item.prop.indexOf('huobdh') >= 0">{{getCodelabel(scope.row[item.prop],'curval')}}</div>
              <div v-else>{{scope.row[item.prop]}}</div>
          </template>
          </el-table-column>
        </el-table>
			<el-pagination layout="total, sizes,prev, pager, next, jumper" :total="pagination.total" :page-size="pagination.pageSize" 
              :current-page.sync="pagination.pageNumber"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange">
			</el-pagination>
		</c-col>
	</div>
</template>

<script>
import codes from "~/config/CodeTable";
import moment from "moment";
import event from "../event";
import MessageView from "~/components/business/docpan/views/MessageView";
export default {
  props: ["model"],
  inject: ["root"],
  mixins: [event],
  components: { MessageView },
  data() {
    return {
      bchlst:[],
      column:'',//排序字段
      order:'',//正序倒序
      pagination: {
        pageNumber: 1,
        pageSize: 10,
        total: 0
      },
			tableData: [],
      stmData:{
			columns:[
				{
					label:"账号",
					prop:"zhangh",
          width: '200px',
				},
				{
					label:"日期",
					prop:"jioyrq",
          width: '150px',
				},
				{
					label:"币种",
					prop:"huobdh",
          width: '80px',
				},
				{
					label:"借贷标志",
					prop:"jiedbz",
          width: '120px',
				},
				{
					label:"金额",
					prop:"jio1JE",
          width: '150px',
				},
				{
					label:"余额",
					prop:"zhhuye",
          width: '150px',
				},{
					label:"余额方向",
					prop:"yueefx",
          width: '120px',
				},
				{
					label:"摘要",
					prop:"zhyodm",
          width: '250px',
				},
				{
					label:"交易编码",
					prop:"jiaoym",
          width: '200px',
				},
				{
					label:"柜员流水",
					prop:"guiyls",
          width: '200px',
				},
			],
      data:[],
      }
    };
  },
  mounted() {
    this.getdbCode('curval','','curval');
    this.getdbCode('dbtcdf','','dbtcdf');
    this.getBranchList();
  },
  methods: {
    //预览功能
    handleDisplay(row) {
      this.$refs.msgView.fileViewDispaly(-1, row);
    },
    //打印功能
    printContent(index, row) {
      this.$refs.msgView.printContent(index, row);
    }
  }
};
</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>