<template>
|
<div id="account">
|
<el-button
|
type="primary"
|
size="mini"
|
@click="handleAdd"
|
style="margin-bottom: 20px"
|
v-if="stageShow"
|
>新增</el-button>
|
<el-form ref="ruleForm" :model="ruleForm" :show-message="false">
|
<el-table :data="ruleForm.tableData" stripe fit style="width: 100%;" size="small">
|
<!-- :render-header="renderHeader" -->
|
<el-table-column prop="accountid" label="账户号码" width="150">
|
<template slot="header">
|
<span>
|
<span class="red-star"></span>
|
<span style="padding-left:8px">账户号码</span>
|
</span>
|
</template>
|
<template slot-scope="scope">
|
<!-- <div v-if="!scope.row.save">{{ scope.row.accountid }}</div> -->
|
<div v-if="!scope.row.save">
|
<el-popover v-if="scope.row.accountid.length > 16" class="beyondContent" placement="top-start" width="200" trigger="hover" >
|
<div>{{scope.row.accountid}}</div>
|
<span slot="reference">{{ scope.row.accountid}}</span>
|
</el-popover>
|
<div v-else>{{ scope.row.accountid }}</div>
|
</div>
|
<el-form-item
|
:prop="'tableData.' + scope.$index + '.accountid'"
|
:rules="rules('accountid')"
|
v-if="scope.row.save"
|
>
|
<el-input v-model.number="scope.row.accountid" size="mini"></el-input>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column prop="accountname" width="150">
|
<template slot="header">
|
<span>
|
<span class="red-star"></span>
|
<span style="padding-left:8px">账户名称</span>
|
</span>
|
</template>
|
<template slot-scope="scope">
|
<!-- <div v-if="!scope.row.save">{{ scope.row.accountname }}</div> -->
|
<div v-if="!scope.row.save">
|
<el-popover v-if="scope.row.accountname.length > 16" class="beyondContent" placement="top-start" width="200" trigger="hover" >
|
<div>{{scope.row.accountname}}</div>
|
<span slot="reference">{{ scope.row.accountname}}</span>
|
</el-popover>
|
<div v-else>{{ scope.row.accountname }}</div>
|
</div>
|
<el-form-item
|
:prop="'tableData.' + scope.$index + '.accountname'"
|
:rules="rules('accountname')"
|
v-if="scope.row.save"
|
>
|
<el-input v-model.number="scope.row.accountname" size="mini"></el-input>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column prop="telphone" width="150">
|
<template slot="header">
|
<span>
|
<span class="red-star"></span>
|
<span style="padding-left:8px">手机号码</span>
|
</span>
|
</template>
|
<template slot-scope="scope">
|
<!-- <div v-if="!scope.row.save">{{ scope.row.telphone }}</div> -->
|
<div v-if="!scope.row.save">
|
<el-popover v-if="scope.row.telphone.length > 16" class="beyondContent" placement="top-start" width="200" trigger="hover" >
|
<div>{{scope.row.telphone}}</div>
|
<span slot="reference">{{ scope.row.telphone}}</span>
|
</el-popover>
|
<div v-else>{{ scope.row.telphone }}</div>
|
</div>
|
<el-form-item
|
:prop="'tableData.' + scope.$index + '.telphone'"
|
:rules="rules('telphone')"
|
v-if="scope.row.save"
|
>
|
<el-input v-model.number="scope.row.telphone" size="mini"></el-input>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column prop="bankdeposit" width="250">
|
<template slot="header">
|
<span>
|
<span class="red-star"></span>
|
<span style="padding-left:8px">开户银行</span>
|
</span>
|
</template>
|
<template slot-scope="scope">
|
<div v-if="!scope.row.save">{{ scope.row.bankdepositDesc }}</div>
|
<el-form-item
|
:prop="'tableData.' + scope.$index + '.bankdeposit'"
|
:rules="rules('bankdeposit')"
|
v-if="scope.row.save"
|
>
|
<el-select
|
v-model="scope.row.bankdeposit"
|
filterable
|
clearable
|
placeholder="请选择"
|
size="mini"
|
@change="handleBank"
|
>
|
<el-option
|
v-for="(item, index) in options.bankdeposit"
|
:key="index"
|
:label="item.itemname"
|
:value="item.itemno"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column prop="provincedeposit" width="200">
|
<template slot="header">
|
<span>
|
<span class="red-star"></span>
|
<span style="padding-left:8px">开户所在省</span>
|
</span>
|
</template>
|
<template slot-scope="scope">
|
<div v-if="!scope.row.save">{{ scope.row.provincedepositDesc }}</div>
|
<el-form-item
|
:prop="'tableData.' + scope.$index + '.provincedeposit'"
|
:rules="rules('provincedeposit')"
|
v-if="scope.row.save"
|
>
|
<el-select
|
v-model="scope.row.provincedeposit"
|
filterable
|
clearable
|
placeholder="请选择"
|
size="mini"
|
@change="handleProvince"
|
>
|
<el-option
|
v-for="(item, index) in options.provincedeposit"
|
:key="index"
|
:label="item.itemname"
|
:value="item.itemno"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column prop="citydeposit" width="200">
|
<template slot="header">
|
<span>
|
<span class="red-star"></span>
|
<span style="padding-left:8px">开户所在市</span>
|
</span>
|
</template>
|
<template slot-scope="scope">
|
<div v-if="!scope.row.save">{{ scope.row.citydepositDesc }}</div>
|
<el-form-item
|
:prop="'tableData.' + scope.$index + '.citydeposit'"
|
:rules="rules('citydeposit')"
|
v-if="scope.row.save"
|
>
|
<el-select
|
v-model="scope.row.citydeposit"
|
filterable
|
clearable
|
placeholder="请选择"
|
size="mini"
|
>
|
<el-option
|
v-for="(item, index) in options.citydeposit"
|
:key="index"
|
:label="item.itemname"
|
:value="item.itemno"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column prop="subbranchdeposit" min-width="200">
|
<template slot="header">
|
<span>
|
<span class="red-star"></span>
|
<span style="padding-left:8px">开户支行</span>
|
</span>
|
</template>
|
<template slot-scope="scope">
|
<!-- <div v-if="!scope.row.save">{{ scope.row.subbranchdepositname }}</div> -->
|
<div v-if="!scope.row.save">
|
<el-popover v-if="scope.row.subbranchdepositname.length > 16" class="beyondContent" placement="top-start" width="200" trigger="hover" >
|
<div>{{scope.row.subbranchdepositname}}</div>
|
<span slot="reference">{{ scope.row.subbranchdepositname}}</span>
|
</el-popover>
|
<div v-else>{{ scope.row.subbranchdepositname }}</div>
|
</div>
|
<el-form-item
|
:prop="'tableData.' + scope.$index + '.subbranchdeposit'"
|
:rules="rules('subbranchdeposit')"
|
v-if="scope.row.save"
|
>
|
<!-- <el-select v-model="scope.row.subbranchdeposit" filterable clearable placeholder="请选择" size="mini" >
|
<el-option
|
v-for="(item, index) in options.subbranchdeposit"
|
:key="index"
|
:label="item.bankname"
|
:value="item.bankno"
|
>
|
</el-option>
|
</el-select>-->
|
<el-input v-model="scope.row.subbranchdepositname" :readonly="true" @click.native="branchBank(scope.$index)">
|
<!-- <el-button
|
slot="append"
|
icon="el-icon-search"
|
@click="branchBank(scope.$index)"
|
:disabled="isClickBranchBank"
|
></el-button> -->
|
</el-input>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column label="资金数据管理" width="140px" v-if="stageShow" fixed="right">
|
<template slot-scope="scope">
|
<!-- <el-button v-if="!scope.row.save" type="text" size="mini" @click="handleEdit(scope.$index)"> -->
|
<el-button v-if="!scope.row.save" type="text" size="mini" @click="handleEdit(scope)">修改</el-button>
|
<el-button
|
v-if="scope.row.save"
|
type="text"
|
size="mini"
|
@click="handleSave(scope.row, scope.$index)"
|
>保存</el-button>
|
<el-button
|
type="text"
|
v-if="!scope.row.cancel"
|
size="mini"
|
@click="handleDelete(scope.row, scope.$index)"
|
>删除</el-button>
|
<el-button
|
type="text"
|
v-if="scope.row.cancel"
|
size="mini"
|
@click="handleCancel(scope.row,scope.$index)"
|
>取消</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<pagination
|
v-show="total > 1"
|
:total="total"
|
:page.sync="listQuery.currentPage"
|
:limit.sync="listQuery.pageSize"
|
@pagination="initTable"
|
:bankIndex="bankIndex"
|
/>
|
</el-form>
|
<Bank
|
v-if="isBank"
|
:bankVisible="isBank"
|
@closeBank="isBank = false"
|
@sendBankData="sendBankData"
|
:bankcode="bankcode"
|
></Bank>
|
</div>
|
</template>
|
|
<script>
|
import {
|
qryChannelAccountList,
|
addChannelAccountInfo,
|
delChannelAccoutInfo,
|
saveChannelAccountInfo,
|
getDictionaryList,
|
} from '@/api/area/partner'
|
import { getProvinceCodeList, getCityCodeList } from '@/api/area'
|
import Pagination from '@/components/Pagination'
|
import Bank from './Bank'
|
import { mapState } from 'vuex'
|
export default {
|
components: { Pagination, Bank },
|
props: ['serialno'],
|
data: function() {
|
return {
|
// 分页
|
listLoading: true,
|
total: 0,
|
listQuery: {
|
currentPage: 1,
|
pageSize: 10
|
},
|
ruleForm: {
|
tableData: []
|
},
|
form: {
|
accountid: '',
|
accountname: '',
|
bankdeposit: '',
|
citydeposit: '',
|
channelid: '',
|
provincedeposit: '',
|
serialno: '',
|
subbranchdeposit: '',
|
telphone: ''
|
},
|
options: {
|
bankdeposit: [],
|
provincedeposit: [],
|
citydeposit: [],
|
subbranchdeposit: []
|
},
|
row: {},
|
saveSuccess: true,
|
isBank: false,
|
isClickBranchBank: true, // 是否
|
bankcode: '', // 银行编码
|
bankIndex: '',
|
}
|
},
|
created() {
|
this.initBankList()
|
this.initProvince()
|
this.initTable()
|
},
|
computed: {
|
...mapState({
|
partnerParams: state => state.risk.partnerParams
|
}),
|
stageShow() {
|
const { phaseno } = this.partnerParams
|
if (
|
phaseno === '0040' ||
|
phaseno === '0050' ||
|
phaseno === '0060' ||
|
phaseno === '0070' ||
|
phaseno === '0080' ||
|
phaseno === '0090'
|
) {
|
return false
|
} else {
|
return true
|
}
|
}
|
},
|
methods: {
|
// 初始化表格
|
async initTable() {
|
let params = {
|
channelid: this.partnerParams.serialno
|
}
|
Object.assign(params, this.listQuery)
|
let res = await qryChannelAccountList(params)
|
this.ruleForm.tableData = res.result.records
|
this.total = res.result.total
|
this.ruleForm.tableData.forEach((item, key) => {
|
item = Object.assign({}, item, { save: false })
|
})
|
this.initForm()
|
this.listLoading = false
|
},
|
|
async initForm() {
|
let params = {
|
serialno: this.partnerParams.serialno,
|
objectType: this.partnerParams.objectType
|
}
|
Object.assign(this.row, this.form)
|
let res = await addChannelAccountInfo(params)
|
this._.merge(this.form, res.result)
|
},
|
|
// 查询银行
|
async initBankList() {
|
let params = { codeNo: 'BankCode' }
|
let res = await getDictionaryList(params)
|
this.options.bankdeposit = res.result
|
},
|
|
// 查询省
|
async initProvince() {
|
getProvinceCodeList({}).then(res => {
|
this.options.provincedeposit = res.result
|
})
|
},
|
|
// 省联动
|
handleProvince(value) {
|
this.options.citydeposit = ''
|
let params = {
|
codeNo: 'AreaCode',
|
itmeNo: value
|
}
|
getCityCodeList(params).then(res => {
|
this.options.citydeposit = res.result
|
})
|
},
|
|
handleBank(value, val) {
|
// 支联动
|
this.isClickBranchBank = false
|
// this.options.subbranchdeposit = ''
|
this.bankcode = value
|
|
// let params = { bankcode: value }
|
// qryBankBranchList(params).then(res => {
|
// this.options.subbranchdeposit = res.result.records
|
// })
|
},
|
branchBank(index) {
|
const { bankcode } = this
|
if (bankcode) {
|
this.bankIndex = index
|
this.isBank = true
|
} else {
|
this.$message.warning('请先选择开户银行')
|
}
|
},
|
// 接受子组件回传数据
|
sendBankData(data) {
|
const { bankIndex } = this
|
this.ruleForm.tableData[bankIndex].subbranchdeposit = data.bankno
|
this.ruleForm.tableData[bankIndex].subbranchdepositname = data.bankname
|
this.form.subbranchdeposit = data.bankno
|
},
|
|
// handleEdit(index) {
|
handleEdit(scope) {
|
this.handleProvince(scope.row.citydeposit)
|
this.handleBank(scope.row.bankdeposit)
|
if (this._.find(this.ruleForm.tableData, { save: true })) {
|
this.$message.warning('请保存当前数据！')
|
return false
|
}
|
this.$set(this.ruleForm.tableData[scope.$index], 'save', true)
|
this.$set(this.ruleForm.tableData[scope.$index], 'cancel', true)
|
this.modifyRow = Object.assign({}, scope.row)
|
},
|
|
handleSave(row, index) {
|
let params = {}
|
Object.keys(this.form).forEach(key => {
|
params[key] = row[key]
|
})
|
params.channelid = this.partnerParams.serialno
|
this.$refs['ruleForm'].validate(valid => {
|
if (valid) {
|
saveChannelAccountInfo(params).then(res => {
|
if (res.code === '00') {
|
this.$message.success('保存成功')
|
this.$set(this.ruleForm.tableData[index], 'save', false)
|
this.$set(this.ruleForm.tableData[index], 'cancel', false)
|
this.initTable()
|
}
|
})
|
} else {
|
this.$message.warning('当前页面存在必填项未录入或数据录入错误,请检查!')
|
return false
|
}
|
})
|
},
|
|
async handleDelete(row, index) {
|
if (row.newRow) {
|
this.ruleForm.tableData.splice(index, 1)
|
this.initTable()
|
return false
|
}
|
let confirm = await this.$confirm(
|
'此操作将永久删除该内容, 是否继续?',
|
'删除确认',
|
{
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
customClass: 'par_messages_box',
|
confirmButtonClass: 'par_messages_box_confirm',
|
cancelButtonClass: 'par_messages_box_cancel',
|
center: true
|
}
|
)
|
.then(() => {
|
return true
|
})
|
.catch(() => {
|
return false
|
})
|
let params = { serialno: row.serialno }
|
if (confirm) {
|
let res = await delChannelAccoutInfo(params)
|
if (res.code === '00') {
|
this.$message.success('删除成功！')
|
this.initTable()
|
}
|
}
|
},
|
|
handleAdd() {
|
if (this._.find(this.ruleForm.tableData, { save: true })) {
|
this.$message.warning('请保存当前数据！')
|
return false
|
}
|
Object.keys(this.form).forEach(key => {
|
this.row[key] = this.form[key].value
|
})
|
let params = {
|
save: true,
|
cancel: false,
|
newRow: true
|
}
|
Object.assign(params, this.row)
|
this.ruleForm.tableData.unshift(params)
|
},
|
// 取消
|
handleCancel(row, index) {
|
for (let key in row) {
|
if (row[key] !== this.modifyRow[key]) {
|
this.saveSuccess = false // 用户修改了数据
|
break
|
}
|
}
|
if (!this.saveSuccess) {
|
// 数据修改了
|
this.$confirm('检测到未保存的内容，是否保存当行修改？', '取消确认', {
|
distinguishCancelAndClose: true,
|
confirmButtonText: '保存',
|
cancelButtonText: '放弃修改',
|
customClass: 'enp_messages_box',
|
confirmButtonClass: 'enp_messages_box_confirm',
|
cancelButtonClass: 'enp_messages_box_cancel',
|
center: true
|
})
|
.then(() => {
|
// 保存
|
row.cancel = !row.cancel
|
row.save = !row.save
|
// this.$message.success('保存成功');
|
this.handleSave(row, index)
|
this.saveSuccess = true
|
})
|
.catch(() => {
|
for (let key in row) {
|
row[key] = this.modifyRow[key]
|
}
|
row.cancel = !row.cancel
|
row.save = !row.save
|
this.saveSuccess = true
|
})
|
} else {
|
// 数据未修改
|
row.cancel = !row.cancel
|
row.save = !row.save
|
}
|
},
|
rules(key) {
|
return {
|
required: this.form[key].required,
|
message: '请输入' + this.form[key].filedDescription,
|
trigger: 'blur'
|
}
|
}
|
// 表格必填样式控制
|
// renderHeader (h,{column}) { // h即为cerateElement的简写
|
// return h(
|
// 'div',
|
// [
|
// [
|
// h('span', {
|
// style:'position:absolute;top:7px;left:12px;border:2px solid #FF4300;content:"";border-radius:50%;color:#FF4300;margin-right:5px;line-height:12px'
|
// }),
|
// h('span', column.label,
|
// {
|
// style: 'position:absolute;top:0px;left:0px;'
|
// })
|
// ],
|
// ],
|
// );
|
// },
|
}
|
}
|
</script>
|
|
<style lang="stylus" scoped>
|
#account {
|
>>> .el-form {
|
.cell {
|
div {
|
&:nth-child(1) {
|
line-height: 18px;
|
}
|
}
|
|
.el-form-item__content {
|
.el-input__inner {
|
// width: 185px;
|
// min-width 185px;
|
font-size: 14px;
|
color: #222;
|
}
|
.el-input--mini {
|
// left: 10px;
|
.el-input__inner {
|
// width: 170px;
|
// min-width: 170px;
|
font-size: 14px;
|
}
|
}
|
|
.el-input-group--append {
|
.el-input__inner {
|
width: 150px;
|
font-size: 14px;
|
}
|
}
|
}
|
|
.red-star {
|
display: inline-block;
|
width: 5px;
|
height: 5px;
|
border-radius: 50%;
|
vertical-align: middle;
|
// color: #F56C6C;
|
background-color: #f56c66;
|
margin-bottom: 3px;
|
}
|
}
|
}
|
}
|
</style>
|
