feat: 优化表格

src/components/AnForm/components/FormItem.tsx

@@ -1,10 +1,4 @@
-import {
-  FormItem as BaseFormItem,
-  FieldRule,
-  FormItemInstance,
-  SelectOptionData,
-  SelectOptionGroup,
-} from '@arco-design/web-vue';
+import { FormItem, FieldRule, FormItemInstance, SelectOptionData, SelectOptionGroup } from '@arco-design/web-vue';
 import { InjectionKey, PropType, provide } from 'vue';
 import { SetterItem, SetterType, setterMap } from './FormSetter';
 
@@ -87,7 +81,7 @@ export const AnFormItem = defineComponent({
         return null;
       }
       return (
-        <BaseFormItem
+        <FormItem
           {...props.item.itemProps}
           class="an-form-item"
           label={props.item.label as string}
@@ -96,7 +90,7 @@ export const AnFormItem = defineComponent({
           field={props.item.field}
         >
           {itemSlots}
-        </BaseFormItem>
+        </FormItem>
       );
     };
   },

src/components/AnForm/components/FormModal.tsx

@@ -5,6 +5,7 @@ import { useModalSubmit } from './useModalSubmit';
 import { useModalTrigger } from './useModalTrigger';
 import { AnForm, AnFormInstance, AnFormProps, AnFormSubmit } from './Form';
 import { AnFormItemProps } from './FormItem';
+import { useVModel } from '@vueuse/core';
 
 export interface AnFormModalContext {
   visible: Ref<boolean>;
@@ -111,12 +112,15 @@ export const AnFormModal = defineComponent({
       type: Object as PropType<Omit<FormInstance['$props'], 'model' | 'ref'>>,
     },
   },
-  emits: ['update:model'],
-  setup(props) {
+  emits: ['update:model', 'submited'],
+  setup(props, { emit }) {
     const formRef = ref<AnFormInstance | null>(null);
-    const { visible, show, hide } = useVisible();
-    const { modalTrigger } = useModalTrigger(props, show);
-    const { loading, setLoading, submitForm } = useModalSubmit(props, formRef, visible);
+    const model = useVModel(props, 'model', emit);
+    const visible = ref(false);
+    const show = () => (visible.value = true);
+    const hide = () => (visible.value = false);
+    const modalTrigger = useModalTrigger(props, show);
+    const { loading, setLoading, submitForm } = useModalSubmit(props, formRef, visible, emit, model);
 
     const open = (data: Recordable = {}) => {
       formRef.value?.setModel(data);
@@ -143,10 +147,10 @@ export const AnFormModal = defineComponent({
       formRef,
       open,
       close,
+      onClose,
       submitForm,
       modalTitle,
       modalTrigger,
-      onClose,
     };
 
     provide(AnFormModalContextKey, context);

src/components/AnForm/components/useModalSubmit.tsx

@@ -1,9 +1,11 @@
 import { sleep } from '@/utils';
 import { Message } from '@arco-design/web-vue';
+import { cloneDeep } from 'lodash-es';
 import { Ref } from 'vue';
 
-export function useModalSubmit(props: any, formRef: any, visible: Ref<boolean>) {
+export function useModalSubmit(props: any, formRef: any, visible: Ref<boolean>, emit?: any, model?: Ref<Recordable>) {
   const loading = ref(false);
+  const origin = cloneDeep(props.model);
 
   const submitForm = async () => {
     if (await formRef.value?.validate()) {
@@ -15,7 +17,11 @@ export function useModalSubmit(props: any, formRef: any, visible: Ref<boolean>)
       const res = await props.submit?.(data, props.items);
       const msg = res?.data?.message;
       msg && Message.success(msg);
+      emit('submited', res);
       visible.value = false;
+      if (model) {
+        model.value = cloneDeep(origin);
+      }
     } catch {
       // todo
     } finally {

src/components/AnForm/components/useModalTrigger.tsx

@@ -1,22 +1,22 @@
-import { Button } from "@arco-design/web-vue";
+import { Button } from '@arco-design/web-vue';
 
 export function useModalTrigger(props: any, open: () => void) {
   const modalTrigger = () => {
     if (!props.trigger) {
       return null;
     }
-    if (typeof props.trigger === "function") {
+    if (typeof props.trigger === 'function') {
       return <props.trigger model={props.model} items={props.items} open={open}></props.trigger>;
     }
     const internal = {
-      text: "新增",
+      text: '新增',
       buttonProps: {},
       buttonSlots: {},
     };
-    if (typeof props.trigger === "string") {
+    if (typeof props.trigger === 'string') {
       internal.text = props.trigger;
     }
-    if (typeof props.trigger === "object") {
+    if (typeof props.trigger === 'object') {
       Object.assign(internal, props.trigger);
     }
     return (
@@ -29,5 +29,5 @@ export function useModalTrigger(props: any, open: () => void) {
       </Button>
     );
   };
-  return { modalTrigger };
+  return modalTrigger;
 }

src/components/AnForm/hooks/useFormModal.tsx

@@ -73,6 +73,7 @@ export function useFormModal(options: FormModalUseOptions) {
       items={props.items}
       formProps={props.formProps}
       submit={props.submit}
+      onUpdate:model={model => ((props as any).model = model)}
     ></AnFormModal>
   );
 

src/components/AnTable/components/Table.tsx

@@ -195,8 +195,10 @@ export const AnTable = defineComponent({
     return (
       <div class="an-table table w-full">
         <div class={`mb-3 flex gap-2 toolbar justify-between`}>
-          {this.create && <AnFormModal {...this.create} ref="createRef"></AnFormModal>}
-          {this.modify && <AnFormModal {...this.modify} trigger={false} ref="modifyRef"></AnFormModal>}
+          {this.create && <AnFormModal {...this.create} ref="createRef" onSubmited={this.reload}></AnFormModal>}
+          {this.modify && (
+            <AnFormModal {...this.modify} trigger={false} ref="modifyRef" onSubmited={this.refresh}></AnFormModal>
+          )}
           {this.$slots.action?.(this.renderData)}
           {this.pluginer?.actions && (
             <div class={`flex-1 flex gap-2 items-center`}>