fix:合并冲突

3 weeks ago · 3cb3f86efb
4 changed files with 433 additions and 6 deletions
--- a/src/components/PasswordSuccess.vue
+++ b/src/components/PasswordSuccess.vue
@ -0,0 +1,84 @@
+<template>
+  <div class="success-popup">
+    <div class="popup-content">
+      <div class="icon">
+        <el-icon :size="48" color="#67c23a">
+          <SuccessFilled />
+        </el-icon>
+      </div>
+      <div class="title">修改密码成功！</div>
+      <div class="desc">系统将在 {{ countdown }} 秒后自动跳转至登录页</div>
+      <el-button type="primary" @click="immediateJump">立即跳转</el-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {ref, onMounted} from 'vue';
+import {ElIcon, ElButton} from 'element-plus';
+import {SuccessFilled} from '@element-plus/icons-vue';
+import {useRouter} from 'vue-router';
+
+
+const countdown = ref(3);
+const router = useRouter();
+
+// 倒计时逻辑，自动跳转
+const startCountdown = () => {
+  const timer = setInterval(() => {
+    countdown.value--;
+    if (countdown.value === 0) {
+      clearInterval(timer);
+      // 这里可根据实际需求选择刷新跳转还是路由跳转
+      // 若需要刷新页面跳转，使用 window.location.href
+      // window.location.href = '/login';
+      router.replace ('/login');
+      // 若用路由跳转（路由配置好登录页路径前提下）：router.push('/login');
+    }
+  }, 1000);
+};
+
+const immediateJump = () => {
+  // window.location.href = '/login';
+  // 路由跳转方式：
+  router.replace ('/login');
+};
+
+onMounted(() => {
+  startCountdown();
+});
+</script>
+
+<style scoped>
+.success-popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+
+  background-color: rgba(255, 255, 255, 0.8);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+  width: 100%;
+  height: 100%;
+}
+.popup-content {
+  background: #fff;
+  padding: 30px;
+  border-radius: 8px;
+  text-align: center;
+}
+.icon {
+  margin-bottom: 16px;
+}
+.title {
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 8px;
+}
+.desc {
+  margin-bottom: 24px;
+  color: #999;
+}
+</style>
--- a/src/components/changePassword.vue
+++ b/src/components/changePassword.vue
@ -0,0 +1,321 @@
+<template>
+  <div class="form-container">
+    <el-form
+        ref="passwdFormRef"
+        :model="passwd"
+        :rules="rules"
+        label-width="100px"
+        class="password-form"
+    >
+      <h3 class="form-title">修改密码</h3>
+
+      <!-- 原密码 -->
+      <el-form-item prop="oldPassword" label="原密码">
+        <el-input
+            v-model.trim="passwd.oldPassword"
+            type="password"
+            placeholder="请输入原密码"
+            show-password
+        />
+      </el-form-item>
+
+      <!-- 新密码 -->
+      <el-form-item prop="newPassword" label="新密码">
+        <el-input
+            v-model.trim="passwd.newPassword"
+            type="password"
+            placeholder="请输入新密码"
+            show-password
+        />
+      </el-form-item>
+
+      <!-- 重复密码 -->
+      <el-form-item prop="againPassword" label="重复密码">
+        <el-input
+            v-model.trim="passwd.againPassword"
+            type="password"
+            placeholder="请再次输入新密码"
+            show-password
+        />
+      </el-form-item>
+
+      <!-- 密码规则提示 -->
+      <div class="rule-tips">
+        <div :class="isLengthValid ? 'tip pass' : 'tip neutral'">
+          <el-icon>
+            <component :is="isLengthValid ? SuccessFilled : SuccessFilled"/>
+          </el-icon>
+          密码由8-16位数字、字母或符号组成
+        </div>
+        <div :class="isComplexValid ? 'tip pass' : 'tip neutral'">
+          <el-icon>
+            <component :is="isComplexValid ? SuccessFilled : SuccessFilled"/>
+          </el-icon>
+          至少含2种以上字符
+        </div>
+        <div v-if="errorMsg" class="tip fail">
+          <el-icon>
+            <CircleCloseFilled/>
+          </el-icon>
+          {{ errorMsg }}
+        </div>
+      </div>
+
+      <!-- 按钮 -->
+      <div class="button-group">
+        <el-button
+            type="primary"
+            @click="onSubmit"
+            style="width: 300px"
+            :loading="loading"
+            :disabled="!isLengthValid || !isComplexValid"
+        >
+          {{ loading ? '修改中...' : '确定' }}
+        </el-button>
+      </div>
+
+    </el-form>
+  </div>
+</template>
+
+<script setup>
+import {ref, reactive, computed, watch, onMounted} from 'vue'
+import {CircleCloseFilled, SuccessFilled} from '@element-plus/icons-vue'
+import {ElMessage} from "element-plus";
+import API from '@/util/http'
+import PasswordSuccess from './PasswordSuccess.vue';
+import router from "@/router/index.js";
+
+// 父组件调用
+const emit = defineEmits(['confirm'])
+
+const passwdFormRef = ref(null)
+const passwd = reactive({
+  account: '',
+  oldPassword: '',
+  newPassword: '',
+  againPassword: ''
+})
+const errorMsg = ref('')
+//获取用户信息的account
+const getAccount= async function() {
+  try {
+    const adminData = ref({})
+    const result = await API({ url: '/admin/userinfo', data: {} })
+    adminData.value = result
+    console.log('管理员用户信息', adminData.value)
+    passwd.account = adminData.value.account
+  } catch (error) {
+    console.log('请求失败', error)
+  }
+}
+// 实时密码规则校验
+const isLengthValid = computed(() => passwd.newPassword.length >= 8 && passwd.newPassword.length <= 16)
+
+const isComplexValid = computed(() => {
+  const rules = [/\d/, /[a-z]/, /[A-Z]/, /[^a-zA-Z0-9]/]
+  return rules.filter((r) => r.test(passwd.newPassword)).length >= 2
+})
+
+watch(() => passwd.newPassword, (val) => {
+  if (val && val === passwd.oldPassword) {
+    errorMsg.value = '新密码不能与旧密码一致'
+  } else {
+    errorMsg.value = ''
+  }
+})
+// 提交加载状态
+const loading = ref(false)
+// 表单校验规则
+const rules = reactive({
+  oldPassword: [{required: true, message: '请输入原密码', trigger: 'blur'}],
+  newPassword: [
+    {required: true, message: '新密码不能为空', trigger: 'blur'},
+    {
+      validator: (rule, value, callback) => {
+        if (value === passwd.oldPassword) {
+          callback(new Error('新密码不能与旧密码一致'))
+        } else if (value.length < 8 || value.length > 16) {
+          callback(new Error('长度应在 8 到 16 个字符'))
+        } else {
+          const types = [/\d/, /[a-z]/, /[A-Z]/, /[^a-zA-Z0-9]/]
+          const matchCount = types.filter((r) => r.test(value)).length
+          if (matchCount < 2) {
+            callback(new Error('密码至少包含两种类型（数字、字母或符号）'))
+          } else {
+            callback()
+          }
+        }
+      },
+      trigger: 'blur'
+    }
+  ],
+  againPassword: [
+    {required: true, message: '请再次输入新密码', trigger: 'blur'},
+    {
+      validator: (rule, value, callback) => {
+        if (value !== passwd.newPassword) {
+          callback(new Error('两次输入密码不一致'))
+        } else {
+          callback()
+        }
+      },
+      trigger: 'blur'
+    }
+  ]
+})
+
+// 修改密码接口调用方法
+const changePassword = async function () {
+  try {
+    const params = {
+      account: passwd.account,
+      oldPassword: passwd.oldPassword,
+      newPassword: passwd.newPassword,
+      againPassword: passwd.againPassword
+    }
+
+    const result = await API({url: '/admin/password', data: params})
+    console.log('@@@@@@@@@@@修改密码结果:', result)
+    if(result.status === 200){
+      // 显示成功弹窗
+
+      ElMessage.success('修改密码成功')
+      // 重置表单字段
+      resetFields()
+      router.replace ('/PasswordSuccess');
+    }else if(result === 400){
+      //todo 待完善
+    }
+
+  } catch (error) {
+    console.log('re:', result)
+    console.error('修改密码失败', error)
+    ElMessage.error('操作失败')
+    // 抛出错误让外层捕获，保持finally正常执行
+    throw error
+  }
+}
+
+// 修改密码接口调用方法（模拟始终成功）
+// const changePassword = async function () {
+//   try {
+//     // 模拟API调用
+//     const result = {
+//       status: 200,
+//       data: {success: true, message: '密码修改成功'}
+//     };
+
+//     console.log('修改密码结果:', result);
+
+//     // 统一处理成功逻辑
+//     if (result.status === 200 ) {
+//       // 显示成功提示
+//       ElMessage.success(result.data.message || '修改密码成功');
+
+//       // 重置表单字段
+//       resetFields();
+
+//       router.replace ('/PasswordSuccess');
+
+
+//       return result;
+//     } else {
+//       // 处理API返回但状态非成功的情况
+//       const errorMsg = result.data.message || '密码修改失败';
+//       ElMessage.error(errorMsg);
+//       throw new Error(errorMsg);
+//     }
+//   } catch (error) {
+//     // 处理网络错误或API异常
+//     console.error('修改密码失败:', error);
+//     ElMessage.error(error.message || '操作失败，请重试');
+//     throw error;
+//   }
+// };
+
+// 表单提交与重置
+const resetFields = () => {
+  passwdFormRef.value.resetFields()
+  errorMsg.value = ''
+}
+
+// 修改提交方法
+const onSubmit = () => {
+  // 若正在加载中则直接返回，防止重复提交
+  if (loading.value) return
+
+  passwdFormRef.value.validate(async (valid) => {
+    if (valid) {
+      loading.value = true // 开始加载
+      try {
+        await changePassword() // 调用修改密码接口
+        emit('confirm')
+      } finally {
+        loading.value = false // 无论成功失败都关闭加载态
+      }
+    } else {
+      console.log('表单校验失败')
+    }
+
+  })
+}
+
+onMounted(() => {
+  getAccount()
+})
+
+</script>
+
+<style scoped>
+.form-container {
+  justify-content: center;
+  align-items: center;
+}
+
+.password-form {
+
+  border-radius: 8px;
+}
+
+.form-title {
+  text-align: left;
+  margin-bottom: 24px;
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.button-group {
+  display: flex;
+  justify-content: center;
+  margin-top: 24px;
+}
+
+.rule-tips {
+  margin-left: 100px;
+  margin-bottom: 12px;
+}
+
+.tip {
+  font-size: 14px;
+  margin: 4px 0;
+  display: flex;
+  align-items: center;
+}
+
+.pass {
+  color: #67c23a;
+}
+
+.neutral {
+  color: #999;
+}
+
+.fail {
+  color: #f56c6c;
+}
+
+.rule-tips .el-icon {
+  margin-right: 6px;
+}
+</style>
--- a/src/router/index.js
+++ b/src/router/index.js
@ -70,7 +70,11 @@ const router = createRouter({
                // 没有权限
                { path: '/noPermission', name: "noPermission", component: () => import("../views/noPermissionPage.vue") }
            ]
+
        },
+        // 跳转页面
+        { path: '/PasswordSuccess', name: "PasswordSuccess.vue", component: () => import("../components/PasswordSuccess.vue") },
+


    ]
--- a/src/views/home.vue
+++ b/src/views/home.vue
@ -6,6 +6,7 @@ import {ElMessage} from 'element-plus'
 import API from '@/util/http'
 import dmmn from '../assets/link.png'
 import moment from 'moment'
+import ChangePassword from '@/components/changePassword.vue'



@ -140,13 +141,17 @@ const changeDataByArea = (item) => {

 // 控制导出列表弹窗显示状态
 const exportListVisible = ref(false)
-
+// 显示修改密码弹窗
+const showPasswordDialog = ref(false)
 // 打开导出列表弹窗
 const openExportList = () => {
  getExportList()
  exportListVisible.value = true
 }
-
+//打开修改密码弹窗
+const openChangePassword = () => {
+  showPasswordDialog.value = true
+}
 </script>

 <template>
@ -260,7 +265,9 @@ const openExportList = () => {
                <span style="margin-left: 10px">{{ adminData.name }}</span>
              </template>
              <el-menu-item @click="message()">查看个人信息</el-menu-item>
+              <el-menu-item @click="openChangePassword">修改密码</el-menu-item>
              <el-menu-item @click="logout">退出登录</el-menu-item>
+              <el-menu-item index="1-3" @click="openExportList">查看下载列表</el-menu-item>

            </el-sub-menu>

@ -329,6 +336,15 @@ const openExportList = () => {
      </template>
    </el-dialog>

+    <!-- 自定义密码修改弹窗组件 -->
+    <el-dialog
+        v-model="showPasswordDialog"
+        :center="true"
+        width="470px"
+    >
+      <ChangePassword @confirm="showPasswordDialog = false"/>
+    </el-dialog>
+

  </div>
 </template>
@ -338,10 +354,12 @@ const openExportList = () => {
  font-size: 16px;
  font-weight: bold;
 }
+
 .item {
  margin-top: 20px;
  margin-right: 40px;
 }
+
 .admin {
  margin-left: auto;
 }