|
|
@@ -1,267 +1,132 @@
|
|
|
<!-- 账户管理-入金代扣签约-代扣签约申请 -->
|
|
|
<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>
|
|
|
+ <app-drawer title='代扣签约申请' :width="960" v-model:show="show" :loading="loading" :refresh="refresh">
|
|
|
+ <el-form ref="formRef" class="el-form--horizontal" label-width="160px" :model="formData" :rules="formRules">
|
|
|
+ <el-form-item label="扣费账号" prop="bankaccountno">
|
|
|
+ <el-input name="bankaccountno" readonly v-model="bankaccountno" />
|
|
|
</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 label="一次扣费限额" prop="Yckfxe">
|
|
|
+ <el-input type="number" name="Yckfxe" placeholder="请输入一次扣费限额" :maxlength="30"
|
|
|
+ v-model="formData.Yckfxe" :rules="formRules.Yckfxe" />
|
|
|
</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 label="协议生效期" prop="Xysxrq">
|
|
|
+ <el-date-picker effect="dark" v-model="formData.Xysxrq" type="date" placeholder="请选择协议生效期"
|
|
|
+ :default-value="new Date()" value-format="YYYY-MM-DD" :editable="false" :clearable="false"
|
|
|
+ @visible-change="visibleChange" @calendar-change="calendarChange" :rules="formRules.Xysxrq"/>
|
|
|
</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 label="协议到期日" prop="Xydqrq">
|
|
|
+ <el-date-picker effect="dark" v-model="formData.Xydqrq" type="date" placeholder="请选择协议到期日期"
|
|
|
+ :default-value="new Date()" value-format="YYYY-MM-DD" :editable="false" :clearable="false"
|
|
|
+ @visible-change="visibleChange" @calendar-change="calendarChange" :rules="formRules.Xydqrq" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="扣款单位" prop="Kksjdw">
|
|
|
+ <el-select effect="dark" v-model="formData.Kksjdw" :rules="formRules.Kksjdw" >
|
|
|
+ <el-option :label="item.label" :value="item.value" v-for="(item, index) in getGt_kksjdwList()" :key="index" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="扣款时间步长" prop="Kksjbc">
|
|
|
+ <el-input type="number" name="Kksjbc" placeholder="请输入扣费周期内扣款限额" v-model="formData.Kksjbc" :rules="formRules.Kksjbc" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="扣费周期内扣款限额" prop="Kkzqnkfxe">
|
|
|
+ <el-input type="number" name="Kkzqnkfxe" placeholder="请输入扣费周期内扣款限额" v-model="formData.Kkzqnkfxe" :rules="formRules.Kkzqnkfxe" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="扣费周期内限制笔数" prop="Kkzqnxzbs">
|
|
|
+ <el-input type="number" name="Kkzqnxzbs" placeholder="请输入扣费周期内限制笔数" v-model="formData.Kkzqnxzbs" :rules="formRules.Kkzqnxzbs" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item class="el-form-item--row" label="手机号码" prop="Lxdh">
|
|
|
+ <el-input type="number" name="Lxdh" maxlength="50" placeholder="请输入手机号码" v-model="formData.Lxdh" :rules="formRules.Lxdh" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item class="el-form-item--row" label="地址" prop="Addr">
|
|
|
+ <el-input name="Addr" v-model="formData.Addr" placeholder="请输入联系地址" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item class="el-form-item--row" label="备注" prop="Remark">
|
|
|
+ <el-input name="Remark" type="textarea" placeholder="请输入备注" :rows="3" v-model="formData.Remark" />
|
|
|
</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>
|
|
|
+ <el-button type="primary" @click="formSubmit">下一步</el-button>
|
|
|
</template>
|
|
|
</app-drawer>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { ref, computed } from 'vue'
|
|
|
+import { ref } from 'vue'
|
|
|
import { ElMessage, FormInstance, FormRules } from 'element-plus'
|
|
|
+import { getGt_kksjdwList } from "@/constants/bank";
|
|
|
+import { useDoYJFGetWithholdSignInSMSVCode } from '@/business/bank'
|
|
|
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 { useDateRange } from '@/hooks/date-picker'
|
|
|
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 { formData, onSubmit, loading, bankaccountno } = useDoYJFGetWithholdSignInSMSVCode()
|
|
|
+const { visibleChange, calendarChange } = useDateRange()
|
|
|
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
|
|
|
+const formRules: FormRules = {
|
|
|
+ Yckfxe: [{
|
|
|
+ message: '请输入一次扣费限额',
|
|
|
+ validator: () => {
|
|
|
+ return !!formData.Yckfxe
|
|
|
}
|
|
|
- })
|
|
|
- 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))
|
|
|
- }
|
|
|
+ }],
|
|
|
+ Xysxrq: [{
|
|
|
+ message: '请选择协议生效期',
|
|
|
+ validator: () => {
|
|
|
+ return !!formData.Xysxrq
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ Xydqrq: [{
|
|
|
+ message: '请请选择协议到期日',
|
|
|
+ validator: () => {
|
|
|
+ return !!formData.Xydqrq
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ Kksjdw: [{
|
|
|
+ message: '请选择扣款单位',
|
|
|
+ validator: () => {
|
|
|
+ return !!formData.Yckfxe
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ Kkzqnkfxe: [{
|
|
|
+ message: '请输入扣费周期内扣款限额',
|
|
|
+ validator: () => {
|
|
|
+ return !!formData.Kkzqnkfxe
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ Kkzqnxzbs: [{
|
|
|
+ message: '请输入扣费周期内限制笔数',
|
|
|
+ validator: () => {
|
|
|
+ return !!formData.Kkzqnxzbs
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ Lxdh: [{
|
|
|
+ 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('未签约')
|
|
|
- }
|
|
|
- }
|
|
|
+ onSubmit().then(() => {
|
|
|
+ ElMessage.success('验证码发送成功')
|
|
|
+ }).catch((err) => {
|
|
|
+ ElMessage.error('验证码发送失败:' + err)
|
|
|
})
|
|
|
}
|
|
|
})
|