Skip to content

V
vue-gjjs
Commit 5482d10e by liushikai
Options

infcpd查询条件布局调整

parent a85dd3ce
Showing with 261 additions and 211 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"> -->
<c-row> <el-form
<c-col :span="12"> class="m-table-search-form"
ref="paramsForm"
:inline="true"
label-position="right"
label-width="110px"
size="small"
>
<c-row> <c-row>
<c-col :span="19" :offset="1"> <c-col :span="24">
<el-form-item label="Own Reference" prop="infcon.seaownref"> <c-col :span="8">
<c-input v-model="model.infcon.seaownref" maxlength="16" <el-form-item label="Own Reference" prop="infcon.seaownref" style="width:100%">
placeholder="请输入Own Reference"></c-input> <c-input
v-model="model.infcon.seaownref"
maxlength="16"
placeholder="请输入Own Reference"
></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-col :span="12"> <c-col :span="11">
<c-row> <c-date-picker
<c-col :span="19" :offset="1"> type="date"
<el-form-item label="Name" prop="infcon.nam"> v-model="model.infcon.opndatfrom"
<c-input v-model="model.infcon.nam" maxlength="40" placeholder="请输入Name"></c-input> style="width: 100%"
</el-form-item> 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> </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> </el-form-item>
</c-col> </c-col>
</c-row> <c-col :span="8">
</c-col> <el-form-item label="Name" prop="infcon.nam" style="width:100%">
<c-col :span="12"> <c-input
<c-row> v-model="model.infcon.nam"
<c-col :span="10" :offset="1"> maxlength="40"
<el-form-item label="Opening between" prop="infcon.opndatfrom"> placeholder="请输入Name"
<c-date-picker type="date" v-model="model.infcon.opndatfrom" style="width:100%" ></c-input>
placeholder="请选择"></c-date-picker>
</el-form-item> </el-form-item>
</c-col> </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-col>
</c-row> </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-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="Select Single Party" prop="infcon.pty.extkey"> <c-col :span="8">
<c-input v-model="model.infcon.pty.extkey" maxlength="24" <el-form-item label="Party Reference" prop="infcon.searef" style="width:100%">
placeholder="请输入Select Single Party"> <c-input
</c-input> v-model="model.infcon.searef"
maxlength="16"
placeholder="请输入Party Reference"
></c-input>
</el-form-item> </el-form-item>
</c-col> </c-col>
</c-row> <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>
<c-col :span="12"> <c-col :span="8">
<c-row> <el-form-item label="Visible Name" prop="infcon.pty.nam" style="width:100%">
<c-col :span="19" :offset="1"> <c-input
<el-form-item label="Visible Name" prop="infcon.pty.nam"> v-model="model.infcon.pty.nam"
<c-input v-model="model.infcon.pty.nam" maxlength="40" maxlength="40"
placeholder="请输入External Visible Name"> placeholder="请输入External Visible Name"
>
</c-input> </c-input>
</el-form-item> </el-form-item>
</c-col> </c-col>
</c-row>
</c-col> </c-col>
</c-row>
<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="19" :offset="1"> <c-input
<el-form-item label="Party Name/BIC" prop="infcon.seapty"> v-model="model.infcon.seapty"
<c-input v-model="model.infcon.seapty" maxlength="24" maxlength="24"
placeholder="请输入Party Name/BIC"></c-input> placeholder="请输入Party Name/BIC"
></c-input>
</el-form-item> </el-form-item>
</c-col> </c-col>
</c-row> <c-col :span="8">
</c-col> <el-form-item label="Role" prop="infcon.searol" style="width:100%">
<c-col :span="12"> <c-select
<c-row> v-model="model.infcon.searol"
<c-col :span="19" :offset="1"> style="width: 100%"
<el-form-item label="Role" prop="infcon.searol"> placeholder="请选择Role"
<c-select v-model="model.infcon.searol" style="width:100%" placeholder="请选择Role"> >
</c-select> </c-select>
</el-form-item> </el-form-item>
</c-col> </c-col>
</c-row> <c-col :span="8">
</c-col> <el-form-item label="Resp.User" prop="infcon.usr.extkey" style="width:100%">
</c-row> <c-input
v-model="model.infcon.usr.extkey"
<c-row> maxlength="8"
<c-col :span="12"> placeholder="请输入User ID"
<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> </c-input>
</el-form-item> </el-form-item>
</c-col> </c-col>
</c-row>
</c-col> </c-col>
<c-col :span="12">
<c-row> <c-col :span="24">
<c-col :span="19" :offset="1"> <c-col :span="8">
<el-form-item label="Status" prop="infcon.seasta"> <el-form-item label="Status" prop="infcon.seasta" style="width:100%">
<c-select v-model="model.infcon.seasta" style="width:100%" placeholder="请选择Status" <c-select
:code="codes.seasta"> v-model="model.infcon.seasta"
style="width: 100%"
placeholder="请选择Status"
:code="codes.seasta"
>
</c-select> </c-select>
</el-form-item> </el-form-item>
</c-col> </c-col>
</c-row> <c-col :span="8">
</c-col> <el-form-item label="Currency" prop="infcon.seacur" style="width:100%">
</c-row> <c-select
v-model="model.infcon.seacur"
<c-row> style="width: 100%"
<c-col :span="12"> placeholder="请选择Currency"
<c-row> :code="codes.cur"
<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> </c-select>
</el-form-item> </el-form-item>
</c-col> </c-col>
</c-row> <c-col :span="8">
</c-col> <el-form-item label="Amount between" prop="infcon.seaamtfr" style="width:100%">
<c-col :span="12"> <c-col :span="11">
<c-row> <c-input-currency
<c-col :span="10" :offset="1"> v-model="model.infcon.seaamtfr"
<el-form-item label="Amount between" prop="infcon.seaamtfr"> placeholder="请输入Amount"
<c-input-currency v-model="model.infcon.seaamtfr" placeholder="请输入Amount"> >
</c-input-currency> </c-input-currency>
</el-form-item>
</c-col> </c-col>
<c-col :span="8" :offset="1"> <c-col :span="2" style="text-align: center">
<el-form-item label="and" prop="infcon.seaamtto" label-width="40px"> <label style="display: inline-block; width: 100%">-</label>
<c-input-currency v-model="model.infcon.seaamtto" placeholder="请输入Amount"> </c-col>
<c-col :span="11">
<c-input-currency
v-model="model.infcon.seaamtto"
placeholder="请输入Amount"
>
</c-input-currency> </c-input-currency>
</c-col>
</el-form-item> </el-form-item>
</c-col> </c-col>
</c-row>
</c-col> </c-col>
</c-row>
<c-row> <c-col :span="24">
<c-col :span="12"> <c-col :span="8">
<c-row> <el-form-item label="Payment Type" prop="seapaytyp" style="width:100%">
<c-col :span="19" :offset="1"> <c-select
<el-form-item label="Payment Type" prop="seapaytyp"> v-model="model.seapaytyp"
<c-select v-model="model.seapaytyp" style="width:100%" placeholder="请选择Payment Type" style="width: 100%"
:code="codes.seapaytyp"> placeholder="请选择Payment Type"
:code="codes.seapaytyp"
>
</c-select> </c-select>
</el-form-item> </el-form-item>
</c-col> </c-col>
</c-row> <c-col :span="8">
</c-col> <el-form-item label="Swift type" prop="msgtyp" style="width:100%">
<c-col :span="12"> <c-select
<c-row> v-model="model.msgtyp"
<c-col :span="19" :offset="1"> style="width: 100%"
<el-form-item label="Swift type" prop="msgtyp"> placeholder="请选择Swift type"
<c-select v-model="model.msgtyp" style="width:100%" placeholder="请选择Swift type"> >
</c-select> </c-select>
</el-form-item> </el-form-item>
</c-col> </c-col>
</c-row> <c-col :span="8">
</c-col> <el-form-item label="国家代码" prop="countcode" style="width:100%">
</c-row> <c-col :span="11">
<c-select
<c-row> v-model="model.countcode"
<c-col :span="12"> filterable
<c-row> style="width: 100%"
<c-col :span="14" :offset="1"> placeholder="请选择国家代码"
<el-form-item label="国家代码" prop="countcode"> :code="codes.bopcty"
<c-select v-model="model.countcode" filterable style="width:100%" >
placeholder="请选择国家代码" :code="codes.bopcty">
</c-select> </c-select>
</el-form-item>
</c-col> </c-col>
<c-col :span="5"> <c-col :span="13" style="text-align: right">
<el-form-item label="" prop="tsnflg" label-width="20px">
<c-checkbox v-model="model.tsnflg">同名划转标志</c-checkbox> <c-checkbox v-model="model.tsnflg">同名划转标志</c-checkbox>
</el-form-item>
</c-col>
</c-row>
</c-col> </c-col>
<c-col :span="12"> </el-form-item>
<c-row>
<c-col :span="18" :offset="1">
</c-col> </c-col>
</c-row>
</c-col> </c-col>
</c-row> </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> -->
</template> <!-- </template> -->
</c-infsearch-group> <!-- </c-infsearch-group> -->
<c-row style="margin-top:20px; padding: 0 10px 0 10px;">
<c-col> <c-col>
<c-button size="small" type="primary">导Excel</c-button> <c-button size="small" type="primary">导Excel</c-button>
<c-button size="small" type="primary">Display</c-button> <c-button size="small" type="primary">Display</c-button>
<c-button size="small" type="primary">Use</c-button> <c-button size="small" type="primary">Use</c-button>
</c-col> </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-istream-table :list="stmData.data" :columns="stmData.columns">
<el-table-column prop="op" label="OP" width="100"> <el-table-column prop="op" label="OP" width="100">
<template slot-scope="scope"> <template slot-scope="scope">
<a href="javascript:void(0)" @click="continueEdit(scope.row)">操作</a> <a href="javascript:void(0)" @click="continueEdit(scope.row)"
>操作</a
>
</template> </template>
</el-table-column> </el-table-column>
</c-istream-table> </c-istream-table>
</c-row> </c-col>
</div>
</c-content>
</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 { export default {
inject: ['root'], inject: ["root"],
props: ["model", "codes"], props: ["model", "codes"],
mixins: [CommonProcess], mixins: [CommonProcess],
data() { data() {
return { return {
searchToggle: true,
stmData: { stmData: {
columns: [ columns: [
"1 1 \"Reference\" 0 ", '1 1 "Reference" 0 ',
"2 1 \"Resp. User\" 0 ", '2 1 "Resp. User" 0 ',
"3 1 \"PYE NO.\" 0 ", '3 1 "PYE NO." 0 ',
"1 2 \"Party Number\" 115", '1 2 "Party Number" 115',
"2 2 \"Payee Customer\" 115", '2 2 "Payee Customer" 115',
"3 2 \"PYE.Customer CN\" 115", '3 2 "PYE.Customer CN" 115',
"1 3 \"Party Number\" 115", '1 3 "Party Number" 115',
"2 3 \"Ord.Customer\" 115", '2 3 "Ord.Customer" 115',
"3 3 \"Ord.Customer CN\" 115", '3 3 "Ord.Customer CN" 115',
"1 4 \"Party Number\" 115", '1 4 "Party Number" 115',
"2 4 \"Ord.Institution\" 115", '2 4 "Ord.Institution" 115',
"3 4 \"ORC NO.\" 115", '3 4 "ORC NO." 115',
"1 5 \"Party Number\" 115", '1 5 "Party Number" 115',
"2 5 \"Paying Bank\" 115", '2 5 "Paying Bank" 115',
"1 6 \"Opened\" 0", '1 6 "Opened" 0',
"2 6 \"Value\" 0", '2 6 "Value" 0',
"1 7 \"Closed\" 0", '1 7 "Closed" 0',
"1 8 \"Cur\" 0", '1 8 "Cur" 0',
"2 8 \"Cur\" 0", '2 8 "Cur" 0',
"1 9 \"Paym.Amount\" 0", '1 9 "Paym.Amount" 0',
"2 9 \"Amount rcvd.\" 0", '2 9 "Amount rcvd." 0',
"1 10 \"Pyectycod\" 80", '1 10 "Pyectycod" 80',
"1 11 \"Orcctycod\" 80", '1 11 "Orcctycod" 80',
], ],
data: [ data: [],
},
] };
}
}
}, },
methods: { methods: {
...Event, ...Event,
handleSearch(callback) { handleSearch(callback) {
setTimeout(() => { setTimeout(() => {
this.$notify.info({ title: '提示', message: '模拟post请求控制按钮状态' }); this.$notify.info({
title: "提示",
message: "模拟post请求控制按钮状态",
});
// 执行子组件回调函数控制按钮状态 // 执行子组件回调函数控制按钮状态
callback() callback();
}, 1000) }, 1000);
}, },
handleReset() { handleReset() {},
}
}, },
created: function () { 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