diff --git a/src/components/AnForm/components/FormItem.tsx b/src/components/AnForm/components/FormItem.tsx index e7e2428..4570c97 100644 --- a/src/components/AnForm/components/FormItem.tsx +++ b/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 ( - {itemSlots} - + ); }; }, diff --git a/src/components/AnForm/components/FormModal.tsx b/src/components/AnForm/components/FormModal.tsx index 37d9b2a..4691873 100644 --- a/src/components/AnForm/components/FormModal.tsx +++ b/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; @@ -111,12 +112,15 @@ export const AnFormModal = defineComponent({ type: Object as PropType>, }, }, - emits: ['update:model'], - setup(props) { + emits: ['update:model', 'submited'], + setup(props, { emit }) { const formRef = ref(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); diff --git a/src/components/AnForm/components/useModalSubmit.tsx b/src/components/AnForm/components/useModalSubmit.tsx index 6a282f1..7933c7d 100644 --- a/src/components/AnForm/components/useModalSubmit.tsx +++ b/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) { +export function useModalSubmit(props: any, formRef: any, visible: Ref, emit?: any, model?: Ref) { 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) 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 { diff --git a/src/components/AnForm/components/useModalTrigger.tsx b/src/components/AnForm/components/useModalTrigger.tsx index bba98cf..b307cca 100644 --- a/src/components/AnForm/components/useModalTrigger.tsx +++ b/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 ; } 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) { ); }; - return { modalTrigger }; + return modalTrigger; } diff --git a/src/components/AnForm/hooks/useFormModal.tsx b/src/components/AnForm/hooks/useFormModal.tsx index 2625715..3c0d6f8 100644 --- a/src/components/AnForm/hooks/useFormModal.tsx +++ b/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)} > ); diff --git a/src/components/AnTable/components/Table.tsx b/src/components/AnTable/components/Table.tsx index acb208e..5e847ea 100644 --- a/src/components/AnTable/components/Table.tsx +++ b/src/components/AnTable/components/Table.tsx @@ -195,8 +195,10 @@ export const AnTable = defineComponent({ return (
- {this.create && } - {this.modify && } + {this.create && } + {this.modify && ( + + )} {this.$slots.action?.(this.renderData)} {this.pluginer?.actions && (