|
|
@@ -0,0 +1,269 @@
|
|
|
+<!-- 账户管理-入金代扣签约-代扣签约申请 -->
|
|
|
+<template>
|
|
|
+ <app-drawer :title="bankInfo?.signstatus != undefined ? '修改签约账户' : '添加签约账户'" :width="800" v-model:show="show"
|
|
|
+ :loading="loading" :refresh="refresh">
|
|
|
+ <el-form ref="formRef" class="el-form--horizontal" label-width="120px" :model="formData" :rules="formRules">
|
|
|
+ <el-form-item label="开户银行" prop="OpenBankAccId">
|
|
|
+ <el-select effect="dark" v-model="formData.OpenBankAccId" :readonly="bankaccount != ''">
|
|
|
+ <el-option :label="item.bankname" :value="item.bankid" v-for="(item, index) in banklist" :key="index" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="银行卡号" prop="BankAccountNo">
|
|
|
+ <el-input type="number" name="BankAccountNo" :readonly="bankaccount != ''" placeholder="银行卡号" :maxlength="30"
|
|
|
+ v-model="formData.BankAccountNo" :rules="formRules.BankAccountNo" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="名称" prop="AccountName">
|
|
|
+ <el-input name="AccountName" readonly placeholder="银行卡账户名" v-model="formData.AccountName"
|
|
|
+ :rules="formRules.AccountName" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="手机号码" prop="MobilePhone">
|
|
|
+ <el-input name="MobilePhone" :readonly="mobile2 != ''" maxlength="50"
|
|
|
+ placeholder="请输入手机号码" v-model="formData.MobilePhone" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <el-form ref="extendRef" class="el-form--horizontal" label-width="120px" :model="extendModel" :rules="formRules">
|
|
|
+ <template v-for="(item, index) in configs" :key="index">
|
|
|
+ <template v-if="(item.fieldcode === 'verify_code')">
|
|
|
+ <el-form-item :label="item.fieldname" :prop="item.fieldcode"
|
|
|
+ v-if="bankInfo === undefined && showExtendInfo(item)">
|
|
|
+ <el-input placeholder="请输入" type="number" v-model="item.value" :rules="formRules.vcode">
|
|
|
+ <template #append>
|
|
|
+ <el-button size="small" type="primary" :disabled="isCountdown" @click="sendVerifyCode">
|
|
|
+ <span v-if="isCountdown">重新发送({{ seconds }})</span>
|
|
|
+ <span v-else>获取验证码</span>
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="(item.fieldcode === 'bank_branch_name')">
|
|
|
+ <el-form-item :label="item.fieldname" :prop="item.fieldcode" v-if="showExtendInfo(item)">
|
|
|
+ <el-select effect="dark" placeholder="请输入" v-model="item.value" value-key="branchnum" :loading="searchLoading"
|
|
|
+ :remote-method="remoteMethod" filterable remote clearable allow-create @change="onBankChange"
|
|
|
+ @clear="dataList = []">
|
|
|
+ <template v-for="(item, index) in dataList" :key="index">
|
|
|
+ <el-option :label="item.branchname" :value="item" />
|
|
|
+ </template>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="(item.fieldcode === '100')">
|
|
|
+ <el-form-item :label="item.fieldname" :prop="item.fieldcode" v-if="showExtendInfo(item)">
|
|
|
+ <el-input maxlength="50" placeholder="请输入" v-model="item.value" />
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <el-form-item :label="item.fieldname" :prop="item.fieldcode" v-if="showExtendInfo(item)">
|
|
|
+ <el-input :readonly="item.fieldcode === 'legal_name' && legalpersonname != ''"
|
|
|
+ type="number" maxlength="50" placeholder="请输入" v-model="item.value" />
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <el-button type="info" @click="onCancel(false)">取消</el-button>
|
|
|
+ <el-button type="primary" @click="formSubmit">{{ bankInfo?.signstatus != undefined ? '修改' : '提交' }}</el-button>
|
|
|
+ </template>
|
|
|
+ </app-drawer>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import { ref, computed } from 'vue'
|
|
|
+import { ElMessage, FormInstance, FormRules } from 'element-plus'
|
|
|
+import { validateRules } from '@/constants/regex'
|
|
|
+import { useRequest } from '@/hooks/request'
|
|
|
+import { queryBankBranChnumInfo } from '@/services/api/bank'
|
|
|
+import { useDoBankSign, useDoCusBankExtendConfigs, useT2bSMSVerificationCode } from '@/business/bank'
|
|
|
+import { useUserStore } from '@/stores'
|
|
|
+import service from '@/services'
|
|
|
+import AppDrawer from '@pc/components/base/drawer/index.vue'
|
|
|
+import { shallowRef } from 'vue'
|
|
|
+
|
|
|
+const { formData, onSubmit, banklist, bankInfo, loading } = useDoBankSign()
|
|
|
+const { configs } = useDoCusBankExtendConfigs(1)
|
|
|
+const { smsVerificationCode } = useT2bSMSVerificationCode()
|
|
|
+
|
|
|
+const userStore = useUserStore()
|
|
|
+const show = ref(true)
|
|
|
+const refresh = ref(false)
|
|
|
+const formRef = ref<FormInstance>()
|
|
|
+const extendRef = ref<FormInstance>()
|
|
|
+const seconds = ref(60) //倒计时剩余时间
|
|
|
+const isCountdown = ref(false) // 是否正在倒计时
|
|
|
+/// 短信验证码交易中心信息
|
|
|
+const CenterErrMsg = shallowRef('')
|
|
|
+const { legalpersonname, mobile2, bankaccount, userinfotype } = userStore.userInfo
|
|
|
+
|
|
|
+// 表单数据对象
|
|
|
+const extendModel = computed(() => {
|
|
|
+ const obj = Object.create(null)
|
|
|
+ configs.value.forEach((e) => {
|
|
|
+ if (e.fieldcode) {
|
|
|
+ obj[e.fieldcode] = e.value
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return obj
|
|
|
+})
|
|
|
+
|
|
|
+const formRules = computed(() => {
|
|
|
+ const rules: FormRules = {
|
|
|
+ OpenBankAccId: [{
|
|
|
+ message: '请选择银行信息',
|
|
|
+ validator: () => {
|
|
|
+ return !!formData.OpenBankAccId
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ BankAccountNo: [{
|
|
|
+ required: true,
|
|
|
+ message: '请输入银行卡账号'
|
|
|
+ }],
|
|
|
+ MobilePhone: [{
|
|
|
+ required: true,
|
|
|
+ message: '请输入手机号码',
|
|
|
+ validator: (rule, value, callback) => {
|
|
|
+ if (validateRules.phone.validate(value)) {
|
|
|
+ callback()
|
|
|
+ } else {
|
|
|
+ callback(new Error(validateRules.phone.message))
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ AccountName: [{
|
|
|
+ required: true,
|
|
|
+ message: '请输入行卡账户名',
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ configs.value.forEach((e) => {
|
|
|
+ if (e.fieldcode) {
|
|
|
+ rules[e.fieldcode] = [{
|
|
|
+ required: true,
|
|
|
+ message: '请输入' + e.fieldname,
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return rules
|
|
|
+})
|
|
|
+
|
|
|
+const { loading: searchLoading, dataList, runAsync: searchBankBranChnumInfo } = useRequest(queryBankBranChnumInfo, {
|
|
|
+ manual: true,
|
|
|
+ params: {
|
|
|
+ pagesize: 30
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+// 远程搜索银行支行
|
|
|
+const remoteMethod = (query: string) => {
|
|
|
+ if (query.length >= 3) {
|
|
|
+ searchBankBranChnumInfo({
|
|
|
+ branchname: query
|
|
|
+ }).then((res) => {
|
|
|
+ dataList.value = res.data
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 选择支行时触发
|
|
|
+const onBankChange = (item: Model.BankBranChnumInfoRsp) => {
|
|
|
+ configs.value.forEach((e) => {
|
|
|
+ switch (e.fieldcode) {
|
|
|
+ case 'bank_branch_name':
|
|
|
+ e.value = typeof item === 'string' ? item : item.branchname
|
|
|
+ break
|
|
|
+ case '100':
|
|
|
+ e.value = item.branchnum
|
|
|
+ break
|
|
|
+ case '101':
|
|
|
+ e.value = item.branchprovince
|
|
|
+ break
|
|
|
+ case '102':
|
|
|
+ e.value = item.branchcity
|
|
|
+ break
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const onCancel = (isRefresh = false) => {
|
|
|
+ show.value = false
|
|
|
+ refresh.value = isRefresh
|
|
|
+}
|
|
|
+
|
|
|
+/// 是否显示拓展信息
|
|
|
+const showExtendInfo = (item: Model.BankCusBankExtendConfigRsp) => {
|
|
|
+ return (item.usabletype === 1) ||
|
|
|
+ (item.usabletype === 2 && userinfotype === 2) ||
|
|
|
+ (item.usabletype === 3 && userinfotype === 1)
|
|
|
+}
|
|
|
+
|
|
|
+// 发送手机验证码
|
|
|
+const sendVerifyCode = () => {
|
|
|
+ formRef.value?.validateField('MobilePhone', (valid) => {
|
|
|
+ if (valid) {
|
|
|
+ service.onReady().then(() => {
|
|
|
+ smsVerificationCode().then((res) => {
|
|
|
+ if (res.CenterErrMsg != '') {
|
|
|
+ CenterErrMsg.value = res.CenterErrMsg ?? ''
|
|
|
+ }
|
|
|
+ isCountdown.value = true
|
|
|
+ // 开始倒计时
|
|
|
+ const countDown = window.setInterval(() => {
|
|
|
+ seconds.value--
|
|
|
+ if (seconds.value <= 0) {
|
|
|
+ clearInterval(countDown)
|
|
|
+ isCountdown.value = false
|
|
|
+ }
|
|
|
+ }, 1000)
|
|
|
+ }).catch(() => {
|
|
|
+ ElMessage.error('发送失败')
|
|
|
+ })
|
|
|
+ }).catch((err) => {
|
|
|
+ ElMessage.error(err)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const formSubmit = () => {
|
|
|
+ formRef.value?.validate((formValid) => {
|
|
|
+ if (formValid) {
|
|
|
+ extendRef.value?.validate((extendValid) => {
|
|
|
+ if (extendValid) {
|
|
|
+ if (formData.CusBankID) {
|
|
|
+ const obj: { [key: string]: unknown } = Object.create({})
|
|
|
+ configs.value.forEach((e) => {
|
|
|
+ if (e.value) {
|
|
|
+ obj[e.fieldcode] = e.value
|
|
|
+ }
|
|
|
+ if (e.fieldcode === 'bank_branch_name') {
|
|
|
+ formData.OpenBankName = e.value
|
|
|
+ }
|
|
|
+ if (e.fieldcode === '100') {
|
|
|
+ formData.OpenBankNo = e.value
|
|
|
+ }
|
|
|
+ if (e.fieldcode === '101') {
|
|
|
+ formData.BankProvince = e.value
|
|
|
+ }
|
|
|
+ if (e.fieldcode === '102') {
|
|
|
+ formData.BankCity = e.value
|
|
|
+ }
|
|
|
+ })
|
|
|
+ /// 如果需要短信验证码
|
|
|
+ if (CenterErrMsg.value != '') {
|
|
|
+ obj['smsSerialNo'] = CenterErrMsg.value
|
|
|
+ }
|
|
|
+ formData.extendInfo = JSON.stringify(obj)
|
|
|
+
|
|
|
+ onSubmit().then(() => {
|
|
|
+ ElMessage.success(bankInfo.value?.signstatus != undefined ? '签约信息修改成功' : '签约提交成功，请耐心等待审核。')
|
|
|
+ onCancel(true)
|
|
|
+ }).catch((err) => {
|
|
|
+ ElMessage.error('提交失败:' + err)
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ ElMessage.error('未签约')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+</script>
|
