From cf3a9a81f4f26cc9cc13829fe6fb507dc41e2b2c Mon Sep 17 00:00:00 2001 From: wupengfei <834520024@qq.com> Date: 星期四, 09 十月 2025 09:44:57 +0800 Subject: [PATCH] fix: bug --- src/views/EnterpriseManage/components/ConfigureDialog.vue | 274 ++++++++++++++---------------------------------------- 1 files changed, 72 insertions(+), 202 deletions(-) diff --git a/src/views/EnterpriseManage/components/ConfigureDialog.vue b/src/views/EnterpriseManage/components/ConfigureDialog.vue index 0224cb3..820cd62 100644 --- a/src/views/EnterpriseManage/components/ConfigureDialog.vue +++ b/src/views/EnterpriseManage/components/ConfigureDialog.vue @@ -1,125 +1,28 @@ <template> - <ProDialog title="閰嶇疆" v-model="innerVisible" @close="onDialogClose" destroy-on-close draggable> - <ProForm :model="innerForm" ref="dialogForm" label-width="100px"> - <ProFormItemV2 label="" prop="enterpriseConfigureType" label-width="0"> - <ProFormRadio - v-model="innerForm.enterpriseConfigureType" - :value-enum="EnterpriseConfigureTypeText" - buttonStyle - /> - </ProFormItemV2> - <template v-if="innerForm.enterpriseConfigureType === EnterpriseConfigureType.Bank"> - <ProFormItemV2 label="寮�鎴锋�昏:" prop="openBank"> - <ProFormText - v-model.trim="innerForm.openBank" - placeholder="璇疯緭鍏ュ紑鎴锋�昏" - :maxlength="40" - /> - </ProFormItemV2> - <ProFormItemV2 label="寮�鎴锋敮琛�:" prop="openBranchBank"> - <ProFormText - v-model.trim="innerForm.openBranchBank" - placeholder="璇疯緭鍏ュ紑鎴锋敮琛�" - :maxlength="40" - /> - </ProFormItemV2> - <ProFormItemV2 - label="閾惰璐︽埛:" - prop="bankAccount" - :check-rules="[ - { message: '璇疯緭鍏ラ摱琛岃处鎴�' }, - { message: '閾惰璐︽埛浠呮敮鎸佹暟瀛�', pattern: BoleRegExp.RegNumber }, - ]" - > - <ProFormText v-model.trim="innerForm.bankAccount" placeholder="璇疯緭鍏ラ摱琛岃处鎴�" /> - </ProFormItemV2> - <ProFormItemV2 label="閾惰璐︽埛:" prop="verifyStatus"> - {{ VerifyStatusText[innerForm.verifyStatus] }} - <el-button style="margin-left: 40px" type="primary" link @click="handleCheckBankAccount" - >鏍¢獙</el-button - > - </ProFormItemV2> - </template> - <template v-if="innerForm.enterpriseConfigureType === EnterpriseConfigureType.Electronic"> - <div class="configure-dialog-form-title">閫氶亾閰嶇疆</div> - <ProFormItemV2 - label="鍚嶇О:" - prop="signChannel" - :checkRules="[{ message: '璇烽�夋嫨鐢靛瓙绛鹃�氶亾' }]" - > - <ProFormSelect - v-model="form.signChannel" - :valueEnum="SignChannelEnumText" - placeholder="璇烽�夋嫨鐢靛瓙绛鹃�氶亾" - > - </ProFormSelect> - </ProFormItemV2> - <div class="configure-dialog-form-title">璐圭敤閰嶇疆</div> - <ProFormItemV2 - label="璁¤垂鏂瑰紡:" - prop="chargeType" - :checkRules="[{ message: '璇烽�夋嫨璁¤垂鏂瑰紡' }]" - > - <ProFormRadio - :button-style="false" - v-model="innerForm.chargeType" - :value-enum="ChargeTypeEnumText" - /> - </ProFormItemV2> - <template v-if="innerForm.chargeType === ChargeTypeEnum.Group"> - <ProFormItemV2 label="瀹炲悕璐圭敤:" prop="realVerifyCost"> - <ProFormInputNumber - :controls="false" - v-model="innerForm.realVerifyCost" - placeholder="璇疯緭鍏�" - unit="鍏�/鏉�" - /> - </ProFormItemV2> - <ProFormItemV2 label="绛剧害璐圭敤:" prop="signCost"> - <ProFormInputNumber - :controls="false" - v-model="innerForm.signCost" - placeholder="璇疯緭鍏�" - unit="鍏�/浠�" - /> - </ProFormItemV2> - </template> - <template v-if="innerForm.chargeType === ChargeTypeEnum.Merge"> - <ProFormItemV2 label="缁熶竴鐢靛瓙绛�:" prop="mergeSignCost"> - <ProFormInputNumber - :controls="false" - v-model="innerForm.mergeSignCost" - placeholder="璇疯緭鍏�" - unit="鍏�/浠�" - /> - </ProFormItemV2> - </template> - </template> - <template v-if="innerForm.enterpriseConfigureType === EnterpriseConfigureType.ShortMessage"> - <div class="configure-dialog-form-title">閫氶亾閰嶇疆</div> - <ProFormItemV2 - label="鍚嶇О:" - prop="messageChannel" - :checkRules="[{ message: '璇烽�夋嫨鐭俊閫氶亾' }]" - > - <ProFormSelect - v-model="form.messageChannel" - :valueEnum="MessageChannelEnumText" - placeholder="璇烽�夋嫨鐭俊閫氶亾" - > - </ProFormSelect> - </ProFormItemV2> - <div class="configure-dialog-form-title">璐圭敤閰嶇疆</div> - <ProFormItemV2 label="鐭俊璐圭敤:" prop="messageCost"> - <ProFormInputNumber - :controls="false" - v-model="innerForm.messageCost" - placeholder="璇疯緭鍏�" - unit="鍏�/鏉�" - /> - </ProFormItemV2> - </template> - </ProForm> + <ProDialog title="閰嶇疆" v-model="visible" @close="onDialogClose" destroy-on-close draggable> + <FieldRadio + v-model="form.enterpriseConfigureType" + :value-enum="EnterpriseConfigureTypeText" + buttonStyle + style="margin-bottom: 22px" + /> + <el-tabs v-model="form.enterpriseConfigureType" class="configure-dialog-tabs"> + <el-tab-pane lazy :name="EnterpriseConfigureType.Bank"> + <BankConfigureView :id="form.id" ref="bankConfigureViewRef" /> + </el-tab-pane> + <el-tab-pane lazy :name="EnterpriseConfigureType.AliPay"> + <AliPayConfigureView :id="form.id" ref="aliPayConfigureViewRef" /> + </el-tab-pane> + <!-- <el-tab-pane lazy :name="EnterpriseConfigureType.Wechat"> + <WechatConfigureView :id="form.id" ref="wechatConfigureViewRef" /> + </el-tab-pane> --> + <el-tab-pane lazy :name="EnterpriseConfigureType.Electronic"> + <ElectronicConfigureView :id="form.id" ref="electronicConfigureViewRef" /> + </el-tab-pane> + <el-tab-pane lazy :name="EnterpriseConfigureType.ShortMessage"> + <ShortMessageConfigureView :id="form.id" ref="shortMessageConfigureViewRef" /> + </el-tab-pane> + </el-tabs> <template #footer> <span class="dialog-footer"> <el-button @click="emit('onCancel')">鍙� 娑�</el-button> @@ -130,109 +33,76 @@ </template> <script setup lang="ts"> -import { FormInstance } from 'element-plus'; -import { - ProDialog, - ProForm, - ProFormItemV2, - ProFormText, - ProFormRadio, - ProFormInputNumber, - ProFormSelect, -} from '@bole-core/components'; -import { BoleRegExp } from '@bole-core/core'; -import { - EnterpriseConfigureType, - EnterpriseConfigureTypeText, - ChargeTypeEnum, - ChargeTypeEnumText, - SignChannelEnum, - SignChannelEnumText, - VerifyStatusText, - VerifyStatusColor, - VerifyStatus, - MessageChannelEnum, - MessageChannelEnumText, -} from '@/constants'; +import { ProDialog, FieldRadio } from '@bole-core/components'; +import { EnterpriseConfigureType, EnterpriseConfigureTypeText } from '@/constants'; +import BankConfigureView from './BankConfigureView.vue'; +import AliPayConfigureView from './AliPayConfigureView.vue'; +import ElectronicConfigureView from './ElectronicConfigureView.vue'; +import ShortMessageConfigureView from './ShortMessageConfigureView.vue'; +import WechatConfigureView from './WechatConfigureView.vue'; defineOptions({ name: 'ConfigureDialog', }); -type Props = { - modelValue: boolean; - form?: { - enterpriseConfigureType: EnterpriseConfigureType; - openBank: string; - openBranchBank: string; - bankAccount: string; - verifyStatus: VerifyStatus; - signChannel: SignChannelEnum; - chargeType: ChargeTypeEnum; - realVerifyCost: number; - signCost: number; - mergeSignCost: number; - messageCost: number; - messageChannel: MessageChannelEnum; - }; +type Form = { + enterpriseConfigureType: EnterpriseConfigureType; + id: string; }; -const props = withDefaults(defineProps<Props>(), { - modelValue: false, -}); +const form = defineModel<Form>('form'); +const visible = defineModel({ type: Boolean }); const emit = defineEmits<{ - (e: 'update:modelValue', value: boolean): void; - (e: 'update:form', value: Props['form']): void; (e: 'onConfirm'): void; (e: 'onCancel'): void; }>(); -const dialogForm = ref<FormInstance>(); +const bankConfigureViewRef = + useTemplateRef<InstanceType<typeof BankConfigureView>>('bankConfigureViewRef'); +const aliPayConfigureViewRef = + useTemplateRef<InstanceType<typeof AliPayConfigureView>>('aliPayConfigureViewRef'); +const electronicConfigureViewRef = useTemplateRef<InstanceType<typeof ElectronicConfigureView>>( + 'electronicConfigureViewRef' +); +const shortMessageConfigureViewRef = useTemplateRef<InstanceType<typeof ShortMessageConfigureView>>( + 'shortMessageConfigureViewRef' +); -const innerVisible = computed({ - get() { - return props.modelValue; - }, - set(val) { - emit('update:modelValue', val); - }, -}); - -const innerForm = computed({ - get() { - return props.form; - }, - set(val) { - emit('update:form', val); - }, -}); - -function handleCheckBankAccount() {} +const wechatConfigureViewRef = + useTemplateRef<InstanceType<typeof WechatConfigureView>>('wechatConfigureViewRef'); function onDialogClose() { - if (!dialogForm.value) return; - dialogForm.value.resetFields(); + // if (!dialogForm.value) return; + // dialogForm.value.resetFields(); } -function handleConfirm() { - if (!dialogForm.value) return; - dialogForm.value.validate((valid) => { - if (valid) { - emit('onConfirm'); - } else { - return; - } - }); +async function handleConfirm() { + let res: any; + if (form.value.enterpriseConfigureType === EnterpriseConfigureType.Bank) { + res = await bankConfigureViewRef.value?.onConfirm(); + } else if (form.value.enterpriseConfigureType === EnterpriseConfigureType.AliPay) { + res = await aliPayConfigureViewRef.value?.onConfirm?.(); + } else if (form.value.enterpriseConfigureType === EnterpriseConfigureType.Electronic) { + res = await electronicConfigureViewRef.value?.onConfirm?.(); + } else if (form.value.enterpriseConfigureType === EnterpriseConfigureType.ShortMessage) { + res = await shortMessageConfigureViewRef.value?.onConfirm?.(); + } else if (form.value.enterpriseConfigureType === EnterpriseConfigureType.Wechat) { + res = await wechatConfigureViewRef.value?.onConfirm?.(); + } + if (res) { + emit('onConfirm'); + } } </script> <style lang="scss" scoped> @use '@/style/common.scss' as *; -.configure-dialog-form-title { - margin-bottom: 10px; - font-size: 15px; - font-weight: bold; - line-height: 36px; +.configure-dialog-tabs { + :deep() { + .el-tabs__header { + display: none; + } + } } </style> -- Gitblit v1.9.1