Skip to content

V
vue-gjjs
Commit 5482d10e by lsk
Options

infcpd查询条件布局调整

parent a85dd3ce
Showing with 339 additions and 289 deletions
src/views/Business/Infcpd/Infsea.vue
<template>
<c-content class="eibs-tab" :height="200">
<c-infsearch-group @handleSearch="handleSearch" @handleReset="handleReset">
<!-- 持续展示区 -->
<template slot="keepShow">
<c-row>
<c-col :span="12">
<c-row>
<c-col :span="19" :offset="1">
<el-form-item label="Own Reference" prop="infcon.seaownref">
<c-input v-model="model.infcon.seaownref" maxlength="16"
placeholder="请输入Own Reference"></c-input>
</el-form-item>
</c-col>
</c-row>
</c-col>
<c-col :span="12">
<c-row>
<c-col :span="19" :offset="1">
<el-form-item label="Name" prop="infcon.nam">
<c-input v-model="model.infcon.nam" maxlength="40" placeholder="请输入Name"></c-input>
</el-form-item>
</c-col>
</c-row>
</c-col>
</c-row>
</template>
<!-- 可控展示区 -->
<template slot="changeShow">
<c-row>
<c-col :span="12">
<c-row>
<c-col :span="19" :offset="1">
<el-form-item label="Party Reference" prop="infcon.searef">
<c-input v-model="model.infcon.searef" maxlength="16"
placeholder="请输入Party Reference"></c-input>
</el-form-item>
</c-col>
</c-row>
</c-col>
<c-col :span="12">
<c-row>
<c-col :span="10" :offset="1">
<el-form-item label="Opening between" prop="infcon.opndatfrom">
<c-date-picker type="date" v-model="model.infcon.opndatfrom" style="width:100%"
placeholder="请选择"></c-date-picker>
</el-form-item>
</c-col>
<c-col :span="8" :offset="1">
<el-form-item label="and" prop="infcon.opndatto" label-width="40px">
<c-date-picker type="date" v-model="model.infcon.opndatto" style="width:100%"
placeholder="请选择"></c-date-picker>
</el-form-item>
</c-col>
</c-row>
</c-col>
</c-row>
<c-row>
<c-col :span="12">
<c-row>
<c-col :span="19" :offset="1">
<el-form-item label="Select Single Party" prop="infcon.pty.extkey">
<c-input v-model="model.infcon.pty.extkey" maxlength="24"
placeholder="请输入Select Single Party">
</c-input>
</el-form-item>
</c-col>
</c-row>
</c-col>
<c-col :span="12">
<c-row>
<c-col :span="19" :offset="1">
<el-form-item label="Visible Name" prop="infcon.pty.nam">
<c-input v-model="model.infcon.pty.nam" maxlength="40"
placeholder="请输入External Visible Name">
</c-input>
</el-form-item>
</c-col>
</c-row>
</c-col>
</c-row>
<c-row>
<c-col :span="12">
<c-row>
<c-col :span="19" :offset="1">
<el-form-item label="Party Name/BIC" prop="infcon.seapty">
<c-input v-model="model.infcon.seapty" maxlength="24"
placeholder="请输入Party Name/BIC"></c-input>
</el-form-item>
</c-col>
</c-row>
</c-col>
<c-col :span="12">
<c-row>
<c-col :span="19" :offset="1">
<el-form-item label="Role" prop="infcon.searol">
<c-select v-model="model.infcon.searol" style="width:100%" placeholder="请选择Role">
</c-select>
</el-form-item>
</c-col>
</c-row>
</c-col>
</c-row>
<c-row>
<c-col :span="12">
<c-row>
<c-col :span="19" :offset="1">
<el-form-item label="Resp.User" prop="infcon.usr.extkey">
<c-input v-model="model.infcon.usr.extkey" maxlength="8" placeholder="请输入User ID">
</c-input>
</el-form-item>
</c-col>
</c-row>
</c-col>
<c-col :span="12">
<c-row>
<c-col :span="19" :offset="1">
<el-form-item label="Status" prop="infcon.seasta">
<c-select v-model="model.infcon.seasta" style="width:100%" placeholder="请选择Status"
:code="codes.seasta">
</c-select>
</el-form-item>
</c-col>
</c-row>
</c-col>
</c-row>
<c-row>
<c-col :span="12">
<c-row>
<c-col :span="19" :offset="1">
<el-form-item label="Currency" prop="infcon.seacur">
<c-select v-model="model.infcon.seacur" style="width:100%" placeholder="请选择Currency"
:code="codes.cur">
</c-select>
</el-form-item>
</c-col>
</c-row>
</c-col>
<c-col :span="12">
<c-row>
<c-col :span="10" :offset="1">
<el-form-item label="Amount between" prop="infcon.seaamtfr">
<c-input-currency v-model="model.infcon.seaamtfr" placeholder="请输入Amount">
</c-input-currency>
</el-form-item>
</c-col>
<c-col :span="8" :offset="1">
<el-form-item label="and" prop="infcon.seaamtto" label-width="40px">
<c-input-currency v-model="model.infcon.seaamtto" placeholder="请输入Amount">
</c-input-currency>
</el-form-item>
</c-col>
</c-row>
</c-col>
</c-row>
<div class="eibs-tab">
<!-- <c-infsearch-group @handleSearch="handleSearch" @handleReset="handleReset"> -->
<!-- 持续展示区 -->
<!-- <template slot="keepShow"> -->
<el-form
class="m-table-search-form"
ref="paramsForm"
:inline="true"
label-position="right"
label-width="110px"
size="small"
>
<c-row>
<c-col :span="24">
<c-col :span="8">
<el-form-item label="Own Reference" prop="infcon.seaownref" style="width:100%">
<c-input
v-model="model.infcon.seaownref"
maxlength="16"
placeholder="请输入Own Reference"
></c-input>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="Opening" prop="infcon.opndatfrom" style="width:100%">
<c-col :span="11">
<c-date-picker
type="date"
v-model="model.infcon.opndatfrom"
style="width: 100%"
placeholder="请选择"
></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.infcon.opndatto"
style="width: 100%"
placeholder="请选择"
></c-date-picker>
</c-col>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="Name" prop="infcon.nam" style="width:100%">
<c-input
v-model="model.infcon.nam"
maxlength="40"
placeholder="请输入Name"
></c-input>
</el-form-item>
</c-col>
</c-col>
</c-row>
<!-- </template> -->
<c-col
:span="24"
style="text-align: right; height: 36.8px"
v-if="searchToggle"
>
<el-button size="small" @click="handleReset">重置</el-button>
<el-button
type="primary"
icon="el-icon-search"
size="small"
@click="handleSearch"
>查询</el-button
>
<el-button type="text" @click="searchToggle = false">
展开
<i class="el-icon-arrow-down"></i>
</el-button>
</c-col>
<c-row>
<c-col :span="12">
<c-row>
<c-col :span="19" :offset="1">
<el-form-item label="Payment Type" prop="seapaytyp">
<c-select v-model="model.seapaytyp" style="width:100%" placeholder="请选择Payment Type"
:code="codes.seapaytyp">
</c-select>
</el-form-item>
</c-col>
</c-row>
</c-col>
<c-col :span="12">
<c-row>
<c-col :span="19" :offset="1">
<el-form-item label="Swift type" prop="msgtyp">
<c-select v-model="model.msgtyp" style="width:100%" placeholder="请选择Swift type">
</c-select>
</el-form-item>
</c-col>
</c-row>
</c-col>
</c-row>
<!-- 可控展示区 -->
<!-- <template slot="changeShow"> -->
<c-row v-show="!searchToggle">
<c-col :span="24">
<c-col :span="8">
<el-form-item label="Party Reference" prop="infcon.searef" style="width:100%">
<c-input
v-model="model.infcon.searef"
maxlength="16"
placeholder="请输入Party Reference"
></c-input>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="Select Single Party" prop="infcon.pty.extkey" style="width:100%">
<c-input
v-model="model.infcon.pty.extkey"
maxlength="24"
placeholder="请输入Select Single Party"
>
</c-input>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="Visible Name" prop="infcon.pty.nam" style="width:100%">
<c-input
v-model="model.infcon.pty.nam"
maxlength="40"
placeholder="请输入External Visible Name"
>
</c-input>
</el-form-item>
</c-col>
</c-col>
<c-row>
<c-col :span="12">
<c-row>
<c-col :span="14" :offset="1">
<el-form-item label="国家代码" prop="countcode">
<c-select v-model="model.countcode" filterable style="width:100%"
placeholder="请选择国家代码" :code="codes.bopcty">
</c-select>
</el-form-item>
</c-col>
<c-col :span="5">
<el-form-item label="" prop="tsnflg" label-width="20px">
<c-checkbox v-model="model.tsnflg">同名划转标志</c-checkbox>
</el-form-item>
</c-col>
</c-row>
</c-col>
<c-col :span="12">
<c-row>
<c-col :span="18" :offset="1">
<c-col :span="24">
<c-col :span="8">
<el-form-item label="Party Name/BIC" prop="infcon.seapty" style="width:100%">
<c-input
v-model="model.infcon.seapty"
maxlength="24"
placeholder="请输入Party Name/BIC"
></c-input>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="Role" prop="infcon.searol" style="width:100%">
<c-select
v-model="model.infcon.searol"
style="width: 100%"
placeholder="请选择Role"
>
</c-select>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="Resp.User" prop="infcon.usr.extkey" style="width:100%">
<c-input
v-model="model.infcon.usr.extkey"
maxlength="8"
placeholder="请输入User ID"
>
</c-input>
</el-form-item>
</c-col>
</c-col>
</c-col>
</c-row>
</c-col>
</c-row>
<c-col :span="24">
<c-col :span="8">
<el-form-item label="Status" prop="infcon.seasta" style="width:100%">
<c-select
v-model="model.infcon.seasta"
style="width: 100%"
placeholder="请选择Status"
:code="codes.seasta"
>
</c-select>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="Currency" prop="infcon.seacur" style="width:100%">
<c-select
v-model="model.infcon.seacur"
style="width: 100%"
placeholder="请选择Currency"
:code="codes.cur"
>
</c-select>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="Amount between" prop="infcon.seaamtfr" style="width:100%">
<c-col :span="11">
<c-input-currency
v-model="model.infcon.seaamtfr"
placeholder="请输入Amount"
>
</c-input-currency>
</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-input-currency
v-model="model.infcon.seaamtto"
placeholder="请输入Amount"
>
</c-input-currency>
</c-col>
</el-form-item>
</c-col>
</c-col>
</template>
</c-infsearch-group>
<c-col :span="24">
<c-col :span="8">
<el-form-item label="Payment Type" prop="seapaytyp" style="width:100%">
<c-select
v-model="model.seapaytyp"
style="width: 100%"
placeholder="请选择Payment Type"
:code="codes.seapaytyp"
>
</c-select>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="Swift type" prop="msgtyp" style="width:100%">
<c-select
v-model="model.msgtyp"
style="width: 100%"
placeholder="请选择Swift type"
>
</c-select>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="国家代码" prop="countcode" style="width:100%">
<c-col :span="11">
<c-select
v-model="model.countcode"
filterable
style="width: 100%"
placeholder="请选择国家代码"
:code="codes.bopcty"
>
</c-select>
</c-col>
<c-col :span="13" style="text-align: right">
<c-checkbox v-model="model.tsnflg">同名划转标志</c-checkbox>
</c-col>
</el-form-item>
</c-col>
</c-col>
</c-row>
<c-col
:span="24"
style="text-align: right; height: 36.8px"
v-if="!searchToggle"
>
<el-button size="small" @click="handleReset">重置</el-button>
<el-button
type="primary"
icon="el-icon-search"
size="small"
@click="handleSearch"
>查询</el-button
>
<el-button type="text" @click="searchToggle = true">
收起
<i class="el-icon-arrow-up"></i>
</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-list-search> -->
<c-row style="margin-top:20px; padding: 0 10px 0 10px;">
<c-col>
<c-button size="small" type="primary">导Excel</c-button>
<c-button size="small" type="primary">Display</c-button>
<c-button size="small" type="primary">Use</c-button>
</c-col>
</c-row>
<!-- </template> -->
<!-- </c-infsearch-group> -->
<c-row style="margin-top:20px; padding: 0 10px 0 10px;">
<c-istream-table :list="stmData.data" :columns="stmData.columns">
<el-table-column prop="op" label="OP" width="100">
<template slot-scope="scope">
<a href="javascript:void(0)" @click="continueEdit(scope.row)">操作</a>
</template>
</el-table-column>
</c-istream-table>
</c-row>
<c-col>
<c-button size="small" type="primary">导Excel</c-button>
<c-button size="small" type="primary">Display</c-button>
<c-button size="small" type="primary">Use</c-button>
</c-col>
</c-content>
<c-col>
<c-istream-table :list="stmData.data" :columns="stmData.columns">
<el-table-column prop="op" label="OP" width="100">
<template slot-scope="scope">
<a href="javascript:void(0)" @click="continueEdit(scope.row)"
>操作</a
>
</template>
</el-table-column>
</c-istream-table>
</c-col>
</div>
</template>
<script>
import Api from "~/service/Api"
import CommonProcess from "~/mixin/CommonProcess";
import CodeTable from "~/config/CodeTable"
import Event from "~/model/Infcpd/Event"
export default {
inject: ['root'],
props: ["model", "codes"],
mixins: [CommonProcess],
data() {
return {
stmData: {
columns: [
"1 1 \"Reference\" 0 ",
"2 1 \"Resp. User\" 0 ",
"3 1 \"PYE NO.\" 0 ",
"1 2 \"Party Number\" 115",
"2 2 \"Payee Customer\" 115",
"3 2 \"PYE.Customer CN\" 115",
"1 3 \"Party Number\" 115",
"2 3 \"Ord.Customer\" 115",
"3 3 \"Ord.Customer CN\" 115",
"1 4 \"Party Number\" 115",
"2 4 \"Ord.Institution\" 115",
"3 4 \"ORC NO.\" 115",
"1 5 \"Party Number\" 115",
"2 5 \"Paying Bank\" 115",
"1 6 \"Opened\" 0",
"2 6 \"Value\" 0",
"1 7 \"Closed\" 0",
"1 8 \"Cur\" 0",
"2 8 \"Cur\" 0",
"1 9 \"Paym.Amount\" 0",
"2 9 \"Amount rcvd.\" 0",
"1 10 \"Pyectycod\" 80",
"1 11 \"Orcctycod\" 80",
],
data: [
import Api from "~/service/Api";
import CommonProcess from "~/mixin/CommonProcess";
import CodeTable from "~/config/CodeTable";
import Event from "~/model/Infcpd/Event";
]
}
}
},
methods: {
...Event,
handleSearch(callback) {
setTimeout(() => {
this.$notify.info({ title: '提示', message: '模拟post请求控制按钮状态' });
// 执行子组件回调函数控制按钮状态
callback()
}, 1000)
},
handleReset() {
}
},
created: function () {
}
}
export default {
inject: ["root"],
props: ["model", "codes"],
mixins: [CommonProcess],
data() {
return {
searchToggle: true,
stmData: {
columns: [
'1 1 "Reference" 0 ',
'2 1 "Resp. User" 0 ',
'3 1 "PYE NO." 0 ',
'1 2 "Party Number" 115',
'2 2 "Payee Customer" 115',
'3 2 "PYE.Customer CN" 115',
'1 3 "Party Number" 115',
'2 3 "Ord.Customer" 115',
'3 3 "Ord.Customer CN" 115',
'1 4 "Party Number" 115',
'2 4 "Ord.Institution" 115',
'3 4 "ORC NO." 115',
'1 5 "Party Number" 115',
'2 5 "Paying Bank" 115',
'1 6 "Opened" 0',
'2 6 "Value" 0',
'1 7 "Closed" 0',
'1 8 "Cur" 0',
'2 8 "Cur" 0',
'1 9 "Paym.Amount" 0',
'2 9 "Amount rcvd." 0',
'1 10 "Pyectycod" 80',
'1 11 "Orcctycod" 80',
],
data: [],
},
};
},
methods: {
...Event,
handleSearch(callback) {
setTimeout(() => {
this.$notify.info({
title: "提示",
message: "模拟post请求控制按钮状态",
});
// 执行子组件回调函数控制按钮状态
callback();
}, 1000);
},
handleReset() {},
},
created: function () {},
};
</script>
<style>
</style>
\ No newline at end of file
src/views/Business/Infcpd/index.vue
......@@ -30,12 +30,14 @@
</div> -->
<div class="eContainer">
<el-form :model="model" :rules="rules" ref="modelForm" label-width="120px" label-position="left" size="small"
<el-form :model="model" :rules="rules" ref="modelForm" label-width="150px" label-position="right" size="small"
:validate-on-rule-change="false">
<c-tabs v-model="tabVal" ref="elment" type="card" @tab-click="tabClick" class="infcpdTab">
<el-tab-pane label="查询信息" name="infsea">
<c-content :height="120">
<m-infsea :model="model" :codes="codes" />
</c-content>
</el-tab-pane>
<el-tab-pane label="汇款信息" name="infconp">
......@@ -179,4 +181,11 @@
.infcpdTab .infrow {
padding: 0 10px 0 10px;
}
.m-table-search-form {
position: flex;
flex-direction: row;
}
.m-table-search-form .el-form-item__content {
width: calc(100% - 110px);
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment