From 0a1af829b67da0f273fc7762519ab9b58cb5477a Mon Sep 17 00:00:00 2001
From: ccongli <1441652193@qq.com>
Date: Mon, 16 Oct 2023 11:13:58 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=A8=E6=88=B7=E4=B8=AA=E4=BA=BA=E4=B8=AD?=
 =?UTF-8?q?=E5=BF=83=E5=8A=9F=E8=83=BD=E5=BC=80=E5=8F=91v2=20-=20=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E5=AF=86=E7=A0=81=E9=9D=99=E6=80=81=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/Profile/Index.vue               | 282 +-----------------
 .../views/Profile/components/BasicInfo.vue    |  92 ------
 .../src/views/Profile/components/ResetPwd.vue | 125 ++++++--
 .../src/views/Profile/components/index.ts     |   4 +-
 4 files changed, 114 insertions(+), 389 deletions(-)
 delete mode 100644 yunxi-ui-admin-vue3/src/views/Profile/components/BasicInfo.vue

diff --git a/yunxi-ui-admin-vue3/src/views/Profile/Index.vue b/yunxi-ui-admin-vue3/src/views/Profile/Index.vue
index f2ebb22c..1c39f581 100644
--- a/yunxi-ui-admin-vue3/src/views/Profile/Index.vue
+++ b/yunxi-ui-admin-vue3/src/views/Profile/Index.vue
@@ -2,158 +2,11 @@
   <div class="container profile">
     <el-tabs tab-position="left" class="tabs">
       <el-tab-pane :label="t('profile.tabs.BaseInfo')">
-        <div class="content">
-          <div class="subject">
-            <div class="lc"></div>
-            <div class="lh">基本资料</div>
-          </div>
-          <div class="formarea">
-            <el-form :model="form" label-width="120px" size="large">
-              <div class="item">基础信息</div>
-              <el-row :gutter="20">
-                <el-col :span="15">
-                  <el-form-item label="登录账号">
-                    <el-input v-model="form.username" disabled />
-                  </el-form-item>
-                  <el-form-item label="昵称">
-                    <el-input v-model="form.nickname" placeholder="取个昵称吧" />
-                  </el-form-item>
-                  <el-form-item label="所属部门">
-                    <el-input v-model="form.dept_id" readonly />
-                  </el-form-item>
-                  <el-form-item label="员工职务">
-                    <el-input v-model="form.post_id" readonly />
-                  </el-form-item>
-                  <el-form-item label="员工工号">
-                    <el-input v-model="form.job_number" readonly />
-                  </el-form-item>
-                  <el-form-item label="手机号码">
-                    <el-col :span="18" style="padding:0 10px 0 0;">
-                      <el-input v-model="form.mobile" disabled />
-                    </el-col>
-                    <el-col :span="6" style="padding: 0">
-                      <el-button type="primary" plain @click="state.dialogVisible2 = true" style="width: 100%">更改</el-button>
-                    </el-col>
-                  </el-form-item>
-                  <el-form-item label="微信账号">
-                    <el-input v-model="form.wechat_account" disabled />
-                  </el-form-item>
-                  <el-form-item label="邮箱地址">
-                    <el-input v-model="form.email" />
-                  </el-form-item>
-                  <el-form-item label="出生日期">
-                    <el-date-picker v-model="form.birth_datetime" type="date" size="large" style="width: 100%" />
-                  </el-form-item>
-                  <el-form-item label="性别">
-                    <el-input v-model="form.sex" type="text" v-show="false" />
-                    <el-row class="sex-choose mb-4">
-                      <el-button :type="form.sex == 1 ? 'primary' : 'default'" round @click="form.sex = 1"
-                        style="width: 120px;">
-                        男<el-icon class="el-icon--right">
-                          <Male />
-                        </el-icon>
-                      </el-button>
-                      <el-button :type="form.sex == 2 ? 'primary' : 'default'" round @click="form.sex = 2"
-                        style="width: 120px;">
-                        女<el-icon class="el-icon--right">
-                          <Female />
-                        </el-icon>
-                      </el-button>
-                      <el-button :type="form.sex == 0 ? 'primary' : 'default'" round @click="form.sex = 0"
-                        style="width: 120px;">
-                        保密
-                      </el-button>
-                    </el-row>
-                  </el-form-item>
-                  <el-form-item label="头像" v-show="false">
-                    <el-input v-model="form.avatar" />
-                  </el-form-item>
-                </el-col>
-                <el-col :span="6">
-                  <div class="avatar">
-                    <el-avatar :size="120" :src="form.avatar" />
-                    <div style="margin-top: 5px;">
-                      <el-button @click="state.dialogVisible = true">修改头像</el-button>
-                    </div>
-                  </div>
-                </el-col>
-              </el-row>
-              <div class="item">更多信息</div>
-              <el-row :gutter="20">
-                <el-col :span="15">
-                  <el-form-item label="籍贯">
-                    <el-select v-model="form.native_place" clearable placeholder="籍贯" style="width: 100%">
-                      <el-option label="汉族" :value="1" />
-                      <el-option label="其他" :value="2" />
-                    </el-select>
-                  </el-form-item>
-                  <el-form-item label="简介">
-                    <el-input v-model="form.personal_profile" type="textarea" :rows="5" />
-                  </el-form-item>
-                </el-col>
-              </el-row>
-              <el-form-item>
-                <el-button type="primary" @click="onSubmit" style="width: 160px;">保存</el-button>
-              </el-form-item>
-            </el-form>
-          </div>
-
-          <el-dialog v-model="state.dialogVisible" title="修改头像" width="450px">
-            <div style="padding: 0 60px;">
-              <h3>上传图片文件</h3>
-              <div class="dialog-tips">图片尺寸需要大于100 * 100像素，支持jpg、png、jpeg等格式，大小不能超过2MB</div>
-              <div style="padding: 20px;">
-                <CropperAvatar ref="cropperRef" :btnProps="{ preIcon: 'ant-design:cloud-upload-outlined' }"
-                  :showBtn="false" :value="form.avatar" width="120px" @change="handleUpload" />
-              </div>
-            </div>
-            <!-- <template #footer>
-              <div class="dialog-options">
-                <el-button type="primary" @click="state.dialogVisible = false;">
-                  上传头像
-                </el-button>
-                <el-button @click="state.dialogVisible = false">重新上传</el-button>
-              </div>
-            </template> -->
-          </el-dialog>
-
-          <el-dialog v-model="state.dialogVisible2" title="修改手机号" width="600px">
-            <div style="padding: 20px 30px 50px 30px;">
-              <el-form :model="form2" label-width="100px" size="large">
-                <el-form-item label="原手机号码">
-                  <el-input v-model="form2.oldPhone" />
-                </el-form-item>
-                <el-form-item label="新手机号码">
-                  <el-input v-model="form2.newPhone" />
-                </el-form-item>
-                <el-form-item label="验证码">
-                  <el-col :span="18" style="padding-right: 10px;">
-                    <el-input v-model="form2.code" placeholder="输入验证码" />
-                  </el-col>
-                  <el-col :span="6">
-                    <template v-if="mobileCodeTimer <= 0">
-                      <el-button type="primary" @click="getSmsCode" style="width: 100%">
-                      {{ t('login.getSmsCode') }}
-                    </el-button>
-                    </template>  
-                    <template v-else>
-                      <el-button type="default" disabled style="width: 100%">{{ mobileCodeTimer }} 秒</el-button>
-                      </template>
-                  </el-col>
-                </el-form-item>
-              </el-form>
-            </div>
-            <template #footer>
-              <div class="dialog-options2">
-                <el-button type="primary" @click="state.dialogVisible2 = false;" style="width: 100px;">确认</el-button>
-                <el-button @click="state.dialogVisible2 = false" style="width: 100px;">取消</el-button>
-              </div>
-            </template>
-          </el-dialog>
-        </div>
-
+        <BaseInfo />
+      </el-tab-pane>
+      <el-tab-pane :label="t('profile.tabs.ChangePassword')">
+        <ResetPwd />
       </el-tab-pane>
-      <el-tab-pane :label="t('profile.tabs.ChangePassword')">修改密码</el-tab-pane>
       <el-tab-pane :label="t('profile.tabs.LoginRecord')">登录记录</el-tab-pane>
       <el-tab-pane :label="t('profile.tabs.SystemNotice')">系统通知</el-tab-pane>
       <el-tab-pane :label="t('profile.tabs.MessageSetting')">消息设置</el-tab-pane>
@@ -162,11 +15,10 @@
   </div>
 </template>
 <script setup lang="ts" name="Profile">
-import { Female, Male } from '@element-plus/icons-vue'
-import { uploadAvatar } from '@/api/system/user/profile'
-import { CropperAvatar } from '@/components/Cropper'
 
 // import { BasicInfo, ProfileUser, ResetPwd, UserSocial } from './components/'
+import { BaseInfo, ResetPwd } from './components/'
+
 const { t } = useI18n()
 
 const state = reactive({
@@ -175,55 +27,6 @@ const state = reactive({
   dialogVisible2: false,
 });
 
-const form = reactive({
-  username: 'kangning',
-  nickname: '康师傅红烧牛肉面',
-  sex: 1,
-  avatar: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
-  dept_id: '商品项目部',
-  post_id: '总经理',
-  job_number: 'CJYX202300001',
-  mobile: '13120939311',
-  email: 'koko@qq.com',
-  wechat_account: 'wxjgfkhkhuissbk35646',
-  birth_datetime: undefined,
-  native_place: 1,
-  personal_profile: '生而为人，工作很忙~'
-});
-
-const form2 = reactive({
-  oldPhone: "",
-  newPhone: "",
-  code: ""
-});
-
-const mobileCodeTimer = ref(0)
-const message = useMessage()
-const getSmsCode = async () => {
-  message.success(t('login.SmsSendMsg'))
-  // 设置倒计时
-  mobileCodeTimer.value = 60
-  let msgTimer = setInterval(() => {
-    mobileCodeTimer.value = mobileCodeTimer.value - 1
-    if (mobileCodeTimer.value <= 0) {
-      clearInterval(msgTimer)
-    }
-  }, 1000)
-}
-
-const cropperRef = ref()
-const handleUpload = async ({ data }) => {
-  // await uploadAvatar({ avatarFile: data })
-  console.log(data);
-  cropperRef.value.close()
-  state.dialogVisible = false
-}
-
-const onSubmit = () => {
-  console.log('submit!')
-}
-
-
 // const activeName = ref('basicInfo')
 </script>
 <style lang="scss" scoped>
@@ -266,79 +69,6 @@ const onSubmit = () => {
   }
 }
 
-.content {
-  width: 100%;
-  padding: 20px;
-  padding-left: 50px;
-  box-sizing: border-box;
-
-  ::v-deep {
-    .el-form-item {
-      margin-top: 18px;
-      margin-bottom: 0;
-    }
-
-    .el-dialog__body {
-      padding: 0;
-      text-align: center;
-    }
-
-    .el-dialog__footer {
-      text-align: center;
-    }
-  }
-
-
-  .subject {
-    height: 60px;
-    color: #666;
-    display: flex;
-    align-items: center;
-    line-height: 20px;
-
-    .lc {
-      width: 8px;
-      height: 20px;
-      background: #409eff;
-      margin-right: 10px;
-    }
-
-    .lh {
-      color: #666;
-      font-size: 20px;
-      font-weight: 700;
-    }
-  }
-
-  .formarea {
-    padding-left: 20px;
-
-    .item {
-      line-height: 50px;
-      height: 50px;
-    }
-
-    .avatar {
-      text-align: center;
-    }
-  }
-
-  .dialog-tips {
-    color: #666;
-    padding: 0 10px;
-  }
-
-  .dialog-options {
-
-    :deep(.el-button) {
-      display: block;
-      margin: 0 auto;
-      margin-top: 20px;
-      width: 160px;
-      height: 40px;
-    }
-  }
-}
 
 /* :deep(.el-card .el-card__header, .el-card .el-card__body) {
   padding: 15px !important;
diff --git a/yunxi-ui-admin-vue3/src/views/Profile/components/BasicInfo.vue b/yunxi-ui-admin-vue3/src/views/Profile/components/BasicInfo.vue
deleted file mode 100644
index e2189b15..00000000
--- a/yunxi-ui-admin-vue3/src/views/Profile/components/BasicInfo.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<template>
-  <Form ref="formRef" :labelWidth="200" :rules="rules" :schema="schema">
-    <template #sex="form">
-      <el-radio-group v-model="form['sex']">
-        <el-radio :label="1">{{ t('profile.user.man') }}</el-radio>
-        <el-radio :label="2">{{ t('profile.user.woman') }}</el-radio>
-      </el-radio-group>
-    </template>
-  </Form>
-  <div style="text-align: center">
-    <XButton :title="t('common.save')" type="primary" @click="submit()" />
-    <XButton :title="t('common.reset')" type="danger" @click="init()" />
-  </div>
-</template>
-<script lang="ts" setup>
-import type { FormRules } from 'element-plus'
-import { FormSchema } from '@/types/form'
-import type { FormExpose } from '@/components/Form'
-import {
-  getUserProfile,
-  updateUserProfile,
-  UserProfileUpdateReqVO
-} from '@/api/system/user/profile'
-
-defineOptions({ name: 'BasicInfo' })
-
-const { t } = useI18n()
-const message = useMessage() // 消息弹窗
-// 表单校验
-const rules = reactive<FormRules>({
-  nickname: [{ required: true, message: t('profile.rules.nickname'), trigger: 'blur' }],
-  email: [
-    { required: true, message: t('profile.rules.mail'), trigger: 'blur' },
-    {
-      type: 'email',
-      message: t('profile.rules.truemail'),
-      trigger: ['blur', 'change']
-    }
-  ],
-  mobile: [
-    { required: true, message: t('profile.rules.phone'), trigger: 'blur' },
-    {
-      pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
-      message: t('profile.rules.truephone'),
-      trigger: 'blur'
-    }
-  ]
-})
-const schema = reactive<FormSchema[]>([
-  {
-    field: 'nickname',
-    label: t('profile.user.nickname'),
-    component: 'Input'
-  },
-  {
-    field: 'mobile',
-    label: t('profile.user.mobile'),
-    component: 'Input'
-  },
-  {
-    field: 'email',
-    label: t('profile.user.email'),
-    component: 'Input'
-  },
-  {
-    field: 'sex',
-    label: t('profile.user.sex'),
-    component: 'InputNumber',
-    value: 0
-  }
-])
-const formRef = ref<FormExpose>() // 表单 Ref
-const submit = () => {
-  const elForm = unref(formRef)?.getElFormRef()
-  if (!elForm) return
-  elForm.validate(async (valid) => {
-    if (valid) {
-      const data = unref(formRef)?.formModel as UserProfileUpdateReqVO
-      await updateUserProfile(data)
-      message.success(t('common.updateSuccess'))
-      await init()
-    }
-  })
-}
-const init = async () => {
-  const res = await getUserProfile()
-  unref(formRef)?.setValues(res)
-}
-onMounted(async () => {
-  await init()
-})
-</script>
diff --git a/yunxi-ui-admin-vue3/src/views/Profile/components/ResetPwd.vue b/yunxi-ui-admin-vue3/src/views/Profile/components/ResetPwd.vue
index 477be91f..f53f92aa 100644
--- a/yunxi-ui-admin-vue3/src/views/Profile/components/ResetPwd.vue
+++ b/yunxi-ui-admin-vue3/src/views/Profile/components/ResetPwd.vue
@@ -1,19 +1,47 @@
 <template>
-  <el-form ref="formRef" :model="password" :rules="rules" :label-width="200">
-    <el-form-item :label="t('profile.password.oldPassword')" prop="oldPassword">
-      <InputPassword v-model="password.oldPassword" />
-    </el-form-item>
-    <el-form-item :label="t('profile.password.newPassword')" prop="newPassword">
-      <InputPassword v-model="password.newPassword" strength />
-    </el-form-item>
-    <el-form-item :label="t('profile.password.confirmPassword')" prop="confirmPassword">
-      <InputPassword v-model="password.confirmPassword" strength />
-    </el-form-item>
-    <el-form-item>
-      <XButton :title="t('common.save')" type="primary" @click="submit(formRef)" />
-      <XButton :title="t('common.reset')" type="danger" @click="reset(formRef)" />
-    </el-form-item>
-  </el-form>
+  <div class="container resetpwd">
+    <div class="subject">
+      <div class="lc"></div>
+      <div class="lh">修改密码</div>
+    </div>
+    <div class="formarea">
+      <el-form ref="formRef" :model="password" :rules="rules" label-width="120px" size="large">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="验证码" prop="code">
+              <el-col :span="18" style="padding: 0 10px 0 0;">
+                <el-input v-model="password.code" placeholder="输入验证码" />
+              </el-col>
+              <el-col :span="6">
+                <template v-if="mobileCodeTimer <= 0">
+                  <el-button type="primary" @click="getSmsCode" style="width: 100%">
+                    {{ t('login.getSmsCode') }}
+                  </el-button>
+                </template>
+                <template v-else>
+                  <el-button type="default" disabled style="width: 100%">{{ mobileCodeTimer }} 秒</el-button>
+                </template>
+              </el-col>
+            </el-form-item>
+            <el-form-item :label="t('profile.password.oldPassword')" prop="oldPassword">
+              <InputPassword v-model="password.oldPassword" style="width: 100%;" />
+            </el-form-item>
+            <el-form-item :label="t('profile.password.newPassword')" prop="newPassword">
+              <InputPassword v-model="password.newPassword" style="width: 100%;" strength />
+            </el-form-item>
+            <el-form-item :label="t('profile.password.confirmPassword')" prop="confirmPassword">
+              <InputPassword v-model="password.confirmPassword" style="width: 100%;" strength />
+            </el-form-item>
+            <el-form-item>
+              <XButton :title="t('common.save')" type="primary" @click="submit(formRef)" style="width: 160px;" />
+              <XButton :title="t('common.reset')" type="danger" @click="reset(formRef)" style="width: 160px;" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+
+  </div>
 </template>
 <script lang="ts" setup>
 import type { FormInstance, FormRules } from 'element-plus'
@@ -27,6 +55,7 @@ const { t } = useI18n()
 const message = useMessage()
 const formRef = ref<FormInstance>()
 const password = reactive({
+  code: '',
   oldPassword: '',
   newPassword: '',
   confirmPassword: ''
@@ -42,6 +71,10 @@ const equalToPassword = (_rule, value, callback) => {
 }
 
 const rules = reactive<FormRules>({
+  code: [
+    { required: true, message: '请输入手机验证码', trigger: 'blur'},
+    { len: 4, message: '验证码长度为4位', trigger: 'blur' }
+  ],
   oldPassword: [
     { required: true, message: t('profile.password.oldPwdMsg'), trigger: 'blur' },
     { min: 6, max: 20, message: t('profile.password.pwdRules'), trigger: 'blur' }
@@ -56,13 +89,29 @@ const rules = reactive<FormRules>({
   ]
 })
 
+// 手机验证功能
+const mobileCodeTimer = ref(0)
+const getSmsCode = async () => {
+  message.success(t('login.SmsSendMsg'))
+  // 设置倒计时
+  mobileCodeTimer.value = 60
+  let msgTimer = setInterval(() => {
+    mobileCodeTimer.value = mobileCodeTimer.value - 1
+    if (mobileCodeTimer.value <= 0) {
+      clearInterval(msgTimer)
+    }
+  }, 1000)
+}
+
+
 const submit = (formEl: FormInstance | undefined) => {
   if (!formEl) return
   formEl.validate(async (valid) => {
-    if (valid) {
-      await updateUserPassword(password.oldPassword, password.newPassword)
-      message.success(t('common.updateSuccess'))
-    }
+    console.log(valid);
+    // if (valid) {
+    //   await updateUserPassword(password.oldPassword, password.newPassword)
+    //   message.success(t('common.updateSuccess'))
+    // }
   })
 }
 
@@ -71,3 +120,41 @@ const reset = (formEl: FormInstance | undefined) => {
   formEl.resetFields()
 }
 </script>
+
+<style lang="scss" scoped>
+.resetpwd {
+  width: 100%;
+  padding: 20px;
+  padding-left: 50px;
+  box-sizing: border-box;
+
+  ::v-deep {
+    .el-form-item {
+      margin-top: 28px;
+      margin-bottom: 0;
+    }
+  }
+
+
+  .subject {
+    height: 60px;
+    color: #666;
+    display: flex;
+    align-items: center;
+    line-height: 20px;
+
+    .lc {
+      width: 8px;
+      height: 20px;
+      background: #409eff;
+      margin-right: 10px;
+    }
+
+    .lh {
+      color: #666;
+      font-size: 20px;
+      font-weight: 700;
+    }
+  }
+}
+</style>
diff --git a/yunxi-ui-admin-vue3/src/views/Profile/components/index.ts b/yunxi-ui-admin-vue3/src/views/Profile/components/index.ts
index 9e1883cf..5ec38456 100644
--- a/yunxi-ui-admin-vue3/src/views/Profile/components/index.ts
+++ b/yunxi-ui-admin-vue3/src/views/Profile/components/index.ts
@@ -1,7 +1,7 @@
-import BasicInfo from './BasicInfo.vue'
+import BaseInfo from './BaseInfo.vue'
 import ProfileUser from './ProfileUser.vue'
 import ResetPwd from './ResetPwd.vue'
 import UserAvatarVue from './UserAvatar.vue'
 import UserSocial from './UserSocial.vue'
 
-export { BasicInfo, ProfileUser, ResetPwd, UserAvatarVue, UserSocial }
+export { BaseInfo, ProfileUser, ResetPwd, UserAvatarVue, UserSocial }