|
|
@@ -0,0 +1,227 @@
|
|
|
+<template>
|
|
|
+ <!-- 对话框表单 -->
|
|
|
+ <el-dialog class="ba-operate-dialog" :close-on-click-modal="false"
|
|
|
+ :model-value="['Add', 'Edit'].includes(baTable.form.operate!)" @close="baTable.toggleForm"
|
|
|
+ :destroy-on-close="true">
|
|
|
+ <template #header>
|
|
|
+ <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
|
|
|
+ {{ baTable.form.operate ? t(baTable.form.operate) : '' }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <el-scrollbar v-loading="baTable.form.loading" class="ba-table-form-scrollbar">
|
|
|
+ <div class="ba-operate-form" :class="'ba-' + baTable.form.operate + '-form'"
|
|
|
+ :style="config.layout.shrink ? '' : 'width: calc(100% - ' + baTable.form.labelWidth! / 2 + 'px)'">
|
|
|
+ <el-form ref="formRef" @keyup.enter="btnSubmit" :model="baTable.form.items"
|
|
|
+ :label-position="config.layout.shrink ? 'top' : 'right'"
|
|
|
+ :label-width="baTable.form.labelWidth + 'px'" :rules="rules" v-if="!baTable.form.loading">
|
|
|
+
|
|
|
+ <FormItem
|
|
|
+ type="remoteSelect"
|
|
|
+ prop="user_id"
|
|
|
+ label="用户"
|
|
|
+ v-model="baTable.form.items!.user_id"
|
|
|
+ placeholder="请选择用户"
|
|
|
+ :input-attr="{
|
|
|
+ pk: 'user.id',
|
|
|
+ field: 'name',
|
|
|
+ remoteUrl: '/admin/userCenter.user/index',
|
|
|
+ }"
|
|
|
+ />
|
|
|
+
|
|
|
+ <el-form-item label="账户类型" prop="account_type">
|
|
|
+ <el-select v-model="baTable.form.items!.account_type" placeholder="请选择账户类型" style="width: 100%">
|
|
|
+ <el-option label="银行卡" value="bank" />
|
|
|
+ <el-option label="支付宝" value="alipay" />
|
|
|
+ <el-option label="微信" value="wechat" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <FormItem label="账户姓名" prop="account_name" v-model="baTable.form.items!.account_name" type="string"
|
|
|
+ placeholder="请输入账户姓名" />
|
|
|
+
|
|
|
+ <FormItem label="是否默认" prop="is_default" type="radio" v-model="baTable.form.items!.is_default"
|
|
|
+ :input-attr="{ border: true, content: isDefaultOptions }" />
|
|
|
+
|
|
|
+ <FormItem label="状态" prop="status" type="radio" v-model="baTable.form.items!.status"
|
|
|
+ :input-attr="{ border: true, content: statusOptions }" />
|
|
|
+
|
|
|
+ <!-- 银行卡相关字段 -->
|
|
|
+ <template v-if="baTable.form.items!.account_type === 'bank'">
|
|
|
+ <FormItem label="银行名称" prop="bank_name" v-model="baTable.form.items!.bank_name" type="string"
|
|
|
+ placeholder="请输入银行名称" />
|
|
|
+ <FormItem label="支行名称" prop="bank_branch" v-model="baTable.form.items!.bank_branch" type="string"
|
|
|
+ placeholder="请输入支行名称" />
|
|
|
+ <FormItem label="省份" prop="bank_province" v-model="baTable.form.items!.bank_province" type="string"
|
|
|
+ placeholder="请输入省份" />
|
|
|
+ <FormItem label="城市" prop="bank_city" v-model="baTable.form.items!.bank_city" type="string"
|
|
|
+ placeholder="请输入城市" />
|
|
|
+ <FormItem label="银行卡号" prop="card_number" v-model="baTable.form.items!.card_number" type="string"
|
|
|
+ placeholder="请输入银行卡号" />
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 支付宝相关字段 -->
|
|
|
+ <template v-if="baTable.form.items!.account_type === 'alipay'">
|
|
|
+ <FormItem label="支付宝账号" prop="alipay_account" v-model="baTable.form.items!.alipay_account" type="string"
|
|
|
+ placeholder="请输入支付宝账号" />
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 微信相关字段 -->
|
|
|
+ <template v-if="baTable.form.items!.account_type === 'wechat'">
|
|
|
+ <FormItem label="微信账号" prop="wechat_account" v-model="baTable.form.items!.wechat_account" type="string"
|
|
|
+ placeholder="请输入微信账号" />
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <el-form-item label="备注" prop="remark">
|
|
|
+ <el-input
|
|
|
+ v-model="baTable.form.items!.remark"
|
|
|
+ type="textarea"
|
|
|
+ :rows="3"
|
|
|
+ placeholder="请输入备注"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </el-scrollbar>
|
|
|
+ <template #footer>
|
|
|
+ <div :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'">
|
|
|
+ <el-button @click="baTable.toggleForm('')">{{ t('Cancel') }}</el-button>
|
|
|
+ <el-button v-blur :loading="baTable.form.submitLoading" @click="btnSubmit" type="primary">
|
|
|
+ {{ baTable.form.operateIds && baTable.form.operateIds.length > 1 ? t('Save and edit next item') :
|
|
|
+ t('Save') }}
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { reactive, inject, useTemplateRef, watch } from 'vue'
|
|
|
+import { useI18n } from 'vue-i18n'
|
|
|
+import type baTableClass from '/@/utils/baTable'
|
|
|
+import FormItem from '/@/components/formItem/index.vue'
|
|
|
+import type { FormItemRule } from 'element-plus'
|
|
|
+import { useConfig } from '/@/stores/config'
|
|
|
+import { buildValidatorData } from '/@/utils/validate'
|
|
|
+import { edit } from '/@/api/backend/pay/accountConfig'
|
|
|
+
|
|
|
+const config = useConfig()
|
|
|
+const formRef = useTemplateRef('formRef')
|
|
|
+const baTable = inject('baTable') as baTableClass
|
|
|
+const emit = defineEmits(['success'])
|
|
|
+
|
|
|
+const { t } = useI18n()
|
|
|
+
|
|
|
+const statusOptions = {
|
|
|
+ '0': '禁用',
|
|
|
+ '1': '启用',
|
|
|
+}
|
|
|
+
|
|
|
+const isDefaultOptions = {
|
|
|
+ '0': '否',
|
|
|
+ '1': '是',
|
|
|
+}
|
|
|
+
|
|
|
+// 验证规则
|
|
|
+const rules: Partial<Record<string, FormItemRule[]>> = reactive({
|
|
|
+ user_id: [buildValidatorData({ name: 'required', title: '用户' })],
|
|
|
+ account_type: [buildValidatorData({ name: 'required', trigger: 'change', title: '账户类型' })],
|
|
|
+ account_name: [buildValidatorData({ name: 'required', title: '账户姓名' })],
|
|
|
+ is_default: [buildValidatorData({ name: 'required', trigger: 'change', title: '是否默认' })],
|
|
|
+ status: [buildValidatorData({ name: 'required', trigger: 'change', title: '状态' })],
|
|
|
+})
|
|
|
+
|
|
|
+// 监听账户类型变化，动态更新验证规则
|
|
|
+const updateValidationRules = (accountType: string) => {
|
|
|
+ // 移除条件字段的验证规则（如果存在）
|
|
|
+ if (rules.bank_name) delete rules.bank_name
|
|
|
+ if (rules.card_number) delete rules.card_number
|
|
|
+ if (rules.alipay_account) delete rules.alipay_account
|
|
|
+ if (rules.wechat_account) delete rules.wechat_account
|
|
|
+
|
|
|
+ // 根据账户类型添加相应的验证规则
|
|
|
+ if (accountType === 'bank') {
|
|
|
+ rules.bank_name = [buildValidatorData({ name: 'required', title: '银行名称' })]
|
|
|
+ rules.card_number = [buildValidatorData({ name: 'required', title: '银行卡号' })]
|
|
|
+ } else if (accountType === 'alipay') {
|
|
|
+ rules.alipay_account = [buildValidatorData({ name: 'required', title: '支付宝账号' })]
|
|
|
+ } else if (accountType === 'wechat') {
|
|
|
+ rules.wechat_account = [buildValidatorData({ name: 'required', title: '微信账号' })]
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+watch(
|
|
|
+ () => baTable.form.items!.account_type,
|
|
|
+ (newType) => {
|
|
|
+ if (newType) {
|
|
|
+ updateValidationRules(newType)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ { immediate: true }
|
|
|
+)
|
|
|
+
|
|
|
+// 监听表单打开，确保验证规则正确初始化
|
|
|
+watch(
|
|
|
+ () => baTable.form.operate,
|
|
|
+ (newOperate) => {
|
|
|
+ if (newOperate && baTable.form.items!.account_type) {
|
|
|
+ updateValidationRules(baTable.form.items!.account_type)
|
|
|
+ }
|
|
|
+ }
|
|
|
+)
|
|
|
+
|
|
|
+// 提交
|
|
|
+const btnSubmit = () => {
|
|
|
+ formRef.value?.validate((valid: boolean) => {
|
|
|
+ if (valid) {
|
|
|
+ baTable.table.loading = true
|
|
|
+
|
|
|
+ let params: any = {
|
|
|
+ id: baTable.form.items!.id,
|
|
|
+ user_id: baTable.form.items!.user_id,
|
|
|
+ account_type: baTable.form.items!.account_type,
|
|
|
+ account_name: baTable.form.items!.account_name,
|
|
|
+ is_default: baTable.form.items!.is_default,
|
|
|
+ status: baTable.form.items!.status,
|
|
|
+ remark: baTable.form.items!.remark || '',
|
|
|
+ }
|
|
|
+
|
|
|
+ // 根据账户类型添加相应字段
|
|
|
+ if (baTable.form.items!.account_type === 'bank') {
|
|
|
+ params.bank_name = baTable.form.items!.bank_name || ''
|
|
|
+ params.bank_branch = baTable.form.items!.bank_branch || ''
|
|
|
+ params.bank_province = baTable.form.items!.bank_province || ''
|
|
|
+ params.bank_city = baTable.form.items!.bank_city || ''
|
|
|
+ params.card_number = baTable.form.items!.card_number || ''
|
|
|
+ params.alipay_account = ''
|
|
|
+ params.wechat_account = ''
|
|
|
+ } else if (baTable.form.items!.account_type === 'alipay') {
|
|
|
+ params.alipay_account = baTable.form.items!.alipay_account || ''
|
|
|
+ params.bank_name = ''
|
|
|
+ params.bank_branch = ''
|
|
|
+ params.bank_province = ''
|
|
|
+ params.bank_city = ''
|
|
|
+ params.card_number = ''
|
|
|
+ params.wechat_account = ''
|
|
|
+ } else if (baTable.form.items!.account_type === 'wechat') {
|
|
|
+ params.wechat_account = baTable.form.items!.wechat_account || ''
|
|
|
+ params.bank_name = ''
|
|
|
+ params.bank_branch = ''
|
|
|
+ params.bank_province = ''
|
|
|
+ params.bank_city = ''
|
|
|
+ params.card_number = ''
|
|
|
+ params.alipay_account = ''
|
|
|
+ }
|
|
|
+
|
|
|
+ edit(params).then(() => {
|
|
|
+ baTable.toggleForm()
|
|
|
+ emit('success')
|
|
|
+ }).finally(() => {
|
|
|
+ baTable.table.loading = false
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss"></style>
|
“陈博论”
