Skip to content

薪
薪瑞通-前端
Commit 1dc98812 authored by 谢子梦's avatar 谢子梦
Browse files
Options

stage：发信账户-直属账户

parent 5a61fa06
Show whitespace changes
Inline Side-by-side
Showing with 159 additions and 1054 deletions
src/views/business/salaryAccount/index.vue
View file @ 1dc98812
......@@ -8,677 +8,19 @@
<ext-acc v-if="activeName == 'extAcc'" :activeName="activeName"></ext-acc>
</el-tab-pane>
</el-tabs>
<!-- 发薪账户管理页面 -->
<!-- <el-tabs v-model="payType" @tab-click="handleClick" type="card">
<el-tab-pane label="自有发薪账号" name="first">
<el-form label-width="120px" label-position="left" class="formMain">
<el-row :gutter="30">
<el-col :span="8">
<el-form-item label="支付宝外卡卡号">
<el-input v-model="params.payAccNo" placeholder="请输入支付宝外卡卡号"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-button type="primary" icon="el-icon-search" @click="getListAllAccInfoFN">查询</el-button>
</el-col>
<el-col :span="8">
<div class="buttonOperate">
<el-button type="primary" @click="goRegister">绑定发薪账户</el-button>
</div>
</el-col>
</el-row>
</el-form>
<el-card class="box-card" v-for="ele in ownList" :key="ele.id">
<el-row>
<el-col :span="16">
<div class="companyConterMain">
<div class="enterpriseImageMain">
<img class="enterpriseImage" src="@/assets/images/enterprise.png" alt="">
</div>
<div class="companyConterInformation">
<div style="width:90%;">
<el-row>
<el-col :span="16">
账户：({{ ele.payAccName }})
</el-col>
<el-col :span="6">
<el-button type="info" @click="viewDetail(ele)" plain>账户详情</el-button>
</el-col>
</el-row>
</div>
<el-row>
<el-col :span="16">
卡号：{{ ele.payAccNo }}
</el-col>
</el-row>
<el-row>
<el-col :span="16">
通道：{{ sysPayChannelMap.get(ele.channelCode) }}
</el-col>
</el-row>
</div>
</div>
</el-col>
<el-col :span="6" :offset="2">
<div class="operateConterMain">
<div style="width: 90%;">
<el-row>
<el-col :span="12"><el-button style="width:90%;" type="primary"
@click="ownBalanceRecharge(ele)">余额充值</el-button></el-col>
<el-col :span="12"><el-button style="width:90%;" type="primary"
@click="ownServiceChargeRecharge(ele)">服务费充值</el-button></el-col>
</el-row>
</div>
<div style="width: 90%;">
<el-row>
<el-col :span="12"><el-button style="width:90%;" type="primary" plain
@click="showBill(ele.payAccNo)">充值记录</el-button></el-col>
<el-col :span="12"><el-button style="width:90%;" type="primary" plain
@click="salarySelection(ele.payAccNo)">去发薪</el-button></el-col>
</el-row>
</div>
</div>
</el-col>
</el-row>
</el-card>
<el-empty v-if="ownList.length == 0" description="暂无账号"></el-empty>
</el-tab-pane> -->
<!-- <el-tab-pane label="第三方发薪账号" name="second"> <el-form label-width="120px" label-position="left" class="formMain">
<el-row :gutter="30">
<el-col :span="8">
<el-form-item label="支付宝外卡卡号">
<el-input placeholder="请输入支付宝外卡卡号"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-button type="primary" icon="el-icon-search">查询</el-button>
</el-col>
<el-col :span="8">
<div class="buttonOperate">
<el-button type="primary" @click="toSign">绑定发薪账户</el-button>
</div>
</el-col>
</el-row>
</el-form>
<el-card class="box-card" v-for="ele in thirdParty" :key="ele.id">
<el-row>
<el-col :span="16">
<div class="companyConterMain">
<div class="enterpriseImageMain">
<img class="enterpriseImage" src="@/assets/images/enterprise.png" alt="">
</div>
<div class="companyConterInformation">
<div style="width:90%;">
<el-row>
<el-col :span="16">
账户：{{ ele.payAccName }}
</el-col>
<el-col :span="6">
<el-button type="info" @click="viewDetail(ele)" plain>账户详情</el-button>
</el-col>
</el-row>
</div>
<div style="width:90%;">
<el-row>
<el-col :span="16">
卡号：{{ ele.payAccNo }}
</el-col>
</el-row>
</div>
<div style="width:90%;">
<el-row>
<el-col :span="16">
通道：{{ sysPayChannelMap.get(ele.channelCode) }}
</el-col>
</el-row>
</div>
</div>
</div>
</el-col>
<el-col :span="7" :offset="1">
<div class="operateConterMain">
<div style="width: 90%;">
<el-row>
<el-col :span="12"><el-button style="width:90%;" type="primary"
@click="balanceRecharge(ele)">余额充值</el-button></el-col>
<el-col :span="12"><el-button style="width:90%;" type="primary"
@click="serviceChargeRecharge(ele)">服务费充值</el-button></el-col>
</el-row>
</div>
<div style="width: 90%;">
<el-row>
<el-col :span="12"><el-button style="width:90%;;" type="primary" plain
@click="showBill(ele.payAccNo)">充值记录</el-button></el-col>
<el-col :span="12"><el-button @click="salarySelection(ele.payAccNo)" style="width:90%;;"
type="primary" plain>去发薪</el-button></el-col>
</el-row>
</div>
</div>
</el-col>
</el-row>
</el-card>
<el-card class="box-card" v-for="ele in signNoAccList" :key="ele.id">
<el-row>
<el-col :span="16">
<div class="companyConterMain">
<div class="enterpriseImageMain">
<img class="enterpriseImage" src="@/assets/images/enterprise.png" alt="">
</div>
<div class="companyConterInformation">
<div style="width:90%;">
<el-row>
<el-col :span="14">
账户：{{ ele.taxUnitName }}
</el-col>
</el-row>
</div>
<div style="width:90%;">
<el-row>
<el-col :span="16">
待签约
</el-col>
</el-row>
</div>
</div>
</div>
</el-col>
</el-row>
</el-card>
<el-empty v-if="thirdParty.length == 0 && (!signNoAccList || signNoAccList.length == 0)"
description="暂无账号"></el-empty>
</el-tab-pane> -->
<!-- </el-tabs> -->
<!-- 去发薪对话框 -->
<el-dialog title="发薪选择" :visible.sync="payVisible" width="38%" center>
<div class="salarySelectionStyle">
<div class="salarySelectionMain" @click="toLinkBankCard">
<div class="salarySelectionImageDiv">
<img class="salarySelectionImage" src="../../../assets/images/yhk.png" alt="">
</div>
<p class="salarySelectionText">批量到银行卡</p>
</div>
<div class="salarySelectionMain" @click="toLinkAlipay">
<div class="salarySelectionImageDiv">
<img class="salarySelectionImage" src="../../../assets/images/zfb.png" alt="">
</div>
<p class="salarySelectionText">批量到支付宝</p>
</div>
</div>
</el-dialog>
<!-- 充值弹窗 -->
<el-dialog title="支付宝充值" :visible.sync="aliQRCodeRechargeOpen" width="500px" style="text-align: center">
<!-- <h3>转账完成后，工作时间最晚2小时到账，最快1分钟充值到您的支付宝账户</h3>-->
<el-form :model="aliQRCodeRechargeForm" ref="signNewForm" size="small" label-width="120px"
:rules="aliQRCodeRechargeRules">
<el-form-item label="收款账户" prop="payeeAccNo">
<el-input v-model="aliQRCodeRechargeForm.payeeAccNo" placeholder="请输入收款账号" disabled />
</el-form-item>
<el-form-item label="付款账户" prop="payerAccNo"
v-if="aliQRCodeRechargeForm.bindType && 2 === aliQRCodeRechargeForm.bindType && aliQRCodeRechargeForm.rechargeType == 2">
<accSelect :bindType="1" v-model="aliQRCodeRechargeForm.payerAccNo"></accSelect>
</el-form-item>
<el-form-item label="余额/服务费" prop="rechargeType">
<template>
<el-select v-model="aliQRCodeRechargeForm.rechargeType" style="width: 100%" disabled>
<el-option label="余额" :value="2">余额</el-option>
<el-option label="服务费" :value="1">服务费</el-option>
</el-select>
</template>
</el-form-item>
<el-form-item label="充值金额" prop="amount">
<el-input-number v-model="aliQRCodeRechargeForm.amount" placeholder="请输入充值金额" :precision="2"
style="width: 100%" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="getAliPayUrl">确认支付</el-button>
<el-button @click="aliQRCodeRechargeOpen = false">取 消</el-button>
</div>
</el-dialog>
<!-- 账户详情弹窗 -->
<el-dialog title="账号信息查询" :visible.sync="accDetail.panel" width="30%" center>
<el-descriptions :title="accDetail.companyName" :column="1" :label-style="accDetail.label_style"
:contentStyle="accDetail.content_style">
<el-descriptions-item label="账号">{{ accDetail.info.cardNo }}</el-descriptions-item>
<el-descriptions-item label="户名">{{ accDetail.info.bankAccName }}</el-descriptions-item>
<el-descriptions-item label="银行">{{ accDetail.info.cardBank }}</el-descriptions-item>
<el-descriptions-item label="支行">{{ accDetail.info.cardBranch }}</el-descriptions-item>
<el-descriptions-item label="开户地">{{ accDetail.info.cardLocation }}</el-descriptions-item>
<el-descriptions-item label="联行号">{{ accDetail.info.cardDeposit }}</el-descriptions-item>
<!-- <el-descriptions-item label="备付金余额">{{ offlineRecharge.availableAmount }}</el-descriptions-item>-->
<el-descriptions-item label="可转账金额">{{ accDetail.info.availableTransferAmount }}</el-descriptions-item>
<el-descriptions-item label="可用服务费">{{ accDetail.info.availableFeeAmount }}</el-descriptions-item>
</el-descriptions>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="accDetail.panel = false">确 定</el-button>
</div>
</el-dialog>
<!-- 自有账户充值 -->
<el-dialog :title="ownRechargeTitle" :visible.sync="ownAliQRCodeRechargeOpen" width="42%" center>
<el-row :gutter="64">
<el-col :span="12">
<p style="text-align: center;">通过与账本同主体的企业支付宝进行充值，可在手机端和电脑端充值</p>
</el-col>
<el-col :span="12">
<p style="text-align: center;">通过银行系统进行打款充值</p>
</el-col>
</el-row>
<el-row :gutter="64">
<el-col :span="12">
<div class="ownRechargeMain">
<img class="ownRechargeImage" src="@/assets/images/zfb.png" alt="">
<el-button class="ownRechargeButton"
@click="ownAliQRCodeRechargeOpen = false; aliQRCodeRechargeOpen = true">支付宝充值</el-button>
</div>
</el-col>
<el-col :span="12">
<div class="ownRechargeMain">
<img class="ownRechargeImage" src="@/assets/images/xianxia.png" alt="">
<el-button class="ownRechargeButton" @click="offlineRecharge(true)">线下充值</el-button>
</div>
</el-col>
</el-row>
</el-dialog>
<!-- 第三方发薪账号充值 -->
<el-dialog title="第三方发薪账户充值" :visible.sync="rechargeCoursePanelDialog" width="42%" center>
<el-row :gutter="64">
<el-col :span="12">
<p style="text-align: center;">通过与账本同主体的企业支付宝进行充值，可在手机端和电脑端充值</p>
</el-col>
<el-col :span="12">
<p style="text-align: center;">通过银行系统进行打款充值</p>
</el-col>
</el-row>
<el-row :gutter="64">
<el-col :span="12">
<div class="ownRechargeMain">
<img class="ownRechargeImage" src="@/assets/images/zfb.png" alt="">
<el-button class="ownRechargeButton"
@click="rechargeCoursePanelDialog = false; aliQRCodeRechargeOpen = true">直属账户充值</el-button>
</div>
</el-col>
<el-col :span="12">
<div class="ownRechargeMain">
<img class="ownRechargeImage" src="@/assets/images/xianxia.png" alt="">
<el-button class="ownRechargeButton" @click="offlineRecharge(false)">线下账户充值</el-button>
</div>
</el-col>
</el-row>
</el-dialog>
<!-- 第三方线下充值-余额充值 -->
<el-dialog title="汇款充值余额" :visible.sync="rechargeCoursePanel" width="50%">
<h2 style="font-weight: bold;font-size: 22px;margin-top: -15px;color: #1a1a1a">什么是汇款充值</h2>
<el-row>
<el-col :span="24" v-if="offlineRechargeStatic">
商户可通过银行转账方式完成对应支付宝专属收款账户的充值。支付宝会为商户的每个支付宝账户提供独立的"专属收款账户"，商户从任一同名银行账户向其对应的"专属收款账户"转账，即可完成充值。
</el-col>
<el-col :span="24" v-else>
代发企业为商户开设支付宝安全发专属账本，商户可使用开设“安全发专属账本”时备案的银行账户（切记一定要使用备案的银行账户转账，否则系统将无法自动划转至专属账本）将需下发资金转入至代发企业招行专户，招行专户收到款后，将在30分钟内由系统自动将钱转入至“支付宝安全发专属账本”，具体转账路径如下图所示：
<div style="text-align: center;">
<img style="width:80%;margin-top: 10px;" src="@/assets/images/stepRecharge.png" alt="">
</div>
</el-col>
</el-row>
<el-row style="margin-top: 15px;">
<el-col :span="24">
<span style="font-weight: bold;font-size: 22px;color: #1a1a1a">
三步完成充值
</span>
<a style="color: #69b1ff" href="https://render.alipay.com/p/yuyan/180020040000423002/de59b"
target="_blank">（查看教程）</a>
</el-col>
</el-row>
<el-row style="margin-top: 15px;">
<el-col :span="24">
<el-timeline>
<el-timeline-item>
<span style="font-weight: bold;font-size: 18px">登录你的网上银行</span>
<span style="color: gray;font-size: 14px">(支持任意银行)</span>
<div v-if="offlineRechargeStatic" style="font-size: 14px;margin-top: 5px">
必须使用本公司同名的银行账户进行汇款转账，首次使用建议小金额转入测试
</div>
<div v-else style="font-size: 14px;margin-top: 5px">必须使用开设“支付宝安全发专属账本”时备案的银行账户进行汇款转账，首次使用建议小额转入测试。</div>
</el-timeline-item>
<el-timeline-item>
<span style="font-weight: bold;font-size: 18px">转账时填写以下专属账户</span>
<div v-if="offlineRechargeStatic" style="font-size: 14px;margin-top: 5px">请注意收款账户支行选择：
<span style="color: red">支付宝-备付金账户</span>
<span>、开户地选择：</span>
<span style="color: red">上海市-上海市</span>
<span>，否则支付宝无法收到资金</span>
</div>
<el-descriptions :title="offlineRechargeStatic ? '你的企业备付金余额账户' : ''" :column="1" :border="true"
style="margin-top: 15px" :label-style="accDetail.label_style" :contentStyle="accDetail.content_style">
<el-descriptions-item label="账号">{{ offlineRechargeData.cardNo }}</el-descriptions-item>
<el-descriptions-item label="户名">{{ offlineRechargeData.bankAccName
}}</el-descriptions-item>
<el-descriptions-item label="银行">{{ offlineRechargeData.cardBank
}}</el-descriptions-item>
<el-descriptions-item label="支行">{{ offlineRechargeData.cardBranch
}}</el-descriptions-item>
<el-descriptions-item label="开户地">{{ offlineRechargeData.cardLocation
}}</el-descriptions-item>
<el-descriptions-item label="联行号">{{ offlineRechargeData.cardDeposit
}}</el-descriptions-item>
</el-descriptions>
</el-timeline-item>
<el-timeline-item>
<span style="font-weight: bold;font-size: 18px">转账完成后，工作时间最晚2小时到账，最快1分钟充值到您的支付宝账户</span>
<div style="font-size: 14px;margin-top: 5px">非工作时间预计最晚下个工作日到账(具体以银行为准)</div>
</el-timeline-item>
</el-timeline>
<!-- <div style="margin-top: 15px;">
<span style="font-weight: bold;font-size: 18px">温馨提示：</span>
<span style="color: gray;font-size: 14px">充值金额
<span style="color: red;"><strong>分数位为1</strong></span>的（如：10.01，119.31，1235.81等）会
<span style="color: red;"><strong>充值到服务费</strong></span>；其它金额会充值到余额；</span>
</div> -->
</el-col>
</el-row>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="rechargeCoursePanel = false">确 定</el-button>
</div>
</el-dialog>
<!-- 第三方线下充值-服务费充值 -->
<el-dialog title="汇款充值服务费" :visible.sync="serviceCoursePanel" width="50%">
<h2 style="font-weight: bold;font-size: 22px;margin-top: -15px;color: #1a1a1a">什么是汇款充值</h2>
<el-row>
<el-col :span="24" v-if="offlineRechargeStatic">
商户可通过银行转账方式完成对应支付宝专属收款账户的充值。支付宝会为商户的每个支付宝账户提供独立的"专属收款账户"，商户从任一同名银行账户向其对应的"专属收款账户"转账，即可完成充值。
</el-col>
<el-col :span="24" v-else>
商户在下发资金时需消耗服务费，商户可使用开设“安全发专属账本”时备案的银行账户（切记一定要使用备案的银行账户转账，否则系统将无法自动划转至专属账本）将服务费转入至服务费专户，服务费专户收到款后，将在30分钟内由系统自动将钱计入至商户服务费，具体转账路径如下图所示：
<div style="text-align: center;">
<img style="width:80%;margin-top: 10px;" src="@/assets/images/stepRechargeServer.png" alt="">
</div>
</el-col>
</el-row>
<el-row style="margin-top: 15px;">
<el-col :span="24">
<span style="font-weight: bold;font-size: 22px;color: #1a1a1a">
三步完成充值
</span>
<a style="color: #69b1ff" href="https://render.alipay.com/p/yuyan/180020040000423002/de59b"
target="_blank">（查看教程）</a>
</el-col>
</el-row>
<el-row style="margin-top: 15px;">
<el-col :span="24">
<el-timeline>
<el-timeline-item>
<span style="font-weight: bold;font-size: 18px">登录你的网上银行</span>
<span style="color: gray;font-size: 14px">(支持任意银行)</span>
<div v-if="offlineRechargeStatic" style="font-size: 14px;margin-top: 5px">
必须使用本公司同名的银行账户进行汇款转账，首次使用建议小金额转入测试
</div>
<div v-else style="font-size: 14px;margin-top: 5px">必须使用开设“支付宝安全发专属账本”时备案的银行账户进行汇款转账，首次使用建议小额转入测试。</div>
</el-timeline-item>
<el-timeline-item>
<span style="font-weight: bold;font-size: 18px">转账时填写以下专属账户</span>
<div v-if="offlineRechargeStatic" style="font-size: 14px;margin-top: 5px">请注意收款账户支行选择：
<span style="color: red">支付宝-备付金账户</span>
<span>、开户地选择：</span>
<span style="color: red">上海市-上海市</span>
<span>，否则支付宝无法收到资金</span>
</div>
<el-descriptions :title="offlineRechargeStatic ? '你的企业备付金余额账户' : ''" :column="1" :border="true"
style="margin-top: 15px" :label-style="accDetail.label_style" :contentStyle="accDetail.content_style">
<el-descriptions-item label="账号">{{ offlineRechargeData.cardNo }}</el-descriptions-item>
<el-descriptions-item label="户名">{{ offlineRechargeData.bankAccName
}}</el-descriptions-item>
<el-descriptions-item label="银行">{{ offlineRechargeData.cardBank
}}</el-descriptions-item>
<el-descriptions-item label="支行">{{ offlineRechargeData.cardBranch
}}</el-descriptions-item>
<el-descriptions-item label="开户地">{{ offlineRechargeData.cardLocation
}}</el-descriptions-item>
<el-descriptions-item label="联行号">{{ offlineRechargeData.cardDeposit
}}</el-descriptions-item>
</el-descriptions>
</el-timeline-item>
<el-timeline-item>
<span style="font-weight: bold;font-size: 18px">转账完成后，工作时间最晚2小时到账，最快1分钟充值到您的支付宝账户</span>
<div style="font-size: 14px;margin-top: 5px">非工作时间预计最晚下个工作日到账(具体以银行为准)</div>
</el-timeline-item>
</el-timeline>
<!-- <div style="margin-top: 15px;">
<span style="font-weight: bold;font-size: 18px">温馨提示：</span>
<span style="color: gray;font-size: 14px">充值金额
<span style="color: red;"><strong>分数位为1</strong></span>的（如：10.01，119.31，1235.81等）会
<span style="color: red;"><strong>充值到服务费</strong></span>；其它金额会充值到余额；</span>
</div> -->
</el-col>
</el-row>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="serviceCoursePanel = false">确 定</el-button>
</div>
</el-dialog>
<el-dialog title="确认支付" :visible.sync="qrPayPanel.open" width="20%">
<div>
<span style="font-size: 18px;">1、使用手机支付宝扫码支付;</span>
<qr-code-component :text="qrPayPanel.payUrl" />
</div>
<!-- <div style="margin-top: 12px;">
<span style="font-size: 18px;">2、通过支付宝官网支付，<a :href="qrPayPanel.payUrl" target="_blank"
style="font-size: 20px;color: #409EFF;"><strong>去支付</strong></a>;</span>
</div> -->
<div slot="footer" class="dialog-footer">
<el-button @click="qrPayPanel.open = false">取 消</el-button>
</div>
</el-dialog>
<el-dialog title="充值记录" :visible.sync="billPanel" width="80%">
<el-form :model="billQuery" size="small" :inline="true" label-width="100px">
<el-form-item label="账单类型" prop="tranType">
<el-select v-model="billQuery.capitalPurpose" clearable placeholder="请选择">
<el-option label="全部" :value="''" />
<el-option label="服务费" :value="1" />
<el-option label="余额" :value="2" />
</el-select>
</el-form-item>
<el-form-item label="时间">
<el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="getBillList">搜索</el-button>
</el-form-item>
</el-form>
<el-tabs value="first" @tab-click="billTypeTabClick">
<el-tab-pane label="账单列表" name="first"></el-tab-pane>
</el-tabs>
<el-table v-loading="loading" :data="billDataList">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="账单类型" align="center" prop="capitalPurpose">
<template slot-scope="scope">
<span v-if="scope.row.capitalPurpose == 1">服务费</span>
<span v-if="scope.row.capitalPurpose == 2">余额</span>
</template>
</el-table-column>
<el-table-column label="收支类型" align="center" prop="tranType">
<template>
<el-button type="success" size="mini">收入</el-button>
</template>
</el-table-column>
<el-table-column label="金额" align="center" prop="tranAmount">
<template slot-scope="scope">
<span style="color: rgb(255, 208, 75)">
+ {{ scope.row.tranAmount }}
</span>
</template>
</el-table-column>
<el-table-column label="时间" align="center" prop="createTime" width="180" />
</el-table>
<el-pagination small layout="prev, pager, next" :total="billTotal" :page.sync="billQuery.pageNum"
@size-change="handleSizeChange" @current-change="handleCurrentChange" :limit.sync="billQuery.pageSize"
@pagination="getBillList()">
</el-pagination>
<div slot="footer" class="dialog-footer">
<el-button @click="billPanel = false">关 闭</el-button>
</div>
</el-dialog>
<!-- 绑定账户 -- 外部-->
<el-dialog title="绑定账户" :visible.sync="bindAcc.panel" width="80%">
<tax-sign-component @submitSignContract="submitSignContract"></tax-sign-component>
<div slot="footer" class="dialog-footer">
<el-button @click="bindAcc.panel = false">关 闭</el-button>
</div>
</el-dialog>
<!-- 绑定账户 - 自有账户-->
<el-dialog title="绑定账户" :visible.sync="openSign.panel" width="300">
<el-form label-width="80px">
<el-form-item label="账户主体">
<el-select v-model="openSign.companyId" placeholder="请选择账户对应的企业主体" @change="selectSignCompany">
<el-option v-for="item in openSign.companyList" :key="item.id" :label="item.companyName" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="支付通道">
<el-select v-model="openSign.channelCode" placeholder="请选择要开通的支付通道">
<el-option v-for="item in companyPayChannelList" :key="item.channelCode" :label="item.channelName"
:value="item.channelCode" :disabled="!item.isEnter || item.isEnter > 2" />
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitBind">确定</el-button>
<el-button @click="openSign.panel = false">关 闭</el-button>
</div>
</el-dialog>
<el-dialog title="扫码签约" :visible.sync="openSign.codePanel" width="300px" style="text-align: center">
<h3>1、请打开对应企业的支付宝</h3>
<h3>2、扫描下方二维码</h3>
<qr-code-component :text="openSign.codeUrl" />
<h3>操作完成后大约5-10分钟</h3>
<h3>可刷新页面查看结果</h3>
<div slot="footer" class="dialog-footer">
<el-button @click="openSign.codePanel = false">关 闭</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import AccSelect from '@/views/business/accInfo/accSelect.vue'
import { listAllAccInfo, getAccAliInfo } from '@/api/business/accInfo'
import { addAccRecharge, listBill } from '@/api/business/accRecharge.js'
import { addDateRange } from '@/utils/ruoyi'
import { formatDate } from '@/utils'
import QrCodeComponent from '@/components/QrCode.vue'
import TaxSignComponent from '@/views/business/salaryAccount/taxSignComponent.vue'
import { bindUnitAcc, listAllHasNoOpenInfo } from '@/api/business/unitInfo'
import { allHasNoOpenInfoCompany, bindCompanyAcc, listAllCompanyInfo } from '@/api/business/companyInfo'
import { queryHasNoAccSign } from '@/api/business/laborSign'
import { listAllCompanyPayChannel, signChannel } from '@/api/business/companyPayChannel'
import { listAllPayChannel } from '@/api/business/payChannel'
import OwnAcc from '@/views/business/salaryAccount/ownAcc.vue'
import ExtAcc from '@/views/business/salaryAccount/extAcc.vue'
export default {
name: 'SalaryAccount',
components: { ExtAcc, OwnAcc, TaxSignComponent, QrCodeComponent, AccSelect },
components: { ExtAcc, OwnAcc },
data() {
return {
activeName: 'ownAcc',
signNoAccList: [],
openSign: {
panel: false,
companyId: null,
companyList: [],
codePanel: false,
codeUrl: '',
channelCode: ''
},
bindAcc: {
panel: false,
},
billPanel: false,
qrPayPanel: {
open: false,
payUrl: ''
},
// 账户详情
accDetail: {
content_style: {
'font-size': '16px',
},
label_style: {
'font-size': '16px',
},
panel: false,
info: {}
},
// tab选择参数
payType: 'first',
// 发薪选择对话框参数
payVisible: false,
params: {
bindType: 1,
payAccNo: null,
},
// 自有发薪数据
ownList: [],
// 第三方发薪数据
thirdParty: [],
// 去发薪-当前选中的卡号
cardNo: null,
// 充值参数-第三方
aliQRCodeRechargeOpen: false,
aliQRCodeRechargeForm: {
payeeAccNo: '',
rechargeType: 1,
amount: '',
payerAccNo: ''
},
aliQRCodeRechargeRules: {
payerAccNo: [
{ required: true, message: '请选择付款账号', trigger: 'change' }
],
amount: [
{
validator: (rule, value, callback) => {
if (value <= 0) {
callback(new Error('充值金额必须大于零'));
} else {
callback()
}
},
trigger: 'blur'
}
]
},
// 充值参数-自有
ownAliQRCodeRechargeOpen: false,
ownRechargeTitle: null,
ownAliQRCodeRechargeForm: {},
// 线下充值-余额
rechargeCoursePanel: false,
//线下充值-服务费
serviceCoursePanel: false,
offlineRechargeData: {},
offlineRechargeStatic: false,
// 充值记录相关参数
billQuery: {
pageNum: 1,
pageSize: 10,
capitalPurpose: 1, //账单类型:1-服务费;2-余额
tranType: '', //收支类型:1-收入;2-支出
startTime: '',
endTime: '',
},
dateRange: [formatDate(new Date()), formatDate(new Date())],
billDataList: [],
billTotal: 0,
userInfoName: null,
accountCollection: [],
loading: false,
// 第三方发薪账号余额、服务费充值选择弹窗
rechargeCoursePanelDialog: false,
companyPayChannelList: [],
sysPayChannelMap: null,
}
},
created() {
......@@ -687,401 +29,12 @@ export default {
if (this.$route.query.activeName) {
this.activeName = this.$route.query.activeName
}
// this.sysPayChannelAll()
// if (this.payType == 'first') {
// this.params.bindType = 1
// this.getListAllAccInfoFN()
// } else if (this.payType == 'second') {
// this.params.bindType = 2
// this.getListAllAccInfoFN()
// }
},
methods: {
sysPayChannelAll() {
listAllPayChannel().then(resp => {
this.sysPayChannelMap = new Map(resp.data.map(value => [value.channelCode, value.channelName]));
})
},
/** 第三方绑定发薪账号-签约成功执行 */
submitSignContract() {
this.bindAcc.panel = false;
this.queryHasNoAccOut()
},
toSign() {
this.bindAcc.panel = true;
},
billTypeTabClick(tab) {
// this.billQuery.capitalPurpose = tab.name === "second" ? 2 : 1 //1：服务费 2：余额
// this.getBillList();
},
showBill(cardNo) {
this.billQuery.cardNo = cardNo;
this.billPanel = true;
this.getBillList();
},
handleSizeChange(val) {
this.billQuery.pageSize = Number(val)
this.getBillList()
},
handleCurrentChange(val) {
this.billQuery.pageNum = Number(val)
this.getBillList()
},
getBillList() {
if (this.dateRange && this.dateRange.length > 0) {
let searchVal = addDateRange(this.billQuery, this.dateRange)
this.billQuery.startTime = searchVal.params.beginTime.split(" ")[0] + " 00:00:00"
this.billQuery.endTime = searchVal.params.endTime.split(" ")[0] + " 23:59:59"
} else {
this.billQuery.startTime = ''
this.billQuery.endTime = ''
}
this.loading = true
listBill(this.billQuery).then(res => {
if (res.code == 200) {
this.billDataList = res.rows
this.billTotal = res.total
}
}).finally(() => {
this.loading = false
})
},
// 选择线下充值方法
offlineRecharge(isBol) {
this.offlineRechargeStatic = isBol
if (isBol) {
this.ownAliQRCodeRechargeOpen = false
this.$modal.loading('...加载中')
getAccAliInfo(this.aliQRCodeRechargeForm.payeeAccNo).then(resp => {
if (200 === resp.code) {
this.offlineRechargeData = resp.data
this.rechargeCoursePanel = true
// this.accDetail.companyName = card.companyName
// this.accDetail.info = resp.data
// this.accDetail.panel = true
}
}).finally(() => {
this.$modal.closeLoading()
})
} else {
this.rechargeCoursePanel = false
if (this.aliQRCodeRechargeForm.rechargeType == 2) {
this.offlineRechargeData = {
cardNo: '515901720410008',
bankAccName: '盐城美好生活专业清洁服务有限公司',
cardBank: '招商银行',
cardBranch: '盐城市青年路支行',
cardLocation: '江苏-盐城市',
cardDeposit: '308311000033'
}
this.rechargeCoursePanel = true
} else if (this.aliQRCodeRechargeForm.rechargeType == 1) {
this.offlineRechargeData = {
cardNo: '571922384010001',
bankAccName: '良贸通(杭州)科技有限公司',
cardBank: '招商银行',
cardBranch: '招商银行股份有限公司杭州解放支行',
cardLocation: '江苏-杭州市',
cardDeposit: '308331012095'
}
this.serviceCoursePanel = true
}
}
},
// 点击服务分充值方法-自有
ownServiceChargeRecharge(val) {
this.aliQRCodeRechargeForm.rechargeType = 1
this.aliQRCodeRechargeForm.payeeAccNo = val.payAccNo
this.aliQRCodeRechargeForm.bindType = val.bindType
this.ownRechargeTitle = '自有服务费充值'
this.ownAliQRCodeRechargeOpen = true
},
// 点击余额充值方法-自有
ownBalanceRecharge(val) {
this.aliQRCodeRechargeForm.rechargeType = 2
this.aliQRCodeRechargeForm.payeeAccNo = val.payAccNo
this.aliQRCodeRechargeForm.bindType = val.bindType
this.ownRechargeTitle = '自有余额充值'
this.ownAliQRCodeRechargeOpen = true
},
// 点击余额充值方法-第三方
balanceRecharge(val) {
this.aliQRCodeRechargeForm.rechargeType = 2
this.aliQRCodeRechargeForm.payeeAccNo = val.payAccNo
this.aliQRCodeRechargeForm.bindType = val.bindType
this.rechargeCoursePanelDialog = true
// this.aliQRCodeRechargeOpen = true
},
// 点击服务费充值方法-第三方
serviceChargeRecharge(val) {
this.aliQRCodeRechargeForm.rechargeType = 1
this.aliQRCodeRechargeForm.payeeAccNo = val.payAccNo
this.aliQRCodeRechargeForm.bindType = val.bindType
this.rechargeCoursePanelDialog = true
// this.aliQRCodeRechargeOpen = true
},
// 确认支付按钮
getAliPayUrl() {
this.$refs.signNewForm.validate((valid) => {
if (valid) {
this.$modal.loading('充值中....')
addAccRecharge(this.aliQRCodeRechargeForm).then(res => {
this.aliQRCodeRechargeOpen = false
if (200 === res.code) {
// 如果是服务费充值 或者是内部账户余额充值
if (1 === this.aliQRCodeRechargeForm.rechargeType || 1 === this.aliQRCodeRechargeForm.bindType) {
if (res.data.status) {
this.qrPayPanel.payUrl = res.data.msg
this.qrPayPanel.open = true
this.$forceUpdate()
} else {
this.$modal.msgWarning(res.data.msg)
}
} else {
this.$modal.msgSuccess("充值成功！");
}
}
}).finally(() => {
this.$modal.closeLoading()
})
}
})
},
// 跳转到批量到支付宝
toLinkAlipay() {
this.$router.push({ path: "/transfer/batchToAli", query: { number: this.cardNo } });
this.payVisible = false
},
// 跳转到批量到银行卡
toLinkBankCard() {
this.$router.push({ path: "/transfer/batchToBank", query: { number: this.cardNo } });
this.payVisible = false
},
// 获取公司列表方法
getListAllAccInfoFN() {
this.$modal.loading('加载中...')
listAllAccInfo(this.params).then(res => {
if (res.code == 200) {
if (this.params.bindType == 1) {
this.ownList = res.data
} else if (this.params.bindType == 2) {
this.thirdParty = res.data
}
}
}).finally(() => {
this.$modal.closeLoading()
})
},
// 点击去发薪按钮执行
salarySelection(number) {
this.cardNo = number
this.payVisible = true
},
// tab发生变化时执行
handleClick(tab, event) {
console.log('activeName', this.activeName);
this.$forceUpdate()
// if (this.payType == 'first') {
// this.params.bindType = 1
// this.getListAllAccInfoFN()
// } else if (this.payType == 'second') {
// this.params.bindType = 2
// this.getListAllAccInfoFN()
// this.queryHasNoAccOut();
// }
// console.log(tab, event);
// console.log('payType', this.payType);
},
queryHasNoAccOut() {
this.$modal.loading('加载中...')
queryHasNoAccSign().then(resp => {
if (200 === resp.code) {
this.signNoAccList = resp.data
}
}).finally(() => {
this.$modal.closeLoading()
})
},
viewDetail(card) {
this.$modal.loading("...")
getAccAliInfo(card.payAccNo).then(resp => {
if (200 === resp.code) {
this.accDetail.companyName = card.companyName
this.accDetail.info = resp.data
this.accDetail.panel = true
}
}).finally(() => {
this.$modal.closeLoading()
})
},
goRegister() {
this.openSign.companyId = null;
this.openSign.channelCode = null;
this.companyPayChannelList = [];
listAllCompanyInfo({ bindType: 1 }).then(resp => {
if (200 === resp.code) {
this.openSign.companyList = resp.data
}
}).finally(() => {
this.openSign.panel = true
})
},
submitBind() {
const singForm = {
companyId: this.openSign.companyId,
unitType: 1,
channelCode: this.openSign.channelCode
}
this.$modal.loading()
signChannel(singForm).then(resp => {
this.openSign.codePanel = true;
this.openSign.codeUrl = resp.data
}).finally(() => {
this.$modal.closeLoading()
this.openSign.panel = false;
})
},
selectSignCompany(value) {
this.openSign.channelCode = null;
const channelQuery = {
unitType: 1,
companyId: value,
status: 1
}
listAllCompanyPayChannel(channelQuery).then(resp => {
this.companyPayChannelList = resp.data
})
}
}
}
</script>
<style lang="scss" scoped>
.app-container ::v-deep {
// 表单部分样式
.formMain {
padding-left: 12px;
// 操作按钮样式
.buttonOperate {
text-align: right;
padding-right: 20px;
}
}
// 卡片样式
.box-card {
margin-top: 12px;
// 公司信息部分样式
.companyConterMain {
width: 100%;
height: 140px;
display: flex;
align-items: center;
justify-content: space-between;
// 公司图标样式
.enterpriseImageMain {
width: 200px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
.enterpriseImage {
width: 120px;
height: 68px;
}
}
// 公司信息内容部分样式
.companyConterInformation {
width: calc(100% - 180px);
height: 90%;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: center;
justify-content: space-evenly;
}
}
// 操作按钮部分样式
.operateConterMain {
width: 90%;
height: 120px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: center;
justify-content: space-evenly;
}
}
// 去发薪-发薪选择对话框样式
.salarySelectionStyle {
width: 90%;
margin: 0 auto;
height: 200px;
display: flex;
justify-content: space-evenly;
align-items: center;
.salarySelectionMain {
width: 40%;
height: 90%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
background-color: rgba(117, 190, 245, .1);
border-radius: 12px;
padding: 12px;
.salarySelectionImageDiv {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
.salarySelectionImage {
width: 120px;
height: 120px;
z-index: 9999;
}
}
.salarySelectionText {
text-align: center;
width: 100%;
font-size: 18px;
font-weight: bold;
}
}
}
// 自有充值选中对话框样式-选择充值方式
.ownRechargeMain {
height: 160px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-around;
align-content: center;
.ownRechargeImage {
width: 100px;
height: 100px;
}
// .ownRechargeButton {
// width: 32%;
// border-radius: 16px;
// }
}
}
</style>
src/views/business/salaryAccount/ownAcc.vue
View file @ 1dc98812
......@@ -197,6 +197,42 @@
</div>
</div>
</el-dialog>
<!-- 扫码签约新弹窗 -->
<el-dialog title="扫码签约" class="payThoroughfareDialogStyle" :visible.sync="openPayThoroughfareDialog" width="55%">
<div class="thoroughfareMain">
<div class="thoroughfareIntroduce">支付宝安全发是由支付宝提供的人力资源发薪通道，需要使用企业支付宝扫码授权，方可使用，具体授权步骤如下图所示:</div>
<!-- 开通主体信息部分 -->
<div class="thoroughfareConter">
<div class="thoroughfareInfo">
<div class="stapStyle">【步骤一】</div>
<div class="stapInfoStyle">
<span>使用</span>
<span class="stapInfoBlueStyle">{{ thoroughfareData }}</span>
<span>的企业支付宝扫描右侧二维码</span>
</div>
<div class="stapStyle">【步骤二】</div>
<div class="stapInfoStyle">
<span>在手机上确认</span>
<span class="stapInfoBlueStyle">同意协议并开通</span>
<span>此支付宝记账本</span>
</div>
<div class="stapStyle">【步骤三】</div>
<div class="stapInfoStyle">
<span>操作完成后大约5-10分钟可点击搜索查看结果</span>
</div>
</div>
<div class="thoroughfareDivider"></div>
<div class="thoroughfareQRcode">
<!-- <img class="QRcodeImg" :src="thoroughfareUrl" alt=""> -->
<qr-code-component class="QRcodeImg" :text="thoroughfareUrl" />
<span class="QRcodeText">扫码签约</span>
</div>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button class="cancelButton" type="primary" @click="openPayThoroughfareDialog = false">取 消</el-button>
</span>
</el-dialog>
<!-- 余额充值组件 -->
<ownAccBalance ref="ownAccBalance"></ownAccBalance>
<!-- 服务费充值组件 -->
......@@ -280,7 +316,11 @@ export default {
},
// 去发薪部分参数
payVisible: false,
cardNo: ''
cardNo: '',
// 开通通道参数
openPayThoroughfareDialog: false,
thoroughfareUrl: '',
thoroughfareData: ''
};
},
created() {
......@@ -357,8 +397,13 @@ export default {
}
this.$modal.loading()
signChannel(singForm).then(resp => {
this.openSign.codePanel = true;
this.openSign.codeUrl = resp.data
// this.openSign.codePanel = true;
this.thoroughfareUrl = resp.data
console.log('返回的路径', resp.data);
this.openPayThoroughfareDialog = true
// this.openSign.codeUrl = resp.data
}).finally(() => {
this.$modal.closeLoading()
this.openSign.panel = false;
......@@ -380,6 +425,11 @@ export default {
/** 绑定账户-选择账户主体执行 */
selectSignCompany(value) {
this.openSign.channelCode = null;
this.openSign.companyList.forEach(ele => {
if (ele.id === value) {
this.thoroughfareData = ele.companyName
}
})
const channelQuery = {
unitType: 1,
companyId: value,
......@@ -482,3 +532,105 @@ export default {
}
}
</style>
<style lang="scss">
.payThoroughfareDialogStyle {
.el-dialog {
margin-top: 18vh !important;
border-radius: 6px !important;
}
.el-dialog__header {
display: none;
}
.el-dialog__body {
padding: 56px 38px 8px !important;
}
.thoroughfareMain {
background-color: #F7F8FA;
border-radius: 6px;
padding: 20px 32px 28px 30px;
.thoroughfareIntroduce {
font-weight: 400;
font-size: 16px;
color: #333333;
line-height: 24px;
letter-spacing: 1.5px;
padding-left: 8px;
}
.thoroughfareConter {
width: 100%;
margin-top: 20px;
padding-left: 12px;
// height: 400px;
// background-color: #8df;
display: flex;
align-items: center;
justify-content: space-between;
.thoroughfareInfo {
width: 60%;
font-size: 14px;
.stapStyle {
font-size: 16px;
color: #409EFF;
margin-bottom: 12px;
}
.stapInfoStyle {
font-size: 14px;
color: #333333;
margin-bottom: 32px;
margin-left: 6px;
.stapInfoBlueStyle {
color: #409EFF;
}
}
.stapInfoStyle:last-child {
margin-bottom: 0px !important;
}
}
.thoroughfareDivider {
width: 1px;
background-color: #E8E8E8;
height: 200px;
}
.thoroughfareQRcode {
width: 26%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.QRcodeImg {
width: 100%;
}
.QRcodeText {
color: #333;
font-size: 14px;
}
}
}
}
.dialog-footer {
// margin-top: -20px !important;
.el-button {
padding: 9px 26px;
font-size: 14px;
}
}
}
</style>
\ No newline at end of file
src/views/business/taxUnit/channel.vue
View file @ 1dc98812
......@@ -93,7 +93,7 @@
</div>
<div class="thoroughfareDivider"></div>
<div class="thoroughfareQRcode">
<img class="QRcodeImg" :src="thoroughfareUrl" alt="">
<qr-code-component class="QRcodeImg" :text="thoroughfareUrl" />
<span class="QRcodeText">扫码签约</span>
</div>
</div>
......@@ -161,7 +161,7 @@ export default {
// 开通通道参数
openPayThoroughfareDialog: false,
thoroughfareUrl: '',
thoroughfareData: {}
thoroughfareData: ''
};
},
created() {
......
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