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"
          
          label-position="right"
          label-width="110px"
          size="small"
        >
         <!--line1-->
          <el-row>
            <c-col :span="24" style=""> 

              <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 :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 :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>
                
          <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>


     

      

      <!--line3-->

      <!--line4-->

          <el-row v-show="searchToggle">
            <!--line2-->
            <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.ownref" style="width: 100%">
                <c-input
                  v-model="model.bopquep.ownref"
                  maxlength="16"
                  placeholder="请输入业务编号"
                ></c-input>
              </el-form-item>
            </c-col>

            
            </c-col>
            
            <c-col :span="24" style="">

              <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 :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>
            
            <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-button v-if="model.bopquep.boptyp=='DBJ'" size="small" type="primary" style="margin-left:0" @click="onWaitAdd(model.bopquep.boptyp.toLowerCase() +'add')">新增结汇申请书</c-button>
        <c-button v-if="model.bopquep.boptyp=='DBW'" size="small" type="primary" style="margin-left:0" @click="onWaitAdd(model.bopquep.boptyp.toLowerCase() +'add')">新增购汇申请书</c-button>
      </c-col>
    </c-row>

    <el-row>
      <c-col :span="24" style="">
        <c-istream-table :list="stmData.data" :columns="stmData.columns" style="width:100%" :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">
              <c-button style="margin-left: 0" size="small" @click="onWaitDetail(scope.$index,scope.row)">
                详情
              </c-button>
              <c-button style="margin-left: 3px" size="small"  @click="onWaitAmend(scope.$index,scope.row)">
                修改
              </c-button>
              <c-button style="margin-left: 3px" size="small" @click="onWaitDelete(scope.$index,scope.row)">
                删除
              </c-button>


              
            </template>
          </el-table-column>
        </c-istream-table>
      </c-col>
    </el-row>

   
  </div>
</template>
<script>
import Api from "~/service/Api";
import commonProcess from "~/mixin/commonProcess";
import CodeTable from "~/config/CodeTable";
import Event from "~/model/Bopsel/Event";
import Utils from "~/utils";

export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [commonProcess],
  data() {
    return {
      searchToggle:false,
      stmData: {
        columns: [
          //{index:3,position:3,width:110,pattern:'date',label:'日期'},
          //{index:4,position:4,width:100,pattern:'code',label:'状态',code:this.codes.relstaEN},
          '0 1 "申报号码" 170 ',
          '1 2 "客户" 100',
          '16 3 "组织机构代码" 120',
          // '2 4 "基础" 80',
          {index:2,position:4,width:80,pattern:'code',label:'基础',code:this.codes.staflg},
          '5 5 "银行业务编号" 150',
          //'6 6, "收付汇日期" 200',
          {index:6,position:6,width:150,pattern:'date',label:'收付汇日期'},
          //'7 7, "申报类型" 198',
          {index:7,position:7,width:190,pattern:'code',label:'申报类型',code:this.codes.boptyp},
          '8 8, "币别" 80',
          //'9 9, "金额" 120',
          {index:9,position:9,width:120,pattern:'amt',label:'金额'},
          //'10 10, "客户类型" 120',
          {index:10,position:10,width:150,pattern:'code',label:'客户类型',code:this.codes.ptytyp},
          //'11 11, "结算方式" 100',
          {index:11,position:11,width:100,pattern:'code',label:'结算方式',code:this.codes.medtyp},
          '3 12, "申报" 80',
          '4 13, "管理" 80',
          '17 14, "对方客户名称" 120',
          '18 15, "结汇金额" 100',
          '19 16, "账号" 120',
          '20 17, "现汇金额" 100',
          '21 18, "账号" 120',
          '22 19, "其他金额" 100',
          '23 20, "账号" 120',
          '24, 21, "牌价" 80',
          '26, 22, "国内扣费金额" 120',
          '27, 23, "国外扣费金额" 120',
          '28, 24, "地区机构号" 110',
          '29, 25, "外汇账户账号" 120',
          '30, 26, "人民币账户账号" 160',
          '31, 27, "外汇账户开户行" 200',
          '32, 28, "人民币账户开户行" 160',
          '33, 29, "交易编码" 100',
          '34, 30, "外汇局批件号/备案表号/业务编号" 350',
          '35, 31, "结汇用途" 100',
          '36, 32, "结汇详细用途" 150',
          '37, 33, "填报人" 120',
          '38, 34, "填报人电话" 120',
        ],
        data: [],
      },
    };
  },
  methods: { ...Event ,
  // async onWaitDetail(idx, row) {
  //      console.log(idx);
  //      console.log(row);
  //      console.log(row.申报类型);
  //      let business=row.申报类型.toLowerCase() +"inf";
  //      let url = "/business/"+business;
  //      console.log(url);
  //      //url ="/business/"+"litopn";
  //      console.log(url);
  //      this.$router.history.push(url);
  //   },

  async onWaitAdd(business) {
        let viewurl = "/business/"+business;
        let params = {  };
        this.executeRule("addbut",params).then((res) => {
            if ((res.respCode == SUCCESS)) {
                Utils.copyValueFromVO(this.model, res.data);
                // this.$router.push({ path: "business/inftrnpsDetail", query: { idx: idx}});
                this.$router.push({ path: viewurl, query: {} });
            }else{
                const h = this.$createElement;
                const msg = res.respMsg||'请求执行失败!'
                this.$notify.error({ title: '错误', message: h('p',{style: 'word-break:break-all;'}, msg) })
            }
        });
    },

  async onWaitDetail(idx, row) {
        let business=row.申报类型.toLowerCase() +"inf";
        let viewurl = "/business/"+business;
        const selIds = [idx + 1];
        const selDst = "dblstm" //列表对应后台模型中的stream
        let params = { selDst, selIds };
        this.executeRule("dtlbut",params).then((res) => {
            if ((res.respCode == SUCCESS)) {
                Utils.copyValueFromVO(this.model, res.data);
                // this.$router.push({ path: "business/inftrnpsDetail", query: { idx: idx}});
                this.$router.push({ path: viewurl, query: {} });
            }else{
                const h = this.$createElement;
                const msg = res.respMsg||'请求执行失败!'
                this.$notify.error({ title: '错误', message: h('p',{style: 'word-break:break-all;'}, msg) })
            }
        });
    },

    async onWaitAmend(idx, row) {
        let business=row.申报类型.toLowerCase() +"ame";
        let viewurl = "/business/"+business;
        const selIds = [idx + 1];
        const selDst = "dblstm" //列表对应后台模型中的stream
        let params = { selDst, selIds };
        this.executeRule("amebut",params).then((res) => {
            if ((res.respCode == SUCCESS)) {
                Utils.copyValueFromVO(this.model, res.data);
                // this.$router.push({ path: "business/inftrnpsDetail", query: { idx: idx}});
                this.$router.push({ path: viewurl, query: {} });
            }else{
                const h = this.$createElement;
                const msg = res.respMsg||'请求执行失败!'
                this.$notify.error({ title: '错误', message: h('p',{style: 'word-break:break-all;'}, msg) })
            }
        });
    },

    async onWaitDelete(idx, row) {
        let business=row.申报类型.toLowerCase() +"del";
        let viewurl = "/business/"+business;
        const selIds = [idx + 1];
        const selDst = "dblstm" //列表对应后台模型中的stream
        let params = { selDst, selIds };
        this.executeRule("delbut",params).then((res) => {
            if ((res.respCode == SUCCESS)) {
                Utils.copyValueFromVO(this.model, res.data);
                // this.$router.push({ path: "business/inftrnpsDetail", query: { idx: idx}});
                this.$router.push({ path: viewurl, query: {} });
            }else{
                const h = this.$createElement;
                const msg = res.respMsg||'请求执行失败!'
                this.$notify.error({ title: '错误', message: h('p',{style: 'word-break:break-all;'}, msg) })
            }
        });
    },

    // async onWaitAmend(idx, row) {
    //    console.log(idx);
    //    console.log(row);
    //    console.log(row.申报类型);
    //    let business=row.申报类型.toLowerCase() +"ame";
    //    let url = "/business/"+business;
    //    console.log(url);
    //    //url ="/business/"+"litopn";
    //    console.log(url);
    //    this.$router.history.push(url);
    // },

    // async onWaitDelete(idx, row) {
    //    console.log(idx);
    //    console.log(row);
    //    console.log(row.申报类型);
    //    let business=row.申报类型.toLowerCase() +"del";
    //    let url = "/business/"+business;
    //    console.log(url);
    //    //url ="/business/"+"litopn";
    //    console.log(url);
    //    this.$router.history.push(url);
    // },
    },
  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>