From 1288a7890deb3b180b1e8df7015b1036514c4e71 Mon Sep 17 00:00:00 2001
From: pengwei <2071057782@qq.com>
Date: 星期四, 27 三月 2025 09:07:12 +0800
Subject: [PATCH] 3.27优化
---
项目代码/client/src/views/system/UserInfo.vue | 214 ++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 178 insertions(+), 36 deletions(-)
diff --git "a/\351\241\271\347\233\256\344\273\243\347\240\201/client/src/views/system/UserInfo.vue" "b/\351\241\271\347\233\256\344\273\243\347\240\201/client/src/views/system/UserInfo.vue"
index 67fc668..636a6a0 100644
--- "a/\351\241\271\347\233\256\344\273\243\347\240\201/client/src/views/system/UserInfo.vue"
+++ "b/\351\241\271\347\233\256\344\273\243\347\240\201/client/src/views/system/UserInfo.vue"
@@ -3,14 +3,25 @@
<div class="info">
<div style="position: relative">
<el-upload
+ :disabled="true"
class="avatar-uploader"
- action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+ action="#"
:show-file-list="false"
- :on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
- <img v-if="imageUrl" :src="imageUrl" class="avatar" />
- <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+ <el-image
+ style="width: 100px; height: 100px"
+ :src="'http://115.159.85.185:9098' + userInfo.headImageUrl"
+ :fit="fit"
+ />
+ <!-- <img
+ v-if="userInfo.headImageUrl"
+ :src="'http://192.168.0.80:5000' + userInfo.headImageUrl"
+ class="avatar"
+ />
+ <el-icon v-else class="avatar-uploader-icon">
+ <Plus />
+ </el-icon> -->
</el-upload>
<span
style="
@@ -33,7 +44,7 @@
/></span>
</div>
<el-form
- :model="formInline"
+ :model="userInfo"
style="flex: 1"
class="demo-form-inline"
label-position="right"
@@ -42,12 +53,14 @@
<el-row :gutter="2" style="height: 2.2rem">
<el-col :span="3">
<el-form-item label="鐧诲綍璐﹀彿:">
- <span style="font-size: 1rem; font-weight: bold">dsfuis</span>
+ <span style="font-size: 1rem; font-weight: bold">{{
+ userInfo.userName
+ }}</span>
</el-form-item>
</el-col>
<el-col :span="3"
><el-form-item label="鐢ㄦ埛鍒嗙粍:">
- <span>缁翠繚閮�</span>
+ <span>{{ userInfo.roleName }}</span>
</el-form-item></el-col
>
</el-row>
@@ -64,7 +77,7 @@
>
<el-col :span="3">
<el-form-item label="鐢ㄦ埛瑙掕壊:">
- <span>2021-06-30</span>
+ <span>{{ userInfo.roleName }}</span>
</el-form-item>
</el-col>
</el-row>
@@ -101,7 +114,7 @@
</template>
<el-input
size="small"
- v-model="form.name"
+ v-model="form.usertruename"
placeholder="璇疯緭鍏�"
style="width: 18.375rem"
/>
@@ -122,36 +135,45 @@
>
</template>
<el-input
- v-model="form.name"
+ v-model="form.phone"
size="small"
placeholder="璇疯緭鍏�"
style="width: 18.375rem"
/> </el-form-item
></el-col>
</el-row>
- <el-form-item label-position="top">
+ <el-form-item label-position="top">
<template #label>
<div style="display: flex; align-items: flex-end">
<span style="color: red; margin-right: 0.2rem">*</span>
<span style="font-size: 0.88rem; color: black; font-weight: bold"
>浜鸿劯鍥剧墖</span
- ><span
+ >
+ <!-- <span
style="
color: rgba(255, 0, 0, 1);
font-size: 0.75rem;
margin-left: 0.5rem;
"
>娉細鏈�澶氬彲涓婁紶涓夊紶锛屽浘鐗囬渶瑕佹瑙勭殑浜哄儚璇佷欢鐓�</span
- >
+ > -->
</div>
</template>
<el-upload
+ ref="upload"
+ name="fileInput"
class="avatar-uploader"
- action="#"
+ action="http://115.159.85.185:9098/api/User/SaveFiles"
list-type="picture-card"
- :auto-upload="false"
+ :auto-upload="true"
+ limit="1"
+ @before-upload="beforeAvatarUpload"
+ :on-success="handleAvatarSuccess"
+ :file-list="fileList != [] ? fileList : []"
>
- <el-icon><Plus /></el-icon>
+ <el-icon>
+ <Plus />
+ </el-icon>
<template #file="{ file }">
<div>
@@ -172,14 +194,18 @@
class="el-upload-list__item-delete"
@click="handleDownload(file)"
>
- <el-icon size="15"><Download /></el-icon>
+ <el-icon size="15">
+ <Download />
+ </el-icon>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleRemove(file)"
>
- <el-icon size="15"><Delete /></el-icon>
+ <el-icon size="15">
+ <Delete />
+ </el-icon>
</span>
</span>
</div>
@@ -208,10 +234,10 @@
<template #title>
<div style="font-size: 1.25rem; font-weight: bold">瀵嗙爜淇敼</div>
</template>
- <el-form :model="form">
+ <el-form :model="Passwordform" ref="PasswordformRef" :rules="rules">
<el-form-item>
<el-input
- v-model="form.name"
+ v-model="Passwordform.oldPwd"
autocomplete="off"
placeholder="璇疯緭鍏ュ師瀵嗙爜"
style="width: 21.25rem; height: 2.8125rem; font-size: 1rem"
@@ -219,7 +245,7 @@
</el-form-item>
<el-form-item>
<el-input
- v-model="form.name"
+ v-model="Passwordform.newPwd"
autocomplete="off"
placeholder="璇疯緭鍏ユ柊瀵嗙爜"
style="width: 21.25rem; height: 2.8125rem; font-size: 1rem"
@@ -227,7 +253,7 @@
</el-form-item>
<el-form-item>
<el-input
- v-model="form.name"
+ v-model="newPwd"
autocomplete="off"
placeholder="纭瀵嗙爜"
style="width: 21.25rem; height: 2.8125rem; font-size: 1rem"
@@ -240,7 +266,7 @@
style="display: flex; justify-content: center"
>
<el-button
- @click="dialogVisible = false"
+ @click="clickPassword(PasswordformRef)"
type="primary"
style="
width: 21.25rem;
@@ -253,41 +279,148 @@
</div>
</template>
</el-dialog>
+
+ <!-- 鏌ョ湅鍥剧墖寮瑰嚭妗� -->
+ <el-dialog v-model="imgdialogVisible" center width="980">
+ <img w-full :src="dialogImageUrl" alt="Preview Image" />
+ </el-dialog>
</div>
</template>
<script setup>
import { ref, reactive } from "vue";
+import {
+ GetUserInfo,
+ UpdatePassword,
+ UpdateUser,
+ Upuserbase,
+} from "@/api/user";
+import { ElMessage } from "element-plus";
const formInline = reactive({
user: "",
region: "",
date: "",
});
-const form = reactive({
- name: "",
- region: "",
- date1: "",
- date2: "",
- delivery: false,
- type: [],
- resource: "",
- desc: "",
-});
-const onSubmit = () => {
- console.log("submit!");
+const upload = ref();
+const form = ref({
+ id: JSON.parse(localStorage.getItem("user")).id,
+ usertruename: "",
+ phone: "",
+ files: "",
+});
+const newPwd = ref("");
+const dialogVisible = ref(false);
+//鏌ョ湅鍥剧墖
+const imgdialogVisible = ref(false);
+const fileList = ref([]);
+
+const rules = reactive({
+ oldPwd: [{ required: true, message: "璇疯緭鍏ユ棫瀵嗙爜", trigger: "blur" }],
+ newPwd: [{ required: true, message: "璇疯緭鍏ユ柊瀵嗙爜", trigger: "blur" }],
+});
+const PasswordformRef = ref();
+const Passwordform = ref({
+ oldPwd: "",
+ newPwd: "",
+});
+const clickPassword = async (formEl) => {
+ if (!formEl) return;
+ await formEl.validate((valid, fields) => {
+ if (valid) {
+ if (
+ Passwordform.value.newPwd == "" ||
+ Passwordform.value.oldPwd == "" ||
+ newPwd.value == ""
+ ) {
+ ElMessage({
+ message: "杈撳叆妗嗕笉鑳戒负绌�",
+ type: "warning",
+ });
+ return;
+ }
+ if (Passwordform.value.newPwd == Passwordform.value.oldPwd) {
+ ElMessage({
+ message: "涓ゆ瀵嗙爜涓�鑷�",
+ type: "warning",
+ });
+ return;
+ }
+ if (Passwordform.value.newPwd != newPwd.value) {
+ ElMessage({
+ message: "鏂板瘑鐮佷笉涓�鑷�",
+ type: "warning",
+ });
+ return;
+ }
+ UpdatePassword(Passwordform.value).then((res) => {
+ ElMessage({
+ message: "淇敼鎴愬姛",
+ type: "success",
+ });
+ dialogVisible.value = false;
+ console.log(res);
+ });
+ } else {
+ console.log("error submit!", fields);
+ }
+ });
};
-const dialogVisible = ref(false);
+const userInfo = ref({});
+const dialogImageUrl = ref();
+
+GetUserInfo({}).then((res) => {
+ userInfo.value = Object.assign({}, res.data);
+ form.value.usertruename = res.data.userTrueName;
+ form.value.phone = res.data.phoneNo;
+});
+//鍥剧墖棰勮
+const handlePictureCardPreview = (url) => {
+ dialogImageUrl.value = url.url;
+ imgdialogVisible.value = true;
+};
+
+//鍥剧墖鍒犻櫎
+const handleRemove = (file) => {
+ upload.value.handleRemove(file);
+};
+const onSubmit = () => {
+ if (form.value.files == "") {
+ ElMessage({ message: "鍥剧墖涓嶈兘涓虹┖", type: "warning" });
+ return;
+ }
+ if (form.value.usertruename == "") {
+ ElMessage({ message: "濮撳悕涓嶈兘涓虹┖", type: "warning" });
+ return;
+ }
+ if (form.value.phone == "") {
+ ElMessage({ message: "鐢佃瘽涓嶈兘涓虹┖", type: "warning" });
+ return;
+ }
+ Upuserbase(form.value).then((res) => {
+ ElMessage({ message: "淇敼鎴愬姛", type: "success" });
+ dialogVisible.value = false;
+ initData();
+ });
+};
+const beforeAvatarUpload = (val) => {
+ console.log(val);
+};
+const handleAvatarSuccess = (val) => {
+ form.value.files = "/image/" + val.data;
+};
</script>
<style lang="scss" scoped>
.personal {
display: flex;
flex-direction: column;
+
.info {
display: flex;
height: 10rem;
background-color: #fff;
align-items: center;
+
:deep(.avatar-uploader .el-upload) {
border: 1px dashed var(--el-border-color);
border-radius: 50%;
@@ -310,6 +443,7 @@
height: 6.25rem;
text-align: center;
}
+
.el-form {
.el-row {
.el-col {
@@ -317,6 +451,7 @@
:deep(.el-form-item__label) {
font-size: 0.875rem;
}
+
span {
font-size: 0.875rem;
}
@@ -325,6 +460,7 @@
}
}
}
+
.mation {
flex: 1;
margin-top: 1.25rem;
@@ -332,19 +468,23 @@
padding: 1.1875rem 2.0625rem;
box-sizing: border-box;
}
+
:deep(.el-dialog) {
margin-top: 180px;
}
+
:deep(.el-dialog .el-dialog__body) {
display: flex;
justify-content: center;
align-items: center;
}
+
.avatar-uploader .avatar {
width: 7rem;
height: 7rem;
display: block;
}
+
:deep(.avatar-uploader .el-upload) {
width: 7rem;
height: 7rem;
@@ -355,10 +495,12 @@
overflow: hidden;
transition: var(--el-transition-duration-fast);
}
+
:deep(.el-upload-list__item) {
width: 7rem;
height: 7rem;
}
+
.avatar-uploader .el-upload:hover {
border-color: var(--el-color-primary);
}
--
Gitblit v1.9.3