From c1dfa424e23ad1180fead8860c9a26b606219bd3 Mon Sep 17 00:00:00 2001
From: monkeyhouyi <m19382021374@163.com>
Date: Fri, 23 Aug 2024 00:59:30 +0800
Subject: [PATCH] 添加页面

---
 src/assets/images/meun/专项行动处理.png  | Bin 0 -> 1634 bytes
 src/views/homePage/components/UserInfoPage.vue | 208 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 208 insertions(+), 0 deletions(-)
 create mode 100644 src/assets/images/meun/专项行动处理.png
 create mode 100644 src/views/homePage/components/UserInfoPage.vue

diff --git a/src/assets/images/meun/专项行动处理.png b/src/assets/images/meun/专项行动处理.png
new file mode 100644
index 0000000..de9b200
Binary files /dev/null and b/src/assets/images/meun/专项行动处理.png differ
diff --git a/src/views/homePage/components/UserInfoPage.vue b/src/views/homePage/components/UserInfoPage.vue
new file mode 100644
index 0000000..d1d3a08
--- /dev/null
+++ b/src/views/homePage/components/UserInfoPage.vue
@@ -0,0 +1,208 @@
+<template>
+  <el-dialog
+    title="修改信息"
+    :close-on-click-modal="false"
+    :visible.sync="visible"
+    class="NCC-dialog NCC-dialog_center userInfo"
+    lock-scroll
+    width="600px"
+    v-loading="loading"
+  >
+    <el-row class="infoContent">
+        <div class="head">
+          <el-upload
+            class="avatar-uploader"
+            :action="define.comUploadUrl + '/userAvatar'"
+            :headers="uploadHeaders"
+            :on-success="handleSuccess"
+            :show-file-list="false"
+            accept="image/*"
+          >
+            <div class="avatar-box">
+              <el-avatar :size="80" :src="avatar" class="avatar" v-if="avatar"/>
+              <div class="avatar-hover">更换头像</div>
+            </div>
+          </el-upload>
+          <!-- <span class="username">{{ user.realName }}</span> -->
+        </div>
+        <el-form class="infoForm" ref="form" :model="user" :rules="rules" label-width="80px">
+          <el-form-item label="用户名" prop="realName">
+            <el-input
+              v-model="user.realName"
+              placeholder="请输入用户名"
+            />
+          </el-form-item>
+        </el-form>
+    </el-row>
+
+    <span slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="dataFormSubmit()" :loading="btnLoading">保存</el-button>
+      <el-button type="danger" @click="visible = false">关闭</el-button>
+    </span>
+  </el-dialog>
+</template>
+<script>
+import {
+  UserSettingInfo,
+  UpdateAvatar,
+} from "@/api/permission/userSetting";
+import request from "@/utils/request";
+import define from "@/utils/define";
+export default {
+  components: {},
+  props: [],
+  data() {
+    return {
+      loading: false,
+      visible: false,
+      btnLoading: false,
+      user: {
+        realName: '',
+      },
+      uploadHeaders: { Authorization: this.$store.getters.token },
+      rules: {
+        realName: [
+          { required: true, message: "用户名不能为空", trigger: "blur" },
+        ],
+      }
+    };
+  },
+  computed: {
+    avatar() {
+      return define.comUrl + this.$store.state.user.avatar;
+    }
+  },
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    goBack() {
+      this.$emit("refresh");
+    },
+    init() {
+      this.visible = true;
+      this.loading = true;
+      this.getInfo();
+    },
+    getInfo() {
+      UserSettingInfo().then((res) => {
+        this.user = res.data;
+        this.loading = false;
+      }).catch(() => this.loading = false);
+    },
+    // 头像
+    handleSuccess(res, file) {
+      if (res.code == 200) {
+        this.updateAvatar(res.data);
+      } else {
+        this.$message({
+          message: "上传失败",
+          type: "error",
+          duration: 1000,
+        });
+      }
+    },
+    updateAvatar(data) {
+      UpdateAvatar(data.name).then((res) => {
+        this.user.avatar = data.url;
+        this.$store.commit("SET_AVATAR", data.url);
+        this.$message({
+          message: res.msg,
+          type: "success",
+          duration: 1000,
+        });
+      });
+    },
+    dataFormSubmit() {
+      this.btnLoading = true;
+      this.$refs["form"].validate(async (valid) => {
+        if(valid) {
+          request({  
+            url: `/permission/users/${this.user.id}`,
+            method: 'PUT',
+            data: { realName: this.user.realName }
+          }).then((res) => {
+            this.$store.commit("SET_NAME", this.user.realName);
+            this.$message({
+              message: res.msg,
+              type: "success",
+              duration: 1000,
+            });
+            this.visible = false;
+            this.$emit("refresh");
+          }).catch(() => this.btnLoading = false)
+        }
+      })
+
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.userInfo {
+  .infoContent {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    height: 100px;
+    margin-bottom: 20px;
+    .infoForm {
+      flex: 1;
+      margin-top: 30px;
+    }
+  }
+  .head {
+    position: relative;
+    left: 10px;
+    top: 10px;
+    height: 90px;
+    width: 100px;
+    padding-top: 10px;
+    .avatar-uploader {
+      display: inline-block;
+      vertical-align: top;
+      .avatar-hover {
+        position: absolute;
+        left: 0;
+        top: 0;
+        font-size: 12px;
+        display: none;
+        overflow: hidden;
+        width: 80px;
+        height: 80px;
+        text-align: center;
+        border-radius: 50%;
+        line-height: 80px;
+        color: #fff;
+        cursor: pointer;
+        background: rgba(0, 0, 0, 0.5);
+      }
+      &:hover {
+        & .avatar-hover {
+          display: block;
+        }
+      }
+    }
+    .avatar-box {
+      position: relative;
+    }
+    .avatar {
+      display: inline-block;
+      width: 80px;
+      height: 80px;
+      overflow: hidden;
+      border-radius: 50%;
+      vertical-align: top;
+      margin-right: 10px;
+    }
+    .el-avatar>img {
+      width: 100%;
+    }
+    .username {
+      line-height: 80px;
+      font-size: 20px;
+    }
+  }
+}
+</style>
--
libgit2 0.21.4