From bfdfeb40c7ba97511584a30477acf5ad801398ba Mon Sep 17 00:00:00 2001
From: YangYuGang <1378265336@qq.com>
Date: 星期二, 11 三月 2025 11:26:34 +0800
Subject: [PATCH] 一些更改
---
src/views/demo/form/TabsForm.vue | 186 +++++++++++++++++++++-------------------------
1 files changed, 86 insertions(+), 100 deletions(-)
diff --git a/src/views/demo/form/TabsForm.vue b/src/views/demo/form/TabsForm.vue
index 16152d4..878240b 100644
--- a/src/views/demo/form/TabsForm.vue
+++ b/src/views/demo/form/TabsForm.vue
@@ -19,118 +19,104 @@
</PageWrapper>
</template>
-<script lang="ts">
- import { ref, defineComponent } from 'vue';
+<script lang="ts" setup>
+ import { ref } from 'vue';
import { Tabs } from 'ant-design-vue';
- import { PageWrapper } from '/@/components/Page';
- import { CollapseContainer } from '/@/components/Container';
- import { useMessage } from '/@/hooks/web/useMessage';
+ import { PageWrapper } from '@/components/Page';
+ import { CollapseContainer } from '@/components/Container';
+ import { useMessage } from '@/hooks/web/useMessage';
import { omit } from 'lodash-es';
- import { deepMerge } from '/@/utils';
- import { BasicForm, FormSchema, useForm, FormProps, UseFormReturnType } from '/@/components/Form';
+ import { deepMerge } from '@/utils';
+ import { BasicForm, FormSchema, useForm, FormProps, UseFormReturnType } from '@/components/Form';
- export default defineComponent({
- name: 'TabsFormDemo',
- components: { Tabs, TabPane: Tabs.TabPane, PageWrapper, CollapseContainer, BasicForm },
- setup() {
- type TabsFormType = {
- key: string;
- tab: string;
- forceRender?: boolean;
- Form: UseFormReturnType;
- };
+ defineOptions({ name: 'TabsFormDemo' });
- const { createMessage } = useMessage();
- const activeKey = ref('tabs2');
- const loading = ref(false);
- const tabsFormSchema: TabsFormType[] = [];
+ const TabPane = Tabs.TabPane;
+ type TabsFormType = {
+ key: string;
+ tab: string;
+ forceRender?: boolean;
+ Form: UseFormReturnType;
+ };
- // 鍏叡灞炴��
- const baseFormConfig: Partial<FormProps> = {
- showActionButtonGroup: false,
- labelWidth: 100,
- };
+ const { createMessage } = useMessage();
+ const activeKey = ref('tabs2');
+ const loading = ref(false);
+ const tabsFormSchema: TabsFormType[] = [];
- // 涓烘瘡涓瓧娈垫ā鎷熼粯璁ゅ��, { tabs1: { field1: '', field2: '' }, tabs2: { field1: '' }, ... }
- const mockDefaultValue: Recordable = {};
+ // 鍏叡灞炴��
+ const baseFormConfig: Partial<FormProps> = {
+ showActionButtonGroup: false,
+ labelWidth: 100,
+ };
- // 妯℃嫙5涓爣绛鹃〉
- for (let i = 1; i <= 5; ++i) {
- const tabsKey = `tabs${i}`;
+ // 涓烘瘡涓瓧娈垫ā鎷熼粯璁ゅ��, { tabs1: { field1: '', field2: '' }, tabs2: { field1: '' }, ... }
+ const mockDefaultValue: Recordable = {};
- // 姣忎釜鏍囩椤�8涓瓧娈�
- const schemas: FormSchema[] = [];
- const row: Recordable = {};
+ // 妯℃嫙5涓爣绛鹃〉
+ for (let i = 1; i <= 5; ++i) {
+ const tabsKey = `tabs${i}`;
- for (let j = 1; j <= 8; ++j) {
- schemas.push({
- field: `${tabsKey}.field${j}`,
- label: `${tabsKey}-field${j}`,
- component: 'Input',
- colProps: { span: 24 },
- });
- row[`field${j}`] = `field: ${tabsKey}.field${j}, default value`;
- }
+ // 姣忎釜鏍囩椤�8涓瓧娈�
+ const schemas: FormSchema[] = [];
+ const row: Recordable = {};
- mockDefaultValue[tabsKey] = row;
+ for (let j = 1; j <= 8; ++j) {
+ schemas.push({
+ field: `${tabsKey}.field${j}`,
+ label: `${tabsKey}-field${j}`,
+ component: 'Input',
+ colProps: { span: 24 },
+ });
+ row[`field${j}`] = `field: ${tabsKey}.field${j}, default value`;
+ }
- tabsFormSchema.push({
- key: tabsKey,
- tab: tabsKey,
- forceRender: true,
- Form: useForm(Object.assign({ schemas }, baseFormConfig) as FormProps),
- });
+ mockDefaultValue[tabsKey] = row;
+
+ tabsFormSchema.push({
+ key: tabsKey,
+ tab: tabsKey,
+ forceRender: true,
+ Form: useForm(Object.assign({ schemas }, baseFormConfig) as FormProps),
+ });
+ }
+
+ async function handleReset() {
+ for (const item of tabsFormSchema) {
+ const { resetFields } = item.Form[1];
+ await resetFields();
+ }
+ }
+
+ async function handleSubmit() {
+ let lastKey = '';
+ loading.value = true;
+ try {
+ const values: Recordable = {};
+ for (const item of tabsFormSchema) {
+ lastKey = item.key;
+ const { validate, getFieldsValue } = item.Form[1];
+ await validate();
+ // 琛ㄥ崟宸叉敮鎸佸绾ey
+ deepMerge(values, getFieldsValue());
}
- async function handleReset() {
- for (const item of tabsFormSchema) {
- const { resetFields } = item.Form[1];
- await resetFields();
- }
- }
+ console.log('submit values: ', values);
+ createMessage.success('鎻愪氦鎴愬姛锛佽鎵撳紑鎺у埗鍙版煡鐪�');
+ } catch (e) {
+ // 楠岃瘉澶辫触鎴栧嚭閿欙紝鍒囨崲鍒板搴旀爣绛鹃〉
+ activeKey.value = lastKey;
+ console.log(e);
+ } finally {
+ loading.value = false;
+ }
+ }
- async function handleSubmit() {
- let lastKey = '';
- loading.value = true;
- try {
- const values: Recordable = {};
- for (const item of tabsFormSchema) {
- lastKey = item.key;
- const { validate, getFieldsValue } = item.Form[1];
- await validate();
- // 琛ㄥ崟宸叉敮鎸佸绾ey
- deepMerge(values, getFieldsValue());
- }
-
- console.log('submit values: ', values);
- createMessage.success('鎻愪氦鎴愬姛锛佽鎵撳紑鎺у埗鍙版煡鐪�');
- } catch (e) {
- // 楠岃瘉澶辫触鎴栧嚭閿欙紝鍒囨崲鍒板搴旀爣绛鹃〉
- activeKey.value = lastKey;
- console.log(e);
- } finally {
- loading.value = false;
- }
- }
-
- async function handleSetValues() {
- console.log('榛樿鍊间负: ', mockDefaultValue);
- for (const item of tabsFormSchema) {
- const { setFieldsValue } = item.Form[1];
- await setFieldsValue(mockDefaultValue);
- }
- }
- return {
- omit,
- loading,
- activeKey,
- tabsFormSchema,
- handleReset,
- handleSubmit,
- handleSetValues,
- };
- },
- });
+ async function handleSetValues() {
+ console.log('榛樿鍊间负: ', mockDefaultValue);
+ for (const item of tabsFormSchema) {
+ const { setFieldsValue } = item.Form[1];
+ await setFieldsValue(mockDefaultValue);
+ }
+ }
</script>
-
-<style scoped></style>
--
Gitblit v1.9.3