431 lines
12 KiB
Vue
431 lines
12 KiB
Vue
|
<template>
|
|||
|
|
<div id="oilSiteUser">
|
|||
|
|
<div class="table-header table-div el-scrollbar table-div-box">
|
|||
|
|
<ListLayout :table-columns="tableColumns">
|
|||
|
|
<div slot="search" style="margin-top:5px">
|
|||
|
|
<!--这里放顶部搜索-->
|
|||
|
|
<!-- 搜索部分开始 -->
|
|||
|
|
<el-form label-width="90px" :inline="true" :model="page" class="search-form" :size="$store.getters.size">
|
|||
|
|
<el-form-item style="width:20%">
|
|||
|
|
<el-input
|
|||
|
|
v-model="page.params.bankName"
|
|||
|
|
placeholder="请输入支行名称模糊搜索"
|
|||
|
|
clearable
|
|||
|
|
@keyup.enter.native="getByPage"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item style="width:20%">
|
|||
|
|
<el-input
|
|||
|
|
v-model="page.params.cnaps"
|
|||
|
|
placeholder="请输入联行号精确搜索"
|
|||
|
|
clearable
|
|||
|
|
@keyup.enter.native="getByPage"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
</el-form>
|
|||
|
|
|
|||
|
|
<!-- 搜索部分结束 -->
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<el-row slot="button-group" style="margin-top:5px">
|
|||
|
|
<el-col :span="4" style="text-align: left;">
|
|||
|
|
<el-button
|
|||
|
|
class="group-item"
|
|||
|
|
:size="$store.getters.size"
|
|||
|
|
type="primary"
|
|||
|
|
@click="toAdd"
|
|||
|
|
><svg-icon icon-class="iconyinhang" /> 新增银行</el-button>
|
|||
|
|
</el-col>
|
|||
|
|
|
|||
|
|
<el-col :span="20">
|
|||
|
|
<el-button
|
|||
|
|
type="primary"
|
|||
|
|
:size="$store.getters.size"
|
|||
|
|
icon="el-icon-search"
|
|||
|
|
@click="search"
|
|||
|
|
>查询</el-button>
|
|||
|
|
<el-button
|
|||
|
|
:size="$store.getters.size"
|
|||
|
|
icon="el-icon-refresh"
|
|||
|
|
type="info"
|
|||
|
|
@click="page.params={}"
|
|||
|
|
>重置</el-button>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
|
|||
|
|
<div slot="table">
|
|||
|
|
<!--这里放表格和分页-->
|
|||
|
|
<!-- 列表开始 -->
|
|||
|
|
<el-table
|
|||
|
|
:max-height="tableHeight"
|
|||
|
|
stripe
|
|||
|
|
:data="dataPage.list"
|
|||
|
|
fit
|
|||
|
|
style="width: 100%"
|
|||
|
|
:size="$store.getters.size"
|
|||
|
|
@sort-change="sortHandler"
|
|||
|
|
@selection-change="handleSelectionChange"
|
|||
|
|
>
|
|||
|
|
<el-table-column
|
|||
|
|
type="selection"
|
|||
|
|
width="55"
|
|||
|
|
/>
|
|||
|
|
<el-table-column
|
|||
|
|
label="序号"
|
|||
|
|
type="index"
|
|||
|
|
:index="indexMethod"
|
|||
|
|
/>
|
|||
|
|
<template v-for="(item, index) in tableColumns">
|
|||
|
|
<el-table-column
|
|||
|
|
v-if="item.show"
|
|||
|
|
:key="index"
|
|||
|
|
:fixed="item.fixed"
|
|||
|
|
:align="item.align"
|
|||
|
|
:show-overflow-tooltip="true"
|
|||
|
|
:min-width="item.minWidth"
|
|||
|
|
:width="item.width"
|
|||
|
|
:prop="item.prop"
|
|||
|
|
:sortable="item.sortable"
|
|||
|
|
:label="item.label"
|
|||
|
|
:formatter="item.render"
|
|||
|
|
/>
|
|||
|
|
</template>
|
|||
|
|
<el-table-column fixed="right" label="操作" width="100px">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<el-button
|
|||
|
|
:size="$store.getters.size"
|
|||
|
|
type="text"
|
|||
|
|
@click="update(scope.row.id)"
|
|||
|
|
>
|
|||
|
|
<svg-icon icon-class="iconxiangqing1" />修改
|
|||
|
|
</el-button>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
<!-- 列表结束 -->
|
|||
|
|
|
|||
|
|
<!-- 分页组件开始 -->
|
|||
|
|
<div class="page-div">
|
|||
|
|
<el-pagination
|
|||
|
|
:current-page="page.currentPage"
|
|||
|
|
:page-sizes="[10,15,20,30]"
|
|||
|
|
:page-size="page.pageSize"
|
|||
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|||
|
|
:total="page.totalCount"
|
|||
|
|
@size-change="handleSizeChange"
|
|||
|
|
@current-change="handleCurrentChange"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<!-- 分页组件结束 -->
|
|||
|
|
</div>
|
|||
|
|
</ListLayout>
|
|||
|
|
|
|||
|
|
<!-- 添加企业用户 -->
|
|||
|
|
<el-drawer
|
|||
|
|
:visible.sync="addDialog"
|
|||
|
|
size="40%"
|
|||
|
|
direction="rtl"
|
|||
|
|
>
|
|||
|
|
<interBankOutAdd @getByPage='getByPage' v-if="addDialog" @closeDialog="closeDialog"/>
|
|||
|
|
</el-drawer>
|
|||
|
|
<!-- 修改企业用户 -->
|
|||
|
|
<el-drawer
|
|||
|
|
:visible.sync="updateDialog"
|
|||
|
|
size="40%"
|
|||
|
|
direction="rtl"
|
|||
|
|
>
|
|||
|
|
<interBankOutAdd @getByPage='getByPage' :import-data='importData' @closeDialog="closeDialog"/>
|
|||
|
|
</el-drawer>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
import interBank from '@/api/dict/interBank'
|
|||
|
|
import oilCustomerCompanyAccountApi from '@/api/finance/oilCustomerCompanyAccount'
|
|||
|
|
import interBankOutAdd from './interBankOutAdd'
|
|||
|
|
import { mapGetters } from 'vuex'
|
|||
|
|
import sysCustomerInfoApi from '@/api/user/sysCustomerInfo'
|
|||
|
|
import oilCompanyInfoApi from '@/api/user/oilCompanyInfo'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
interBankOutAdd
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
row:[{a:1,b:2},{a:1,b:2}],
|
|||
|
|
output: {
|
|||
|
|
outputType: 1, // 导出方式，1导出选中，2导出本页，3条件导出，4导出全部
|
|||
|
|
startPage: 1, // 导出开始页
|
|||
|
|
endPage: 1, // 导出结束页
|
|||
|
|
pageSize: 10 // 每页条数
|
|||
|
|
},
|
|||
|
|
companyId: '',
|
|||
|
|
typeDialog: false,
|
|||
|
|
distributeReverseData: {},
|
|||
|
|
userList: [],
|
|||
|
|
queryCompanyList: [],
|
|||
|
|
multipleSelection: [], // 选择表格数据集合
|
|||
|
|
importDialog: false, // 导入弹窗
|
|||
|
|
outPutDialog: false, // 导出弹窗
|
|||
|
|
showTableDrawer: false,
|
|||
|
|
oilCompanyDistributeReverse: {},
|
|||
|
|
companyList: [],
|
|||
|
|
sysCustomerList: [], // 用户集合
|
|||
|
|
page: {
|
|||
|
|
pageSize: 10, // 每页显示条数
|
|||
|
|
currentPage: 1, // 默认页
|
|||
|
|
params: {}, // 查询参数
|
|||
|
|
sorted: {
|
|||
|
|
id:"desc"
|
|||
|
|
},
|
|||
|
|
columns: [
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
tableHeight: document.documentElement.clientHeight - 300 -50,
|
|||
|
|
filters: this.$options.filters,
|
|||
|
|
dataPage: { // 分页显示page
|
|||
|
|
pageSize: 10, // 每页显示条数
|
|||
|
|
currentPage: 1, // 默认页
|
|||
|
|
params: { // 查询参数
|
|||
|
|
},
|
|||
|
|
sorted: {}
|
|||
|
|
},
|
|||
|
|
tableColumns: [
|
|||
|
|
{ prop: 'id', width: 150, label: '编号', show: true, render: (row, column, cell) => {
|
|||
|
|
return cell
|
|||
|
|
} },
|
|||
|
|
{ prop: 'cnaps', width: 250, label: '联行号', show: true, render: (row, column, cell) => {
|
|||
|
|
return cell
|
|||
|
|
} },
|
|||
|
|
{ prop: 'bankName',fixed:"right", label: '支行名称', show: true, render: (row, column, cell) => {
|
|||
|
|
return cell
|
|||
|
|
} }
|
|||
|
|
],
|
|||
|
|
addDialog: false, // 添加弹窗
|
|||
|
|
updateDialog: false, // 修改弹窗
|
|||
|
|
sysSheet: {},
|
|||
|
|
importData:{},
|
|||
|
|
companyAccountRecordsDataPage: { // 公司明细分页显示page
|
|||
|
|
pageSize: 20, // 每页显示条数
|
|||
|
|
currentPage: 1, // 默认页
|
|||
|
|
params: { // 查询参数
|
|||
|
|
},
|
|||
|
|
sorted: {}
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
...mapGetters(['sysUserList'])
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
this.getByPage()
|
|||
|
|
// 增加监听事件，窗口变化时得到高度。
|
|||
|
|
window.addEventListener('resize', this.getHeight, false)
|
|||
|
|
},
|
|||
|
|
// activated() {
|
|||
|
|
// this.getByPage()
|
|||
|
|
// // 增加监听事件，窗口变化时得到高度。
|
|||
|
|
// window.addEventListener('resize', this.getHeight, false)
|
|||
|
|
// },
|
|||
|
|
methods: {
|
|||
|
|
changeEditor(row, r) { // 修改是否允许修改标识
|
|||
|
|
this.$set(row, 'editor', true)
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
// console.log(this.$refs[r])
|
|||
|
|
this.$refs[r].focus()
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
this.plateNumberCompany= row.plateNumberCompany
|
|||
|
|
},
|
|||
|
|
toggleDialog(row, disType) {
|
|||
|
|
this.distributeReverseData = row
|
|||
|
|
this.distributeReverseData.disType = disType
|
|||
|
|
this.typeDialog = true
|
|||
|
|
},
|
|||
|
|
update(id) {
|
|||
|
|
// 跳转到修改
|
|||
|
|
interBank.get(id).then(res => {
|
|||
|
|
this.importData = res.data
|
|||
|
|
this.updateDialog = true
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
searchCompanyInfo(info) {
|
|||
|
|
const oilSiteInfo = {}
|
|||
|
|
oilSiteInfo.name = info
|
|||
|
|
if (info && info !== '') {
|
|||
|
|
oilCompanyInfoApi.getLikeByNameOrId(oilSiteInfo).then(res => {
|
|||
|
|
this.companyList = res.data
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
searchUserInfo(info) {
|
|||
|
|
if (info && info !== '') {
|
|||
|
|
sysCustomerInfoApi.searchInfo(info).then(res => {
|
|||
|
|
this.sysCustomerList = res.data
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// handleDetail(row) {
|
|||
|
|
// // 查看行 详情
|
|||
|
|
// // oilCustomerCompanyAccountApi.get(id).then((res) => {
|
|||
|
|
// // this.oilCustomerCompanyAccount = res.data;
|
|||
|
|
// // this.showTableDrawer = true;
|
|||
|
|
// // });
|
|||
|
|
// this.companyAccountRecordsDataPage.params = {
|
|||
|
|
// customerId: row.customerId
|
|||
|
|
// }
|
|||
|
|
// // 获取明细
|
|||
|
|
// oilCustomerCompanyAccountRecordApi.getByCustomPage(this.companyAccountRecordsDataPage).then(res => {
|
|||
|
|
// console.log('获取明细')
|
|||
|
|
// console.log(res.data)
|
|||
|
|
// this.companyAccountRecordsDataPage = res.data
|
|||
|
|
// this.showTableDrawer = true
|
|||
|
|
// })
|
|||
|
|
// // 获取明细
|
|||
|
|
// },
|
|||
|
|
indexMethod(index) {
|
|||
|
|
return (index + 1) * 1
|
|||
|
|
},
|
|||
|
|
handleSelectionChange(val) { // 选择表格数据
|
|||
|
|
this.multipleSelection = val
|
|||
|
|
},
|
|||
|
|
toForbid() { // 禁用
|
|||
|
|
if (!this.multipleSelection || this.multipleSelection.length < 1) {
|
|||
|
|
this.$message.error('请选择需要操作的数据')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
toStartUsing() { // 启用
|
|||
|
|
if (!this.multipleSelection || this.multipleSelection.length < 1) {
|
|||
|
|
this.$message.error('请选择需要操作的数据')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
handleDetail(id) {
|
|||
|
|
console.log(id)
|
|||
|
|
// 查看行 详情
|
|||
|
|
oilCustomerCompanyAccountRecordApi.getById(id).then(res => {
|
|||
|
|
this.importData = res.data
|
|||
|
|
this.showTableDrawer = true
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
getHeight() {
|
|||
|
|
// 获取浏览器高度并计算得到表格所用高度。
|
|||
|
|
this.tableHeight = document.documentElement.clientHeight - 300 - 60
|
|||
|
|
},
|
|||
|
|
search() {
|
|||
|
|
// 搜索
|
|||
|
|
this.page.currentPage = 1
|
|||
|
|
this.getByPage()
|
|||
|
|
},
|
|||
|
|
handleSizeChange(val) {
|
|||
|
|
this.page.pageSize = val
|
|||
|
|
this.getByPage()
|
|||
|
|
},
|
|||
|
|
handleCurrentChange(val) {
|
|||
|
|
this.page.currentPage = val
|
|||
|
|
this.getByPage()
|
|||
|
|
},
|
|||
|
|
sortHandler(column) {
|
|||
|
|
// 排序查询
|
|||
|
|
console.log(column)
|
|||
|
|
const key = column.prop
|
|||
|
|
const value = column.order
|
|||
|
|
this.page.sorted = {}
|
|||
|
|
this.page.sorted[key] = value
|
|||
|
|
this.getByPage()
|
|||
|
|
},
|
|||
|
|
toAdd() {
|
|||
|
|
// 跳转到添加
|
|||
|
|
this.importData = {
|
|||
|
|
id:"",
|
|||
|
|
cnaps:"",
|
|||
|
|
bankName:""
|
|||
|
|
}
|
|||
|
|
this.addDialog = true
|
|||
|
|
},
|
|||
|
|
toUpdate(id) {
|
|||
|
|
// 跳转到更新
|
|||
|
|
oilCustomerCompanyAccountApi.get(id).then(res => {
|
|||
|
|
this.sysSeh = res.data
|
|||
|
|
this.updateDialog = true
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
getByPage() {
|
|||
|
|
// 分页查询
|
|||
|
|
this.addDialog = false
|
|||
|
|
interBank.getByPage(this.page).then(res => {
|
|||
|
|
this.dataPage = res.data
|
|||
|
|
console.log(this.dataPage)
|
|||
|
|
this.page.totalCount = this.dataPage.totalCount
|
|||
|
|
this.page.totalPage = this.dataPage.totalPage
|
|||
|
|
console.log(this.dataPage,'list')
|
|||
|
|
this.dataPage.list.forEach(item => {
|
|||
|
|
item.roles=item.role.split(',')
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
// },500)
|
|||
|
|
// })
|
|||
|
|
},
|
|||
|
|
closeDialog() {
|
|||
|
|
this.importDialog = false
|
|||
|
|
this.addDialog = false
|
|||
|
|
this.updateDialog = false
|
|||
|
|
this.typeDialog = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.table-detail-drawer{
|
|||
|
|
width: 135%;
|
|||
|
|
}
|
|||
|
|
.handle-button-group {
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
.table-div {
|
|||
|
|
min-height: calc(100vh - 150px);
|
|||
|
|
max-height: calc(100vh - 110px);
|
|||
|
|
position: relative;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
.table-div >>> .header-container {
|
|||
|
|
position: sticky;
|
|||
|
|
top: 0rem;
|
|||
|
|
min-height: 110px;
|
|||
|
|
z-index: 4;
|
|||
|
|
background: #fff;
|
|||
|
|
}
|
|||
|
|
.table-div .el-table__footer-wrapper {
|
|||
|
|
position: fixed !important;
|
|||
|
|
}
|
|||
|
|
.page-div {
|
|||
|
|
position: fixed;
|
|||
|
|
background: #fff;
|
|||
|
|
bottom: 0rem;
|
|||
|
|
z-index: 4;
|
|||
|
|
min-width: 100%;
|
|||
|
|
}
|
|||
|
|
.el-icon-check{
|
|||
|
|
color:#46a6ff
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<style>
|
|||
|
|
.table-div-box .el-form-item__content .el-input{
|
|||
|
|
box-shadow: none !important;
|
|||
|
|
}
|
|||
|
|
.table-div-box .el-form-item--medium .el-form-item__content{
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
#oilSiteUser .el-badge__content {
|
|||
|
|
right: 15px;
|
|||
|
|
top: 5px;
|
|||
|
|
}
|
|||
|
|
</style>
|