dy-admin-manager/src/views/adapayAccount/index.vue

<!--  -->
<template>
    <div class="m-container">
        <h2>
            <div class="squrt"></div>汇付账号管理
        </h2>
        <div class="topWrap">
            <div class="newBand" @click="onOperationAccount('create')" >创建账号</div>
        </div>
        <div class="m-core">
            <el-form :inline="true"
               class="searchForm"
               v-model.trim="searchForm">
                <el-form-item>
                <el-input v-model.trim="searchForm.memberId"
                            placeholder="请输入商户号"></el-input>
                </el-form-item>
                <el-form-item>
                <el-input v-model.trim="searchForm.name"
                            placeholder="请输入公司名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select v-model.trim="searchForm.status"
                                filterable
                                clearable
                                placeholder="请选择审核状态">
                        <el-option label="处理中" value="pending"></el-option>
                        <el-option label="成功" value="succeeded"></el-option>
                        <el-option label="失败" value="failed"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button @click="getList" type="danger">搜索</el-button>
                </el-form-item>
            </el-form>
            <div class="tableWrap">
                <el-table :data="tableList"
                            :header-cell-style="{background:'#EDEEF0',color:'#444'}">
                    <el-table-column label="商户号"
                                    align="center"
                                    prop="memberId"></el-table-column>
                    <el-table-column label="法人"
                                    align="center"
                                    prop="legalPerson"></el-table-column>
                    <el-table-column label="法人手机号"
                                    align="center"
                                    prop="legalMp"></el-table-column>
                    <el-table-column label="法人身份证号"
                                    align="center"
                                    prop="legalCertId"></el-table-column>
                    <el-table-column label="公司名称"
                                    align="center"
                                    prop="name"></el-table-column>
                    <el-table-column label="统一社会信用码"
                                    align="center"
                                    prop="socialCreditCode"></el-table-column>
                    <el-table-column label="银行卡号"
                                    align="center"
                                    prop="cardNo"></el-table-column>
                    <el-table-column label="审核状态"
                                    align="center"
                                    prop="status">
                        <template slot-scope="scope">
                            {{ scope.row.status | formatStatus }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作"
                                    width="250px"
                                    align="center"
                                    fixed="right">
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.status === 'failed'" @click="onOperationAccount('update', scope.row)" type="text">修改</el-button>
                            <el-button v-if="scope.row.status === 'succeeded'" @click="onUpdateAccount(scope.row)" type="text">修改结算账户</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination :total="rules.total"
                            :page.sync="rules.page"
                            :limit.sync="rules.limit"
                            :page-sizes="rules.page_size"
                            @pagination="getList" />
            </div>
        </div>

        <el-dialog title="绑定结算账户" :visible.sync="zeroVisible" width="400px" @close="onFormClose('maskForm')">
            <el-form :model='maskForm'
               :rules="maskRules"
               label-width="100px"
               label-position="right"
               ref="maskForm">
                <el-form-item label="银行卡号" prop="cardNo">
                    <el-input v-model="maskForm.cardNo" placeholder="请输入银行卡号"></el-input>
                </el-form-item>
                <el-form-item label="所属银行" prop="bankCode">
                    <el-select v-model="maskForm.bankCode" style="width: 100% !important" placeholder="请选择所属银行">
                        <el-option v-for="(item, index) in backList" :key="index" :label="item.title"
                                :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer"
                    class="dialog-footer">
                <el-button @click="zeroVisible = false">取 消</el-button>
                <el-button type="primary" @click="addZero('maskForm')">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import pagination from "@/components/Pagination/index";
import AccountForm from './form'
import { queryPageList, createSettleAccount } from './api.js'
import { cityJson } from './cityJson'
import { bankJson } from './bankJson'
import cleanDeep from 'clean-deep'
export default {
    components: {
        pagination,
        AccountForm
    },
    data () {
        return {
            zeroVisible: false,
            backList: bankJson,
            rules: {
                // 分页规则
                limit: 20, // 限制显示条数
                page: 1, // 当前页
                total: 0, // 总条数
                page_size: [10, 20, 50, 100] // 选择限制显示条数
            },
            tableList: [],
            searchForm: { },
            maskRules: {
                cardNo: [{required: true, message:'请输入银行卡号', trigger: 'blur'}],
                bankCode: [{required: true, message:'请选择所属银行', trigger: 'change'}]
            },
            maskForm: {
                memberId: null,
                cardNo: null,
                bankCode: null
            }
        };
    },
    mounted () {
        this.getList()
    },
    activated () {
        this.getList()
    },
    methods: {
        getList() {
            try {
                let obj = this.searchForm
                obj.page= this.rules.page
                obj.rows= this.rules.limit
                queryPageList(cleanDeep(obj)).then(res => {
                    if(res.code == 200) {
                        this.tableList = res.data.rows
                        this.rules.total = res.data.total
                    }
                })
            } catch {
                //
            }
        },
        onFormClose(formName) {
            this.$refs[formName].resetFields()
        },
        onOperationAccount(type, row) {
            this.$router.push({
                path: '/insideSetting/adapayOperation',
                query: {
                    type: type,
                    row: JSON.stringify(row)
                }
            })
        },
        onUpdateAccount(row) {
            this.zeroVisible = true
            this.maskForm = {
                memberId: row.memberId,
                cardNo: row.cardNo,
                bankCode: row.bankCode
            }
        },
        addZero(formName) {
             this.$refs[formName].validate(valid => {
                if (valid) {
                    createSettleAccount(cleanDeep(this.maskForm)).then(res => {
                        if(res.code == 200) {
                            this.$message.success('修改结算账户成功')
                            this.zeroVisible = false
                        } else {
                            this.$message.error(res.msg)
                        }
                    })
                } else {
                    return false;
                }
            });
        }
    },
    filters: {
        formatStatus(val) {
            const templateList = {
                pending:"处理中",
                succeeded:"成功",
                failed: "失败"
            }
            return templateList[val]
        }
    }
};
</script>
<style lang='scss' scoped>

</style>