Skip to content

V
vue-gjjs
Commit 3fd5fc77 by fukai
Options

完成office调整

parent f7e52a4e
Showing with 357 additions and 441 deletions
src/App.vue
......@@ -20,4 +20,11 @@ export default {
display: flex;
flex-direction: column;
}
.e-table-wrapper{
display: flex;
flex-direction: column;
}
.e-table-wrapper .el-table {
flex:1;
}
</style>
src/index.html
......@@ -10,7 +10,7 @@
height: 100%;
width: 100%;
margin: 0;
overflow: hidden;
}
</style>
</head>
......
src/main.js
......@@ -11,11 +11,13 @@ import RootRouter from './routers'
import store from "./store"
import CustomComponent from "./components"
import VueFunc from "./utils/vuefunc"
window.SUCCESS="00000"
Vue.use(ElementUI)
Vue.use(CustomComponent)
Vue.use(VueFunc)
new Vue({
el: '#app',
......
src/service/Api.js
import axios from 'axios'
import { MessageBox } from 'element-ui'
export const BASE_HOST = "/reactremit/"
export const BASE_URI=BASE_HOST+"service/";
export const BASE_HOST = "/gjjs/"
export const BASE_URI=BASE_HOST+"";
const instance = axios.create({
baseURL: BASE_URI,
......@@ -24,22 +24,22 @@ export default class Api
{
let token = window.sessionStorage.token
let userId = window.sessionStorage.userId
let headers = {userId,token};
let headers = {userId,token,"terminal":"WEB"};
if(url!= `${BASE_URI}login` && token)
headers.token = token;
return new Promise( (resolve, reject) =>{
axios.post(url,data,{
headers,
method,
timeout: 5000,
timeout: 50000,
})
.then(response=>{
const {data} = response;
if(data && data.retcod != SUCCESS)
if(data && data.code != SUCCESS)
{
console.log("错误码："+data.retcod+" 错误信息："+data.retmsg)
console.log("错误码："+data.code+" 错误信息："+data.message)
}
if(data && data.retcod == 'L0003'){
if(data && data.code == 'L0003'){
window.sessionStorage.removeItem("token")
window.sessionStorage.removeItem("userId")
MessageBox.alert({
......
src/store/I18NStore.js
const I18N = {
namespaced: true,
state:{
lang:"cn"
},
......
src/store/UserContext.js
const UserContext={
namespaced: true,
state:{
userName:"",
userId:"",
......@@ -15,6 +16,9 @@ const UserContext={
state.menu = info.menu
state.state = "LOGIN"
state.token = info.token
window.sessionStorage.userId = info.userId
window.sessionStorage.userName = info.userName
window.sessionStorage.token = info.token
},
setLogout(state){
state.userName = ""
......
src/store/index.js
......@@ -7,8 +7,8 @@ Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
i18n: I18NStore,
userContext: UserContext
I18n: I18NStore,
UserContext: UserContext
}
})
......
src/utils/vuefunc.js 0 → 100644
export function findCodeLabel(codes,val)
{
if(!codes)
return val;
let item = codes.find(item=>item.value==val)
if(!item)
return val;
return item.label
}
export default {
install(Vue){
Vue.prototype.findCodeLabel = findCodeLabel
}
}
src/views/Business/Office/TodoItem.vue 0 → 100644
<template>
<div class="e-table-wrapper" style="height:100%">
<el-table
:data="todolist"
style="width: 100%"
>
<el-table-column
prop="typ"
label="操作类型"
sortable
>
<template slot-scope="scope">
<span>{{ findCodeLabel(codes.oratyp,scope.row.typ) }}</span>
</template>
</el-table-column>
<el-table-column
prop="inifrm"
label="交易码"
sortable
>
</el-table-column>
<el-table-column
prop="ownref"
label="业务编号"
sortable
>
</el-table-column>
<el-table-column
prop="nam"
label="概要描述"
sortable
>
</el-table-column>
<el-table-column
prop="usr"
label="经办柜员"
sortable
>
</el-table-column>
<el-table-column
prop="cur"
label="币种"
sortable
>
</el-table-column>
<el-table-column
prop="amt"
label="金额"
sortable
width="100">
</el-table-column>
</el-table>
<el-pagination
layout="prev, pager, next"
:total="pager.total">
</el-pagination>
</div>
</template>
<script>
import CodeTable from "~/config/CodeTable"
import Api from "~/service/Api"
export default {
props:['todoType'],
data(){
return {
codes:{
oratyp:CodeTable.oratyp,
},
todolist:[],
pager:{total:0,curIdx:0}
}
},
methods:{
async onOffpTodo(){
let rtnmsg = await Api.post("office/offp_todo",{data:{'offp_todotyp':this.todoType}})
if(rtnmsg.code == SUCCESS)
{
//TODO 处理数据逻辑
this.todolist = rtnmsg.data.offp_todolst
}
else
{
this.$notify.error({title: '错误',message: '服务请求失败！'});
}
}
},
mounted(){
this.onOffpTodo()
}
}
</script>
src/views/Business/Office/index.vue
<template>
<div class="eContainer">
<el-form :model="model" :rules="rules" ref="modelForm" label-width="100px" size="small">
<el-col :span="12">
<el-form-item label="待办类型">
<el-select v-model="model.offp.todotyp" style="width:100%" placeholder="请选择待办类型">
<el-option
v-for="item in codes.todo"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-button size="small" type="primary" @click="onOffpTodo">
查询
</el-button>
</el-col>
<el-col :span="12">
<el-form-item label="">
<el-select v-model="model.offp.selten" style="width:100%" placeholder="请选择">
<el-option
v-for="item in codes.selten"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<div class="e-table-wrapper">
<el-table
:data="model.offp.todolst"
style="width: 100%"
>
<el-table-column
prop="typ"
label="操作类型"
sortable
width="100">
<template slot-scope="scope">
<span>{{ this.codes.oratyp.find(item=>item.value==scope.row.typ).label }}</span>
</template>
</el-table-column>
<el-table-column
prop="inifrm"
label="交易码"
sortable
width="100">
</el-table-column>
<el-table-column
prop="ownref"
label="业务编号"
sortable
width="100">
</el-table-column>
<el-table-column
prop="nam"
label="概要描述"
sortable
width="100">
</el-table-column>
<el-table-column
prop="usr"
label="经办柜员"
sortable
width="100">
</el-table-column>
<el-table-column
prop="cur"
label="币种"
sortable
width="100">
</el-table-column>
<el-table-column
prop="amt"
label="金额"
sortable
width="100">
</el-table-column>
<el-table-column
prop="objtyp"
label=""
sortable
width="100">
</el-table-column>
<el-table-column
prop="objinr"
label=""
sortable
width="100">
</el-table-column>
</el-table>
<el-pagination
layout="prev, pager, next"
:total="pager.offp_todolst.total">
</el-pagination>
</div>
</el-col>
<el-col :span="12">
<el-button size="small" type="primary" @click="onOffpTstcal">
接口测试
</el-button>
</el-col>
<el-col :span="12">
<el-form-item label="用户ID">
<el-input v-model="model.sysmod.usr.nam" maxlength="8" placeholder="请输入用户ID"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="用户名称">
<el-input v-model="model.sysmod.usr.dspnam" maxlength="40" placeholder="请输入用户名称"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="机构编码">
<el-input v-model="model.sysmod.bch.branch" maxlength="8" placeholder="请输入机构编码"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="中文名称">
<el-input v-model="model.sysmod.bch.namcn" maxlength="40" placeholder="请输入中文名称"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<div class="e-table-wrapper">
<el-table
:data="model.offp.xrtlst"
style="width: 100%"
>
<el-table-column
prop="cur"
label="币种"
sortable
width="100">
<template slot-scope="scope">
<span>{{ this.codes.curtxt.find(item=>item.value==scope.row.cur).label }}</span>
</template>
</el-table-column>
<el-table-column
prop="buyrat"
label="买入价"
sortable
width="100">
</el-table-column>
<el-table-column
prop="midrat"
label="中间价"
sortable
width="100">
</el-table-column>
<el-table-column
prop="selrat"
label="卖出价"
sortable
width="100">
</el-table-column>
</el-table>
<el-pagination
layout="prev, pager, next"
:total="pager.offp_xrtlst.total">
</el-pagination>
</div>
</el-col>
<el-col :span="24">
<div class="e-table-wrapper">
<el-table
:data="model.offp.iralst"
style="width: 100%"
>
<el-table-column
prop="cur"
label="币种"
sortable
width="100">
<template slot-scope="scope">
<span>{{ this.codes.relflg.find(item=>item.value==scope.row.cur).label }}</span>
</template>
</el-table-column>
<el-table-column
prop="iratyp"
label="类型"
sortable
width="100">
</el-table-column>
<el-table-column
prop="due"
label="期限"
sortable
width="100">
<template slot-scope="scope">
<span>{{ this.codes.dbfmethod.find(item=>item.value==scope.row.due).label }}</span>
</template>
</el-table-column>
<el-table-column
prop="basrat"
label="利率"
sortable
width="100">
</el-table-column>
</el-table>
<el-pagination
layout="prev, pager, next"
:total="pager.offp_iralst.total">
</el-pagination>
</div>
</el-col>
<el-col :span="12">
<el-form-item label="原密码">
<el-input type="password" v-model="model.offp.oldpwd" maxlength="100" placeholder="请输入原密码"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="交易代码">
<el-input v-model="model.trncod" maxlength="6" placeholder="请输入交易代码"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-button size="small" type="primary" @click="onLaunch">
跳转
</el-button>
</el-col>
<el-col :span="12">
<el-form-item label="新密码">
<el-input type="password" v-model="model.offp.newpwd" maxlength="100" placeholder="请输入新密码"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="确认新密码">
<el-input type="password" v-model="model.offp.newpwdcom" maxlength="100" placeholder="请输入确认新密码"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-button size="small" type="primary" @click="onOffpChgpaswod">
密码修改
</el-button>
</el-col>
</el-form>
</div>
</template>
<script>
import Api from "~/service/Api"
import CodeTable from "~/config/CodeTable"
export default {
data(){
return {
codes:{
dsp:CodeTable.dsp,
busflg:CodeTable.busflg,
actiontype:CodeTable.actiontype,
cur:CodeTable.cur,
ptytyp:CodeTable.ptytyp,
staflg:CodeTable.staflg,
paytyp:CodeTable.paytyp,
payattr:CodeTable.payattr,
balancemode:CodeTable.balancemode,
bopcustype:CodeTable.bopcustype,
payeeattr:CodeTable.payeeattr,
boppaytype:CodeTable.boppaytype,
debcdtflg:CodeTable.debcdtflg,
acttyp:CodeTable.acttyp,
payflg:CodeTable.payflg,
buscod:CodeTable.buscod,
datsrc:CodeTable.datsrc,
sndselflg:CodeTable.sndselflg,
relflg:CodeTable.relflg,
payacttyp:CodeTable.payacttyp,
curtxt:CodeTable.curtxt,
dbfmethod:CodeTable.dbfmethod,
bustyp:CodeTable.bustyp,
todo:CodeTable.todo,
swftyp:CodeTable.swftyp,
payeraccttype:CodeTable.payeraccttype,
oratyp:CodeTable.oratyp,
chato:CodeTable.chato,
opertype:CodeTable.opertype,
bopyesno:CodeTable.bopyesno,
custyp:CodeTable.custyp,
selten:CodeTable.selten,
dsp2:CodeTable.dsp2,
liqtyp:CodeTable.liqtyp,
},
<template>
<el-form :model="model" :rules="rules" ref="modelForm" label-width="100px" size="small" style="height:100%;">
<el-container style="height:100%;">
<el-main style="padding:0">
<el-container style="height:100%">
<el-main style="padding:0">
<el-tabs class="fulltab" v-model="todoActive" type="card" @tab-click="handleClick">
<el-tab-pane v-for="item in codes.todo" :key="item.value" :label="item.label" :name="item.value">
<s-todo :todoType="item.value"/>
</el-tab-pane>
</el-tabs>
</el-main>
</el-container>
</el-main>
<div style="width:8px;background-color:#E8E8E8;"></div>
<el-aside>
<div class="rightPanel">
<c-page title="牌价">
<div class="e-table-wrapper">
<el-table
:data="model.offp.xrtlst"
style="width: 100%"
>
<el-table-column
prop="cur"
label="币种"
sortable
>
<template slot-scope="scope">
<span>{{
findCodeLabel(codes.curtxt,scope.row.cur)
}}</span>
</template>
</el-table-column>
<el-table-column
prop="buyrat"
label="买入价"
sortable
>
</el-table-column>
<el-table-column
prop="midrat"
label="中间价"
sortable
>
</el-table-column>
<el-table-column
prop="selrat"
label="卖出价"
sortable
>
</el-table-column>
</el-table>
</div>
</c-page>
<div style="height:16px;background-color:#E8E8E8"></div>
<c-page title="利率">
<div class="e-table-wrapper">
<el-table
:data="model.offp.iralst"
style="width: 100%"
>
<el-table-column
prop="cur"
label="币种"
sortable
>
<template slot-scope="scope">
<span>{{ findCodeLabel(codes.relflg,scope.row.cur)}}</span>
</template>
</el-table-column>
<el-table-column
prop="iratyp"
label="类型"
sortable
>
</el-table-column>
<el-table-column
prop="due"
label="期限"
sortable
>
<template slot-scope="scope">
<span>{{ findCodeLabel(codes.dbfmethod,scope.row.due) }}</span>
</template>
</el-table-column>
<el-table-column
prop="basrat"
label="利率"
sortable
>
</el-table-column>
</el-table>
</div>
</c-page>
</div>
</el-aside>
</el-container>
</el-form>
</template>
<script>
import Api from "~/service/Api"
import CodeTable from "~/config/CodeTable"
import s_todo from "./TodoItem"
export default {
components:{"s-todo":s_todo},
data(){
return {
todoActive:"WAT",
codes:{
dsp:CodeTable.dsp,
busflg:CodeTable.busflg,
actiontype:CodeTable.actiontype,
cur:CodeTable.cur,
ptytyp:CodeTable.ptytyp,
staflg:CodeTable.staflg,
paytyp:CodeTable.paytyp,
payattr:CodeTable.payattr,
balancemode:CodeTable.balancemode,
bopcustype:CodeTable.bopcustype,
payeeattr:CodeTable.payeeattr,
boppaytype:CodeTable.boppaytype,
debcdtflg:CodeTable.debcdtflg,
acttyp:CodeTable.acttyp,
payflg:CodeTable.payflg,
buscod:CodeTable.buscod,
datsrc:CodeTable.datsrc,
sndselflg:CodeTable.sndselflg,
relflg:CodeTable.relflg,
payacttyp:CodeTable.payacttyp,
curtxt:CodeTable.curtxt,
dbfmethod:CodeTable.dbfmethod,
bustyp:CodeTable.bustyp,
todo:CodeTable.todo,
swftyp:CodeTable.swftyp,
payeraccttype:CodeTable.payeraccttype,
oratyp:CodeTable.oratyp,
chato:CodeTable.chato,
opertype:CodeTable.opertype,
bopyesno:CodeTable.bopyesno,
custyp:CodeTable.custyp,
selten:CodeTable.selten,
dsp2:CodeTable.dsp2,
liqtyp:CodeTable.liqtyp,
},
model:{
offp:{
todotyp:"", // 待办类型 .offp.todotyp
todolst:[], // .offp.todolst
selten:"", // .offp.selten
xrtlst:[], // .offp.xrtlst
iralst:[], // .offp.iralst
oldpwd:"", // 原密码 .offp.oldpwd
newpwd:"", // 新密码 .offp.newpwd
newpwdcom:"", // 确认新密码 .offp.newpwdcom
},
sysmod:{
usr:{
dspnam:"", // 用户名称 .sysmod.usr.dspnam
nam:"", // 用户ID .sysmod.usr.nam
},
bch:{
branch:"", // 机构编码 .sysmod.bch.branch
namcn:"", // 中文名称 .sysmod.bch.namcn
},
},
trncod:"", // 交易代码 .trncod
},
pager:{
"offp_todolst":{total:0,curIdx:0},
"offp_xrtlst":{total:0,curIdx:0},
"offp_iralst":{total:0,curIdx:0},
},
rules:{
"sysmod.usr.nam":[{type: "string", required: false, len: 8, message: "输入不合法"}],
"sysmod.usr.dspnam":[{type: "string", required: false, len: 40, message: "输入不合法"}],
"sysmod.bch.branch":[{type: "string", required: false, len: 8, message: "输入不合法"}],
"sysmod.bch.namcn":[{type: "string", required: false, len: 40, message: "输入不合法"}],
"offp.oldpwd":[{type: "string", required: true, len: 100, message: "输入不合法"}],
"trncod":[{type: "string", required: false, len: 6, message: "输入不合法"}],
"offp.newpwd":[{type: "string", required: true, len: 100, message: "输入不合法"}],
"offp.newpwdcom":[{type: "string", required: true, len: 100, message: "输入不合法"}],
}
}
},
methods:{
onOffpTodo(){
this.$refs.modelForm.validate(async valid => {
if(!valid)
return;
let rtnmsg = await Api.post("office/offp_todo",{data:this.model})
if(rtnmsg.retcod == SUCCESS)
{
//TODO 处理数据逻辑
}
else
{
this.$notify.error({title: '错误',message: '服务请求失败！'});
}
})
},
onOffpTstcal(){
this.$refs.modelForm.validate(async valid => {
if(!valid)
return;
let rtnmsg = await Api.post("office/offp_tstcal",{data:this.model})
if(rtnmsg.retcod == SUCCESS)
{
//TODO 处理数据逻辑
}
else
{
this.$notify.error({title: '错误',message: '服务请求失败！'});
}
})
},
onLaunch(){
this.$refs.modelForm.validate(async valid => {
if(!valid)
return;
let rtnmsg = await Api.post("office/launch",{data:this.model})
if(rtnmsg.retcod == SUCCESS)
{
//TODO 处理数据逻辑
}
else
{
this.$notify.error({title: '错误',message: '服务请求失败！'});
}
})
},
onOffpChgpaswod(){
this.$refs.modelForm.validate(async valid => {
if(!valid)
return;
let rtnmsg = await Api.post("office/offp_chgpaswod",{data:this.model})
if(rtnmsg.retcod == SUCCESS)
{
//TODO 处理数据逻辑
}
else
{
this.$notify.error({title: '错误',message: '服务请求失败！'});
}
})
},
},
created:async function(){
console.log("进入office交易");
let rtnmsg = await Api.post("office/init",{params:{}})
if(rtnmsg.retcod == SUCCESS)
{
//TODO 处理数据逻辑
}
else
{
this.$notify.error({title: '错误',message: '服务请求失败！'});
}
}
}
</script>
<style>
</style>
offp:{
todotyp:[], // 待办类型 .offp.todotyp
todolst:[], // .offp.todolst
selten:"", // .offp.selten
xrtlst:[], // .offp.xrtlst
iralst:[], // .offp.iralst
},
},
rules:{}
}
},
methods:{
handleClick(){}
},
mounted:async function(){
console.log("进入office交易");
let rtnmsg = await Api.post("office/init",{params:{}})
console.log(rtnmsg)
if(rtnmsg.code == SUCCESS)
{
//TODO 处理数据逻辑
this.model.offp.todolst = rtnmsg.data.offp_todolst || []
this.model.offp.iralst = rtnmsg.data.offp_iralst || []
this.model.offp.xrtlst = rtnmsg.data.offp_xrtlst || []
}
else
{
this.$notify.error({title: '错误',message: '服务请求失败！'});
}
}
}
</script>
<style>
.rightPanel{
display: flex;
height: 100%;
flex-direction: column;
}
.rightPanel .e-table-wrapper{
height: 100%;
}
.fulltab.el-tabs{
display: flex;
height: 100%;
flex-direction: column;
}
.fulltab.el-tabs .el-tabs__content{
flex:1;
}
.fulltab.el-tabs .el-tabs__content .el-tab-pane{
height: 100%;
}
</style>
\ No newline at end of file
src/views/Layout/Header.vue
<template>
<div class="self-header">
<h2 class="self_header_label">新一代邮储银行国际结算系统</h2>
<h2 class="self_header_label">新一代银行国际结算系统</h2>
</div>
</template>
......
src/views/Login/index.vue
<template>
<div class="loginContainer">
<div id="loginForamWrapper">
<h2>欢迎邮储银行国际结算系统</h2>
<h2>欢迎银行国际结算系统</h2>
<div id="loginForm">
<p style="text-align:left;font-size:1.2em;color:#888">用户登录 / LOGIN IN</p>
<el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" size="small" >
......@@ -23,6 +23,11 @@
</template>
<script>
import { createNamespacedHelpers } from 'vuex'
const { mapState, mapMutations,mapActions } = createNamespacedHelpers('UserContext')
export default {
data() {
return {
......@@ -44,6 +49,7 @@
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.setLoginInfo({userId:this.loginForm.username})
this.$router.push("/business/office");
} else {
console.log('error submit!!');
......@@ -53,7 +59,8 @@
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
},
...mapMutations(["setLoginInfo"])
}
}
</script>
......
webpack.config.js
......@@ -58,11 +58,11 @@ module.exports = (options = {}) => ({
host: '127.0.0.1',
port: 8010,
proxy: {
'/api/': {
target: 'http://127.0.0.1:8080',
'/gjjs/': {
target: 'http://127.0.0.1:8070',
changeOrigin: true,
pathRewrite: {
'^/api': ''
'^/gjjs': '/gjjs'
}
}
},
......
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