refactor: 使用useVbenForm重构个人中心-基本设置

apps/web-antd/src/views/_core/profile/components/base-setting.vue

@@ -1,12 +1,16 @@
 <script setup lang="ts">
+import type { Recordable } from '@vben/types';
+
 import type { UserProfile } from '#/api/system/profile/model';
 
-import { ref } from 'vue';
+import { onMounted } from 'vue';
 
+import { DictEnum } from '@vben/constants';
 import { useUserStore } from '@vben/stores';
 
-import { Form, FormItem, Input, RadioGroup } from 'ant-design-vue';
+import { pick } from 'lodash-es';
 
+import { useVbenForm, z } from '#/adapter';
 import { userProfileUpdate } from '#/api/system/profile';
 import { useAuthStore } from '#/store';
 import { getDictOptions } from '#/utils/dict';
@@ -15,27 +19,85 @@ const props = defineProps<{ profile: UserProfile }>();
 
 const emit = defineEmits<{ reload: [] }>();
 
-/**
- * 要重构
- */
-const form = ref({
-  email: props.profile.user.email,
-  nickName: props.profile.user.nickName,
-  phonenumber: props.profile.user.phonenumber,
-  sex: props.profile.user.sex,
-  userId: props.profile.user.userId,
-});
-
-const sexOptions = getDictOptions('sys_user_sex');
-
 const userStore = useUserStore();
 const authStore = useAuthStore();
 
-const loading = ref(false);
+const [BasicForm, formApi] = useVbenForm({
-async function handleSubmit() {
+  actionWrapperClass: 'text-left ml-[24px]',
+  commonConfig: {
+    labelWidth: 60,
+  },
+  handleSubmit,
+  resetButtonOptions: {
+    show: false,
+  },
+  schema: [
+    {
+      component: 'Input',
+      dependencies: {
+        show: () => false,
+        triggerFields: [''],
+      },
+      fieldName: 'userId',
+      label: '用户ID',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入',
+      },
+      fieldName: 'nickName',
+      label: '昵称',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入',
+      },
+      fieldName: 'email',
+      label: '邮箱',
+      rules: z.string().email('请输入正确的邮箱'),
+    },
+    {
+      component: 'RadioGroup',
+      componentProps: {
+        buttonStyle: 'solid',
+        options: getDictOptions(DictEnum.SYS_USER_SEX),
+        optionType: 'button',
+      },
+      defaultValue: '0',
+      fieldName: 'sex',
+      label: '性别',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入',
+      },
+      fieldName: 'phonenumber',
+      label: '电话',
+      rules: z.string().regex(/^1[3-9]\d{9}$/, '请输入正确的电话'),
+    },
+  ],
+  submitButtonOptions: {
+    text: '更新信息',
+  },
+});
+
+function buttonLoading(loading: boolean) {
+  formApi.setState((prev) => ({
+    ...prev,
+    submitButtonOptions: { ...prev.submitButtonOptions, loading },
+  }));
+}
+
+async function handleSubmit(values: Recordable<any>) {
   try {
-    loading.value = true;
+    buttonLoading(true);
-    await userProfileUpdate(form.value);
+    await userProfileUpdate(values);
     // 更新store
     const userInfo = await authStore.fetchUserInfo();
     userStore.setUserInfo(userInfo);
@@ -44,61 +106,26 @@ async function handleSubmit() {
   } catch (error) {
     console.error(error);
   } finally {
-    loading.value = false;
+    buttonLoading(false);
   }
 }
+
+onMounted(() => {
+  const data = pick(props.profile.user, [
+    'userId',
+    'nickName',
+    'email',
+    'phonenumber',
+    'sex',
+  ]);
+  for (const key in data) {
+    formApi.setFieldValue(key, data[key as keyof typeof data]);
+  }
+});
 </script>
 
 <template>
   <div class="mt-[16px] md:w-full lg:w-1/2 2xl:w-2/5">
-    <Form :label-col="{ span: 4 }" :model="form" @finish="handleSubmit">
+    <BasicForm />
-      <FormItem
-        :rules="[{ required: true, message: '请输入昵称' }]"
-        label="昵称"
-        name="nickName"
-      >
-        <Input v-model:value="form.nickName" placeholder="请输入" />
-      </FormItem>
-      <FormItem
-        :rules="[
-          {
-            required: true,
-            message: '请输入正确的邮箱',
-            pattern:
-              /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
-          },
-        ]"
-        label="邮箱"
-        name="email"
-      >
-        <Input v-model:value="form.email" placeholder="请输入" />
-      </FormItem>
-      <FormItem label="性别" name="sex">
-        <RadioGroup
-          v-model:value="form.sex"
-          :options="sexOptions"
-          button-style="solid"
-          option-type="button"
-        />
-      </FormItem>
-      <FormItem
-        :rules="[
-          {
-            required: true,
-            message: '请输入正确的电话',
-            pattern: /^1[3-9]\d{9}$/,
-          },
-        ]"
-        label="电话"
-        name="phonenumber"
-      >
-        <Input v-model:value="form.phonenumber" placeholder="请输入" />
-      </FormItem>
-      <FormItem :wrapper-col="{ span: 4, offset: 4 }">
-        <a-button :loading="loading" html-type="submit" type="primary">
-          更新信息
-        </a-button>
-      </FormItem>
-    </Form>
   </div>
 </template>