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>
|