| | |
| | | <!-- |
| | | * @Description: 自定义弹出框,可以自定义多个表单 |
| | | * @Author: Ben Lin |
| | | * @version: |
| | | * @Date: 2024-06-05 15:46:07 |
| | | * @LastEditors: Ben Lin |
| | | * @LastEditTime: 2024-06-28 14:26:49 |
| | | --> |
| | | <template> |
| | | <BasicModal |
| | | v-bind="$attrs" |
| | |
| | | import { custFunction } from './data'; |
| | | import { isNullOrEmpty, isNullOrUnDef } from '/@/utils/is'; |
| | | import { Layout, LayoutContent, Card } from 'ant-design-vue'; |
| | | import { useMessage } from '/@/hooks/web/useMessage'; |
| | | import { useI18n } from '/@/hooks/web/useI18n'; |
| | | |
| | | const { t } = useI18n(); |
| | | const { notification, createErrorModal } = useMessage(); |
| | | const ALayout = Layout; |
| | | const ACard = Card; |
| | | const ALayoutContent = LayoutContent; |
| | |
| | | const cType = ref(''); |
| | | const title = ref(''); |
| | | const width = ref(''); |
| | | const FnName = ref(''); |
| | | const FnName = ref({}); |
| | | const mValues = ref<Recordable>({}); |
| | | const initFnName = ref({}); |
| | | const dtlSlots = ref([] as any[]); |
| | | const formSchema = ref([] as FormSchema[]); |
| | | const formElName = ref([]); |
| | | const useFormData = ref({}); |
| | | const useFormData = ref<any>({}); |
| | | const props = defineProps({ |
| | | detailSlots: { type: Array, default: [] }, |
| | | }); |
| | |
| | | await nextTick(); |
| | | formSchema.value = []; |
| | | setModalProps({ confirmLoading: false }); |
| | | isUpdate.value = !!data?.isUpdate; |
| | | isUpdate.value = !!data?.isUpdate; //是否更新 |
| | | cType.value = data?.ctype; //是哪个页面 |
| | | title.value = data?.title; //弹框标题 |
| | | width.value = data?.width; //弹框宽度 |
| | | formElName.value = data?.formElName; //弹框中表单名字数组 |
| | | useFormData.value = data?.formEl; //弹框中表单实例数组 |
| | | FnName.value = data?.fnName; //保存数据方法 |
| | | mValues.value = data?.values; //主表单传过来的数据 |
| | | //循环表单名数组,操作各表单字段 |
| | | formElName.value.forEach((name) => { |
| | | if (!isNullOrUnDef(useFormData.value[name])) { |
| | | useFormData.value[name][1].resetFields(); |
| | | useFormData.value[name][1]['resetFields'](); |
| | | if (unref(isUpdate)) { |
| | | useFormData.value[name][1].setFieldsValue({ |
| | | ...data, |
| | | useFormData.value[name][1]['setFieldsValue']({ |
| | | ...mValues.value, |
| | | }); |
| | | } |
| | | } |
| | | }); |
| | | //初始化方法自定义 |
| | | if (!isNullOrEmpty(data?.FnName)) { |
| | | FnName.value = data?.FnName; |
| | | custFunction(unref(isUpdate.value), FnName.value, cType.value); |
| | | if (!isNullOrEmpty(data?.initFnName)) { |
| | | initFnName.value = data?.initFnName; |
| | | custFunction( |
| | | unref(isUpdate.value), |
| | | initFnName.value[cType.value], |
| | | cType.value, |
| | | mValues.value, |
| | | data?.others, |
| | | ); |
| | | } |
| | | }); |
| | | |
| | |
| | | // { deep: true }, |
| | | // ); |
| | | |
| | | /* 弹框确定按钮方法 */ |
| | | /** |
| | | * @description: 弹框确定按钮方法 |
| | | * @return {*} |
| | | */ |
| | | async function handleSuccess() { |
| | | try { |
| | | var values = {} as any; |
| | | //循环表单名数组,验证各表单数据合法性,合法则返回各表单数据,返回值可以用values['表单名']获取表单数据 |
| | | for (let name of formElName.value) { |
| | | values[name] = await useFormData.value[name][1].validate(); |
| | | if (!isNullOrEmpty(useFormData.value[name])) { |
| | | values[name] = await useFormData.value[name][1].validate(); |
| | | } |
| | | } |
| | | setModalProps({ confirmLoading: true }); |
| | | |
| | | closeModal(); |
| | | //成功事件,将数据返回原页面 |
| | | emit('success', { |
| | | isUpdate: isUpdate.value, |
| | | fnName: 'handleSubmit', |
| | | cType: cType.value, |
| | | formElName: formElName.value, |
| | | values, |
| | | }); |
| | | //调用自定义保存方法保存数据 |
| | | values['mValues'] = mValues.value; |
| | | const action = await custFunction(values, FnName.value[cType.value], cType.value); |
| | | if (action as boolean) { |
| | | closeModal(); |
| | | //成功事件,将数据返回原页面 |
| | | emit('success', { |
| | | isUpdate: isUpdate.value, |
| | | fnName: 'handleSubmit', |
| | | cType: cType.value, |
| | | formElName: formElName.value, |
| | | values, |
| | | }); |
| | | } else { |
| | | createErrorModal({ |
| | | title: t('警告'), |
| | | content: t('保存数据失败'), |
| | | getContainer: () => document.body, |
| | | }); |
| | | } |
| | | } finally { |
| | | setModalProps({ confirmLoading: false }); |
| | | } |