个人设置

src/views/setting/profile/BasicSetting.vue

@@ -1,82 +1,110 @@
 <template>
-  <el-row :gutter="20">
-    <el-col :xs="24" :sm="20" :md="14" :lg="12" :xl="8">
       <el-form
-        :label-width="80"
+        label-width="84px"
-        :model="formValue"
+        :model="formData"
-        :rules="rules"
-        label-position="top"
         ref="formRef"
       >
-        <el-form-item label="昵称" prop="name">
+      <div class="flex">
-          <el-input v-model="formValue.name" placeholder="请输入昵称" />
+      <el-form-item label="名称" prop="realname" class="flex-1"
+          :rules="{ required: true, message: '请输入名称', trigger: 'blur' }">
+          <el-input v-model="formData.realname" placeholder="请输入名称" clearable />
         </el-form-item>
 
-        <el-form-item label="邮箱" prop="email">
+        <el-form-item label="性别" prop="sex" class="flex-1">
-          <el-input placeholder="请输入备案编号" v-model="formValue.email" />
+          <el-radio-group v-model="formData.gender" name="gender">
+            <el-radio :value="1">男</el-radio>
+            <el-radio :value="2">女</el-radio>
+            <el-radio :value="3">保密</el-radio>
+          </el-radio-group>
         </el-form-item>
-
+      </div>
-        <el-form-item label="联系电话" prop="mobile">
+      <div class="flex">
-          <el-input placeholder="请输入联系电话" v-model="formValue.mobile" />
+        <el-form-item label="手机号码" prop="mobile" class="flex-1"
+          :rules="[{ required: true, message: '请输入手机号码', trigger: 'blur' },{ validator: rule.validatePhone, trigger: 'blur' },]">
+          <el-input v-model="formData.mobile" placeholder="请输入手机号码" clearable />
         </el-form-item>
-
+        <el-form-item label="邮箱地址" prop="email" class="flex-1"
-        <el-form-item label="联系地址" prop="address">
+          :rules="[{ required: true, message: '请输入邮箱地址', trigger: 'blur' },{ type: 'email', message: '请输入正确邮箱地址', trigger: 'blur'}]">
-          <el-input v-model="formValue.address" type="textarea" placeholder="请输入联系地址" />
+          <el-input v-model="formData.email" placeholder="请输入邮箱地址" clearable />
         </el-form-item>
-
+      </div>
+      <div class="flex">
+        <el-form-item label="所属区域" class="flex-1" prop="city" :rules="{ required: true, message: '请选择所属区域', trigger: 'change' }">
+          <chinaArea style="width: 100%" :type="4" v-model="formData.city"></chinaArea>
+        </el-form-item>
+        <el-form-item label="详细地址" class="flex-1" prop="address" :rules="{ required: true, message: '请输入详细地址', trigger: 'blur' }">
+          <el-input v-model="formData.address" placeholder="请输入详细地址" clearable />
+        </el-form-item>
+      </div>
+      <div class="flex">
+        <el-form-item label="简介" prop="intro" class="flex-1">
+          <el-input v-model="formData.intro" type="textarea" placeholder="请输入简介" clearable />
+        </el-form-item>
+        <el-form-item label="备注" prop="note" class="flex-1">
+          <el-input v-model="formData.note" type="textarea" placeholder="请输入备注" clearable />
+        </el-form-item>
+      </div>
+        <el-form-item label="头像" prop="avatar" :rules="{ required: true, message: '请输上传头像', trigger: 'blur' }">
+              <UploadImg @changeFileName="(name)=>formData.avatarName=name"
+                       :fileType=" ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']"
+                       name="user"
+                       :fileSize="200"
+                       v-model:image-url="formData.avatar">
+              <template v-slot:tip>支持扩展名: jpg png jpeg;文件大小不超过200M</template>
+            </UploadImg>
+            </el-form-item>
         <el-form-item>
           <el-space>
-            <el-button type="primary" @click="formSubmit(formRef)">更新基本信息</el-button>
+            <el-button :loading="subLoading" type="primary" @click="submit">更新基本信息</el-button>
           </el-space>
         </el-form-item>
       </el-form>
-    </el-col>
+
-  </el-row>
 </template>
 
 <script lang="ts" setup>
-  import { reactive, ref } from 'vue';
+  import { reactive, ref,onMounted } from 'vue';
-  import { ElMessage } from 'element-plus';
   import type { ElForm } from 'element-plus';
+  import { rule } from '@/utils/validate';
+  import chinaArea from '@/components/ChinaArea/index.vue';
+  import UploadImg from '@/components/Upload/Image.vue';
+  import {message} from "@/utils/auth";
+  import { useLockFn } from "@/utils/useLockFn";
+  import { getUserInfo } from '@/api/system/user';
+  import { updateProfile } from '@/api/setting/profile';
 
   type FormInstance = InstanceType<typeof ElForm>;
 
   const formRef = ref<FormInstance>();
 
-  const rules = {
+  const formData = reactive({
-    name: {
+    realname: '',
-      required: true,
+    gender: '',
-      message: '请输入昵称',
+    avatar: '',
-      trigger: 'blur',
-    },
-    email: {
-      required: true,
-      message: '请输入邮箱',
-      trigger: 'blur',
-    },
-    mobile: {
-      required: true,
-      message: '请输入联系电话',
-      trigger: 'input',
-    },
-  };
-
-  const formValue = reactive({
-    name: '',
     mobile: '',
     email: '',
+    city:'',
     address: '',
+    intro: '',
+    note: '',
+    avatarName:''
   });
 
-  function formSubmit(formEl: FormInstance | undefined) {
+  const handleSubmit = async () => {
-    if (!formEl) return;
+    await formRef.value?.validate();
-    formEl.validate((valid) => {
+    await updateProfile(formData)
-      if (valid) {
+    message("更新成功");
-        console.log('submit!');
+  };
-        ElMessage.success('验证成功');
+  const { isLock: subLoading, lockFn: submit } = useLockFn(handleSubmit);
-      } else {
+  const setUserInfo = async () => {
-        ElMessage.error('验证失败，请填写完整信息');
+  const data = await getUserInfo();
-      }
+  for (const key in formData) {
-    });
+    if (data[key] != null && data[key] != undefined) {
+      formData[key] = data[key];
+    }
   }
+};
+  onMounted(() => {
+    setUserInfo()
+  });
 </script>

src/views/setting/profile/index.vue

@@ -5,7 +5,7 @@
         <el-tab-pane name="basic" label="基本设置">
           <BasicSetting />
         </el-tab-pane>
-        <el-tab-pane name="safety" label="安全设置"><SafetySetting /></el-tab-pane>
+        <!-- <el-tab-pane name="safety" label="安全设置"><SafetySetting /></el-tab-pane> -->
       </el-tabs>
     </el-card>
   </PageWrapper>

src/views/system/user/edit.vue

@@ -97,8 +97,6 @@
         </el-form-item>
       </div>
       <el-form-item label="头像" prop="avatar" :rules="{ required: true, message: '请输上传头像', trigger: 'blur' }">
-        <!-- <BasicUpload :action="`${uploadUrl}/api/upload/uploadFile`" :list="formData.avatar?[{name:formData.avatarName,url:formData.avatar}]:[]" :headers="uploadHeaders"
-          :data="{ name: 'user' }" :limit="1" @upload-change="uploadChange" @delete="handleDelete"/> -->
               <UploadImg @changeFileName="(name)=>formData.avatarName=name"
                        :fileType=" ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']"
                        name="user"
@@ -106,7 +104,7 @@
                        v-model:image-url="formData.avatar">
               <template v-slot:tip>支持扩展名: jpg png jpeg;文件大小不超过200M</template>
             </UploadImg>
-            </el-form-item>
+        </el-form-item>
     </el-form>
     <template #footer>
       <span class="dialog-footer">
@@ -121,7 +119,6 @@
 
 <script lang="ts" setup>
 import { getUserDetail, userAdd, userUpdate } from '@/api/system/user';
-import { BasicUpload } from '@/components/Upload';
 import UploadImg from '@/components/Upload/Image.vue';
 import chinaArea from '@/components/ChinaArea/index.vue';
 import {  onMounted, reactive, shallowRef } from "vue";
@@ -137,7 +134,6 @@ import { useLockFn } from "@/utils/useLockFn";
 import { useGlobSetting } from '@/hooks/setting';
 import { useUserStore } from '@/store/modules/user';
 const globSetting = useGlobSetting();
-const { uploadUrl } = globSetting;
 const props = defineProps({
   visible: {
     type: Boolean,