公共组件

2025-12-19 09:11:04 +08:00
parent a1151e18a3
commit 13e7a928c7
7 changed files with 11 additions and 11 deletions
--- a/src/components/common/bankModal.vue
+++ b/src/components/common/bankModal.vue
@ -0,0 +1,117 @@
+<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="aaaa" :label-col="{ span: 8 }" :wrapper-col="{ span: 24 }">
+            <a-input v-model:value="formState.aaaa" 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.aaaa = 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>