From 46c3d28c5633baaddad0da441185310b9360a45b Mon Sep 17 00:00:00 2001
From: Ben Lin <maobin001@msn.com>
Date: 星期三, 03 七月 2024 14:56:21 +0800
Subject: [PATCH] 高级表单优化
---
src/views/components/CustModal.vue | 106 ++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 76 insertions(+), 30 deletions(-)
diff --git a/src/views/components/CustModal.vue b/src/views/components/CustModal.vue
index 10336ba..83d0f8b 100644
--- a/src/views/components/CustModal.vue
+++ b/src/views/components/CustModal.vue
@@ -1,3 +1,11 @@
+<!--
+ * @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"
@@ -24,11 +32,15 @@
<script lang="ts" setup>
import { ref, unref, nextTick, watch } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
- import { FormActionType, FormSchema } from '/@/components/Form/index';
+ 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;
@@ -37,11 +49,13 @@
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 prodinfo = ref<Nullable<FormActionType>>(null);
+ const formElName = ref([]);
+ const useFormData = ref<any>({});
const props = defineProps({
detailSlots: { type: Array, default: [] },
});
@@ -59,24 +73,35 @@
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;
- prodinfo.value = data?.formEl;
- if (!isNullOrUnDef(prodinfo.value)) {
- prodinfo.value[formElName.value].resetFields();
- if (unref(isUpdate)) {
- prodinfo.value[formElName.value].setFieldsValue({
- ...data,
- });
+ 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?.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,
+ );
}
});
@@ -88,19 +113,40 @@
// { deep: true },
// );
+ /**
+ * @description: 寮规纭畾鎸夐挳鏂规硶
+ * @return {*}
+ */
async function handleSuccess() {
try {
- var values = await prodinfo.value[formElName.value].validate();
+ 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 });
-
- 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 });
}
--
Gitblit v1.9.3