index.vue

<template>
<el-form :model="model" :rules="rules" ref="modelForm" label-width="120px" size="small" style="height:100%;" :validate-on-rule-change="false">
  <el-container style="height:100%;">
  
    <el-main style="padding:0">
      
            <el-container style="height:100%">
            <el-main style="padding:0">
              <c-tabs :value="tabVal" class="fulltab" v-model="todoActive" type="card" @tab-click="handleClick">

                <el-tab-pane  v-for="item in codes.todo" :key="item.value" :label="item.label" :name="item.value">
                  <s-todo :todoType="item.value"/>
                </el-tab-pane>
              </c-tabs>
            </el-main>
            </el-container>
          
    </el-main>
    <div style="width:8px;background-color:#E8E8E8;"></div>
    <el-aside>              
          <div class="rightPanel">
          <c-page title="牌价">
          <div class="e-table-wrapper">
              <c-table
                :data="model.offp.xrtlst"
                  style="width: 100%"
                  >
                  <el-table-column
                    prop="cur"
                    label="币种"
                    sortable
                    >
                    <template slot-scope="scope">
                      <span>{{
                          findCodeLabel(codes.curtxt,scope.row.cur)
                         }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="buyrat"
                    label="买入价"
                    sortable
                    >
                  </el-table-column>
                  <el-table-column
                    prop="midrat"
                    label="中间价"
                    sortable
                    >
                  </el-table-column>
                  <el-table-column
                    prop="selrat"
                    label="卖出价"
                    sortable
                    >
                  </el-table-column>
                </c-table>
        </div>
          </c-page>
          <div style="height:16px;background-color:#E8E8E8"></div>
          <c-page title="利率">
          <div class="e-table-wrapper">
              <c-table
                :data="model.offp.iralst"
                  style="width: 100%"
                  >
                  <el-table-column
                    prop="cur"
                    label="币种"
                    sortable
                    >
                    <template slot-scope="scope">
                      <span>{{ findCodeLabel(codes.relflg,scope.row.cur)}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="iratyp"
                    label="类型"
                    sortable
                    >
                  </el-table-column>
                  <el-table-column
                    prop="due"
                    label="期限"
                    sortable
                    >
                    <template slot-scope="scope">
                      <span>{{ findCodeLabel(codes.dbfmethod,scope.row.due) }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="basrat"
                    label="利率"
                    sortable
                    >
                  </el-table-column>
                </c-table>
                
            </div>
          </c-page>
        </div>
      </el-aside>
      
      
    
  </el-container>
  </el-form>
</template>
<script>
import Api from "~/service/Api"
import commonProcess from "~/mixin/commonProcess"
import Pattern from "~/model/Office/Pattern"
import Default from "~/model/Office/Default";
import Check from "~/model/Office/Check";
import CodeTable from "~/config/CodeTable"
import s_todo from "./TodoItem"

export default {
    name: 'Office',
    components:{"s-todo":s_todo},
    mixins: [commonProcess],
    computed: {

    },
    provide() {
        return {
            root: this
        }
    },
    data(){
        return {
          tabVal: CodeTable.todo[0].value,
          todoActive:"WAT",
          codes:{
                dsp:CodeTable.dsp,
                busflg:CodeTable.busflg,
                actiontype:CodeTable.actiontype,
                cur:CodeTable.cur,
                ptytyp:CodeTable.ptytyp,
                staflg:CodeTable.staflg,
                paytyp:CodeTable.paytyp,
                payattr:CodeTable.payattr,
                balancemode:CodeTable.balancemode,
                bopcustype:CodeTable.bopcustype,
                payeeattr:CodeTable.payeeattr,
                boppaytype:CodeTable.boppaytype,
                debcdtflg:CodeTable.debcdtflg,
                acttyp:CodeTable.acttyp,
                payflg:CodeTable.payflg,
                buscod:CodeTable.buscod,
                datsrc:CodeTable.datsrc,
                sndselflg:CodeTable.sndselflg,
                relflg:CodeTable.relflg,
                payacttyp:CodeTable.payacttyp,
                curtxt:CodeTable.curtxt,
                dbfmethod:CodeTable.dbfmethod,
                bustyp:CodeTable.bustyp,
                todo:CodeTable.todo,
                swftyp:CodeTable.swftyp,
                payeraccttype:CodeTable.payeraccttype,
                oratyp:CodeTable.oratyp,
                chato:CodeTable.chato,
                opertype:CodeTable.opertype,
                bopyesno:CodeTable.bopyesno,
                custyp:CodeTable.custyp,
                selten:CodeTable.selten,
                dsp2:CodeTable.dsp2,
                liqtyp:CodeTable.liqtyp,
            },
          model:{
              offp:{
                todotyp:[],			//  待办类型		.offp.todotyp
                todolst:[],			//  		.offp.todolst
                selten:"",			//  		.offp.selten
                xrtlst:[],			//  		.offp.xrtlst
                iralst:[],			//  		.offp.iralst
              },
          },
          checkRules: Check,
          defaultRules: Default,
          pattern: Pattern,
          rules:null
        }
    },
    methods:{
        handleClick(index, row){
            console.log(index)
        },
    },
    mounted:async function(){

        console.log("进入office交易");
        if(1) return

        let rtnmsg = await this.init()
        console.log(rtnmsg)
        if(rtnmsg.code == SUCCESS)
        {
           //TODO 处理数据逻辑
          this.model.offp.todolst = rtnmsg.data.offp_todolst || []
          this.model.offp.iralst = rtnmsg.data.offp_iralst || []
          this.model.offp.xrtlst = rtnmsg.data.offp_xrtlst || []
        }
        else
        {
            this.$notify.error({title: '错误',message: '服务请求失败！'});
        }
    }
}
</script>
<style>
  .rightPanel{
    display: flex;
    height: 100%;
    flex-direction: column;
  }
  .rightPanel .e-table-wrapper{
    height: 100%;
  }
   .fulltab.el-tabs{
        display: flex;
        height: 100%;
        flex-direction: column;
    }
    .fulltab.el-tabs .el-tabs__content{
        flex:1;
    }
    .fulltab.el-tabs .el-tabs__content .el-tab-pane{
        height: 100%;
    }
</style>