<!--
|
* @Description: 自定义弹出框，可以自定义多个表单
|
* @Author: Ben Lin
|
* @version:
|
* @Date: 2024-06-05 15:46:07
|
* @LastEditors: Ben Lin
|
* @LastEditTime: 2024-06-13 09:28:27
|
-->
|
<template>
|
<BasicModal
|
v-bind="$attrs"
|
@register="registerModal"
|
:title="title"
|
@ok="handleSuccess"
|
:width="width"
|
>
|
<a-layout>
|
<a-layout-content>
|
<a-card
|
:title="item.title"
|
:bordered="false"
|
class="!m-5"
|
v-for="(item, index) in dtlSlots"
|
:key="item.name"
|
>
|
<slot :name="item.name" :index="index"></slot>
|
</a-card>
|
</a-layout-content>
|
</a-layout>
|
</BasicModal>
|
</template>
|
<script lang="ts" setup>
|
import { ref, unref, nextTick, watch } from 'vue';
|
import { BasicModal, useModalInner } from '/@/components/Modal';
|
import { FormSchema } from '/@/components/Form/index';
|
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 emit = defineEmits(['success', 'register']);
|
const isUpdate = ref(true);
|
const cType = ref('');
|
const title = ref('');
|
const width = 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 props = defineProps({
|
detailSlots: { type: Array, default: [] },
|
});
|
watch(
|
() => props.detailSlots,
|
(v) => {
|
if (v !== dtlSlots.value) {
|
dtlSlots.value = v;
|
}
|
},
|
{ deep: true },
|
);
|
|
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
await nextTick();
|
formSchema.value = [];
|
setModalProps({ confirmLoading: false });
|
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();
|
if (unref(isUpdate)) {
|
useFormData.value[name][1].setFieldsValue({
|
...mValues.value,
|
});
|
}
|
}
|
});
|
//初始化方法自定义
|
if (!isNullOrEmpty(data?.initFnName)) {
|
initFnName.value = data?.initFnName;
|
custFunction(
|
unref(isUpdate.value),
|
initFnName.value[cType.value],
|
cType.value,
|
mValues.value,
|
data?.others,
|
);
|
}
|
});
|
|
// watch(
|
// () => props,
|
// (newVal, oldVal) => {
|
// if (newVal !== oldVal) formSchema.value = getFormschema(props.ctype);
|
// },
|
// { deep: true },
|
// );
|
|
/**
|
* @description: 弹框确定按钮方法
|
* @return {*}
|
*/
|
async function handleSuccess() {
|
try {
|
var values = {} as any;
|
//循环表单名数组，验证各表单数据合法性，合法则返回各表单数据，返回值可以用values['表单名']获取表单数据
|
for (let name of formElName.value) {
|
if (!isNullOrEmpty(useFormData.value[name])) {
|
values[name] = await useFormData.value[name][1].validate();
|
}
|
}
|
setModalProps({ confirmLoading: true });
|
//调用自定义保存方法保存数据
|
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 });
|
}
|
}
|
</script>
|
