Infsea.vue

<template>
  <c-content>
  <div class="eibs-tab">  
        <template >
                <el-form
                    class="m-table-search-form"
                    ref="paramsForm"
                    label-position="left"
                    label-width="110px"
                    size="small"
                >
          
        <el-row>  
         <c-col :span="24">                                              
            <c-col :span="8">
                <el-form-item label="资金发布编号" prop="fudref" style="width:100%">
                    <c-input  v-model="model.fudref" maxlength="50"  placeholder="请输入资金发布编号" style="width:330px"></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.fromdate"  placeholder="请选择Opening between" style="width:160px"></c-date-picker>
                  </c-col>
                   <c-col :span="2" style="padding:0 0 0 20px">
                      <label style="display: inline-block; width: 100%">-</label>
                  </c-col>
                  <c-col :span="11" >
                    <c-date-picker type="date"  v-model="model.todate"  placeholder="请选择Open Date to" style="width:160px"></c-date-picker>     
                  </c-col> 
                </el-form-item>
            </c-col>
            <c-col :span="8">
                <el-form-item label="买卖标识" prop="buysel" style="width: 100%">
                    <c-select
                        v-model="model.buysel"
                        style="width: 100%"
                        placeholder="买卖标识"
                      >
                        <el-option
                        v-for="item in type"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                         </el-option>
                    </c-select>

                </el-form-item>
            </c-col>
          </c-col> 
        </el-row>
        <c-col :span="24" style="text-align: right; height: 36.8px">
          
             <el-button size="small" @click="handleReset">重置</el-button>
             <el-button
            type="primary"
            icon="el-icon-search"
            size="small"
            @click="handleSearch()"
            >查询</el-button >
          
          </c-col>                 
  </el-form>
   <c-col :span="24">
      <div style="border-bottom: 10px solid rgb(232, 232, 232)"></div>
    </c-col>
 
 </template>

 <c-col :span="24">
   <div class="table">
    <!-- <c-istream-table :list="itemList"> -->

     <el-table :data="itemList.slice((currentPage-1)*PageSize,currentPage*PageSize)" :border="true" style="width:80%,text-align:center" :header-cell-style="{background:'rgb(235, 235, 235)',color:'#000'}">
       <el-table-column label="资金发布编号" width="240px" prop="fudref"></el-table-column>   
     <el-table-column label="买卖标识" width="200px" prop="buysel"></el-table-column>
     <el-table-column label="归属机构" width="200px" prop="ownbch"></el-table-column>
     <el-table-column label="业务编号" width="200px" prop="ownref"></el-table-column>
     <el-table-column label="经办机构" width="200px" prop="usrbch"></el-table-column>
     <el-table-column label="创建日期" width="200px" prop="credat"></el-table-column>
     <el-table-column fixed="right" prop="op" label="操作" width="200px">
        <template slot-scope="scope">
            <c-button
              style="margin-left: 0"
              size="small"
              
              @click="Detail(scope)"
            >
              详情
            </c-button>

            <c-button
              style="margin-left: 0"
              size="small"
              type="primary"
              @click="Edit(scope)"
            >
              处理
            </c-button>
            <c-button
              style="margin-left: 0"
              size="small"
              type="primary"
              @click="Del(scope.$index)"
            >
              删除
            </c-button>
          </template>
        </el-table-column>
        </el-table>    
      <!-- </c-istream-table>      -->
      <div class="tabListPage">
           <el-pagination @size-change="handleSizeChange" 
                          @current-change="handleCurrentChange" 
                          :current-page="currentPage" 
                          :page-sizes="pageSizes" 
                          :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper" 
                          :total="itemList.length">
             </el-pagination>
       </div>
      </div>
    </c-col>  
    <el-dialog :visible.sync="showPanel" :title="opttitle" append-to-body :before-close="cancel">
      <el-form
          class="m-table-search-form"
          ref="paramsForm"
          label-position="right"
          label-width="110px"
          size="small" 
        >
        
          <c-row>
            <c-col :span="24">
              <c-col :span="24">
                <el-form-item label="资金发布编号" prop="edit.fudref" style="width: 100%" >
                 <c-input
                    v-model="model.edit.fudref"
                    placeholder="请输入fudref"
                    type="textarea"
                    :rows="4"
                    maxlength="200"
                    show-word-limit
                    :disabled="isDetail"
                    style="width: 95%"
                  ></c-input>
                </el-form-item>     
              </c-col>
              <c-col :span="24">
                <c-input v-if="showIndex" style="visibility: hidden" v-model="model.edit.ownbch" ></c-input>
                <el-form-item label="归属机构" prop="ownbch" style="width: 100%">
                  <c-input
                    v-model="model.edit.ownbch"
                    placeholder="请输入ownbch"
                    type="textarea"
                    :rows="4"
                    maxlength="200"
                    show-word-limit
                    :disabled="isDetail"
                    style="width: 95%"
                  ></c-input>
                </el-form-item>
              </c-col>
              <c-col :span="24">
                <el-form-item label="资金发布有效期" prop="edit.valday" style="width: 100%">
                  <c-date-picker
                    type="date"
                    v-model="model.edit.valday"
                    style="width: 95%"
                    placeholder="请选择"
                    :disabled="isDetail"
                    ></c-date-picker>
                </el-form-item>
              </c-col>
              <c-col :span="24">
                <el-form-item label="业务编号" prop="edit.ownref" style="width: 100%">
                 <c-input
                    v-model="model.edit.ownref"
                    placeholder="请输入ownref"
                    type="textarea"
                    :rows="4"
                    maxlength="200"
                    show-word-limit
                    :disabled="isDetail"
                    style="width: 95%"
                  ></c-input>
                </el-form-item>
              </c-col>
              <c-col :span="24">
                <el-form-item label="经办机构 " prop="edit.usrbch" style="width: 100%">
                  <c-input
                    v-model="model.edit.usrbch"
                    placeholder="请输入usrbch"
                    type="textarea"
                    :rows="4"
                    maxlength="200"
                    show-word-limit
                    :disabled="isDetail"
                    style="width: 95%"
                  ></c-input>
                </el-form-item>
              </c-col>
               <c-col :span="24">
                <el-form-item label="买卖标识" prop="edit.buysel" style="width: 100%">
                 <c-input
                    v-model="model.edit.buysel"
                    placeholder="请输入buysel"
                    type="textarea"
                    :rows="4"
                    maxlength="200"
                    show-word-limit
                    :disabled="isDetail"
                    style="width: 95%"
                  ></c-input>
                </el-form-item>
              </c-col>
            </c-col>
          <c-col :span="24" style="text-align: center; height: 36.8px">
            <el-button
              type="primary"
              size="small"
              @click="submitData"
              v-if="optType"
              >提交</el-button
            >
            <el-button style="margin-left: 0" size="small" @click="cancel">
              返回
            </el-button> 
          </c-col>
          </c-row>
        </el-form>
    </el-dialog>
  

  </div>
  </c-content>  
</template>

<script>
import Api from "~/service/Api"
import commonProcess from "~/mixin/commonProcess";
import CodeTable from "~/config/CodeTable"
import Event from "~/model/Fund/Event"
// import  BusNavbar from "~/views/Business//BusNavbar"
import {fundInfo} from "~/service/elec"
import {fundQuery} from "~/service/elec"


export default {
    inject: ['root'],
    props:["model","codes"],
    mixins: [commonProcess],
   
    data(){
        return {
            

            showPanel: false,
            opttitle:"",
            isDetail:true,
            optType:true,
            showIndex:false,
            type:[
              {label:"买入",value:"BUY"},
              {label:"卖出",value:"SEL"},
              
            ],
      
            
      

            

            // 总数据
            itemList:[],
           // 默认显示第几页
           currentPage:1,
           // 总条数，根据接口获取数据长度(注意：这里不能为空)
           total:0,
           // 个数选择器（可修改）
           pageSizes:[5,10,15,20,25],
           // 默认每页显示的条数（可修改）
           PageSize:5,

            
             
        }
    },
    created(){
       fundInfo().then(res=>{
            this.itemList=res;
         
            
        })

        

    },
    
    methods:{...Event,
      
        
       handleReset: function () {
        this.model.fudref='';
        this.model.fromdate='';
        this.model.todate='';
        this.model.buysel='';
      },
      handleSearch(){
         fundQuery({
          "fudref":this.model.fudref,
          "fromdate":this.model.fromdate,
          "todate":this.model.todate,
          "buysel":this.model.buysel  
        }).then(res=>{
           this.itemList=res;
        })
        
   
       
      },
     

      Detail(scope){   
      this.model.edit.fudref = scope.row.fudref;
      this.isDetail = true;
      this.opttitle = "资金信息详情";
      this.optType = false;
      this.showPanel = true;
    },
    
    Edit(scope){
  
      this.model.edit.fudref = scope.row.fudref;
      this.isDetail = false;
      this.opttitle = "资金信息修改";
      this.optType = true;
      this.showPanel = true;
    },
    cancel(){
      this.showPanel=false;
    },

    submitData(){},
// 每页显示的条数
       handleSizeChange(size) {
           // 改变每页显示的条数 
           this.PageSize=size;
           // 注意：在改变每页显示的条数时，要将页码显示到第一页
           this.currentPage=1;
                  

       },
         // 显示第几页
       handleCurrentChange(currentPage) {
           // 改变默认的页数
           this.currentPage=currentPage;
           
       },
    }
}
  


</script>
<style>
.table {
  margin-top: 20px;
}

.el-table .cell {
  line-height: 15px; 
}



</style>