<!--
|
* @Description: 自定义弹出框，可以自定义多个表单
|
* @Author: Ben Lin
|
* @version:
|
* @Date: 2024-06-05 15:46:07
|
* @LastEditors: Ben Lin
|
* @LastEditTime: 2024-09-11 23:38:35
|
-->
|
<template>
|
<BasicModal
|
v-bind="$attrs"
|
@register="registerModal"
|
:title="title"
|
@ok="handleSuccess"
|
@cancel="handleCancel"
|
: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, Ref } from 'vue';
|
import { BasicModal, useModalInner } from '/@/components/Modal';
|
import { FormSchema } from '/@/components/Form/index';
|
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';
|
import { EntityCustFunctionType } from '/@/api/tigerapi/model/basModel';
|
import { CustModalParams } from '/@/api/tigerapi/model/systemModel';
|
|
const { t } = useI18n();
|
const { notification, createErrorModal } = useMessage();
|
const ALayout = Layout;
|
const ACard = Card;
|
const ALayoutContent = LayoutContent;
|
const emit = defineEmits(['success', 'register', 'modalInner', 'cancel']);
|
const isUpdate = ref(true);
|
const cType = ref('');
|
const title = ref('');
|
const width = ref('');
|
const FnName = ref('');
|
const mValues = ref<Recordable>({});
|
const initFnName = ref({});
|
const formSchema = ref([] as FormSchema[]);
|
const formElName = ref([]);
|
const useFormData = ref<any>({});
|
const props = defineProps({
|
entityName: { type: String },
|
});
|
|
const custImport = ref<any[]>([]);
|
const EntityCustFunction = ref([
|
{
|
CustFunc(param: CustModalParams) {},
|
} as EntityCustFunctionType,
|
]);
|
/* 动态import实体名.ts的自定义方法 */
|
try {
|
custImport.value = await import(
|
`../tigerprojects/system/lowcode/entityts/${props.entityName}.ts`
|
);
|
} catch (e) {}
|
const [{ CustFunc, GetDtlSlots }] = isNullOrUnDef(custImport.value['default'])
|
? EntityCustFunction.value
|
: custImport.value['default']();
|
const dtlSlots = ref<any[]>([]);
|
// watch(
|
// () => props.detailSlots,
|
// (v) => {
|
// if (v !== dtlSlots.value) {
|
// // dtlSlots.value = v;
|
// }
|
// },
|
// { deep: true },
|
// );
|
|
const [registerModal, { setModalProps, closeModal }] = useModalInner((data) => {
|
formSchema.value = [];
|
setModalProps({ confirmLoading: false });
|
isUpdate.value = !!data?.isUpdate; //是否更新
|
cType.value = data?.ctype; //是哪个页面
|
dtlSlots.value = GetDtlSlots(cType.value);
|
title.value = data?.title; //弹框标题
|
width.value = data?.width; //弹框宽度
|
formElName.value = data?.formElName; //弹框中表单名字数组
|
useFormData.value = data?.formEl; //弹框中表单实例数组
|
FnName.value = data?.fnName; //保存数据方法
|
mValues.value = data?.values; //主表单传过来的数据
|
|
emit('modalInner', dtlSlots.value, async () => {
|
await nextTick();
|
/* 循环表单名数组，操作各表单字段 */
|
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;
|
let param: CustModalParams = {
|
cType: cType.value,
|
values: unref(isUpdate.value),
|
mValues: mValues.value,
|
others: data?.others,
|
FnName: initFnName.value[cType.value],
|
initFnName: '',
|
data: ref<any[]>([])
|
};
|
CustFunc(param);
|
}
|
});
|
|
// 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 CustFunc({
|
cType: cType.value,
|
values: values,
|
FnName: FnName.value,
|
} as unknown as CustModalParams);
|
if (action.IsSuccessed) {
|
closeModal();
|
//成功事件，将数据返回原页面
|
emit('success', {
|
isUpdate: isUpdate.value,
|
fnName: 'handleSubmit',
|
cType: cType.value,
|
formElName: formElName.value,
|
values,
|
});
|
} else {
|
createErrorModal({
|
title: t('警告'),
|
content: t(action.LocaleMsg),
|
getContainer: () => document.body,
|
});
|
}
|
} finally {
|
setModalProps({ confirmLoading: false });
|
}
|
}
|
|
/**
|
* @description: 取消按钮触发取消事件
|
* @return {*}
|
*/
|
function handleCancel() {
|
emit('cancel');
|
}
|
</script>
|
