提交代码

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/header/header.vue

@@ -74,6 +74,7 @@
         </div>
         <div class="text-center leading-none text-slate-50 pb-3">角色：{{ userInfo.roleName }}</div>
         <div class="text-center leading-none text-slate-50 pb-3">公司：{{ userInfo.companyName }}</div>
+        <div class="text-center leading-none text-slate-50 pb-3"><el-link type="warning" @click="changePasswordClick()">修改密码</el-link></div>
         <div class="w-full drawerVisBtn" v-if="userInfo.userNameNeedTranslate != 1">
           <div @click="logout()">退出</div>
         </div>
@@ -124,18 +125,39 @@
       </div>
     </div>
   </el-drawer>
+
+  <!-- 修改密码 -->
+  <el-dialog v-model="changePasswordVlsable" title="修改密码" width="500">
+    <el-form ref="ruleFormRef" :model="changePasswordForm" class="mt-4" :rules="changePasswordRules" status-icon>
+      <el-form-item label="原密码" label-width="90px">
+        <el-input v-model.trim="changePasswordForm.originPassword" prop="originPassword" />
+      </el-form-item>
+      <el-form-item label="新密码" label-width="90px">
+        <el-input v-model.trim="changePasswordForm.newPassword" prop="newPassword" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="changePasswordVlsable = false">取消</el-button>
+        <el-button type="primary" @click="changePassword(ruleFormRef)">
+          确定
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
 </template>
 
 <!-- /information/list -->
 
 <script lang="ts" setup>
-import { onMounted, ref, watchEffect, watch } from 'vue';
+import { onMounted, ref, watchEffect, watch, reactive, inject } from 'vue';
 import { RouteRecordRaw, useRouter, useRoute } from 'vue-router';
 import { useStore } from "../../store/index"
 import { post, uploadFile } from "@/utils/request";
 import defaultCover from "../../assets/defaultCover.png";
 import { formatDate } from '@/utils/times'
 import loginLogin from '../../assets/login/login_logo.png'
+import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
 const { routers, clearStore, userInfo } = useStore()
 const router = useRouter();
 const route = useRoute()
@@ -153,6 +175,60 @@ const newsDrawer = ref(false)
 const newsDrawerLoading = ref(false)
 const numberOfLogos = ref(0)
 
+const changePasswordVlsable = ref(false)
+const changePasswordForm = ref({
+  originPassword: '',
+  newPassword: '',
+})
+
+interface RuleForm {
+  originPassword: string
+  newPassword: string
+}
+
+const changePasswordRules = reactive<FormRules<RuleForm>>({
+  originPassword: [
+    { required: true, message: '请输入原密码', trigger: 'blur' },
+  ],
+  newPassword: [
+    { required: true, message: '请输入新密码', trigger: 'blur' },
+  ],
+})
+const globalPopup = inject<GlobalPopup>('globalPopup')
+const ruleFormRef = ref<FormInstance>()
+
+const changePassword = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  if(!changePasswordForm.value.originPassword) {
+    globalPopup?.showWarning('请填写原密码')
+    return
+  }
+  if(!changePasswordForm.value.newPassword) {
+    globalPopup?.showWarning('请填写新密码')
+    return
+  }
+  const fomrVal = {
+    ...changePasswordForm.value,
+    id: userInfo.id
+  }
+  post(`/user/editPassword`, { ...fomrVal }).then(_res => {
+    globalPopup?.showSuccess('修改成功')
+    setTimeout(() => {
+      logout()
+    }, 500)
+  }).catch(err => {
+    globalPopup?.showError(err.msg)
+  })
+}
+
+const changePasswordClick = () => {
+  changePasswordForm.value = {
+    originPassword: '',
+    newPassword: '',
+  }
+  changePasswordVlsable.value = true
+}
+
 const updateVisibleItems = () => {
   const parentWidth = (parentDiv.value?.offsetWidth && parentDiv.value?.offsetWidth - 150) || 10;
   const canvas = document.createElement('canvas');