Selp.vue

<template>
  <div class="eibs-tab">
    <!-- <c-list-search @form-reset="selpHandleReset" @form-search="selpHandleSearch">
      <template v-slot="searchSlot"> -->
        <el-form
          class="m-table-search-form"
          ref="paramsForm"
          :inline="true"
          label-position="right"
          label-width="110px"
          size="small"
        >
          <el-row>
            <c-col :span="24" style=""> 
            <c-col :span="8">
              <el-form-item label="业务编号" prop="bopquep.ownref" style="width: 100%">
                <c-input
                  v-model="model.bopquep.ownref"
                  maxlength="16"
                  placeholder="请输入业务编号"
                ></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.bopquep.frmdat"
                      value-format="yyyy-MM-dd"
                      style="width: 100%"
                      placeholder="请选择From"
                    ></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.bopquep.tildat"
                      value-format="yyyy-MM-dd"
                      style="width: 100%"
                      placeholder="请选择Until"
                    ></c-date-picker>
                  </c-col>
                </el-form-item>
              </c-col>
           
            <c-col :span="8">
              <el-form-item label="查询日期类型" prop="bopquep.dattyp" style="width: 100%">
                <c-select
                  v-model="model.bopquep.dattyp"
                  style="width: 100%"
                  placeholder="请选择查询日期类型"
                >
                  <el-option
                    v-for="item in codes.dattyp"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </c-select>
              </el-form-item>
            </c-col>
              </c-col>
                
          <c-col :span="24" style="text-align: right;height:36.8px" v-if="!searchToggle">
            <el-button size="small" @click="selpHandleReset">重置</el-button>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="small"
              @click="selpHandleSearch"
              >查询</el-button
            >
            <el-button type="text" @click="searchToggle=true">
                展开
              <i class="el-icon-arrow-down"></i>
            </el-button>
          </c-col>
           
          </el-row>

          <el-row v-show="searchToggle">
            <c-col :span="24" style="">
             <c-col :span="8">
              <el-form-item label="申报号码" prop="bopquep.rptno" style="width: 100%">
                <c-input
                  v-model="model.bopquep.rptno"
                  maxlength="22"
                  placeholder="请输入申报号码"
                ></c-input>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="业务所属行" prop="bopquep.ownextkey" style="width: 100%">
                <c-select
                  v-model="model.bopquep.ownextkey"
                  style="width: 100%"
                  placeholder="请选择Initial Code"
                >
                </c-select>
              </el-form-item>
            </c-col>
            <c-col :span="8">
              <el-form-item label="客户类型" prop="bopquep.ptytyp" style="width: 100%">
                <c-select
                  v-model="model.bopquep.ptytyp"
                  style="width: 100%"
                  placeholder="请选择客户类型"
                >
                  <el-option
                    v-for="item in codes.ptytyp"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </c-select>
              </el-form-item>
            </c-col>
            </c-col>
            
            <c-col :span="24" style="">
            <c-col :span="8">
              <el-form-item label="客户名称" prop="bopquep.ptynam" style="width: 100%">
                <c-input
                  v-model="model.bopquep.ptynam"
                  style="width: 100%"
                  placeholder="请输入客户名称"
                ></c-input>
              </el-form-item>
            </c-col>

            <c-col :span="8">
              <el-form-item label="结算方式" prop="bopquep.medtyp" style="width: 100%">
                <c-select
                  v-model="model.bopquep.medtyp"
                  style="width: 100%"
                  placeholder="请选择结算方式"
                >
                  <el-option
                    v-for="item in codes.medtyp"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </c-select>
              </el-form-item>
            </c-col>

             <c-col :span="8">
              <el-form-item label="申报类型" prop="bopquep.boptyp" style="width: 100%">
                <c-select
                  v-model="model.bopquep.boptyp"
                  style="width: 100%"
                  placeholder="请选择申报类型"
                >
                  <el-option
                    v-for="item in codes.boptyp"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </c-select>
              </el-form-item>
            </c-col>

            </c-col>
            
            <c-col :span="24" style="">
            <c-col :span="8">
              <el-form-item label="笔数" prop="bopquep.sum" style="width: 100%">
                <c-input
                  v-model="model.bopquep.sum"
                  placeholder="请输入笔数"
                ></c-input>
              </el-form-item>
            </c-col>

            <c-col :span="8">
              <el-form-item label="业务状态" prop="bopquep.staflg" style="width: 100%">
                <c-select
                  v-model="model.bopquep.staflg"
                  style="width: 100%"
                  placeholder="请选择业务状态"
                >
                  <el-option
                    v-for="item in codes.staflg"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </c-select>
              </el-form-item>
            </c-col>
            <c-col :span="8" style="text-align: right;height:36.8px" v-if="searchToggle">
            <el-button size="small" @click="selpHandleReset">重置</el-button>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="small"
              @click="selpHandleSearch"
              >查询</el-button
            >
            <el-button type="text" @click="searchToggle=false">
                收起
              <i class="el-icon-arrow-up"></i>
            </el-button>
          </c-col>
            </c-col>
          </el-row>
        </el-form>
      <!-- </template>
    </c-list-search> -->

    <c-col :span="24" style="">
      <div style="border-bottom: 10px solid rgb(232, 232, 232)">
      </div>
    </c-col>

    <c-row style="margin-top: 20px">
      <c-col style="">
        <c-button size="small" type="primary" style="margin-left:0">导出Excel</c-button>
        <c-button size="small" type="primary" style="margin-left:0">应急导出</c-button>
      </c-col>
    </c-row>

    <el-row>
      <c-col :span="24" style="">
        <c-istream-table :list="stmData.data" :columns="stmData.columns" :showButtonFlg="true">
          <el-table-column fixed="right" prop="op" label="操作" width="200px">
            <template slot="header">
                <c-col :span="11" style="text-align:left"><span>操作</span></c-col>
                <!-- <c-col :span="12" style="text-align:right"><c-button icon="el-icon-s-tools"></c-button></c-col> -->
              </template>
            <template slot-scope="scope">
              <a href="javascript:void(0)" @click="continueEdit(scope.row)"
                >详情</a
              >
              <a href="javascript:void(0)" @click="continueEdit(scope.row)"
                >修改</a
              >
              <a href="javascript:void(0)" @click="continueEdit(scope.row)"
                >删除</a
              >
            </template>
          </el-table-column>
        </c-istream-table>
      </c-col>
    </el-row>

    <!-- <c-col :span="12">
        <el-form-item label="申报类型" prop="bopquep.boptyp">
            <c-select v-model="model.bopquep.boptyp" style="width:100%" placeholder="请选择申报类型">
              </c-select>
        </el-form-item>
       </c-col>
                  
       <c-col :span="12">
        <el-form-item label="From" prop="bopquep.frmdat">
            <c-date-picker type="date"  v-model="model.bopquep.frmdat" style="width:100%"  placeholder="请选择From"></c-date-picker>
        </el-form-item>
       </c-col>
                  
       <c-col :span="12">
        <el-form-item label="Until" prop="bopquep.tildat">
            <c-date-picker type="date"  v-model="model.bopquep.tildat" style="width:100%"  placeholder="请选择Until"></c-date-picker>
        </el-form-item>
       </c-col>
                                                                     
       <c-col :span="12">
        <el-form-item label="至" prop="bopquep.staflg">
            <c-input  v-model="model.bopquep.staflg" maxlength="1"  placeholder="请输入至"></c-input>
        </el-form-item>
       </c-col>
                  
       <c-col :span="12">
        <el-form-item label="查询日期类型" prop="bopquep.dattyp">
            <c-input  v-model="model.bopquep.dattyp" maxlength="1"  placeholder="请输入查询日期类型"></c-input>
        </el-form-item>
       </c-col>
                  
       <c-col :span="12">
        <el-form-item label="Initial Code" prop="bopquep.ownextkey">
            <c-select v-model="model.bopquep.ownextkey" style="width:100%" placeholder="请选择Initial Code">
              </c-select>
        </el-form-item>
       </c-col>
                                   
       <c-col :span="12">
        <el-form-item label="申报号码" prop="bopquep.rptno">
            <c-input  v-model="model.bopquep.rptno" maxlength="22"  placeholder="请输入申报号码"></c-input>
        </el-form-item>
       </c-col>
                                                    
       <c-col :span="12">
        <el-form-item label="客户类型" prop="bopquep.ptytyp">
            <c-select v-model="model.bopquep.ptytyp" style="width:100%" placeholder="请选择客户类型">
              </c-select>
        </el-form-item>
       </c-col>
                                   
       <c-col :span="12">
        <el-form-item label="客户名称" prop="bopquep.ptynam">
            <c-input  v-model="model.bopquep.ptynam" maxlength="50"  placeholder="请输入客户名称"></c-input>
        </el-form-item>
       </c-col>
                                                    
       <c-col :span="12">
        <el-form-item label="结算方式" prop="bopquep.medtyp">
            <c-select v-model="model.bopquep.medtyp" style="width:100%" placeholder="请选择结算方式">
              </c-select>
        </el-form-item>
       </c-col>
                                   
       <c-col :span="12">
        <el-form-item label="业务编号" prop="bopquep.ownref">
            <c-input  v-model="model.bopquep.ownref" maxlength="16"  placeholder="请输入业务编号"></c-input>
        </el-form-item>
       </c-col>
                                   
       <c-col :span="12">
        <el-form-item label="笔数" prop="bopquep.sum">
            <c-input  v-model="model.bopquep.sum"  placeholder="请输入笔数"></c-input>
        </el-form-item>
       </c-col>
                  
       <c-col :span="12">
        <el-form-item label="Selection" prop="dblstm">
            <c-input  v-model="model.dblstm"  placeholder="请输入Selection"></c-input>
        </el-form-item>
       </c-col>
                  
       <c-col :span="12">
        <c-button size="small" type="primary"  @click="onSerbut">
            Search
        </c-button>
       </c-col>
                  
       <c-col :span="12">
        <c-button size="small" type="primary"  @click="onDtlbut">
            Detail
        </c-button>
       </c-col>
                  
       <c-col :span="12">
        <c-button size="small" type="primary"  @click="onAddbut">
            Add New
        </c-button>
       </c-col>
                  
       <c-col :span="12">
        <c-button size="small" type="primary"  @click="onAmebut">
            Modify
        </c-button>
       </c-col>
                  
       <c-col :span="12">
        <c-button size="small"  icon="el-icon-delete" @click="onDelbut">
            Delete
        </c-button>
       </c-col>
                  
       <c-col :span="12">
        <c-button size="small" type="primary"  @click="onPrtbut">
            Print
        </c-button>
       </c-col>
                  
       <c-col :span="12">
        <c-button size="small" type="primary"  @click="onExpbut">
            导出Excel
        </c-button>
       </c-col>
                  
       <c-col :span="12">
        <c-button size="small" type="primary"  @click="onExpbop">
            应急导出
        </c-button>
       </c-col>
                  
       <c-col :span="12">
        <c-button size="small" type="primary"  @click="onExi">
            Exit
        </c-button>
       </c-col> -->
  </div>
</template>
<script>
import Api from "~/service/Api";
import commonProcess from "~/mixin/commonProcess";
import CodeTable from "~/config/CodeTable";
import Event from "~/model/Bopsel/Event";

export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [commonProcess],
  data() {
    return {
      searchToggle:false,
      stmData: {
        columns: [
          '4 1 "申报号码" 0 ',
          '5 2 "客户" 0',
          '7 3 "组织机构代码" 0',
          '20 4 "基础" 0',
          '21 5 "银行业务编号" 0',
        ],
        data: [],
      },
    };
  },
  methods: { ...Event },
  created: function () {
    this.model.bopquep.boptyp = "ALL";
    this.model.bopquep.frmdat = new Date();
    this.model.bopquep.tildat = new Date();
  },
};
</script>
<style scoped>
.eibs-tab >>> .m-table-search{
  border-bottom: 0;
}
.eibs-tab >>> .m-table-search-operation-top {
  width: calc(95.833333% + 9px);
}
</style>