From 9a78ac977eb0cfb3bd6c2a9b96e69d9f010017f4 Mon Sep 17 00:00:00 2001 From: kailong321200875 <321200875@qq.com> Date: Mon, 26 Jun 2023 13:46:59 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E9=87=8D=E6=9E=84Dialog=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E7=A4=BA=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Dialog/src/Dialog.vue | 2 +- .../Form/src/components/useRenderCheckbox.tsx | 2 +- .../Form/src/components/useRenderRadio.tsx | 2 +- .../Form/src/components/useRenderSelect.tsx | 4 +- src/views/Components/Dialog.vue | 65 +++++++------------ 5 files changed, 29 insertions(+), 46 deletions(-) diff --git a/src/components/Dialog/src/Dialog.vue b/src/components/Dialog/src/Dialog.vue index ec340c6..732f958 100644 --- a/src/components/Dialog/src/Dialog.vue +++ b/src/components/Dialog/src/Dialog.vue @@ -118,7 +118,7 @@ const dialogStyle = computed(() => { height: 54px; } &__body { - padding: 0 !important; + padding: 15px !important; } &__footer { border-top: 1px solid var(--el-border-color); diff --git a/src/components/Form/src/components/useRenderCheckbox.tsx b/src/components/Form/src/components/useRenderCheckbox.tsx index adbc0a7..173e5c3 100644 --- a/src/components/Form/src/components/useRenderCheckbox.tsx +++ b/src/components/Form/src/components/useRenderCheckbox.tsx @@ -5,7 +5,7 @@ import { defineComponent } from 'vue' export const useRenderCheckbox = () => { const renderCheckboxOptions = (item: FormSchema) => { // 如果有别名，就取别名 - const componentProps = item.componentProps as CheckboxGroupComponentProps + const componentProps = item?.componentProps as CheckboxGroupComponentProps const valueAlias = componentProps?.props?.value || 'value' const labelAlias = componentProps?.props?.label || 'label' const disabledAlias = componentProps?.props?.disabled || 'disabled' diff --git a/src/components/Form/src/components/useRenderRadio.tsx b/src/components/Form/src/components/useRenderRadio.tsx index 67879f5..e198f1f 100644 --- a/src/components/Form/src/components/useRenderRadio.tsx +++ b/src/components/Form/src/components/useRenderRadio.tsx @@ -5,7 +5,7 @@ import { defineComponent } from 'vue' export const useRenderRadio = () => { const renderRadioOptions = (item: FormSchema) => { // 如果有别名，就取别名 - const componentProps = item.componentProps as RadioGroupComponentProps + const componentProps = item?.componentProps as RadioGroupComponentProps const valueAlias = componentProps?.props?.value || 'value' const labelAlias = componentProps?.props?.label || 'label' const disabledAlias = componentProps?.props?.disabled || 'disabled' diff --git a/src/components/Form/src/components/useRenderSelect.tsx b/src/components/Form/src/components/useRenderSelect.tsx index 63a0dc7..46389af 100644 --- a/src/components/Form/src/components/useRenderSelect.tsx +++ b/src/components/Form/src/components/useRenderSelect.tsx @@ -4,8 +4,8 @@ import { FormSchema, SelectComponentProps, SelectOption } from '../types' export const useRenderSelect = () => { // 渲染 select options const renderSelectOptions = (item: FormSchema) => { - const componentsProps = item.componentProps as SelectComponentProps - const optionGroupDefaultSlot = componentsProps.slots?.optionGroupDefault + const componentsProps = item?.componentProps as SelectComponentProps + const optionGroupDefaultSlot = componentsProps?.slots?.optionGroupDefault // 如果有别名，就取别名 const labelAlias = componentsProps?.props?.label const keyAlias = componentsProps?.props?.key diff --git a/src/views/Components/Dialog.vue b/src/views/Components/Dialog.vue index 1aa0568..41fdddc 100644 --- a/src/views/Components/Dialog.vue +++ b/src/views/Components/Dialog.vue @@ -3,11 +3,11 @@ import { ContentWrap } from '@/components/ContentWrap' import { Dialog } from '@/components/Dialog' import { ElButton } from 'element-plus' import { useI18n } from '@/hooks/web/useI18n' -import { ref, reactive, unref } from 'vue' -import { Form, FormExpose } from '@/components/Form' +import { ref, reactive } from 'vue' +import { Form, FormSchema } from '@/components/Form' import { useValidator } from '@/hooks/web/useValidator' import { getDictOneApi } from '@/api/common' -import { FormSchema } from '@/types/form' +import { useForm } from '@/hooks/web/useForm' const { required } = useValidator() @@ -17,6 +17,9 @@ const dialogVisible = ref(false) const dialogVisible2 = ref(false) +const { formRegister, formMethods } = useForm() +const { getElFormExpose } = formMethods + const schema = reactive([ { field: 'field1', @@ -30,23 +33,18 @@ const schema = reactive([ field: 'field2', label: t('formDemo.select'), component: 'Select', - componentProps: { - options: [ - { - label: 'option1', - value: '1' - }, - { - label: 'option2', - value: '2' - } - ] + // componentProps: { + // options: [] + // }, + optionApi: async () => { + const res = await getDictOneApi() + return res.data } }, { field: 'field3', label: t('formDemo.radio'), - component: 'Radio', + component: 'RadioGroup', componentProps: { options: [ { @@ -63,7 +61,7 @@ const schema = reactive([ { field: 'field4', label: t('formDemo.checkbox'), - component: 'Checkbox', + component: 'CheckboxGroup', value: [], componentProps: { options: [ @@ -74,10 +72,6 @@ const schema = reactive([ { label: 'option-2', value: '2' - }, - { - label: 'option-3', - value: '3' } ] } @@ -97,26 +91,15 @@ const schema = reactive([ } ]) -const getDictOne = async () => { - const res = await getDictOneApi() - if (res) { - schema[1].componentProps!.options = res.data - } -} -getDictOne() - -const formRef = ref() - -const formSubmit = () => { - unref(formRef) - ?.getElFormRef() - ?.validate((valid) => { - if (valid) { - console.log('submit success') - } else { - console.log('submit fail') - } - }) +const formSubmit = async () => { + const elFormExpose = await getElFormExpose() + elFormExpose?.validate((valid) => { + if (valid) { + console.log('submit success') + } else { + console.log('submit fail') + } + }) } @@ -138,7 +121,7 @@ const formSubmit = () => { -
+