u

code/container-ocr/ocr-vue/src/layout/components/update-password.vue

@@ -0,0 +1,90 @@
+<script lang="js" setup>
+import { updatePasswordApi } from "@/request/api";
+import { ElMessage } from "element-plus";
+
+const confirmLoading = ref(false);
+const showDialog = defineModel(false);
+
+const form = ref({
+  oldPassword: "",
+  newPassword: "",
+  confirmPassword: "",
+});
+
+function handleConfirm() {
+  if (form.value.newPassword === "") {
+    ElMessage.warning("新密码不能为空");
+    return;
+  }
+  if (form.value.confirmPassword !== form.value.newPassword) {
+    ElMessage.warning("新密码和确认密码不一致");
+    return;
+  }
+
+  confirmLoading.value = true;
+
+  updatePasswordApi({
+    newPassword: form.value.newPassword,
+    oldPassword: form.value.oldPassword,
+  })
+    .then((res) => {
+      if (res.success) {
+        // 修改成功
+        ElMessage.success("修改成功");
+        showDialog.value = false;
+      }
+    })
+    .finally(() => {
+      confirmLoading.value = false;
+    });
+}
+
+function resetForm() {
+  form.value.newPassword = "";
+  form.value.oldPassword = "";
+  form.value.confirmPassword = "";
+}
+</script>
+
+<template>
+  <el-dialog
+    v-model="showDialog"
+    @closed="resetForm"
+    title="修改密码"
+    width="400"
+  >
+    <G3Grid>
+      <G3GridGroup :label-width="80" :column="1" label-align="right">
+        <G3GridItem label="旧密码" :span="1">
+          <el-input v-model="form.oldPassword" type="password" show-password />
+        </G3GridItem>
+        <G3GridItem label="新密码" :span="1" required>
+          <el-input v-model="form.newPassword" type="password" show-password />
+        </G3GridItem>
+        <G3GridItem label="确认密码" :span="1" required>
+          <el-input
+            v-model="form.confirmPassword"
+            type="password"
+            show-password 
+          />
+        </G3GridItem>
+      </G3GridGroup>
+    </G3Grid>
+
+    <div class="footer">
+      <el-button @click="showDialog = false">取消</el-button>
+      <el-button type="primary" :loading="confirmLoading" @click="handleConfirm"
+        >确认</el-button
+      >
+    </div>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.footer {
+  margin-top: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+</style>