Basic.vue

<template>
	<div>
		<el-col :span="12">
			<el-col :span="22">
				<el-form-item label="业务编号">
					<el-col :span="24" class="m-inputbtn">
						<el-col class="m-inputbtn-input">
							<c-input  v-model="model.cpdgrp.rec.ownref" maxlength="16"  placeholder="请输入业务编号" disabled></c-input>
						</el-col>
						<c-button type="primary" class="m-inputbtn-btn" @click="getOwnref">获取</c-button>
					</el-col>
				</el-form-item>
			</el-col>
		</el-col>

		<el-col :span="12">
			<el-col :span="22">
				<el-form-item label="业务归属机构">
					<c-select v-model="model.cpdgrp.rec.ownbch" style="width:100%" placeholder="请选择">
						<el-option
							v-for="item in codes.bchlevelLst"
							:key="item.value"
							:label="item.label"
							:value="item.value">
						</el-option>
					</c-select>
				</el-form-item>
			</el-col>
		</el-col>

		<el-col :span="12">
			<el-col :span="22">
				<el-form-item label="汇款方式" prop="cpdgrp.rec.paytyp">
					<c-select v-model="model.cpdgrp.rec.paytyp" style="width:100%" placeholder="请选择汇款方式" clearable>
						<el-option
							v-for="item in codes.paytyp"
							:key="item.value"
							:label="item.label"
							:value="item.value">
						</el-option>
					</c-select>
				</el-form-item>
			</el-col>
		</el-col>

		<el-col :span="12">
			<el-col :span="22">
				<el-form-item label="客户经理">
						<c-input  v-model="model.cpdgrp.orc.pty.ownusr" maxlength="10"  placeholder="请输入客户经理"></c-input>
				</el-form-item>
			</el-col>
		</el-col>

		<el-col :span="12">
			<el-col :span="22">
				<el-form-item label="汇款币种金额">
					<el-col :span="24">
						<el-col :span="12" class="m-cur-select">
							<el-form-item prop="cpdgrp.cbs.max.cur">
								<c-select v-model="model.cpdgrp.cbs.max.cur" style="width:100%" placeholder="请选择汇款币种金额" @change="handleMaxCurChange">
									<el-option
										v-for="item in codes.curtxt"
										:key="item.value"
										:label="item.label"
										:value="item.value">
									</el-option>
								</c-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item prop="cpdgrp.cbs.max.amt">
								<c-input v-model="model.cpdgrp.cbs.max.amt" :precision="2" :step="0.1" :max="100000000000000" placeholder="请输入汇款币种金额"></c-input>
							</el-form-item>
						</el-col>
					</el-col>
				</el-form-item>
			</el-col>
		</el-col>

		<el-col :span="12">
			<el-col :span="22">
				<el-form-item label="汇款人性质" prop="cpdgrp.rec.custyp">
					<c-select v-model="model.cpdgrp.rec.custyp" 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>
			</el-col>
		</el-col>

		<el-col :span="24">
			<el-col :span="12">
				<el-col :span="22">
					<el-form-item label="清算路径" prop="cpdgrp.rec.liqtyp">
						<c-select v-model="model.cpdgrp.rec.liqtyp" style="width:100%" placeholder="请选择清算路径" @change="handleRecLiqtypChange">
							<el-option
							v-for="item in liqtyp"
							:key="item.value"
							:label="item.label"
							:value="item.value">
							</el-option>
						</c-select>
					</el-form-item>
				</el-col>
			</el-col>

			<el-col :span="12">
				<el-col :span="22">
					<el-form-item label="报文类型" prop="cpdgrp.rec.swftyp">
						<c-select v-model="model.cpdgrp.rec.swftyp" style="width:100%" placeholder="请选择报文类型">
							<el-option
								v-for="item in swfcod"
								:key="item.value"
								:label="item.label"
								:value="item.value">
							</el-option>
						</c-select>
					</el-form-item>
				</el-col>
			</el-col>
		</el-col>

		<el-col :span="12">
			<el-col :span="22">
				<el-form-item label="汇款人账号" prop="cpdgrp.rec.orcacc">
					<c-input  v-model="model.cpdgrp.rec.orcacc" maxlength="32"  placeholder="请输入汇款人账号"></c-input>
				</el-form-item>
			</el-col>
		</el-col>

		<el-col :span="12">
			<el-col :span="22">
				<el-form-item label="汇款类型" prop="cpdgrp.rec.cpdflg">
					<c-select v-model="model.cpdgrp.rec.cpdflg" style="width:100%" placeholder="请选择汇款类型">
						<el-option
							v-for="item in codes.custyp"
							:key="item.value"
							:label="item.label"
							:value="item.value">
						</el-option>
					</c-select>
				</el-form-item>
			</el-col>
		</el-col>

		<el-col :span="12">
			<el-col :span="22">
				<el-form-item label="汇款人" prop="cpdgrp.orc.pts.namcn">
					<el-col :span="24" class="m-inputbtn">
						<el-col class="m-inputbtn-input">
							<c-input  v-model="model.cpdgrp.orc.pts.namcn" maxlength="100"  placeholder="请输入汇款人"></c-input>
							<!-- <c-button type="primary" icon="el-icon-search" class="m-inputbtn-btn" @click="handleSearch"></c-button> -->
							<c-ptypicker service="cptopn/orcp_ptysel" flag="C" :ctx="model.cpdgrp.orc.pts" :extkey="model.cpdgrp.orc.pts.extkey"  />
						</el-col>
					</el-col>
				</el-form-item>
			</el-col>
		</el-col>

		<el-col :span="12">
			<el-col :span="22">
				<el-form-item label="交易对手国别">
					<c-select v-model="model.cpdgrp.rec.stacty" style="width:100%" placeholder="请输入交易对手国别">
						<el-option
							v-for="item in codes.bopcur"
							:key="item.value"
							:label="item.label"
							:value="item.value">
						</el-option>
					</c-select>
				</el-form-item>
			</el-col>
		</el-col>
	</div>
</template>
<script>
import Api from "~/service/Api"

export default {
	props:['model', 'codes'],
	computed: {
		liqtyp: function () {
			if (this.model.cpdgrp.cbs.max.cur) {
				return this.model.cpdgrp.cbs.max.cur == 'CNY' ? this.codes.liqtyp2 : this.codes.liqtyp1
			} else {
				return this.codes.liqtyp
			}
		},
		swfcod: function () {
			return this.model.cpdgrp.rec.liqtyp ? this.codes.swfcod[this.model.cpdgrp.rec.liqtyp] || []: []
		}
	},
	methods:{
		async getOwnref () {
			console.log('获取业务编号')
			const rtnmsg = await Api.post('cptopn/getref', { data: this.model })
			if (rtnmsg.code == SUCCESS) {
				this.model.cpdgrp.rec.ownref = rtnmsg.data.cpdgrp_rec_ownref
			}
			else {
				this.$notify.error({title: '错误',message: '服务请求失败！'});
			}
		},
		async handleSearch () {
			console.log('汇款人查询')
			const rtnmsg = await Api.post('cptopn/orcp_ptysel', { data: this.model ,flg:'C'})
			if (rtnmsg.code == SUCCESS) {
				// this.model.cpdgrp.rec.ownref = rtnmsg.data.cpdgrp_rec_ownref
			}
			else {
				this.$notify.error({title: '错误',message: '服务请求失败！'});
				// Notification.error({ message: 'cptopn/mtabut/getref服务端请求失败!' })
			}
			// Ptspta1  model={this.model} 
			// argArr={{ desc: "汇款人", prefix: 'pts', url: 'cptopn/orcp_ptysel', 
			// flg: 'C', datakey: '\\cptp\\orcp\\ptslst' }} formBlur={this.formBlur}

		},
		handleMaxCurChange () {
			this.model.cpdgrp.rec.liqtyp = ""
			this.model.cpdgrp.rec.swftyp = ""
		},
		handleRecLiqtypChange () {
			this.model.cpdgrp.rec.swftyp = ""
		},
		
	},
	mounted:async function(){
			console.log("初始化，加载机构列表");
			let rtnmsg = await Api.post("common/bchlevelLst",{params:{}})
			if(rtnmsg.code == SUCCESS)
			{
			//TODO 处理数据逻辑
				let bchlst = rtnmsg.data;
				this.codes.bchlevelLst = bchlst.map(item=>({value:item.branch,label:item.namcn}));
			}
			else
			{
				this.$notify.error({title: '错误',message: '服务请求失败！'});
			}
    	}
}
</script>
<style scoped>
</style>