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