用户头像由上传模式改为媒体库选择模式

2020-08-31 23:33:28 +08:00
parent 0403ec3ffe
commit d7813c3507
13 changed files with 857 additions and 197 deletions
--- a/web/src/api/user.js
+++ b/web/src/api/user.js
@@ -94,4 +94,20 @@ export const deleteUser = (data) => {
        method: 'delete',
        data: data
    })
-}
+}
+
+// @Tags SysUser
+// @Summary 设置用户信息
+// @Security ApiKeyAuth
+// @accept application/json
+// @Produce application/json
+// @Param data body model.SysUser true "设置用户信息"
+// @Success 200 {string} string "{"success":true,"data":{},"msg":"修改成功"}"
+// @Router /user/setUserInfo [put]
+export const setUserInfo = (data) => {
+    return service({
+        url: "/user/setUserInfo",
+        method: 'put',
+        data: data
+    })
+}
--- a/web/src/components/chooseImg/index.vue
+++ b/web/src/components/chooseImg/index.vue
@@ -0,0 +1,59 @@
+<template>
+  <el-drawer title="媒体库" :visible.sync="drawer" :with-header="false">
+    <div style="display:flex;justify-content:space-around;flex-wrap:wrap;padding-top:40px">
+      <el-image
+        class="header-img-box-list"
+        :src="item.url"
+        v-for="(item,key) in picList"
+        :key="key"
+        @click.native="chooseImg(item.url,target,targetKey)"
+      >
+        <div slot="error" class="header-img-box-list">
+          <i class="el-icon-picture-outline"></i>
+        </div>
+      </el-image>
+    </div>
+  </el-drawer>
+</template>
+
+<script>
+import { getFileList } from "@/api/fileUploadAndDownload";
+export default {
+  props: {
+    target: [Object],
+    targetKey: [String]
+  },
+  data() {
+    return {
+      drawer: false,
+      picList: []
+    };
+  },
+  methods: {
+    chooseImg(url, target, targetKey) {
+      if(target&&targetKey){
+        target[targetKey] = url;
+      }
+      this.$emit("enter-img", url);
+      this.drawer = false;
+    },
+    async open() {
+      const res = await getFileList({ page: 1, pageSize: 9999 });
+      this.picList = res.data.list;
+      this.drawer = true;
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.header-img-box-list {
+  width: 180px;
+  height: 180px;
+  border: 1px dashed #ccc;
+  border-radius: 20px;
+  text-align: center;
+  line-height: 180px;
+  cursor: pointer;
+}
+</style>
--- a/web/src/view/person/person.vue
+++ b/web/src/view/person/person.vue
@@ -1,28 +1,19 @@
 <template>
  <div>
    <div class="fl-left left-mg-xs">
-      <el-upload
-        :headers="{'x-token':token}"
-        :on-success="handleAvatarSuccess"
-        :show-file-list="false"
-        :action="`${path}/user/uploadHeaderImg`"
-        class="avatar-uploader"
-        name="headerImg"
-      >
-        <CustomPic picType="img"/>
-      </el-upload>
-
-      <!-- <el-avatar :size="120" :src="userInfo.headerImg" shape="square"></el-avatar> -->
+      <el-avatar :size="120" :src="userInfo.headerImg" shape="square" @click.native="openChooseImg"></el-avatar>
    </div>
    <div class="fl-left left-mg-lg">
      <div>用户ID：{{userInfo.uuid}}</div>
      <div>用户昵称：{{userInfo.nickName}}</div>
      <div>用户组：{{userInfo.authority&&userInfo.authority.authorityName}}</div>
    </div>
+    <ChooseImg ref="chooseImg" @enter-img="enterImg"/>
  </div>
 </template>
 <script>
-import CustomPic from '@/components/customPic'
+import ChooseImg from "@/components/chooseImg";
+import {setUserInfo} from "@/api/user"
 import { mapGetters, mapMutations } from 'vuex'
 const path = process.env.VUE_APP_BASE_API
 export default {
@@ -33,16 +24,27 @@ export default {
    }
  },
  components: {
-		CustomPic
+		ChooseImg
 	},
  computed: {
    ...mapGetters('user', ['userInfo', 'token'])
  },
  methods:{
    ...mapMutations('user',['ResetUserInfo']),
-      handleAvatarSuccess(res){
-        this.ResetUserInfo({headerImg:res.data.user.headerImg})
-      }
+      openChooseImg(){
+        this.$refs.chooseImg.open()
+      },
+      async enterImg(url){
+        const res = await setUserInfo({headerImg:url,ID:this.userInfo.ID})
+        if(res.code == 0){
+          this.ResetUserInfo({headerImg:url})
+          this.$message({
+            type:"success",
+            message:"设置成功"
+          }
+          )
+        }
+      },
  }
 }
 </script>
--- a/web/src/view/superAdmin/user/user.vue
+++ b/web/src/view/superAdmin/user/user.vue
@@ -7,7 +7,7 @@
      <el-table-column label="头像" min-width="50">
        <template slot-scope="scope">
          <div :style="{'textAlign':'center'}">
-            <CustomPic :picSrc="scope.row.headerImg"/>
+            <CustomPic :picSrc="scope.row.headerImg" />
          </div>
        </template>
      </el-table-column>
@@ -62,17 +62,10 @@
          <el-input v-model="userInfo.nickName"></el-input>
        </el-form-item>
        <el-form-item label="头像" label-width="80px">
-          <el-upload
-            :headers="{'x-token':token}"
-            :on-success="handleAvatarSuccess"
-            :show-file-list="false"
-            :action="`${path}/fileUploadAndDownload/upload?noSave=1`"
-            class="avatar-uploader"
-            name="file"
-          >
-            <img :src="userInfo.headerImg" class="avatar" v-if="userInfo.headerImg" />
-            <i class="el-icon-plus avatar-uploader-icon" v-else></i>
-          </el-upload>
+          <div style="display:inline-block" @click="openHeaderChange">
+            <img class="header-img-box" v-if="userInfo.headerImg" :src="userInfo.headerImg" />
+            <div v-else class="header-img-box">从媒体库选择</div>
+          </div>
        </el-form-item>
        <el-form-item label="用户角色" label-width="80px" prop="authorityId">
          <el-cascader
@@ -90,6 +83,7 @@
        <el-button @click="enterAddUserDialog" type="primary">确 定</el-button>
      </div>
    </el-dialog>
+    <ChooseImg ref="chooseImg" :target="userInfo" :targetKey="`headerImg`"/>
  </div>
 </template>

@@ -106,13 +100,12 @@ import {
 import { getAuthorityList } from "@/api/authority";
 import infoList from "@/components/mixins/infoList";
 import { mapGetters } from "vuex";
-import CustomPic from '@/components/customPic'
+import CustomPic from "@/components/customPic";
+import ChooseImg from "@/components/chooseImg";
 export default {
  name: "Api",
  mixins: [infoList],
-  components: {
-		CustomPic
-	},
+  components: { CustomPic,ChooseImg },
  data() {
    return {
      listApi: getUserList,
@@ -129,11 +122,11 @@ export default {
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
-          { min: 6, message: "最低6位字符", trigger: "blur"}
+          { min: 6, message: "最低6位字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入用户密码", trigger: "blur" },
-          { min: 6, message: "最低6位字符", trigger: "blur"}
+          { min: 6, message: "最低6位字符", trigger: "blur" }
        ],
        nickName: [
          { required: true, message: "请输入用户昵称", trigger: "blur" }
@@ -148,6 +141,9 @@ export default {
    ...mapGetters("user", ["token"])
  },
  methods: {
+    openHeaderChange(){
+      this.$refs.chooseImg.open()
+    },
    setOptions(authData) {
      this.authOptions = [];
      this.setAuthorityOptions(authData, this.authOptions);
@@ -155,7 +151,7 @@ export default {
    setAuthorityOptions(AuthorityData, optionsData) {
      AuthorityData &&
        AuthorityData.map(item => {
-          if (item.children&&item.children.length) {
+          if (item.children && item.children.length) {
            const option = {
              authorityId: item.authorityId,
              authorityName: item.authorityName,
@@ -218,7 +214,8 @@ export default {
  }
 };
 </script>
-<style scoped lang="scss">
+<style lang="scss">
+
 .button-box {
  padding: 10px 20px;
  .el-button {
@@ -227,6 +224,15 @@ export default {
 }

 .user-dialog {
+  .header-img-box {
+  width: 200px;
+  height: 200px;
+  border: 1px dashed #ccc;
+  border-radius: 20px;
+  text-align: center;
+  line-height: 200px;
+  cursor: pointer;
+}
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }