117 lines
4.9 KiB
Vue
117 lines
4.9 KiB
Vue
<template>
|
||
<BasicModal v-bind="$attrs" destroyOnClose @register="registerModal" showFooter :title="getTitle" @ok="handleSubmit" @cancel="handleCancel">
|
||
<a-form ref="formRef" :model="formState" :rules="rules" v-bind="{labelCol: { span: 8 },wrapperCol: { span: 16 },}">
|
||
<a-row>
|
||
<a-col :span="12">
|
||
<a-form-item label="银行名称" name="bankName" :label-col="{ span: 8 }" :wrapper-col="{ span: 24 }">
|
||
<a-input-search v-model:value="formState.bankName" placeholder="请选择银行名称" readonly @search="onSearch"/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="联行号" name="interBankCode" :label-col="{ span: 8 }" :wrapper-col="{ span: 24 }">
|
||
<a-input v-model:value="formState.interBankCode" placeholder="请输入联行号" disabled />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="账户名称" name="accountName" :label-col="{ span: 8 }" :wrapper-col="{ span: 24 }">
|
||
<a-input v-model:value="formState.accountName" placeholder="请输入账户名称" />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="银行账号" name="account" :label-col="{ span: 8 }" :wrapper-col="{ span: 24 }">
|
||
<a-input v-model:value="formState.account" placeholder="请输入银行账号" />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="默认银行" name="defaultSign" :label-col="{ span: 8 }" :wrapper-col="{ span: 24 }">
|
||
<a-radio-group v-model:value="formState.defaultSign" style="display: flex;">
|
||
<a-radio v-for="item in optionList" :value="item.code">{{ item.name }}</a-radio>
|
||
</a-radio-group>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="24">
|
||
<a-form-item label="备注" name="note" :label-col="{ span: 4 }" :wrapper-col="{ span: 24 }">
|
||
<a-textarea v-model:value="formState.note" placeholder="请输入备注，最多50字" :maxlength="50" :auto-size="{ minRows: 2, maxRows: 5 }"/>
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
</a-form>
|
||
</BasicModal>
|
||
<bankListModal @register="registerModalBankList" @success="handleSuccessBankList" />
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, computed, unref,reactive } from 'vue';
|
||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||
import { Form } from 'ant-design-vue';
|
||
import { useI18n } from '/@/hooks/web/useI18n';
|
||
import type { Rule } from 'ant-design-vue/es/form';
|
||
import { useMessage } from '/@/hooks/web/useMessage';
|
||
import { getDictionary } from '/@/api/sales/Customer';
|
||
import bankListModal from '/@/components/common/bankListModal.vue'
|
||
import { useModal } from '/@/components/Modal';
|
||
|
||
const { t } = useI18n();
|
||
const isUpdate = ref(true);
|
||
const disable = ref(false);
|
||
let optionList = reactive([])
|
||
const formRef = ref()
|
||
const { notification } = useMessage();
|
||
const emit = defineEmits(['success','register']);
|
||
const getTitle = computed(() => (!unref(isUpdate) ? t('新增银行') : t('编辑银行')));
|
||
let formState = reactive({
|
||
});
|
||
const rules = {
|
||
bankName: [{ required: true, message: "该项为必填项", trigger: 'change' }],
|
||
accountName: [{ required: true, message: "该项为必填项", trigger: 'change' }],
|
||
account: [{ required: true, message: "该项为必填项", trigger: 'change' }],
|
||
defaultSign: [{ required: true, message: "该项为必填项", trigger: 'change' }],
|
||
};
|
||
const [registerModalBankList, { openModal:openModalBankList }] = useModal();
|
||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||
getOption()
|
||
setModalProps({ confirmLoading: false });
|
||
isUpdate.value = !!data?.isUpdate;
|
||
console.log(isUpdate, 8,!unref(isUpdate),data?.isUpdate )
|
||
disable.value = data?.btnType == 'view' ? true : false
|
||
if (unref(isUpdate)) {
|
||
Object.assign(formState, data.record || {})
|
||
}
|
||
});
|
||
|
||
onMounted(() => {
|
||
getOption()
|
||
});
|
||
|
||
async function getOption() {
|
||
optionList = await getDictionary('LNG_YN')
|
||
}
|
||
const onSearch = () => {
|
||
openModalBankList(true,{isUpdate: false})
|
||
}
|
||
const handleSuccessBankList = (val) => {
|
||
console.log(val, 414)
|
||
formState.bankCode = val[0].code
|
||
formState.bankName = val[0].fullName
|
||
formState.interBankCode = val[0].bankCode
|
||
}
|
||
const handleCancel = () => {
|
||
formRef.value.resetFields();
|
||
}
|
||
const handleSubmit = async () => {
|
||
try {
|
||
await formRef.value.validate();
|
||
// 验证通过，提交表单
|
||
console.log('表单数据:', formState);
|
||
emit('success', {...formState});
|
||
notification.success({
|
||
message: t('操作'),
|
||
description:!unref(isUpdate)? t('新增成功') : t('编辑成功')
|
||
}); //提示消息
|
||
formRef.value.resetFields();
|
||
closeModal();
|
||
} catch (error) {
|
||
console.log('验证失败:', error);
|
||
}
|
||
};
|
||
</script> |