diff --git a/src/views/system/user/userInfo/index.vue b/src/views/system/user/userInfo/index.vue index 5baa0d2..85ef1db 100644 --- a/src/views/system/user/userInfo/index.vue +++ b/src/views/system/user/userInfo/index.vue @@ -76,7 +76,7 @@ :active-tab-key="state.currentCardKey" @tabChange="key => state.currentCardKey = key" > -

修改基本信息待开发中。。。

+

上传头像待开发中。。。

@@ -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({ - 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', diff --git a/src/views/system/user/userInfo/userInfo.data.ts b/src/views/system/user/userInfo/userInfo.data.ts new file mode 100644 index 0000000..bc9dbbc --- /dev/null +++ b/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 + } + } +];