From 2591e298a3fd1332ad0ca33059f6ba0b7d426f51 Mon Sep 17 00:00:00 2001
From: pengwei <2071057782@qq.com>
Date: 星期四, 20 三月 2025 10:08:00 +0800
Subject: [PATCH] 最新代码提交
---
项目代码/client/src/views/system/UserInfo.vue | 145 ++++++++++++++++++++++++++++++++++++++---------
1 files changed, 116 insertions(+), 29 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 e678d73..ca911b1 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://192.168.0.80:5000' + 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"
@@ -49,7 +60,7 @@
</el-col>
<el-col :span="3"
><el-form-item label="鐢ㄦ埛鍒嗙粍:">
- <span>缁翠繚閮�</span>
+ <span>{{ userInfo.roleName }}</span>
</el-form-item></el-col
>
</el-row>
@@ -66,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>
@@ -103,7 +114,7 @@
</template>
<el-input
size="small"
- v-model="form.userName"
+ v-model="form.usertruename"
placeholder="璇疯緭鍏�"
style="width: 18.375rem"
/>
@@ -124,7 +135,7 @@
>
</template>
<el-input
- v-model="form.phoneNo"
+ v-model="form.phone"
size="small"
placeholder="璇疯緭鍏�"
style="width: 18.375rem"
@@ -137,24 +148,32 @@
<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"
- :limit="3"
+ :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>
@@ -175,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>
@@ -256,25 +279,41 @@
</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 } from "@/api/user";
+import {
+ GetUserInfo,
+ UpdatePassword,
+ UpdateUser,
+ Upuserbase,
+} from "@/api/user";
import { ElMessage } from "element-plus";
const formInline = reactive({
user: "",
region: "",
date: "",
});
-const form = ref({});
-const newPwd = ref("");
-const onSubmit = () => {
- // UpdateUser().then((res) => {});
- console.log(form.value);
- 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" }],
@@ -301,23 +340,62 @@
});
};
-const dialogVisible = ref(false);
const userInfo = ref({});
+const dialogImageUrl = ref();
+
GetUserInfo({}).then((res) => {
- userInfo.value = res.data;
- form.value = res.data;
- console.log(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%;
@@ -340,6 +418,7 @@
height: 6.25rem;
text-align: center;
}
+
.el-form {
.el-row {
.el-col {
@@ -347,6 +426,7 @@
:deep(.el-form-item__label) {
font-size: 0.875rem;
}
+
span {
font-size: 0.875rem;
}
@@ -355,6 +435,7 @@
}
}
}
+
.mation {
flex: 1;
margin-top: 1.25rem;
@@ -362,19 +443,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;
@@ -385,10 +470,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