🚀 对接后台接口

src/views/system/user/userInfo/index.vue

@@ -76,7 +76,7 @@
                :active-tab-key="state.currentCardKey"
                @tabChange="key => state.currentCardKey = key"
         >
-          <p v-if="state.currentCardKey === 'baseInfo'">修改基本信息待开发中。。。</p>
+          <BasicForm v-if="state.currentCardKey === 'baseInfo'" @register="registerForm"/>
           <p v-if="state.currentCardKey === 'uploadAvatar'">上传头像待开发中。。。</p>
         </ACard>
       </ACard>
@@ -89,11 +89,20 @@
   import { PageWrapper } from '/@/components/Page';
   import { UserOutlined, CreditCardOutlined } from '@ant-design/icons-vue';
   import type { CSSProperties } from 'vue';
-  import {computed, reactive} from 'vue';
+  import { computed, reactive } from 'vue';
   import { Icon } from '/@/components/Icon';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { userFormSchema } from './userInfo.data';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { editUser, getUser } from '/@/api/platform/system/controller/user';
+  import type { User } from '/@/api/platform/core/entity/user';
+  import { useUserStore } from '/@/store/modules/user';
+  const userStore = useUserStore();
 
   interface InfoState {
     currentCardKey: string;
+    baseInfoBtnLoading: boolean;
+    userInfo: User | undefined;
   }
 
   const ACard = Card;
@@ -101,10 +110,47 @@
   const ADescriptions = Descriptions;
   const ADescriptionsItem = Descriptions.Item;
   const ADivider = Divider;
-
+  const { createMessage } = useMessage();
+  const userInfo = userStore.getUserInfo;
   const state = reactive<InfoState>({
-    currentCardKey: 'baseInfo'
+    currentCardKey: 'baseInfo',
+    baseInfoBtnLoading: false,
+    userInfo: undefined
+  });
+
+  const [registerForm, { resetFields, setFieldsValue, updateSchema, validate, clearValidate }] = useForm({
+    labelWidth: 100,
+    schemas: userFormSchema,
+    showSubmitButton: true,
+    showResetButton: false,
+    showAdvancedButton: false,
+    submitButtonOptions: {
+      text: '保存',
+      preIcon: '',
+      loading: state.baseInfoBtnLoading,
+      onClick: handleSubmit
+    },
+    actionColOptions: { span: 24 }
   });
+  getUser(userInfo.id).then(result => {
+    state.userInfo = result.result;
+    setFieldsValue(result.result);
+  });
+
+  async function handleSubmit() {
+    try {
+      const formData = await validate();
+      state.baseInfoBtnLoading = true;
+      editUser(formData).then(async () => {
+        createMessage.success('保存成功!');
+        const result = await getUser(userInfo.id);
+        state.userInfo = result.result;
+        await setFieldsValue(result.result);
+      });
+    } finally {
+      state.baseInfoBtnLoading = false;
+    }
+  }
 
   const getLabelStyle = computed((): CSSProperties => ({
     fontSize: '14px',

src/views/system/user/userInfo/userInfo.data.ts

@@ -0,0 +1,96 @@
+import { FormSchema } from '/@/components/Table';
+
+export const userFormSchema: FormSchema[] = [
+  {
+    field: 'id',
+    label: 'ID',
+    component: 'Input',
+    show: false
+  },
+  {
+    field: 'nickName',
+    label: '用户昵称',
+    component: 'Input',
+    required: true,
+    colProps: {
+      span: 12
+    }
+  },
+  {
+    field: 'deptName',
+    label: '归属机构',
+    component: 'Input',
+    required: true,
+    componentProps: {
+      disabled: true
+    },
+    colProps: {
+      span: 12
+    }
+  },
+  {
+    field: 'phone',
+    label: '手机号',
+    component: 'Input',
+    rules: [
+      {
+        required: true,
+        message: '请输入手机号！',
+      },
+      {
+        pattern: new RegExp('^1[3|4|5|6|7|8|9][0-9]\\d{8}$'),
+        message: '请输入正确的手机号码!',
+        validateTrigger: 'blur'
+      }
+    ],
+    colProps: {
+      span: 12
+    }
+  },
+  {
+    field: 'email',
+    label: '邮箱',
+    component: 'Input',
+    rules: [
+      {
+        required: true,
+        message: '请输入邮箱！',
+      },
+      {
+        type: 'email',
+        message: '请输入正确的邮箱地址!',
+        validateTrigger: ['blur', 'change']
+      }
+    ],
+    colProps: {
+      span: 12
+    }
+  },
+  {
+    field: 'sex',
+    label: '性别',
+    component: 'RadioGroup',
+    defaultValue: '0',
+    required: true,
+    componentProps: {
+      options: [
+        { label: '男', value: '0' },
+        { label: '女', value: '1' }
+      ]
+    },
+    colProps: {
+      span: 12
+    }
+  },
+  {
+    label: '备注',
+    field: 'remarks',
+    component: 'InputTextArea',
+    componentProps: {
+      rows: 6
+    },
+    colProps: {
+      span: 24
+    }
+  }
+];