Sel.vue

<template>
  <div class="eibs-tab">
    <!-- ======================= 左边 ========================= -->
    <c-col :span="12" style="padding-right: 20px">
      <c-col :span="24">
        <el-form-item label="包号" prop="cldgrp.rec.ownref" style="width:100%">
          <c-fullbox>
            <c-input v-model="model.cldgrp.rec.ownref" maxlength="16" placeholder="请输入包号"
                     style="width:100%" disabled>
            </c-input>
            <template slot="footer">
              <c-button size="small" type="primary" @click="queryOwnref"
                        :disabled="model.cldgrp.col.pts.extkey == ''">
                获取
              </c-button>
            </template>
          </c-fullbox>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="票据类型" prop="cldgrp.rec.colflg" style="width:100%">
          <c-select v-model="model.cldgrp.rec.colflg" style="width: 100%" maxlength="1"
                    placeholder="请输入票据类型">
            <el-option v-for="item in codes.colflg" :key="item.value" :label="item.label"
                       :value="item.value">
            </el-option>
          </c-select>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label="总行数" prop="rowcntr" style="width:100%">
          <c-input v-model="model.rowcntr" placeholder="请输入总行数" disabled>
          </c-input>
        </el-form-item>

      </c-col>
      <c-col :span="24">
        <el-form-item label="选中光票金额和" prop="cldgrp.cbs.max.amt" style="width: 100%">
          <c-input-currency v-model="model.cldgrp.cbs.max.amt" placeholder="请输入" ></c-input-currency >
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label="选中票据份数" prop="cldgrp.rec.count" style="width: 100%">
          <c-input v-model="model.cldgrp.rec.count" placeholder="请输入选中票据份数" disabled>
          </c-input>
        </el-form-item>

      </c-col>
      <c-col :span="24">
        <el-form-item label="托收行" prop="colbnk" style="width:100%">
          <c-fullbox>
            <c-select v-model="model.colbnk" style="width: 100%" placeholder="请选择托收行" :disabled="model.cldgrp.rec.colflg == 'G'">
              <el-option v-for="item in codes.colbnk" :key="item.value" :label="item.label"
                         :value="item.value" >
              </el-option>
            </c-select>
            <template slot="footer">
              <c-button size="small" type="primary" :disabled="model.cldgrp.rec.colflg == 'G'">
                获取
              </c-button>
            </template>
          </c-fullbox>
        </el-form-item>
      </c-col>
       <c-col :span="24">
        <c-ptap :model="model" :argadr="{
          title: '托收行',
          grp: 'cldgrp',
          rol: 'col',
        }" :isAdrblk="true" :noRef="true"
				:isLabel120="false"
        @keyup.enter.native="queryGridEtyPromptDialogData('COL', 'B')">
        </c-ptap>
      </c-col>

      <!-- <c-col :span="24">
        <el-form-item label="地址信息" prop="cldgrp.col.pts.nam" style="width:100%">
          <c-input type="textarea" :rows="4" v-model="model.cldgrp.col.pts.nam" maxlength="35" disabled
                   show-word-limit placeholder="请输入地址信息"></c-input>
        </el-form-item>
      </c-col> -->
    </c-col>

    <!-- ======================= 右边 ========================= -->
    <c-col :span="12" style="padding-left: 20px">
      <c-col :span="24">
        <el-form-item label="简略信息" prop="cldgrp.rec.nam" style="width:100%">
          <c-input v-model="model.cldgrp.rec.nam" maxlength="40" placeholder="请输入简略信息">
          </c-input>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <c-col :span="12">
          <el-form-item label="起息日" prop="cldgrp.rec.valdat" style="width:100%">
            <c-date-picker type="date" v-model="model.cldgrp.rec.valdat" style="width:100%"
                           placeholddaer="请选择起息日"></c-date-picker>
          </el-form-item>
        </c-col>
        <c-col :span="12">
          <el-form-item label="创建日期" style="width:100%">
            <c-date-picker type="date" v-model="model.cldgrp.rec.credat" style="width:100%"
                           placeholder="请选择创建日期"></c-date-picker>
          </el-form-item>
        </c-col>

      </c-col>

      <c-col :span="24">
        <el-form-item label="币种" prop="cldgrp.cbs.max.cur" style="width:100%">
          <c-select v-model="model.cldgrp.cbs.max.cur" style="width: 100%" placeholder="请选择币种">
            <el-option v-for="item in codes.curtxt1" :key="item.value" :label="item.label"
                       :value="item.value">
            </el-option>
          </c-select>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="注册编号" prop="cldgrp.rec.regref" style="width: 100%">
          <c-input v-model="model.cldgrp.rec.regref" tyle="width: 100%" maxlength="16"
                   placeholder="请输入注册编号" disabled></c-input>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="查询出的票据份数" prop="items" style="width:100%">
          <c-input v-model="model.items" placeholder="请输入选中票据份数"></c-input>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="托收方式" prop="colmet" style="width:100%">
          <c-select v-model="model.colmet" style="width: 100%" placeholder="请选择托收方式">
            <el-option v-for="item in codes.colmet" :key="item.value" :label="item.label"
                       :value="item.value">
            </el-option>
          </c-select>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="托收行参考号" prop="cldgrp.rec.colref" style="width:100%">
          <c-input v-model="model.cldgrp.rec.colref" maxlength="16" placeholder="请输入托收行参考号">
          </c-input>
        </el-form-item>
      </c-col>
    </c-col>

    <c-col :span="24" v-if="model.cldgrp.cbs.cur!== '' && model.cldgrp.rec.colflg !== ''">
      <c-col :span="4" :offset="20" style="text-align:center">
        <el-button type="primary" @click="handleSearch">查询</el-button>
      </c-col>
    </c-col>
    <c-col :span="24" v-else>
      <c-col :span="4" :offset="20" style="text-align:center">
        <el-button type="primary" >查询所有</el-button>
      </c-col>
    </c-col>

    <el-col :span="24" style="margin-top: 10px">
					<div style="height: 90%">
						<c-col :span="24">
							<el-table
								id='infgidBSTableRef'
								v-loading="load"
								style="width:100%"
								size="small"
								:highlight-current-row="true"
							>
								<el-table-column
									type="selection"
									width="55">
								</el-table-column>
								<el-table-column
									v-for="(item,key) in tableColumns"
									:key="key"
									:prop="item.prop"
									:label="item.label"
									sortable
								>
								</el-table-column>
							</el-table>
							<el-pagination
								layout="prev, pager, next, jumper"
								:total="pagination.total"
								:page-size="pagination.pageSize"
								:current-page="pagination.pageNum"
							>
							</el-pagination>
						</c-col>
					</div>
				</el-col>

  </div>
</template>
<script>
import Api from "~/service/Api"
import commonProcess from "~/mixin/commonProcess";
import CodeTable from "~/config/CodeTable"
import event from "../event"

export default {
    inject: ['root'],
    props: ["model", "codes"],
    components: {
  },
    mixins: [event],
    data() {
        return {
          load: false,
					total: 0,
					pageSize: 10, // 条数
					pagination: {
							pageNum: 1,
							pageSize: 10,
							total: 0
						},
          tableColumns: [
                    {
												prop: "chcknum",
												label: "核对号",
												width: 120,
												isShow: true
                    },
                    {
												prop: "ownref",
												label: "托收编号",
												width: 120,
												isShow: true
                    },
                    {
												prop: "nam",
												label: "描述",
												width: 220,
												isShow: true
                    },
                    {
												prop: "prenam",
												label: "委托人",
												width: 200,
												isShow: true
                    },
                    {
												prop: "cur",
												label: "币种",
												width: 100,
												isShow: true
                    },
                    {
												prop: "amt",
												label: "金额",
												width: 150,
												isShow: true
                    },
                    {
												prop: "selflg",
												label: "勾选",
												width: 50,
												isShow: true
                    },
                ],
        }
    },
    methods: {
        multipleSelect() {
            console.log(123);
        },
        checkedChange() {
            console.log(456);
        }
    },
    created: function () {

    },
    watch: {

   "model.cldgrp":{
     immediate: true,
     deep: true,
     handler(val,oldval){
      // const res = this.model.cldgrp
       if(this.model.cldgrp.cbs.max.cur !== "" || this.model.cldgrp.cbs.max.amt !== "" || this.model.cldgrp.col.pts.adrblk !== ""){
        this.model.cldgrp.rec.nam = this.model.cldgrp.cbs.max.amt+this.model.cldgrp.col.pts.adrblk.substring(0,16)+this.model.cldgrp.cbs.max.cur
       }
     }
   },

   "model.cldgrp.cbs.max.amt":{
      immediate: true,
      handler(val,oldval){
        if(this.model.cldgrp.cbs.max.amt!== "" ){
          this.model.cldgrp.cbs.opn1.cur= this.model.cldgrp.cbs.max.cur;
          this.model.cldgrp.cbs.opn1.amt= this.model.cldgrp.cbs.max.amt;
        }
      }
    },
    }
}
</script>
<style>

</style>